@arco-design/mobile-react 2.19.0

package/cjs/picker/index.js

@@ -0,0 +1,256 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+var _exportNames = {
+  MultiPicker: true,
+  PickerCell: true,
+  Cascader: true
+};
+exports.default = exports.PickerCell = exports.MultiPicker = exports.Cascader = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _mobileUtils = require("@arco-design/mobile-utils");
+
+var _contextProvider = require("../context-provider");
+
+var _popup = _interopRequireDefault(require("../popup"));
+
+var _pickerView = _interopRequireWildcard(require("../picker-view"));
+
+exports.MultiPicker = _pickerView.MultiPicker;
+exports.PickerCell = _pickerView.PickerCell;
+exports.Cascader = _pickerView.Cascader;
+
+var _helpers = require("../_helpers");
+
+var _type = require("./type");
+
+Object.keys(_type).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _type[key]) return;
+  exports[key] = _type[key];
+});
+var _excluded = ["className", "itemStyle", "cascade", "cols", "rows", "data", "okText", "dismissText", "disabled", "clickable", "hideEmptyCols", "title", "visible", "value", "needBottomOffset", "onDismiss", "onOk", "onChange", "maskClosable", "onHide", "onPickerChange", "touchToStop", "gestureOutOfControl"];
+
+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; }
+
+var getInitialValue = function getInitialValue(value, data, cascade) {
+  if (value && value.length) {
+    return value;
+  }
+
+  var computedValue = [];
+
+  if (!cascade) {
+    if (!(data[0] instanceof Array)) {
+      var _data$;
+
+      return (_data$ = data[0]) != null && _data$.value ? [data[0].value] : [];
+    }
+
+    data.map(function (column) {
+      computedValue.push(typeof column[0] === 'object' ? column[0].value : column[0]);
+    });
+  } else {
+    var cascadePickerData = data;
+
+    if (!cascadePickerData || !cascadePickerData.length) {
+      return computedValue;
+    }
+
+    computedValue.push(cascadePickerData[0].value);
+    var traverse = cascadePickerData[0].children;
+
+    while (traverse) {
+      computedValue.push(traverse[0].value);
+      traverse = traverse[0].children;
+    }
+  }
+
+  return computedValue;
+};
+/**
+ * 选择器组件，形式是弹起的浮层。
+ * @en The selector component, in the form of a popup layer.
+ * @type 数据输入
+ * @type_en Data Entry
+ * @name 选择器
+ * @name_en Picker
+ */
+
+
+var Picker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var className = props.className,
+      itemStyle = props.itemStyle,
+      _props$cascade = props.cascade,
+      cascade = _props$cascade === void 0 ? true : _props$cascade,
+      _props$cols = props.cols,
+      cols = _props$cols === void 0 ? 3 : _props$cols,
+      _props$rows = props.rows,
+      rows = _props$rows === void 0 ? 5 : _props$rows,
+      data = props.data,
+      okText = props.okText,
+      dismissText = props.dismissText,
+      _props$disabled = props.disabled,
+      disabled = _props$disabled === void 0 ? false : _props$disabled,
+      _props$clickable = props.clickable,
+      clickable = _props$clickable === void 0 ? true : _props$clickable,
+      _props$hideEmptyCols = props.hideEmptyCols,
+      hideEmptyCols = _props$hideEmptyCols === void 0 ? false : _props$hideEmptyCols,
+      _props$title = props.title,
+      title = _props$title === void 0 ? '' : _props$title,
+      _props$visible = props.visible,
+      visible = _props$visible === void 0 ? false : _props$visible,
+      value = props.value,
+      _props$needBottomOffs = props.needBottomOffset,
+      needBottomOffset = _props$needBottomOffs === void 0 ? false : _props$needBottomOffs,
+      onDismiss = props.onDismiss,
+      onOk = props.onOk,
+      onChange = props.onChange,
+      _props$maskClosable = props.maskClosable,
+      maskClosable = _props$maskClosable === void 0 ? false : _props$maskClosable,
+      onHide = props.onHide,
+      onPickerChange = props.onPickerChange,
+      touchToStop = props.touchToStop,
+      _props$gestureOutOfCo = props.gestureOutOfControl,
+      gestureOutOfControl = _props$gestureOutOfCo === void 0 ? true : _props$gestureOutOfCo,
+      otherProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+
+  var _useState = (0, _react.useState)(getInitialValue(value, data, cascade)),
+      scrollValue = _useState[0],
+      setScrollValue = _useState[1];
+
+  var domRef = (0, _react.useRef)(null);
+  var pickerViewRef = (0, _react.useRef)(null);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      dom: domRef.current,
+      getCellMovingStatus: function getCellMovingStatus() {
+        var _pickerViewRef$curren;
+
+        return ((_pickerViewRef$curren = pickerViewRef.current) == null ? void 0 : _pickerViewRef$curren.getCellMovingStatus()) || [];
+      },
+      getAllColumnValues: function getAllColumnValues() {
+        var _pickerViewRef$curren2;
+
+        return ((_pickerViewRef$curren2 = pickerViewRef.current) == null ? void 0 : _pickerViewRef$curren2.getAllColumnValues()) || [];
+      },
+      getColumnValue: function getColumnValue(index) {
+        var _pickerViewRef$curren3;
+
+        return ((_pickerViewRef$curren3 = pickerViewRef.current) == null ? void 0 : _pickerViewRef$curren3.getColumnValue(index)) || '';
+      },
+      updateLayout: function updateLayout() {
+        var _pickerViewRef$curren4;
+
+        return (_pickerViewRef$curren4 = pickerViewRef.current) == null ? void 0 : _pickerViewRef$curren4.updateLayout();
+      },
+      scrollToCurrentIndex: function scrollToCurrentIndex() {
+        var _pickerViewRef$curren5;
+
+        return (_pickerViewRef$curren5 = pickerViewRef.current) == null ? void 0 : _pickerViewRef$curren5.scrollToCurrentIndex();
+      }
+    };
+  });
+
+  function handleDismiss() {
+    if (onDismiss) {
+      onDismiss();
+    }
+
+    if (onHide) {
+      onHide('dismiss');
+    }
+  }
+
+  var handleConfirm = function handleConfirm() {
+    var _pickerViewRef$curren6;
+
+    (_pickerViewRef$curren6 = pickerViewRef.current) == null ? void 0 : _pickerViewRef$curren6.scrollToCurrentIndex();
+    (0, _mobileUtils.nextTick)(function () {
+      var _pickerViewRef$curren7;
+
+      var val = ((_pickerViewRef$curren7 = pickerViewRef.current) == null ? void 0 : _pickerViewRef$curren7.getAllColumnValues()) || scrollValue;
+
+      if (onOk) {
+        onOk(val);
+      }
+
+      if (onChange) {
+        onChange(val);
+      }
+
+      if (onHide) {
+        onHide('confirm');
+      }
+    });
+  };
+
+  (0, _react.useEffect)(function () {
+    setScrollValue(value);
+  }, [value, setScrollValue]);
+  (0, _helpers.useListenResize)(updateLayoutByVisible, [visible]); // 每次visible从false变为true时需要重新设置scrollValue的值为当前value的值（初始值）
+
+  function updateLayoutByVisible() {
+    if (visible && pickerViewRef.current) {
+      pickerViewRef.current.updateLayout();
+    }
+  }
+
+  (0, _react.useEffect)(function () {
+    updateLayoutByVisible();
+  }, [visible]);
+  return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref) {
+    var prefixCls = _ref.prefixCls,
+        locale = _ref.locale;
+    return /*#__PURE__*/_react.default.createElement(_popup.default, (0, _extends2.default)({
+      visible: visible,
+      className: (0, _mobileUtils.cls)(className, prefixCls + "-picker all-border-box"),
+      close: function close() {
+        return onHide == null ? void 0 : onHide('mask');
+      },
+      direction: "bottom",
+      maskClosable: maskClosable,
+      needBottomOffset: needBottomOffset,
+      gestureOutOfControl: gestureOutOfControl
+    }, otherProps), /*#__PURE__*/_react.default.createElement("div", {
+      className: prefixCls + "-picker-wrap",
+      ref: domRef
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: prefixCls + "-picker-header"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: prefixCls + "-picker-header-btn left",
+      onClick: handleDismiss
+    }, dismissText || (locale == null ? void 0 : locale.Picker.cancelText)), /*#__PURE__*/_react.default.createElement("div", {
+      className: prefixCls + "-picker-header-title"
+    }, title), /*#__PURE__*/_react.default.createElement("div", {
+      className: prefixCls + "-picker-header-btn right",
+      onClick: handleConfirm
+    }, okText || (locale == null ? void 0 : locale.Picker.okText))), /*#__PURE__*/_react.default.createElement(_pickerView.default, {
+      ref: pickerViewRef,
+      data: data,
+      cascade: cascade,
+      cols: cols,
+      rows: rows,
+      disabled: disabled,
+      value: getInitialValue(value, data, cascade),
+      onPickerChange: onPickerChange,
+      itemStyle: itemStyle,
+      clickable: clickable,
+      hideEmptyCols: hideEmptyCols,
+      touchToStop: touchToStop
+    })));
+  });
+});
+var _default = Picker;
+exports.default = _default;

