@ant-design/icons#CloseCircleFilled TypeScript Examples

export default function hoverPanel(hoverStyle: React.CSSProperties | undefined, nodeData: any) {
 
  const getList = (data: any) => {
    if (!data) {
      return
    }
    const properties = nodeData.properties;
    // @ts-ignore
    return <Card title={nodeType[nodeData.type]} style={{ width: 300 }}>
      <p>{properties.usernameZh}{properties.username ? <span>({properties.username})</span> : ''}</p>
      <p>{properties.time}</p>
      {properties.result ? <p>
        {properties.result === '通过' ? <CheckCircleFilled style={{color: 'green'}} /> : <CloseCircleFilled style={{color: 'red'}}/>}
        <span style={{marginLeft: '10px'}}>{properties.result}</span>
      </p> : ''}
      {properties.desc ? <p>说明: {properties.desc}</p> : ''}
    </Card>
  }

  return <div className="hover-panel" style={{ ...hoverStyle }}>
    {getList(nodeData)}
  </div>
}

DeleteButton = (props: any) => {
  const { theme } = React.useContext(PreferencesContext);
  const [isHovered, setIsHovered] = React.useState(false);

  return (
    <div
      {...props}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      style={{ marginLeft: "auto", cursor: "pointer" }}
    >
      {isHovered ? (
        theme === Theme.DARK ? (
          <CloseCircleFilled style={{ color: Colors.SEND_DARK }} />
        ) : (
          <CloseCircleTwoTone twoToneColor={TwoToneColors.SEND} />
        )
      ) : theme === Theme.DARK ? (
        <CloseCircleFilled style={{ color: "gray" }} />
      ) : (
        <CloseCircleOutlined style={{ color: "rgba(0, 0, 0, 0.45)" }} />
      )}
    </div>
  );
}

Warning = (props) => {
    const intl = useIntl()
    const EmployeesMessage = intl.formatMessage({ id: 'menu.Employees' })
    const ShareWarningEmailMessage = intl.formatMessage({ id: 'ticket.shareWarningEmail' }, {
        link: <Link href='/employee'>{EmployeesMessage}</Link>,
        employees: `${props.children[0]} ${props.children[1] ? (`\n${props.children[1]}`) : ''}`,
    })
    const length = props.children.length - 2

    const ShareWarningEmailAndMoreMessage = intl.formatMessage({ id: 'ticket.shareWarningEmailAndMore' }, {
        length,
    })

    const WarningContainer = styled.div`
      background: ${colors.lightRed};
      border-radius: 2px;
      padding: 9px 16px 11px 42px;
      position: relative;
      margin-top: 8px;
      white-space: pre-wrap;
      font-size: 14px;
      line-height: 22px;

      & a {
        color: ${green[6]};
        &:hover,
        &:focus,
        &:active {
          color: ${green[5]};
        }
      }
    `
    return (
        <WarningContainer>
            <CloseCircleFilled css={css`
              border-radius: 7px;
              color: ${colors.brightRed};
              background: ${colors.white};
              position: absolute;
              left: 17px;
              top: 14px;
              height: 14px;
              width: 14px;
            `} />

            {ShareWarningEmailMessage}
            {length > 0 ? ShareWarningEmailAndMoreMessage : ''}
        </WarningContainer>
    )
}

ImageUploader: React.FC<ImageUploaderProps> = (props) => {
  const {value, onChange} = props;
  const [loading, setLoading] = useState<boolean>(false);
  return (
    <Upload
      accept={'.jpg,.png,.jpeg'}
      name='avatar'
      listType='picture-card'
      className={styles.imageUploader}
      showUploadList={false}
      beforeUpload={(file) => {
        if (!['image/jpeg', 'image/png', 'image/jpg'].includes(file.type)) {
          message.error('只能上传jpg和png格式');
          return false;
        }
        if (file.size / 1024 / 1024 > 20) {
          message.error('图片最大20M');
          return false;
        }
        return true;
      }}
      onChange={(info) => {
        if (info.file.status === 'uploading') {
          setLoading(true);
          return;
        }
        if (info.file.status === 'done') {
          setLoading(false);
        }
      }}
      {...(_.omit(props, ['value']))}
    >
      <div>
        {value && (
          <Badge
            count={
              <CloseCircleFilled
                onClick={(e) => {
                  e.preventDefault();
                  e.stopPropagation();
                  if (onChange) {
                    onChange('');
                  }
                  setLoading(false);
                }}
                style={{color: 'rgb(199,199,199)'}}
              />
            }
          >
            <Image
              preview={false}
              className={styles.image}
              src={value}
              fallback={defaultImage}
            />
          </Badge>
        )}
        {!value && (
          <div className={styles.button}>
            {loading ? <LoadingOutlined/> : <PlusCircleFilled/>}
            <div className={styles.text}>上传图片</div>
          </div>
        )}
      </div>
    </Upload>
  );
}

