Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 | 1x 1x 1x 1x 1x | import React from "react"; import classNames from "classnames"; import { Button } from "../button"; import { Icon } from "../icon"; import { StyledProps } from "../_type"; import { useDefault } from "../_util/use-default"; import { useConfig } from "../_util/config-context"; export interface AlertNoticeProps extends StyledProps { /** * 通告标题 */ title?: React.ReactNode; /** * 通告内容 */ children?: React.ReactNode; /** * 是否默认展开 */ defaultOpen?: boolean; /** * 是否展开(受控) */ open?: boolean; /** * 展开变化回调(受控) */ onOpenChange?: (open: boolean) => void; } export function AlertNotice({ title, children, className, style, open, defaultOpen, onOpenChange, }: AlertNoticeProps) { const [isOpened, setIsOpened] = useDefault(open, defaultOpen, onOpenChange); const { classPrefix } = useConfig(); const alertClassName = classNames( `${classPrefix}-alert`, `${classPrefix}-alert--notice`, isOpened && "is-expanded", className ); const alertElement = ( <div className={alertClassName} style={style}> <span className={`${classPrefix}-alert__decoration`}> <Icon type="notice-blue" /> </span> <div className={`${classPrefix}-alert__info`}> <p>{title}</p> {isOpened && children} </div> <div className={`${classPrefix}-alert__operational`}> {children && ( <Button type="icon" icon={isOpened ? "arrowup" : "arrowdown"} onClick={() => setIsOpened(!isOpened)} /> )} </div> </div> ); return alertElement; } |