antd#Select JavaScript Examples

render() {
    let { dataSource, fetching } = this.state;

    const children = dataSource.map((item, index) => (
      <Option key={index} value={'' + item.id}>
        {item.username}
      </Option>
    ));

    // if (!children.length) {
    //   fetching = false;
    // }
    return (
      <Select
        mode="multiple"
        style={{ width: '100%' }}
        placeholder="请输入用户名"
        filterOption={false}
        optionLabelProp="children"
        notFoundContent={fetching ? <span style={{ color: 'red' }}> 当前用户不存在</span> : null}
        onSearch={this.handleSearch}
        onChange={this.handleChange}
      >
        {children}
      </Select>
    );
  }

render() {
    const apps = [];

    return (
      <Modal
        title="导入应用和配置文件"
        visible={this.state.showAddProject}
        onCancel={() => {
          this.setState({
            showAddProject: false,
          });
        }}
        footer={null}
        destroyOnClose
      >
        <div>
          <Select
            showSearch
            style={{ width: '80%', marginLeft: '8px' }}
            placeholder="选择应用"
            value={this.state.appName}
            onChange={this.changeApp}
            onSelect={(e) => {}}
            allowClear
          >
            {apps.map((v, i) => {
              return (
                <Option key={v.aid} value={v.app_name}>
                  {v.app_name}
                </Option>
              );
            })}
          </Select>
        </div>
      </Modal>
    );
  }

render() {
    const { minder, toolbar = {}, isLock } = this.props;
    const customTheme = toolbar.theme || Object.keys(theme);
    let options = [];
    for (let i = 0; i < customTheme.length; i++) {
      options.push(
        <Select.Option key={customTheme[i]} value={customTheme[i]}>
          {theme[customTheme[i]]}
        </Select.Option>
      );
    }
    return (
      <div className="nodes-actions" style={{ width: 120 }}>
        <Select
          dropdownMatchSelectWidth={false}
          value={minder.queryCommandValue('Theme')}
          onChange={this.handleThemeChange}
          getPopupContainer={(triggerNode) => triggerNode.parentNode}
          disabled={isLock}
        >
          {options}
        </Select>
      </div>
    );
  }

ExportCSV = () => {
  const [selectedItem, setSelectedItem] = useState(null);

  // 获取excel列表
  const list = useFetch(getAllTableList);

  const handleChange = value => {
    console.log(`selected ${value}`);
    setSelectedItem(value);
  };

  return (
    <div>
      <Select style={{ width: 200 }} onChange={handleChange}>
        {list
          ? list.map(item => (
              <Option key={item.collection} value={item.collection}>
                {item.text}
              </Option>
            ))
          : null}
      </Select>
      <Button
        style={{ marginLeft: "20px" }}
        type="primary"
        disabled={selectedItem ? false : true}
        onClick={() => saveTableToCSV(selectedItem, selectedItem)}
      >
        导出
      </Button>
    </div>
  );
}

SelectLanguage = () => {
  const { lang } = useSelector((state) => state.settings);
  const dispatch = useDispatch();
  const { pathname } = useLocation();

  const urlWithoutLang = langs.find((lang) => lang.name.includes(pathname.split("/")[1])) ? pathname.slice(pathname.split("/")[1].length + 1) : pathname;
  
  return (
    <Select style={{ width: "100%" }} dropdownStyle={{ margin: 20 }} bordered={false} value={lang || "en"} size="large" onChange={(value) => {
      dispatch(changeLanguage(value));
      historyInstance.replace((lang && value !== "en" ? "/" + value : "") + (urlWithoutLang !== "/" ? urlWithoutLang : ""))
    }}>
      {langs.map((lang) => <Select.Option key={lang.name} style={{ paddingLeft: 20, paddingRight: 20 }} value={lang.name}><div><img alt={lang.name} src={lang.flag} style={{ border: "1px solid #ddd" }} width="30" /></div></Select.Option>)}
    </Select>
  )
}