Uploader: React.FC<ImageUploaderProps> = (props) => {
  const {value, onChange, fileType, ...rest} = props;
  const [loading, setLoading] = useState<boolean>(false);
  const {fileInfo, setFileInfo} = props
  return <Upload
    {...rest}
    key={fileType}
    accept={fileMap[fileType].accept}
    name='avatar'
    listType='picture-card'
    className={fileType === 'formImage' ? styles.formImageUploader : styles.uploader}
    showUploadList={false}
    beforeUpload={(file) => {
      if (!fileMap[fileType].contentType.includes(file.type)) {
        message.error(`只能上传${fileMap[fileType].accept}格式`);
        return false;
      }
      if (file.size / 1024 / 1024 > fileMap[fileType].limitSize) {
        message.error(`图片最大${fileMap[fileType].limitSize}M`);
        return false;
      }
      setFileInfo({fileName: file.name, fileSize: String(file.size)})
      return true;
    }}
    onChange={(info) => {
      if (info.file.status === 'uploading') {
        setLoading(true);
        return;
      }
      if (info.file.status === 'done') {
        setLoading(false);
      }
    }}
    {...(_.omit(props, ['value']))}
  >
    <div>
      {value && (
        <Badge
          count={
            <CloseCircleFilled
              onClick={(e) => {
                e.preventDefault();
                e.stopPropagation();
                if (onChange) {
                  onChange('');
                }
                setLoading(false);
              }}
              style={{color: 'rgb(199,199,199)'}}
            />
          }
        >
          {fileMap[fileType].existValueRender(value, fileInfo, fileType)}
        </Badge>
      )}
      {
        !value && fileMap[fileType].noValueRender(loading, fileType)
      }
    </div>
  </Upload>
}

Uploader: React.FC<ImageUploaderProps> = (props) => {
  const {value, onChange, fileType, ...rest} = props;
  const [loading, setLoading] = useState<boolean>(false);
  return <>
    <Upload
      {...rest}
      key={props.currentKey}
      accept={fileMap[fileType].accept}
      name='avatar'
      listType='picture-card'
      className={fileType === 'formImage' ? styles.formImageUploader : styles.uploader}
      showUploadList={false}
      beforeUpload={(file) => {
        if (!fileMap[fileType].contentType.includes(file.type)) {
          message.error(`只能上传${fileMap[fileType].accept}格式`);
          return false;
        }
        if (file.size / 1024 / 1024 > fileMap[fileType].limitSize) {
          message.error(`图片最大${fileMap[fileType].limitSize}M`);
          return false;
        }
        if(fileType==='PDF'){
          // @ts-ignore
          const temp = [...props?.fileInfoAry]
          temp.push({fileName:file.name,fileSize:file.size,key:props.currentKey})
          props?.setFileInfoAry?.(temp || [])
        }
        return true;
      }}
      onChange={(info) => {
        if (info.file.status === 'uploading') {
          setLoading(true);
          return;
        }
        if (info.file.status === 'done') {
          setLoading(false);
        }
      }}
      {...(_.omit(props, ['value']))}
    >
      <div>
        {value && (
          <Badge
            count={
              <CloseCircleFilled
                onClick={(e) => {
                  e.preventDefault();
                  e.stopPropagation();
                  if (onChange) {
                    onChange('');
                  }
                  setLoading(false);
                  if(fileType==='PDF'){
                    // @ts-ignore
                    const temp = [...props?.fileInfoAry]
                    for (let i = 0; i < temp.length; i += 1) {
                      if (temp[i].key === props.currentKey) {
                        temp.splice(i, 1)
                      }
                    }
                    props?.setFileInfoAry?.(temp || [])
                  }
                }}
                style={{color: 'rgb(199,199,199)'}}
              />
            }
          >
            {fileMap[fileType].existValueRender(value, props?.fileInfoAry?.find((item: any) => item.key === props.currentKey) || props.initialFileInfo, fileType)}
          </Badge>
        )}
        {
          !value && fileMap[fileType].noValueRender(loading, fileType)
        }
      </div>
    </Upload>
  </>;
}

