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

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

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

    const [stateOptions, setStateOptions] = Taro.useState(options);
    const [stateValue, setStateValue] = Taro.useState(value || defaultValue || []);
    const [drawerShow, setDrawerShow] = Taro.useState(false);
    Taro.useEffect(() => {
      setStateValue(value || defaultValue || []);
    }, [value]);
    Taro.useEffect(() => {
      getDicOptions();
    }, []);
    const getDicOptions = () => {
      if (optionKey) {
        handlerGetDicOptions(optionKey).then(res => {
          if (res) {
            setStateOptions(res);
          }
        }).catch(err => {
          // console.log('err', err)
        });
      }
    };
    const handlerGetDicOptions = optionKey => {
      const globalId = `checkbox-${optionKey}`;
      return new Promise((resolve, reject) => {
        if (getGlobalData(globalId)) {
          resolve(getGlobalData(globalId));
        } else if (loadDicData) {
          loadDicData(optionKey).then(res => {
            if (res && res.length) {
              resolve(res);
              setGlobalData(globalId, res);
            } else {
              reject();
            }
          });
        } else {
          reject();
        }
      });
    };
    const checkboxOnChange = val => {
      if (editable || editable === undefined) {
        if (type === 'dropdown') {
          setStateValue(val);
        } else {
          if (value.includes(val)) {
            const newValue = value.filter(i => i !== val);
            onChange(newValue);
          } else {
            const newValue = value.concat(val);
            onChange(newValue);
          }
        }
      }
    };
    const onCancel = () => {
      const showValue = value || defaultValue || [];
      setStateValue(showValue);
      setDrawerShow(false);
    };
    const onSubmit = () => {
      onChange(stateValue);
      setDrawerShow(false);
    };
    if (!stateOptions || !stateOptions.length || hidden) {
      return null;
    }
    const showValue = value || defaultValue || [];
    const unEditeableViewValue = showValue.length && stateOptions.length ? showValue.map(item => stateOptions.find(i => i.value === item).label).join(' ') : '';
    if (editable === false || editable === undefined && onView) {
      return <UnEditeableView term={term} help={help} value={unEditeableViewValue} layout={unEditeableViewValue.length >= 14 ? 'column' : 'row'} listItemChildren={listItemChildren} />;
    }
    const pickerShowText = stateOptions.map(option => {
      if (showValue.includes(option.value)) {
        return option.label;
      }
    }).filter(i => i).join(' ');
    const containerCLs = classnames(['checkbox-container', listItemChildren ? 'item-container' : 'item-container-margin']);
    return <View className={containerCLs}>
      {type === 'dropdown' && <View className="picker-container">
          <CustomLabel term={term} help={help} required={required} position />
          
          <View className="list-item" onClick={() => setDrawerShow(true)}>
            <Text className="list-item-text">{pickerShowText}</Text>
            <Image className="list-item-arrow" mode="aspectFit" src={arrowImg} />
          </View>
          <AtDrawer show={drawerShow} right mask width="100vw">
            <View className="drawer-wrap">
              <View className="header">
                <Text onClick={onCancel}>取消</Text>
                <Text>{term}</Text>
                <Text className="submit" onClick={onSubmit}>确定</Text>
              </View>
              <View className="content">
                <AtCheckbox options={stateOptions} selectedList={stateValue} onChange={checkboxOnChange} />
              </View>
            </View>
          </AtDrawer>
        </View>}
      {type === 'checkbox' && <View>
          <CustomLabel term={`${term}`} help={help} required={required} />
          {itemExtra && <View className="check-box-extra-wrap"><ItemExtra text={itemExtra} /></View>}
          <View className="checkbox-list-content">
            {stateOptions.map((item, index) => {
            const { value, label } = item;
            return <CheckBoxListItem key={value} className={index === stateOptions.length - 1 ? 'last-child' : ''} checked={showValue.includes(value)} onClick={() => checkboxOnChange(value)}>
                <Text>
                  {label}
                </Text>
              </CheckBoxListItem>;
          })}
          </View>
        </View>}
      {type === 'tags' && <View>
          <CustomLabel term={`${term}`} help={help} required={required} />
          {itemExtra && <View className="check-box-extra-wrap"><ItemExtra text={itemExtra} /></View>}
          <View className="checkbox-content">
            {stateOptions.map(item => {
            const { value, label } = item;
            return <CheckboxItem className="--item" key={value} checked={showValue.includes(value)} compStyle={{
              margin: '2px'
            }} onClick={() => checkboxOnChange(value)}>
                <Text>
                  {label}
                </Text>
              </CheckboxItem>;
          })}
          </View>
        </View>}
      {type === 'dropdown' && itemExtra && <ItemExtra text={itemExtra} />}
    </View>;
  }

}

export default CheckboxItemGroup;