function App({ actions, selectedStream, stream, path }) {
  const changeLanguage = language => {
    i18n.changeLanguage(language);
  };
  return (
    <Layout style={{ height: '100vh' }}>
      <Sider theme="light" width={400} className="sider">
        <Title level={3}>Websocket Demo</Title>
        <SelectionPanel actions={actions} selectedStream={selectedStream} />
      </Sider>
      <Content className="content">
        <SubscriptionPanel stream={stream} path={path} selectedStream={selectedStream} />
      </Content>
      <Footer>
        <Select defaultValue="en" style={{ width: 150 }} onChange={v => changeLanguage(v)}>
          <Option value="en">English</Option>
          <Option value="cn">中文</Option>
        </Select>
      </Footer>
    </Layout>
  );
}

Settings = props => {
  const {
    sysExtTypes, sysExts = [], customer = '', customerTyps, onSysExtChange, onCustomExtChange
  } = props;
  return (
    <>
      <div className="system-setting">
        <h4 className="setting-sub-title">选择系统扩展：</h4>
        <Checkbox.Group
          value={sysExts}
          itemDirection="ver"
          options={sysExtTypes}
          onChange={onSysExtChange}
        />
      </div>
      <div className="customer-setting">
        <h4 className="setting-sub-title">选择客户扩展：</h4>
        <Select
          placeholder="设置客户"
          className="customer-select"
          allowClear
          options={customerTyps}
          value={customer}
          onChange={onCustomExtChange}
        />
        {
          customer && (
            <p className="customer-description">
              {customerTyps.find(c => c.value === customer).description}
            </p>
          )
        }
      </div>
    </>
  );
}