package/cjs/picker/style/css/index.css

@@ -0,0 +1,46 @@
+.arco-picker .arco-popup-content {
+  box-shadow:  0 2PX 8PX rgba(0, 0, 0, 0.15) ;
+  border-top-left-radius:  0.08rem ;
+  border-top-right-radius:  0.08rem ;
+}
+.arco-picker-header {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+          justify-content: space-between;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+  background-color:  #ffffff ;
+  height:  1.08rem ;
+  border-top-left-radius:  0.08rem ;
+  border-top-right-radius:  0.08rem ;
+}
+.arco-picker-header-title {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+          flex: 1;
+  text-align: center;
+  font-size:  0.32rem ;
+  padding:  0 1.2rem ;
+  color:  #1d2129 ;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.arco-picker-header-btn {
+  position: absolute;
+  font-size:  0.3rem ;
+  padding:  0.32rem ;
+}
+.arco-picker-header-btn.left {
+  left: 0;
+  color:  #165dff ;
+}
+.arco-picker-header-btn.right {
+  right: 0;
+  color:  #165dff ;
+}

package/cjs/picker/style/css/index.d.ts

@@ -0,0 +1,4 @@
+import '../../../../style/css/public.css';
+import '../../../popup/style/css';
+import '../../../picker-view/style/css';
+import './index.css';

