antd#Dropdown TypeScript Examples

MyHeader: React.FC = () => {
  const user = useStore((state) => state.user);

  const handleChange = (e: { key: string }) => {
    if (e.key === '0') {
      localStorage.removeItem('vite-react-ts-antd-token');
      window.location.href = '/user/login';
    }
  };

  const menu = (
    <Menu onClick={handleChange}>
      <Menu.Item key="0">退出登录</Menu.Item>
    </Menu>
  );
  return (
    <Header className={cls.layout_header}>
      <Dropdown overlay={menu}>
        <Space>
          <Avatar src={logo} />
          {user?.username}
        </Space>
      </Dropdown>
    </Header>
  );
}

CronInput: React.FC<TProps> = props => {
  const { style, inputStyle, value, onChange, ...passThroughProps } = props;
  const [CronValue, setValue] = useState('');
  const [visible, setVisible] = useState(false);
  const onOk = (value: string) => {
    if (onChange) {
      onChange(value);
    }
    setValue(value);
    setVisible(false);
  };
  const handleVisibleChange = (flag: boolean) => {
    setVisible(flag);
  };
  return (
    <div>
      <Dropdown
        trigger={['click']}
        placement="bottomLeft"
        onVisibleChange={handleVisibleChange}
        visible={visible}
        overlay={<Cron onOk={onOk} value={CronValue} style={style} />}
      >
        <Input value={CronValue} style={inputStyle} {...passThroughProps} />
      </Dropdown>
    </div>
  );
}

export function InsightSaveButton({
    saveAs,
    saveInsight,
    isSaved,
}: {
    saveAs: () => void
    saveInsight: (options: Record<string, any>) => void
    isSaved: boolean | undefined
}): JSX.Element {
    const menu = (
        <Menu>
            <Menu.Item key="2" onClick={saveInsight} data-attr="insight-save-and-continue">
                Save and continue editing
            </Menu.Item>
            {isSaved && (
                <Menu.Item key="3" onClick={saveAs} data-attr="insight-save-as-new-insight">
                    Save as new insight
                </Menu.Item>
            )}
        </Menu>
    )
    return (
        <Dropdown.Button
            style={{ marginLeft: 8 }}
            type="primary"
            onClick={() => saveInsight({ setViewMode: true })}
            overlay={menu}
            data-attr="insight-save-button"
            icon={<IconArrowDropDown data-attr="insight-save-dropdown" style={{ fontSize: 25 }} />}
        >
            Save
        </Dropdown.Button>
    )
}

AddButton: React.FC<{ disabled: boolean }> = React.memo(({ disabled }) => {
  const { t } = useTranslation(I18nKey);
  const [open, setOpen] = useState(false);

  return (
    <Dropdown
      overlay={open ? <FilterForm onCancel={() => setOpen(false)} /> : <div />}
      trigger={["click"]}
      disabled={disabled}
      visible={open}
      overlayStyle={{ zIndex: 1010 }}
      onVisibleChange={(visible) => setOpen(visible)}
    >
      <Tag className="ant-ext-sb__addFilter">{t("label.add")}</Tag>
    </Dropdown>
  );
})

