import React from 'react'
import { NavBar, Form, Input, Select, Button, Icon, CollectionView } from '../../../index'

const CustomForm = () =>
  <div>
    <NavBar title="Form">
      <NavBar.Item to="/home">
        <Icon type="chevron-left" />MeetUI
      </NavBar.Item>
    </NavBar>

    <Form>
      <Form.Item>
        <Input type="text" placeholder="text input" />
      </Form.Item>
      <Form.Item>
        <Input type="password" placeholder="password input" />
      </Form.Item>
      <Form.Item>
        <CollectionView>
          <CollectionView.Cell flexBasis="10%">
            <Input type="radio" />
          </CollectionView.Cell>
          <CollectionView.Cell flexBasis="10%">
            <Input type="radio" />
          </CollectionView.Cell>
        </CollectionView>
      </Form.Item>
      <Form.Item>
        <CollectionView>
          <CollectionView.Cell flexBasis="10%">
            <Input type="checkbox" />
          </CollectionView.Cell>
          <CollectionView.Cell flexBasis="10%">
            <Input type="checkbox" />
          </CollectionView.Cell>
        </CollectionView>
      </Form.Item>
      <Form.Item>
        <Select>
          <Select.Option>0</Select.Option>
          <Select.Option>1</Select.Option>
          <Select.Option>2</Select.Option>
          <Select.Option>3</Select.Option>
          <Select.Option>4</Select.Option>
        </Select>
      </Form.Item>
      <Form.Item>
        <Button presetStyle="primary" type="submit">提交</Button>
      </Form.Item>
    </Form>
  </div>

export default CustomForm