package/cjs/picker/style/css/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+require("../../../../style/css/public.css");
+
+require("../../../popup/style/css");
+
+require("../../../picker-view/style/css");
+
+require("./index.css");

package/cjs/picker/style/index.d.ts

@@ -0,0 +1,4 @@
+import '../../../style/public.less';
+import '../../popup/style';
+import '../../picker-view/style';
+import './index.less';

package/cjs/picker/style/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+require("../../../style/public.less");
+
+require("../../popup/style");
+
+require("../../picker-view/style");
+
+require("./index.less");

package/cjs/picker/style/index.less

@@ -0,0 +1,46 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-picker {
+
+    .@{prefix}-popup-content {
+        .use-var(box-shadow, picker-wrapper-shadow);
+        .use-var(border-top-left-radius, picker-wrapper-border-radius);
+        .use-var(border-top-right-radius, picker-wrapper-border-radius);
+    }
+
+    &-header {
+        position: relative;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .use-var(background-color, picker-header-background);
+        .use-var(height, picker-header-height);
+        .use-var(border-top-left-radius, picker-wrapper-border-radius);
+        .use-var(border-top-right-radius, picker-wrapper-border-radius);
+
+        &-title {
+            flex: 1;
+            text-align: center;
+            .use-var(font-size, picker-title-font-size);
+            .use-var(padding, picker-title-padding);
+            .use-var(color, font-color);
+            .text-overflow();
+        }
+
+        &-btn {
+            position: absolute;
+            .use-var(font-size, picker-button-font-size);
+            .use-var(padding, picker-button-padding);
+
+            &.left {
+                left: 0;
+                .use-var(color, picker-left-btn-color);
+            }
+
+            &.right {
+                right: 0;
+                .use-var(color, picker-right-btn-color);
+            }
+        }
+    }
+}

package/cjs/picker/type.d.ts

