antd#Radio JavaScript Examples

StyledSelect = styled(Radio.Group)`
  .ant-radio-button-wrapper{
    background: transparent !important;
    height: 22px;
    font-size: 0.7rem;
    padding: 0 0.1rem;
    border: 0.75px solid #333333;
    border-radius: 0 0 0 0;
    line-height: 22px;
    color: #b5b5b6;
  }
  .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled){
    color: #ffffff;
    box-shadow: 0 0 0 0 #0e0304;
    border-color: #333333;
  }
  .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover{
    color: #ffffff;
  }
  .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)::before{
    background-color: #0e0304 !important;
  }
  .ant-radio-button-wrapper:not(:first-child)::before{
    background-color: transparent;
  }
`

function TimelimeLabelDemo() {
  const [mode, setMode] = useState('left');

  const onChange = e => {
    setMode(e.target.value);
  };

  return (
    <>
      <Radio.Group
        onChange={onChange}
        value={mode}
        style={{
          marginBottom: 20,
        }}
      >
        <Radio value="left">Left</Radio>
        <Radio value="right">Right</Radio>
        <Radio value="alternate">Alternate</Radio>
      </Radio.Group>
      <Timeline mode={mode}>
        <Timeline.Item label="2015-09-01">Create a services</Timeline.Item>
        <Timeline.Item label="2015-09-01 09:12:11">Solve initial network problems</Timeline.Item>
        <Timeline.Item>Technical testing</Timeline.Item>
        <Timeline.Item label="2015-09-01 09:12:11">Network problems being solved</Timeline.Item>
      </Timeline>
    </>
  );
}

StyledSelect = styled(Radio.Group)`
  .ant-radio-button-wrapper{
    background: transparent !important;
    height: 22px;
    font-size: 0.7rem;
    padding: 0 0.1rem;
    border: 0.75px solid #333333;
    border-radius: 0 0 0 0;
    line-height: 22px;
    color: #b5b5b6;
  }
  .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled){
    color: #ffffff;
    box-shadow: 0 0 0 0 #0e0304;
    border-color: #333333;
  }
  .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover{
    color: #ffffff;
  }
  .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)::before{
    background-color: #0e0304 !important;
  }
  .ant-radio-button-wrapper:not(:first-child)::before{
    background-color: transparent;
  }
`

render() {
    const { mode } = this.state;
    return (
      <div>
        <Radio.Group onChange={this.handleModeChange} value={mode} style={{ marginBottom: 8 }}>
          <Radio.Button value="top">Horizontal</Radio.Button>
          <Radio.Button value="left">Vertical</Radio.Button>
        </Radio.Group>
        <Tabs defaultActiveKey="1" tabPosition={mode} style={{ height: 220 }}>
          {[...Array.from({ length: 30 }, (v, i) => i)].map(i => (
            <TabPane tab={`Tab-${i}`} key={i} disabled={i === 28}>
              Content of tab {i}
            </TabPane>
          ))}
        </Tabs>
      </div>
    );
  }

export default function PlatformPopover(props) {
    const {visible, platform, platformChangeHandler, platformVisibleChangeHandler, children, messages, popupContainer} = props;
    return (
        <Popover
            title=""
            content={(
                <div className="platform-change-wrapper">
                    <RadioGroup value={platform} onChange={(event) => {
                        const value = event.target.value;
                        platformChangeHandler(value);
                    }}>
                        <Radio className="platform-line" value="laptop">
                            <i className="xform-iconfont platform-icon">&#xe842;</i>
                            <span className="platform-name">{messages[getMessageId('xformChangePlatformPCName')]}</span>
                        </Radio>
                        <Radio className="platform-line" value="mobile">
                            <i className="xform-iconfont platform-icon">&#xe7b2;</i>
                            <span className="platform-name">{messages[getMessageId('xformChangePlatformMobileName')]}</span>
                        </Radio>
                        <Radio className="platform-line" value="both">
                            <i className="xform-iconfont platform-icon">&#xe683;</i>
                            <span className="platform-name">{messages[getMessageId('xformChangePlatformBothName')]}</span>
                        </Radio>
                    </RadioGroup>
                </div>
            )}
            visible={visible}
            onVisibleChange={platformVisibleChangeHandler}
            trigger="click"
            placement="bottomLeft"
            overlayClassName="app-xform-builder-platform-change-popover"
            getPopupContainer={popupContainer}
        >
            {children}
        </Popover>
    );
}