RecentTransactions: React.FC = () => {
  const { t } = useTranslation();
  const { theme, disableLiveTransactions } = React.useContext(
    PreferencesContext,
  );

  const { recentTransactions, isConnected, isError } = useSockets();

  return (
    <Card
      size="small"
      title={t("pages.home.recentTransactions")}
      extra={<RecentTransactionsPreferences />}
    >
      <div
        className="sticky"
        style={{
          paddingBottom: "6px",
          zIndex: 1,
          background: theme === Theme.DARK ? "#1e1e1e" : "#fff",
        }}
      >
        <ConfirmationsPerSecond />
        {disableLiveTransactions ? (
          <div style={{ textAlign: "center" }}>
            {theme === Theme.DARK ? (
              <CloseCircleFilled style={{ color: TwoToneColors.SEND_DARK }} />
            ) : (
              <CloseCircleTwoTone twoToneColor={TwoToneColors.SEND} />
            )}
            <Text style={{ marginLeft: "8px" }} id="live-transactions-disabled">
              {t("pages.home.liveUpdatesDisabled")}
            </Text>
          </div>
        ) : null}
        {isConnected &&
        !disableLiveTransactions &&
        !recentTransactions.length ? (
          <div style={{ textAlign: "center" }}>
            <SyncOutlined spin />
            <Text style={{ marginLeft: "8px" }}>
              {t("pages.home.waitingForTransactions")} ...
            </Text>
          </div>
        ) : null}
        {!isConnected && !disableLiveTransactions ? (
          <div style={{ textAlign: "center" }}>
            <SyncOutlined spin />
            <Text style={{ marginLeft: "8px" }}>
              {isError
                ? t("pages.home.reconnectingToBlockchain")
                : t("pages.home.connectingToBlockchain")}
              ...
            </Text>
          </div>
        ) : null}
      </div>
      <div
        className="gradient-container"
        style={{
          maxHeight: "1260px",
          overflow: "hidden",
        }}
      >
        {recentTransactions.length ? (
          <>
            <Timeline recentTransactions={recentTransactions} />
            <div className="bottom-gradient" />
          </>
        ) : null}
      </div>
    </Card>
  );
}

