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

/**
 * @en
 * Base
 *
 * A base radio component.
 *
 * @cn
 * 基础
 *
 * 基础的单选框组件。
 */

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

  render() {
    return (
      <div>
        <Radio
          label={<span style={{color: 'red'}}>I am{this.state.isChecked ? '' : ' not'} checked</span>}
          checked={this.state.isChecked}
          onChange={(event, isChecked) => this.setState({isChecked})}
        />
      </div>
    );
  }
}

基础的单选框组件。

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

/**
 * @en
 * Disabled Example
 *
 * Use prop `disabled` to disable the radio.
 *
 * @cn
 * 禁用示例
 *
 * 使用属性`disabled`来禁用单选框。
 */
export default class ExampleDisabled extends Component {
  state = {
    disabled: true
  }

  render() {
    return (
      <ExampleBlock
        en={
          <div>
            {'am I disabled ?'}
            <Switch
              auto
              checked={this.state.disabled}
              onChange={isChecked => this.setState({disabled: isChecked})}
            />
          </div>
        }
        cn={
          <div>
            {'点我禁用>_<'}
            <Switch
              auto
              checked={this.state.disabled}
              onChange={isChecked => this.setState({disabled: isChecked})}
            />
          </div>
        }
      >

        <Radio
          label={`I am${this.state.disabled ? '' : ' not'} disabled`}
          disabled={this.state.disabled}
          auto
        />
      </ExampleBlock>
    );
  }
}

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

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

/**
 * @en
 * Group
 *
 * Use `RadioGroup` to control multiple Radios.
 *
 * @cn
 * 单选框组
 *
 * 使用`RadioGroup`来管理多个单选框组件，仅需在`RadioGroup`上使用`value`及`onChange`属性。
 */
export default class ExampleGroup extends Component {
  state = {
    val: '1'
  }

  render() {
    return (
      <ExampleBlock
        en={
          <p>The current value is <b className="sign">{this.state.val}</b></p>
        }
        cn={
          <p>现在的值为 <b className="sign">{this.state.val}</b></p>
        }

      >
        <RadioGroup value={this.state.val} onChange={val => this.setState({val})}>
          <Radio label="Spring" value="1" />
          <Radio label="Summer" value="2" />
          <Radio label="Autumn" value="3" />
          <Radio label="Winter" value="4" />
        </RadioGroup>

      </ExampleBlock>
    );
  }
}

使用RadioGroup来管理多个单选框组件，仅需在RadioGroup上使用value及onChange属性。

import React, {Component} from 'react';
import {Radio, RadioGroup, Icon} from 'hana-ui';

/**
 * @en
 * Custom Icons
 *
 * The icon can be custom icon by using prop `checkedIcon` and `unCheckedIcon`
 *
 * The RadioGroup can also use prop `checkedIcon` and `unCheckedIcon`
 *
 * @cn
 * 自定义图标
 *
 * 可以使用属性`checkedIcon`和`unCheckedIcon`来自定义选中/未选中的图标，同样作用于图片组。
 */
export default class ExampleBase extends Component {
  state = {
    val: '1'
  }

  render() {
    return (
      <div>
        <Radio
          label="Custom Radio"
          auto
          checkedIcon={<Icon type="snowflake-o" color="#6cd4a4" />}
          unCheckedIcon={<Icon type="snowflake-o" color="#6cd4a4" />}
          style={{marginBottom: 20}}
        />
        <RadioGroup
          value={this.state.val}
          onChange={val => this.setState({val})}
          checkedIcon={<Icon type="snowflake-o" color="#6cd4a4" />}
          unCheckedIcon={<Icon type="snowflake-o" color="#ccc" />}
        >
          <Radio label="Spring" value="1" />
          <Radio label="Summer" value="2" />
          <Radio label="Autumn" value="3" />
          <Radio label="Winter" value="4" />
        </RadioGroup>
      </div>
    );
  }
}

可以使用属性checkedIcon和unCheckedIcon来自定义选中/未选中的图标，同样作用于图片组。