sourcecode/front/project/www/components/Radio/index.js

import React, { Component } from 'react';
import './index.less';
import { Icon } from 'antd';

export class SpecialRadio extends Component {
  render() {
    const { checked, children, onClick, theme = '', width, space } = this.props;
    return (
      <div
        className={`g-special-radio-wrapper ${theme} ${checked ? 'checked' : ''}`}
        style={{ width: width || '', marginLeft: space || '', marginRight: space || '' }}
      >
        <div className="g-special-radio" onClick={() => onClick && onClick()}>
          {children}
          <Icon type="check" />
        </div>
      </div>
    );
  }
}

export class SpecialRadioGroup extends Component {
  onClickItem(value) {
    const { onChange } = this.props;
    if (onChange) onChange(value);
  }

  render() {
    const { list = [], value, values = [], theme, space, width } = this.props;
    return (
      <div className="g-special-radio-group" style={{ marginLeft: space * -1 || '', marginRight: space * -1 || '' }}>
        {list.map(item => {
          return (
            <SpecialRadio
              theme={theme}
              checked={value === item.value || values.indexOf(item.value) >= 0}
              onClick={() => this.onClickItem(item.value)}
              width={width}
              space={space}
            >
              {item.label}
            </SpecialRadio>
          );
        })}
      </div>
    );
  }
}

export default class Radio extends Component {
  render() {
    const { checked, children, onClick } = this.props;
    return (
      <div className={`g-radio-wrapper ${checked ? 'checked' : ''}`}>
        <div className="g-radio" onClick={() => onClick && onClick()}>
          {children}
        </div>
      </div>
    );
  }
}

export class RadioGroup extends Component {
  onClickItem(key) {
    const { onChange } = this.props;
    if (onChange) onChange(key);
  }

  render() {
    const { list = [], value } = this.props;
    return (
      <div className="g-radio-group">
        {list.map(item => {
          return (
            <Radio checked={value === item.key} onClick={() => this.onClickItem(item.key)}>
              {item.label}
            </Radio>
          );
        })}
      </div>
    );
  }
}