@@ -0,0 +1,126 @@
+import React from 'react';
+import { PickerData, ValueType } from '../picker-view/type';
+import { PopupProps } from '../popup';
+export declare type DataType = PickerData[] | PickerData[][] | ValueType[][];
+export interface PickerProps extends Omit<PopupProps, 'visible' | 'close' | 'children' | 'getScrollContainer' | 'orientationDirection' | 'direction' | 'maskClosable'> {
+    /**
+     * 数据源，非级联时data数组的长度决定picker列数，级联时以cols决定 pick列数
+     * @en Data source, the length of the data list determines the number of picker columns when not cascading, and is determined by cols when cascading
+     */
+    data: PickerData[] | PickerData[][] | ValueType[][];
+    /**
+     * 是否联动
+     * @en Whether to cascade
+     * @default true
+     */
+    cascade?: boolean;
+    /**
+     * 列数(最大为5；cascade=true时才使用)
+     * @en Number of columns (maximum 5; only used when cascade=true)
+     * @default 3
+     */
+    cols?: number;
+    /**
+     * 行数(一列可选项的行数)，必须是奇数，最小为3个
+     * @en The number of rows (the number of rows in a column of optional items), must be an odd number, the minimum is 3
+     * @default 5
+     */
+    rows?: number;
+    /**
+     * 是否不可用
+     * @en Whether t be disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * 值, 格式是[value1, value2, value3], 对应数据源的相应级层value，如果不传默认选每一列的第一个值
+     * @en Value, the format is [value1, value2, value3], corresponding to the corresponding level value of the data source, if not passed, the first value of each column is selected by default
+     */
+    value?: ValueType[];
+    /**
+     * 点击遮罩层或取消、确定按钮的隐藏回调
+     * @en Callback for clicking on mask layer or cancel button, OK button
+     */
+    onHide?: (scene?: string) => void;
+    /**
+     * 选中后的回调
+     * @en Callback after selection
+     */
+    onChange?: (selectedValue: ValueType[]) => void;
+    /**
+     * 每列数据选择变化后的回调函数
+     * @en The callback after each column data selection changes
+     */
+    onPickerChange?: (value: ValueType[], index: number) => void;
+    /**
+     * 每列样式
+     * @en Stylesheet per column
+     */
+    itemStyle?: React.CSSProperties;
+    /**
+     * 是否展示选择器
+     * @en whether to show the picker
+     * @default false
+     */
+    visible?: boolean;
+    /**
+     * 弹窗确认已选值的文案
+     * @en Text of confirmed selected value of the popup
+     * @default "确定"
+     * @default_en "OK"
+     */
+    okText?: string;
+    /**
+     * 弹窗取消的文案
+     * @en Popup canceled text
+     * @default "取消"
+     * @default_en "Cancel"
+     */
+    dismissText?: string;
+    /**
+     * 点击选中时执行的回调
+     * @en Callback when clicking on Ok
+     */
+    onOk?: (value: ValueType[]) => void;
+    /**
+     * 点击取消时执行的回调
+     * @en Callback when clicking to cancel
+     */
+    onDismiss?: () => void;
+    /**
+     * 是否可通过点击操作选择内容
+     * @en Whether content can be selected by clicking
+     * @default true
+     */
+    clickable?: boolean;
+    /**
+     * 是否隐藏无数据的空列，常用于级联选择
+     * @en Whether to hide empty columns without data, often used for cascading selection
+     * @default false
+     */
+    hideEmptyCols?: boolean;
+    /**
+     * 选择器标题
+     * @en Picker title
+     * @default ""
+     */
+    title?: string;
+    /**
+     * 点击蒙层是否关闭菜单
+     * @en Whether to click the mask to close the menu
+     * @default false
+     */
+    maskClosable?: boolean;
+    /**
+     * 是否通过长按停止滑动，传入数字 x 表示触摸超过 x 毫秒算长按，传 true 表示 x=100，长按事件与 click 事件互斥
+     * @en Whether to stop sliding by long-pressing, inputing in the number x means that the touch exceeds x milliseconds to count as long-pressing, inputing true means that x=100, the long-press event and the click event are mutually exclusive
+     * @default false
+     */
+    touchToStop?: boolean | number;
+    /**
+     * 是否禁用滚动容器手势判断，禁用后交给业务方自己判断
+     * @en Whether to disable the scrolling container gesture judgment, leave it to users to judge
+     * @default true
+     */
+    gestureOutOfControl?: boolean;
+}

package/cjs/picker/type.js

@@ -0,0 +1,3 @@
+"use strict";
+
+exports.__esModule = true;

package/cjs/picker-view/components/cascader.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { PickerData, ValueType, PickerCellMovingStatus } from '../type';
+export interface CascaderProps {
+    prefixCls: string;
+    cols: number;
+    itemStyle?: React.CSSProperties;
+    data: PickerData[];
+    clickable: boolean;
+    disabled: boolean;
+    itemHeight: number;
+    wrapperHeight: number;
+    selectedValue: ValueType[];
+    rows?: number;
+    hideEmptyCols?: boolean;
+    onValueChange?: (value: ValueType[], index: number) => void;
+    onPickerChange?: (value: ValueType[], index: number) => void;
+    touchToStop?: boolean | number;
+}
+export interface CascaderRef {
+    getCellMovingStatus: () => PickerCellMovingStatus[];
+    scrollToCurrentIndex: () => void;
+}
+declare const Cascader: React.ForwardRefExoticComponent<CascaderProps & React.RefAttributes<CascaderRef>>;
+export default Cascader;