PositionCarouselDemo = () => {
  const [dotPosition, setDotPosition] = React.useState('top');

  const handlePositionChange = ({ target: { value } }) => {
    setDotPosition(value);
  };

  return (
    <>
      <Radio.Group onChange={handlePositionChange} value={dotPosition} style={{ marginBottom: 8 }}>
        <Radio.Button value="top">Top</Radio.Button>
        <Radio.Button value="bottom">Bottom</Radio.Button>
        <Radio.Button value="left">Left</Radio.Button>
        <Radio.Button value="right">Right</Radio.Button>
      </Radio.Group>
      <Carousel dotPosition={dotPosition}>
        <div>
          <h3 style={contentStyle}>1</h3>
        </div>
        <div>
          <h3 style={contentStyle}>2</h3>
        </div>
        <div>
          <h3 style={contentStyle}>3</h3>
        </div>
        <div>
          <h3 style={contentStyle}>4</h3>
        </div>
      </Carousel>
    </>
  );
}

function SelectMentorStep({ trackId, handleSetMentorId }) {
  const [trackMentors, setTrackMentors] = useState(null);
  const [loading, setLoading] = useState(false);
  const getTrackMentors = async () => {
    setLoading(true);
    try {
      const res = await codeClanApi.get(`/tracks/${trackId}/mentors`);

      setTrackMentors(res.data);
    } catch (err) {
      throw Error(err);
    }
    setLoading(false);
  };

  useEffect(() => {
    getTrackMentors();
    // eslint-disable-next-line
  }, []);
 
  return (
    <React.Fragment>
      <Radio.Group onChange={handleSetMentorId} defaultValue={null}>
        <div className="">
          <p>
            Select the mentor that you want as your guide throughout the
            program.{' '}
            <span className="text-danger">*This process is not reversible</span>
          </p>
          {trackMentors && !loading ? (
            <TrackMentors mentors={trackMentors} />
          ) : (
            <CustomLoader />
          )}
        </div>
      </Radio.Group>
    </React.Fragment>
  );
}

render() {
    const labelClass = this.props.labelClass ? this.props.labelClass : '';
    return (
      <label
        className={'wrapperLabel radioLabel ' + labelClass}
        htmlFor={this.props.id}
      >
        <Radio
          type="radio"
          id={this.props.id}
          className="radioInput"
          value={this.props.value}
          onChange={this.onSelected}
        />
        <span className="wrapperText">{this.props.label}</span>
      </label>
    );
  }

function TrackCard({ data, logo }) {
  const { title, description, image, id } = data;
  // const handleCardClick = () => {
  //   handleSetTrackId(id);
  //   // next();
  // };
  return (
    <TracksEnrollCardStyled>
      <Radio.Button value={id}>
        <div class="card">
          <img src={image || logo} class="card-img-top" alt="..." />
          <div class="card-body">
            {/* <Link to={`track/${title}/${id}`}> */}
            <h5 class="card-title">{title}</h5>
            {/* </Link> */}
            <p class="card-text">{description}</p>
          </div>
        </div>
      </Radio.Button>
    </TracksEnrollCardStyled>
  );
}

LogExpression = (props) => {
  const { onUpdate, config } = props;
  const [logEquation, setlogEquation] = useState(config.logEquation);
  const onChange = (e) => {
    setlogEquation(e.target.value);
    onUpdate({ logEquation: e.target.value });
  };

  return (
    <Form
      size='small'
      labelCol={{ span: 12 }}
      wrapperCol={{ span: 12 }}
    >
      <div>Transform Gene Expression</div>
      <Form.Item>
        <Radio.Group onChange={onChange} value={logEquation}>
          <Radio value='datum.expression*1'>Logged</Radio>
          <Radio value='exp(datum.expression)-1'>Actual</Radio>
        </Radio.Group>
      </Form.Item>
    </Form>
  );
}

render() {
    let hint;

    if (this.props.hint) {
      hint = <Hint>[{this.props.hint}]</Hint>;
    }

    return (
      <Radio
        value={this.props.value}
        onChange={this.props.onChange}
        checked={this.props.checked}
        defaultChecked={this.props.checked}
      >
        {this.props.children}
        {hint}
      </Radio>
    );
  }

