@ant-design/icons#PlusOutlined JavaScript Examples

PromptList = ({ createPrompt, teamPromptsAndVideos, teamId, fetchTeamVideos, teamMembersEmail}) => {
	const [showModal, setShowModal] = useState(false);
	const { userRole } = useContext(UserContext)

	return (
		<Content className="prompts-list">
			<div className="dashboard-header">
				<h2>Prompts ({teamPromptsAndVideos.length})</h2>
				{userRole === 1 ? null : (
					// <Button
					// 	icon="plus"
					// 	className="adding-button"
					// 	style={{backgroundColor:"#6954EA", color:"white", border:"none"}}
					// 	onClick={() => setShowModal(true)}>
					// 	Add Prompt
					// </Button>
					<PlusOutlined onClick={() => setShowModal(true)} style={{fontSize:"1.6rem", color:"#6954EA"}}/>
				)}
			</div>
			<AddPromptModal
				isVisible={showModal}
				setVisibility={setShowModal}
				createPrompt={createPrompt}
				teamId={teamId}
				teamMembersEmail={teamMembersEmail}
			/>
			{teamPromptsAndVideos.length > 0
			? teamPromptsAndVideos.map((prompt, index) => (<PromptCard key={prompt.id} data={prompt} index={index} />))
			: <Empty />
		}
		</Content>
	);
}

render() {
    return (
      <>
        <Progress type="circle" percent={this.state.percent} />
        <Button.Group>
          <Button onClick={this.decline} icon={<MinusOutlined />} />
          <Button onClick={this.increase} icon={<PlusOutlined />} />
        </Button.Group>
      </>
    );
  }

function SaveForm({ form, config }) {
  let { CREATE_ENTITY } = config;
  const handelClick = () => {
    form.submit();
  };

  return (
    <Button onClick={handelClick} type="primary" icon={<PlusOutlined />}>
      {CREATE_ENTITY}
    </Button>
  );
}

EditableLinkGroup = props => {
  const { links, linkElement, onAdd } = props;
  return (
    <div className={styles.linkGroup}>
      {links.map(link =>
        createElement(
          linkElement,
          {
            key: `linkGroup-item-${link.id || link.title}`,
            to: link.href,
            href: link.href,
          },
          link.title,
        ),
      )}
      <Button size="small" type="primary" ghost onClick={onAdd}>
        <PlusOutlined /> 添加
      </Button>
    </div>
  );
}

function SaveForm({ form, config }) {
  let { UPDATE_ENTITY } = config;
  const handelClick = () => {
    form.submit();
  };

  return (
    <Button onClick={handelClick} type="primary" icon={<PlusOutlined />}>
      {UPDATE_ENTITY}
    </Button>
  );
}

function FiltersDropdown({ properties, filters, onFilterCreate, onFilterChange, onFilterDelete }) {
  const [dropdownVisible, setDropdownVisible] = useState(false);

  const filterList = filters.map((filter) => (
    <FilterInput
      key={filter.id}
      filter={filter}
      onChange={(newFilter) => onFilterChange(filter.id, newFilter)}
      onDelete={() => onFilterDelete(filter.id)}
      properties={properties}
    />
  ));

  const menu = (
    <Menu>
      {filterList}

      <Menu.Divider />
      <Menu.Item>
        <Button onClick={onFilterCreate} size="small" type="default" icon={<PlusOutlined />}>
          Add a filter
        </Button>
      </Menu.Item>
    </Menu>
  );

  return (
    <Dropdown
      visible={dropdownVisible}
      onVisibleChange={setDropdownVisible}
      overlay={menu}
      trigger={["click"]}
    >
      <Button size="small" type="link">
        Filter
      </Button>
    </Dropdown>
  );
}

EmptyTutorials = ({ org, orgHandle }) => {
  const [visibleModal, setVisibleModal] = useState(false);

  const closeModal = () => {
    setVisibleModal((prev) => !prev);
  };
  return (
    <Grid xs={24}>
      <Grid
        style={{ display: "flex", flexFlow: "column", background: "#f2f2f2" }}
        description={<span>{org} has no CodeLabz yet</span>}
      >
        <img src={EmptySVG} alt="empty" />
        <Button onClick={() => setVisibleModal(true)} type="primary">
          <PlusOutlined /> Add New CodeLabz
        </Button>
      </Grid>
      <NewTutorial
        viewModal={visibleModal}
        onSidebarClick={(e) => closeModal(e)}
        viewCallback={() => setVisibleModal(false)}
        active={orgHandle}
      />
    </Grid>
  );
}

render() {
        return (
            <div style={{padding: "30px"}}>

                <Incident_table data={this.state.incident_table_data} refresh_callback={this.refresh_table} query_params={this.state.query_params}/>
                <New_incident_drawer visibility={this.state.new_incident_drawer_visible} draw_close_callback={this.close_drawer} refresh_callback={this.refresh_table}/>
                <Button type="primary" shape="circle" icon={<PlusOutlined/>} size={"large"}
                        style={{
                            position: "fixed",
                            right: "50px",
                            bottom: "50px",
                            boxShadow: "0 6px 14px 0 #666",
                            backgroundColor: "#316DC1"
                        }}
                        onClick={this.open_drawer}
                />
            </div>
        );
    }

