vantui-edit/lib/picker/index.js

一套适用于Taro3及React的vantui组件库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof = require("@babel/runtime/helpers/typeof");

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

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _react = require("react");

var _components = require("@tarojs/components");

var _taro = require("@tarojs/taro");

var _index = require("../picker-column/index");

var utils = _interopRequireWildcard(require("../wxs/utils"));

var _index2 = require("../loading/index");

var computed = _interopRequireWildcard(require("./wxs"));

var _jsxRuntime = require("react/jsx-runtime");

var _excluded = ["valueKey", "toolbarPosition", "defaultIndex", "columns", "title", "cancelButtonText", "confirmButtonText", "itemHeight", "visibleItemCount", "loading", "onChange", "className", "style", "onCancel", "onConfirm", "showToolbar"];

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

var Picker = /*#__PURE__*/(0, _react.forwardRef)(function Index(props, ref) {
  var _props$valueKey = props.valueKey,
      valueKey = _props$valueKey === void 0 ? 'text' : _props$valueKey,
      _props$toolbarPositio = props.toolbarPosition,
      toolbarPosition = _props$toolbarPositio === void 0 ? 'top' : _props$toolbarPositio,
      defaultIndex = props.defaultIndex,
      columns = props.columns,
      title = props.title,
      cancelButtonText = props.cancelButtonText,
      confirmButtonText = props.confirmButtonText,
      _props$itemHeight = props.itemHeight,
      itemHeight = _props$itemHeight === void 0 ? 48 : _props$itemHeight,
      _props$visibleItemCou = props.visibleItemCount,
      visibleItemCount = _props$visibleItemCou === void 0 ? 5 : _props$visibleItemCou,
      loading = props.loading,
      onChange = props.onChange,
      className = props.className,
      style = props.style,
      onCancel = props.onCancel,
      onConfirm = props.onConfirm,
      _props$showToolbar = props.showToolbar,
      showToolbar = _props$showToolbar === void 0 ? true : _props$showToolbar,
      others = (0, _objectWithoutProperties2.default)(props, _excluded);
  var children = (0, _react.useRef)([]);
  var handleIndex = (0, _react.useRef)(-1);
  (0, _react.useLayoutEffect)(function () {
    if (Array.isArray(children) && children.length) {
      setColumns().catch(function () {});
    }
  }, [columns, children]);

  var emit = function emit(event) {
    var _event$currentTarget;

    var type = event === null || event === void 0 ? void 0 : (_event$currentTarget = event.currentTarget) === null || _event$currentTarget === void 0 ? void 0 : _event$currentTarget.dataset['type'];
    var simple = columns && columns.length && !columns[0].values;

    if (typeof event === 'number' || !type) {
      if (onChange) {
        var event_ = {};
        handleIndex.current = event;
        Object.defineProperties(event_, {
          detail: {
            value: {
              picker: {
                setColumnValue: setColumnValue,
                getColumnValue: getColumnValue,
                setColumnValues: setColumnValues,
                getColumnValues: function getColumnValues(index) {
                  return children.current[index].options;
                },
                getIndexes: getIndexes,
                setIndexes: function setIndexes(indexes) {
                  var stack = indexes.map(function (optionIndex, columnIndex) {
                    return setColumnIndex(columnIndex, optionIndex);
                  });
                  return Promise.all(stack);
                },
                setColumnIndex: setColumnIndex,
                getColumnIndex: getColumnIndex,
                getValues: getValues,
                setColumns: setColumns,
                children: children,
                setValues: setValues,
                columns: columns
              },
              value: simple ? getColumnValue(0) : getValues(),
              index: simple ? getColumnIndex(0) : event
            }
          }
        });
        onChange(event_);
      }
    } else if (type === 'cancel') {
      if (onCancel) {
        Object.defineProperty(event, 'detail', {
          value: {
            value: simple ? getColumnValue(0) : getValues(),
            index: simple ? getColumnIndex(0) : getIndexes()
          }
        });
        onCancel(event);
      }
    } else if (type === 'confirm') {
      if (onConfirm) {
        Object.defineProperty(event, 'detail', {
          value: {
            value: simple ? getColumnValue(0) : getValues(),
            index: simple ? getColumnIndex(0) : getIndexes()
          }
        });
        onConfirm(event);
      }
    }
  };

  var getColumnValue = (0, _react.useCallback)(function (index) {
    var column = children.current[index];
    return column && column.getValue();
  }, []);
  var getColumnIndex = (0, _react.useCallback)(function (columnIndex) {
    return (children.current[columnIndex] || {}).getCurrentIndex();
  }, []);
  var setColumns = (0, _react.useCallback)(function () {
    var simple = columns && columns.length && !columns[0].values;
    var columns_ = simple ? [{
      values: columns
    }] : columns;
    var stack = (columns_ || []).map(function (column, index) {
      return setColumnValues(index, column.values);
    });
    return Promise.all(stack);
  }, [columns]);
  var setColumnValues = (0, _react.useCallback)(function (index, options) {
    if (index <= handleIndex.current) return Promise.resolve(getValues());
    var column = children.current[index];

    if (column == null) {
      return Promise.reject(new Error('setColumnValues: 对应列不存在'));
    }

    var isSame = JSON.stringify(column.props.options) === JSON.stringify(options);

    if (isSame) {
      return Promise.resolve(getValues());
    }

    var cIndex = column.getCurrentIndex();
    return new Promise(function (resolve) {
      column.set({
        options: options
      }).then(function () {
        (0, _taro.nextTick)(function () {
          if (cIndex > options.length) {
            column.setIndex(0);
            handleIndex.current = -1;
          }

          (0, _taro.nextTick)(function () {
            resolve(getValues());
          });
        });
      });
    });
  }, []);
  var getValues = (0, _react.useCallback)(function () {
    return children.current.map(function (child) {
      return child.getValue();
    });
  }, [children]);
  var getIndexes = (0, _react.useCallback)(function () {
    return children.current.map(function (child) {
      return child.getCurrentIndex();
    });
  }, []);
  var onChange_ = emit;
  var setColumnIndex = (0, _react.useCallback)(function (index, optionIndex) {
    var column = children.current[index];

    if (column == null) {
      return Promise.reject(new Error('setColumnIndex: 对应列不存在'));
    }

    return column.setIndex(optionIndex);
  }, []);
  (0, _react.useImperativeHandle)(ref, function () {
    return {
      setColumnValue: setColumnValue,
      getColumnValue: getColumnValue,
      setColumnValues: setColumnValues,
      getColumnValues: function getColumnValues(index) {
        return children.current[index].options;
      },
      getIndexes: getIndexes,
      setIndexes: function setIndexes(indexes) {
        var stack = indexes.map(function (optionIndex, columnIndex) {
          return setColumnIndex(columnIndex, optionIndex);
        });
        return Promise.all(stack);
      },
      setColumnIndex: setColumnIndex,
      getColumnIndex: getColumnIndex,
      getValues: getValues,
      setColumns: setColumns,
      children: children,
      setValues: setValues,
      columns: columns
    };
  });

  var setValues = function setValues(values) {
    var stack = values.map(function (value, index) {
      return setColumnValue(index, value);
    });
    return Promise.all(stack);
  };

  var setColumnValue = function setColumnValue(index, value) {
    var column = children.current[index] || {};

    if (column == null) {
      return Promise.reject(new Error('setColumnValue: 对应列不存在'));
    }

    return column.setValue(value);
  };

  var onTouchMove_ = (0, _react.useCallback)(function (event) {
    event.preventDefault();
    event.stopPropagation();
  }, []);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.View, _objectSpread(_objectSpread({
    className: "van-picker  ".concat(className),
    style: utils.style([style])
  }, others), {}, {
    onTouchMove: onTouchMove_,
    children: [toolbarPosition === 'top' && showToolbar && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.View, {
      className: "van-picker__toolbar toolbar-class",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
        className: "van-picker__cancel",
        hoverClass: "van-picker__cancel--hover",
        hoverStayTime: 70,
        "data-type": "cancel",
        onClick: emit,
        children: cancelButtonText || '取消'
      }), title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
        className: "van-picker__title van-ellipsis",
        children: title
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
        className: "van-picker__confirm",
        hoverClass: "van-picker__confirm--hover",
        hoverStayTime: 70,
        "data-type": "confirm",
        onClick: emit,
        children: confirmButtonText || '确定'
      })]
    }), loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
      className: "van-picker__loading",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Loading, {
        color: "#1989fa"
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.View, {
      className: "van-picker__columns",
      style: computed.columnsStyle({
        itemHeight: itemHeight,
        visibleItemCount: visibleItemCount
      }),
      onTouchMove: onTouchMove_ // @ts-ignore
      ,
      catchMove: true,
      children: [computed.columns(columns).map(function (item, index) {
        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.PickerColumn, {
          className: "van-picker__column column-class",
          "data-index": index,
          index: index,
          valueKey: valueKey,
          initialOptions: item.values,
          defaultIndex: item.defaultIndex || defaultIndex,
          itemHeight: itemHeight,
          visibleItemCount: visibleItemCount,
          activeClass: "active-class",
          onChange: onChange_,
          ref: function ref(el) {
            return children.current[index] = el;
          }
        }, "van-picker__column_".concat(index, "column-class"));
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
        className: "van-picker__mask",
        style: computed.maskStyle({
          itemHeight: itemHeight,
          visibleItemCount: visibleItemCount
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
        className: "van-picker__frame van-hairline--top-bottom",
        style: computed.frameStyle({
          itemHeight: itemHeight
        })
      })]
    }), toolbarPosition === 'bottom' && showToolbar && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.View, {
      className: "van-picker__toolbar toolbar-class",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
        className: "van-picker__cancel",
        hoverClass: "van-picker__cancel--hover",
        hoverStayTime: 70,
        "data-type": "cancel",
        onClick: emit,
        children: cancelButtonText
      }), title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
        className: "van-picker__title van-ellipsis",
        children: title
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
        className: "van-picker__confirm",
        hoverClass: "van-picker__confirm--hover",
        hoverStayTime: 70,
        "data-type": "confirm",
        onClick: emit,
        children: confirmButtonText
      })]
    })]
  }));
});
exports.Picker = Picker;
var _default = Picker;
exports.default = _default;