renderForm() {
    const {
      form: { getFieldDecorator },
    } = this.props;
    return (
      <Form onSubmit={this.handleSearch} layout="inline">
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem label="验证状态">
              {getFieldDecorator('status')(
                <Select placeholder="请选择" style={{ width: '100%' }}>
                  <Option value="FAIL">失败</Option>
                  <Option value="PASS">成功</Option>
                  <Option value="MISS">未命中</Option>
                </Select>
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <span className={styles.submitButtons}>
              <Button type="primary" htmlType="submit">
                查询
              </Button>
              <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
                重置
              </Button>
            </span>
          </Col>
        </Row>
      </Form>
    );
  }

function MarketStreamPanel({ actions, selectedStream }) {
  const [type, setType] = useState('');
  const onSelectChange = value => {
    setType(value);
    actions.removeAllSelectedStream();
  };
  const onClickSubscribe = env => {
    if (selectedStream.codes.length === 0) {
      return notification['error']({
        message: i18n.t('label.error'),
        description: i18n.t('message.marketStreamInput')
      });
    }
    actions.subscribeMarketStream(env);
  };
  return (
    <>
      <Title level={5}>{i18n.t('label.marketStream')}</Title>
      <Form className="market-stream">
        <Form.Item label="Source">
          <Select placeholder={i18n.t('message.selectStream')} onChange={onSelectChange}>
            {allMarketStreams.map(streamType => (
              <Option key={streamType.type} value={streamType.type}>
                {i18n.t(`label.${streamType.type}`)}
              </Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item label="Streams">
          <Dropdown overlay={type && <StreamMenu actions={actions} type={type} />}>
            <span>
              {i18n.t('message.selectStream')} <DownOutlined />
            </span>
          </Dropdown>
        </Form.Item>
        {selectedStream.codes.length > 0 && (
          <Form.Item>
            <TagDisplay actions={actions} tags={selectedStream.codes} />
          </Form.Item>
        )}
      </Form>
      <Button type="default" style={{ margin: '5px' }} onClick={() => onClickSubscribe(TESTNET)}>
        {i18n.t('label.testSubscribe')}
      </Button>
      <Button type="primary" style={{ margin: '5px' }} onClick={() => onClickSubscribe(PROD)}>
        {i18n.t('label.prodSubscribe')}
      </Button>
    </>
  );
}

Option = Select.Option

{Option} = Select

{ Option } = Select

render() {
    const { modalNewRequestVisible } = this.state;
    const { appList, request, currentAppName, currentRequestLoading } = this.props;

    return (
      <div className={styles.httpDebugPage}>
        <div className={styles.header}>
          <Select
            style={{ width: '280px' }}
            placeholder={'请选择应用'}
            onSelect={this.onSelectApp}
            value={currentAppName}
            showSearch
          >
            {(appList || []).map((item) => (
              <Select.Option value={item.app_name} key={item.app_name}>
                {item.app_name}
              </Select.Option>
            ))}
          </Select>
        </div>

        {currentAppName ? (
          <div className={styles.main}>
            <div className={styles.leftSider}>
              <LeftSider {...this.props} />
            </div>

            <div className={styles.rightBlock}>
              <Spin tip={'加载中'} spinning={currentRequestLoading}>
                {request ? (
                  <Editor />
                ) : (
                  <Empty description={'请先选择测试用例'} style={{ padding: '100px' }} />
                )}
              </Spin>
            </div>
          </div>
        ) : (
          <Empty
            description={'请先选择应用'}
            style={{ margin: '0', padding: '100px', backgroundColor: '#fff' }}
          />
        )}

        <NewTestCaseModal
          visible={modalNewRequestVisible}
          onOk={this.onCreateNewRequest}
          onCancel={() => {
            this.setState({
              modalNewRequestVisible: false,
            });
          }}
        />

        <ModalScriptEditor />
      </div>
    );
  }

render() {
    const { minder, isLock } = this.props;
    const { FontSize = '' } = this.state;
    let disabled = minder.getSelectedNodes().length === 0;
    if (isLock) disabled = true;
    const commonStyle = { size: 'small', disabled };
    return (
      <div className="nodes-actions" style={{ width: 128 }}>
        <div>
          <Select
            {...commonStyle}
            value={FontSize || ''}
            onChange={(value) => this.onChange('FontSize', value)}
            dropdownMatchSelectWidth={false}
            getPopupContainer={(triggerNode) => triggerNode.parentNode}
          >
            <Select.Option value="">字号</Select.Option>
            {fontSizeList &&
              fontSizeList.map((item) => (
                <Select.Option key={item} value={item}>
                  {item}
                </Select.Option>
              ))}
          </Select>
        </div>
        <div>
          <Button
            icon="bold"
            type="link"
            {...commonStyle}
            onClick={() => this.onChange('Bold', '')}
          />
          <Button
            icon="italic"
            type="link"
            {...commonStyle}
            onClick={() => this.onChange('Italic', '')}
          />
          <Button
            icon="strikethrough"
            type="link"
            {...commonStyle}
            onClick={() => this.onChange('del', '')}
          />
          <ColorPicker
            onChange={(color) => this.onChange('ForeColor', color)}
            {...this.props}
            button={{
              ...commonStyle,
              type: 'link',
            }}
            icon="font-colors"
            action="ForeColor"
          />
          <ColorPicker
            onChange={(color) => this.onChange('Background', color)}
            {...this.props}
            button={{
              ...commonStyle,
              type: 'link',
            }}
            icon="bg-colors"
            action="Background"
          />
        </div>
      </div>
    );
  }

Transfer = (props) => {
  const { Option } = Select;
  const [users, setUsers] = useState([]);
  const [id, setId] = useState("");
  const [visible, setVisible] = useState(false);

  const ticket = props.ticket._id

  const { transferTicket } = useContext(GlobalContext);

  const fetchUsers = async () => {
    await fetch(`/api/v1/auth/getAllUsers`, {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
        Authorization: "Bearer " + localStorage.getItem("jwt"),
      },
    })
      .then((res) => res.json())
      .then((res) => {
        if (res) {
          setUsers(res.users);
        }
      });
  };

  const onCreate = async () => {
    setVisible(false);
    await transferTicket(id, ticket)
  };

  const onCancel = () => {
    setVisible(false);
  };

  useEffect(() => {
    fetchUsers();
  }, []);

  const search = users.map((d) => <Option key={d._id}>{d.name}</Option>);

  return (
    <div>
      <Button
        key={0}
        onClick={() => {
          setVisible(true);
        }}
      >
        Transfer
      </Button>
      <Modal visible={visible} onCancel={onCancel} onOk={onCreate} width={300}>
        <Select
          style={{ width: 200 }}
          showSearch
          placeholder="Select a user"
          optionFilterProp="children"
          onChange={setId}
          filterOption={(input, option) =>
            option.toLowerCase().indexOf(input.toLowerCase()) >= 0
          }
        >
          {search}
        </Select>
      </Modal>
    </div>
  );
}

{ Option } = Select

function AssignTaskForm({ onCancel, onCreate, visible }) {
  const { Option } = Select;

  const children = [];
  for (let i = 10; i < 36; i++) {
    children.push(
      <Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>
    );
  }

  // function handleChange(value) {
  //   console.log(`selected ${value}`);
  // }

  return (
    <React.Fragment>
      <Modal
        visible={visible}
        okText="Done"
        cancelText="Cancel"
        onCancel={onCancel}
        // onOk={() => {
        //   form
        //     .validateFields()
        //     .then(values => {
        //       form.resetFields();
        //       //   onCreate(values);
        //     })
        //     .catch(info => {
        //       console.log('Validate Failed:', info);
        //     });
        // }}
      >
        {/* <Form form={form} layout="vertical" name="assignTaskForm_in_modal">
          <Form.Item
            name="task"
            label="Task"
            rules={[
              {
                required: true,
                message: 'Please select task',
              },
            ]}
          >
            <Select
              mode="multiple"
              style={{ width: '100%' }}
              placeholder="Please select"
              defaultValue={['a10', 'c12']}
              onChange={handleChange}
            >
              {children}
            </Select>
            <Input />
          </Form.Item>
          <Form.Item name="extra_instructions" label="Extra Instructions">
            <Input type="textarea" />
          </Form.Item>
          <Form.Item name="deadline" label="Deadline" {...config}>
            <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" />
          </Form.Item>
        </Form> */}
      </Modal>
    </React.Fragment>
  );
}

{ Option } = Select

{ Option } = Select

{ Option } = Select

{ Option } = Select

export default function BuyInputSection(props) {
  const { chainId } = useConstantLoader(props)
  const { 
    topLeftLabel, 
    topRightLabel, 
    isLocked, 
    inputValue, 
    onInputValueChange, 
    staticInput, 
    balance, 
    tokenBalance, 
    onSelectToken, 
    tokenlist, 
    token 
  } = props

  return (
    <div className={styles.buyInput}>
      <div className={styles.swapSectionTop}>
        <div className={styles.muted}>
          {topLeftLabel}: {balance}
        </div>
        <div className={styles.alignRight}>
          <span className={styles.swapLabel}>{topRightLabel}</span>&nbsp;
          <span className={styles.swapBalance}>{tokenBalance}</span>
        </div>
      </div>
      <div className={styles.swapSectionBottom}>
        <div className={styles.inputContainer}>
          {!isLocked &&
            <div className={styles.tokenSelector}>
              <Select 
                value={token.symbol} 
                onChange={onSelectToken}
                dropdownClassName={styles.dropDownMenu}
              >
                {tokenlist.map(coin => (
                  <Option className={styles.optionItem} value={coin.symbol}>{coin.symbol}</Option>
                ))}
              </Select>
            </div>
          }
          {isLocked &&
            <button className={styles.switchcoin} disabled={isLocked}>
              <span className={styles.wrap}>
                <div className={styles.coin}>
                  <img src={glp40Icon} alt="glp" style={{ width: '24px', marginRight: '0.5rem' }} />
                  <span style={{ margin: '0px 0.25rem' }}>ALP</span>
                </div>
              </span>
            </button>
          }
          {!staticInput && <input type="number" min="0" placeholder="0.0" className={styles.swapInput} value={inputValue} onChange={onInputValueChange} />}
          {staticInput && <div className={styles.staticInput}>{inputValue}</div>}
        </div>
      </div>
    </div>
  )
}

{ Option } = Select

{ Option } = Select

Option = Select.Option

{ Option } = Select

{ Option } = Select

{ Option } = Select

{ Option } = Select