render() {
    return (
      <div>
        <div className="row">
          <div className="col-lg-6">
            <h5 className="mb-3">
              <strong>Basic</strong>
            </h5>
            <div className="mb-5">
              <Radio.Group defaultValue={1}>
                <Radio value={1}>Apple</Radio>
                <Radio value={2}>Pear</Radio>
                <Radio value={3}>Banana</Radio>
                <Radio value={4}>Strawberry</Radio>
              </Radio.Group>
            </div>
          </div>
          <div className="col-lg-6">
            <h5 className="mb-3">
              <strong>Buttons</strong>
            </h5>
            <div className="mb-5">
              <Radio.Group defaultValue="a">
                <Radio.Button value="a">Hangzhou</Radio.Button>
                <Radio.Button value="b">Shanghai</Radio.Button>
                <Radio.Button value="c">Beijing</Radio.Button>
                <Radio.Button value="d">Chengdu</Radio.Button>
              </Radio.Group>
            </div>
          </div>
        </div>
      </div>
    )
  }

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

render() {
    const { active, size, buttonShape, avatarShape } = this.state;
    return (
      <>
        <Space>
          <Skeleton.Button active={active} size={size} shape={buttonShape} />
          <Skeleton.Button active={active} size={size} shape={buttonShape} />
          <Skeleton.Avatar active={active} size={size} shape={avatarShape} />
          <Skeleton.Input style={{ width: 200 }} active={active} size={size} />
        </Space>
        <br />
        <br />
        <Skeleton.Image />
        <Divider />
        <Form layout="inline" style={{ margin: '16px 0' }}>
          <Form.Item label="Active">
            <Switch checked={active} onChange={this.handleActiveChange} />
          </Form.Item>
          <Form.Item label="Size">
            <Radio.Group value={size} onChange={this.handleSizeChange}>
              <Radio.Button value="default">Default</Radio.Button>
              <Radio.Button value="large">Large</Radio.Button>
              <Radio.Button value="small">Small</Radio.Button>
            </Radio.Group>
          </Form.Item>
          <Form.Item label="Button Shape">
            <Radio.Group value={buttonShape} onChange={this.handleShapeChange('buttonShape')}>
              <Radio.Button value="default">Default</Radio.Button>
              <Radio.Button value="round">Round</Radio.Button>
              <Radio.Button value="circle">Circle</Radio.Button>
            </Radio.Group>
          </Form.Item>
          <Form.Item label="Avatar Shape">
            <Radio.Group value={avatarShape} onChange={this.handleShapeChange('avatarShape')}>
              <Radio.Button value="square">Square</Radio.Button>
              <Radio.Button value="circle">Circle</Radio.Button>
            </Radio.Group>
          </Form.Item>
        </Form>
      </>
    );
  }

function CreateGame({ bounty, setBounty, roomSize, setRoomSize, blockTimeout, setBlockTimeout }) {
  return (
    <div className='pixel_font'>
      <Row type='flex' justify='center' align='middle'>
        <p className='p_break'>Room Information</p>
      </Row>
      <Col>
        <Col className='mg_b'>
          <p>Total Players</p>
          <Radio.Group
            className='w_100per'
            value={roomSize}
            onChange={(e) => setRoomSize(e.target.value)}
          >
            <Row type='flex' justify='space-around'>
              <Radio.Button value='2'>2</Radio.Button>
              <Radio.Button value='3'>3</Radio.Button>
              <Radio.Button value='5'>5</Radio.Button>
            </Row>
          </Radio.Group>
        </Col>

        <Col className='mg_b'>
          <p>Time for each question</p>
          <Radio.Group
            className='w_100per'
            value={blockTimeout}
            onChange={(e) => setBlockTimeout(e.target.value)}
          >
            <Row type='flex' justify='space-around'>
              <Radio.Button value='6'>6</Radio.Button>
              <Radio.Button value='10'>10</Radio.Button>
              <Radio.Button value='12'>12</Radio.Button>
            </Row>
          </Radio.Group>
        </Col>

        <Col className='mg_b'>
          <p>Bet (TOMO)</p>
          <Radio.Group
            className='w_100per'
            value={bounty}
            onChange={(e) => setBounty(e.target.value)}
          >
            <Row type='flex' justify='space-around'>
              <Radio.Button value='3'>3</Radio.Button>
              <Radio.Button value='5'>5</Radio.Button>
              <Radio.Button value='10'>10</Radio.Button>
            </Row>
          </Radio.Group>
        </Col>
      </Col>
    </div>
  );
}

