@ant-design/icons#CloseOutlined TypeScript Examples

MultiTabs = observer(() => {
  if (!tabs.tabs.length) {
    return null;
  }

  return (
    <Tabs activeKey={tabs.currentTab?.key} onChange={onTabChange} className={styles.tab}>
      {tabs.tabs.map((item) => (
        <TabPane
          tab={
            <Space size={10}>
              <FormattedMessage id={item.title}/>
              <CloseOutlined
                role={"button"}
                tabIndex={0}
                className={classNames(styles.icon, styles.closeButton)}
                onKeyDown={(e) => handleCloseKeyDown(e, item)}
                onClick={(e) => handleCloseClick(e, item)}
              />
            </Space>
          }
          key={item.key}
        >
          <TabContent item={item} />
        </TabPane>
      ))}
    </Tabs>
  );
})

export function LibraryDropdownMenu({
  onCloseClick,
  onDraggingChange,
  type,
  menuItems,
}: LibraryDropdownMenuProps): React.ReactElement {
  const libraryRef = useRef<any>();
  const handleCategoryChange = (category: string): void => {
    libraryRef.current?.handleSearchWithGroup("", category);
  };

  return (
    <div className={styles.wrapper}>
      <Button type="text" onClick={onCloseClick} className={styles.closeBtn}>
        <CloseOutlined />
      </Button>
      <div className={styles.libraryContainer}>
        <LibraryMenu
          menuItems={menuItems}
          onItemClick={handleCategoryChange}
          defaultSelectedKeys={[LIB_ALL_CATEGORY]}
        />
        <AdvancedBrickLibrary
          ref={libraryRef}
          onDraggingChange={onDraggingChange}
          type={type}
        />
      </div>
    </div>
  );
}

export function Announcement(): JSX.Element | null {
    const { shownAnnouncementType, cloudAnnouncement, closable } = useValues(announcementLogic)
    const { preflight } = useValues(preflightLogic)
    const { hideAnnouncement } = useActions(announcementLogic)

    let message: JSX.Element | undefined
    if (preflight?.demo) {
        message = (
            <b>
                Welcome to PostHog's demo environment. To level up,{' '}
                <a href="https://posthog.com/signup">deploy your own PostHog instance or sign up for PostHog Cloud</a>.
            </b>
        )
    } else if (shownAnnouncementType === AnnouncementType.CloudFlag && cloudAnnouncement) {
        message = <ReactMarkdown className="strong">{cloudAnnouncement}</ReactMarkdown>
    } else if (shownAnnouncementType === AnnouncementType.GroupAnalytics) {
        message = <GroupsIntroductionBanner />
    }

    return (
        <div className={clsx('Announcement', !shownAnnouncementType && 'Announcement--hidden')}>
            {message}
            {closable && (
                <CloseOutlined
                    className="Announcement__close"
                    onClick={() => hideAnnouncement(shownAnnouncementType)}
                />
            )}
        </div>
    )
}

Aside: React.FC = React.memo(() => {
  const { t } = useTranslation(I18nKey);
  const { selected, editConfig } = useContext(Context);

  const [active, setActive] = useState<string | string[]>(["widgets"]);

  useLayoutEffect(() => {
    setActive(selected ? ["config", "widgets"] : ["widgets"]);
  }, [selected]);

  return (
    <div className="ant-ext-pm__aside">
      <Collapse activeKey={active}>
        {selected && (
          <Collapse.Panel
            key="config"
            showArrow={false}
            header={t("label.config")}
            extra={<CloseOutlined onClick={() => editConfig(undefined)} />}
          >
            <Config />
          </Collapse.Panel>
        )}
        <Collapse.Panel showArrow={false} key="widgets" header={t("label.widgets")}>
          <WidgetList />
        </Collapse.Panel>
      </Collapse>
    </div>
  );
})

// New UI for inline inline messages (e.g. info/warning/error)
export function InlineMessage({
    children,
    style,
    icon = <ExclamationCircleFilled />,
    type = 'info',
    closable,
    onClose,
}: InlineMessageProps): JSX.Element {
    const [shown, setShown] = useState(true)

    const handleClose = (): void => {
        setShown(false)
        onClose?.()
    }

    return (
        <div className={clsx('inline-message', type, closable && 'closable', !shown && 'hidden')} style={style}>
            <div className="inline-icon">{icon}</div>
            <div className="inline-main">{children}</div>
            {closable && (
                <div className="closable" onClick={handleClose}>
                    <CloseOutlined />
                </div>
            )}
        </div>
    )
}

LivePreference: React.FC<Props> = ({ isDetailed }) => {
  const { t } = useTranslation();
  const {
    disableLiveTransactions,
    setDisableLiveTransactions,
  } = React.useContext(PreferencesContext);

  return (
    <Row>
      <Col xs={isDetailed ? 24 : 18}>
        <Text className={isDetailed ? "preference-detailed-title" : ""}>
          {t("preferences.liveTransactions")}
        </Text>
      </Col>
      {isDetailed ? (
        <Col xs={18}>
          <Text>
            {t("preferences.liveTransactionsDetailed")}
          </Text>
        </Col>
      ) : null}

      <Col xs={6} style={{ textAlign: "right" }}>
        <Switch
          checkedChildren={<CheckOutlined />}
          unCheckedChildren={<CloseOutlined />}
          onChange={(checked: boolean) => {
            setDisableLiveTransactions(!checked);
          }}
          checked={!disableLiveTransactions}
        />
      </Col>
    </Row>
  );
}