function Animate(props: AnimatePropsType, ref: any) {
	const { value, onChange } = props
	const [dropdownVisible, setDropdownVisible] = useState(false)

	function handleChange(val: any) {
		let animatedClass = val ? `${val} animated` : undefined
		onChange && onChange(animatedClass)
	}

	function renderAnimateBox(animateName: string) {
		const animateClass = animateName ? `${animateName} animated` : ''

		return (
			<div className={styles['animate-wrap']}>
				{/* //这里一定要加上key
            //className是animate.css中的类名，显示不同动画 */}
				<div
					key="amache"
					className={classNames(styles['animate-box'], animateClass)}
				>
					Animate
				</div>
			</div>
		)
	}

	return (
		<Row gutter={10} className={styles['animate-component-warp']}>
			<Col style={{ lineHeight: 0 }} span={14}>
				<TreeSelect
					showSearch
					value={value ? value.split(' ')[0] : ''}
					style={{ width: '100%' }}
					dropdownStyle={{ maxHeight: 300, overflow: 'auto' }}
					placeholder="请选择"
					allowClear
					treeDefaultExpandAll
					dropdownMatchSelectWidth
					className={styles['select-box']}
					onChange={handleChange}
				>
					{map(options, (optGroup) => (
						<TreeNode
							value={optGroup.title}
							title={optGroup.title}
							key={optGroup.title}
							disabled
						>
							{map(optGroup.data, (option) => (
								<TreeNode value={option} title={option} key={option} />
							))}
						</TreeNode>
					))}
				</TreeSelect>
			</Col>
			<Col
				style={{ lineHeight: 0, position: 'relative' }}
				span={10}
				id="drop-down"
			>
				<Dropdown
					visible={dropdownVisible}
					getPopupContainer={(triggerNode: any) => triggerNode}
					overlay={renderAnimateBox(value ? value.split(' ')[0] : '')}
					placement="bottomRight"
				>
					<Button
						size={'small'}
						className={styles['animate-btn']}
						onClick={() => setDropdownVisible(!dropdownVisible)}
					>
						Animate It
					</Button>
				</Dropdown>
			</Col>
		</Row>
	)
}

Header: FC<Props> = props => {
  const navigate = useNavigate();
  const { isCollapsed, toggleCollapsed } = props.collapsed;

  const menu = (
    <Menu
      items={[
        {
          key: 'logout',
          label: 'Logout',
          icon: <LogoutOutlined className="mr-2 align-middle" />,
          className: 'align-middle'
        }
      ]}
      onClick={({ key }) => {
        if (key === 'logout') {
          localStorage.removeItem('token');
          navigate('/login');
        }
      }}
    />
  );

  return (
    <div className="h-full flex items-center justify-between">
      {React.createElement(isCollapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
        className: 'text-2xl',
        onClick: toggleCollapsed
      })}
      <Dropdown overlay={menu} placement="bottom">
        <Avatar size={40} icon={<UserOutlined />} />
      </Dropdown>
    </div>
  );
}

describe("LibraryDropdown", () => {
  it("should work", async () => {
    const wrapper = mount(
      <LibraryDropdown>
        <Button type="link">add library</Button>
      </LibraryDropdown>
    );

    wrapper.find(Dropdown).invoke("onVisibleChange")(true);
    expect(wrapper.find(Dropdown).prop("visible")).toBe(true);

    wrapper.find(LibraryDropdownMenu).invoke("onDraggingChange")(true);
    expect(wrapper.find(Dropdown).prop("visible")).toBe(false);
    wrapper.find(Dropdown).invoke("onVisibleChange")(false);

    wrapper.find(LibraryDropdownMenu).invoke("onDraggingChange")(false);
    expect(wrapper.find(Dropdown).prop("visible")).toBe(false);

    wrapper.find(Dropdown).invoke("onVisibleChange")(true);
    expect(wrapper.find(Dropdown).prop("visible")).toBe(true);
    wrapper.find(LibraryDropdownMenu).invoke("onCloseClick")(null);
    expect(wrapper.find(Dropdown).prop("visible")).toBe(false);
  });
});

export function renderActions<T extends object = any>(
  clsPrefix: string,
  locale: { operation: string },
  actions?: TableRowActions<T> | null,
): Array<ErdaColumnType<T>> {
  if (actions) {
    const { render } = actions;
    return [
      {
        title: locale.operation,
        width: 100,
        dataIndex: 'operation',
        fixed: 'right',
        render: (_: unknown, record: T) => {
          const list = render(record).filter((item) => item.show !== false);

          const menu = (
            <Menu theme="dark">
              {list.map((item, index) => {
                const { title, onClick, disabled = false, disabledTip } = item;
                return (
                  <Menu.Item key={index} onClick={disabled ? undefined : onClick}>
                    <Tooltip title={disabled && disabledTip}>
                      <span
                        className={cn(`${clsPrefix}-menu-item`, {
                          [`${clsPrefix}-menu-item-disabled`]: !!disabled,
                        })}
                        onClick={disabled ? (e: any) => e && e.stopPropagation && e.stopPropagation() : undefined}
                      >
                        {title}
                      </span>
                    </Tooltip>
                  </Menu.Item>
                );
              })}
            </Menu>
          );

          return (
            <span onClick={(e) => e.stopPropagation()}>
              {!!list.length && (
                <Dropdown overlay={menu} align={{ offset: [0, 5] }} trigger={['click']}>
                  <ErdaIcon type="gengduo" size="16" className={`${clsPrefix}-action-more`} />
                </Dropdown>
              )}
            </span>
          );
        },
      },
    ];
  }
  return [];
}

