@arco-design/mobile-react 2.25.4 → 2.27.0

package/cjs/picker/index.js

@@ -1,6 +1,7 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 var _exportNames = {
   MultiPicker: true,
@@ -8,18 +9,29 @@ var _exportNames = {
   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;
@@ -27,74 +39,52 @@ Object.keys(_type).forEach(function (key) {
   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;
-};
+
 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];
+      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)(value),
+      scrollValue = _useState[0],
+      setScrollValue = _useState[1];
+
   var domRef = (0, _react.useRef)(null);
   var pickerViewRef = (0, _react.useRef)(null);
   (0, _react.useImperativeHandle)(ref, function () {
@@ -102,68 +92,82 @@ var Picker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       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;
+
+      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]);
+  (0, _helpers.useListenResize)(updateLayoutByVisible, [visible]); // 每次visible从false变为true时需要重新设置scrollValue的值为当前value的值（初始值）
 
-  // 每次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;
+        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"),
@@ -194,7 +198,7 @@ var Picker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       cols: cols,
       rows: rows,
       disabled: disabled,
-      value: getInitialValue(value, data, cascade),
+      value: value,
       onPickerChange: onPickerChange,
       itemStyle: itemStyle,
       clickable: clickable,
@@ -203,7 +207,6 @@ var Picker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     })));
   });
 });
-
 /**
  * 选择器组件，形式是弹起的浮层。
  * @en The selector component, in the form of a popup layer.
@@ -213,5 +216,7 @@ var Picker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
  * @name_en Picker
  * @displayName Picker
  */
+
 var _default = (0, _mobileUtils.componentWrapper)(Picker, 'Picker');
+
 exports.default = _default;

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

@@ -1,6 +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.js

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

package/cjs/picker/type.d.ts

@@ -51,7 +51,7 @@ export interface PickerProps extends Omit<PopupProps, 'visible' | 'close' | 'chi
      * 每列数据选择变化后的回调函数
      * @en The callback after each column data selection changes
      */
-    onPickerChange?: (value: ValueType[], index: number) => void;
+    onPickerChange?: (value: ValueType[], index: number, data: PickerData[]) => void;
     /**
      * 每列样式
      * @en Stylesheet per column

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

@@ -9,11 +9,10 @@ export interface CascaderProps {
     disabled: boolean;
     itemHeight: number;
     wrapperHeight: number;
-    selectedValue: ValueType[];
+    selectedValue?: ValueType[];
     rows?: number;
     hideEmptyCols?: boolean;
-    onValueChange?: (value: ValueType[], index: number) => void;
-    onPickerChange?: (value: ValueType[], index: number) => void;
+    onValueChange?: (value: ValueType[], index: number, data: PickerData[]) => void;
     touchToStop?: boolean | number;
 }
 export interface CascaderRef {

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

@@ -1,30 +1,37 @@
 "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;
+      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,
+      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 {
@@ -32,45 +39,58 @@ var Cascader = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       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) {
+
+  function _onValueChange(value, index, newData) {
     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;
+      newData[i] = child;
     }
+
     value.length = i;
-    onValueChange == null ? void 0 : onValueChange(value, index);
+    newData.length = i;
+    onValueChange == null ? void 0 : onValueChange(value, index, newData);
   }
+
   function _formatData() {
     var childrenTree = (0, _mobileUtils.arrayTreeFilter)(data, function (item, level) {
-      return item.value === selectedValue[level];
+      return item.value === (selectedValue == null ? void 0 : selectedValue[level]);
+    }, {
+      fallbackChildIndex: 0
     }).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]);
@@ -79,8 +99,7 @@ var Cascader = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     data: formatData,
     selectedValue: selectedValue,
     itemHeight: itemHeight,
-    onValueChange: _onValueChange,
-    onPickerChange: onPickerChange
+    onValueChange: _onValueChange
   }, formatData.map(function (item, index) {
     return /*#__PURE__*/_react.default.createElement(_pickerCell.default, {
       key: index + "_picker_cell_cascader",

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

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

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

@@ -1,61 +1,71 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.default = MultiPicker;
+
 var _react = _interopRequireDefault(require("react"));
+
 function MultiPicker(props) {
   var prefixCls = props.prefixCls,
-    onValueChange = props.onValueChange,
-    onPickerChange = props.onPickerChange,
-    children = props.children,
-    itemHeight = props.itemHeight,
-    selectedValue = props.selectedValue,
-    data = props.data;
-  function getValue() {
-    if (selectedValue && selectedValue.length) {
-      return selectedValue;
-    }
-    if (data) {
-      return data.map(function (item) {
-        return item && item[0] && item[0].value;
-      });
-    }
-    if (!children) {
-      return [];
-    }
-    return _react.default.Children.map(children, function (child) {
-      var childrenArray = _react.default.Children.toArray(child.children || child.props.children);
-      return childrenArray && childrenArray[0] && childrenArray[0].props.value;
+      onValueChange = props.onValueChange,
+      children = props.children,
+      itemHeight = props.itemHeight,
+      selectedValue = props.selectedValue,
+      data = props.data;
+
+  function getCurrentData() {
+    return (data || []).map(function (item, itemIndex) {
+      var curSelected = selectedValue == null ? void 0 : selectedValue[itemIndex];
+      var cur = curSelected ? (item || []).find(function (i) {
+        return i.value === curSelected;
+      }) : undefined;
+      return cur || (item == null ? void 0 : item[0]);
     });
   }
-  function onChange(index, value, callback) {
-    var newValue = getValue().concat();
+
+  function onChange(_ref) {
+    var index = _ref.index,
+        value = _ref.value,
+        changedData = _ref.changedData,
+        callback = _ref.callback;
+    var newData = getCurrentData().concat();
+    newData[index] = changedData;
+    var newValue = newData.map(function (d) {
+      return d == null ? void 0 : d.value;
+    });
     newValue[index] = value;
+
     if (callback) {
-      callback(newValue, index);
+      callback(newValue, index, newData);
     }
   }
-  function _onValueChange(value, index) {
-    onChange(index, value, onValueChange);
-  }
-  function _onScrollChange(value, index) {
-    onChange(index, value, onPickerChange);
+
+  function _onValueChange(value, index, changedData) {
+    onChange({
+      index: index,
+      value: value,
+      callback: onValueChange,
+      changedData: changedData
+    });
   }
+
   function renderChild() {
-    var value = getValue();
+    var curData = getCurrentData();
+    var value = curData.map(function (d) {
+      return d == null ? void 0 : d.value;
+    });
     return _react.default.Children.map(children, function (col, index) {
       return /*#__PURE__*/_react.default.cloneElement(col, {
-        onScrollChange: function onScrollChange(val) {
-          return _onScrollChange(val, index);
-        },
-        onValueChange: function onValueChange(val) {
-          return _onValueChange(val, index);
+        onValueChange: function onValueChange(val, changedData) {
+          return _onValueChange(val, index, changedData);
         },
         selectedValue: value[index]
       });
     });
   }
+
   return /*#__PURE__*/_react.default.createElement("div", {
     className: prefixCls + "-multi",
     style: {

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

@@ -8,7 +8,7 @@ export interface PickerCellProps {
     itemHeight: number;
     wrapperHeight: number;
     selectedValue?: ValueType;
-    onValueChange?: (value: ValueType) => void;
+    onValueChange?: (value: ValueType, data: PickerData) => void;
     disabled: boolean;
     hideEmptyCols?: boolean;
     /**