antd#Checkbox JavaScript Examples

StyledCheckbox = styled(Checkbox)`
  .ant-checkbox .ant-checkbox-inner {
      background-color: transparent;
      border-color: #b5b5b6;
  }
  .ant-checkbox-checked .ant-checkbox-inner {
      background-color: transparent;
      border-color: #b5b5b6;
  }
  .ant-checkbox-disabled .ant-checkbox-inner {
      background-color: #333333;
      border: 1px solid #b5b5b6;
  }
  .ant-checkbox-checked::after {
      border: 1px solid #333333;
  }
  .ant-checkbox::after {
      border: 1px solid #333333;
  }
`

render() {
        return (
         
            <Row className="login" justify="center" align="middle"	>
                <Col span={8}>
                    <h1>欢迎登录后台管理系统</h1>
                    <Form className="login-form" initialValues={{ remember: true }}>
                        <Form.Item name="username" rules={[{ required: true, message: '请输入用户名!!!' }]}>
                            <Input name="username" prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入用户名" onChange={this.onInputChange} />
                        </Form.Item>

                        <Form.Item  name="password" rules={[{ required: true, message: '请输入密码!!!' }]}>
                            <Input name="password" prefix={<LockOutlined className="site-form-item-icon" />}type="password" placeholder="请输入密码" onChange={this.onInputChange} />
                        </Form.Item>

                        <Form.Item>
                            <Form.Item name="remember" valuePropName="checked" noStyle>
                                <Checkbox>记住用户和密码</Checkbox>
                            </Form.Item>
                            <a className="login-form-forgot" >
                                忘记密码
                            </a>
                        </Form.Item>

                        <Form.Item>
                            <Button type="primary" htmlType="submit" className="login-form-button" onClick={this.onSubmit} >
                                登录
                            </Button>
                        </Form.Item>
                    </Form>
                </Col>
            </Row>
        );
    }

render() {
        let label = this.props.label,
            options = this.props.options,
            disabled = this.props.disabled,
            onChange = this.props.onChange,
            value = this.props.value;
        return (
            <div className={classnames({
                'xform-custom-widget': true,
                'xform-custom-boolean-checkbox': true
            })}>
                <Checkbox
                    checked={value}
                    disabled={disabled}
                    onChange={(event) => {
                        onChange(event.target.checked);
                    }}
                    {...options}
                >{label}</Checkbox>
            </div>
        );

    }

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

render() {
    const { isConflict, onCancel, notice, onEmailNotice } = this.props;
    return (
      <div>
        <div
          id="desc"
          className="wiki-editor"
          style={{ display: !isConflict ? 'block' : 'none' }}
        />
        <div className="wiki-title wiki-up">
          <Button
            icon="upload"
            type="primary"
            className="upload-btn"
            disabled={isConflict}
            onClick={this.onUpload}
          >
            更新
          </Button>
          <Button onClick={onCancel} className="upload-btn">
            取消
          </Button>
          <Checkbox checked={notice} onChange={onEmailNotice}>
            通知相关人员
          </Checkbox>
        </div>
      </div>
    );
  }

render() {
    return (
      <div>
        <div className="row">
          <div className="col-lg-6">
            <h5 className="mb-3">
              <strong>Checkbox Group</strong>
            </h5>
            <Checkbox.Group options={plainOptions} defaultValue={['Apple']} onChange={onChange} />
            <br />
            <br />
            <Checkbox.Group options={options} defaultValue={['Pear']} onChange={onChange} />
            <br />
            <br />
            <Checkbox.Group
              options={optionsWithDisabled}
              disabled
              defaultValue={['Apple']}
              onChange={onChange}
            />
          </div>
          <div className="col-lg-6">
            <h5 className="mb-3">
              <strong>Basic</strong>
            </h5>
            <Checkbox onChange={onChange}>Checkbox</Checkbox>
          </div>
        </div>
      </div>
    )
  }