FeedBack = () => {
  const feedbackMenu = (
    <Menu>
      <Menu.Item>
        <div className="rs-feed-group">
          <div className="rs-feed-group__wechat">
            <div className="rs-feed-group__text">微信群(wx号: qiufengblue)</div>
            <div className="bg"></div>
          </div>
          <div className="rs-feed-group__qq">
            <div className="rs-feed-group__text">qq群(699817990)</div>
            <div className="bg"></div>
          </div>
        </div>
      </Menu.Item>
    </Menu>
  );

  return (
    <Dropdown overlay={feedbackMenu}>
      <a
        className="ant-dropdown-link rs-link"
        onClick={(e) => e.preventDefault()}
      >
        交流与反馈
      </a>
    </Dropdown>
  )
}

makeDropdownWidget = (options: IOptions) => {
  const Widget: React.FC<IDropdownWidgetProps> = (props) => {
    const { flowChart } = props;
    const { tooltip, getIcon, getOverlay, handler } = options;
    const iconWrapperCls = [styles.btnWidget];
    let { disabled = false } = options;
    if (typeof disabled === 'function') {
      disabled = disabled(flowChart);
      disabled && iconWrapperCls.push(styles.disabled);
    }
    const onChange = (data: any): void => {
      if (disabled) return;
      handler(flowChart, data);
      flowChart.trigger('toolBar:forceUpdate');
    };
    return (
      <Tooltip title={tooltip}>
        <Dropdown
          disabled={disabled}
          overlay={getOverlay(flowChart, onChange)}
          trigger={['click']}
        >
          <div className={iconWrapperCls.join(' ')}>
            {getIcon(flowChart)} <CaretDownOutlined className={styles.caret} />
          </div>
        </Dropdown>
      </Tooltip>
    );
  };
  return Widget;
}

NodeTemplate = (props: Props) => {
  const { data, action } = props;
  return (
    <div>
      <div className={styles.node}>
        <div className={styles.top}>
          <span className={styles.title}>{data.name}</span>
          <Avatar size="small" icon={<UserOutlined />} />
        </div>

        <div className={styles.content}>
          <div className={styles.item}>
            {data.code!==null&&(<div>
              <span className={styles.mark}>编码</span>
              <span>{data.code}</span>
            </div>)}
            <div>
              <span className={styles.mark}>下级数量</span>
              <span>{data?.children?.length || 0}</span>
            </div>
          </div>
          <div className={styles.action}>
            <Dropdown overlay={action}>
              <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
                <SmallDashOutlined />
              </a>
            </Dropdown>
          </div>
        </div>
      </div>
    </div>
  );
}

PageHeader: React.FC<PageHeaderProps> = ({ plan, user, children }) => {
  const [dropdownVisible, setDropdownVisible] = useState(false)
  return (
    <div className="border-b border-splitBorder mb-0 h-14 flex flex-nowrap">
      <div className="flex-grow">
        <div className="h-14 flex items-center">{children}</div>
      </div>
      <div className={`flex-shrink flex justify-center items-center mx-1`}>
        <NotificationsWidget />
      </div>
      <div className="flex-shrink flex justify-center items-center">
        <Dropdown
          key={"userMenuDropdown"}
          trigger={["click"]}
          visible={dropdownVisible}
          overlay={<DropdownMenu user={user} plan={plan} hideMenu={() => setDropdownVisible(false)} />}
          onVisibleChange={vis => setDropdownVisible(vis)}
        >
          <Button
            className="ml-1 border-primary border-2 hover:border-text text-text hover:text-text"
            size="large"
            shape="circle"
          >
            {abbr(user) || <UserOutlined />}
          </Button>
        </Dropdown>
      </div>
    </div>
  )
}