function QuestionDetailRow({ studentQuestion }: { studentQuestion: Question }) {
  return (
    <QuestionDetails>
      <ColWithRightMargin flex="4 4">
        <InfoHeader>question</InfoHeader>
        <div>{studentQuestion.text}</div>
      </ColWithRightMargin>
      <Col flex="0.5 0.5 95px">
        <InfoHeader>type</InfoHeader>
        <div>{studentQuestion.questionType}</div>
      </Col>
      <Col flex="0 0 89px">
        <InfoHeader>groupable</InfoHeader>
        <div>
          {studentQuestion.groupable ? <CheckOutlined /> : <CloseOutlined />}
        </div>
      </Col>
    </QuestionDetails>
  );
}

AutoReplyPreviewModal: React.FC<AutoReplyPreviewModalProps> = (props) => {
  const { visible, setVisible, autoReply } = props;
  return (
    <div className={styles.maskContainer} style={{ display: visible ? 'block' : 'none' }}
         onClick={() => setVisible(false)}>
      <div className={styles.previewContainer}
           onClick={(e) => {
             e.stopPropagation();
           }}>
        <AutoReplyPreview autoReply={autoReply} />
        <div className={styles.closeContainer} onClick={() => setVisible(false)}>
          <CloseOutlined />
        </div>
      </div>
    </div>
  );
}

ThemePreference: React.FC<Props> = ({ isDetailed }) => {
  const { t } = useTranslation();
  const { theme, setTheme } = React.useContext(PreferencesContext);

  return (
    <Row>
      <Col xs={isDetailed ? 24 : 18}>
        <Text className={isDetailed ? "preference-detailed-title" : ""}>
          {t("preferences.darkMode")}
        </Text>
      </Col>
      {isDetailed ? (
        <Col xs={18}>
          <Text>{t("preferences.darkModeDetailed")}</Text>
        </Col>
      ) : null}

      <Col xs={6} style={{ textAlign: "right" }}>
        <Switch
          checkedChildren={<CheckOutlined />}
          unCheckedChildren={<CloseOutlined />}
          onChange={(checked: boolean) => {
            setTheme(checked ? Theme.DARK : Theme.LIGHT);
          }}
          checked={theme === Theme.DARK}
        />
      </Col>
    </Row>
  );
}

BuildingPanelTopModal: React.FC<IBuildingPanelTopModalProps> = ({ visible, onClose, title, children }) => (
    <TopModal visible={visible}>
        <Row justify={'space-between'} align={'top'}>
            <Col span={22}>
                {title !== null && (
                    <Typography.Title level={4} style={BUILDING_TOP_MODAL_TITLE_STYLE}>{title}</Typography.Title>
                )}
            </Col>
            <Col span={2}>
                <Button onClick={onClose} icon={<CloseOutlined />} size={'small'} type={'text'} />
            </Col>
        </Row>
        <Row>
            {children}
        </Row>
    </TopModal>
)

NatriconsPreferences: React.FC<Props> = ({ isDetailed }) => {
  const { t } = useTranslation();
  const [account] = React.useState(
    DEVELOPER_FUND_ACCOUNTS[
      Math.floor(Math.random() * DEVELOPER_FUND_ACCOUNTS.length)
    ],
  );
  const { natricons, setNatricons } = React.useContext(PreferencesContext);

  return (
    <div style={{ display: "flex", alignItems: "flex-start" }}>
      <Natricon
        account={account}
        style={{
          margin: "-12px -6px -18px -18px ",
          width: "80px",
          height: "80px",
        }}
      />

      <Row style={{ width: "100%" }}>
        <Col xs={isDetailed ? 24 : 18}>
          <Text className={isDetailed ? "preference-detailed-title" : ""}>
            {t("preferences.natricons")}
          </Text>
        </Col>
        {isDetailed ? (
          <Col xs={18}>
            <Text>{t("preferences.natriconsDetailed")}</Text>
          </Col>
        ) : null}

        <Col xs={6} style={{ textAlign: "right" }}>
          <Switch
            checkedChildren={<CheckOutlined />}
            unCheckedChildren={<CloseOutlined />}
            onChange={(checked: boolean) => {
              setNatricons(checked);
            }}
            checked={natricons}
          />
        </Col>
      </Row>
    </div>
  );
}

DeviceList: React.FC<{
  updateCurWH: (values: number[]) => void;
}> = memo(({ updateCurWH }) => {
  useEffect(() => {
    updateCurWH(initValues);
  }, [updateCurWH]);

  const [curW, setCurW] = useState<number>(initValues[0]);
  const [curH, setCurH] = useState<number>(initValues[1]);
  const [disabled, setDisabled] = useState(true);
  const onChangeW = value => {
    setCurW(Math.min(value, 768));
  };

  const onChangeH = value => {
    setCurH(value);
  };

  const onBlur = () => {
    updateCurWH([curW, curH]);
  };
  const changeDeviceKey = deviceKey => {
    const values = DEVICE_LIST[deviceKey] || [curW, curH];

    const isCustom = deviceKey === 'custom';
    setDisabled(!isCustom);
    setCurW(values[0]);
    setCurH(values[1]);
    updateCurWH(values);
  };

  return (
    <StyledWrap>
      <Space>
        <Select
          defaultValue={ListKeys[0]}
          style={{ width: 180 }}
          onChange={changeDeviceKey}
          size="small"
        >
          {ListKeys.map(item => {
            return (
              <Option key={item} value={item}>
                {item}
              </Option>
            );
          })}
        </Select>
        <div>
          <InputNumber
            size="small"
            value={curW}
            disabled={disabled}
            onChange={onChangeW}
            onBlur={onBlur}
          />
          <CloseOutlined />
          <InputNumber
            size="small"
            disabled={disabled}
            value={curH}
            onChange={onChangeH}
            onBlur={onBlur}
          />
        </div>
      </Space>
    </StyledWrap>
  );
})