render() {
    /*
    success模式下fileList接收的值
      fileList=[{
          uid: '-1',
          status:'success',
          response:{
          code:requestCode.successCode,
          data:{url:'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'},
          },
          url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      }
    */
    const { fileList, action, limit, typeModule } = this.props

    const { previewVisible, previewImage, fileLists } = this.state;

    return (
      <>
        <Upload name="file"
          {...this.props}
          onChange={this.handleCurrencyChange}
          fileList={typeModule === 1 ? fileList : fileLists} action={action}
          onPreview={this.handlePreview}
          listType="picture-card">
          {fileList.length >= limit ? null : <PlusOutlined />}
        </Upload>
        <Modal
          visible={previewVisible}
          footer={null}
          onCancel={() => this.setState({ previewVisible: false })}
        >
          <img alt="example" style={{ width: '100%' }} src={previewImage} />
        </Modal>
      </>
    );
  }

function FixHeaderPanel({ config }) {
  const { crudContextAction } = useCrudContext();
  const { collapsedBox } = crudContextAction;

  const addNewItem = () => {
    collapsedBox.close();
  };
  return (
    <div className="box">
      <Row gutter={12}>
        <Col className="gutter-row" span={21}>
          <h1 style={{ fontSize: 20, marginBottom: 20 }}>
            {config.panelTitle}
          </h1>
        </Col>
      </Row>
      <Row gutter={8}>
        <Col className="gutter-row" span={21}>
          <SearchItem config={config} />
        </Col>
        <Col className="gutter-row" span={3}>
          <Button
            onClick={addNewItem}
            block={true}
            icon={<PlusOutlined />}
          ></Button>
        </Col>
      </Row>
    </div>
  );
}

MutiFormBox = (props) => {
  const { option, value, onChange } = props;
  const [opts, setOpts] = useState(option || []);
  const tpl = [...value];
  const addRow = () => {
    let base = {label: '', value: ''}
    setOpts(prev => [...prev, base])
    onChange([...tpl, base])
  }
  const delRow = (index) => {
    opts.splice(index, 1)
    setOpts([...opts])
  }
  const handleChange = (index, e) => {
    // console.log(index, e.target.value)
    tpl[index].label = tpl[index].value = e.target.value
    onChange(tpl)
  }
  return <div className={styles.mutiRow}>
    {
      opts.map((item, i) => {
        return <div key={i} className={styles.mutiItem}>
                <span className={styles.label}>{`选项${i}：`}</span>
                <div className={styles.formItem}><Input defaultValue={value[i] ? value[i].label : ''} onChange={handleChange.bind(this, i)} /><MinusCircleOutlined onClick={delRow.bind(this, i)} /></div>
               </div>
      })
    }
    <Button type="primary" onClick={addRow} block>
      <PlusOutlined />
    </Button>
  </div>
}

function FixHeaderPanel({ config }) {
  const { crudContextAction } = useCrudContext();
  const { collapsedBox } = crudContextAction;

  const addNewItem = () => {
    collapsedBox.close();
  };
  return (
    <div className="box">
      <Row gutter={12}>
        <Col className="gutter-row" span={21}>
          <h1 style={{ fontSize: 20, marginBottom: 20 }}>
            {config.panelTitle}
          </h1>
        </Col>
      </Row>
      <Row gutter={8}>
        <Col className="gutter-row" span={21}>
          <SearchItem config={config} />
        </Col>
        <Col className="gutter-row" span={3}>
          <Button
            onClick={addNewItem}
            block={true}
            icon={<PlusOutlined />}
          ></Button>
        </Col>
      </Row>
    </div>
  );
}

render() {
    return (
      <div>
        <div>
          <Badge count={this.state.count}>
            <a href="#" className="head-example" />
          </Badge>
          <ButtonGroup>
            <Button onClick={this.decline}>
              <MinusOutlined />
            </Button>
            <Button onClick={this.increase}>
              <PlusOutlined />
            </Button>
            <Button onClick={this.random}>
              <QuestionOutlined />
            </Button>
          </ButtonGroup>
        </div>
        <div style={{ marginTop: 10 }}>
          <Badge dot={this.state.show}>
            <a href="#" className="head-example" />
          </Badge>
          <Switch onChange={this.onChange} checked={this.state.show} />
        </div>
      </div>
    );
  }

function Header({ addNewPath, hasSelected, handleSearch }) {
  const history = useHistory();

  const handleAddNew = () => {
    history.push('/' + addNewPath);
  };

  return (
    <>
      <Row>
        <Col>
          <Search
            placeholder="Search"
            onSearch={handleSearch}
            allowClear
            style={{ float: 'left', width: 350 }}
          />
        </Col>
        <Col flex="auto">
          <Button
            icon={<PlusOutlined />}
            type="primary"
            style={{ float: 'right' }}
            onClick={handleAddNew}
          >
            Add New
          </Button>

          <Button
            icon={<DeleteOutlined />}
            disabled={!hasSelected}
            style={{ float: 'right', marginRight: 12 }}
          >
            <Popconfirm
              title="Sure to delete?"
              icon={<QuestionCircleOutlined style={{ color: 'red' }} />}
              onConfirm={() => {}}
            >
              Delete
            </Popconfirm>
          </Button>
        </Col>
      </Row>
      <Divider />
    </>
  );
}

