antd#Popover JavaScript Examples

renderForeignKey = (text, VerboseNameMap) => {
  console.log(text);
  console.log(VerboseNameMap);
  let items = [];
  for (let key in text) {
    if (key !== 'ty_options_display_txt') {
      let one = <Descriptions.Item label={VerboseNameMap[key]}>{text[key]}</Descriptions.Item>;
      items.push(one);
    }
  }
  return <Space>
    <span>{text.ty_options_display_txt}</span>
    <Popover trigger="click" content={<Descriptions>
      {items}
    </Descriptions>} title="外键数据">
      <InfoCircleTwoTone size="small" />
    </Popover>
  </Space>;
}

render() {
    return (
      <Popover
        content={<a onClick={this.hide}>Close</a>}
        title="Title"
        trigger="click"
        visible={this.state.visible}
        onVisibleChange={this.handleVisibleChange}
      >
        <Button type="primary">Click me</Button>
      </Popover>
    );
  }

render() {
    return (
      <div>
        <h5 className="mb-3">
          <strong>Basic</strong>
        </h5>
        <div className="mb-5">
          <Popover content={content} title="Title" className="mr-3 mb-3">
            <Button type="primary">Default Popover</Button>
          </Popover>
          <Popover
            placement="topLeft"
            title="Title"
            content={content}
            arrowPointAtCenter
            className="mr-3 mb-3"
          >
            <Button>Arrow points to center</Button>
          </Popover>
        </div>
      </div>
    )
  }

render() {

        return (
                <Popover content={this.getPopoverContent()} title="Applied Filters" placement="leftBottom" className="right"
                onClick={this.props.handleFilterBuildParamsButton}>
                    <Button
                        size="medium"
                        className="right"
                        style={{
                            marginBottom: "20px",
                            background: "#316DC1",
                            color: "white"}}

                        onClick={this.props.handleFilterBuildParamsButton}
                        icon={<FilterTwoTone/>}>Advanced Filters
                    </Button>
                    <Button/>
                </Popover>
        );
    }

render() {
        return (
            <Popover
                content={(
                    this.popoverContent()
                )}
                placement='bottom'
            >
                <Icon
                    type="smile-o"
                    style={{
                        fontSize:24,
                        color:'#999'
                    }}
                />
            </Popover>
        )
    }

renderManyToMany = (text) => {
  const color_arr = [
    'green',
    'cyan',
    'blue',
    'geekblue',
    'purple',
    'magenta',
    'red',
    'volcano',
    'orange',
    'gold',
    'lime',
  ];
  const child = [];
  let items = [];
  console.log(text);
  for (let key in text) {
    let value = text[key];
    let one = <Descriptions.Item>
      <Tag color={'blue'}>{value.ty_options_display_txt}</Tag>
    </Descriptions.Item>;
    items.push(one);
  }
  text.forEach((value, index, arr) => {
    if (index < 15) {
      child.push(<Col xs={24} sm={12} md={12} lg={8} xl={6} style={{paddingRight: 4, paddingTop: 4}}>
        <Tag
          color={color_arr[index % 10]}>
          <Ellipsis style={{overflow: 'visible'}} tooltip
                    length={25}>{value.ty_options_display_txt}</Ellipsis>
        </Tag>
      </Col>);
    } else if (index === 15) {
      child.push(<Popover trigger="click" content={<Descriptions>
        {items}
      </Descriptions>} title="多对多数据">
        <Col span={3} style={{paddingTop: 4}}>
          <Tag
            color={color_arr[index % 10]}>...
          </Tag>
        </Col>
      </Popover>);
    }
  });
  return <Row col={12}>{child}</Row>;
}

storiesOf('antd/popover', module).add('arrow-point-at-center', () => 
  <>
    <Popover placement="topLeft" title="Title" content={content}>
      <Button>Align edge / 边缘对齐</Button>
    </Popover>
    <Popover placement="topLeft" title="Title" content={content} arrowPointAtCenter>
      <Button>Arrow points to center / 箭头指向中心</Button>
    </Popover>
  </>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>The arrow points to the center of the target element, which set <code>arrowPointAtCenter</code>.</p></>) } });