OptionBuilder = ({ data }) => {
    const { title, options = [] } = data
    const [showMenu, setShowMenu] = useState(false)
    const onShowMenu = useCallback(
        val => () => {
            setShowMenu(val)
        },
        []
    )

    const menu = (
        <Menu>
            {options.map(option => {
                return (
                    <Menu.Item key={option}>
                        <a onClick={option.click}>{option.title}</a>
                    </Menu.Item>
                )
            })}
        </Menu>
    )
    return (
        <div
            className='tree-node-title'
            onMouseEnter={onShowMenu(true)}
            onMouseLeave={onShowMenu(false)}
        >
            <span className='tree-node-title-title'>{title}</span>
            {!!options.length && showMenu && (
                <Dropdown overlay={menu}>
                    <span className='tree-node-title-options'>...</span>
                </Dropdown>
            )}
        </div>
    )
}

ChatInputEmotion: React.FC = React.memo(() => {
  const actionContext = useChatInputActionContext();
  const { appendMsg } = actionContext;

  const [visible, setVisible] = useState(false);

  const handleSelect = useCallback(
    async (code: string) => {
      appendMsg(code);
      setVisible(false);
    },
    [appendMsg]
  );

  const menu = <EmojiPanel onSelect={handleSelect} />;

  return (
    <Dropdown
      visible={visible}
      onVisibleChange={setVisible}
      overlay={menu}
      placement="topRight"
      trigger={['click']}
    >
      <Icon
        className="text-2xl cursor-pointer"
        icon="mdi:emoticon-happy-outline"
      />
    </Dropdown>
  );
})

export function DropdownSelector({
    label,
    value,
    onValueChange,
    options,
    hideDescriptionOnDisplay,
    disabled,
    compact,
}: DropdownSelectorProps): JSX.Element {
    const selectedOption = options.find((opt) => opt.key === value)

    const menu = (
        <Menu>
            {options.map(({ key, hidden, ...props }) => {
                if (hidden) {
                    return null
                }
                return (
                    <Menu.Item key={key}>
                        <SelectItem {...props} onClick={() => onValueChange(key)} />
                    </Menu.Item>
                )
            })}
        </Menu>
    )

    return (
        <>
            {label && <label className="ant-form-item-label">{label}</label>}
            <Dropdown overlay={menu} trigger={['click']} disabled={disabled}>
                <div
                    className={clsx('dropdown-selector', disabled && ' disabled', compact && 'compact')}
                    onClick={(e) => e.preventDefault()}
                >
                    <div style={{ flexGrow: 1 }}>
                        {selectedOption && (
                            <SelectItem
                                {...selectedOption}
                                onClick={() => {}}
                                description={hideDescriptionOnDisplay ? undefined : selectedOption.description}
                            />
                        )}
                    </div>
                    <div className="dropdown-arrow">
                        <IconArrowDropDown />
                    </div>
                </div>
            </Dropdown>
        </>
    )
}

export default function TaskStatus({ task, programId }) {
  const taskMutation = useEditTaskMutation({
    taskId: task.taskId,
    programId,
    projectId: task.projectId,
  })
  const menu = (
    <Menu>
      {Object.values(TaskStatuses).map((status) => (
        <Menu.Item
          key={status}
          style={{
            backgroundColor:
              status !== task.status ? 'transparent' : '#eee',
          }}
        >
          <Button
            type="text"
            onClick={() => {
              if (status !== task.status)
                taskMutation.mutate({ ...task, status })
            }}
          >
            <Tag color={statusMeta[status].bgColor}>
              {statusMeta[status].label}
            </Tag>
          </Button>
        </Menu.Item>
      ))}
    </Menu>
  )

  return (
    <Dropdown overlay={menu}>
      <Tag
        style={{ cursor: 'pointer' }}
        color={statusMeta[task.status].bgColor}
      >
        {taskMutation.isLoading ? (
          <LoadingOutlined />
        ) : (
          statusMeta[task.status].label
        )}
      </Tag>
    </Dropdown>
  )
}