ComponentActions = (props) => {
  const { experimentId, name, componentType } = props;
  const dispatch = useDispatch();
  const selectedGenes = useSelector((state) => state.genes.selected);
  const displayedGenes = useSelector((state) => state.genes.expression?.views[componentType]?.data);

  const performGeneOperation = (genesOperation) => {
    let newGenes = _.cloneDeep(selectedGenes);

    if (genesOperation === geneOperations.ADD && displayedGenes) {
      newGenes = Array.from(new Set(displayedGenes.concat(selectedGenes)));
    }
    if (genesOperation === geneOperations.REMOVE && displayedGenes) {
      newGenes = displayedGenes.filter((gene) => !selectedGenes.includes(gene));
    }

    dispatch(loadGeneExpression(experimentId, newGenes, componentType));
  };

  const menu = (
    <Menu size='small'>
      <Menu.Item key='0' icon={<PlusOutlined />} onClick={() => performGeneOperation(geneOperations.ADD)}>
        Add
      </Menu.Item>
      <Menu.Item key='1' icon={<MinusOutlined />} onClick={() => performGeneOperation(geneOperations.REMOVE)}>
        Remove
      </Menu.Item>
      <Menu.Item key='2' icon={<RedoOutlined />} onClick={() => performGeneOperation(geneOperations.OVERWRITE)}>
        Overwrite
      </Menu.Item>
    </Menu>
  );

  if (selectedGenes.length === 0) {
    return (<></>);
  }

  return (
    <Dropdown arrow type='link' size='small' overlay={menu} trigger={['click']}>
      <Button type='link' size='small'>
        {name}
      </Button>
    </Dropdown>
  );
}

render() {
    const { store } = this.props;

    const title = (
      <div className={styles.title + " " + styles.titlespace}>
        <div style={{ display: "flex", alignItems: "center" }}>
          <h3>Annotations</h3>
        </div>

        <div style={{ marginRight: "1px" }}>
          {store.hasInterface("annotations:add-new") && (
            <Tooltip placement="topLeft" title="Create a new annotation">
              <Button
                size="small"
                onClick={ev => {
                  ev.preventDefault();
                  const c = store.annotationStore.createAnnotation();

                  store.annotationStore.selectAnnotation(c.id);
                  // c.list.selectAnnotation(c);
                }}
              >
                <PlusOutlined />
              </Button>
            </Tooltip>
          )}
          &nbsp;
          <Tooltip placement="topLeft" title="View all annotations">
            <Button
              size="small"
              type={store.annotationStore.viewingAllAnnotations ? "primary" : ""}
              onClick={ev => {
                ev.preventDefault();
                store.annotationStore.toggleViewingAllAnnotations();
              }}
            >
              <WindowsOutlined />
            </Button>
          </Tooltip>
        </div>
      </div>
    );

    const content = store.annotationStore.annotations.map(c => <Annotation key={c.id} item={c} store={store} />);

    return (
      <Card title={title} size="small" bodyStyle={{ padding: "0", paddingTop: "1px" }}>
        <List>{store.annotationStore.annotations ? content : <p>No annotations submitted yet</p>}</List>
      </Card>
    );
  }