render() {
    const { RangePicker } = DatePicker;
    const { Option } = Select;
    const { isShowTime, isMonitor, isError } = this.props;

    let SelectTime = '';
    if (isShowTime) {
      SelectTime = (
        <Radio.Group defaultValue="1" buttonStyle="solid" onChange={this.changeTime} className="ui-mr20">
          {
                Object.keys(FILTER_TIME).map((value) => <Radio.Button value={value} key={value}>{FILTER_TIME[value]}</Radio.Button>)
            }
        </Radio.Group>
        );
    }

    let SelectField = '';
    if (isMonitor) {
        SelectField = (
          <Select defaultValue="选择性能字段" style={{ width: 160 }} onChange={this.changeField} className="ui-mr20">
            {
            Object.keys(PERFORMANCE).map((value) => <Option value={value} key={value}>{PERFORMANCE[value]}</Option>)
            }
          </Select>
        );
    }

    let SelectType = '';
    if (isError) {
        SelectType = (
          <Select defaultValue="选择错误类别" style={{ width: 160 }} onChange={this.changeType} className="ui-mr20">
            {
            Object.keys(ERROR_TYPE).map((value) => <Option value={value} key={value}>{ERROR_TYPE[value]}</Option>)
            }
          </Select>
        );
    }

    return (
      <>
        <div className="ui-mb20">
          <SelectProjects change={this.changeProject} />
          {SelectField}
          {SelectType}
        </div>
        <div className="ui-mb20">
          <RangePicker onChange={this.changeDate} className="ui-mr20" showTime={{ format: 'HH:mm' }} format="YYYY-MM-DD HH:mm" />
          {SelectTime}
          <Button onClick={this.onSubmit} type="primary">查询</Button>
        </div>
      </>
    );
  }

{ Group } = Radio

RadioButton = styled(Radio.Button)`
  width: 25%;
  text-align: center;
`

render() {
    return (
      <div className="App">
        <header className="App-header">
          <h1 className="App-title">Ant design theming examples</h1>
        </header>
        <p className="App-intro">
          Trying out what{" "}
          <a href="https://ant.design/docs/react/customize-theme">the docs</a>{" "}
          tell us.
        </p>
        <p>
          <Select
            defaultValue="lucy"
            size="large"
            onChange={value => console.log(value)}
          >
            <Option value="jack">Jack</Option>

            <Option value="lucy">Lucy</Option>
            <Option value="disabled" disabled>
              Disabled
            </Option>
            <Option value="Yiminghe">yiminghe</Option>
          </Select>
        </p>
        <p>
          <Radio.Group defaultValue="a" buttonStyle="solid">
            <Radio.Button value="a">Hangzhou</Radio.Button>
            <Radio.Button value="b" disabled>
              Shanghai
            </Radio.Button>
            <Radio.Button value="c">Beijing</Radio.Button>
            <Radio.Button value="d">Chengdu</Radio.Button>
          </Radio.Group>
        </p>
        <p>
          <Slider defaultValue={30} />
        </p>
      </div>
    );
  }

Globalization = memo(function Globalization(props) {
  const { t, i18n } = useTranslation();

  let listData = [];

  for (let i = 0; i < 3; i++) {
    listData.push({
      index: i,
      title: `Ant Simple Pro`,
      avatar: <SvgIcon iconClass='logon' fontSize='30px' />,
      description: t('description'),
      content: t('content')
    });
  }

  const IconText = ({ icon, text }) => (
    <Space>
      {React.createElement(icon)}
      {text}
    </Space>
  );

  const change = (val) => {
    const lang = val.target.value;
    i18n.changeLanguage(lang);
  }

  return (
    <div className='bgW padding-10px'>
      <div>
        <Radio.Group defaultValue="en" buttonStyle="solid" onChange={change}>
          <Radio.Button value="en">英文</Radio.Button>
          <Radio.Button value="zh">中文</Radio.Button>
          <Radio.Button value="ja">日文</Radio.Button>
        </Radio.Group>
        <a href="https://react.i18next.com/" style={{ padding: '0 10px' }} target='_blank'>了解过多react-i18next信息</a>
      </div>
      <List
        itemLayout="vertical"
        size="large"
        dataSource={listData}
        renderItem={item => (
          <List.Item
            key={item.index}
            actions={[
              <IconText icon={StarOutlined} text="156" key="list-vertical-star-o" />,
              <IconText icon={LikeOutlined} text="156" key="list-vertical-like-o" />,
              <IconText icon={MessageOutlined} text="2" key="list-vertical-message" />,
            ]}
            extra={
              <img
                width={272}
                alt="logo"
                src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
              />
            }
          >
            <List.Item.Meta
              avatar={item.avatar}
              title={<a href={item.href}>{item.title}</a>}
              description={item.description}
            />
            {item.content}
          </List.Item>
        )}
      />
    </div>
  )
})