Export: React.FC<ExportProps> = React.memo((props) => {
  const {
    className,
    icon,
    syncCopy = false,
    copyOriginalText = i18n('复制原始数据'),
    copyFormatText = i18n('复制格式化数据'),
    downloadOriginalText = i18n('下载原始数据'),
    downloadFormatText = i18n('下载格式化数据'),
    successText = i18n('操作成功'),
    errorText = i18n('操作失败'),
    sheet,
    fileName,
    ...restProps
  } = props;

  const PRE_CLASS = `${S2_PREFIX_CLS}-export`;

  const copyData = (isFormat: boolean) => {
    const data = getSheetData(sheet, '\t', isFormat);

    copyToClipboard(data, syncCopy)
      .then(() => {
        message.success(successText);
      })
      .catch((error) => {
        // eslint-disable-next-line no-console
        console.log('copy failed: ', error);
        message.error(errorText);
      });
  };

  const downloadData = (isFormat: boolean) => {
    const data = getSheetData(sheet, ',', isFormat);
    try {
      download(data, fileName);
      message.success(successText);
    } catch (err) {
      message.error(errorText);
    }
  };

  const menu = (
    <Menu>
      <Menu.Item key="copyOriginal" onClick={() => copyData(false)}>
        {copyOriginalText}
      </Menu.Item>
      <Menu.Item key="copyFormat" onClick={() => copyData(true)}>
        {copyFormatText}
      </Menu.Item>
      <Menu.Item key="downloadOriginal" onClick={() => downloadData(false)}>
        {downloadOriginalText}
      </Menu.Item>
      <Menu.Item key="downloadFormat" onClick={() => downloadData(true)}>
        {downloadFormatText}
      </Menu.Item>
    </Menu>
  );

  return (
    <Dropdown
      overlay={menu}
      trigger={['click']}
      className={cx(PRE_CLASS, className)}
      {...restProps}
    >
      <a
        className="ant-dropdown-link"
        key="export"
        onClick={(e) => e.preventDefault()}
      >
        {icon || <DotIcon />}
      </a>
    </Dropdown>
  );
})

function SwitchPlatform(props: SwitchPlatformPropsType) {
	const { menus } = props
	const [isMobile, setIsMobile] = useState(false)
	const [mobileModel, setMobileModel] = useState(Object.keys(menus)[0])
	const [isVertical, setIsVertical] = useState(true)

	useEffect(() => {
		const size = isMobile ? [...menus[mobileModel]] : ['100%', '100%']
		!isVertical && size.reverse()
		changePlatform({
			isMobile,
			size,
		})
	}, [isMobile, isVertical, mobileModel])

	const renderMenu = useCallback(() => {
		return (
			<Menu
				selectedKeys={[mobileModel]}
				onClick={({ key }: any) => setMobileModel(key)}
			>
				{map(menus, (_, key) => {
					return <MenuItem key={key}>{key}</MenuItem>
				})}
			</Menu>
		)
	}, [mobileModel])

	const dropProps = isMobile ? {} : { visible: false }
	return (
		<div className={styles['switch-container']}>
			<Dropdown
				overlay={useMemo(() => renderMenu(), [mobileModel])}
				{...dropProps}
				trigger={['hover']}
			>
				<div
					className={styles['switch-platform']}
					onClick={() => setIsMobile(!isMobile)}
				>
					<Icon
						style={{ fontSize: 18 }}
						type={isMobile ? 'android' : 'windows'}
					/>
					<span>{isMobile ? 'mobile' : 'PC'}</span>
				</div>
			</Dropdown>
			{isMobile && (
				<Icon
					onClick={() => setIsVertical(!isVertical)}
					style={{ fontSize: 20 }}
					type={'sync'}
				/>
			)}
		</div>
	)
}