renderJob() {
    const { metadata } = this.props.data;
    let data = JSON.parse(metadata);
    if (!data) return '---';
    const { user = { name, email }, commit = { sha, message }, repository } = data;
    return (
      <span>
        <UserInfo name={user.name} /> 的提交{' '}
        <Tag>
          <Icon type="number" />
          {commit.sha.substr(0, 8)}
        </Tag>{' '}
        在 <a href={repository.homepage}>{repository.name}</a> 触发了 Git Job
        <div className={styles.cmLine}>
          <Popover content={commit.message}>
            {commit.message.substr(0, CommitMessageLen)}
            {commit.message.length > CommitMessageLen ? '...' : ''}
          </Popover>
        </div>
      </span>
    );
  }

Filter = memo(function Filter({ tablecolumns, filterColunsFunc, className }) {
  const onChange = (checkedValue) => {
    const filterColunsData = tablecolumns.filter((item) => checkedValue.includes(item.key));
    filterColunsFunc(filterColunsData)
  }

  const filterComponent = (
    <>
      <Checkbox.Group onChange={onChange} defaultValue={tablecolumns.map((item) => item.key)}>
        <ul>
          {
            tablecolumns.length ? tablecolumns.map((item, index) => (
              <li key={index}><Checkbox value={item.key}><span style={{ paddingLeft: '6px' }}>{item.title}</span></Checkbox></li>
            )) : null
          }
        </ul>
      </Checkbox.Group>
    </>
  );

  return (
    <>
      <Popover placement="bottom" content={filterComponent}>
        <Tooltip title='过滤' placement="left">
          <FilterOutlined className={className} />
        </Tooltip>
      </Popover>
    </>
  )
})

renderPush() {
    let { source, metadata = '', operation, user_name } = this.props.data;
    let commitData = JSON.parse(metadata);
    let { user_avatar, commits = [], ref, project } = commitData;

    let commit = null;
    if (ref) {
      let refSplices = ref.split('/');
      ref = refSplices[refSplices.length - 1];
    }
    if (commits.length > 0) commit = commits[0];

    return (
      <span>
        <UserInfo avatar={user_avatar} name={user_name ? user_name : user_name} /> 退送到仓库{' '}
        <a href={project.git_http_url}>{project.name}</a>
        <Tag color="blue" style={{ marginLeft: '10px' }}>
          <Icon type="branches" />
          {ref}
        </Tag>
        <div className={styles.cmLine}>
          {commit ? (
            <Popover content={commit.message}>
              <a target="_blank" href={commit.url}>
                {commit.id.substr(0, 8)}
              </a>{' '}
              {commit.message.substr(0, CommitMessageLen)}
              {commit.message.length > CommitMessageLen ? '...' : ''}
            </Popover>
          ) : (
            '...'
          )}
        </div>
      </span>
    );
  }

render() {
    const { className, count, popupAlign, popupVisible, onPopupVisibleChange, bell } = this.props;
    const noticeButtonClass = classNames(className, styles.noticeButton);
    const notificationBox = this.getNotificationBox();
    const NoticeBellIcon = bell || <Icon type="bell" className={styles.icon} />;
    const trigger = (
      <span className={noticeButtonClass}>
        <Badge count={count} style={{ boxShadow: 'none' }} className={styles.badge}>
          {NoticeBellIcon}
        </Badge>
      </span>
    );
    if (!notificationBox) {
      return trigger;
    }
    const popoverProps = {};
    if ('popupVisible' in this.props) {
      popoverProps.visible = popupVisible;
    }
    return (
      <Popover
        placement="bottomRight"
        content={notificationBox}
        popupClassName={styles.popover}
        trigger="click"
        arrowPointAtCenter
        popupAlign={popupAlign}
        onVisibleChange={onPopupVisibleChange}
        {...popoverProps}
      >
        {trigger}
      </Popover>
    );
  }

render() {
        const {visible, visibleChangeHandler, popupContainer, children} = this.props;
        return (
            <Popover
                title=""
                content={this.renderPopoverContent()}
                visible={visible}
                onVisibleChange={visibleChangeHandler}
                trigger="click"
                placement="leftTop"
                overlayClassName="app-xform-builder-preview-popover"
                getPopupContainer={popupContainer}
            >
                {children}
            </Popover>
        );
    }