RadioGroup = Radio.Group

ViolinControls = (props) => {
  const {
    config, onUpdate, setSearchedGene, cellSets,
  } = props;

  return (
    <Collapse>
      <Panel header='Gene selection' key='gene-selection'>
        <SingleGeneSelection
          config={config}
          setSearchedGene={setSearchedGene}
        />
      </Panel>
      <Panel header='Select data' key='select-data'>
        <SelectData
          config={config}
          onUpdate={onUpdate}
          cellSets={cellSets}
          axisName='x'
        />
      </Panel>
      <Panel header='Data transformation' key='data-transformation'>
        {config ? (
          <div>
            <Form.Item>
              <p>Transform Gene Expression</p>
              <Radio.Group
                onChange={(e) => onUpdate({ normalised: e.target.value })}
                value={config.normalised}
              >
                <Radio value='normalised'>Normalized</Radio>
                <Radio value='raw'>Raw values</Radio>
              </Radio.Group>
            </Form.Item>
            <Form.Item label='Bandwidth Adjustment'>
              <Slider
                value={config.kdeBandwidth}
                min={0}
                max={1}
                onChange={(val) => onUpdate({ kdeBandwidth: val })}
                step={0.05}
              />
            </Form.Item>
          </div>
        ) : <Skeleton.Input style={{ width: 200 }} active />}
      </Panel>
    </Collapse>
  );
}

HtxNewChoiceView = ({ item, store }) => {
  let style = {};

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

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

  const changeHandler = useCallback((ev) => {
    if (!item.annotation.editable) return;
    item.toggleSelected();
    ev.nativeEvent.target.blur();
  }, []);

  const [collapsed, setCollapsed] = useState(false);
  const toogleCollapsed = useCallback(() => setCollapsed(collapsed => !collapsed), []);

  return (
    <Block name="choice"
      mod={{ layout: item.parent.layout, leaf: item.isLeaf, notLeaf: !item.isLeaf, hidden: !item.visible }}>
      <Elem name="item" mod={{ notLeaf: !item.isLeaf }} style={style}>
        <Elem
          name="checkbox"
          component={nameWrapper(item.isCheckbox ? Checkbox : Radio, item._value)}
          mod={{ notLeaf: !item.isLeaf }}
          checked={item.sel}
          indeterminate={!item.sel && item.indeterminate}
          disabled={item.parent?.readonly || item.annotation?.readonly}
          onChange={changeHandler}
        >
          {item.html ? <span dangerouslySetInnerHTML={{ __html: item.html }}/> :  item._value }
          {showHotkey && (<Hint>[{item.hotkey}]</Hint>)}
        </Elem>
        {!item.isLeaf ? (
          <Elem name="toggle" mod={{ collapsed }} component={Button} type="text" onClick={toogleCollapsed}>
            <LsChevron />
          </Elem>
        ) : false}
      </Elem>
      {
        item.nestedResults && item.children?.length
          ? <Elem name="children" mod={{ collapsed }}>{Tree.renderChildren(item)}</Elem>
          : null
      }
    </Block>
  );
}

RadioGroup = Radio.Group