Demo = () => {
  const [form] = Form.useForm();

  const onFinish = values => {
    console.log('Received values of form:', values);
  };

  const handleChange = () => {
    form.setFieldsValue({ sights: [] });
  };

  return (
    <Form form={form} name="dynamic_form_nest_item" onFinish={onFinish} autoComplete="off">
      <Form.Item name="area" label="Area" rules={[{ required: true, message: 'Missing area' }]}>
        <Select options={areas} onChange={handleChange} />
      </Form.Item>
      <Form.List name="sights">
        {(fields, { add, remove }) => (
          <>
            {fields.map(field => (
              <Space key={field.key} align="baseline">
                <Form.Item
                  noStyle
                  shouldUpdate={(prevValues, curValues) =>
                    prevValues.area !== curValues.area || prevValues.sights !== curValues.sights
                  }
                >
                  {() => (
                    <Form.Item
                      {...field}
                      label="Sight"
                      name={[field.name, 'sight']}
                      fieldKey={[field.fieldKey, 'sight']}
                      rules={[{ required: true, message: 'Missing sight' }]}
                    >
                      <Select disabled={!form.getFieldValue('area')} style={{ width: 130 }}>
                        {(sights[form.getFieldValue('area')] || []).map(item => (
                          <Option key={item} value={item}>
                            {item}
                          </Option>
                        ))}
                      </Select>
                    </Form.Item>
                  )}
                </Form.Item>
                <Form.Item
                  {...field}
                  label="Price"
                  name={[field.name, 'price']}
                  fieldKey={[field.fieldKey, 'price']}
                  rules={[{ required: true, message: 'Missing price' }]}
                >
                  <Input />
                </Form.Item>

                <MinusCircleOutlined onClick={() => remove(field.name)} />
              </Space>
            ))}

            <Form.Item>
              <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                Add sights
              </Button>
            </Form.Item>
          </>
        )}
      </Form.List>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
}

render() {
        const { firstName,middleName,lastName,gender, loading, imageUrl } = this.state;
        const uploadButton = (
            <div>
                {loading ? <LoadingOutlined /> : <PlusOutlined />}
                <div style={{ marginTop: 8 }}>Upload</div>
            </div>
        );

        const onPreview = async file => {
            let src = file.url;
            if (!src) {
                src = await new Promise(resolve => {
                    const reader = new FileReader();
                    reader.readAsDataURL(file.originFileObj);
                    reader.onload = () => resolve(reader.result);
                });
            }
            const image = new Image();
            image.src = src;
            const imgWindow = window.open(src);
            imgWindow.document.write(image.outerHTML);
        };

        return (
            <div>
                <Row justify="space-around" >
                    <Row justify="start" gutter={[16, 16]}>
                        <Col xs={{ span: 24 }} md={{ span: 12 }} lg={{span: 12}}>
                            <ImgCrop rotate>
                                <Upload
                                    name="avatar"
                                    listType="picture-card"
                                    multiple={false}
                                    className="avatar-uploader"
                                    showUploadList={false}
                                    onPreview={onPreview}
                                    customRequest={this.customUpload}
                                    beforeUpload={beforeUpload}
                                    onChange={this.handleUpload}
                                >
                                    {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
                                </Upload>
                            </ImgCrop>

                        </Col>
                        <Col xs={{ span: 24 }} md={{ span: 12 }} lg={{span: 12}}>
                            <Input type="text" id="firstName" value={firstName} placeholder="First Name" onChange={this.handleFirstName} />
                        </Col>
                        <Col xs={{ span: 24 }} md={{ span: 12 }} lg={{span: 12}}>
                            <Input type="text" id="middleName" value={middleName} placeholder="Middle Name" onChange={this.handleMiddleName} />
                        </Col>
                        <Col xs={{ span: 24 }} md={{ span: 12 }} lg={{span: 12}}>
                            <Select id="gender"  style={{width:'100%'}} placeholder="Gender" value={gender} onChange={this.handleChangeGender}>
                                <Option value="Male">Male</Option>
                                <Option value="Female">Female</Option>
                                <Option value="Other">Other</Option>
                            </Select>
                        </Col>
                        <Col xs={{ span: 24 }} md={{ span: 12 }} lg={{span: 12}}>
                            <Input type="text" id="lastName" value={lastName} placeholder="Last Name" onChange={this.handleLastName} />
                        </Col>
                        <Col xs={{ span: 24 }} md={{ span: 12 }} lg={{span: 12}}>
                            <DatePicker type="text" id="dob" ref="datePicker" style={{width:'100%'}} value={this.state.dateValue}  selected={this.state.dob}  placeholder="Date of Birth" onChange={this.handleChangeDate} />
                        </Col>
                    </Row>

                </Row>
                <br/>
                <Button type="primary" onClick={this.handleSubmit}>Add Item</Button>
            </div>
        )
    }

render(props) {
    console.log(this.props);
    console.log('props');
    const uploadButton = (
      <div>
        {this.state.loading ? <LoadingOutlined /> : <PlusOutlined />}
        <div className="ant-upload-text">Upload</div>
      </div>
    );
    var {imageUrl} = this.state;
    if ('img' in this.props) {
      if (typeof this.props.img == 'string') {
        imageUrl = this.props.img;
      }
    }


    return (
      <Upload
        name="avatar"
        listType="picture-card"
        showUploadList={false}
        beforeUpload={this.props.beforeUpload}
        onChange={this.handleChange}
        fileList={this.state.fileList}
      >
        {imageUrl ? (
          <img
            src={imageUrl}
            alt="avatar"
            style={{
              width: '100%',
            }}
          />
        ) : (
          uploadButton
        )}
      </Upload>
    );
  }

DefaultPage = ({ tags, dispatch }) => {
  const { id } = useParams()

  const [editable, setEditable] = useState(false)
  const [newTag, setNewTag] = useState('')

  useEffect(() => {
    dispatch({
      type: 'application/TAGS',
      payload: { id }
    })
  }, [id])

  const removeTag = tagId => {
    dispatch({
      type: 'application/TAG_REMOVE',
      payload: { id, tagId }
    })
  }
  const addTag = (saved) => {
    if (newTag && tags.indexOf(newTag) === -1) {
      if (saved) {
        dispatch({
          type: 'application/TAG_ADD',
          payload: { id, name: newTag }
        })
      }
    } else {
      setEditable(false)
    }

    setNewTag('')
  }
  return (
    <>
      {tags && tags.map(({ id, name }, index) => {
        const isLongTag = name.length > 20

        const tagElem = (
          <Tag
            className='edit-tag'
            key={id}
            closable
            onClose={() => { removeTag(id) }}
            color={colorFull(index)}
          >
            <span>
              {isLongTag ? `${name.slice(0, 20)}...` : name}
            </span>
          </Tag>
        )
        return isLongTag ? (
          <Tooltip title={name} key={id}>
            {tagElem}
          </Tooltip>
        ) : (
          tagElem
        )
      })}
      {editable && (
        <Input
          autoFocus
          type='text'
          size='small'
          className='tag-input'
          value={newTag}
          onChange={(e) => setNewTag(e.target.value)}
          onBlur={() => addTag()}
          onPressEnter={() => addTag(true)}
        />
      )}
      {!editable && (
        <Tag className='site-tag-plus' onClick={() => setEditable(true)}>
          <PlusOutlined /> New Tag
        </Tag>
      )}
    </>
  )
}

Demo = () => {
  const onFinish = values => {
    console.log('Received values of form:', values);
  };

  return (
    <Form name="dynamic_form_nest_item" onFinish={onFinish} autoComplete="off">
      <Form.List name="users">
        {(fields, { add, remove }) => (
          <>
            {fields.map(({ key, name, fieldKey, ...restField }) => (
              <Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
                <Form.Item
                  {...restField}
                  name={[name, 'first']}
                  fieldKey={[fieldKey, 'first']}
                  rules={[{ required: true, message: 'Missing first name' }]}
                >
                  <Input placeholder="First Name" />
                </Form.Item>
                <Form.Item
                  {...restField}
                  name={[name, 'last']}
                  fieldKey={[fieldKey, 'last']}
                  rules={[{ required: true, message: 'Missing last name' }]}
                >
                  <Input placeholder="Last Name" />
                </Form.Item>
                <MinusCircleOutlined onClick={() => remove(name)} />
              </Space>
            ))}
            <Form.Item>
              <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                Add field
              </Button>
            </Form.Item>
          </>
        )}
      </Form.List>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
}

render() {
        return (
            <div>
                <Row>
                    <Card title="基础按钮" className="base_button" >
                        <Button type="primary">按钮</Button>
                        <Button>按钮</Button>
                        <Button type="dashed">按钮</Button>
                        <Button type="danger">按钮</Button>
                        <Button disabled>按钮</Button>
                    </Card>

                    <Card title="图形按钮" className="base_button" >
                        <Button icon={<PlusOutlined />}>创建</Button>
                        <Button icon={<EditOutlined />}>编辑</Button>
                        <Button icon={<DeleteOutlined />}type="dashed">删除</Button>
                        <Button icon={<SearchOutlined />} type="primary">搜索</Button>
                        <Button icon={<DownloadOutlined />}  type="primary">下载</Button>
                    </Card>


                    <Card title="Loading按钮" className="base_button" >
                        <Button type="primary" loading={this.state.loading}>确定</Button>
                        <Button type="primary" shape="circle" loading={this.state.loading}></Button>
                        <Button loading={this.state.loading}>点击加载</Button>
                        <Button shape="circle" loading={this.state.loading}></Button>
                        <Button type="primary" onClick={this.handleCloseLoading}>关闭</Button>
                    </Card>

                    <Card title="按钮组" className="base_button" >
                        <Button.Group>
                            <Button type="primary" icon={<LeftOutlined/>}>返回</Button>
                            <Button  type="primary" icon={<RightOutlined/>}>前进</Button>
                        </Button.Group>
                    </Card>


                    <Card title="按钮尺寸" className="base_button" >
                        <Radio.Group value={this.state.size} onChange={this.handleChange}>
                            <Radio value="small">小</Radio>
                            <Radio value="default">中</Radio>
                            <Radio value="large">大</Radio>
                        </Radio.Group>

                        <Button size={this.state.size} type="primary">按钮</Button>
                        <Button size={this.state.size} >按钮</Button>
                        <Button size={this.state.size} type="dashed">按钮</Button>
                        <Button size={this.state.size} type="danger">按钮</Button>
                        <Button size={this.state.size} disabled>按钮</Button>
                    </Card>
                </Row>
            </div>
        );
    }

function OptionManagerModal({ visible, onCancel, options, onChange }) {
  const optionInput = useRef(null);

  const addOption = () => {
    const optionName = optionInput.current.state.value
      ? optionInput.current.state.value.trim()
      : "";
    const hasDuplicated = !!options.find((option) => option.name === optionName);

    if (optionName === "" || hasDuplicated) {
      return;
    }

    const newOption = createOption(optionName);
    onChange([...options, newOption]);
    optionInput.current.state.value = "";
  };

  const removeOption = (optionId) => {
    const newOptions = options.filter((option) => option.id !== optionId);

    onChange(newOptions);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    addOption();
  };

  return (
    <Modal
      title="Manage options"
      onCancel={onCancel}
      visible={visible}
      footer={
        <OptionForm onSubmit={handleSubmit}>
          <Input ref={optionInput} />
          <Button htmlType="submit" size="small" type="link" icon={<PlusOutlined />}>
            Add a option
          </Button>
        </OptionForm>
      }
    >
      {options.map(({ name, id }) => (
        <OptionItem key={id}>
          <Tag>{name}</Tag> <DeleteBtn onClick={() => removeOption(id)} />
        </OptionItem>
      ))}
    </Modal>
  );
}

actionMenu = ({
  onAddEdge,
  onDelEdge,
  onSetGridMode
}) => [
  {
    key: 'zoom-in',
    disable: true
  },
  {
    icon: <StarOutlined />,
    key: 'star',
    onClick: () => {
      alert('点击收藏！')
    }
  },
  {
    icon: <PlusOutlined />,
    key: 'plus',
    title: '添加一条连线',
    onClick: () => {
      onAddEdge();
    }
  },
  {
    icon: <MinusOutlined />,
    key: 'minus',
    title: '删除一条连线',
    onClick: () => {
      onDelEdge();
    }
  },
  {
    icon: <GatewayOutlined />,
    title: '框选',
    key: 'select',
    onClick: () => {
      onSetGridMode();
    }
  }
]

export default function QuadraticDiplomacyCreate({ mainnetProvider, tx, writeContracts }) {
  const [voters, setVoters] = useState([""]);
  const [voteAllocation, setVoteAllocation] = useState(0);
  const [isSendingTx, setIsSendingTx] = useState(false);
  const [form] = Form.useForm();

  const handleSubmit = async () => {
    // ToDo. Check if addresses are valid.
    setIsSendingTx(true);
    const filteredVoters = voters.filter(voter => voter);
    await tx(writeContracts.QuadraticDiplomacyContract.addMembersWithVotes(filteredVoters, voteAllocation), update => {
      if (update && (update.status === "confirmed" || update.status === 1)) {
        setVoters([""]);
        setVoteAllocation(0);
        form.resetFields();
        setIsSendingTx(false);
      } else if (update.error) {
        setIsSendingTx(false);
      }
    });
  };

  return (
    <div style={{ border: "1px solid", padding: "40px", width: "800px", margin: "64px auto 0px auto", textAlign: "left" }}>
      <Title level={3} style={{ fontFamily: "Space Mono" }}>Add members</Title>
      <Divider />
      <Form form={form} name="basic" onFinish={handleSubmit} labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} layout="horizontal">
        <Form.Item label="Vote Allocation" name="voteCredit" style={{ textAlign: "left" }} tooltip="Number of votes each voter will have">
          <Input
            type="number"
            placeholder="100"
            style={{ width: "30%" }}
            onChange={event => setVoteAllocation(event.target.value)}
          />
        </Form.Item>
        <Divider />
        {voters.map((_, index) => (
          <VoterInput
            key={index}
            index={index}
            setVoters={setVoters}
            voters={voters}
            mainnetProvider={mainnetProvider}
          />
        ))}
        <Form.Item style={{ justifyContent: "center", marginTop: 24 }}>
          {/*ToDo. Restart ant form state (the browser is keeping filled-removed elements)*/}
          <Button
            type="dashed"
            block
            icon={<PlusOutlined />}
            onClick={() => setVoters(prevVoters => [...prevVoters, ""])}
          >
            Add Voter
          </Button>
        </Form.Item>
        <Divider />
        <Form.Item wrapperCol={{ offset: 16, span: 8 }}>
          {/*ToDo Disable if empty members */}
          {!isSendingTx ? (
            <Button type="primary" htmlType="submit" block disabled={!voteAllocation}>
              Submit
            </Button>
          ) : (
            <Spin size="small" />
          )}
        </Form.Item>
      </Form>
    </div>
  );
}

SearchOne = (props) => {
  const { t } = useTranslation();
  const PICKER_LISTS = [
    [
      { value: "speed", label: t("速度") },
      { value: "stamina", label: t("耐力") },
      { value: "power", label: t("力量") },
      { value: "guts", label: t("根性") },
      { value: "wisdom", label: t("智力") },
      { value: "grass", label: t("草地") },
      { value: "dirt", label: t("泥地") },
      { value: "shortDistance", label: t("短距离") },
      { value: "mile", label: t("英里") },
      { value: "mediumDistance", label: t("中距离") },
      { value: "longDistance", label: t("长距离") },
      { value: "escapeR", label: t("逃") },
      { value: "leadingR", label: t("先") },
      { value: "insertR", label: t("差") },
      { value: "trackingR", label: t("追") },
    ],
    [
      { value: 1, label: `1${t("星")}` },
      { value: 2, label: `2${t("星")}` },
      { value: 3, label: `3${t("星")}` },
      { value: 4, label: `4${t("星")}` },
      { value: 5, label: `5${t("星")}` },
      { value: 6, label: `6${t("星")}` },
      { value: 7, label: `7${t("星")}` },
      { value: 8, label: `8${t("星")}` },
      { value: 9, label: `9${t("星")}` },
    ],
  ];
  return (
    <Form.List name={props.name}>
      {(fields, { add, remove }, { errors }) => (
        <List>
          {fields.map((field, index) => (
            <Form.Item
              {...field}
              key={field.key}
              name={[field.name, "attr"]}
              fieldKey={[field.fieldKey, "attr"]}
              rules={[{ required: true }]}
              validateTrigger={["onChange", "onBlur"]}
              noStyle
            >
              <Picker data={PICKER_LISTS} cascade={false} extra={t("请选择")}>
                <List.Item arrow="horizontal">{t("过滤条件(总计)")}</List.Item>
              </Picker>
            </Form.Item>
          ))}
          <List.Item>
            <Button type="dashed" onClick={() => add()} icon={<PlusOutlined />}>
              {t("添加过滤条件")}
            </Button>
          </List.Item>
        </List>
      )}
    </Form.List>
  );
}

render() {
    const { tags, inputVisible, inputValue, editInputIndex, editInputValue } = this.state;
    return (
      <>
        {tags.map((tag, index) => {
          if (editInputIndex === index) {
            return (
              <Input
                ref={this.saveEditInputRef}
                key={tag}
                size="small"
                className="tag-input"
                value={editInputValue}
                onChange={this.handleEditInputChange}
                onBlur={this.handleEditInputConfirm}
                onPressEnter={this.handleEditInputConfirm}
              />
            );
          }

          const isLongTag = tag.length > 20;

          const tagElem = (
            <Tag
              className="edit-tag"
              key={tag}
              closable={index !== 0}
              onClose={() => this.handleClose(tag)}
            >
              <span
                onDoubleClick={e => {
                  if (index !== 0) {
                    this.setState({ editInputIndex: index, editInputValue: tag }, () => {
                      this.editInput.focus();
                    });
                    e.preventDefault();
                  }
                }}
              >
                {isLongTag ? `${tag.slice(0, 20)}...` : tag}
              </span>
            </Tag>
          );
          return isLongTag ? (
            <Tooltip title={tag} key={tag}>
              {tagElem}
            </Tooltip>
          ) : (
            tagElem
          );
        })}
        {inputVisible && (
          <Input
            ref={this.saveInputRef}
            type="text"
            size="small"
            className="tag-input"
            value={inputValue}
            onChange={this.handleInputChange}
            onBlur={this.handleInputConfirm}
            onPressEnter={this.handleInputConfirm}
          />
        )}
        {!inputVisible && (
          <Tag className="site-tag-plus" onClick={this.showInput}>
            <PlusOutlined /> New Tag
          </Tag>
        )}
      </>
    );
  }

SearchOne = (props) => {
  return (
    <Form.List name={props.name}>
      {(fields, { add, remove }, { errors }) => (
        <>
          <Row>
            {fields.map((field, index) => (
              <Col key={field.key} lg={8} md={12} xs={24}>
                <Row>
                  <Form.Item
                    {...field}
                    name={[field.name, "attr"]}
                    fieldKey={[field.fieldKey, "attr"]}
                    rules={[{ required: true }]}
                    validateTrigger={["onChange", "onBlur"]}
                    noStyle
                  >
                    <Radio.Group>
                      <Radio.Button value={"speed"}>{"速度"}</Radio.Button>
                      <Radio.Button value={"stamina"}>{"耐力"}</Radio.Button>
                      <Radio.Button value={"power"}>{"力量"}</Radio.Button>
                      <Radio.Button value={"guts"}>{"根性"}</Radio.Button>
                      <Radio.Button value={"wisdom"}>{"智力"}</Radio.Button>
                      <br />
                      <Radio.Button value={"grass"}>{"草地/芝"}</Radio.Button>
                      <Radio.Button value={"dirt"}>{"泥地/ダート"}</Radio.Button>
                      <br />
                      <Radio.Button value={"shortDistance"}>{"短距离"}</Radio.Button>
                      <Radio.Button value={"mile"}>{"英里"}</Radio.Button>
                      <Radio.Button value={"mediumDistance"}>{"中距离"}</Radio.Button>
                      <Radio.Button value={"longDistance"}>{"长距离"}</Radio.Button>
                      <br />
                      <Radio.Button value={"escapeR"}>{"逃"}</Radio.Button>
                      <Radio.Button value={"leadingR"}>{"先"}</Radio.Button>
                      <Radio.Button value={"insertR"}>{"差"}</Radio.Button>
                      <Radio.Button value={"trackingR"}>{"追"}</Radio.Button>
                      <br />
                      <Radio.Button value={"uraLevel"}>{"URA"}</Radio.Button>
                    </Radio.Group>
                  </Form.Item>
                </Row>
                <Row>
                  <Form.Item
                    {...field}
                    name={[field.name, "level"]}
                    fieldKey={[field.fieldKey, "level"]}
                    rules={[{ required: true }]}
                  >
                    <Rate count={props.max} />
                  </Form.Item>
                </Row>
                <Col span={5}>
                  <Button type="dashed" onClick={() => remove(field.name)}>
                    移除
                  </Button>
                </Col>
              </Col>
            ))}
          </Row>
          <Row justify="start">
            <Form.Item>
              <Button
                type="dashed"
                onClick={() => add()}
                // style={{ width: '60%' }}
                icon={<PlusOutlined />}
              >
                添加过滤条件
              </Button>

              <Form.ErrorList errors={errors} />
            </Form.Item>
          </Row>
        </>
      )}
    </Form.List>
  );
}

TableList = () => {
  const [createModalVisible, handleModalVisible] = useState(false);
  const [updateModalVisible, handleUpdateModalVisible] = useState(false);
  const [updateFormValues, setUpdateFormValues] = useState({});
  const actionRef = useRef();
  const addFormRef = useRef();
  const updateFormRef = useRef();

  const handleAdd = async fields => {
    const hide = message.loading('正在添加');

    try {
      await addTyAdminEmailVerifyRecord({ ...fields });
      hide();
      message.success('添加成功');
      return true;
    } catch (error) {
      if ('fields_errors' in error.data) {
        for (let key in error.data.fields_errors) {
          var value = error.data.fields_errors[key];
          addFormRef.current.setFields([
            {
              name: key,
              errors: value,
            },
          ]);
        }
      } else {
        message.error('非字段类型错误');
      }
      hide();
      message.error('添加失败');
      return false;
    }
  };

  const handleUpdate = async (value, current_id) => {
    const hide = message.loading('正在修改');

    try {
      await updateTyAdminEmailVerifyRecord(value, current_id);
      hide();
      message.success('修改成功');
      return true;
    } catch (error) {
      if ('fields_errors' in error.data) {
        for (let key in error.data.fields_errors) {
          var value = error.data.fields_errors[key];
          updateFormRef.current.setFields([
            {
              name: key,
              errors: value,
            },
          ]);
        }
      } else {
        message.error('非字段类型错误');
      }
      hide();
      message.error('修改失败请重试！');
      return false;
    }
  };

  const handleRemove = async selectedRows => {
    const hide = message.loading('正在删除');
    if (!selectedRows) return true;

    try {
      const ids = selectedRows.map(row => row.id).join(',');
      await removeTyAdminEmailVerifyRecord(ids);
      hide();
      message.success('删除成功');
      return true;
    } catch (error) {
      hide();
      message.error('删除失败，请重试');
      return false;
    }
  };
  const dateFieldList = ["send_time"]
  const base_columns = [{
    title: 'ID',
    dataIndex: 'id',
    hideInForm: true,
    hideInSearch: true,
    rules: [
      {
        required: true,
        message: 'ID为必填项',
      },
    ],
  }, {
    title: '验证码',
    dataIndex: 'code',
    rules: [
      {
        required: true,
        message: '验证码为必填项',
      },
    ],
  }, {
    title: '邮箱',
    dataIndex: 'email',
    rules: [
      {
        required: true,
        message: '邮箱为必填项',
      },
    ],
  }, {
    title: '验证码类型',
    dataIndex: 'send_type',
    rules: [
      {
        required: true,
        message: '验证码类型为必填项',
      },
    ],
    valueEnum: {
      register: "注册", forget: "找回密码", update_email: "修改邮箱", login_auth: "登录授权"
    },
  }, {
    title: '发送时间',
    dataIndex: 'send_time',
    valueType: 'dateTime',
    hideInForm: true,
    rules: [
      {
        required: true,
        message: '发送时间为必填项',
      },
    ],
    render: (text, record) => {
      return dealDateTimeDisplay(text);
    },
  }, {
    title: '操作',
    dataIndex: 'option',
    valueType: 'option',
    fixed: 'right',
    width: 100,
    render: (text, record) => (
      <>

        <EditOutlined title="编辑" className="icon" onClick={async () => {
          record.send_time = moment(record.send_time);
          handleUpdateModalVisible(true);
          setUpdateFormValues(record);
        }} />
        <Divider type="vertical" />
        <Popconfirm
          title="您确定要删除TyAdmin邮箱验证码吗？"
          placement="topRight"
          onConfirm={() => {
            handleRemove([record])
            actionRef.current.reloadAndRest();
          }}
          okText="确定"
          cancelText="取消"
        >
          <DeleteOutlined title="删除" className="icon" />
        </Popconfirm>
      </>
    ),
  },];

  let cp = deepCopy(base_columns);
  const table_columns = getTableColumns(cp);

  const update_columns = [...base_columns];

  const create_columns = [...base_columns];

  const [columnsStateMap, setColumnsStateMap] = useState({});

  const [paramState, setParamState] = useState({});

  const [showDropdown, setShowDropdown] = useState(false)




  return (
    <PageHeaderWrapper>
      <ProTable
        beforeSearchSubmit={(params => {
          dealTime(params, dateFieldList);
          return params;
        })}
        params={paramState}
        scroll={{ x: '100%' }}
        columnsStateMap={columnsStateMap}
        onColumnsStateChange={(map) => setColumnsStateMap(map)}
        headerTitle="TyAdmin邮箱验证码表格"
        actionRef={actionRef}
        rowKey="id"
        toolBarRender={(action, { selectedRows }) => [
          <Button type="primary" onClick={() => handleModalVisible(true)}>
            <PlusOutlined /> 新建
          </Button>,
          <Input.Search style={{ marginRight: 20 }} placeholder="搜索TyAdmin邮箱验证码 " onSearch={value => {
            setParamState({
              search: value,
            });
            actionRef.current.reload();
          }} />,
          selectedRows && selectedRows.length > 0 && (
            <Dropdown
              overlay={
                <Menu
                  onClick={async e => {
                    if (e.key === 'remove') {
                      await handleRemove(selectedRows);
                      actionRef.current.reloadAndRest();
                    }
                  }}
                  selectedKeys={[]}
                >
                  <Menu.Item key="remove">批量删除</Menu.Item>
                </Menu>
              }
            >
              <Button>
                批量操作 <DownOutlined />
              </Button>
            </Dropdown>
          ),
        ]}
        tableAlertRender={({ selectedRowKeys, selectedRows }) => (
          selectedRowKeys.length > 0 ? <div>
            已选择{' '}
            <a
              style={{
                fontWeight: 600,
              }}
            >
              {selectedRowKeys.length}
            </a>{' '}
            项&nbsp;&nbsp;
          </div> : false

        )}
        request={(params, sorter, filter) => queryTyAdminEmailVerifyRecord({ ...params, sorter, filter })}
        columns={table_columns}
        rowSelection={{}}
      />
      <CreateForm onCancel={() => handleModalVisible(false)} modalVisible={createModalVisible}>
        <Card>
          <DragTree />
        </Card>
        <Form >
          <Form.Item
            style={{ marginBottom: 24 }}
            name="userName"
            placeholder="菜单图标"
            label="菜单图标"
            rules={[
              {
                required: true,
                message: '请输入用户名!',
              },
            ]}
          >
            <IconDisplay />
          </Form.Item>
        </Form>
        <ProTable
          formRef={addFormRef}
          onSubmit={async value => {
            richTrans(value);
            const success = await handleAdd(value);

            if (success) {
              handleModalVisible(false);

              if (actionRef.current) {
                actionRef.current.reload();
              }
            }
          }}
          rowKey="key"
          type="form"

          form={
            {
              labelCol: { span: 6 },
              labelAlign: 'left',
            }}
          columns={create_columns}
          rowSelection={{}}
        />

      </CreateForm>
      <UpdateForm onCancel={() => handleUpdateModalVisible(false)} modalVisible={updateModalVisible}>
        <ProTable
          formRef={updateFormRef}
          onSubmit={async value => {
            richTrans(value);
            const success = await handleUpdate(value, updateFormValues.id);

            if (success) {
              handleUpdateModalVisible(false);

              if (actionRef.current) {
                actionRef.current.reload();
              }
            }
          }}
          rowKey="key"

          type="form"
          form={{
            initialValues: updateFormValues, labelCol: { span: 6 },
            labelAlign: 'left',
          }}
          columns={update_columns}
          rowSelection={{}}
        />
      </UpdateForm>
    </PageHeaderWrapper>
  );
}