mini-check/dist/h5/components/RadioButtonGroup/index.js

import Nerv from "nervjs";
import Taro from "@tarojs/taro-h5";
import { View, Text, Picker, Image } from '@tarojs/components';
import classnames from 'classnames';
import { CustomLabel, ItemExtra, UnEditeableView } from '../index';
import { getGlobalData, setGlobalData } from '../../util/global_data';
import Tag from './Tag';
import CustomRadio from './CustomRadio';
import './index.scss';
import arrowImg from '../../assets/ic_arrow_right.png';

class RadioButtonGroup extends Taro.Component {
  render() {
    const { itemExtra, editable, options, term, value, onChange, help, required, hidden, optionKey, defaultValue, onView, type = 'group', loadDicData, listItemChildren } = this.props;

    const [stateOptions, setStateOptions] = Taro.useState(options);
    Taro.useEffect(() => {
      getDicOptions();
    }, []);
    const getDicOptions = () => {
      if (optionKey && loadDicData) {
        handlerGetDicOptions(optionKey).then(res => {
          if (res) {
            setStateOptions(res);
          }
        }).catch(err => {
          // console.log('err', err)
        });
      }
    };
    const handlerGetDicOptions = optionKey => {
      const globalId = `radio-${optionKey}`;
      return new Promise((resolve, reject) => {
        if (getGlobalData(globalId)) {
          resolve(getGlobalData(globalId));
        } else if (loadDicData) {
          loadDicData({ key: optionKey }).then(res => {
            if (res && res.length) {
              resolve(res);
              setGlobalData(globalId, res);
            } else {
              reject();
            }
          });
        } else {
          reject();
        }
      });
    };
    const radioOnChange = radioValue => {
      const showValue = value !== undefined ? value : defaultValue;
      if (editable || editable === undefined) {
        let newValue = radioValue;
        if (type === 'dropdown') {
          const { value } = radioValue.detail;
          newValue = stateOptions[parseInt(value)].value;
        }
        if (newValue === showValue) {
          onChange('');
        } else {
          onChange(newValue);
        }
      }
    };
    if (!stateOptions || !stateOptions.length || hidden) {
      return null;
    }
    const showValue = value !== undefined ? value : defaultValue;
    if (editable === false || editable === undefined && onView) {
      const item = stateOptions.find(item => item.value === showValue) || { label: '' };
      return <UnEditeableView term={term} help={help} value={item.label} listItemChildren={listItemChildren} />;
    }
    const pickerShowText = stateOptions.find(item => item.value === showValue) ? stateOptions.find(item => item.value === showValue).label : '';
    const pickerValue = stateOptions.map(item => item.value).indexOf(showValue);
    const containerCLs = classnames(['radio-group-container', listItemChildren ? 'item-container' : 'item-container-margin']);
    return <View className={containerCLs}>
      {type === 'dropdown' && <View className="radio-picker-container">
          <CustomLabel term={term} help={help} required={required} position />
          <Picker mode="selector" onChange={radioOnChange} value={pickerValue} range={stateOptions.map(i => i.label)} className="radio-picker-wrap">
            <View className="radio-picker-content">
              <Text className="radio-picker-text">{pickerShowText}</Text>
              <Image className="picker-arrow" mode="aspectFit" src={arrowImg} />
            </View>
          </Picker>
        </View>}
      {type === 'radio' && <View className="radio-content">
          <CustomLabel term={`${term}`} help={help} required={required} />
          {itemExtra && <View className="radio-item-extra-wrap"><ItemExtra text={itemExtra} /></View>}
          <View className="radio-wrap">
            {stateOptions.map((item, index) => {
            return <View onClick={() => radioOnChange(item.value)} key={item.value}>
                <CustomRadio active={showValue === item.value} className={index === stateOptions.length - 1 ? 'last-child' : ''}>
                  {item.label}
                </CustomRadio>
              </View>;
          })}
          </View>
        </View>}
      {type === 'group' && <View>
          <CustomLabel term={`${term}`} help={help} required={required} />
          {itemExtra && <View className="radio-item-extra-wrap">
            <ItemExtra text={itemExtra} />
          </View>}
          <View className="radio-group-content">
            {stateOptions.map(item => {
            return <View onClick={() => radioOnChange(item.value)} key={item.value}>
                <Tag active={showValue === item.value}>
                  {item.label}
                </Tag>
              </View>;
          })}
          </View>
        </View>}
      {itemExtra && type === 'dropdown' && <ItemExtra text={itemExtra} />}
    </View>;
  }

}

export default RadioButtonGroup;