export function BrickAlert(props: BrickAlertProps): React.ReactElement {
  const [show, setShow] = React.useState<boolean>(false);
  const theme = useCurrentTheme();
  const onClose = () => {
    props.onClose?.();
  };
  // istanbul ignore next
  const message = props.enableMessageSlot ? (
    <>
      {props.foldDesc ? (
        <>
          <span style={{ ...props.messageStyle }}>
            <slot name="message"></slot>
          </span>
          <span
            onClick={() => {
              setShow(!show);
            }}
            style={{
              marginLeft: "5px",
              color: "var(--bg-color-button-link)",
              cursor: "pointer",
            }}
          >
            <span style={{ ...props.messageStyle }}>
              {props.foldDescLabel ?? "故障排查"}
            </span>
            <UpOutlined
              rotate={show ? 0 : 180}
              style={{ marginLeft: "4px", lineHeight: "0px", fontSize: "12px" }}
            />
          </span>
        </>
      ) : (
        <div>
          <slot name="message"></slot>
        </div>
      )}
    </>
  ) : (
    <span style={{ ...props.messageStyle }}>{props.message}</span>
  );
  const action = props.enableActionSlot ? (
    <div>
      <slot name="action"></slot>
    </div>
  ) : null;

  let desc = props.enableDescSlot ? (
    <div>
      <slot name="description"></slot>
    </div>
  ) : (
    props.description
  );
  if (props.foldDesc) {
    desc = <div style={{ display: show ? "block" : "none" }}>{desc}</div>;
  }

  const text =
    props.closeOnce && props.closable ? (
      <span style={{ color: "var(--text-color-link)" }}>
        不再提示 <CloseOutlined style={{ color: "var(--text-color-link)" }} />
      </span>
    ) : (
      ""
    );
  // istanbul ignore next

  const getThemeIcon = useCallback(
    (
      lightIcon: React.ReactElement,
      darkIcon: React.ReactElement
    ): React.ReactElement => {
      return theme == "dark-v2" ? darkIcon : lightIcon;
    },
    [theme]
  );
  const customIcon = () => {
    let icon: React.ReactNode;
    let iconRender: any;
    if (props.iconSize === "big") {
      switch (props.type) {
        case "info":
          iconRender = getThemeIcon(
            <BigInfoCircleOutlined />,
            <BigInfoCircleOutlinedDark />
          );
          break;
        case "success":
          iconRender = getThemeIcon(
            <BigSuccessCircleOutlined />,
            <BigSuccessCircleOutlinedDark />
          );
          break;
        case "warning":
          iconRender = getThemeIcon(
            <BigWarningCircleOutlined />,
            <BigWarningCircleOutlinedDark />
          );
          break;
        case "error":
          iconRender = getThemeIcon(
            <BigErrorCircleOutlined />,
            <BigErrorCircleOutlinedDark />
          );
          break;
      }
      icon = <Icon component={() => iconRender} />;
    }
    if (props.iconSize === "small") {
      const iconStyle: CSSProperties = { position: "relative", top: "5px" };
      const componentStyrle: CSSProperties = { fontSize: "14px" };
      switch (props.type) {
        case "info":
          iconRender = <InfoCircleFilled style={componentStyrle} />;
          break;
        case "success":
          iconRender = <CheckCircleFilled style={componentStyrle} />;
          break;
        case "warning":
          iconRender = <ExclamationCircleFilled style={componentStyrle} />;
          break;
        case "error":
          iconRender = <CloseCircleFilled style={componentStyrle} />;
          break;
      }
      icon = <Icon style={iconStyle} component={() => iconRender} />;
    }
    return icon;
  };
  return (
    <Alert
      className={classnames(
        {
          [cssStyle.closeOnce]: props.closeOnce && props.closable,
        },
        props.noBorderRadio ? cssStyle.noBorderRadio : null
      )}
      type={props.type}
      message={message}
      showIcon={props.showIcon}
      closable={props.closable}
      onClose={onClose}
      description={desc}
      closeText={text}
      action={action}
      {...(customIcon() ? { icon: customIcon() } : {})}
    />
  );
}

