antd#Select JavaScript Examples

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>
    );
  }

components = {
  GridPanel,
  Header: ({ title, ...others }) => (<h3 {...others}>{title || ''}</h3>),
  Container: ({ children, ...other }) => (
    <div {...other}>
      {children}
    </div>
  ),
  Input,
  TextArea,
  Button: ({ label, title, ...other }) => (
    <AButton {...other}>{label || title}</AButton>
  ),
  Row,
  Col,
  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>
  );
}

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>
  )
}

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>
  );
}

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

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() {
    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>
    );
  }

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

function QuestionApp({ submit, loading, Fields }) {
  const { TextArea } = Input;
  const { Option } = Select;
  const inputFields = (type, placeholder, options) => {
    if (type === "Selection")
      return (
        <Select placeholder="Select an answer" allowClear>
          {options.map((option, index) => (
            <Option key={index} value={option.value}>
              {option.label}
            </Option>
          ))}
        </Select>
      );
    if (type === "TextArea")
      return <TextArea placeholder={placeholder}></TextArea>;
    if (type === "Text" || type === "Email")
      return <Input placeholder={placeholder}></Input>;
  };

  return (
    <div className="row" style={{ marginTop: "1rem" }}>
      <div className="col-lg-1 col-sm-0"></div>
      <div className="col-lg-10 col-sm-12">
        <Form onFinish={submit} autoComplete="off">
          <Form.Item noStyle>
            {Fields.map((f, index) => (
              <Form.Item
                name={f.label}
                label={f.label}
                rules={[
                  f.isRequired && {
                    required: true,
                    message: "This Field is required!",
                  },
                  f.type === "Email" && {
                    type: "email",
                    message: "Please enter a valid email",
                  },
                ]}
                key={index}
                style={{ display: "block" }}
              >
                {inputFields(f.type, f.placeholder, f.options)}
              </Form.Item>
            ))}
          </Form.Item>
          <Form.Item>
            <Button
              type="secondary"
              htmlType="submit"
              size="large"
              block
              disabled={loading ? true : false}
            >
              Apply
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
}

{ Option } = Select

{ Option } = Select

{ Option } = Select

{ Option } = Select

SelectStyled = styled(Select)`
  max-height: 260px;
  overflow-y: scroll;
`

{ Option } = Select

{ Option } = Select

render() {
    const { selectedRowKeys } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    };
    return (
      <div className="app-container">
        <Collapse defaultActiveKey={["1"]}>
          <Panel header="导出选项" key="1">
            <Form layout="inline">
              <Form.Item label="文件名:">
                <Input
                  style={{ width: "250px" }}
                  prefix={
                    <Icon type="file" style={{ color: "rgba(0,0,0,.25)" }} />
                  }
                  placeholder="请输入文件名(默认excel-file)"
                  onChange={this.filenameChange}
                />
              </Form.Item>
              <Form.Item label="单元格宽度是否自适应:">
                <Radio.Group
                  onChange={this.autoWidthChange}
                  value={this.state.autoWidth}
                >
                  <Radio value={true}>是</Radio>
                  <Radio value={false}>否</Radio>
                </Radio.Group>
              </Form.Item>
              <Form.Item label="文件类型:">
                <Select
                  defaultValue="xlsx"
                  style={{ width: 120 }}
                  onChange={this.bookTypeChange}
                >
                  <Select.Option value="xlsx">xlsx</Select.Option>
                  <Select.Option value="csv">csv</Select.Option>
                  <Select.Option value="txt">txt</Select.Option>
                </Select>
              </Form.Item>
              <Form.Item>
                <Button
                  type="primary"
                  icon="file-excel"
                  onClick={this.handleDownload.bind(null, "all")}
                >
                  全部导出
                </Button>
              </Form.Item>
              <Form.Item>
                <Button
                  type="primary"
                  icon="file-excel"
                  onClick={this.handleDownload.bind(null, "selected")}
                >
                  导出已选择项
                </Button>
              </Form.Item>
            </Form>
          </Panel>
        </Collapse>
        <br />
        <Table
          bordered
          columns={columns}
          rowKey={(record) => record.id}
          dataSource={this.state.list}
          pagination={false}
          rowSelection={rowSelection}
          loading={this.state.downloadLoading}
        />
      </div>
    );
  }

