@arco-design/mobile-react 2.29.3 → 2.29.4

package/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.29.4](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.29.3...@arco-design/mobile-react@2.29.4) (2023-09-13)
+
+
+### Bug Fixes
+
+* `LoadMore` support the prop "getDataWhenNoScrollAtFirst" ([#170](https://github.com/arco-design/arco-design-mobile/issues/170)) ([7a4881d](https://github.com/arco-design/arco-design-mobile/commit/7a4881d92cb9fbb1a345240a2aaa940af0afbe63))
+* `Picker` support default values when click confirm button ([c6f12ee](https://github.com/arco-design/arco-design-mobile/commit/c6f12ee54131235470c380c3bd59a22983247622))
+* `SearchBar` adjust clear icon ([4f540fc](https://github.com/arco-design/arco-design-mobile/commit/4f540fcb255553fb59d0b972a74edf23a7224a16))
+* `Tabs` prevent jumping when no touchmove event ([df01464](https://github.com/arco-design/arco-design-mobile/commit/df014640dc220af7f911fe1c2cb1e504c463a37b))
+
+
+
+
+
 ## [2.29.3](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.29.2...@arco-design/mobile-react@2.29.3) (2023-09-12)
 
 

package/README.en-US.md

@@ -59,8 +59,8 @@ React & ReactDOM: **<a href="https://reactjs.org/docs/cdn-links.html" target="_b
 React Transition Group: **<a href="https://reactcommunity.org/react-transition-group/" target="_blank">Click here</a>**
 
 ```
-<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.29.2/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.29.2/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.29.3/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.29.3/dist/index.min.js"></script>
 ```
 
 ## Full import

package/README.md

@@ -59,8 +59,8 @@ React & ReactDOM： **<a href="https://reactjs.org/docs/cdn-links.html" target="
 React Transition Group： **<a href="https://reactcommunity.org/react-transition-group/" target="_blank">戳这里获取</a>**
 
 ```
-<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.29.2/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.29.2/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.29.3/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.29.3/dist/index.min.js"></script>
 ```
 
 ## 引入全部

package/cjs/load-more/index.d.ts

@@ -107,6 +107,12 @@ export interface LoadMoreProps {
      * @default true
      */
     getDataAtFirst?: boolean;
+    /**
+     * 当 getDataAtFirst === false 且数据不满一屏时是否触发一次请求，trigger=scroll时有效
+     * @en Whether to trigger a request when getDataAtFirst === false and the data is not full of one screen, valid when trigger=scroll
+     * @default false
+     */
+    getDataWhenNoScrollAtFirst?: boolean;
     /**
      * 状态改变时回调
      * @en Callback when state changes

package/cjs/load-more/index.js

@@ -55,7 +55,9 @@ var LoadMore = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       blockWhenLoading = _props$blockWhenLoadi === void 0 ? true : _props$blockWhenLoadi,
       onStatusChange = props.onStatusChange,
       onClick = props.onClick,
-      onEndReached = props.onEndReached;
+      onEndReached = props.onEndReached,
+      _props$getDataWhenNoS = props.getDataWhenNoScrollAtFirst,
+      getDataWhenNoScrollAtFirst = _props$getDataWhenNoS === void 0 ? false : _props$getDataWhenNoS;
   var domRef = (0, _react.useRef)(null);
   var requestAtFirst = trigger === 'scroll' ? getDataAtFirst : false;
 
@@ -100,10 +102,14 @@ var LoadMore = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }
   }, [nowStatus]);
   (0, _react.useEffect)(function () {
-    if (requestAtFirst && !disabled) {
-      if (statusRef.current === 'prepare') {
+    if (requestAtFirst) {
+      if (statusRef.current === 'prepare' && !disabled) {
         triggerGetData('requestAtFirst');
       }
+    } else {
+      if (trigger === 'scroll' && nowStatus === 'prepare' && checkNeedTrigger(0, threshold) && !disabled && getDataWhenNoScrollAtFirst) {
+        triggerGetData('pageEnd');
+      }
     }
   }, [trigger, disabled]);
   var handleContainerScroll = (0, _react.useCallback)(function () {

package/cjs/picker/index.js

@@ -80,11 +80,7 @@ var Picker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       _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 scrollValueRef = (0, _helpers.useLatestRef)(value);
   var domRef = (0, _react.useRef)(null);
   var pickerViewRef = (0, _react.useRef)(null);
   (0, _react.useImperativeHandle)(ref, function () {
@@ -135,7 +131,7 @@ var Picker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     (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()) || scrollValueRef.current || [];
 
       if (onOk) {
         onOk(val);
@@ -151,9 +147,6 @@ var Picker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     });
   };
 
-  (0, _react.useEffect)(function () {
-    setScrollValue(value);
-  }, [value, setScrollValue]);
   (0, _helpers.useListenResize)(updateLayoutByVisible, [visible]); // 每次visible从false变为true时需要重新设置scrollValue的值为当前value的值（初始值）
 
   function updateLayoutByVisible() {

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

@@ -18,6 +18,7 @@ export interface CascaderProps {
 export interface CascaderRef {
     getCellMovingStatus: () => PickerCellMovingStatus[];
     scrollToCurrentIndex: () => void;
+    getAllCellsValue: () => ValueType[];
 }
 declare const Cascader: React.ForwardRefExoticComponent<CascaderProps & React.RefAttributes<CascaderRef>>;
 export default Cascader;

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

@@ -36,7 +36,8 @@ var Cascader = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   (0, _react.useImperativeHandle)(ref, function () {
     return {
       getCellMovingStatus: getCellMovingStatus,
-      scrollToCurrentIndex: scrollToCurrentIndex
+      scrollToCurrentIndex: scrollToCurrentIndex,
+      getAllCellsValue: getAllCellsValue
     };
   });
 
@@ -52,6 +53,12 @@ var Cascader = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     });
   }
 
+  function getAllCellsValue() {
+    return pickerCellsRef.current.map(function (cell) {
+      return cell.getCurrentCellValue();
+    });
+  }
+
   function _onValueChange(value, index, newData) {
     var children = (0, _mobileUtils.arrayTreeFilter)(data, function (item, level) {
       return level <= index && item.value === value[level];

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

@@ -21,6 +21,7 @@ export interface PickerCellProps {
 export interface PickerCellRef {
     movingStatus: PickerCellMovingStatus;
     scrollToCurrentIndex: () => void;
+    getCurrentCellValue: () => ValueType;
 }
 declare const PickerCell: React.ForwardRefExoticComponent<PickerCellProps & React.RefAttributes<PickerCellRef>>;
 export default PickerCell;

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

@@ -298,6 +298,12 @@ var PickerCell = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     _scrollToIndexWithChange(nowIndex, 0);
   }
 
+  function getCurrentCellValue() {
+    var _data$currentIndex;
+
+    return currentValue || ((_data$currentIndex = data[currentIndex]) == null ? void 0 : _data$currentIndex.value);
+  }
+
   function _clearTimer() {
     timeRef.current && clearTimeout(timeRef.current);
     timeRef.current = null;
@@ -362,7 +368,8 @@ var PickerCell = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   (0, _react.useImperativeHandle)(ref, function () {
     return {
       movingStatus: movingStatusRef.current,
-      scrollToCurrentIndex: scrollToCurrentIndex
+      scrollToCurrentIndex: scrollToCurrentIndex,
+      getCurrentCellValue: getCurrentCellValue
     };
   });
   return !hideEmptyCols || data && data.length ? /*#__PURE__*/_react.default.createElement("div", {

package/cjs/picker-view/index.js

@@ -82,7 +82,6 @@ var PickerView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var wrapperRef = (0, _react.useRef)(null);
   var domRef = (0, _react.useRef)(null);
   var barRef = (0, _react.useRef)(null);
-  var scrollValueRef = (0, _helpers.useLatestRef)(scrollValue);
   var pickerCellsRef = (0, _react.useRef)([]);
   var cascaderRef = (0, _react.useRef)(null); // itemStyle height 同时对 selection-bar 生效，这里不单独抛出 selection-bar 的高度设置属性
   // @en The height of itemStyle applies to the selection-bar as well, without separately exposing the height setting property for the selection-bar.
@@ -124,32 +123,39 @@ var PickerView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, [data]);
 
   var getAllColumnValues = function getAllColumnValues() {
-    return scrollValueRef.current || [];
+    var _cascaderRef$current;
+
+    var curValues = cascade ? ((_cascaderRef$current = cascaderRef.current) == null ? void 0 : _cascaderRef$current.getAllCellsValue()) || [] : pickerCellsRef.current.map(function (cell) {
+      return cell.getCurrentCellValue();
+    }); // 移除级联带来的空列值，理论上非首尾列不会有空值
+    // @en Remove empty values from cascader
+
+    return curValues.filter(function (v) {
+      return v;
+    });
   };
 
   function getColumnValue(index) {
-    var _scrollValueRef$curre;
-
     if (index === void 0) {
       index = 0;
     }
 
-    return (_scrollValueRef$curre = scrollValueRef.current) == null ? void 0 : _scrollValueRef$curre[index];
+    return getAllColumnValues()[index];
   }
 
   function getCellMovingStatus() {
-    var _cascaderRef$current;
+    var _cascaderRef$current2;
 
-    return cascade ? ((_cascaderRef$current = cascaderRef.current) == null ? void 0 : _cascaderRef$current.getCellMovingStatus()) || [] : pickerCellsRef.current.map(function (cell) {
+    return cascade ? ((_cascaderRef$current2 = cascaderRef.current) == null ? void 0 : _cascaderRef$current2.getCellMovingStatus()) || [] : pickerCellsRef.current.map(function (cell) {
       return cell.movingStatus;
     });
   }
 
   function scrollToCurrentIndex() {
     if (cascade) {
-      var _cascaderRef$current2;
+      var _cascaderRef$current3;
 
-      (_cascaderRef$current2 = cascaderRef.current) == null ? void 0 : _cascaderRef$current2.scrollToCurrentIndex();
+      (_cascaderRef$current3 = cascaderRef.current) == null ? void 0 : _cascaderRef$current3.scrollToCurrentIndex();
       return;
     }
 

package/cjs/search-bar/style/css/index.css

@@ -75,6 +75,8 @@
 }
 .arco-search-bar-clear {
   color:  #C9CDD4 ;
+  font-size:  16PX ;
+  padding-left:  0.32rem ;
 }
 .arco-search-bar-search-icon {
   color:  #86909C ;

package/cjs/search-bar/style/index.less

@@ -1,112 +1,114 @@
 @import '../../../style/mixin.less';
 
 .@{prefix}-search-bar {
-  &-container {
-    display: flex;
-    align-items: center;
-    position: relative;
-    .use-var(padding, search-bar-padding);
-    .use-var(background-color, search-bar-background-color);
-  }
-  &-square {
-    .@{prefix}-search-bar-wrap {
-      .use-var(border-radius, search-bar-square-shape-border-radius);
+    &-container {
+        display: flex;
+        align-items: center;
+        position: relative;
+        .use-var(padding, search-bar-padding);
+        .use-var(background-color, search-bar-background-color);
     }
-  }
-  &-round {
-    .@{prefix}-search-bar-wrap {
-      .use-var(border-radius, search-bar-round-shape-border-radius);
+    &-square {
+        .@{prefix}-search-bar-wrap {
+            .use-var(border-radius, search-bar-square-shape-border-radius);
+        }
     }
-  }
-  &-wrap {
-    display: flex;
-    align-items: center;
-    flex: 1;
-    .use-var(height, search-bar-input-wrapper-height);
-    .use-var(font-size, search-bar-input-wrapper-font-size);
-    .use-var(padding, search-bar-input-wrapper-padding);
-    .use-var(background-color, search-bar-input-wrapper-background-color);
-  }
-  &-input {
-    flex: 1;
-    background-color: transparent;
-    .use-var(height, search-bar-input-height);
-    .use-var(caret-color, search-bar-input-caret-color);
-    &-left {
-      text-align: left;
+    &-round {
+        .@{prefix}-search-bar-wrap {
+            .use-var(border-radius, search-bar-round-shape-border-radius);
+        }
     }
-    &-right {
-      text-align: right;
-    }
-    &-center {
-      text-align: center;
+    &-wrap {
+        display: flex;
+        align-items: center;
+        flex: 1;
+        .use-var(height, search-bar-input-wrapper-height);
+        .use-var(font-size, search-bar-input-wrapper-font-size);
+        .use-var(padding, search-bar-input-wrapper-padding);
+        .use-var(background-color, search-bar-input-wrapper-background-color);
     }
+    &-input {
+        flex: 1;
+        background-color: transparent;
+        .use-var(height, search-bar-input-height);
+        .use-var(caret-color, search-bar-input-caret-color);
+        &-left {
+            text-align: left;
+        }
+        &-right {
+            text-align: right;
+        }
+        &-center {
+            text-align: center;
+        }
+
+        &::placeholder {
+            .use-var(color, search-bar-input-placeholder-color);
+        }
 
-    &::placeholder {
-      .use-var(color, search-bar-input-placeholder-color);
+        &::-webkit-search-decoration,
+        &::-webkit-search-cancel-button {
+            display: none;
+        }
     }
 
-    &::-webkit-search-decoration,
-    &::-webkit-search-cancel-button {
-      display: none;
+    &-prefix,
+    &-suffix,
+    &-clear {
+        align-items: center;
+        justify-content: center;
+        display: flex;
     }
-  }
 
-  &-prefix,
-  &-suffix,
-  &-clear {
-    align-items: center;
-    justify-content: center;
-    display: flex;
-  }
+    &-prefix {
+        .use-var(margin-right, search-bar-prefix-margin-right);
+    }
 
-  &-prefix {
-    .use-var(margin-right, search-bar-prefix-margin-right);
-  }
+    &-clear {
+        .use-var(color, search-bar-clear-icon-color);
+        .use-var(font-size, search-bar-clear-icon-font-size);
+        .use-var(padding-left, search-bar-clear-icon-padding-left);
+    }
 
-  &-clear {
-    .use-var(color, search-bar-clear-icon-color);
-  }
+    &-search-icon {
+        .use-var(color, search-bar-search-icon-color);
+        .use-var(font-size, search-bar-search-icon-font-size);
+    }
 
-  &-search-icon {
-    .use-var(color, search-bar-search-icon-color);
-    .use-var(font-size, search-bar-search-icon-font-size);
-  }
+    &-cancel-btn {
+        .use-var(margin-left, search-bar-cancel-btn-margin-left);
+        .use-var(color, search-bar-cancel-btn-color);
+        .use-var(font-size, search-bar-cancel-btn-font-size);
+    }
 
-  &-cancel-btn {
-    .use-var(margin-left, search-bar-cancel-btn-margin-left);
-    .use-var(color, search-bar-cancel-btn-color);
-    .use-var(font-size, search-bar-cancel-btn-font-size);
-  }
+    &-association {
+        position: absolute;
+        left: 0;
+        right: 0;
+        .use-var(background-color, search-bar-association-background-color);
+        top: 100%;
+        display: none;
 
-  &-association {
-    position: absolute;
-    left: 0;
-    right: 0;
-    .use-var(background-color, search-bar-association-background-color);
-    top: 100%;
-    display: none;
+        &-visible {
+            display: block;
+        }
 
-    &-visible {
-      display: block;
-    }
+        &-item {
+            .use-var(height, search-bar-association-item-height);
+            display: flex;
+            align-items: center;
+            position: relative;
+            .use-var(color, search-bar-association-item-color);
+            .use-var(padding, search-bar-association-item-padding);
+            .use-var(font-size, search-bar-association-item-font-size);
 
-    &-item {
-      .use-var(height, search-bar-association-item-height);
-      display: flex;
-      align-items: center;
-      position: relative;
-      .use-var(color, search-bar-association-item-color);
-      .use-var(padding, search-bar-association-item-padding);
-      .use-var(font-size, search-bar-association-item-font-size);
-      
-      &:not(:last-child) {
-        .onepx-border-var(bottom, line-color);
-      }
+            &:not(:last-child) {
+                .onepx-border-var(bottom, line-color);
+            }
 
-      &-highlight {
-        .use-var(color, search-bar-association-item-highlight-color)
-      }
+            &-highlight {
+                .use-var(color, search-bar-association-item-highlight-color)
+            }
+        }
     }
-  }
-}
+}

package/cjs/tabs/index.js

@@ -197,6 +197,7 @@ var Tabs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var touchStartXRef = (0, _react.useRef)(0);
   var touchStartYRef = (0, _react.useRef)(0);
   var touchStartTimeRef = (0, _react.useRef)(0);
+  var touchMovedRef = (0, _react.useRef)(false);
   var scrollingRef = (0, _react.useRef)(null);
   var touchStoppedRef = (0, _react.useRef)(false);
   var changeFromRef = (0, _react.useRef)('');
@@ -290,6 +291,7 @@ var Tabs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }
 
     touchStartedRef.current = true;
+    touchMovedRef.current = false;
     setCellTrans(false);
     setPaneTrans(false);
     var evt = e.touches[0];
@@ -317,6 +319,7 @@ var Tabs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       return;
     }
 
+    touchMovedRef.current = true;
     var evt = e.changedTouches[0];
     var touchMoveX = evt.clientX || 0;
     var touchMoveY = evt.clientY || 0; // bugfix: 兼容safari在右滑返回上一页时clientX为负值的情况，安卓有折叠屏，触点会有超出屏幕(clientX < 0)的情况，因此这里限定ios系统
@@ -383,7 +386,7 @@ var Tabs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       cellRef.current && cellRef.current.scrollToCenter();
     }
 
-    if (!touchStartedRef.current || posAdjustingRef.current || scrollingRef.current) {
+    if (!touchStartedRef.current || posAdjustingRef.current || scrollingRef.current || !touchMovedRef.current) {
       return;
     }