export function LibraryDropdown({
  type,
  onVisbleChange,
  children,
  menuItems,
}: React.PropsWithChildren<LibraryDropdownProps>): React.ReactElement {
  const { t } = useTranslation(NS_NEXT_BUILDER);
  const [visible, setVisible] = useState(false);
  const isOpen = useRef(false);

  const handleVisibleChange = React.useCallback(
    (value: boolean) => {
      isOpen.current = value;
      setVisible(value);
      onVisbleChange?.(value);
    },
    [onVisbleChange]
  );

  const handleClose = React.useCallback(() => {
    setVisible(false);
  }, []);

  const handleDraggingChange = React.useCallback(
    (isDragging: boolean): void => {
      if (isOpen.current) {
        setVisible(!isDragging);
        isOpen.current = !isDragging;
      }
    },
    []
  );

  const content = (
    <Menu style={{ padding: "2px 0" }}>
      <LibraryDropdownMenu
        menuItems={menuItems}
        onCloseClick={handleClose}
        onDraggingChange={handleDraggingChange}
        type={type}
      />
    </Menu>
  );

  return (
    <Dropdown
      overlay={content}
      overlayClassName={shareStyles.customAnimation}
      trigger={["click"]}
      placement="bottomLeft"
      visible={visible}
      onVisibleChange={handleVisibleChange}
    >
      {children}
    </Dropdown>
  );
}

function renderActions<T extends object = any>(actions?: IActions<T>): Array<ColumnProps<T>> {
  if (actions) {
    const { width, render, limitNum } = actions;
    return [
      {
        title: i18n.t('Operations'),
        width,
        dataIndex: 'operation',
        ellipsis: true,
        fixed: 'right',
        render: (_: any, record: T) => {
          const list = render(record);

          const menu = (limitNum || limitNum === 0) && (
            <Menu>
              {list.slice(limitNum).map((item) => (
                <Menu.Item key={item.title} onClick={item.onClick}>
                  <span className="fake-link mr-1">{item.title}</span>
                </Menu.Item>
              ))}
            </Menu>
          );

          return (
            <span className="operate-list">
              {list.slice(0, limitNum).map((item, index: number) => (
                <>
                  {index !== 0 && <Divider type="vertical" />}
                  <span className="fake-link mr-1 align-middle" key={item.title} onClick={item.onClick}>
                    {item.title}
                  </span>
                </>
              ))}
              {menu && (
                <Dropdown overlay={menu} align={{ offset: [0, 5] }}>
                  <Icon />
                </Dropdown>
              )}
            </span>
          );
        },
      },
    ];
  } else {
    return [];
  }
}

HeaderDropdown: React.FC<HeaderDropdownProps> = ({ overlayClassName: cls, ...restProps }) => (
  <Dropdown overlayClassName={classNames(styles.container, cls)} {...restProps} />
)

HeaderDropdown: React.FC<HeaderDropdownProps> = ({ overlayClassName: cls, ...restProps }) => (
  <Dropdown overlayClassName={classNames(styles.container, cls)} {...restProps} />
)

HeaderDropdown: React.FC<HeaderDropdownProps> = ({ overlayClassName: cls, ...restProps }) => (
  <Dropdown overlayClassName={classNames(styles.container, cls)} {...restProps} />
)

EmptyListViewComponent: React.FC<Props> = ({
  title,
  list,
  unit,
  handleAddClick = () => {},
  centered = true,
  dropdownOverlayPlacement = "bottomCenter",
  hideFreeDatabaseSeparateButton = false,
  handleCreateFreeDatabase,
}) => {
  const [creating, setCreating] = useState(false)
  return (
    <div className={centered ? styles.centered : styles.bare}>
      <h3 className="text-2xl">{title}</h3>
      <div className="flex flex-row justify-center items center">
        <div className={`${centered ? "h-32" : ""} w-80`}>
          {list ? (
            <Dropdown placement={dropdownOverlayPlacement} trigger={["click"]} overlay={list}>
              <Button type="primary" className="w-80" size="large" icon={<PlusOutlined />}>{`Add ${unit}`}</Button>
            </Dropdown>
          ) : (
            <Button
              type="primary"
              onClick={handleAddClick}
              className="w-80"
              size="large"
              icon={<PlusOutlined />}
            >{`Add ${unit}`}</Button>
          )}
        </div>
        {!hideFreeDatabaseSeparateButton && handleCreateFreeDatabase && (
          <>
            <div className={`${centered ? "h-32" : ""}  px-3 pt-2`}>or</div>
            <div className={`${centered ? "h-32" : ""}  w-80`}>
              <Button
                loading={creating}
                type="primary"
                className="w-80"
                size="large"
                icon={<CheckOutlined />}
                onClick={async () => {
                  setCreating(true)
                  try {
                    await handleCreateFreeDatabase()
                  } catch (e) {
                    handleError(e)
                  }
                }}
              >
                Create a free database
              </Button>
              <div className="text-xs text-secondaryText text-center mt-2">
                Create a free PostgresSQL database with 10,000 row limit
              </div>
            </div>
          </>
        )}
      </div>
    </div>
  )
}