render() {
    const hoverContent = <div>This is hover content.</div>;
    const clickContent = <div>This is click content.</div>;
    return (
      <Popover
        style={{ width: 500 }}
        content={hoverContent}
        title="Hover title"
        trigger="hover"
        visible={this.state.hovered}
        onVisibleChange={this.handleHoverChange}
      >
        <Popover
          content={
            <div>
              {clickContent}
              <a onClick={this.hide}>Close</a>
            </div>
          }
          title="Click title"
          trigger="click"
          visible={this.state.clicked}
          onVisibleChange={this.handleClickChange}
        >
          <Button>Hover and click / 悬停并单击</Button>
        </Popover>
      </Popover>
    );
  }

render() {
        const {children, visible, visibleChangeHandler, popupContainer} = this.props;
        return (
            <Popover
                title=""
                content={this.renderPopoverContent()}
                visible={visible}
                onVisibleChange={visibleChangeHandler}
                trigger="click"
                placement="bottomLeft"
                overlayClassName="app-xform-builder-base-config-popover"
                getPopupContainer={popupContainer}
            >
                {children}
            </Popover>
        );
    }

UserPopUpDetails = ({tech}) => {
    const icon =  require('../../img/'+tech.user.avatar)

    return(
        <Popover content={contentPopOver(tech.user)}>
            <Avatar src={icon}/>
        </Popover>
    )
}

storiesOf('antd/popover', module).add('triggerType', () => 
  <div>
    <Popover content={content} title="Title" trigger="hover">
      <Button>Hover me</Button>
    </Popover>
    <Popover content={content} title="Title" trigger="focus">
      <Button>Focus me</Button>
    </Popover>
    <Popover content={content} title="Title" trigger="click">
      <Button>Click me</Button>
    </Popover>
  </div>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Mouse to click, focus and move in.</p></>) } });

PopUpList = ({ tech }) => {
  const [users, setUsers] = useState([]);

  const usersUseTechs = useCallback(async () => {
    const data = await Http.get("/api/techs/projectsUsersTechs/" + tech.id);
    setUsers(data);
  }, [tech]);

  useEffect(() => {
    // Wait for loading data user
    //setLoading(true);

    usersUseTechs();
    //setLoading(false);
    return () => setUsers([]);  
  }, [usersUseTechs]);
  return (
    <div>
      {users.map((user) => {
          user.icon = require("../../img/" + user.avatar);
        return (
          <Popover content={contentPopOver(user)} key={user.id}>
            <Avatar src={user.icon} />
          </Popover>
        );
      })}
    </div>
  );
}

customDot = (dot, { status, index }) => (
  <Popover
    content={
      <span>
        step {index} status: {status}
      </span>
    }
  >
    {dot}
  </Popover>
)

customDot = (dot, { status }) =>
  status === 'process' ? (
    <Popover placement="topLeft" arrowPointAtCenter content={popoverContent}>
      {dot}
    </Popover>
  ) : (
    dot
  )

customDot = (dot, { status }) =>
  status === 'process' ? (
    <Popover placement="topLeft" arrowPointAtCenter content={popoverContent}>
      {dot}
    </Popover>
  ) : (
    dot
  )

ColorPicker = (props) => {
  const { color, zIndex, onColorChange } = props;

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

  const onTemporaryColorChange = (newColor) => {
    const { hex } = newColor;
    setColorPicked(hex);
  };

  const onFinalColorChange = (newColor) => {
    const { hex } = newColor;
    setColorPicked(hex);
    onColorChange(hex);
  };

  const pickerComponent = () => (
    <SketchPicker
      color={colorPicked}
      onChange={onTemporaryColorChange}
      onChangeComplete={onFinalColorChange}
    />
  );

  return (
    <div style={{ zIndex }}>
      <Popover
        content={pickerComponent()}
        placement='bottom'
        trigger='click'
        visible={visible}
        onVisibleChange={(newVisible) => setVisible(newVisible)}
        destroyTooltipOnHide
        zIndex={zIndex}
      >
        <Button
          size='small'
          shape='circle'
          style={{ backgroundColor: colorPicked }}
          onClick={(e) => {
            e.stopPropagation();
            setVisible(true);
          }}
        >
          <Tooltip placement='bottom' title='Change color' mouseEnterDelay={0} mouseLeaveDelay={0}>
            <span>&nbsp;</span>
          </Tooltip>

        </Button>
      </Popover>
    </div>
  );
}

