@arco-design/mobile-react 2.25.4 → 2.27.0

package/esm/picker-view/index.js

@@ -5,53 +5,60 @@ import { ContextLayout } from '../context-provider';
 import MultiPicker from '../picker-view/components/multi-picker';
 import PickerCell from '../picker-view/components/picker-cell';
 import Cascader from '../picker-view/components/cascader';
-import { useMountedState } from '../_helpers';
+import { useLatestRef, useMountedState } from '../_helpers';
 export * from './type';
 export { MultiPicker, PickerCell, Cascader };
 var PickerView = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$className = props.className,
-    className = _props$className === void 0 ? '' : _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,
-    _props$disabled = props.disabled,
-    disabled = _props$disabled === void 0 ? false : _props$disabled,
-    _props$clickable = props.clickable,
-    clickable = _props$clickable === void 0 ? true : _props$clickable,
-    value = props.value,
-    _props$hideEmptyCols = props.hideEmptyCols,
-    hideEmptyCols = _props$hideEmptyCols === void 0 ? false : _props$hideEmptyCols,
-    onPickerChange = props.onPickerChange,
-    _props$touchToStop = props.touchToStop,
-    touchToStop = _props$touchToStop === void 0 ? false : _props$touchToStop;
+      className = _props$className === void 0 ? '' : _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,
+      _props$disabled = props.disabled,
+      disabled = _props$disabled === void 0 ? false : _props$disabled,
+      _props$clickable = props.clickable,
+      clickable = _props$clickable === void 0 ? true : _props$clickable,
+      value = props.value,
+      _props$hideEmptyCols = props.hideEmptyCols,
+      hideEmptyCols = _props$hideEmptyCols === void 0 ? false : _props$hideEmptyCols,
+      onPickerChange = props.onPickerChange,
+      _props$touchToStop = props.touchToStop,
+      touchToStop = _props$touchToStop === void 0 ? false : _props$touchToStop;
+
   var _useState = useState(0),
-    itemHeight = _useState[0],
-    setItemHeight = _useState[1];
+      itemHeight = _useState[0],
+      setItemHeight = _useState[1];
+
   var _useState2 = useState(0),
-    wrapperHeight = _useState2[0],
-    setWrapperHeight = _useState2[1];
+      wrapperHeight = _useState2[0],
+      setWrapperHeight = _useState2[1];
+
   var _useMountedState = useMountedState(value),
-    scrollValue = _useMountedState[0],
-    setScrollValue = _useMountedState[1];
+      scrollValue = _useMountedState[0],
+      setScrollValue = _useMountedState[1];
+
   var wrapperRef = useRef(null);
   var domRef = useRef(null);
   var barRef = useRef(null);
