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

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireWildcard(require("react"));

var _reactNative = require("react-native");

var _Columns = _interopRequireDefault(require("./Columns"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

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] = (0, _react.useState)([]); // 要返回的选中数组

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

  const [columnsSelect, setColumnsSelect] = (0, _react.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]);
  };

  (0, _react.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);
    }
  };

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

const styles = _reactNative.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
  }
});

var _default = Picker;
exports.default = _default;
//# sourceMappingURL=index.js.map