vantui-edit/es/picker/index.js

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

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["valueKey", "toolbarPosition", "defaultIndex", "columns", "title", "cancelButtonText", "confirmButtonText", "itemHeight", "visibleItemCount", "loading", "onChange", "className", "style", "onCancel", "onConfirm", "showToolbar"];

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) { _defineProperty(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; }

/* eslint-disable react-hooks/exhaustive-deps */
import { useCallback, useRef, forwardRef, useImperativeHandle, useLayoutEffect } from 'react';
import { View } from '@tarojs/components';
import { nextTick } from '@tarojs/taro';
import { PickerColumn } from '../picker-column/index';
import * as utils from '../wxs/utils';
import { Loading } from '../loading/index';
import * as computed from './wxs';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var Picker = /*#__PURE__*/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 = _objectWithoutProperties(props, _excluded);

  var children = useRef([]);
  var handleIndex = useRef(-1);
  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 = useCallback(function (index) {
    var column = children.current[index];
    return column && column.getValue();
  }, []);
  var getColumnIndex = useCallback(function (columnIndex) {
    return (children.current[columnIndex] || {}).getCurrentIndex();
  }, []);
  var setColumns = 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 = 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 () {
        nextTick(function () {
          if (cIndex > options.length) {
            column.setIndex(0);
            handleIndex.current = -1;
          }

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

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

    return column.setIndex(optionIndex);
  }, []);
  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_ = useCallback(function (event) {
    event.preventDefault();
    event.stopPropagation();
  }, []);
  return /*#__PURE__*/_jsxs(View, _objectSpread(_objectSpread({
    className: "van-picker  ".concat(className),
    style: utils.style([style])
  }, others), {}, {
    onTouchMove: onTouchMove_,
    children: [toolbarPosition === 'top' && showToolbar && /*#__PURE__*/_jsxs(View, {
      className: "van-picker__toolbar toolbar-class",
      children: [/*#__PURE__*/_jsx(View, {
        className: "van-picker__cancel",
        hoverClass: "van-picker__cancel--hover",
        hoverStayTime: 70,
        "data-type": "cancel",
        onClick: emit,
        children: cancelButtonText || '取消'
      }), title && /*#__PURE__*/_jsx(View, {
        className: "van-picker__title van-ellipsis",
        children: title
      }), /*#__PURE__*/_jsx(View, {
        className: "van-picker__confirm",
        hoverClass: "van-picker__confirm--hover",
        hoverStayTime: 70,
        "data-type": "confirm",
        onClick: emit,
        children: confirmButtonText || '确定'
      })]
    }), loading && /*#__PURE__*/_jsx(View, {
      className: "van-picker__loading",
      children: /*#__PURE__*/_jsx(Loading, {
        color: "#1989fa"
      })
    }), /*#__PURE__*/_jsxs(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__*/_jsx(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__*/_jsx(View, {
        className: "van-picker__mask",
        style: computed.maskStyle({
          itemHeight: itemHeight,
          visibleItemCount: visibleItemCount
        })
      }), /*#__PURE__*/_jsx(View, {
        className: "van-picker__frame van-hairline--top-bottom",
        style: computed.frameStyle({
          itemHeight: itemHeight
        })
      })]
    }), toolbarPosition === 'bottom' && showToolbar && /*#__PURE__*/_jsxs(View, {
      className: "van-picker__toolbar toolbar-class",
      children: [/*#__PURE__*/_jsx(View, {
        className: "van-picker__cancel",
        hoverClass: "van-picker__cancel--hover",
        hoverStayTime: 70,
        "data-type": "cancel",
        onClick: emit,
        children: cancelButtonText
      }), title && /*#__PURE__*/_jsx(View, {
        className: "van-picker__title van-ellipsis",
        children: title
      }), /*#__PURE__*/_jsx(View, {
        className: "van-picker__confirm",
        hoverClass: "van-picker__confirm--hover",
        hoverStayTime: 70,
        "data-type": "confirm",
        onClick: emit,
        children: confirmButtonText
      })]
    })]
  }));
});
export { Picker };
export default Picker;