mp-colorui/dist/h5/components/radio/index.js

MP ColorUI 是一款基于 Taro 框架并且联合 Color-UI CSS 库开发的多端 UI 组件库（支持小程序端和H5端）

import Nerv from "nervjs";
import { Radio, RadioGroup, Text, View } from "@tarojs/components";
import Taro from "@tarojs/taro-h5";
import H5Radio from "./h5";
import ListRadio from "./components/ListRadio";
import { classNames, isWeApp } from "../../lib/index";
export default class ClRadio extends Taro.Component {
  render() {
    const props = this.props;

    const type = props.type || "normal";
    const shapeClassName = () => props.shape || "normal";
    const title = props.title || "";
    const colorClassName = () => props.color || "green";
    const directionClassName = props.direction === "horizontal" ? "flex" : "";
    const list = props.radioGroup || [];
    const [checkedValue, setCheckedValue] = Taro.useState(props.checkedValue);
    Taro.useEffect(() => {
      setCheckedValue(checkedValue);
    }, [props.checkedValue]);
    const changeRadio = e => {
      props.onChange && props.onChange(e.detail.value);
    };
    const radioComponent = list.map(item => <View className="padding-xs" key={"radio-" + item.value} onClick={() => {
      !props.disabled && setCheckedValue(item.value);
    }}>
      <Text className="padding-right-sm">{item.key}</Text>
      <Radio className={`${colorClassName()} ${shapeClassName()}`} checked={item.value === checkedValue} value={item.value || ""} disabled={props.disabled} />
    </View>);
    const formRadioComponent = <View className="cu-form-group">
      <View className="title">{title}</View>
      <View className={directionClassName}>{radioComponent}</View>
    </View>;
    const renderListComponent = () => <ListRadio onChange={value => {
      changeRadio({ detail: { value } });
    }} list={list} checkedValue={props.checkedValue} disabled={props.disabled} />;
    const formOrNormalComponent = <RadioGroup onChange={changeRadio} className={`${type === "form" ? "block" : ""}`}>
      {type === "form" ? formRadioComponent : <View className={directionClassName}>{radioComponent}</View>}
    </RadioGroup>;
    const weappComponent = type === "list" ? renderListComponent() : formOrNormalComponent;
    const RadioComponent = !isWeApp ? <H5Radio {...props} /> : weappComponent;
    return <View className={classNames(props.className)} style={Object.assign({}, props.style)}>
      {RadioComponent}
    </View>;
  }

}
ClRadio.defaultProps = {
  type: "normal",
  shape: "normal",
  title: "",
  colorClassName: "green",
  directionClassName: "",
  radioGroup: []
};
ClRadio.options = {
  addGlobalClass: true
};