render() {
    const { dataSource, page, labalWidth } = this.state
    const { getFieldDecorator } = this.props.form
    const columns = [
      { title: 'id', align: 'center', dataIndex: 'id', sorter: (a, b) => a.id - b.id },
      {
        title: 'Rule ID',
        align: 'center',
        dataIndex: 'rule_id',
        render: ruleId => (<Link to={`/rules?id=${ruleId}`}>{ruleId}</Link>),
      },
      { title: '报警值', align: 'center', dataIndex: 'value' },
      {
        title: '当前状态',
        align: 'center',
        dataIndex: 'status',
        render: status => (
          <span>{status === 2 ? '报警' : status === 0 ? '恢复' : '已确认'}</span>
        ),
      },
      {
        title: '异常分钟数',
        align: 'center',
        dataIndex: 'count',
        render: count => (
          <span>{count+1}</span>
        ),
      },
      { title: '标题', align: 'center', dataIndex: 'summary', width: 100 },
      {
        title: 'label',
        align: 'center',
        dataIndex: 'labels',
        width: labalWidth,
        render: (labels) => {
          if (labels && Object.prototype.toString.call(labels) === '[object Object]') {
            return Object.keys(labels).map(key => <Tag color="cyan" style={{ marginTop: '5px' }}>{key}: {labels[key]}</Tag>)
          }
          return '-'
        },
      },
      { title: '描述', align: 'center', dataIndex: 'description' },
      { title: '确认人', align: 'center', dataIndex: 'confirmed_by' },
      {
        title: '触发时间',
        align: 'center',
        dataIndex: 'fired_at',
        width: tableTimeWidth,
        render: firedAt => (
          <span>{firedAt === '0001-01-01T00:00:00Z' ? '--' : moment(firedAt).format('YYYY.MM.DD HH:mm:ss')}</span>
        ),
      },
      {
        title: '确认时间',
        align: 'center',
        dataIndex: 'confirmed_at',
        width: tableTimeWidth,
        render: confirmedAt => (
          <span>{confirmedAt === '0001-01-01T00:00:00Z' ? '--' : moment(confirmedAt).format('YYYY.MM.DD HH:mm:ss')}</span>
        ),
      },
      {
        title: '确认截止时间',
        align: 'center',
        dataIndex: 'confirmed_before',
        width: tableTimeWidth,
        render: confirmedBefore => (
          <span>{confirmedBefore === '0001-01-01T00:00:00Z' ? '--' : moment(confirmedBefore).format('YYYY.MM.DD HH:mm:ss')}</span>
        ),
      },
      {
        title: '恢复时间',
        align: 'center',
        dataIndex: 'resolved_at',
        width: tableTimeWidth,
        render: resolvedAt => (
          <span>{resolvedAt === '0001-01-01T00:00:00Z' ? '--' : moment(resolvedAt).format('YYYY.MM.DD HH:mm:ss')}</span>
        ),
      },
    ]
    return (
      <div>
        <Form layout="inline" onSubmit={this.handleSearch}>
          <Form.Item label="标题">
            {getFieldDecorator('summary', {})(<Input placeholder="请输入标题" />)}
          </Form.Item>
          <Form.Item label="状态">
            {getFieldDecorator('status', {
              initialValue: -1,
            })(<Select>
              <Option value={-1}>所有</Option>
              <Option value={0}>恢复</Option>
              <Option value={1}>已确认</Option>
              <Option value={2}>报警</Option>
            </Select>)}
          </Form.Item>
          <Form.Item label="报警时间" style={{ marginBottom: 0 }}>
            <Form.Item style={{ marginRight: 0 }}>
              {getFieldDecorator('timestart', {})(<DatePicker
                format="YYYY-MM-DD HH:mm:ss"
                showTime={{ defaultValue: moment('00:00:00', 'HH:mm:ss') }}
                placeholder="报警开始时间"
              />)}
            </Form.Item>
            <span style={{ width: '24px', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>~</span>
            <Form.Item style={{ marginBottom: 0 }}>
              {getFieldDecorator('timeend', {})(<DatePicker
                format="YYYY-MM-DD HH:mm:ss"
                showTime={{ defaultValue: moment('00:00:00', 'HH:mm:ss') }}
                placeholder="报警结束时间"
              />)}
            </Form.Item>
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit">查询</Button>
          </Form.Item>
        </Form>
        <Table dataSource={dataSource} columns={columns} pagination={false} scroll={{ x: 1300 }} rowKey="id" />
        <div style={{ display: 'flex', justifyContent: 'flex-end', paddingTop: '15px' }}>
          <Pagination onChange={this.pageChange} current={page.current} pageSize={page.size} total={page.total} />
        </div>
      </div>
    )
  }

{ Option } = Select

{ Option } = Select

{ Option } = Select

Option = Select.Option

{ Option } = Select

{ Option } = Select

{ OptGroup } = Select