export default function File({
  loading,
  list,
  handleRemove,
}) {
  const { isAdmin, user } = useContext(Context);
  const columns = useMemo(() => [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: 'Date',
      dataIndex: 'createdAt',
      key: 'createdAt',
      render: createdAt => new Date(createdAt).toLocaleString(),
    },
    {
      title: '',
      key: 'op',
      width: 220,
      fixed: 'right',
      render: (text, record) => (
        <div>
          <Popover
            content={(
              <img
                alt="loading"
                style={{ width: 150, height: 150 }}
                src={cdnQrcode(record.key, 'file', isAdmin)}
              />
            )}>
            <Button style={{ marginLeft: 10 }}>
              <QrcodeOutlined />
            </Button>
          </Popover>
          {user && (
            <Popconfirm
              title="Are you sure to delete this ?"
              onConfirm={() => handleRemove(record.objectId)}
            >
              <Button style={{ marginLeft: 10 }} type="danger">
                <DeleteOutlined />
              </Button>
            </Popconfirm>
          )}
          <CopyToClipboard text={cdnUrl(record.key, 'file', isAdmin)}
            onCopy={() => message.success('Copied successfully')}>
            <Button style={{ marginLeft: 10 }} type="primary">Copy</Button>
          </CopyToClipboard>
        </div>
      ),
    },
  ], [handleRemove]);

  return (
    <Table
      loading={loading}
      dataSource={list}
      columns={columns}
      pagination={false}
    />
  );
}

renderPipeline() {
    const { metadata, app_name } = this.props.data;
    let data = JSON.parse(metadata);
    if (!data) return '';
    const {
      user = { name, avatar_url },
      commit = { id, messag, url },
      object_attributes = { status, duration, created_at, finished_at },
      project,
    } = data;

    return (
      <span>
        <UserInfo avatar={user.avatar_url} name={user.name} /> 的提交{' '}
        <a href={commit.url} target="_blank">
          <Icon type="number" />
          {commit.id.substr(0, 8)}
        </a>{' '}
        触发了 Git Pipeline{' '}
        {object_attributes.status ? (
          <Popover
            content={`耗时: ${object_attributes.duration}s | 开始: ${object_attributes.created_at} | 结束: ${object_attributes.finished_at}`}
          >
            {object_attributes.status === 'success' ? (
              <Tag color="green">success</Tag>
            ) : (
              <Tag color="red">{object_attributes.status}</Tag>
            )}
          </Popover>
        ) : (
          ''
        )}
        <div className={styles.cmLine}>
          <span>
            <Popover content={commit.message}>
              {commit.message.substr(0, CommitMessageLen)}
              {commit.message.length > CommitMessageLen ? '...' : ''}
            </Popover>
          </span>
        </div>
      </span>
    );
  }

RecommendDecks = (props) => {
  // const [recommendDecks,setRecommendDecks] = useState(res.data||[])
  const { t } = useTranslation();
  const [recommendDecks, setRecommendDecks] = useState([]);
  const [playerId, setPlayerId] = useState("");
  const searchDeck = async () => {
    if (playerId !== props.player.id) {
      const formData = props.player ? { playerId: props.player.id } : {};
      const res = await axios.post("https://urarawin.com/api/sqlite/searchDeck", formData);
      setRecommendDecks(res.data || []);
      setPlayerId(props.player.id);
    }
  };
  // const deleteDeck = async (deck) => {
  //   const res = await axios.post("https://urarawin.com/api/sqlite/deleteDeck", deck)
  //   searchDeck()
  // }
  return (
    <Popover
      width={"100%"}
      onVisibleChange={searchDeck}
      overlayStyle={{ maxHeight: 800, overflow: "auto" }}
      content={recommendDecks.map((deck) => (
        <div key={deck.id} className="w-full grid grid-cols-8">
          <div className="col-span-full">
            {deck.tags && deck.tags.map((tag) => <Tag key={tag}>{tag}</Tag>)}
          </div>
          {deck.imgUrls.map((imgUrl) => (
            <div className="col-span-1" key={imgUrl}>
              <img src={CDN_SERVER + imgUrl} alt={imgUrl} width={"100"} />
            </div>
          ))}
          <div className="col-span-1">
            <Button type="primary" onClick={() => props.loadDeck(deck)}>
              {t("读取卡组")}
            </Button>
          </div>
        </div>
      ))}
    >
      <Button size="sm" buttonType="outline">
        {t("推荐卡组")}
      </Button>
    </Popover>
  );
}

