@arco-design/mobile-react 2.24.2 → 2.25.0

package/esm/picker/index.js

@@ -2,100 +2,79 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 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"];
 import React, { useEffect, useState, useRef, forwardRef, useImperativeHandle } from 'react';
-import { cls, nextTick } from '@arco-design/mobile-utils';
+import { cls, componentWrapper, nextTick } from '@arco-design/mobile-utils';
 import { ContextLayout } from '../context-provider';
 import Popup from '../popup';
 import PickerView from '../picker-view';
 import { useListenResize } from '../_helpers';
 export * from './type';
 export { MultiPicker, PickerCell, Cascader } from '../picker-view';
-
 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__*/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 = _objectWithoutPropertiesLoose(props, _excluded);
-
+    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 = _objectWithoutPropertiesLoose(props, _excluded);
   var _useState = useState(getInitialValue(value, data, cascade)),
-      scrollValue = _useState[0],
-      setScrollValue = _useState[1];
-
+    scrollValue = _useState[0],
+    setScrollValue = _useState[1];
   var domRef = useRef(null);
   var pickerViewRef = useRef(null);
   useImperativeHandle(ref, function () {
@@ -103,82 +82,68 @@ var Picker = /*#__PURE__*/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();
     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');
       }
     });
   };
-
   useEffect(function () {
     setScrollValue(value);
   }, [value, setScrollValue]);
-  useListenResize(updateLayoutByVisible, [visible]); // 每次visible从false变为true时需要重新设置scrollValue的值为当前value的值（初始值）
+  useListenResize(updateLayoutByVisible, [visible]);
 
+  // 每次visible从false变为true时需要重新设置scrollValue的值为当前value的值（初始值）
   function updateLayoutByVisible() {
     if (visible && pickerViewRef.current) {
       pickerViewRef.current.updateLayout();
     }
   }
-
   useEffect(function () {
     updateLayoutByVisible();
   }, [visible]);
   return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref) {
     var prefixCls = _ref.prefixCls,
-        locale = _ref.locale;
+      locale = _ref.locale;
     return /*#__PURE__*/React.createElement(Popup, _extends({
       visible: visible,
       className: cls(className, prefixCls + "-picker all-border-box"),
@@ -218,4 +183,14 @@ var Picker = /*#__PURE__*/forwardRef(function (props, ref) {
     })));
   });
 });
-export default Picker;
+
+/**
+ * 选择器组件，形式是弹起的浮层。
+ * @en The selector component, in the form of a popup layer.
+ * @type 数据录入
+ * @type_en Data Entry
+ * @name 选择器
+ * @name_en Picker
+ * @displayName Picker
+ */
+export default componentWrapper(Picker, 'Picker');

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

@@ -4,20 +4,20 @@ import MultiPicker from './multi-picker';
 import PickerCell from './picker-cell';
 var Cascader = /*#__PURE__*/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,
+    onPickerChange = props.onPickerChange,
+    onValueChange = props.onValueChange,
+    _props$selectedValue = props.selectedValue,
+    selectedValue = _props$selectedValue === void 0 ? [] : _props$selectedValue,
+    touchToStop = props.touchToStop;
   var pickerCellsRef = useRef([]);
   useImperativeHandle(ref, function () {
     return {
@@ -25,35 +25,29 @@ var Cascader = /*#__PURE__*/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) {
     var children = 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 = arrayTreeFilter(data, function (item, level) {
       return item.value === selectedValue[level];
@@ -61,18 +55,15 @@ var Cascader = /*#__PURE__*/forwardRef(function (props, ref) {
       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 = useMemo(function () {
     return _formatData();
   }, [data, selectedValue]);

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

@@ -1,51 +1,42 @@
 import React from 'react';
 export default 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;
-
+    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.Children.map(children, function (child) {
       var childrenArray = React.Children.toArray(child.children || child.props.children);
       return childrenArray && childrenArray[0] && childrenArray[0].props.value;
     });
   }
-
   function onChange(index, value, callback) {
     var newValue = getValue().concat();
     newValue[index] = value;
-
     if (callback) {
       callback(newValue, index);
     }
   }
-
   function _onValueChange(value, index) {
     onChange(index, value, onValueChange);
   }
-
   function _onScrollChange(value, index) {
     onChange(index, value, onPickerChange);
   }
-
   function renderChild() {
     var value = getValue();
     return React.Children.map(children, function (col, index) {
@@ -60,7 +51,6 @@ export default function MultiPicker(props) {
       });
     });
   }
-
   return /*#__PURE__*/React.createElement("div", {
     className: prefixCls + "-multi",
     style: {