All files / src/alert AlertNotice.tsx

83.33% Statements 5/6
87.5% Branches 7/8
50% Functions 1/2
83.33% Lines 5/6

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;
}