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

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

import Nerv from "nervjs";
import { Picker, View } from "@tarojs/components";
import Taro from "@tarojs/taro-h5";
import { classNames, getNowDate, isAliPay } from "../../lib/index";
import { getAreaData } from "../../lib/area";
import "./index.scss";
import AlipayMutiSelect from "./components/alipay/mutiSelector";

class ClSelect extends Taro.Component {
  render() {
    const props = this.props;

    const selector = {
      range: props.selector && props.selector.range || [],
      value: props.selector && props.selector.value || 0,
      rangeKey: props.selector && props.selector.rangeKey || undefined
    };
    const mutiSelector = {
      range: props.multiSelector && props.multiSelector.range || [],
      value: props.multiSelector && props.multiSelector.value || [0, 0],
      rangeKey: props.multiSelector && props.multiSelector.rangeKey || undefined
    };
    const timeSelector = {
      value: props.time && props.time.value || "00:00",
      start: props.time && props.time.start || "00:00",
      end: props.time && props.time.end || "23:59"
    };
    const dateSelector = {
      value: props.date && props.date.value || getNowDate(props.date && props.date.fields || "day"),
      fields: props.date && props.date.fields || "day",
      start: props.date && props.date.start || "",
      end: props.date && props.date.end || ""
    };
    const getRegionData = (province, city) => {
      const regionObjData = getAreaData(province, city);
      const provinceArr = regionObjData.province.map(item => ({
        key: item[0],
        value: item[1]
      }));
      const cityArr = regionObjData.city.map(item => ({
        key: item[0],
        value: item[1]
      }));
      const districtArr = regionObjData.district.map(item => ({
        key: item[0],
        value: item[1]
      }));
      return [provinceArr, cityArr, districtArr];
    };
    const regionSelector = {
      value: props.region && props.region.value || getRegionData().map(item => item[0])
    };
    // 单选
    const getSelectorValue = index => selector.rangeKey ? selector.range[index][selector.rangeKey] : selector.range[index];
    const [selected, setSelected] = Taro.useState(() => getSelectorValue(selector.value));
    const setSelect = index => {
      const value = getSelectorValue(index);
      setSelected(value);
    };
    // 多选
    const getMutiSelectorValue = mutiIndex => {
      const value = [];
      mutiSelector.range.forEach((item, index) => {
        const rangeValue = mutiIndex[index];
        const temp = mutiSelector.rangeKey ? item[rangeValue][mutiSelector.rangeKey] : item[rangeValue];
        value.push(temp);
      });
      return value.join(",");
    };
    const [mutiSelected, setMutiSelected] = Taro.useState(() => getMutiSelectorValue(mutiSelector.value));
    const setMutiSelect = index => {
      setMutiSelected(getMutiSelectorValue(index));
    };
    // 时间选择
    const getTimeSelectorValue = value => value;
    const [timeSelected, setTimeSelected] = Taro.useState(() => getTimeSelectorValue(timeSelector.value));
    const setTimeSelect = value => {
      setTimeSelected(getTimeSelectorValue(value));
    };
    // 日期选择
    const getDateSelectorValue = value => value;
    const [dateSelected, setDateSelected] = Taro.useState(() => getDateSelectorValue(dateSelector.value));
    const setDateSelect = value => {
      setDateSelected(getDateSelectorValue(value));
    };
    // 地区选择
    const [areaData, setAreaData] = Taro.useState(getRegionData(...regionSelector.value));
    const getRegionSelectorValue = value => value.map(item => item.value).join(",");
    const [regionSelected, setRegionSelected] = Taro.useState(() => getRegionSelectorValue(regionSelector.value));
    const [confirmRegion, setConfirmRegion] = Taro.useState(regionSelector.value);
    const [originAreaData, setOriginAreaData] = Taro.useState(areaData);
    const setRegionSelect = value => {
      setRegionSelected(getRegionSelectorValue(value));
    };
    // 单选触发
    const onSelectorChange = e => {
      const index = e.detail.value;
      setSelect(index);
      props.onChange && props.onChange(index);
    };
    // 多选触发
    const onMutiSelectorChange = e => {
      const index = e.detail.value;
      setMutiSelect(index);
      props.onChange && props.onChange(index);
    };
    // 多选滚动触发
    const onMutiSelectorColumChange = e => {
      props.onColumnChange && props.onColumnChange(e.detail);
    };
    // 时间触发
    const onTimeSelectorChange = e => {
      const index = e.detail.value;
      setTimeSelect(index);
      props.onChange && props.onChange(index);
    };
    // 日期触发
    const onDateSelectorChange = e => {
      const index = e.detail.value;
      setDateSelect(index);
      props.onChange && props.onChange(index);
    };
    const origin = regionSelector.value.map((item, index) => originAreaData[index].findIndex(obj => obj.key === item.key));
    const onCancel = e => {
      setAreaData(originAreaData);
      setTempSelect(confirmRegion.map((item, index) => originAreaData[index].findIndex(origin => origin.key === item.key)));
      props.onCancel && props.onCancel(e);
    };
    // 地区触发
    const onRegionSelectorChange = e => {
      const detail = e.detail.value;
      const dataSelected = detail.map((key, index) => areaData[index][key]);
      setRegionSelect(dataSelected);
      setOriginAreaData(areaData);
      setConfirmRegion(dataSelected);
      props.onChange && props.onChange(dataSelected);
    };
    const [tempSelect, setTempSelect] = Taro.useState(origin);
    const onRegionMutiSelectorColumChange = e => {
      const detail = e.detail;
      const column = detail.column;
      const index = e.detail.value;
      tempSelect[column] = index;
      if (column !== 2) {
        if (column === 0) {
          tempSelect[1] = 0;
          tempSelect[2] = 0;
          setAreaData(getRegionData(areaData[0][tempSelect[0]]));
        }
        if (column === 1) {
          tempSelect[2] = 0;
          setAreaData(getRegionData(areaData[0][tempSelect[0]], areaData[1][tempSelect[1]]));
        }
      }
      setTempSelect(tempSelect);
    };
    Taro.useMemo(() => {
      switch (props.mode) {
        case "selector":
          {
            setSelected(getSelectorValue(selector.value));
            break;
          }
        case "multiSelector":
          {
            setMutiSelected(getMutiSelectorValue(mutiSelector.value));
            break;
          }
        case "region":
          {
            setRegionSelected(getRegionSelectorValue(regionSelector.value));
            const area = getRegionData(...regionSelector.value);
            setAreaData(area);
            const origin = regionSelector.value.map((item, index) => area[index].findIndex(obj => obj.key === item.key));
            setTempSelect(origin);
            break;
          }
        case "date":
          {
            setDateSelected(getDateSelectorValue(dateSelector.value));
            break;
          }
        case "time":
          {
            setTimeSelected(getTimeSelectorValue(timeSelector.value));
            break;
          }
        default:
          {}
      }
    }, [props.selector, props.region, props.date, props.time, props.multiSelector]);
    // 单选组件
    const selectorComponent = <Picker mode="selector" range={selector.range} rangeKey={selector.rangeKey} value={selector.value || 0} onChange={onSelectorChange} onCancel={onCancel} disabled={props.disabled} className="longSelect">
      <View className="picker">{selected}</View>
    </Picker>;
    // 多选组件
    const mutiSelectorComponent = <Picker mode="multiSelector" range={mutiSelector.range} rangeKey={mutiSelector.rangeKey} value={mutiSelector.value} onChange={onMutiSelectorChange} onColumnChange={onMutiSelectorColumChange} onCancel={onCancel} disabled={props.disabled} className="longSelect">
      <View className="picker">{mutiSelected}</View>
    </Picker>;
    // alipay 多选
    const alipayMutiSelectorComponent = <AlipayMutiSelect {...props} />;
    // 时间选择组件
    const timeSelectorComponent = <Picker mode="time" value={timeSelector.value} start={timeSelector.start} end={timeSelector.end} onChange={onTimeSelectorChange} onCancel={onCancel} disabled={props.disabled} className="longSelect">
      <View className="picker">{timeSelected}</View>
    </Picker>;
    // 日期选择组件
    const dateSelectorComponent = <Picker mode="date" value={dateSelector.value} start={dateSelector.start} end={dateSelector.end} fields={dateSelector.fields} onCancel={onCancel} onChange={onDateSelectorChange} className="longSelect">
      <View className="picker">{dateSelected}</View>
    </Picker>;
    // 地区选择组件
    const regionSelectorComponent = <Picker mode="multiSelector" range={areaData} rangeKey={"value"} value={tempSelect} onChange={onRegionSelectorChange} onColumnChange={onRegionMutiSelectorColumChange} onCancel={onCancel} disabled={props.disabled} className="longSelect">
      <View className="picker">{regionSelected}</View>
    </Picker>;
    const title = props.title;
    return <View className={classNames(`cu-form-group ${props.disabled ? "text-gray" : ""}`, props.className)} style={Object.assign({}, props.style)}>
      <View className="title">{title || ""}</View>
      {props.mode === "selector" ? selectorComponent : ""}
      {props.mode === "multiSelector" && !isAliPay ? mutiSelectorComponent : ""}
      {props.mode === "multiSelector" && isAliPay ? alipayMutiSelectorComponent : ""}
      {props.mode === "time" ? timeSelectorComponent : ""}
      {props.mode === "date" ? dateSelectorComponent : ""}
      {props.mode === "region" ? regionSelectorComponent : ""}
    </View>;
  }

}

ClSelect.options = {
  addGlobalClass: true
};
ClSelect.defaultProps = {
  mode: "selector",
  selector: [],
  multiSelector: [],
  time: [],
  date: [],
  region: []
};
export default ClSelect;