@fruits-chain/react-native-xiaoshu/lib/commonjs/picker-view/index.js

🌈 React Native UI library

"use strict";

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

var _isNil = _interopRequireDefault(require("lodash/isNil"));

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

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

var _divider = _interopRequireDefault(require("../divider"));

var _hooks = require("../hooks");

var _loading = _interopRequireDefault(require("../loading"));

var _theme = _interopRequireDefault(require("../theme"));

var _picker = require("./helper/picker");

var _pickerViewColumn = _interopRequireDefault(require("./picker-view-column"));

var _style = require("./style");

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; }

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

/**
 * 选择器视图
 */
const PickerView = _ref => {
  let {
    visibleItemCount = 5,
    itemHeight = 50,
    loading = false,
    columns,
    ...restProps
  } = _ref;

  /** 选项的高度 */
  const columnsHeight = visibleItemCount * itemHeight;
  /** 居中选中的偏移量 */

  const markMargin = itemHeight / 2;

  const TOKENS = _theme.default.useThemeTokens();

  const CV = _theme.default.createVar(TOKENS, _style.varCreator);

  const STYLES = _theme.default.createStyle(CV, _style.styleCreator);
  /**
   * 数据类型
   * @description cascade 联级选择，multiple 多列选择，single 单列选择
   */


  const dataType = (0, _react.useMemo)(() => (0, _picker.getDataType)(columns), [columns]);
  const isControlled = ('value' in restProps);
  const isNoDefaultValue = ('defaultValue' in restProps);
  const [value, onChange] = (0, _hooks.useControllableValue)(restProps, {
    defaultValue: []
  });
  const [options, setOptions] = (0, _react.useState)([]);
  const ColumnDefaultValues = (0, _react.useRef)([]); // 初始化数据

  (0, _react.useEffect)(() => {
    if (dataType !== 'cascade') {
      const [_options, defaultValues] = (0, _picker.buildOptions)(dataType, columns);
      ColumnDefaultValues.current = defaultValues;
      setOptions(_options); // 非受控的情况、并且没有默认值才去同步数据
      // 既然有默认数据了，由外面自己负责
      // 把数据同步到内部状态，初始化的时候看起来是选中默认数据或第一个数据的样子

      if (!isControlled && !isNoDefaultValue) {
        const [v, o] = (0, _picker.buildSelectedValue)(defaultValues, _options);
        onChange(v, o);
      }
    }
  }, [columns, dataType, onChange, isControlled, isNoDefaultValue]); // 联级依赖 value 单独处理

  (0, _react.useEffect)(() => {
    if (dataType === 'cascade') {
      const [_options,, _values] = (0, _picker.buildOptions)(dataType, columns, value);
      const [v, o] = (0, _picker.buildSelectedValue)(_values, _options);
      setOptions(_options); // 当

      if (value !== _values) {
        onChange(v, o);
      }
    }
  }, [columns, value, dataType, onChange]);
  const bodyStyle = {
    height: columnsHeight,
    backgroundColor: CV.picker_view_background_color,
    flexDirection: 'row',
    overflow: 'hidden'
  };
  const maskTopStyles = [STYLES.mask, {
    top: 0,
    bottom: '50%',
    flexDirection: 'column-reverse',
    transform: [{
      translateY: -markMargin
    }]
  }];
  const maskBottomStyles = [STYLES.mask, {
    top: '50%',
    bottom: 0,
    transform: [{
      translateY: markMargin
    }]
  }];
  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: STYLES.picker
  }, loading ? /*#__PURE__*/_react.default.createElement(_loading.default, {
    style: STYLES.loading
  }) : null, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: bodyStyle
  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: maskTopStyles,
    pointerEvents: "none"
  }, /*#__PURE__*/_react.default.createElement(_divider.default, null)), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: maskBottomStyles,
    pointerEvents: "none"
  }, /*#__PURE__*/_react.default.createElement(_divider.default, null)), options.map((optionItem, optionIndex) => {
    const _value = (() => {
      if (!(0, _isNil.default)(value[optionIndex])) {
        return value[optionIndex];
      } // 默认值
      // 非受控的情况才去同步数据
      // 并且没有默认值


      if (!isControlled && !isNoDefaultValue) {
        if (dataType === 'multiple') {
          return ColumnDefaultValues.current[optionIndex];
        } // 真的没有就默认第一个选项


        return (0, _picker.findDefaultValue)(options[optionIndex][0].value, optionItem);
      }

      return null;
    })();

    return /*#__PURE__*/_react.default.createElement(_pickerViewColumn.default, {
      key: optionIndex,
      itemHeight: itemHeight,
      visibleItemCount: visibleItemCount,
      options: optionItem,
      value: _value,
      onChange: column => {
        switch (dataType) {
          // 联级选择
          // 如果是 cascade 需要重置选项
          case 'cascade':
            {
              const nextAll = (0, _picker.findNextAllColumns)((column === null || column === void 0 ? void 0 : column.children) || []);

              const _options = options.slice(0, optionIndex + 1).concat(nextAll.options);

              const values = value.slice(0, optionIndex).concat(column === null || column === void 0 ? void 0 : column.value).concat(nextAll.values);
              const [v, o] = (0, _picker.buildSelectedValue)(values, _options);
              onChange(v, o);
              break;
            }
          // 多选

          case 'multiple':
            {
              const newValues = value.concat([]); // 先从默认数据中拼凑好数据

              ColumnDefaultValues.current.forEach((cdv, cdvIndex) => {
                if ((0, _isNil.default)(newValues[cdvIndex])) {
                  newValues[cdvIndex] = cdv;
                }
              });
              newValues[optionIndex] = column.value;
              const [v, o] = (0, _picker.buildSelectedValue)(newValues, options);
              onChange(v, o);
              break;
            }
          // 单选

          default:
            {
              const columnsIndex = columns.findIndex(c => c.value === column.value);
              onChange([column.value], [columns[columnsIndex]]);
              break;
            }
        }
      }
    });
  })));
};

var _default = /*#__PURE__*/(0, _react.memo)(PickerView);

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