storiesOf('antd/popover', module).add('basic', () => 
  <Popover content={content} title="Title">
    <Button type="primary">Hover me</Button>
  </Popover>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>The most basic example. The size of the floating layer depends on the contents region.</p></>) } });

EventItem = ({
  city = 'Em todo o estado',
  status = 'F',
  title,
  description,
  event,
  hideAuthor = false
}) => {
  const { author } = event;
  const statusMessages = messages(status);

  return (
    <Timeline.Item
      className={status}
      dot={statusMessages.icon}
      color={statusMessages.color}
    >
      <div className='city'>
        {city}
        {event?.region?.initial && ` - ${event?.region?.initial}`}
        {author && !hideAuthor && author?.name && (
          <Popover
            content={
              <div style={{ textAlign: 'center' }}>
                Evento criado por {author?.name}. <br />
                <a>Clique aqui</a> para fazer parte de nossa equipe de
                colaboradores.
              </div>
            }
          >
            <span className='info'>
              <NotificationOutlined />
              <span>{author.name}</span>
            </span>
          </Popover>
        )}
      </div>
      <div className='meta'>
        <Popover content={<span style={{ textAlign: 'center' }}>{title}</span>}>
          <span className='label'>{title} - </span>
        </Popover>
        <span className='status'>{statusMessages.message} - </span>
        {(event.from_date !== null || event.to_date !== null) && (
          <Popover
            content={<span>Período de vigência do evento em questão.</span>}
          >
            <span className='info'>
              <ClockCircleOutlined />
              <span>
                {event.undefined_ends_date && 'A partir de '}
                {event.from_date && formatDate(event.from_date)}
                {event.to_date && ` - ${formatDate(event.to_date)}`}
              </span>
            </span>
          </Popover>
        )}

        {event?.source?.source && (
          <span className='info'>
            <LinkOutlined />
            <span>Fonte: {event.source.source}</span>
          </span>
        )}
      </div>
      <Text>{description}</Text>
      {event.source?.link && (
        <a href={event.source.link} target='__blank' alt={event.source.source}>
          Ver mais
        </a>
      )}
    </Timeline.Item>
  );
}

storiesOf('antd/popover', module).add('placement', () => 
  <div className="demo">
    <div style={{ marginLeft: buttonWidth, whiteSpace: 'nowrap' }}>
      <Popover placement="topLeft" title={text} content={content} trigger="click">
        <Button>TL</Button>
      </Popover>
      <Popover placement="top" title={text} content={content} trigger="click">
        <Button>Top</Button>
      </Popover>
      <Popover placement="topRight" title={text} content={content} trigger="click">
        <Button>TR</Button>
      </Popover>
    </div>
    <div style={{ width: buttonWidth, float: 'left' }}>
      <Popover placement="leftTop" title={text} content={content} trigger="click">
        <Button>LT</Button>
      </Popover>
      <Popover placement="left" title={text} content={content} trigger="click">
        <Button>Left</Button>
      </Popover>
      <Popover placement="leftBottom" title={text} content={content} trigger="click">
        <Button>LB</Button>
      </Popover>
    </div>
    <div style={{ width: buttonWidth, marginLeft: buttonWidth * 4 + 24 }}>
      <Popover placement="rightTop" title={text} content={content} trigger="click">
        <Button>RT</Button>
      </Popover>
      <Popover placement="right" title={text} content={content} trigger="click">
        <Button>Right</Button>
      </Popover>
      <Popover placement="rightBottom" title={text} content={content} trigger="click">
        <Button>RB</Button>
      </Popover>
    </div>
    <div style={{ marginLeft: buttonWidth, clear: 'both', whiteSpace: 'nowrap' }}>
      <Popover placement="bottomLeft" title={text} content={content} trigger="click">
        <Button>BL</Button>
      </Popover>
      <Popover placement="bottom" title={text} content={content} trigger="click">
        <Button>Bottom</Button>
      </Popover>
      <Popover placement="bottomRight" title={text} content={content} trigger="click">
        <Button>BR</Button>
      </Popover>
    </div>
  </div>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>There are 12 <code>placement</code> options available.</p></>) } });

