import React, {Component} from 'react';
import {Select, Option} from 'hana-ui';
import ExampleBlock from 'demo/ExampleBlock';

/**
 * @en
 * Base
 * Base select module
 *
 * @cn
 * 基础
 * 通用的选择组件
 */
export default class ExampleBase extends Component {
  state = {
    value: '1',
    label: '',
    index: ''
  }

  render() {
    const {value} = this.state;
    return (
      <div>
        <ExampleBlock
          en={'Base Select controlled by prop value:'}
          cn={'使用value属性控制选中的值:'}
        >
          <Select style={{width: 250}} value={value} onChange={v => this.setState({value: v})}>
            <Option label="Yui" value="1" disabled />
            <Option label="Azusa" value="2" />
            <Option label="Mio" value="3" />
          </Select>
        </ExampleBlock>

        <ExampleBlock
          en={'You may use the auto mode:'}
          cn={'使用属性auto开启自控模式:'}
        >
          <Select
            style={{width: 150}}
            defaultLabel="Please select"
            auto
            size="small"
          >
            <Option label="Moe!" value="1" />
            <Option label="Moe>_<Moe" value="2" />
            <Option label="Moe ~~ Moe ~~ Chu" value="3" />
          </Select>
        </ExampleBlock>

        <ExampleBlock
          en={(
            <p>You select option (<b className="sign">{this.state.label}</b>) and
              index (<b className="sign">{this.state.index}</b>)
            </p>
          )}
          cn={(
            <p>你选择了选项(<b className="sign">{this.state.label}</b>)，
              序号为(<b className="sign">{this.state.index}</b>)
            </p>
          )}
        >
          <Select
            style={{width: 150}}
            defaultLabel="Please select"
            auto
            onSelect={(val, index, label) => this.setState({label, index})}
          >
            <Option label="Moe" value="1" />
            <Option label="Moe Moe" value="2" />
            <Option label="Moe Moe Chu" value="3" />
          </Select>
        </ExampleBlock>

        <ExampleBlock
          en={'Use prop disabled to disable the Select:'}
          cn={'添加disabled属性来禁用选择:'}
        >
          <Select
            style={{width: 250}}
            defaultLabel="Please select"
            auto
            disabled
          >
            <Option label="Moe" value="1" />
            <Option label="Moe Moe" value="2" />
            <Option label="Moe Moe Chu" value="3" />
          </Select>
        </ExampleBlock>

        <ExampleBlock
          en={'Build options by map:'}
          cn={'使用map来构建Option:'}
        >
          <Select
            style={{width: 250}}
            defaultLabel="Please select"
            auto
          >
            <Option label="Moe" value="1" />
            {['Moe Moe', 'Moe Moe Chu'].map(i => <Option label={i} key={i} value={i} />)}
          </Select>
        </ExampleBlock>


      </div>
    );
  }
}

通用的选择组件

import React, {Component} from 'react';
import {Select, Option} from 'hana-ui';

/**
 * @en
 * Multiple
 * Select can be multiple by using prop `multiple`.
 *
 * @cn
 * 多选
 * 使用属性`multiple`获得一个多选选择器。
 *
 */
export default class ExampleBase extends Component {
  state = {
    value: ['1', '2', '3', '4']
  }

  render() {
    return (
      <div>
        <p style={{padding: '20px 0 5px'}}>middle:</p>
        <Select
          style={{width: 450, display: 'block'}}
          value={this.state.value}
          orientation='up'
          onChange={v => this.setState({value: v})}
          multiple
        >
          <Option label="Haru is yasashii.." value="1" />
          <Option label="Natsu is atsui" value="2" />
          <Option label="Aki is suzui" value="3" />
          <Option label="Fuyu is yuki no seikai" value="4" />
        </Select>

        <p style={{padding: '20px 0 5px'}}>small:</p>
        <Select
          style={{width: 450, display: 'block'}}
          value={this.state.value}
          onChange={v => this.setState({value: v})}
          multiple
          size='small'
        >
          <Option label="Haru is yasashii.." value="1" />
          <Option label="Natsu is atsui" value="2" />
          <Option label="Aki is suzui" value="3" />
          <Option label="Fuyu is yuki no seikai" value="4" />
        </Select>

        <p style={{padding: '20px 0 5px'}}>large:</p>
        <Select
          style={{width: 450, display: 'block'}}
          value={this.state.value}
          onChange={v => this.setState({value: v})}
          multiple
          size='large'
        >
          <Option label="Haru is yasashii.." value="1" />
          <Option label="Natsu is atsui" value="2" />
          <Option label="Aki is suzui" value="3" />
          <Option label="Fuyu is yuki no seikai" value="4" />
        </Select>
      </div>
    );
  }
}

使用属性multiple获得一个多选选择器。

import React, {Component} from 'react';
import {Select, Option} from 'hana-ui';

/**
 * @en
 * Max-height
 * options can set max-height by using prop `maxHeight`.
 *
 * @cn
 * 最大高度
 * 选项列表可以使用属性`maxHeight`设置最大高度。
 */
export default class ExampleMaxHeight extends Component {
  render() {
    return (
      <div>
        <Select
          style={{width: 250}}
          defaultLabel="Please select"
          orientation="up"
          auto
          maxHeight={200}
        >
          <Option label="Once" value="1" />
          <Option label="upon" value="2" />
          <Option label="a" value="3" />
          <Option label="time" value="4" />
          <Option label="there" value="5" />
          <Option label="is" value="6" />
          <Option label="a" value="7" />
          <Option label="white" value="8" />
          <Option label="rabbit" value="9" />
        </Select>
      </div>
    );
  }
}

选项列表可以使用属性maxHeight设置最大高度。

import React, {Component} from 'react';
import {Select, Option} from 'hana-ui';

const optionList = [
  {label: 'Haru', value: '1'},
  {label: 'Natsu', value: '2'},
  {label: 'Aki', value: '3'},
  {label: 'Fuyu', value: '4'}
];

/**
 * @en
 * Custom
 *
 * Use `selectionStyle` and `optionStyle` to control styles.
 *
 * Use `arrowIcon` to control the arrow icon.
 *
 * @cn
 * 自定义
 *
 * 使用`selectionStyle`和`optionStyle`来更改样式。
 *
 * 使用`arrowIcon`来设置自定义的图标。
 */

export default class ExampleBase extends Component {
  state = {
    value: '1'
  }

  render() {
    const options = optionList.map(i => <Option {...i} key={i.value} />);
    return (
      <div>
        <Select
          style={{width: 450}}
          value={this.state.value}
          onChange={v => this.setState({value: v})}
          selectionStyle={{borderColor: '#fff'}}
          optionWrapStyle={{borderColor: '#fff'}}
          arrowIcon={null}
        >
          {options}
        </Select>
      </div>
    );
  }
}

使用selectionStyle和optionStyle来更改样式。

使用arrowIcon来设置自定义的图标。