WebPdm: React.FunctionComponent<IWebPdmProps> = (props) => {
    return <WebPdmCore
        IconRenders={IconRenders}
        components={{ Input, Button, Dropdown, Menu, Select, Tooltip, Tree, Popover }}
        {...props} />
}

ConnectButton = (props: ConnectButtonProps) => {
  const { children, disabled, allowWalletChange, className, ...rest } = props;
  const { wallet, connect, connected } = useWallet();
  const { setVisible } = useWalletModal();
  const open = useCallback(() => setVisible(true), [setVisible]);

  const handleClick = useCallback(
    () => (wallet ? connect().catch(() => {}) : open()),
    [wallet, connect, open],
  );

  // only show if wallet selected or user connected

  if (!wallet || !allowWalletChange) {
    return (
      <Button
        className={className || 'connector'}
        {...rest}
        onClick={e => {
          props.onClick ? props.onClick(e) : null;
          handleClick();
        }}
        disabled={connected && disabled}
      >
        {connected ? children : 'Connect Wallet'}
      </Button>
    );
  }

  return (
    <Dropdown.Button
      className={className || (connected ? 'connector' : '')}
      onClick={handleClick}
      disabled={connected && disabled}
      overlay={
        <Menu className={'black-dropdown'}>
          <Menu.Item onClick={open}>Change Wallet</Menu.Item>
        </Menu>
      }
    >
      Connect
    </Dropdown.Button>
  );
}

ChatInputAddon: React.FC = React.memo(() => {
  const actionContext = useChatInputActionContext();
  if (actionContext === null) {
    return null;
  }

  const handleSendImage = (files: FileList) => {
    // 发送图片
    const image = files[0];
    if (image) {
      // 发送图片
      uploadMessageImage(image).then(({ url, width, height }) => {
        actionContext.sendMsg(
          getMessageTextDecorators().image(url, { width, height })
        );
      });
    }
  };

  const menu = (
    <Menu>
      <FileSelector
        fileProps={{ accept: 'image/*' }}
        onSelected={handleSendImage}
      >
        <Menu.Item>{t('发送图片')}</Menu.Item>
      </FileSelector>

      {pluginChatInputActions.map((item, i) => (
        <Menu.Item
          key={item.label + i}
          onClick={() => item.onClick(actionContext)}
        >
          {item.label}
        </Menu.Item>
      ))}
    </Menu>
  );

  return (
    <Dropdown overlay={menu} placement="topRight" trigger={['click']}>
      <Icon
        className="text-2xl cursor-pointer"
        icon="mdi:plus-circle-outline"
      />
    </Dropdown>
  );
})

