mh-rn-component/module/Picker/index.js

import React, { useEffect, useState } from 'react';
import { View, Text, StyleSheet, TouchableWithoutFeedback } from "react-native";
import Columns from "./Columns";

const Picker = _ref => {
  let {
    show,
    title = "标题",
    confirmButtonText = "确认",
    cancelButtonText = "取消",
    visibleItemCount = 5,
    columnHeight = 44,
    columns,
    cascadeLevel,
    customFieldName = {
      value: "value",
      children: "children"
    },
    toolbar,
    ...rest
  } = _ref;
  const customFieldNameValue = customFieldName.value || "value";
  const customFieldNameChildren = customFieldName.children || "children"; // 当前列的选项数组

  const [columnsData, setColumnsData] = useState([]); // 要返回的选中数组

  const [currentValue, setCurrentValue] = useState(new Array(columnsData.length)); // 当前各列选中的index

  const [columnsSelect, setColumnsSelect] = useState(new Array(columnsData.length));

  const formattedColumns = () => {
    // 判断是否事级联选择
    if (cascadeLevel) {
      let cascadeArr = new Array(cascadeLevel);

      for (let i = 0; i < cascadeLevel; i++) {
        if (i === 0) {
          cascadeArr[0] = {
            values: columns
          };
        } else {
          var _cascadeArr;

          cascadeArr[i] = {
            values: (_cascadeArr = cascadeArr[i - 1]) === null || _cascadeArr === void 0 ? void 0 : _cascadeArr.values[0][customFieldNameChildren],
            defaultIndex: 0
          };
        }
      }

      setColumnsData(() => {
        return [...cascadeArr];
      });
    } else {
      setColumnsData([...columns]);
    }
  }; // 重组 级联数据结构


  const cascadeFormat = (value, columnsIndex) => {
    for (let i = columnsIndex + 1; i < columnsData.length; i++) {
      if (i === columnsIndex + 1) {
        columnsData[i].values = columnsData[i - 1].values[value].children;
      } else {
        columnsData[i].values = columnsData[i - 1].values[0].children;
      }

      setColumnsSelect(prev => {
        prev[i] = 0;
        return [...prev];
      });
      setCurrentValue(prev => {
        prev[i] = columnsData[i].values[0][customFieldNameValue];
        return prev;
      });
    }

    setColumnsData([...columnsData]);
  };

  useEffect(() => {
    formattedColumns();
  }, [columns, cascadeLevel]);
  /**
   * 多列选择/级联选择
   * @param value 选中的要返回的数据
   * @param index 选中的位置
   * @param columnsIndex 改变的是第几列 0开始
   */

  const multiColumnChange = (value, index, columnsIndex) => {
    setCurrentValue(prev => {
      prev[columnsIndex] = value;
      return prev;
    });
    setColumnsSelect(prev => {
      prev[columnsIndex] = index;
      return [...prev];
    });

    if (cascadeLevel) {
      cascadeFormat(index, columnsIndex);
    }
  };

  const confirm = () => {
    rest.onConfirm && rest.onConfirm(currentValue);
    rest.showChange(!show);
  };

  const cancel = () => {
    rest.onCancel && rest.onCancel(currentValue);
    rest.showChange(!show);
  };

  const change = () => {
    // 组合一下change
    const backValue = columnsSelect.reduce((acc, cur, index) => {
      let _obj = {
        index: cur,
        value: currentValue[index]
      };
      acc.push(_obj);
      return acc;
    }, []);

    if (backValue.length > 0) {
      rest.onChange && rest.onChange(backValue);
    }
  };

  useEffect(() => {
    change();
  }, [columnsSelect]);
  return /*#__PURE__*/React.createElement(React.Fragment, null, show && /*#__PURE__*/React.createElement(View, {
    style: styles.bg
  }, /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
    onPress: () => rest.showChange(false)
  }, /*#__PURE__*/React.createElement(View, {
    style: styles.handel_bg
  })), /*#__PURE__*/React.createElement(View, {
    style: styles.picker
  }, /*#__PURE__*/React.createElement(View, {
    style: styles.picker_title
  }, /*#__PURE__*/React.createElement(Text, {
    onPress: cancel,
    style: [styles.picker_fontSize, {
      color: "#cccccc"
    }]
  }, cancelButtonText), /*#__PURE__*/React.createElement(Text, {
    style: [styles.picker_title_content]
  }, title), /*#__PURE__*/React.createElement(Text, {
    onPress: confirm,
    style: [styles.picker_fontSize, {
      color: "#3170a7"
    }]
  }, confirmButtonText)), /*#__PURE__*/React.createElement(View, {
    style: [styles.picker_main, {
      height: columnHeight * visibleItemCount
    }]
  }, columnsData.map((item, index) => {
    return /*#__PURE__*/React.createElement(Columns, {
      onChange: multiColumnChange,
      columnIndex: index,
      visibleItemCount: visibleItemCount,
      defaultIndex: item.defaultIndex || 0,
      columnHeight: columnHeight,
      data: item.values,
      key: index,
      customFieldName: customFieldName,
      cascadeLevel: cascadeLevel
    });
  })))));
};

const styles = StyleSheet.create({
  bg: {
    width: "100%",
    height: "100%",
    flex: 1,
    justifyContent: "flex-end",
    position: 'absolute',
    top: 0,
    left: 0,
    alignItems: 'center',
    backgroundColor: 'rgba(0, 0, 0, .4)'
  },
  handel_bg: {
    flex: 1,
    width: '100%'
  },
  picker: {
    width: "100%",
    minHeight: 300,
    // maxHeight: 440,
    backgroundColor: "#ffffff",
    borderTopLeftRadius: 10,
    borderTopRightRadius: 10
  },
  picker_title: {
    padding: 8,
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center"
  },
  picker_title_content: {
    fontSize: 18
  },
  picker_fontSize: {
    fontSize: 16
  },
  picker_main: {
    width: "100%",
    flexDirection: "row",
    alignItems: "flex-start",
    overflow: "hidden"
  },
  picker_frame: {
    width: "100%",
    backgroundColor: "rgba(248,223,112,0.5)",
    position: "absolute",
    top: "50%",
    left: 0
  }
});
export default Picker;
//# sourceMappingURL=index.js.map