package/cjs/picker-view/components/cascader.js

@@ -0,0 +1,121 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _mobileUtils = require("@arco-design/mobile-utils");
+
+var _multiPicker = _interopRequireDefault(require("./multi-picker"));
+
+var _pickerCell = _interopRequireDefault(require("./picker-cell"));
+
+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; }
+
+var Cascader = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var prefixCls = props.prefixCls,
+      itemStyle = props.itemStyle,
+      cols = props.cols,
+      data = props.data,
+      disabled = props.disabled,
+      clickable = props.clickable,
+      itemHeight = props.itemHeight,
+      wrapperHeight = props.wrapperHeight,
+      rows = props.rows,
+      hideEmptyCols = props.hideEmptyCols,
+      onPickerChange = props.onPickerChange,
+      onValueChange = props.onValueChange,
+      _props$selectedValue = props.selectedValue,
+      selectedValue = _props$selectedValue === void 0 ? [] : _props$selectedValue,
+      touchToStop = props.touchToStop;
+  var pickerCellsRef = (0, _react.useRef)([]);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      getCellMovingStatus: getCellMovingStatus,
+      scrollToCurrentIndex: scrollToCurrentIndex
+    };
+  });
+
+  function getCellMovingStatus() {
+    return pickerCellsRef.current.map(function (cell) {
+      return cell.movingStatus;
+    });
+  }
+
+  function scrollToCurrentIndex() {
+    pickerCellsRef.current.forEach(function (cell) {
+      return cell.scrollToCurrentIndex();
+    });
+  }
+
+  function _onValueChange(value, index) {
+    var children = (0, _mobileUtils.arrayTreeFilter)(data, function (item, level) {
+      return level <= index && item.value === value[level];
+    });
+    var child = children[index];
+    var i;
+
+    for (i = index + 1; i < cols && child && child.children; i++) {
+      child = child.children[0];
+      value[i] = child.value;
+    }
+
+    value.length = i;
+    onValueChange == null ? void 0 : onValueChange(value, index);
+  }
+
+  function _formatData() {
+    var childrenTree = (0, _mobileUtils.arrayTreeFilter)(data, function (item, level) {
+      return item.value === selectedValue[level];
+    }).map(function (item) {
+      return item.children;
+    });
+    var needPad = cols - childrenTree.length;
+
+    if (needPad > 0) {
+      for (var i = 0; i < needPad; i++) {
+        childrenTree.push([]);
+      }
+    }
+
+    childrenTree.length = cols - 1;
+    childrenTree.unshift(data);
+    return childrenTree;
+  }
+
+  var formatData = (0, _react.useMemo)(function () {
+    return _formatData();
+  }, [data, selectedValue]);
+  return /*#__PURE__*/_react.default.createElement(_multiPicker.default, {
+    prefixCls: prefixCls + "-picker",
+    data: formatData,
+    selectedValue: selectedValue,
+    itemHeight: itemHeight,
+    onValueChange: _onValueChange,
+    onPickerChange: onPickerChange
+  }, formatData.map(function (item, index) {
+    return /*#__PURE__*/_react.default.createElement(_pickerCell.default, {
+      key: index + "_picker_cell_cascader",
+      data: item || [],
+      style: itemStyle,
+      prefixCls: prefixCls + "-picker",
+      clickable: clickable,
+      itemHeight: itemHeight,
+      wrapperHeight: wrapperHeight,
+      disabled: disabled,
+      rows: rows,
+      hideEmptyCols: hideEmptyCols,
+      ref: function ref(cellRef) {
+        return cellRef && (pickerCellsRef.current[index] = cellRef);
+      },
+      touchToStop: touchToStop
+    });
+  }));
+});
+var _default = Cascader;
+exports.default = _default;

package/cjs/picker-view/components/multi-picker.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { PickerData, ValueType } from '../type';
+export interface MultiPickerProps {
+    prefixCls: string;
+    data: PickerData[][];
+    selectedValue: ValueType[];
+    children: any;
+    itemHeight: number;
+    onValueChange: (value: ValueType[], index: number) => void;
+    onPickerChange?: (value: ValueType[], index: number) => void;
+}
+export default function MultiPicker(props: MultiPickerProps): JSX.Element;