export default function Keyboard({
  playAudio,
  serverConfig,
  onEnter,
  changeChannel,
  channelList = [],
  channelStatus = {},
}) {
  const { audioList = [] } = serverConfig;

  // channel
  useKeyPress(
    () => true,
    ({ type: keyType, key }) => {
      console.log(key, keyType);

      // channel
      channelList.forEach((channel) => {
        const { pin, keyboard = [], type } = channel;
        keyboard.forEach((pressedKey) => {
          const { name, speed, method, autoReset } = pressedKey;
          if (name.toLocaleLowerCase() === key.toLocaleLowerCase()) {
            if (type === "switch") {
              if (keyType === "keydown") {
                const value = !channelStatus[pin];
                changeChannel({ pin, value });
                return;
              }

              if (keyType === "keyup" && autoReset) {
                changeChannel({ pin, value: 0 });
                return;
              }
            } else {
              if (method === "step") {
                if (keyType === "keydown") {
                  pressedKeyAndChannel.push({ pressedKey, channel });
                }
                if (keyType === "keyup") {
                  pressedKeyAndChannel = pressedKeyAndChannel.filter(
                    ({ pressedKey }) => pressedKey.key === key
                  );
                }
              } else {
                if (keyType === "keydown") {
                  changeChannel({ pin, value: speed });
                }
                if (keyType === "keyup" && autoReset) {
                  changeChannel({ pin, value: 0 });
                }
              }
            }
          }
        });
      });
    },
    {
      events: ["keydown", "keyup"],
    }
  );

  useKeyPress(
    () => true,
    ({ key }) => {
      audioList.forEach(({ path, text, keyboard = "", type }) => {
        if (keyboard.toLocaleLowerCase() === key.toLocaleLowerCase())
          switch (type) {
            case "audio":
              playAudio({ path });
              break;
            case "text":
              playAudio({ text });
              break;
            case "stop":
              playAudio({ stop: true });
              break;
            default:
              break;
          }
      });
    },
    { events: ["keydown"] }
  );

  useKeyPress("enter", onEnter);

  useEffect(() => {
    console.log("changeChannel change");
    const interval = 100;
    const timerId = setInterval(() => {
      pressedKeyAndChannel.forEach(
        ({ pressedKey: { positive, speed = 0.5 }, channel: { pin } }) => {
          let value =
            (localChannelStatus[pin] || 0) +
            ((positive ? 1 : -1) * speed) / (1000 / interval);
          if (value > 1) value = 1;
          if (value < -1) value = -1;
          changeChannel({ pin, value });
        }
      );
    }, interval);
    return () => {
      clearInterval(timerId);
    };
  }, [changeChannel]);

  return (
    <Popover
      placement="topLeft"
      overlayClassName="popovertip"
      content={
        <Descriptions title="键盘" bordered>
          <Descriptions.Item label="播放声音">
            {audioList.map(({ name, keyboard = "", type }, index) => (
              <p key={`${name}-${index}`}>
                {type === "stop" ? (
                  "停止播放"
                ) : (
                  <>
                    播放 <Text code>{name}</Text>
                  </>
                )}
                :<Text keyboard>{keyboard}</Text>
              </p>
            ))}
          </Descriptions.Item>
          {channelList.map(({ pin, name, keyboard = [], type }) => (
            <Descriptions.Item
              key={pin}
              label={
                <>
                  {name} <Text code>通道:{pin}</Text>
                </>
              }
            >
              {keyboard.map(({ name: key, speed, autoReset }) => (
                <p key={key}>
                  {name}
                  <Text code>
                    {type}:{speed}
                  </Text>
                  :<Text keyboard>{key}</Text>
                  {autoReset && <Text type="secondary">释放归位</Text>}
                </p>
              ))}
            </Descriptions.Item>
          ))}
          <Descriptions.Item label="发送文字转语音">
            <Text keyboard>回车</Text>
          </Descriptions.Item>
          <Descriptions.Item label="发送语音/开关控制端麦克风">
            <Text keyboard>空格</Text>
          </Descriptions.Item>
        </Descriptions>
      }
    >
      <Button shape="round">⌨️</Button>
    </Popover>
  );
}