export function FunctionDebuggerStatusbar({
  coverage,
  testStats,
}: FunctionDebuggerStatusbarProps): React.ReactElement {
  const coverageIsOk = coverage && coverage.status !== "failed";
  const totalCoverage = useMemo(
    () => (coverageIsOk ? getTotalCoverage(coverage) : null),
    [coverageIsOk, coverage]
  );
  const coverageStats = useMemo(
    () => (coverageIsOk ? getCoverageStats(coverage) : null),
    [coverageIsOk, coverage]
  );

  return (
    <div className={styles.debuggerStatusbar} data-override-theme="dark">
      <div className={styles.coverage}>
        {coverage == null ? (
          <span>
            <span className={styles.coverageIcon}>
              <QuestionOutlined />
            </span>
            <span>Coverage: expired</span>
          </span>
        ) : testStats?.failed > 0 ? (
          <span className={styles.hasFailedTests}>
            <span className={styles.coverageIcon}>
              <WarningOutlined />
            </span>
            <span>
              {testStats.failed}/{testStats.total} tests failed!
            </span>
          </span>
        ) : coverageIsOk ? (
          <>
            <span
              className={
                totalCoverage < 60
                  ? styles.coverageLow
                  : totalCoverage < 90
                  ? styles.coverageMedium
                  : totalCoverage < 100
                  ? styles.coverageHigh
                  : styles.coverageFull
              }
            >
              <span className={styles.coverageIcon}>
                {totalCoverage < 100 ? <WarningOutlined /> : <CheckOutlined />}
              </span>
              <span>Coverage: {totalCoverage}%</span>
            </span>
            {Object.entries(coverageStats).map(
              ([type, { covered, total, percentage }]) => (
                <span key={type} className={styles.subCoverage}>
                  <span>{upperFirst(type)}: </span>
                  <span>
                    {percentage}% ({covered}/{total})
                  </span>
                </span>
              )
            )}
          </>
        ) : (
          <span className={styles.coverageFailed}>
            <span className={styles.coverageIcon}>
              <CloseOutlined />
            </span>
            <span>{(coverage as RawCoverageFailed).error}</span>
          </span>
        )}
      </div>
    </div>
  );
}

ComposeMessageModal: React.FC<IProps> = (props) => {
    const dispatch = useDispatch();
    const history = useHistory();

    const clickSearchResultCallback = (user: IUser) => {
        if (props.userID === user.id) return;
        dispatch(initiateChat(user));
        props.closeModal();

        if (window.screen.width < 800) {
            history.push(`/chat/${user.username}`);
        }
    }

    return (
        <Modal
            isOpen={props.isOpen}
            onAfterOpen={props.onAfterOpen}
            onRequestClose={props.closeModal}
            contentLabel="Compose Message Modal"
            className="modal"
            shouldCloseOnOverlayClick={true}
            overlayClassName="modal-overlay"
        >
            <div className="relative transition-all pb-8 min-h-18rem">
                <div
                    className="absolute right-2 top-2 p-1 rounded-full flex items-center justify-center cursor-pointer hover:bg-gray-200 dark:hover:bg-indigo-1100"
                    onClick={props.closeModal}
                >
                    <CloseOutlined className="p-2  outline-none text-gray-500 dark:text-white" />
                </div>
                <h3 className="py-4 px-8 flex dark:text-white">
                    <FormOutlined className="mr-2" />
                    Compose Message
                </h3>
                <div className="flex justify-start px-8 mt-4">
                    <h4 className="mr-2 pt-2 dark:text-white">To: </h4>
                    <SearchInput
                        floatingResult={false}
                        clickItemCallback={clickSearchResultCallback}
                        showNoResultMessage={true}
                        preventDefault={true}
                    />
                </div>
            </div>

        </Modal>
    );
}

