Merge branch 'main' into feat-resource-wxy

packages/arcodesign/CHANGELOG.md

@@ -3,6 +3,72 @@
 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/[email protected]...@arco-design/[email protected]) (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/[email protected]...@arco-design/[email protected]) (2023-09-12)
+
+
+### Bug Fixes
+
+* `ImagePreview` remove duplicate setTimeout for double-click judgment ([0a5565b](https://github.com/arco-design/arco-design-mobile/commit/0a5565bf06c5d5737d730a59227dd239feaf50d1))
+* `PickerView` adjust animation duration ([#164](https://github.com/arco-design/arco-design-mobile/issues/164)) ([6c7f020](https://github.com/arco-design/arco-design-mobile/commit/6c7f020baeb8b2a7ba00d08bf9feaf8f8ebcca3f))
+* `Popover` fix the problem that popover.menu does not show when defaultVisible=true ([b9c7397](https://github.com/arco-design/arco-design-mobile/commit/b9c73975f4333482152b207bb6bee8dfd7f0b7e3))
+
+
+
+
+
+## [2.29.2](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/[email protected]...@arco-design/[email protected]) (2023-08-28)
+
+
+### Bug Fixes
+
+* `LoadMore` support the prop "disabled" ([b1881b2](https://github.com/arco-design/arco-design-mobile/commit/b1881b2821debb3b94c66285d712e8f7522e6be7))
+* `Tabs` the prop "tabBarFixed" supports passing in specific fixed values ([ae3158f](https://github.com/arco-design/arco-design-mobile/commit/ae3158f7f7d5d1eebca8921d6d4802aa53b31fbe))
+
+
+
+
+
+## [2.29.1](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/[email protected]...@arco-design/[email protected]) (2023-08-21)
+
+
+### Bug Fixes
+
+* fix wrong logic after click clear icon of `Input`, `Textarea` and `SearchBar` ([#156](https://github.com/arco-design/arco-design-mobile/issues/156)) ([b741263](https://github.com/arco-design/arco-design-mobile/commit/b741263fd1a1b9c3da9c106f7487714e33e042f2))
+
+
+
+
+
+# [2.29.0](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/[email protected]...@arco-design/[email protected]) (2023-08-17)
+
+
+### Bug Fixes
+
+* compatibility between grid and image picker ([#151](https://github.com/arco-design/arco-design-mobile/issues/151)) ([28ae5b9](https://github.com/arco-design/arco-design-mobile/commit/28ae5b9a8eb6dd91422d50d3f2cfe8b0d7ccdfa4))
+
+
+### Features
+
+* add new component `Skeleton` ([#136](https://github.com/arco-design/arco-design-mobile/issues/136)) ([49351f6](https://github.com/arco-design/arco-design-mobile/commit/49351f639b7a3272b55f189447d935946933ddd6))
+
+
+
+
+
 ## [2.28.2](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/[email protected]...@arco-design/[email protected]) (2023-08-07)
 
 

packages/arcodesign/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.28.2/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.28.2/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.29.4/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.29.4/dist/index.min.js"></script>
 ```
 
 ## Full import

packages/arcodesign/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.28.2/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.28.2/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.29.4/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.29.4/dist/index.min.js"></script>
 ```
 
 ## 引入全部

packages/arcodesign/components/grid/style/index.less

@@ -101,3 +101,9 @@
 .@{prefix}-grid.sliding::-webkit-scrollbar {
     display: none; /* Chrome Safari */
 }
+
+.@{prefix}-grid {
+    .@{prefix}-image-picker {
+        width: 100%; /* 兼容grid和image-picker组合使用 */
+    }
+}

packages/arcodesign/components/image-preview/README.en-US.md

@@ -30,6 +30,7 @@ The image preview, supports circular rotation, two-finger/double-tap zoom, and t
 |lazyloadCount|Only load n content adjacent to the current page, when it is 0, all adjacent content will be destroyed|number|1|
 |swipeToClose|When the image is scrolled to the edge, whether to close the preview when continuing to swipe|boolean|true|
 |indicatorPos|Carousel indicator position|"start" \| "center" \| "end"|"start"|
+|extra|Render custom elements such as custom close buttons|ReactNode|-|
 |getMinScale|The minimum zoom factor when the image is pinched, it will still return to the state of 1 after letting go, the default is 0\.7|(image: HTMLImageElement, imageIndex: number) =\> number|-|
 |getMaxScale|The maximum zoom factor of the image, the default is adjusted according to the picture size|(image: HTMLImageElement, imageIndex: number) =\> number|-|
 |getDoubleClickScale|The zoom factor of the image when double\-clicking the image|(currentScale: number, maxScale: number, image: HTMLImageElement, imageIndex: number) =\> number|-|

packages/arcodesign/components/image-preview/README.md

@@ -30,6 +30,7 @@
 |lazyloadCount|只加载当前页相邻的n个内容，为0时会销毁所有相邻内容|number|1|
 |swipeToClose|当图片滚动到边缘时，继续滑动是否关闭预览|boolean|true|
 |indicatorPos|轮播索引位置|"start" \| "center" \| "end"|"start"|
+|extra|渲染自定义元素，如自定义关闭按钮|ReactNode|-|
 |getMinScale|图片捏合时最小缩放倍数，松手后仍会恢复到1的状态，默认为0\.7|(image: HTMLImageElement, imageIndex: number) =\> number|-|
 |getMaxScale|图片最大缩放倍数，默认根据图片尺寸调节|(image: HTMLImageElement, imageIndex: number) =\> number|-|
 |getDoubleClickScale|当双击图片时，图片应缩放的倍数|(currentScale: number, maxScale: number, image: HTMLImageElement, imageIndex: number) =\> number|-|

packages/arcodesign/components/image-preview/__ast__/index.ast.json

@@ -38,7 +38,7 @@
                     "description": null,
                     "name": "config",
                     "type": {
-                        "name": "Pick<WithGlobalContext<ImagePreviewProps & RefAttributes<ImagePreviewRef>>, \"animateDurationSlide\" | ... 43 more ... | \"context\">"
+                        "name": "Pick<WithGlobalContext<ImagePreviewProps & RefAttributes<ImagePreviewRef>>, \"animateDurationSlide\" | ... 44 more ... | \"context\">"
                     }
                 },
                 {
@@ -441,6 +441,23 @@
                 ]
             }
         },
+        "extra": {
+            "defaultValue": null,
+            "description": "渲染自定义元素，如自定义关闭按钮\n@en Render custom elements such as custom close buttons",
+            "name": "extra",
+            "tags": {
+                "en": "Render custom elements such as custom close buttons"
+            },
+            "descWithTags": "渲染自定义元素，如自定义关闭按钮",
+            "parent": {
+                "fileName": "arcom-github/packages/arcodesign/components/image-preview/index.tsx",
+                "name": "ImagePreviewProps"
+            },
+            "required": false,
+            "type": {
+                "name": "ReactNode"
+            }
+        },
         "getMinScale": {
             "defaultValue": null,
             "description": "图片捏合时最小缩放倍数，松手后仍会恢复到1的状态，默认为0.7\n@en The minimum zoom factor when the image is pinched, it will still return to the state of 1 after letting go, the default is 0.7",

packages/arcodesign/components/image-preview/index.tsx

@@ -183,6 +183,11 @@ export interface ImagePreviewProps
      * @default "start"
      */
     indicatorPos?: CarouselProps['indicatorPos'];
+    /**
+     * 渲染自定义元素，如自定义关闭按钮
+     * @en Render custom elements such as custom close buttons
+     */
+    extra?: ReactNode;
     /**
      * 图片捏合时最小缩放倍数，松手后仍会恢复到1的状态，默认为0.7
      * @en The minimum zoom factor when the image is pinched, it will still return to the state of 1 after letting go, the default is 0.7
@@ -330,6 +335,7 @@ const ImagePreview = forwardRef((props: ImagePreviewProps, ref: Ref<ImagePreview
         scrollBezier,
         lazyloadCount = 1,
         swipeToClose = true,
+        extra,
         getMinScale,
         getMaxScale,
         getDoubleClickScale,
@@ -354,7 +360,6 @@ const ImagePreview = forwardRef((props: ImagePreviewProps, ref: Ref<ImagePreview
     const imagesRef = useRef<(ImageRef | null)[]>([]);
     const carouselRef = useRef<CarouselRef | null>(null);
     const transformersRef = useRef<any[]>([]);
-    const dblTimerRef = useRef<number | null>(null);
     const longTimerRef = useRef<number | null>(null);
     const transImageRef = useRef<HTMLImageElement | null>(null);
     const imageDomsRef = useRef<(HTMLImageElement | null)[]>([]);
@@ -786,15 +791,13 @@ const ImagePreview = forwardRef((props: ImagePreviewProps, ref: Ref<ImagePreview
         if (movedRef.current) {
             return;
         }
-        // 300ms内再次点击则触发doubleClick，否则触发click
-        // @en Click again within 300ms to trigger doubleClick, otherwise trigger click
-        dblTimerRef.current = window.setTimeout(() => {
-            if (!dblClickingRef.current) {
-                if (!onImageClick || !onImageClick(innerIndexRef.current, e)) {
-                    goClose(e);
-                }
+        // 如果正在触发doubleClick就不触发click
+        // @en If doubleClick is being triggered, click will not be triggered
+        if (!dblClickingRef.current) {
+            if (!onImageClick || !onImageClick(innerIndexRef.current, e)) {
+                goClose(e);
             }
-        }, 300);
+        }
     }
 
     function handleImageDoubleClick(e: React.MouseEvent<HTMLDivElement, MouseEvent>) {
@@ -803,10 +806,6 @@ const ImagePreview = forwardRef((props: ImagePreviewProps, ref: Ref<ImagePreview
             return;
         }
         dblClickingRef.current = true;
-        if (dblTimerRef.current) {
-            clearTimeout(dblTimerRef.current);
-            dblTimerRef.current = null;
-        }
         const index = innerIndexRef.current;
         onImageDoubleClick && onImageDoubleClick(index, e);
         // 双击时根据配置放大或缩小
@@ -1210,6 +1209,7 @@ const ImagePreview = forwardRef((props: ImagePreviewProps, ref: Ref<ImagePreview
                                     )}
                                 </div>
                             ) : null}
+                            {extra}
                         </div>
                     </Transition>
                     {transImageInfo ? (

packages/arcodesign/components/input/README.en-US.md

@@ -39,7 +39,7 @@ The input box, supports adding prefixes and suffixes.
 |clearShowType|Clear button display timing: focus \- display when focused, value \- display when there is value, always \- always display|"focus" \| "value" \| "always"|"focus"|
 |preventEventWhenClearing|Whether to block the onBlur and onFocus events generated when the clear button is clicked in focus mode|boolean|true|
 |clearIcon|Clear button type, also customizable|ReactNode|\<IconClear className="clear-icon" /\>|
-|onClear|Callback when clear button is pressed|(e: MouseEvent\<HTMLElement, MouseEvent\>) =\> void|-|
+|onClear|Callback when clear button is pressed|(e: TouchEvent\<HTMLElement\>) =\> void|-|
 |prefix|The prefix of the input box, inside the input box, can also be customized|ReactNode|-|
 |suffix|The suffix content of the input box, inside the input box, can also be customized|ReactNode|-|
 |onChange|Fired when the data changes (when bluring the focus)|(e: ChangeEvent\<HTMLInputElement\>, value: string) =\> void|-|

packages/arcodesign/components/input/README.md

@@ -39,7 +39,7 @@
 |clearShowType|清除按钮展示时机：focus \- 聚焦时展示 value \- 有值则展示 always \- 始终展示|"focus" \| "value" \| "always"|"focus"|
 |preventEventWhenClearing|在聚焦模式下点击清除按钮时，是否要屏蔽对应产生的onBlur和onFocus事件|boolean|true|
 |clearIcon|清除按钮类型，也可自定义|ReactNode|\<IconClear className="clear-icon" /\>|
-|onClear|按下清除按钮回调|(e: MouseEvent\<HTMLElement, MouseEvent\>) =\> void|-|
+|onClear|按下清除按钮回调|(e: TouchEvent\<HTMLElement\>) =\> void|-|
 |prefix|输入框前置内容，在输入框内部，也可自定义|ReactNode|-|
 |suffix|输入框后置内容，在输入框内部，也可自定义|ReactNode|-|
 |onChange|数据改变时触发（失去焦点时）|(e: ChangeEvent\<HTMLInputElement\>, value: string) =\> void|-|

packages/arcodesign/components/input/__ast__/index.ast.json

@@ -563,7 +563,7 @@
             },
             "required": false,
             "type": {
-                "name": "(e: MouseEvent<HTMLElement, MouseEvent>) => void"
+                "name": "(e: TouchEvent<HTMLElement>) => void"
             }
         },
         "prefix": {

packages/arcodesign/components/input/demo/index.md

@@ -14,6 +14,8 @@ export default function InputDemo() {
             clearable
             border="none"
             onChange={(_, value) => console.log('input changed 1', value)}
+            onFocus={() => console.log('focus')}
+            onBlur={() => console.log('blur')}
         />
         <Input
             value={input}

packages/arcodesign/components/input/hooks.tsx

@@ -47,23 +47,6 @@ export function useInputLogic(
             (clearShowType === 'value' && Boolean(value || defaultValue)),
     );
     const compositingRef = useRef(false);
-    /**
-     * clear相关问题背景
-     * 如果点击clear按钮之前已经是focusing状态了，那么在点完clear按钮之后会手动聚焦一下
-     * 该行为将导致onClear事件触发时，也会触发一次onBlur和onFocus事件，可能影响一些组件外的代码逻辑
-     *
-     * e.g. 假设input按钮右侧有一个按钮仅在聚焦时展示
-     * 实现代码大致是：onBlur设置其visible为false，onFocus设置其visible为true
-     * 那么这个按钮就会因为clear的点击造成一瞬的闪烁
-     *
-     * 解决思路
-     * 先来看一下，在输入框已激活的状态时，点击清除按钮后，组件的一些事件的触发顺序
-     * handleBlur -> handleClear -> handleFocus -> onBlur(外部回调) -> onFocus(外部回调)
-     * 可以看到外部的onBlur和onFocus回调都是在handleClear函数之后被调用
-     * 因此可以在handleClear中设置一个shouldPreventEvent的boolean标志
-     * 如果这个标志为true，则跳过调用外部的onBlur和onFocus，并在最后再将标志置回false
-     *
-     */
     const [isFocusing, setIsFocusing] = useState(false);
     const shouldPreventEvent = useRef(false);
     const actualInputValue = value !== void 0 ? value : inputValue;
@@ -151,26 +134,22 @@ export function useInputLogic(
     }
 
     function handleFocus(e: React.FocusEvent<InputEleType>) {
-        nextTick(() => {
-            if (preventEventWhenClearing && shouldPreventEvent.current) {
-                shouldPreventEvent.current = false;
-                return;
-            }
-            setIsFocusing(true);
-            clearShowType === 'focus' && toggleClear(true);
-            onFocus && onFocus(e);
-        });
+        if (preventEventWhenClearing && shouldPreventEvent.current) {
+            shouldPreventEvent.current = false;
+            return;
+        }
+        setIsFocusing(true);
+        clearShowType === 'focus' && toggleClear(true);
+        onFocus && onFocus(e);
     }
 
     function handleBlur(e: React.FocusEvent<InputEleType>) {
-        nextTick(() => {
-            if (preventEventWhenClearing && shouldPreventEvent.current) {
-                return;
-            }
-            setIsFocusing(false);
-            clearShowType === 'focus' && toggleClear(false);
-            onBlur && onBlur(e);
-        });
+        if (preventEventWhenClearing && shouldPreventEvent.current) {
+            return;
+        }
+        setIsFocusing(false);
+        clearShowType === 'focus' && toggleClear(false);
+        onBlur && onBlur(e);
     }
 
     function handleClick(e: React.MouseEvent<InputEleType>) {
@@ -187,7 +166,7 @@ export function useInputLogic(
         onClick && onClick(e);
     }
 
-    function handleClear(e: React.MouseEvent<HTMLElement, MouseEvent>) {
+    function handleClear(e: React.TouchEvent<HTMLElement>) {
         // 不展示清除按钮时不触发事件
         // @en No event fired when clear button is not displayed
         if (!clearable || !showClear) {
@@ -200,8 +179,15 @@ export function useInputLogic(
             if (isFocusing) {
                 if (preventEventWhenClearing) {
                     shouldPreventEvent.current = true;
+                    // 一段时间未执行blur或focus则重置，避免对下次事件循环造成影响
+                    // @en If blur or focus is not executed for a period of time, it will be reset to avoid affecting the next event loop
+                    setTimeout(() => {
+                        shouldPreventEvent.current = false;
+                    }, 200);
                 }
-                inputRef.current && inputRef.current.focus();
+                nextTick(() => {
+                    inputRef.current && inputRef.current.focus();
+                });
             }
         });
     }
@@ -213,6 +199,10 @@ export function useInputLogic(
     }
 
     function renderWrapper(prefixCls: string, type: string, children: ReactNode) {
+        // handleClear必须早于handleBlur执行，pc端仅mousedown事件触发早于blur，移动端touch相关事件均早于blur
+        // @en handleClear must be executed earlier than handleBlur
+        // @en only the mousedown event on the PC side is triggered earlier than blur, and the touch-related events on the mobile side are all earlier than blur
+        const clearEvent = { [system === 'pc' ? 'onMouseDown' : 'onTouchEnd']: handleClear };
         return (
             <div
                 role="search"
@@ -245,7 +235,7 @@ export function useInputLogic(
                     ) : null}
                     {children}
                     {clearable && showClear ? (
-                        <div className={`${prefixCls}-clear`} onClick={handleClear}>
+                        <div className={`${prefixCls}-clear`} {...clearEvent}>
                             {clearIcon}
                         </div>
                     ) : null}

packages/arcodesign/components/input/props.tsx

@@ -125,7 +125,7 @@ export interface BasicInputProps<T = HTMLInputElement> {
      * 按下清除按钮回调
      * @en Callback when clear button is pressed
      */
-    onClear?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    onClear?: (e: React.TouchEvent<HTMLElement>) => void;
     /**
      * 输入框前置内容，在输入框内部，也可自定义
      * @en The prefix of the input box, inside the input box, can also be customized

packages/arcodesign/components/load-more/README.en-US.md

@@ -12,6 +12,7 @@ Pull-up loading component, supports `scroll` and `click` two trigger loading met
 |----------|-------------|------|------|
 |style|Custom stylesheet|CSSProperties|-|
 |className|Custom classname|string|-|
+|disabled|Whether to disable the loading capability|boolean|-|
 |beforeReadyArea|Content when the component is loaded but not yet enabled|ReactNode|null|
 |loadingArea|Content in loading state|ReactNode|"Trying to load..."|
 |noMoreArea|Content with no more data|ReactNode|"No more data"|