export default function DateRangePicker(props: Props) {
  const { t } = useTranslation();
  const LeftItems: RelativeRange[] = [
    { num: 5, unit: 'minutes', description: t('minute') },
    { num: 15, unit: 'minutes', description: t('minutes') },
    { num: 30, unit: 'minutes', description: t('minutes') },
    { num: 1, unit: 'hour', description: t('hour') },
    { num: 2, unit: 'hours', description: t('hours') },
    { num: 6, unit: 'hours', description: t('hours') },
    { num: 12, unit: 'hours', description: t('hours') },
    { num: 1, unit: 'day', description: t('天') },
    { num: 1, unit: 'week', description: t('周') },
    { num: 1, unit: 'month', description: t('月') },
    { num: 1, unit: 'quarter', description: t('季度') },
  ];
  const { onChange, value, unit = 's', showRight = true, placement = 'bottom', leftList = LeftItems, nullable = false } = props;
  const [visible, setVisible] = useState(false);
  const [startTime, setStartTime] = useState<Moment>(moment());
  const [endTime, setEndTime] = useState<Moment>(moment());
  const [leftSelect, setLeftSelect] = useState<number>(-1);
  const [label, setLabel] = useState<string>('选择时间');
  const isDatePickerOpen = useRef(false);

  useEffect(() => {
    if (!value) {
      if (!nullable) {
        const defaultSelect = localStorage.getItem('relativeDateIndex') ? Number(localStorage.getItem('relativeDateIndex')) : 3;
        setLeftSelect(defaultSelect);
        emitValue(leftList[defaultSelect]);
      }
      return;
    }
    // 如果外部被赋值，只需要改label和组件展示值，不需要向外抛
    if (isAbsoluteRange(value)) {
      value.start > 0 && value.end > 0 && formatExternalAbsoluteTime(value);
    } else {
      const i = leftList.findIndex(({ num, unit }) => num === value?.num && unit === value.unit);
      setLeftSelect(i === -1 ? 0 : i);
      emitValue(leftList[i]);
    }
  }, [JSON.stringify(value)]);

  const formatLabel = (r: Range, unit: TimeUnit): string => {
    if (isAbsoluteRange(r)) {
      const { start, end } = r;
      return moment(unit === 's' ? start * 1000 : start).format('YYYY.MM.DD HH:mm:ss') + ' 至 ' + moment(unit === 's' ? end * 1000 : end).format('YYYY.MM.DD HH:mm:ss');
    } else {
      const { num, description } = r;
      return `${t('最近')} ${num} ${description}`;
    }
  };

  const formatExternalAbsoluteTime = (value: AbsoluteRange) => {
    const { start, end } = value;
    setStartTime(moment(unit === 's' ? start * 1000 : start));
    setEndTime(moment(unit === 's' ? end * 1000 : end));
    setLabel(formatLabel(value, unit));
  };

  const handleStartTimeChange = (time, timeString) => {
    setStartTime(time);
  };

  const handleEndTimeChange = (time, timeString) => {
    setEndTime(time);
  };

  function endDisabledDate(current) {
    // Can not select days before today and before the start time
    return (
      // (current && current < startTime.endOf('seconds')) ||
      current && current > moment().endOf('seconds')
    );
  }

  function startDisabledDate(current) {
    // Can not select days before today and today
    return (
      // (current && current > endTime.endOf('seconds')) ||
      current && current > moment().endOf('seconds')
    );
  }

  const handleRightOk = () => {
    setVisible(false);
    setLeftSelect(-1);
    localStorage.setItem('relativeDateIndex', '');
    emitValue({
      start: unit === 's' ? startTime.unix() : startTime.valueOf(),
      end: unit === 's' ? endTime.unix() : endTime.valueOf(),
    });
  };

  const handleLeftClick = (i) => {
    setLeftSelect(i);
    localStorage.setItem('relativeDateIndex', i);
    emitValue(leftList[i]);
    setVisible(false);
  };

  const emitValue = (value: Range) => {
    onChange && onChange(value);
    if (value) {
      setLabel(formatLabel(value, unit));
    } else {
      setLabel('选择时间');
    }
  };

  const content = (
    <div className='time-range-picker-wrapper'>
      <div className='time-range-picker-left'>
        {leftList.map(({ num, unit, description }, i) => (
          <Button key={i} type='link' onClick={() => handleLeftClick(i)} className={i === leftSelect ? 'active' : ''}>
            {t('最近')}
            <span className='num'>{num}</span>
            {description}
          </Button>
        ))}
      </div>

      {showRight && (
        <div className='time-range-picker-right'>
          <p className='title'>{t('自定义开始时间')}</p>
          <DatePicker
            showTime
            onChange={handleStartTimeChange}
            value={startTime}
            disabledDate={startDisabledDate}
            onOpenChange={(open) => {
              isDatePickerOpen.current = open;
            }}
          />
          <p className='title'>{t('自定义结束时间')}</p>
          <DatePicker
            showTime
            onChange={handleEndTimeChange}
            value={endTime}
            disabledDate={endDisabledDate}
            onOpenChange={(open) => {
              isDatePickerOpen.current = open;
            }}
          />
          <div className='footer'>
            <Button onClick={() => setVisible(false)}>{t('取消')}</Button>
            <Button type='primary' onClick={handleRightOk} disabled={!startTime || !endTime || startTime.endOf('seconds') >= endTime.endOf('seconds')}>
              {t('确定')}
            </Button>
          </div>
        </div>
      )}
    </div>
  );

  return (
    <Popover
      trigger='click'
      placement={placement}
      content={content}
      overlayClassName='time-range-picker'
      visible={visible}
      getPopupContainer={() => document.body}
      onVisibleChange={(visible) => (visible || !isDatePickerOpen.current) && setVisible(visible)}
    >
      <Button
        className={classNames({
          'time-range-picker-target-nullable': nullable,
        })}
      >
        {label} <CaretDownOutlined />
        {nullable && (
          <CloseCircleFilled
            onClick={(e) => {
              e.stopPropagation();
              e.nativeEvent.stopImmediatePropagation();
              emitValue(undefined as any);
            }}
          />
        )}
      </Button>
    </Popover>
  );
}