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

/**
 * @en
 * Base
 *
 * Base example of the checkbox component. Using `checked` to control the statement.
 * When the state changed, it will trigger `onChange` event.
 *
 * @cn
 * 基础
 *
 * 基本的选择框，使用`checked`属性控制是否被选中；当选中状态改变时，会触发`onChange`事件。
 */

export default class ExampleBase extends Component {
  state = {
    isChecked: true
  }

  render() {
    return (
      <div>
        <Checkbox
          label={<p style={{color: '#6cd4a4', display: 'inline-block'}}>I am{this.state.isChecked ? '' : ' not'} checked</p>}
          checked={this.state.isChecked}
          onChange={(event, isChecked) => this.setState({isChecked})}
        />
      </div>
    );
  }
}

基本的选择框，使用checked属性控制是否被选中；当选中状态改变时，会触发onChange事件。

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

/**
 * @en
 * Auto
 *
 * Using prop `auto` to let it controlled by itself.
 *
 * @cn
 * 自控模式
 *
 * 使用`auto`属性使其自行控制选中状态。
 */
export default class ExampleAuto extends Component {
  state = {
    checked: true
  }

  render() {
    return (
      <div>
        <ExampleBlock
          en={
            <p>
              You changed the state, now it is
              <b className="sign"> {`${this.state.checked}`}</b>
              .
            </p>
          }

          cn={
            <p>
              你改变了状态，现在是
              <b className="sign"> {`${this.state.checked}`}</b>
              。
            </p>
          }
        >
          <Checkbox
            auto
            defaultChecked={this.state.checked}
            label="click to change state"
            onChange={(event, checked) => this.setState({checked})}
          />
        </ExampleBlock>
      </div>
    );
  }
}

使用auto属性使其自行控制选中状态。

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

/**
 * @en
 * Disabled
 *
 * Checkbox can be disabled by prop `disabled`.
 *
 * @cn
 * 禁用状态
 *
 * 使用`disabled`属性来禁用复选框。
 */
export default class ExampleDisabled extends Component {
  state = {
    disabled: true
  }

  render() {
    return (
      <div>
        <ExampleBlock
          en={
            <div>
              <span style={{marginRight: 10}}>{'am I disabled 0v0?'}</span>
              <Switch
                auto
                checked={this.state.disabled}
                onChange={isChecked => this.setState({disabled: isChecked})}
              />
            </div>
          }

          cn={
            <div>
              <span style={{marginRight: 10}}>{'点我改变禁用状态>._.>'}</span>
              <Switch
                auto
                checked={this.state.disabled}
                onChange={isChecked => this.setState({disabled: isChecked})}
              />
            </div>
          }
        >
          <Checkbox
            label={`I am${this.state.disabled ? '' : ' not'} disabled`}
            disabled={this.state.disabled}
            auto
          />
        </ExampleBlock>
      </div>
    );
  }
}

使用disabled属性来禁用复选框。

import React, {Component} from 'react';
import {Checkbox, CheckboxGroup} from 'hana-ui';

/**
 * @en
 * Checkbox Group
 *
 * Using `CheckboxGroup` to control multiple Checkboxes.
 *
 * @cn
 * 复选框组
 *
 * 使用`CheckboxGroup`来控制多个复选框
 */
export default class ExampleGroup extends Component {
  state = {
    val: ['1', '3']
  }

  render() {
    return (
      <div>
        <CheckboxGroup value={this.state.val} onChange={val => this.setState({val})}>
          <Checkbox label="Spring" value="1" key='1000' />
          <Checkbox label="Summer" value="2" />
          <Checkbox label="Autumn" value="3" />
          <Checkbox label="Winter" value="4" />
        </CheckboxGroup>
      </div>
    );
  }
}

使用CheckboxGroup来控制多个复选框

import React, {Component} from 'react';
import {Checkbox, CheckboxGroup, Icon} from 'hana-ui';

/**
 * @en
 * Custom Icons
 *
 * Using prop `checkedIcon` and `unCheckedIcon` to have custom icons.
 *
 * The CheckboxGroup can also use prop `checkedIcon` and `unCheckedIcon`.
 *
 * @cn
 * 自定义图标
 *
 * 可以使用`checkedIcon`和`unCheckedIcon`来设置勾选/未勾选的复选框样式。
 */
export default class ExampleBase extends Component {
  state = {
    val: ['1', '3']
  }

  render() {
    return (
      <div>
        <Checkbox
          auto
          label="Custom icon"
          checkedIcon={<Icon type="snowflake-o" color="#6cd4a4" />}
          unCheckedIcon={<Icon type="snowflake-o" color="#ccc" />}
        />

        <CheckboxGroup
          value={this.state.val}
          onChange={val => this.setState({val})}
          checkedIcon={<Icon type="snowflake-o" color="#6cd4a4" />}
          unCheckedIcon={<Icon type="snowflake-o" color="#ccc" />}
        >
          <Checkbox label="Spring" value="1" />
          <Checkbox label="Summer" value="2" />
          <Checkbox label="Autumn" value="3" />
          <Checkbox label="Winter" value="4" />
        </CheckboxGroup>
      </div>
    );
  }
}

可以使用checkedIcon和unCheckedIcon来设置勾选/未勾选的复选框样式。