TabPaneGeneral = (store) => {
  const env = getEnv(getRoot(store));

  return Object.keys(EditorSettings).map((obj, index)=> {
    return (
      <span key={index}>
        <Checkbox
          key={index}
          checked={store.settings[obj]}
          onChange={store.settings[EditorSettings[obj].onChangeEvent]}
        >
          {EditorSettings[obj].description}
        </Checkbox>
        <br />
      </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>
    </>
  )
})

render() {
    const labelClass = this.props.labelClass ? this.props.labelClass : '';
    const { checked, itemData = {} } = this.props;
    return (
      <label
        className={'wrapperLabel radioLabel ' + labelClass}
        htmlFor={this.props.id}
      >
        <Checkbox
          id={this.props.id}
          className="radioInput"
          value={this.props.value}
          checked={checked}
          onChange={this.onSelected}
          size="small"
        />
        <span className="wrapperText">
          <Tooltip title={itemData.description || ''} placement="topLeft">
            {this.props.label}
          </Tooltip>
        </span>
      </label>
    );
  }

App = () => {
  const [checkedList, setCheckedList] = React.useState(defaultCheckedList);
  const [indeterminate, setIndeterminate] = React.useState(true);
  const [checkAll, setCheckAll] = React.useState(false);

  const onChange = list => {
    setCheckedList(list);
    setIndeterminate(!!list.length && list.length < plainOptions.length);
    setCheckAll(list.length === plainOptions.length);
  };

  const onCheckAllChange = e => {
    setCheckedList(e.target.checked ? plainOptions : []);
    setIndeterminate(false);
    setCheckAll(e.target.checked);
  };

  return (
    <>
      <Checkbox indeterminate={indeterminate} onChange={onCheckAllChange} checked={checkAll}>
        Check all
      </Checkbox>
      <Divider />
      <CheckboxGroup options={plainOptions} value={checkedList} onChange={onChange} />
    </>
  );
}

AcyCheckBox =(props)=>{
  return <Checkbox 
      {...props} 
    >
    {props.children}
  </Checkbox>
}

render() {
        return (
            <div>
                <Card title="内敛表单" className="card-wrap-login">
                    <Form  name="horizontal_login" layout="inline">
                        <Form.Item name="username" rules={[{ required: true, message: 'Please input your username!' }]}>
                            <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="用户名" />
                        </Form.Item>
                        <Form.Item name="password" rules={[{ required: true, message: 'Please input your password!' }]}>
                            <Input prefix={<LockOutlined className="site-form-item-icon" />} type="password" placeholder="密码"/>
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary" htmlType="submit">
                                登录
                            </Button>
                        </Form.Item>
                    </Form>
                </Card>
                <Card title="外联表单" className="card-wrap">
                    <Form name="normal_login" className="login-form" initialValues={{ remember: true }}>
                        <Form.Item  rules={[{ required: true, message: '请输入用户名！！！' }]}>
                            <Input name="username" prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入用户名" onChange={this.onInputChange} />
                        </Form.Item>
                        <Form.Item rules={[{ required: true, message: '请输入密码！！！' }]}>
                            <Input name="password" prefix={<LockOutlined className="site-form-item-icon" />} type="password" placeholder="请输入密码" onChange={this.onInputChange}/>
                        </Form.Item>
                        <Form.Item>
                            <Form.Item name="remember" valuePropName="checked" noStyle>
                                <Checkbox>记住密码</Checkbox>
                            </Form.Item>
                            <a className="login-form-forgot" href="">
                                忘记密码
                            </a>
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary" htmlType="submit" className="login-form-button" onClick={this.onhandleSubmit}>
                             登录
                            </Button>
                        
                        </Form.Item>
                    </Form>
                </Card>
            </div>
        );
    }

BalanceHeaderNavBar = ({ loading, onSearchInputChange }) => {
  const balances = useSelector((state) => state.balances);
  const language = useSelector((state) => state.userPreferences.language);
  const dispatch = useDispatch();

  function clicked(e) {
    dispatch(updateHideLowBalanceAssets(e.target.checked));
  }

  function searchInputChange(e) {
    onSearchInputChange(e.target.value);
  }

  // https://github.com/ant-design/ant-design/issues/5866
  let placeholder = language === 'en' ? 'Search asset symbol' : '搜索资产代码';

  return (
    <LargeTableHeader>
      <Row gutter={8}>
        <Col
          style={{
            paddingRight: '0px',
            margin: 'auto 0px',
          }}
        >
          <span>
            <FontAwesomeIcon icon={faSearch} />
          </span>
        </Col>
        <Col
          style={{
            paddingLeft: '0px',
          }}
        >
          <SearchInput
            style={{}}
            disabled={loading}
            placeholder={placeholder}
            onChange={searchInputChange}
          />
        </Col>
        <Col
          style={{
            maxWidth: '20px',
            minWidth: '20px',
          }}
        ></Col>
        <Col span={5}>
          <Checkbox
            style={{
              marginLeft: '4px',
              marginTop: '4px',
              marginBottom: 'auto',
              textTransform: 'none',
            }}
            onChange={clicked}
            defaultChecked={balances.hideLowBalanceAssets}
          >
            <I s="Hide zero-balance assets" />
          </Checkbox>
        </Col>
      </Row>
    </LargeTableHeader>
  );
}

render() {
		const { collapsed } = this.state;
		return (
			<Sider
				// width={220}
				style={{
					overflow: 'auto',
					height: 'cover',
					// position: 'fixed',
					left: 0,
				}}
				collapsible
				collapsed={collapsed}
				onCollapse={this.onCollapse}>
				<div className='logo' />
				<Menu theme='dark' defaultSelectedKeys={['1']} mode='inline'>
					<SubMenu
						className='submenu'
						style={{ minHeight: '70px', padding: 15, fontSize: 'x-large' }}
						key='sub1'
						icon={<UnorderedListOutlined style={{ fontSize: 'large' }} />}
						title='Sort by'>
						<Menu.Item key='1'>
							<Checkbox onChange={onChange}></Checkbox> Oxygen
						</Menu.Item>
						<Menu.Item key='2'>
							<Checkbox onChange={onChange}></Checkbox> Medicine
						</Menu.Item>
						<Menu.Item key='3'>
							<Checkbox onChange={onChange}></Checkbox> Money
						</Menu.Item>
						<Menu.Item key='4'>
							<Checkbox onChange={onChange}></Checkbox> Hospital beds
						</Menu.Item>
						<Menu.Item key='5'>
							<Checkbox onChange={onChange}></Checkbox> Plasma donors
						</Menu.Item>
					</SubMenu>
				</Menu>
			</Sider>
		);
	}

function LoginPage() {
  const loader = useSelector(state => state.authentication.loader)

  const dispatch = useDispatch();

  return (
    <div className="container">
      <Form
        name="normal_login"
        className="form"
        initialValues={{
          remember: true,
        }}
        onFinish={() => dispatch(login(
          {'email': '[email protected]', 'password': 'cityslicka'},
        ))
        }
      >
        <Form.Item
          name="username"
          rules={[
            {
              required: true,
              message: 'Please input your Username!',
            },
          ]}
        >
          <Input size="large"
            prefix={<UserOutlined className="site-form-item-icon"/>}
            placeholder="Username"
            autoComplete="username"
          />
        </Form.Item>
        <Form.Item
          name="password"
          rules={[
            {
              required: true,
              message: 'Please input your Password!',
            },
          ]}
        >
          <Input
            prefix={<LockOutlined className="site-form-item-icon"/>}
            type="password"
            placeholder="Password"
            size="large"
            autoComplete="current-password"
          />
        </Form.Item>
        <Form.Item>
          <Form.Item name="remember" valuePropName="checked" noStyle>
            <Checkbox>Remember me</Checkbox>
          </Form.Item>
        </Form.Item>

        <Form.Item>
          <Button loading={loader} type="primary" htmlType="submit" className="login-form-button"
            size="large">Log in
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}

CheckboxGroup = Checkbox.Group

render() {
        return (
            <div className='login-bg'
                 style={{width: this.state.width, height: this.state.height, background: `url(${Background})`}}>
                <Card className='login-card' title={null}>
                    <div style={{textAlign: "center", margin: '15px auto 30px auto', color: '#1890ff'}}>
                        <Title level={1}>Next Terminal</Title>
                    </div>
                    <Form onFinish={this.handleSubmit} className="login-form">
                        <Form.Item name='username' rules={[{required: true, message: '请输入登录账号！'}]}>
                            <Input prefix={<UserOutlined/>} placeholder="登录账号"/>
                        </Form.Item>
                        <Form.Item name='password' rules={[{required: true, message: '请输入登录密码！'}]}>
                            <Input.Password prefix={<LockOutlined/>} placeholder="登录密码"/>
                        </Form.Item>
                        <Form.Item name='remember' valuePropName='checked' initialValue={false}>
                            <Checkbox>记住登录</Checkbox>
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary" htmlType="submit" className="login-form-button"
                                    loading={this.state.inLogin}>
                                登录
                            </Button>
                        </Form.Item>
                    </Form>
                </Card>

                <Modal title="双因素认证" visible={this.state.totpModalVisible} confirmLoading={this.state.confirmLoading}
                       maskClosable={false}

                       okButtonProps={{form:'totp-form', key: 'submit', htmlType: 'submit'}}
                       onOk={() => {
                           this.formRef.current
                               .validateFields()
                               .then(values => {
                                   this.handleOk(values);
                                   // this.formRef.current.resetFields();
                               });
                       }}
                       onCancel={this.handleCancel}>

                    <Form id='totp-form' ref={this.formRef}>

                        <Form.Item name='totp' rules={[{required: true, message: '请输入双因素认证APP中显示的授权码'}]}>
                            <Input ref={this.totpInputRef} prefix={<OneToOneOutlined/>} placeholder="请输入双因素认证APP中显示的授权码"/>
                        </Form.Item>
                    </Form>
                </Modal>
            </div>

        );
    }

AppsGallery = () => {
  return (
    <div>
      <Helmet title="Gallery" />
      <div className="card">
        <div className="card-body">
          <div className="d-flex flex-wrap mb-4">
            <Checkbox>Models</Checkbox>
            <Checkbox>Fashion</Checkbox>
            <Checkbox>Cars</Checkbox>
            <Checkbox checked>Wallpapers</Checkbox>
          </div>
          <div className={style.items}>
            {data.map(item => (
              <div key={Math.random()} className={style.item}>
                <div className={style.itemContent}>
                  <div className={style.itemControl}>
                    <div className={style.itemControlContainer}>
                      <Button.Group size="default">
                        <Button>
                          <EditOutlined />
                        </Button>
                        <Button>
                          <DeleteOutlined />
                        </Button>
                      </Button.Group>
                    </div>
                  </div>
                  <img src={item.path} alt="Gallery" />
                </div>
                <div className="text-gray-6">
                  <div>{item.name}</div>
                  <div>{item.size}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}

CheckboxGroup = Checkbox.Group

function getElement(item) {
    const {type = 'input', component, ...props} = item;

    const commonProps = {
        size: 'default',
    };
    // 样式
    // const width = props.width || '100%';
    // const elementCommonStyle = {width};
    // props.style = props.style ? {...elementCommonStyle, ...props.style} : elementCommonStyle;

    // 如果 component 存在，说明是自定义组件
    if (component) {
        return typeof component === 'function' ? component() : component;
    }

    if (isInputLikeElement(type)) {
        if (type === 'number') return <InputNumber {...commonProps} {...props}/>;
        if (type === 'textarea') return <TextArea {...commonProps} {...props}/>;
        if (type === 'password') return <Password {...commonProps} {...props}/>;

        return <Input {...commonProps} type={type} {...props}/>;
    }

    if (type === 'select') {
        const {options = [], ...others} = props;

        return (
            <Select {...commonProps} {...others}>
                {
                    options.map(opt => <Select.Option key={opt.value} {...opt}>{opt.label}</Select.Option>)
                }
            </Select>
        );
    }

    if (type === 'select-tree') return <TreeSelect {...commonProps} {...props} treeData={props.options}/>;

    if (type === 'checkbox') return <Checkbox {...commonProps} {...props}>{props.label}</Checkbox>;
    if (type === 'checkbox-group') return <Checkbox.Group {...commonProps} {...props}/>;

    if (type === 'radio') return <Radio {...commonProps} {...props}>{props.label}</Radio>;
    if (type === 'radio-group') return <Radio.Group {...commonProps} {...props}/>;
    if (type === 'radio-button') {
        const {options = [], ...others} = props;
        return (
            <Radio.Group buttonStyle="solid" {...commonProps} {...others}>
                {options.map(opt => <Radio.Button key={opt.value} {...opt}>{opt.label}</Radio.Button>)}
            </Radio.Group>
        );
    }

    if (type === 'cascader') return <Cascader {...commonProps} {...props}/>;

    if (type === 'switch') return <Switch {...commonProps} {...props} style={{...props.style, width: 'auto'}}/>;

    if (type === 'date') return <DatePicker {...commonProps} {...props}/>;

    if (type === 'date-time') return <DatePicker {...commonProps} showTime {...props}/>;

    if (type === 'date-range') return <DatePicker.RangePicker {...commonProps} {...props}/>;

    if (type === 'month') return <DatePicker.MonthPicker {...commonProps} {...props}/>;

    if (type === 'time') return <TimePicker {...commonProps} {...props}/>;

    if (type === 'transfer') return <Transfer {...commonProps} {...props}/>;

    if (type === 'icon-picker') return <IconPicker {...commonProps} {...props}/>;

    throw new Error(`no such type: ${type}`);
}

render() {
    const {
      item,
      handlePreview,
      handleDelete,
      handleEdit,
      handleItem,
      ...restProps
    } = this.props;
    let className = restProps.className;
    let isSelect = restProps.isSelect;

    return (
      <span className={isSelect ? `${styles[className]} ${styles.unmultiOpera}` : styles.unmultiOpera}>
      <div className={`ant-upload-list ant-upload-list-picture-card` }>
        <div className={`ant-upload-list-item ant-upload-list-item-done`} style={{padding:'3px', position: 'relative'}}>
          <span className={styles.Itemcheckbox}><Checkbox checked={isSelect} onChange={() => handleItem(item)}/></span>
          <div className="ant-upload-list-item-info">
            <span>
              <a className="ant-upload-list-item-thumbnail" style={{ width: '102px', height: '102px' }}>
                {item.file_type === 'picture'
                  ? <img src={`${item.file}?imageView2/0/w/102/h/102`} style={{ width: '102px', height: '102px' }} alt={item.label}/>
                  : <video src={item.file} poster={`${item.file}?vframe/jpg/offset/1`} preload="meta" style={{ width: '102px', height: '102px' }}/>
                }
              </a>
            </span>
            <span className="ant-upload-list-item-actions" style={{textAlign: 'center', lineHeight: '102px'}}>
              <a onClick={() => handlePreview(item)} title="预览文件">
                <i aria-label="图标: eye-o" className="anticon anticon-eye-o">
                  <svg viewBox="64 64 896 896" className="" data-icon="eye" width="1em" height="1em" fill="currentColor" aria-hidden="true">
                    <path d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 0 0 0 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"/>
                  </svg>
                </i>
              </a>
              { handleEdit &&
                <Icon onClick={() => handleEdit(item)} type="edit" title="编辑文件" className="anticon anticon-delete" />
              }
              {handleDelete &&
                <i onClick={() => handleDelete(item)} aria-label="图标: delete" title="删除文件" tabIndex="-1" className="anticon anticon-delete">
                  <svg viewBox="64 64 896 896" className="" data-icon="delete" width="1em" height="1em" fill="currentColor" aria-hidden="true">
                    <path d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"/>
                  </svg>
                </i>
              }
            </span>
          </div>
          <span onClick={() => handleItem(item)}>
            <div className={styles.title_text}>{item.label}</div>
            <div className={styles.title_time}>
              {moment(item.create_at).format('YYYY-MM-DD')}
              <Row>
                <Col span={12} style={{textAlign:'left'}}>{moment(item.create_at).format('kk:mm')}</Col>
                <Col span={12} style={{textAlign:'right'}}>上传</Col>
              </Row>
            </div>
          </span>
        </div>
      </div>
      </span>
    );
  }

render() {
    const { item, store } = this.props;
    let style = {};

    if (item.style) style = Tree.cssConverter(item.style);

    if (!item.visible) {
      style["display"] = "none";
    }

    const showHotkey =
      (store.settings.enableTooltips || store.settings.enableLabelTooltips) &&
      store.settings.enableHotkeys &&
      item.hotkey;

    const props = {
      checked: item.sel,
      disabled: item.parent?.readonly || item.annotation?.readonly,
      onChange: ev => {
        if (!item.annotation.editable) return;
        item.toggleSelected();
        ev.nativeEvent.target.blur();
      },
    };

    if (item.isCheckbox) {
      const cStyle = Object.assign({ display: "flex", alignItems: "center", marginBottom: 0 }, style);

      return (
        <Form.Item style={cStyle}>
          <Checkbox name={item._value} {...props}>
            {item._value}
            {showHotkey && <Hint>[{item.hotkey}]</Hint>}
          </Checkbox>
        </Form.Item>
      );
    } else {
      return (
        <div style={style}>
          <Radio value={item._value} style={{ display: "inline-block", marginBottom: "0.5em" }} {...props}>
            {item._value}
            {showHotkey && <Hint>[{item.hotkey}]</Hint>}
          </Radio>
        </div>
      );
    }
  }

VolcanoDimensionsRangeEditor = (props) => {
  const {
    config, onUpdate, yMax, xMax,
  } = props;
  const [newConfig, handleChange] = useUpdateThrottled(onUpdate, config);

  const rangeFormatter = (value) => (value === 0 ? 'Auto' : value.toString());

  // yMin has to be set to reasonable value to avoid plot blowing up
  // when yMin is too small and the max data value is too high
  const yMin = Math.round(0.3 * yMax);

  return (
    <Space direction='vertical' style={{ width: '80%' }}>
      <DimensionsRangeEditor
        config={config}
        onUpdate={onUpdate}
      />
      <Form.Item
        label='Y-Axis Range'
      >
        <Checkbox
          onChange={() => {
            onUpdate({ yAxisAuto: !config.yAxisAuto });
          }}
          defaultChecked
          checked={config.yAxisAuto}
        >
          Auto
        </Checkbox>
        <Slider
          value={newConfig.maxNegativeLogpValueDomain}
          min={yMin}
          max={yMax}
          onChange={(value) => {
            handleChange({ maxNegativeLogpValueDomain: value });
          }}
          disabled={config.yAxisAuto}
        />
      </Form.Item>
      <Form.Item
        label='X-Axis Range'
      >
        <Checkbox
          onChange={() => {
            onUpdate({ xAxisAuto: !config.xAxisAuto });
          }}
          checked={config.xAxisAuto}
          defaultChecked
        >
          Auto
        </Checkbox>
        <Slider
          value={newConfig.logFoldChangeDomain}
          min={1}
          max={xMax}
          tipFormatter={rangeFormatter}
          onChange={(value) => {
            handleChange({ logFoldChangeDomain: value });
          }}
          disabled={config.xAxisAuto}
        />
      </Form.Item>

    </Space>
  );
}

componentMapping = {
  input: Input,
  password: Input.Password,
  checkbox: Checkbox,
  date: DatePicker,
}

componentMapping = {
  input: Input,
  password: Input.Password,
  checkbox: Checkbox,
  date: DatePicker,
}

render() {
    // https://github.com/ant-design/ant-design/issues/5866
    const userPreferences = this.props.userPreferences;
    const language = userPreferences.language;
    let placeholder =
      language === "en" ? "Search asset symbol" : "搜索资产代码";
    return (
      <LargeTableHeader>
        <Row gutter={8}>
          <Col span={5}>
            <SearchInput
              style={{}}
              disabled={this.props.loading}
              placeholder={placeholder}
              onChange={this.onSearchInputChange}
            />
          </Col>
          <Col
            style={{
              maxWidth: "20px",
              minWidth: "20px",
            }}
          ></Col>
          <Col span={5}>
            <Checkbox
              style={{
                marginLeft: "4px",
                marginTop: "4px",
                marginBottom: "auto",
                textTransform: "none",
              }}
              onChange={this.clicked}
              defaultChecked={this.props.balances.hideLowBalanceAssets}
            >
              <I s="Hide zero-balance assets" />
            </Checkbox>
          </Col>
        </Row>
      </LargeTableHeader>
    );
  }

function EmailAddress({ intl, onValidateFields }) {
  const { email } = useSelector(stateSelector);
  const dispatch = useDispatch();

  const onChangeInput = (event) => dispatch(changeInputAction(event.target));
  const onCheckEmail = (value, reject, resolve) =>
    dispatch(checkEmailAction(value, reject, resolve));

  const checkEmailAddressAlreadyExist = (_, value, callback) =>
    new Promise((resolve, reject) =>
      onCheckEmail(value, reject, resolve),
    ).catch(() => callback(intl.formatMessage(messages.emailExist)));

  const checkDataProcessingIsAccepted = (_, value) => {
    if (value) {
      return Promise.resolve();
    }

    return Promise.reject(
      new Error(
        intl.formatMessage(messages.validation_processing_personal_data),
      ),
    );
  };

  return (
    <>
      <StyledFormItem
        label={intl.formatMessage(messages.label)}
        name="email"
        hasFeedback
        rules={[
          {
            type: 'email',
            message: intl.formatMessage(messages.validation_email_valid),
          },
          {
            required: true,
            message: intl.formatMessage(messages.validation_email_required),
          },
          { asyncValidator: checkEmailAddressAlreadyExist },
        ]}
      >
        <Input
          onPressEnter={onValidateFields}
          onKeyPress={disabledSpacesInput}
          onChange={(event) => onChangeInput(event)}
          name="email"
          value={email}
          placeholder={intl.formatMessage(messages.placeholder)}
        />
      </StyledFormItem>

      <StyledFormItem
        tailed="true"
        name="confirm-personal-data"
        valuePropName="checked"
        rules={[{ validator: checkDataProcessingIsAccepted }]}
      >
        <Checkbox>
          <FormattedMessage {...messages.checkbox_content} />
        </Checkbox>
      </StyledFormItem>

      <StyledInformation>
        <FormattedMessage {...messages.information} />
      </StyledInformation>
    </>
  );
}

render() {
        let options = LocaleUtils.LOCALES.map((l) => (
            <Option key={l.value} value={l.value}>
                {l.label}
            </Option>
        ));
        return (
            <div>
                <Modal
                    title={intl.get("SystemConfig.title")}
                    visible={this.state.visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                >
                    <Row gutter={[16, 16]}>
                        <Col span={6}>{intl.get("SystemConfig.lang")}</Col>
                        <Col span={18}>
                            <Select
                                key={this.state.config.lang}
                                defaultValue={this.state.config.lang}
                                style={{ width: 300 }}
                                onChange={this.handleLangChange.bind(this)}
                            >
                                {options}
                            </Select>
                        </Col>
                        <Col span={6}>
                            {intl.get("SystemConfig.tree.split")}
                        </Col>
                        <Col span={18}>
                            <Tooltip title="When you set this value, the keys will be displayed in the form of a directory.">
                                <Input
                                    style={{ width: 300 }}
                                    placeholder="Input Delimiter"
                                    defaultValue={this.state.config.splitSign}
                                    value={this.state.config.splitSign}
                                    onChange={this.handleSplitSignChange}
                                />
                            </Tooltip>
                        </Col>
                        <Col span={6}>
                            {intl.get("SystemConfig.auto.format.json")}
                        </Col>
                        <Col span={18}>
                            <Checkbox
                                onChange={this.handleAutoFormatJsonChange}
                                checked={this.state.config.autoFormatJson}
                            ></Checkbox>
                        </Col>
                    </Row>
                </Modal>
            </div>
        );
    }

function SubLabel(props) {
  const {
    data = {},
    isChecked,
    handleSelectCheckbox,
    defaultExpand = false,
  } = props;
  const { sub_labels: subLabels = [], name: title = '' } = data;

  const [isExpand, setIsExpand] = React.useState(defaultExpand);

  return (
    <div className="sub-label">
      <div className="title" onClick={() => setIsExpand(!isExpand)}>
        <Icon
          className="collapse-icon"
          name={isExpand ? 'minus' : 'plus-sign'}
          theme="filled"
        />
        <span className={'title-text'}>{title}</span>
      </div>
      {isExpand && (
        <div className={'radio-list'}>
          {subLabels.map(sub => (
            <Checkbox
              value={sub.id}
              checked={isChecked(sub)}
              className={'radio'}
              key={sub.id}
              onChange={event => handleSelectCheckbox(event, sub)}
            >
              <Tooltip title={sub.description || ''} placement="topLeft">
                {sub.name}
              </Tooltip>
            </Checkbox>
          ))}
        </div>
      )}
    </div>
  );
}