StaffTreeSelect: React.FC<StaffTreeSelectProps> = (props) => {
  const { value, onChange, options: allStaffs, ...rest } = props;
  const [staffSelectionVisible, setStaffSelectionVisible] = useState(false);
  const allStaffMap = _.keyBy<StaffOption>(allStaffs, 'ext_id');

  return (
    <>
      <Select
        {...rest}
        mode='multiple'
        placeholder='请选择员工'
        allowClear={true}
        value={value || []}
        open={false}
        maxTagCount={rest?.maxTagCount || 2}
        tagRender={(tagProps) => {
          // @ts-ignore
          const staff: StaffOption = allStaffMap[tagProps.value];
          return (
            <span className={'ant-select-selection-item'}>
              <span className={styles.avatarAndName}>
                <img
                  src={staff?.avatar_url}
                  className={styles.avatar}
                  style={{ width: 20, height: 20, marginRight: 3 }}
                />
                <div className='flex-col align-left'>
                  <span>{staff?.name}</span>
                </div>
              </span>
              <span
                className='ant-select-selection-item-remove'
                style={{ marginLeft: 3 }}
                onClick={(e) => {
                  e.preventDefault();
                  e.stopPropagation();
                  // @ts-ignore
                  onChange(value.filter((extStaffID: string) => extStaffID !== staff?.ext_id));
                }}
              >
                <CloseOutlined />
              </span>
            </span>
          );
        }}
        onClear={() => {
          // @ts-ignore
          onChange([]);
        }}
        onClick={() => {
          setStaffSelectionVisible(!staffSelectionVisible);
        }}
      />

      <StaffTreeSelectionModal
        visible={staffSelectionVisible}
        setVisible={setStaffSelectionVisible}
        defaultCheckedStaffs={value?.map((extStaffID: string) => allStaffMap[extStaffID])}
        onFinish={(values) => {
          // @ts-ignore
          onChange(values.map((staff) => staff.ext_id));
        }}
        allStaffs={allStaffs}
      />
    </>
  );
}

DeleteCommentModal: React.FC<IProps> = (props) => {
    const [isDeleting, setIsDeleting] = useState(false);
    const [error, setError] = useState<IError | null>(null);
    const dispatch = useDispatch();
    const targetComment = useSelector((state: IRootReducer) => state.helper.targetComment);

    const handleDeleteComment = async () => {
        try {
            setIsDeleting(true);
            targetComment && await deleteComment(targetComment.id);

            closeModal();
            targetComment && props.deleteSuccessCallback(targetComment);
            toast.dark('Comment successfully deleted.', {
                progressStyle: { backgroundColor: '#4caf50' },
                autoClose: 2000
            });
        } catch (e) {
            setIsDeleting(false);
            setError(e);
        }
    };

    const closeModal = () => {
        if (props.isOpen) {
            props.closeModal();
            dispatch(setTargetComment(null));
        }
    }

    return (
        <Modal
            isOpen={props.isOpen}
            onAfterOpen={props.onAfterOpen}
            onRequestClose={closeModal}
            contentLabel="Delete Comment"
            className="modal"
            shouldCloseOnOverlayClick={!isDeleting}
            overlayClassName="modal-overlay"
        >
            <div className="relative">
                <div
                    className="absolute right-2 top-2 p-1 rounded-full flex items-center justify-center cursor-pointer hover:bg-gray-200 dark:hover:bg-indigo-1100"
                    onClick={closeModal}
                >
                    <CloseOutlined className="p-2  outline-none text-gray-500 dark:text-white" />
                </div>
                {error && (
                    <span className="block p-4 bg-red-100 text-red-500 w-full">
                        {error?.error?.message || 'Unable process request. Please try again.'}
                    </span>
                )}
                <div className="p-4 laptop:px-8">
                    <h2 className="dark:text-white">
                        <ExclamationCircleOutlined className="text-red-500 mr-2 pt-2" />
                        Delete Comment
                    </h2>
                    <p className="text-gray-600 my-4 dark:text-white">Are you sure you want to delete this comment?</p>
                    <div className="flex justify-between">
                        <button
                            className="button--muted !rounded-full dark:bg-indigo-1100 dark:text-white dark:hover:bg-indigo-1100"
                            onClick={closeModal}
                        >
                            Cancel
                        </button>
                        <button
                            className="button--danger"
                            disabled={isDeleting}
                            onClick={handleDeleteComment}
                        >
                            Delete
                        </button>
                    </div>
                </div>
            </div>

        </Modal>
    );
}

FilterTransactionsPreferences: React.FC<Props> = ({ isDetailed }) => {
  const { t } = useTranslation();
  const {
    filterTransactions,
    filterTransactionsRange,
    setFilterTransactions,
  } = React.useContext(PreferencesContext);

  const range = `${
    units.find(({ raw }) => raw === filterTransactionsRange[1])?.display
  } - ${
    units.find(({ raw }) => raw === filterTransactionsRange[0])?.display ||
    t("pages.preferences.noLimit")
  }`;

  return (
    <>
      <Row>
        <Col xs={18}>
          <Text style={{ whiteSpace: "nowrap", paddingRight: "18px" }}>
            {isEqual(filterTransactionsRange, DEFAULT_UNITS) ? (
              t("preferences.filterTransactions")
            ) : (
              <>
                {t("preferences.filterTransactionsRange")}
                <br />
                <strong>{range}</strong>
              </>
            )}
          </Text>

          <br />
          <Link to="/preferences" style={{ whiteSpace: "nowrap" }}>
            {t("preferences.filterTransactionsRangeDetailed")}
          </Link>
        </Col>

        <Col xs={6} style={{ textAlign: "right" }}>
          <Switch
            checkedChildren={<CheckOutlined />}
            unCheckedChildren={<CloseOutlined />}
            onChange={(checked: boolean) => {
              setFilterTransactions(checked);
            }}
            checked={filterTransactions}
          />
        </Col>
      </Row>
    </>
  );
}