render() {
    const { curComparison } = this.state;
    const handleClick = (e) => {
      const index = this.state.curComparison.findIndex(cc => cc === e.key)
      let newCurComparison
      if (index === -1) {
        newCurComparison = [
          ...this.state.curComparison,
          e.key
        ]
        this.setState({
          curComparison: newCurComparison
        })
      } else {
        let curComparisonCopy = [...this.state.curComparison]
        curComparisonCopy.splice(index, 1)
        newCurComparison = curComparisonCopy
        this.setState({
          curComparison: curComparisonCopy
        })
      }
      const { onChange, relativeTimeComparison, comparisonOptions } = this.props;
      onChange({
        ...this.refresh(),
        comparison: newCurComparison,
        relativeTimeComparison,
        comparisonOptions,
      });
    }
    const menu = (
      <Menu onClick={handleClick} selectedKeys={curComparison}>
        <Menu.Item key='1d'>1d</Menu.Item>
        <Menu.Item key='7d'>7d</Menu.Item>
      </Menu>
    )
    return (
      <div className="graph-config-inner-comparison">
        {/* <Select
          dropdownMatchSelectWidth={false}
          mode="multiple"
          style={{ minWidth: 80, width: 'auto', verticalAlign: 'middle' }}
          value={curComparison}
          onChange={this.handleComparisonChange}>
          <Option key={'1d'} value={'1d'}>1天</Option>
          <Option key={'7d'} value={'7d'}>7天</Option>
        </Select> */}
        {this.state.curComparison.map(cc =>
          <Tag key={cc} closable onClose={e => {
            handleClick({key: cc})
          }}>
            {cc}
          </Tag>
        )}
        <Dropdown overlay={menu}>
          <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
            <PlusCircleOutlined />
          </a>
        </Dropdown>
      </div>
    );
  }

Headers: React.FC<Iprops> = (props) => {
  const { collapsed } = props;
  const [fullScreen, setFullScreen] = useState(false); // 当前是否是全屏状态
  // 进入全屏
  const requestFullScreen = useCallback(() => {
    const element: HTMLElement & Element = document.documentElement;
    // 判断各种浏览器，找到正确的方法
    const requestMethod =
      element.requestFullscreen || // W3C
      element.webkitRequestFullscreen || // Chrome等
      element.mozRequestFullScreen || // FireFox
      element.msRequestFullscreen; // IE11
    if (requestMethod) {
      requestMethod.call(element);
    }
    setFullScreen(true);
  }, []);

  // 退出登录
  const onMenuClick = useCallback(
    (e) => {
      // 退出按钮被点击
      if (e.key === "logout") {
        props.onLogout();
      }
    },
    [props]
  );

  // 退出全屏
  const exitFullScreen = useCallback(() => {
    // 判断各种浏览器，找到正确的方法
    const element: Document & Element = document;
    const exitMethod =
      element.exitFullscreen || // W3C
      element.mozCancelFullScreen || // firefox
      element.webkitExitFullscreen || // Chrome等
      element.msExitFullscreen; // IE11

    if (exitMethod) {
      exitMethod.call(document);
    }
    setFullScreen(false);
  }, []);
  const toggle = () => {
    props.setColl(!collapsed);
  };
  return (
    <Header className="site-layout-background header" style={{ padding: 0 }}>
      <Tooltip title={props.collapsed ? "展开菜单" : "收起菜单"}>
        {React.createElement(
          collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
          {
            className: "trigger",
            onClick: toggle,
          }
        )}
      </Tooltip>
      <div className="rightBox">
        <Tooltip placement="bottom" title={fullScreen ? "退出全屏" : "全屏"}>
          <div className="full all_center">
            {fullScreen ? (
              <FullscreenExitOutlined
                className="icon"
                onClick={exitFullScreen}
              />
            ) : (
              <FullscreenOutlined
                className="icon"
                onClick={requestFullScreen}
              />
            )}
          </div>
        </Tooltip>
        <Dropdown
          overlay={
            <Menu className="menu" selectedKeys={[]} onClick={onMenuClick}>
              <Menu.Item key="user">
                <Link to="/home/user/admin">
                  <UserOutlined />
                  个人中心
                </Link>
              </Menu.Item>
              <Menu.Item key="message">
                <Link to="/home/user/level">
                  <MessageOutlined />
                  个人设置
                </Link>
              </Menu.Item>
              <Menu.Divider />
              <Menu.Item key="logout">
                <LogoutOutlined />
                退出登录
              </Menu.Item>
            </Menu>
          }
          placement="bottomRight"
        >
          <div className="userhead all_center">
            <SmileOutlined />
            <span className="username">admin</span>
          </div>
        </Dropdown>
      </div>
    </Header>
  );
}