render() {
        const {
            pageFrameLayout,
            pageHeadFixed,
            pageHeadShow,
            keepOtherMenuOpen,
            tabsShow,
            keepAlive,
        } = this.props;

        const radioStyle = {
            display: 'block',
            height: '30px',
            lineHeight: '30px',
        };


        return (
            <PageContent style={{display: 'flex', paddingTop: 50, justifyContent: 'center'}}>
                <div style={{width: 500}}>
                    <Card title="设置" style={{marginBottom: 16}}>
                        <div style={{display: 'none'}}> {/*暂时先隐藏*/}
                            <Checkbox
                                onChange={this.handlePageHeadShowChange}
                                checked={pageHeadShow}
                            >显示头部</Checkbox>

                            {pageHeadShow ? (
                                <Checkbox
                                    onChange={this.handlePageHeadFixedChange}
                                    checked={pageHeadFixed}
                                >头部固定</Checkbox>
                            ) : null}
                        </div>

                        <div style={{marginTop: 8}}>
                            <Checkbox
                                onChange={this.handleKeepPageChange}
                                checked={keepAlive}
                            >
                                页面保持
                                <span style={{color: 'red'}}>(Beta)</span>
                            </Checkbox>
                        </div>

                        <div style={{marginTop: 8}}>
                            <Checkbox
                                onChange={this.handleTabShowChange}
                                checked={tabsShow}
                            >
                                显示Tab页
                            </Checkbox>
                        </div>
                    </Card>
                    <Card title="菜单设置">
                        <div style={{borderBottom: '1px solid #d9d9d9', paddingBottom: 8, marginBottom: 8}}>
                            <Checkbox
                                onChange={this.handleKeepOtherMenuOpenChange}
                                checked={keepOtherMenuOpen}
                            >保持菜单展开</Checkbox>
                        </div>
                        <div>
                            <Radio.Group onChange={this.handlePageFrameLayoutChange} value={pageFrameLayout}>
                                <Radio style={radioStyle} value="top-side-menu">头部左侧菜单</Radio>
                                <Radio style={radioStyle} value="top-menu">头部菜单</Radio>
                                <Radio style={radioStyle} value="side-menu">左侧菜单</Radio>
                            </Radio.Group>
                        </div>
                    </Card>
                </div>
            </PageContent>
        );
    }

RadioGroup = Radio.Group

RadioButton = Radio.Button

function EducationSection() {
  return (
    <div>
      <Form.Item
        name={"isGraduated"}
        label="Are you graduated?"
        style={{ display: "block" }}
        rules={[
          {
            required: true,
            message: "Please choose whether you are graduated or not",
          },
        ]}
      >
        <Radio.Group>
          <Radio className="d-block" value={true}>
            Yes
          </Radio>
          <Radio className="d-block" value={false}>
            No
          </Radio>
        </Radio.Group>
      </Form.Item>
      <Form.Item
        name={"university"}
        label="University"
        style={{ display: "block" }}
        rules={[
          {
            required: true,
            message: "Please enter your university name",
          },
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        name={"faculty"}
        label="Faculty"
        style={{ display: "block" }}
        rules={[
          {
            required: true,
            message: "Please enter your faculty name",
          },
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        name={"department"}
        label="Department"
        style={{ display: "block" }}
      >
        <Input />
      </Form.Item>
      <Form.Item
        name={"graduationYear"}
        label="Year of graduation"
        style={{ display: "block" }}
        rules={[
          {
            required: true,
            message: "Please enter your graduation year",
          },
        ]}
      >
        <Input />
      </Form.Item>
    </div>
  );
}

TrackMentors = ({ mentors }) => {
  const [currentPage, setCurrentPage] = useState(1);
  // eslint-disable-next-line
  const [cardPerPage, setCardperPage] = useState(3);

  const indexOfLastCard = currentPage * cardPerPage;
  const indexOfFirstCard = indexOfLastCard - cardPerPage;

  const paginate = pageNumber => setCurrentPage(pageNumber);
  const currentCards = mentors
    ? shuffleArray(mentors.items).slice(indexOfFirstCard, indexOfLastCard)
    : null;

  return (
    <React.Fragment>
      <SingleMentorCardStyled>
        {currentCards.map(item => (
          <div className="radio-options">
            <Radio.Button value={item.id}>
              <SingleMentorCard mentor={item} key={item} />
            </Radio.Button>
          </div>
        ))}
      </SingleMentorCardStyled>
      <div
        style={{
          display: 'flex',
          justifyContent: 'flex-end',
          marginTop: '1rem',
        }}
      >
        <Pagination
          // postPerPage={postPerPage}
          total={mentors.items.length}
          defaultCurrent={currentPage}
          // paginate={paginate}
          onChange={paginate}
          pageSize={cardPerPage}
          showSizeChanger={false}
        />
      </div>
    </React.Fragment>
  );
}