LogoutModal: React.FC<IProps> = (props) => {
    const onCloseModal = () => {
        if (!props.isLoggingOut) {
            props.closeModal();
        }
    }

    return (
        <Modal
            isOpen={props.isOpen}
            onAfterOpen={props.onAfterOpen}
            onRequestClose={props.closeModal}
            contentLabel="Example Modal"
            className="modal"
            shouldCloseOnOverlayClick={!props.isLoggingOut}
            overlayClassName="modal-overlay"
        >
            <div className="relative">
                <div
                    className="absolute right-2 top-2 p-1 rounded-full flex items-center justify-center cursor-pointer hover:bg-gray-200 dark:hover:bg-indigo-1100"
                    onClick={onCloseModal}
                >
                    <CloseOutlined className="p-2  outline-none text-gray-500 dark:text-white" />
                </div>
                {props.error && (
                    <span className="p-4 bg-red-100 text-red-500 block">
                        {props.error?.error?.message || 'Unable to process your request.'}
                    </span>
                )}
                <div className="p-4 laptop:px-8">
                    <h2 className="dark:text-white">Confirm Logout</h2>
                    <p className="text-gray-600 my-4 dark:text-gray-400">Are you sure you want to logout?</p>
                    <div className="flex justify-between">
                        <button
                            className="button--muted !rounded-full dark:bg-indigo-1100 dark:text-white dark:hover:bg-indigo-1100 dark:hover:text-white"
                            onClick={props.closeModal}
                            disabled={props.isLoggingOut}
                        >
                            Cancel
                        </button>
                        <button
                            className="button--danger"
                            disabled={props.isLoggingOut}
                            onClick={props.dispatchLogout}
                        >
                            {props.isLoggingOut ? 'Logging Out' : 'Logout'}
                        </button>
                    </div>
                </div>
            </div>

        </Modal>
    );
}

export default function ImageUpload(props: IProps) {
  const { value, onChange } = props;
  const handleDelete = function(){
    onChange('');
  };

  const uploadButton = (
    <div>
      <PlusOutlined />
      <div style={{ marginTop: 8 }}>Upload</div>
    </div>
  );

  const customRequest = async function(options:any){
    const fileName = `${uuidv4()}.png`;
    await ossClient.put(`design/${fileName}`, options.file);
    onChange(`https://scorpio-design.lxzyl.cn/design/${fileName}`);
    options.onSuccess(null, options.file);
  };

  return (
    <div className="picture-uploader">
      <Upload
        listType="picture-card"
        showUploadList={false}
        // onChange={handleChange}
        customRequest={customRequest}
      >
        {value ? (
          <div className="picture-uploader-img-container">
            <img src={value} alt="avatar" style={{ width: '100%' }} />
          </div>
        ) : uploadButton}
      </Upload>
      {
        value && <div className="delete-img" onClick={handleDelete}><CloseOutlined /></div>
      }
    </div>

  );
}

Size: React.FC<SizeProps> = ({ value, onChange }) => {
  return (
    <>
      <Select
        defaultValue={models[0].key}
        onChange={key => {
          const modal = models.find(modal => modal.key === key);
          onChange?.({
            key: modal?.key || 'custom',
            width: modal?.width || value?.width || '0',
            height: modal?.height || value?.height || '0',
          });
        }}
      >
        <>
          <Option value="custom">自定义</Option>
          {models.map(({ key }) => {
            return (
              <Option value={key} key={key}>
                {key}
              </Option>
            );
          })}
        </>
      </Select>
      <div className={styles.inputNumbers}>
        <InputNumber
          min={0}
          value={value?.width ?? 0}
          formatter={value => `${value}px`}
          disabled={value?.key !== 'custom'}
          parser={value => value?.replace('px', '') || ''}
          onChange={width => {
            if (width) {
              onChange?.({
                key: 'custom',
                width: `${String(width)}`,
                height: value?.height || '0',
              });
            }
          }}
        />
        <span className={styles.close}>
          <CloseOutlined />
        </span>
        <InputNumber
          min={0}
          value={value?.height ?? 0}
          formatter={value => `${value}px`}
          disabled={value?.key !== 'custom'}
          parser={value => value?.replace('px', '') || ''}
          onChange={height => {
            if (height) {
              onChange?.({
                key: 'custom',
                width: value?.width || '0',
                height: `${String(height)}`,
              });
            }
          }}
        />
      </div>
    </>
  );
}

CoverPhotoOverlay: React.FC<IProps> = (props) => {
    return (
        <div
            className={`w-full h-full laptop:bg-black laptop:bg-opacity-50 absolute flex items-center justify-center laptop:invisible transition-all ${props.coverPhoto.imageFile.file ? 'z-10' : 'z-0'}`}
            ref={props.coverPhotoOverlayRef}
        >
            <input
                type="file"
                hidden
                accept="image/*"
                onChange={props.coverPhoto.onFileChange}
                readOnly={props.isUploadingCoverPhoto}
                id="cover"
            />
            {props.isOwnProfile && (
                <>
                    {props.isUploadingCoverPhoto ? <Loader mode="light" /> : (
                        <>
                            {props.coverPhoto.imageFile.file ? (
                                <div className="flex">
                                    <button className="button--danger !rounded-full" onClick={props.coverPhoto.clearFiles}>
                                        <CloseOutlined className="text-xl text-white" />
                                    </button>
                                            &nbsp;
                                    <label
                                        className="button--muted !rounded-full cursor-pointer"
                                        htmlFor="cover"
                                    >
                                        Change
                                            </label>
                                            &nbsp;
                                    <button onClick={props.handleSaveCoverPhoto}>Save</button>
                                </div>
                            ) : (
                                <label
                                    className="p-3 laptop:p-4 bg-indigo-700 absolute right-4 top-4  laptop:relative text-white font-medium rounded-full cursor-pointer hover:bg-indigo-800"
                                    htmlFor="cover"
                                >
                                    {window.screen.width > 800 ? 'Change Cover Photo' : (
                                        <CameraOutlined className="text-xl text-white" />
                                    )}
                                </label>

                            )}
                        </>
                    )}
                </>
            )}

        </div>
    );
}

