# PickerView

import { autobind } from 'core-decorators'
import PickerView from '../index'
import Button from '../../button'
const { Picker } = PickerView
@autobind
class DatePickerDemo extends React.Component<any, any> {
  state = {
    value: ['1', '11'],
    visible: false
  }

  onChange = value => {
    console.log('onChange', value)
    this.setState({
      value
    })
  }

  onScrollChange = value => {
    console.log('onScrollChange', value)
  }
  toggle = () => {
    const { visible } = this.state
    this.setState({ visible: !visible })
  }
  render() {
    const { visible } = this.state
    return (
      <div>
        <Button onClick={this.toggle}>toggle</Button>
        <PickerView
          visible={visible}
          header={<Button onClick={this.toggle}>close</Button>}
          onChange={this.onChange}
          onScrollChange={this.onScrollChange}
          value={this.state.value}
        >
          <Picker indicatorClassName="my-picker-indicator">
            <Picker.Item className="my-picker-view-item" value="1">
              one
            </Picker.Item>
            <Picker.Item className="my-picker-view-item" value="2">
              two
            </Picker.Item>
            <Picker.Item className="my-picker-view-item" value="3">
              three
            </Picker.Item>
            <Picker.Item className="my-picker-view-item" value="4">
              four
            </Picker.Item>
            <Picker.Item className="my-picker-view-item" value="5">
              five
            </Picker.Item>
            <Picker.Item className="my-picker-view-item" value="6">
              six
            </Picker.Item>
            <Picker.Item className="my-picker-view-item" value="7">
              seven
            </Picker.Item>
            <Picker.Item className="my-picker-view-item" value="8">
              eight
            </Picker.Item>
          </Picker>
          <Picker indicatorClassName="my-picker-indicator">
            <Picker.Item className="my-picker-view-item" value="11">
              eleven
            </Picker.Item>
            <Picker.Item className="my-picker-view-item" value="12">
              twelve
            </Picker.Item>
            <Picker.Item className="my-picker-view-item" value="13">
              thirteen
            </Picker.Item>
            <Picker.Item className="my-picker-view-item" value="14">
              fourteen
            </Picker.Item>
            <Picker.Item className="my-picker-view-item" value="15">
              fifteen
            </Picker.Item>
            <Picker.Item className="my-picker-view-item" value="16">
              sixteen
            </Picker.Item>
            <Picker.Item className="my-picker-view-item" value="17">
              seventeen
            </Picker.Item>
            <Picker.Item className="my-picker-view-item" value="18">
              eighteen
            </Picker.Item>
          </Picker>
        </PickerView>
      </div>
    )
  }
}