@beisen-phoenix/radio/src/index.tsx

import React, {Component} from 'react';
import Tooltip from '@beisen-phoenix/tooltip';
import utils from '@beisen-phoenix/common-utils';
import './style.scss';
const classes = utils.BEMClass('radio');

function isPxStyle (value: string){
  return /^([\d]+)px$/.test(value)
}


export interface RadioData {
  label?: string | number | React.ReactNode;
  value: string | number;
  checked: boolean | undefined;
}

export type LayoutType = 'vertical' | 'horizontal';

interface styledRadioProps {
  label?: string | number | React.ReactNode;
  value: string | number;
  checked?: boolean;
  children?: React.ReactText,
  defaultChecked?: boolean,
  disabled?: boolean,
  onChange?: (data: RadioData,event: any) => void,
  extralCls?: string,
  minWidth?: string,
  maxWidth?: string,
	disableAnimation?: boolean ,
  extraCls?:string,
  fontSize?: 'normal' | 'middle'
  textColor?: 'M1' | 'M2' | 'M3' | 'M4' | 'M5'
}
interface radioState {
	checked?:boolean;
	radioClicked:boolean
}
class Radio extends React.Component<styledRadioProps,radioState>{
	constructor(props){
		super(props);
		this.state={
			checked:!!this.props.defaultChecked,
			radioClicked:false,
		}
  }
  private txtRef: React.RefObject<HTMLSpanElement> = React.createRef();

	radioOnclick = (e) => {
    const isDisabled = this.isDisabled();
    const isRadioControled = this.isRadioControled();
    const isChecked = this.isChecked();

    if (isDisabled || isChecked) return;

    this.setState({"radioClicked": true});

    if (!isRadioControled) {
      // 非受控情况下先更新状态，然后同步syncClick
      this.setState({checked: true}, () => {
        this.syncClick(e);
      })
    } else {
      // 受控情况下，直接syncClick，checked状态为true
      this.syncClick(e)
    }
  }

	isRadioControled = () => {
    return (this.props.checked !== undefined);
  }
  getValue = ():RadioData => {
    return {
      label: this.props.label || this.props.children,
      value: this.props.value,
      checked: this.isChecked()
    };
  }
  syncClick = (e) => {
    const isRadioControled = this.isRadioControled();
    const curRadioData = this.getValue();

    if (isRadioControled) {
      curRadioData.checked = true
    }
    this.props.onChange &&  this.props.onChange(curRadioData,e)
  }

  isChecked = () => {
    let checked = this.props.checked;
    return checked === undefined ? this.state.checked : checked;
  }

  isDisabled = () => {
    let disabled = this.props.disabled;
    return disabled === undefined ? false : disabled;
  }

  getMinWidth = () => {
    // 先检查是否是有值
    // 然后检查是否是以px为单位
    // 检查值得数值部分是否大于42（设计规定raido文字加图标最小宽度为42px）
    const {minWidth} = this.props;

    if (minWidth === undefined) return '42px';
    if (!isPxStyle(minWidth)) return '42px';

    const minWidthInNumber = parseInt(minWidth);
    return (minWidthInNumber >= 42) ? `${minWidthInNumber}px` : '42px';
  }

  getMaxWidth = () => {
    const {maxWidth} = this.props;

    if (maxWidth === undefined) return '';
    return (isPxStyle(maxWidth)) ? maxWidth : '100%'
  }
	render(){
		const {label=this.props.children,extraCls='',fontSize,textColor} = this.props;
		const hasLabel = !!(label);
		const containerCls = classes({element:"",modifier:{
			disabled:this.isDisabled(),
      checked :this.isChecked(),
      withLabel: label
		},extra:extraCls+' animation'});
    const flexWrapperCls = classes({element:"wrapper",modifier:{
		}});
		const circleWrapperCls = classes({element:"circle-wrapper",modifier:{
			disabled:this.isDisabled(),
			checked:this.isChecked(),
			disabledWithChecked:this.isDisabled() && this.isChecked()}})
		const circleCls = classes({element:"circle",modifier:{
			// disabled:this.isDisabled() && !this.isChecked(),
			disabled:this.isDisabled(),
			checked:this.isChecked(),
			disabledWithChecked:this.isDisabled() && this.isChecked()},extral:'center'});
		const dotCls = classes({element:"dot",modifier:{
			disabled:this.isDisabled(),
			checked:this.isChecked(),
			checkedWithRadioClicked:this.isChecked() && this.state.radioClicked}});
		const textCls = classes({element:"radio-text",modifier:{
			disabled:this.isDisabled(),
      appear:hasLabel,fontMiddle: fontSize === 'middle'},extra: `color-${textColor}`});

    const widthStyle = label ? {maxWidth:this.getMaxWidth(),minWidth:this.getMinWidth()} : {};
    const tipCls = classes({element:'tooltip',extra:this.props.extraCls});

		return(
				<label
					className={containerCls}
          onClick={this.radioOnclick}
          style={widthStyle}
				>
					<div className={flexWrapperCls}>
          <div className={circleWrapperCls}>
							<div className={circleCls}></div>
							<div className={dotCls}></div>
						</div>
            <Tooltip extraCls={tipCls} title={label} showOverflowTooltip={true} >
              <span className={textCls} ref={this.txtRef}>{label}</span>
            </Tooltip>
          </div>
          	
				</label>
		)
	}
}

export default Radio;