InputConfirm: React.FC<TInputConfirmProps> = (props) => {
  const {value, onValueChange, tooltip} = props
  const [newValue, setNewValue] = useState('')
  const [isEditing, setIsEditing] = useState(false)
  const [loading, setLoading] = useState(false)

  useEffect(() => {
    setNewValue(value ?? '')
  }, [value])

  return (
    <Row>
      <Col flex="auto">
        {!isEditing ? (
          value ?? ''
        ) : (
          <Tooltip title={tooltip ?? ''}>
            <Input
              value={newValue}
              onChange={(e) => setNewValue(e.target.value)}
              style={{width: '100%'}}
            />
          </Tooltip>
        )}
      </Col>
      <Col>
        {!isEditing ? (
          <Tooltip title={'Edit'} key="edit">
            <Button
              size="small"
              type="text"
              icon={<EditOutlined />}
              onClick={() => setIsEditing(true)}
            ></Button>
          </Tooltip>
        ) : (
          <>
            <Tooltip title={loading ? '' : 'Cancel'} color="red" key="cancel">
              <Button
                size="small"
                type="text"
                disabled={loading}
                icon={<CloseOutlined />}
                onClick={() => {
                  setIsEditing(false)
                }}
                danger
              ></Button>
            </Tooltip>
            <Tooltip title={loading ? '' : 'Save'} color="green">
              <Button
                size="small"
                type="text"
                disabled={loading}
                loading={loading}
                style={{color: 'green'}}
                icon={<CheckOutlined />}
                onClick={async () => {
                  try {
                    setLoading(true)
                    await (onValueChange ?? (() => undefined))(newValue)
                  } finally {
                    setIsEditing(false)
                    setLoading(false)
                  }
                }}
              ></Button>
            </Tooltip>
          </>
        )}
      </Col>
    </Row>
  )
}

EntityFilter = ({entityName, onFilterApply, className}: EntityFilterProps) => {
  const intl = useIntl();
  const [form] = useForm();
  const metadata = useMetadata();
  const [selectedProperty, setSelectedProperty] = useState<string>();
  const [availableProperties, setAvailableProperties] = useState<string[]>(getAvailableProperties(metadata.entities, entityName));

  const availablePropertiesOptions = availableProperties.map(propertyName => ({
    label: <Msg entityName={entityName} propertyName={propertyName}/>,
    value: propertyName,
  }));

  const onAddProperty = (add: (defaultValue: JmixEntityFilter) => void) => {
    add({[selectedProperty!]: {_eq: ""}});
    setSelectedProperty(undefined);
  };

  const onFilterChange = (changedFields: any) => {
    const filter: (JmixEntityFilter[] | undefined) = changedFields.find((field: any) => field?.name[0] === "filter")?.value;
    if (Array.isArray(filter)) {
      setAvailableProperties(getAvailableProperties(metadata.entities, entityName, getProperties(filter)));
    }
  }

  return (
    <Form
      validateMessages={createAntdFormValidationMessages(intl)}
      layout="vertical"
      form={form}
      className={className}
      onFieldsChange={onFilterChange}
    >
      <Form.List name="filter">
        {((fields, {add, remove}) => (
          <Space direction="vertical" size="middle">
            <Space direction="horizontal" align="end">
              <Form.Item label="Filters" style={{marginBottom: 0}}>
                <Select
                  showSearch
                  style={{width: 200}}
                  placeholder={intl.formatMessage({id: "jmix.entityFilter.selectFilter"})}
                  value={selectedProperty}
                  onSelect={setSelectedProperty}
                  options={availablePropertiesOptions}
                />
              </Form.Item>
              <Button
                icon={<PlusOutlined/>}
                disabled={selectedProperty === undefined}
                onClick={() => onAddProperty(add)}
              >
                {intl.formatMessage({id: "jmix.entityFilter.addFilter"})}
              </Button>
            </Space>
            {fields.map(field => {
              const propertyName = getProperty(form.getFieldValue(["filter", field.name]));
              return (
                <Form.Item
                  key={field.key}
                  label={<Msg entityName={entityName} propertyName={propertyName}/>}
                  style={{marginBottom: 0}}
                >
                  <Space direction="horizontal">
                    <Form.Item name={[field.name, propertyName, "_eq"]} noStyle>
                      <Input placeholder={intl.formatMessage({id: "jmix.entityFilter.enterFilterValue"})}/>
                    </Form.Item>
                    <CloseOutlined onClick={() => remove(field.name)}/>
                  </Space>
                </Form.Item>
              )
            })}
            <Button type="primary" onClick={() => onFilterApply?.(form.getFieldValue("filter"))}>
              {intl.formatMessage({id: "jmix.entityFilter.applyFilter"})}
            </Button>
          </Space>
        ))}
      </Form.List>
    </Form>
  )
}