-  var scrollValueRef = useRef(value);
+  var scrollValueRef = useLatestRef(scrollValue);
   var pickerCellsRef = useRef([]);
   var cascaderRef = useRef(null);
   var innerData = useMemo(function () {
     var newData;
+
     var isArray = function isArray(dt) {
       return dt ? Array.isArray(dt[0]) : false;
     };
+
     var isStrOrNum = function isStrOrNum(dt) {
       return typeof dt[0][0] === 'string' || typeof dt[0][0] === 'number';
     };
+
     if (isArray(data)) {
       if (isStrOrNum(data)) {
         newData = data.map(function (item) {
@@ -68,36 +75,45 @@ var PickerView = /*#__PURE__*/forwardRef(function (props, ref) {
     } else {
       newData = [data];
     }
+
     return newData;
   }, [data]);
-  useEffect(function () {
-    scrollValueRef.current = scrollValue;
-  }, [scrollValue]);
+
   var getAllColumnValues = function getAllColumnValues() {
-    return scrollValueRef.current;
+    return scrollValueRef.current || [];
   };
+
   function getColumnValue(index) {
+    var _scrollValueRef$curre;
+
     if (index === void 0) {
       index = 0;
     }
-    return scrollValueRef.current[index];
+
+    return (_scrollValueRef$curre = scrollValueRef.current) == null ? void 0 : _scrollValueRef$curre[index];
   }
+
   function getCellMovingStatus() {
     var _cascaderRef$current;
+
     return cascade ? ((_cascaderRef$current = cascaderRef.current) == null ? void 0 : _cascaderRef$current.getCellMovingStatus()) || [] : pickerCellsRef.current.map(function (cell) {
       return cell.movingStatus;
     });
   }
+
   function scrollToCurrentIndex() {
     if (cascade) {
       var _cascaderRef$current2;
+
       (_cascaderRef$current2 = cascaderRef.current) == null ? void 0 : _cascaderRef$current2.scrollToCurrentIndex();
       return;
     }
+
     pickerCellsRef.current.forEach(function (cell) {
       return cell.scrollToCurrentIndex();
     });
   }
+
   useImperativeHandle(ref, function () {
     return {
       dom: domRef.current,
@@ -109,44 +125,47 @@ var PickerView = /*#__PURE__*/forwardRef(function (props, ref) {
       scrollToCurrentIndex: scrollToCurrentIndex
     };
   });
-  function _onPickerChange(val, index) {
-    setScrollValue(val);
-    if (onPickerChange) {
-      onPickerChange(val, index);
-    }
-  }
-  function _onValueChange(val, index) {
+
+  function _onValueChange(val, index, newData) {
     setScrollValue(val);
+
     if (onPickerChange) {
-      onPickerChange(val, index);
+      onPickerChange(val, index, newData);
     }
   }
+
   useEffect(function () {
     setScrollValue(value);
-  }, [value, setScrollValue]);
+  }, [value]);
   var updateWrapperHeight = useCallback(function () {
     if (wrapperRef && wrapperRef.current) {
       setWrapperHeight(wrapperRef.current.offsetHeight);
     }
   }, [wrapperRef, setWrapperHeight]);
+
   var updateItemHeight = function updateItemHeight() {
     if (barRef.current) {
       setItemHeight(barRef.current.getBoundingClientRect().height);
     }
   };
+
   useEffect(function () {
     updateLayout();
   }, []);
+
   function updateLayout() {
     updateWrapperHeight();
     updateItemHeight();
   }
+
   function resetValue() {
     setScrollValue(value);
   }
+
   var newItemStyle = _extends({
     height: itemHeight + "px"
   }, itemStyle);
+
   return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref) {
     var prefixCls = _ref.prefixCls;
     return /*#__PURE__*/React.createElement("div", {
@@ -162,7 +181,6 @@ var PickerView = /*#__PURE__*/forwardRef(function (props, ref) {
       data: data,
       selectedValue: scrollValue,
       onValueChange: _onValueChange,
-      onPickerChange: _onPickerChange,
       clickable: clickable,
       itemHeight: itemHeight,
       wrapperHeight: wrapperHeight,
@@ -176,8 +194,7 @@ var PickerView = /*#__PURE__*/forwardRef(function (props, ref) {
       data: innerData,
       itemHeight: itemHeight,
       selectedValue: scrollValue,
-      onValueChange: _onValueChange,
-      onPickerChange: _onPickerChange
+      onValueChange: _onValueChange
     }, innerData.map(function (item, index) {
       return /*#__PURE__*/React.createElement(PickerCell, {
         key: index + "_picker_cell_normal",
@@ -216,4 +233,5 @@ var PickerView = /*#__PURE__*/forwardRef(function (props, ref) {
  * @name_en PickerView
  * @displayName PickerView
  */
+
 export default componentWrapper(PickerView, 'PickerView');

package/esm/picker-view/type.d.ts

@@ -52,12 +52,12 @@ export interface PickerViewProps {
      * 值, 格式是[value1, value2, value3], 对应数据源的相应级层value
      * @en Value, the format is [value1, value2, value3], corresponding to the corresponding level value of the data source
      */
-    value: ValueType[];
+    value?: ValueType[];
     /**
      * 每列数据选择变化后的回调函数
      * @en The callback function 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/esm/popover/hooks/useEvent.js

@@ -3,52 +3,56 @@ import { isContains, isObject } from '@arco-design/mobile-utils';
 import lodashThrottle from 'lodash.throttle';
 import { getDefaultValue } from '../../_helpers';
 import { defaultAutoDirection } from './usePosition';
-
 /**
  * 阻止最近一次点击事件计时器
  * @en Block last click event timer
  */
+
 var preventRecentClickTimer = 0;
 export var useEvent = function useEvent(props, wrapperRef, popoverInnerRef, visibleRef, onVisibleChange, adjustVerticalDirection) {
   var _props$clickOtherToCl = props.clickOtherToClose,
-    clickOtherToClose = _props$clickOtherToCl === void 0 ? true : _props$clickOtherToCl,
-    _props$touchOtherToCl = props.touchOtherToClose,
-    touchOtherToClose = _props$touchOtherToCl === void 0 ? props.touchToClose === void 0 ? false : props.touchToClose : _props$touchOtherToCl,
-    _props$duration = props.duration,
-    duration = _props$duration === void 0 ? 0 : _props$duration,
-    _props$useAutoDirecti = props.useAutoDirection,
-    useAutoDirection = _props$useAutoDirecti === void 0 ? true : _props$useAutoDirecti,
-    _props$verticalScroll = props.verticalScrollThrottle,
-    verticalScrollThrottle = _props$verticalScroll === void 0 ? 100 : _props$verticalScroll,
-    _props$preventBodyCli = props.preventBodyClick,
-    preventBodyClick = _props$preventBodyCli === void 0 ? false : _props$preventBodyCli,
-    _props$getVerticalScr = props.getVerticalScrollContainer,
-    getVerticalScrollContainer = _props$getVerticalScr === void 0 ? function () {
-      return document;
-    } : _props$getVerticalScr;
-
+      clickOtherToClose = _props$clickOtherToCl === void 0 ? true : _props$clickOtherToCl,
+      _props$touchOtherToCl = props.touchOtherToClose,
+      touchOtherToClose = _props$touchOtherToCl === void 0 ? props.touchToClose === void 0 ? false : props.touchToClose : _props$touchOtherToCl,
+      _props$duration = props.duration,
+      duration = _props$duration === void 0 ? 0 : _props$duration,
+      _props$useAutoDirecti = props.useAutoDirection,
+      useAutoDirection = _props$useAutoDirecti === void 0 ? true : _props$useAutoDirecti,
+      _props$verticalScroll = props.verticalScrollThrottle,
+      verticalScrollThrottle = _props$verticalScroll === void 0 ? 100 : _props$verticalScroll,
+      _props$preventBodyCli = props.preventBodyClick,
+      preventBodyClick = _props$preventBodyCli === void 0 ? false : _props$preventBodyCli,
+      _props$getVerticalScr = props.getVerticalScrollContainer,
+      getVerticalScrollContainer = _props$getVerticalScr === void 0 ? function () {
+    return document;
+  } : _props$getVerticalScr;
   /**
    * 浮窗消失计时器
    * @en Popup disappearing timer
    */
-  var closeTimer = useRef(0);
 
+  var closeTimer = useRef(0);
   /** 垂直方向自适应 */
+
   var autoVerticalDirection = getDefaultValue(isObject(useAutoDirection) ? useAutoDirection.vertical : useAutoDirection, defaultAutoDirection);
+
   var popoverDisappear = function popoverDisappear() {
     onVisibleChange(false);
     window.clearTimeout(closeTimer.current);
     closeTimer.current = 0;
     mayRemoveEventListenerOnBody();
   };
+
   var throttleHandleVerticalScroll = useMemo(function () {
     return lodashThrottle(adjustVerticalDirection, verticalScrollThrottle);
   }, [adjustVerticalDirection, verticalScrollThrottle]);
   useEffect(function () {
     var verticalScrollEl = getVerticalScrollContainer();
+
     if (visibleRef.current && verticalScrollEl && autoVerticalDirection) {
       verticalScrollEl.addEventListener('scroll', throttleHandleVerticalScroll);
     }
+
     return function () {
       if (verticalScrollEl) {
         verticalScrollEl.removeEventListener('scroll', throttleHandleVerticalScroll);
@@ -59,6 +63,7 @@ export var useEvent = function useEvent(props, wrapperRef, popoverInnerRef, visi
     document.body.removeEventListener('click', handleClickBody, true);
     document.body.removeEventListener('touchstart', handleTouchBody);
     var el = getVerticalScrollContainer();
+
     if (el) {
       el.removeEventListener('scroll', throttleHandleVerticalScroll);
       el.removeEventListener('scroll', handleScrollBody);
@@ -66,6 +71,7 @@ export var useEvent = function useEvent(props, wrapperRef, popoverInnerRef, visi
   }, [throttleHandleVerticalScroll]);
   var handleClickBody = useCallback(function (e) {
     var _popoverInnerRef$curr;
+
     // 仅处理子元素和气泡元素外的点击事件
     // @en Only handle click events outside of children elements and bubble elements
     if (!isContains(wrapperRef.current, e.target) && !isContains(((_popoverInnerRef$curr = popoverInnerRef.current) == null ? void 0 : _popoverInnerRef$curr.dom) || null, e.target)) {
@@ -73,10 +79,10 @@ export var useEvent = function useEvent(props, wrapperRef, popoverInnerRef, visi
         e.stopPropagation();
         e.preventDefault();
       }
+
       popoverDisappear();
     }
   }, [preventBodyClick]);
-
   /**
    * UE要求气泡出现后，点击页面任意元素只隐藏气泡，不响应点击事件
    * @en UE requires that after the bubble appears, clicking any element on the page only hides the bubble and does not respond to the click event
@@ -87,27 +93,32 @@ export var useEvent = function useEvent(props, wrapperRef, popoverInnerRef, visi
    * 如果500ms内没有点击事件，用户可能是通过滑动页面触发的touchstart，此时移除click监听
    * @en If there is no click event within 500ms, the user may have triggered the touchstart by sliding the page, and the click listener will be removed at this time.
    */
+
   var preventRecentClick = function preventRecentClick() {
     clearTimeout(preventRecentClickTimer);
+
     var handle = function handle(e) {
       e.stopPropagation();
       e.preventDefault();
       document.body.removeEventListener('click', handle, true);
       clearTimeout(preventRecentClickTimer);
     };
+
     document.body.addEventListener('click', handle, true);
     preventRecentClickTimer = window.setTimeout(function () {
       document.body.removeEventListener('click', handle, true);
     }, 500);
   };
+
   var handleTouchBody = useCallback(function (e) {
     var _e$targetTouches$, _popoverInnerRef$curr2, _e$targetTouches$2, _e$targetTouches$3;
+
     if (!((_e$targetTouches$ = e.targetTouches[0]) != null && _e$targetTouches$.target) || !wrapperRef.current || !((_popoverInnerRef$curr2 = popoverInnerRef.current) != null && _popoverInnerRef$curr2.dom) || !visibleRef.current) {
       return;
-    }
-
-    // 判断元素是否非子元素和气泡元素，内部的事件交给组件内部自行处理
+    } // 判断元素是否非子元素和气泡元素，内部的事件交给组件内部自行处理
     // @en Determine whether the element is not a child element and a bubble element, and the internal events are handed over to the component to handle it by itself
+
+
     if (!isContains(wrapperRef.current, (_e$targetTouches$2 = e.targetTouches[0]) == null ? void 0 : _e$targetTouches$2.target) && !isContains(popoverInnerRef.current.dom, (_e$targetTouches$3 = e.targetTouches[0]) == null ? void 0 : _e$targetTouches$3.target)) {
       preventBodyClick && preventRecentClick();
       popoverDisappear();
@@ -120,30 +131,33 @@ export var useEvent = function useEvent(props, wrapperRef, popoverInnerRef, visi
   }, [touchOtherToClose]);
   useEffect(function () {
     var el = getVerticalScrollContainer();
+
     if (el && touchOtherToClose && visibleRef.current) {
       el.addEventListener('scroll', handleScrollBody);
     }
+
     return function () {
       el && el.removeEventListener('scroll', handleScrollBody);
     };
   }, [handleScrollBody, touchOtherToClose]);
+
   var mayAddEventOnBody = function mayAddEventOnBody() {
     if (touchOtherToClose) {
-      document.body.addEventListener('touchstart', handleTouchBody);
-
-      // FIXME: 解决按住气泡元素后上下滚动页面，气泡未消失的问题
+      document.body.addEventListener('touchstart', handleTouchBody); // FIXME: 解决按住气泡元素后上下滚动页面，气泡未消失的问题
       // @en FIXME: solve the problem that the bubble does not disappear after scrolling the page up and down after pressing the bubble element
+
       var el = getVerticalScrollContainer();
       el && el.addEventListener('scroll', handleScrollBody);
     } else if (clickOtherToClose) {
       document.body.addEventListener('click', handleClickBody, true);
     }
   };
-
   /**
    * 气泡自动关闭的场景下，计时关闭气泡
    * @en In the scene where the bubbles are automatically closed, time to close the bubbles
    */
+
+
   var startCloseTimer = function startCloseTimer() {
     if (duration !== 0) {
       closeTimer.current = window.setTimeout(function () {
@@ -152,6 +166,7 @@ export var useEvent = function useEvent(props, wrapperRef, popoverInnerRef, visi
       }, duration);
     }
   };
+
   return {
     popoverDisappear: popoverDisappear,
     mayRemoveEventListenerOnBody: mayRemoveEventListenerOnBody,