render() {
    const theme = this.props.theme;
    const userPreferences = this.props.userPreferences;
    const themeName = userPreferences.themeName;
    const language = userPreferences.language;
    const currency = userPreferences.currency;
    const content = (
      <div style={{ minWidth: "360px" }}>
        <Row type="flex" justify="space-between">
          <Col span={4}>
            <FontAwesomeIcon
              icon={faGlobeAsia}
              style={{
                width: "24px",
                height: "24px",
                color: theme.textWhite,
              }}
            />
          </Col>
          <Col span={14}>
            <div
              style={{
                fontSize: "1rem",
                color: theme.textWhite,
              }}
            >
              <I s="Language" />
            </div>
            <div
              style={{
                fontSize: "0.85rem",
                color: theme.textDim,
                margin: "8px 0px",
              }}
            >
              <I s="Change the default interface language" />
            </div>
          </Col>
          <Col span={2}>
            <OptionButton
              disabled={language === "en"}
              size="small"
              onClick={() => {
                this.changeLanguage("en");
              }}
            >
              En
            </OptionButton>
          </Col>
          <Col span={2}></Col>
          <Col span={2}>
            <OptionButton
              disabled={language === "zh"}
              size="small"
              onClick={() => {
                this.changeLanguage("zh");
              }}
            >
              中
            </OptionButton>
          </Col>
        </Row>
        <Row
          type="flex"
          style={{
            borderTop: "1px solid " + theme.seperator,
            paddingTop: "12px",
          }}
          justify="space-between"
        >
          <Col span={4}>
            <FontAwesomeIcon
              icon={faCoins}
              style={{
                width: "24px",
                height: "24px",
                color: theme.textWhite,
              }}
            />
          </Col>
          <Col span={14}>
            <div
              style={{
                fontSize: "1rem",
                color: theme.textWhite,
              }}
            >
              <I s="Currency" />
            </div>
            <div
              style={{
                fontSize: "0.85rem",
                color: theme.textDim,
                margin: "8px 0px",
              }}
            >
              <I s="Change the default currency" />
            </div>
          </Col>
          <Col span={2}>
            <OptionButton
              style={{
                width: "36px",
              }}
              disabled={currency === "USD"}
              size="small"
              onClick={() => {
                this.changeCurrency("USD");
              }}
            >
              <I s="USD" />
            </OptionButton>
          </Col>
          <Col
            span={4}
            style={{
              textAlign: "right",
            }}
          >
            <OptionButton
              style={{
                width: "36px",
                marginRight: "-2px",
              }}
              disabled={currency === "CNY"}
              size="small"
              onClick={() => {
                this.changeCurrency("CNY");
              }}
            >
              <I s="CNY" />
            </OptionButton>
          </Col>
        </Row>
        <Row
          type="flex"
          style={{
            borderTop: "1px solid " + theme.seperator,
            paddingTop: "12px",
          }}
          justify="space-between"
        >
          <Col span={4}>
            <FontAwesomeIcon
              icon={faBrush}
              style={{
                width: "24px",
                height: "24px",
                color: theme.textWhite,
              }}
            />
          </Col>
          <Col span={14}>
            <div
              style={{
                fontSize: "1rem",
                color: theme.textWhite,
              }}
            >
              <I s="Theme" />
            </div>
            <div
              style={{
                fontSize: "0.85rem",
                color: theme.textDim,
                margin: "8px 0px",
              }}
            >
              <I s="Choose between dark and light theme" />
            </div>
          </Col>
          <Col span={2}>
            <OptionButton
              disabled={themeName === "light"}
              size="small"
              icon={<FontAwesomeIcon icon={faSun} />}
              style={{
                borderRadius: "50%",
              }}
              onClick={() => {
                this.selectTheme("light");
              }}
            />
          </Col>
          <Col span={2} align="center">
            <OptionButton
              disabled={themeName === "dark"}
              size="small"
              icon={<FontAwesomeIcon icon={faMoon} />}
              style={{
                borderRadius: "50%",
              }}
              onClick={() => {
                this.selectTheme("dark");
              }}
            />
          </Col>
          <Col span={2}>
            <OptionButton
              disabled={themeName === "auto"}
              size="small"
              icon={<FontAwesomeIcon icon={faAdjust} />}
              style={{
                borderRadius: "50%",
              }}
              onClick={() => {
                this.selectTheme("auto");
              }}
            />
          </Col>
        </Row>
      </div>
    );
    return (
      <Popover
        placement={"bottomLeft"}
        mouseLeaveDelay={0.2}
        content={content}
        title={<I s="Settings" />}
        trigger="hover"
        visible={this.props.visible}
        onVisibleChange={this.props.onVisibleChange}
      >
        <FontAwesomeIcon
          icon={faCog}
          style={{
            width: "14px",
            height: "14px",
            marginLeft: "32px",
            marginBottom: "-6px",
          }}
        />
      </Popover>
    );
  }