GroupChatSelect: React.FC<GroupChatTreeSelectProps> = (props) => {
  const { value, onChange, allGroupChats, ...rest } = props;
  const [groupChatSelectionVisible, setGroupChatSelectionVisible] = useState(false);
  const allGroupChatMap = _.keyBy<GroupChatOption>(allGroupChats, 'ext_chat_id');

  return (
    <>
      <Select
        {...rest}
        mode='multiple'
        placeholder='请选择群聊'
        allowClear={true}
        value={value}
        open={false}
        maxTagCount={5}
        tagRender={(tagProps) => {
          // @ts-ignore
          const groupChat: GroupChatOption = allGroupChatMap[tagProps.value];
          return (
            <span className={'ant-select-selection-item'}>
              <span className={styles.selectedItem}>
                <div className={styles.avatar}>
                  <UsergroupAddOutlined style={{ color: 'rgba(0,0,0,0.65)' }} />
                </div>
                <div className='flex-col align-left'>
                  <span>{groupChat?.name}</span>
                </div>
              </span>
              <span
                className='ant-select-selection-item-remove'
                style={{ marginLeft: 3 }}
                onClick={(e) => {
                  e.preventDefault();
                  e.stopPropagation();
                  // @ts-ignore
                  onChange(value.filter((extGroupChatID: string) => extGroupChatID !== groupChat?.ext_chat_id));
                }}
              >
                <CloseOutlined />
              </span>
            </span>
          );
        }}
        onClear={() => {
          // @ts-ignore
          onChange([]);
        }}
        onClick={() => {
          setGroupChatSelectionVisible(!groupChatSelectionVisible);
        }}
      />

      <GroupChatSelectionModal
        visible={groupChatSelectionVisible}
        setVisible={setGroupChatSelectionVisible}
        defaultCheckedGroupChats={value?.map((extGroupChatID: string) => allGroupChatMap[extGroupChatID])}
        onFinish={(values) => {
          // @ts-ignore
          onChange(values.map((groupChat) => groupChat.ext_chat_id));
        }}
        allGroupChats={allGroupChats}
      />
    </>
  );
}

export function CloseButton(props: Record<string, any>): JSX.Element {
    return (
        <span {...props} className={'btn-close cursor-pointer ' + (props.className ?? '')} style={{ ...props.style }}>
            <CloseOutlined />
        </span>
    )
}

SchemaConfig = (props: IProps) => {
  const { type, data, configIndex } = props;
  const { dataImport } = useStore();
  const { verticesConfig, updateVerticesConfig, updateEdgeConfig } = dataImport;

  const addTag = index => {
    updateVerticesConfig({
      index,
      key: 'tags',
      value: [...verticesConfig[index].tags, {
        name: '',
        props: []
      }]
    });
  };

  const handleRemove = (event, index: number) => {
    event.stopPropagation();
    if(type === 'vertices') {
      updateVerticesConfig({ index });
    } else {
      updateEdgeConfig({ index });
    }
  };
  return (
    <Collapse
      bordered={false}
      defaultActiveKey={['default']}
      className={styles.configCollapse}
    >
      <Panel header={<>
        <span>{type} {configIndex + 1}</span>
        <CSVPreviewLink file={data.file} selected={true}>
          {data.file.name}
        </CSVPreviewLink>
      </>} key="default" extra={<CloseOutlined className={styles.btnClose} onClick={(e) => handleRemove(e, configIndex)} />}>
        <div className={styles.configItem}>
          {type === 'vertices' && <div className={styles.idRow}>
            <span className={styles.label}>vertexID</span>
            <CSVPreviewLink
              onMapping={columnIndex =>
                updateVerticesConfig({
                  index: configIndex,
                  key: 'idMapping',
                  value: columnIndex
                })
              }
              file={data.file}
            >
              {data.idMapping === null ? 'Select CSV Index' : `Column ${data.idMapping}`}
            </CSVPreviewLink>
          </div>}
          {type === 'vertices' && data.tags.map((tag, tagIndex) => <TagConfig key={tagIndex} file={data.file} tag={tag} tagIndex={tagIndex} configIndex={configIndex} />)}
          {type === 'edge' && <EdgeConfig configIndex={configIndex} edge={data} />}
          {type === 'vertices' && <div className={styles.btns}>
            <Button className="primaryBtn studioAddBtn" onClick={() => addTag(configIndex)}>
              <Icon className="studioAddBtnIcon" type="icon-studio-btn-add" />
              {intl.get('import.addTag')}
            </Button>
          </div>}
        </div>
      </Panel>
    </Collapse>
  );
}

