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

/**
 * @en
 * Base
 *
 * Switch module controlled by prop `checked`
 *
 * @cn
 * 基础
 *
 * 使用属性`checked`控制开关状态。
 */
export default class ExampleBase extends Component {
  state = {
    isChecked: true
  }

  render() {
    return (
      <Switch
        checked={this.state.isChecked}
        onChange={isChecked => this.setState({isChecked})}
      />
    );
  }
}

使用属性checked控制开关状态。

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

/**
 * @en
 * auto
 *
 * Switch module controlled by itself, using prop `auto`
 *
 * @cn
 * 自控模式
 *
 * 开关可以添加属性`auto`来自行控制状态。
 */

export default class ExampleAuto extends Component {
  state = {
    checked: true
  }
  render() {
    return (
      <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>}
      >
        <Switch
          auto
          defaultChecked={this.state.checked}
          onChange={checked => this.setState({checked})}
        />
      </ExampleBlock>
    );
  }
}

开关可以添加属性auto来自行控制状态。

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

/**
 * @en
 * Disabled
 *
 * Use prop `disabled` to disable the `Switch`.
 *
 * @cn
 * 禁用
 *
 * 使用属性`disabled`来禁用开关。
 */
export default class ExampleBase extends Component {
  state = {
    disabled: true
  }

  render() {
    return (
      <ExampleBlock
        en={<Checkbox
          label={`I am${this.state.disabled ? '' : ' not'} disabled`}
          checked={this.state.disabled}
          onChange={(event, isChecked) => this.setState({disabled: isChecked})}
        />}
        cn={<Checkbox
          label={`我现在${this.state.disabled ? '' : '没有'}被禁用`}
          checked={this.state.disabled}
          onChange={(event, isChecked) => this.setState({disabled: isChecked})}
        />}
      >
        <Switch
          auto
          disabled={this.state.disabled}
        />
      </ExampleBlock>
    );
  }
}

使用属性disabled来禁用开关。