export function PayCard({ title, caption, docsLink, identifier }: PayCardProps): JSX.Element | null {
    const { preflight } = useValues(preflightLogic)
    const { push } = useActions(router)
    const [shown, setShown] = useState(false)
    const storageKey = `pay-gate-dismissed-${identifier}`
    const { reportPayGateDismissed, reportPayGateShown } = useActions(eventUsageLogic)

    const handleClick = (): void => {
        if (preflight?.cloud) {
            push('/organization/billing')
        } else {
            window.open('https://posthog.com/pricing', '_blank')
        }
    }

    const close = (e: React.MouseEvent): void => {
        // TODO
        e.stopPropagation()
        setShown(false)
        window.localStorage.setItem(storageKey, '1')
        reportPayGateDismissed(identifier)
    }

    useEffect(() => {
        if (!window.localStorage.getItem(storageKey)) {
            setShown(true)
            reportPayGateShown(identifier)
        }
    }, [])

    if (!shown) {
        return null
    }

    return (
        <div className="pay-card">
            <div className="close-button" onClick={close}>
                <CloseOutlined />
            </div>
            <Row onClick={handleClick}>
                <Col span={23}>
                    <h3>{title}</h3>
                    <p>
                        {caption}
                        {docsLink && (
                            <>
                                {' '}
                                <a
                                    href={`${docsLink}?utm_medium=in-product&utm_campaign=${identifier}`}
                                    target="_blank"
                                    rel="noopener"
                                    onClick={(e) => e.stopPropagation()}
                                >
                                    Learn more <ArrowRightOutlined />
                                </a>
                            </>
                        )}
                    </p>
                    {preflight?.cloud ? (
                        <p>
                            Click to <b>set up your billing details and gain access to these features.</b>
                        </p>
                    ) : (
                        <p>
                            Click to <b>explore license options.</b>
                        </p>
                    )}
                </Col>
                <Col span={1} style={{ display: 'flex', alignItems: 'center' }}>
                    <ArrowRightOutlined style={{ color: 'var(--muted-alt)', fontSize: '1.2em' }} />
                </Col>
            </Row>
        </div>
    )
}

DepartmentTreeSelect: React.FC<DepartmentTreeSelectProps> = (props) => {
  const {value, onChange, options: allDepartments, ...rest} = props;
  const [departmentSelectionVisible, setDepartmentSelectionVisible] = useState(false);
  const allDepartmentMap = _.keyBy<DepartmentOption>(allDepartments, 'ext_id');
  return (
    <>
      <Select
        {...rest}
        mode="multiple"
        placeholder="请选择部门"
        allowClear={true}
        value={value}
        open={false}
        maxTagCount={rest.maxTagCount || 2}
        tagRender={(tagProps) => {
          // @ts-ignore
          const department: DepartmentOption = allDepartmentMap[tagProps.value];
          if (!department) {
            return <></>
          }

          return (
            <span className={'ant-select-selection-item'}>
              <div className="flex-col align-left">
                <FolderFilled
                  style={{
                    color: '#47a7ff',
                    fontSize: 20,
                    marginRight: 6,
                    verticalAlign: -6,
                  }}
                />
                {department?.name}
              </div>
              <span
                className="ant-select-selection-item-remove"
                style={{marginLeft: 3}}
                onClick={(e) => {
                  e.preventDefault();
                  e.stopPropagation();
                  // @ts-ignore
                  onChange(
                    value.filter(
                      // @ts-ignore
                      (extDepartmentID: string) => extDepartmentID !== department?.ext_id,
                    ),
                  );
                }}
              >
                <CloseOutlined/>
              </span>
            </span>
          );
        }}
        onClear={() => {
          // @ts-ignore
          onChange([]);
        }}
        onClick={() => {
          setDepartmentSelectionVisible(!departmentSelectionVisible);
        }}
      />

      <DepartmentSelectionModal
        visible={departmentSelectionVisible}
        setVisible={setDepartmentSelectionVisible}
        defaultCheckedDepartments={value?.map((id: string) => allDepartmentMap[id])}
        onFinish={(values) => {
          // @ts-ignore
          onChange(values.map((item) => item.ext_id));
        }}
        allDepartments={allDepartments}
      />
    </>
  );
}

DownloadItem = ({
  item,
  index,
  onOpenFile,
  onPauseOrResume,
  onOpenFolder,
  onCancel,
}: DownloadProps) => {
  return (
    <div className={styles['download-item-container']} key={item.id}>
      {/* 下载进度 */}
      {item.state === 'progressing' && (
        <div
          className={styles['download-item-progress']}
          style={{ width: `${item.progress * 100}%` }}
        />
      )}

      <div className={styles['download-item-main']}>
        {/* 下载项的图标 */}
        <div className={styles['file-icon']} onDoubleClick={() => onOpenFile?.(item.path)}>
          <img src={item.icon} />
        </div>
        {/* 文件名、下载大小、速度 */}
        <div className={styles['file-info']}>
          <Tooltip title={item.fileName}>
            <p className={styles['file-name']}>{item.fileName}</p>
          </Tooltip>
          <div className={styles['file-desc']}>
            {item.state === 'progressing' ? (
              <>
                <div className={styles['file-size']}>
                  {getFileSize(item.receivedBytes, false)}/{getFileSize(item.totalBytes)}
                </div>
                <span className={styles['download-speed']}>{getFileSize(item.speed)}/s</span>
              </>
            ) : null}
            {item.state === 'completed' && <p>{getFileSize(item.totalBytes)}</p>}
          </div>
        </div>
        {/* 操作 */}
        <div className={styles.operating}>
          {item.state === 'progressing' && (
            <IconButton
              title={item.paused ? '恢复' : '暂停'}
              className={styles['operating-item']}
              onClick={() => onPauseOrResume?.(item)}>
              {item.paused ? <CaretRightOutlined /> : <PauseOutlined />}
            </IconButton>
          )}

          {item.state === 'completed' && (
            <IconButton
              title='打开所在位置'
              className={styles['operating-item']}
              onClick={() => onOpenFolder?.(item.path)}>
              <FolderViewOutlined />
            </IconButton>
          )}

          <IconButton
            title={`${item.state === 'progressing' ? '取消并' : ''}移除下载`}
            className={styles['operating-item']}
            onClick={() => onCancel?.(item, index)}>
            <CloseOutlined />
          </IconButton>
        </div>
      </div>
    </div>
  )
}