chore: merge main

arco-design · Aug 11, 2023 · 05416d1 · 05416d1
2 parents b46dbb3 + 49351f6
commit 05416d1
Show file tree

Hide file tree

Showing 90 changed files with 3,577 additions and 188 deletions.
diff --git a/packages/arcodesign/CHANGELOG.md b/packages/arcodesign/CHANGELOG.md
@@ -3,6 +3,64 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.28.2](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/[email protected]...@arco-design/[email protected]) (2023-08-07)
+
+
+### Bug Fixes
+
+* `Form` bind this in form-item ([#148](https://github.com/arco-design/arco-design-mobile/issues/148)) ([5616d53](https://github.com/arco-design/arco-design-mobile/commit/5616d537b921b009df61addccf966c5e9363a0cb))
+* `PickerView` flicker issue with picker off and on when momentum scrolling is not over ([#143](https://github.com/arco-design/arco-design-mobile/issues/143)) ([e91557f](https://github.com/arco-design/arco-design-mobile/commit/e91557fc1545dd6179329dc342de4967301a7d73))
+* `Tabs` use boundingRect instead of offset when calc tabs wrap size ([#146](https://github.com/arco-design/arco-design-mobile/issues/146)) ([7ece3a9](https://github.com/arco-design/arco-design-mobile/commit/7ece3a9eb76abb010aa88678af47c15a0bd319dc))
+
+
+
+
+
+## [2.28.1](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/[email protected]...@arco-design/[email protected]) (2023-08-02)
+
+
+### Bug Fixes
+
+* `Avatar` make the prop "src" optional ([f99bbc8](https://github.com/arco-design/arco-design-mobile/commit/f99bbc812223ae6c8960b1d712040f1b221efb72))
+* add [@types](https://github.com/types) to peerDependencies ([42f3d5a](https://github.com/arco-design/arco-design-mobile/commit/42f3d5ab19144702d7c371c6cbd1aa031a690abe))
+
+
+
+
+
+# [2.28.0](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/[email protected]...@arco-design/[email protected]) (2023-07-14)
+
+
+### Bug Fixes
+
+* `Collapse` update with the latest opened ([#140](https://github.com/arco-design/arco-design-mobile/issues/140)) ([b963787](https://github.com/arco-design/arco-design-mobile/commit/b96378761557f4d90f09f789f662e9d3588c3cbd))
+* `ImagePreview` fix scroll through ([ea3f9bc](https://github.com/arco-design/arco-design-mobile/commit/ea3f9bc5d0980f70c81e2de99084e0a11187b3c1))
+* `Sticky` support the method "updatePlaceholderLayout" ([842b4fe](https://github.com/arco-design/arco-design-mobile/commit/842b4fe6084b3ae282bd54850e381fbe34bd826f))
+
+
+### Features
+
+* RTL support for `Badge`, `Button`, `Cell`, `Checkbox`, `Form`, `Radio`, `Rate`, `Switch` and `Tabs` ([#135](https://github.com/arco-design/arco-design-mobile/issues/135)) ([97de976](https://github.com/arco-design/arco-design-mobile/commit/97de976ba514ec0f48103bd4f0c535ebceb8981a))
+
+
+
+
+
+## [2.27.5](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/[email protected]...@arco-design/[email protected]) (2023-07-04)
+
+
+### Bug Fixes
+
+* `ImagePreview` fix long picture display problem ([#137](https://github.com/arco-design/arco-design-mobile/issues/137)) ([3df1f71](https://github.com/arco-design/arco-design-mobile/commit/3df1f71a8b1f63ed5e1986284f2746438de59d70))
+* `LoadMore` fix the inaccurate scrollheight when using multiple loadmore ([#130](https://github.com/arco-design/arco-design-mobile/issues/130)) ([da76f12](https://github.com/arco-design/arco-design-mobile/commit/da76f125734579a1921a3ace0964d5ff845cd545))
+* `Stepper` disable status ([#134](https://github.com/arco-design/arco-design-mobile/issues/134)) ([71dabe7](https://github.com/arco-design/arco-design-mobile/commit/71dabe71f3508ac8cb9a800d8ac1be01df509f28))
+* error caught when using "getComputedStyle" ([#129](https://github.com/arco-design/arco-design-mobile/issues/129)) ([daa8f67](https://github.com/arco-design/arco-design-mobile/commit/daa8f67961d9d2751a14c0c3f7759b54fe0579cb))
+* transition in StrictMode ([#131](https://github.com/arco-design/arco-design-mobile/issues/131)) ([084448b](https://github.com/arco-design/arco-design-mobile/commit/084448b0e4b43ea7d8632e232c1665ce00449c3d))
+
+
+
+
+
 ## [2.27.4](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/[email protected]...@arco-design/[email protected]) (2023-05-19)
 
 

diff --git a/packages/arcodesign/README.en-US.md b/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.27.4/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.27.4/dist/index.min.js"></script>
+<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>
 ```
 
 ## Full import

diff --git a/packages/arcodesign/README.md b/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.27.4/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.27.4/dist/index.min.js"></script>
+<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>
 ```
 
 ## 引入全部

diff --git a/packages/arcodesign/components/_helpers/hooks.ts b/packages/arcodesign/components/_helpers/hooks.ts
@@ -4,7 +4,7 @@
  * @name_en General Hooks
  */
 import React, { useState, useRef, useEffect, useCallback, useContext } from 'react';
-import { getSystem, scrollWithAnimation } from '@arco-design/mobile-utils';
+import { getSystem, scrollWithAnimation, safeGetComputedStyle } from '@arco-design/mobile-utils';
 import { GlobalContext } from '../context-provider';
 import { BezierType } from '../progress';
 
@@ -29,7 +29,12 @@ export function useListenResize(resizeHandler: () => void, deps: any[] = [], nee
  * @desc {en} Tips: Use in scenarios where asynchronous processing is not completed after unmount. It is not recommended to replace useState without brains
  * @param initialState 初始状态
  * @param initialState {en} Initial State
- * @returns 什么东西
+ * @example
+ * ```
+ * import { useMountedState } from '@arco-design/mobile-react/esm/_helpers/hooks';
+ *
+ * const [scrollValue, setScrollValue] = useMountedState(value);
+ * ```
  */
 export function useMountedState<S>(initialState: S | (() => S)) {
     const [state, setState] = useState<S>(initialState);
@@ -50,6 +55,18 @@ export function useMountedState<S>(initialState: S | (() => S)) {
     return result;
 }
 
+export function useSameRefState<T>(
+    initialValue: T,
+): [T, React.MutableRefObject<T>, (data: T) => void] {
+    const [state, setState] = useState<T>(initialValue);
+    const stateRef = useRef<T>(state);
+    const setStateProxy = (data: T) => {
+        stateRef.current = data;
+        setState(data);
+    };
+    return [state, stateRef, setStateProxy];
+}
+
 export function useRefState<T>(
     initialValue: T | (() => T),
 ): [T, React.MutableRefObject<T>, React.Dispatch<React.SetStateAction<T>>] {
@@ -164,7 +181,7 @@ export function usePopupScroll(
                 scrollRef.current = actualEle.reduce(
                     (acc, nowEle) => [
                         ...acc,
-                        ...(nowEle && window.getComputedStyle(nowEle).overflow !== 'hidden'
+                        ...(nowEle && safeGetComputedStyle(nowEle).overflow !== 'hidden'
                             ? [
                                   {
                                       ele: nowEle,
@@ -420,13 +437,13 @@ export function usePreventBodyScroll(
     }, [visible]);
 }
 
-export const useProgress = (
+export function useProgress(
     mountedTransition: boolean,
     percentage: number,
     duration: number,
     mountedBezier: BezierType,
     step: number,
-): [number, boolean] => {
+): [number, boolean] {
     const [currentPercentage, setCurrentPercentage] = useState(0);
     const [transitionControl, setTransitionControl] = useState(false);
     const [count, setCount] = useState(0);
@@ -460,7 +477,7 @@ export const useProgress = (
     }, [count, percentage, step]);
 
     return [currentPercentage, transitionControl];
-};
+}
 
 export function useSingleAndDoubleClick(
     onClick: (e: React.MouseEvent) => void,

diff --git a/packages/arcodesign/components/avatar/README.en-US.md b/packages/arcodesign/components/avatar/README.en-US.md
@@ -12,7 +12,7 @@ Avatar component supports two shapes of circle and square, supports pictures or
 |----------|-------------|------|------|
 |shape|Shapre|"circle" \| "square"|"circle"|
 |size|Size|"medium" \| "large" \| "small" \| "smaller" \| "ultra\-small"|"small"|
-|src|resource of avatar picture|string|required|
+|src|resource of avatar picture|string|-|
 |imageProps|Image avatar component props, transparently passed to the Image component|Partial\<ImageProps & RefAttributes\<ImageRef\>\>|-|
 |decoration|the decoration for image avatar|ReactNode|null|
 |textAvatar|Text Avatar, two characters in Chinese, and three characters or less in English are recommended\.|string|""|

diff --git a/packages/arcodesign/components/avatar/README.md b/packages/arcodesign/components/avatar/README.md
@@ -12,7 +12,7 @@
 |----------|-------------|------|------|
 |shape|形状|"circle" \| "square"|"circle"|
 |size|尺寸|"medium" \| "large" \| "small" \| "smaller" \| "ultra\-small"|"small"|
-|src|图片头像的资源地址|string|必填|
+|src|图片头像的资源地址|string|-|
 |imageProps|图片头像组件参数，透传给Image组件|Partial\<ImageProps & RefAttributes\<ImageRef\>\>|-|
 |decoration|图片头像上的装饰|ReactNode|null|
 |textAvatar|文字头像，中文建议取两个字，英文建议在三个字以下|string|""|

diff --git a/packages/arcodesign/components/avatar/__ast__/index.ast.json b/packages/arcodesign/components/avatar/__ast__/index.ast.json
@@ -89,7 +89,7 @@
                 "fileName": "arcom-github/packages/arcodesign/components/avatar/type.ts",
                 "name": "AvatarProps"
             },
-            "required": true,
+            "required": false,
             "type": {
                 "name": "string"
             }

diff --git a/packages/arcodesign/components/avatar/type.ts b/packages/arcodesign/components/avatar/type.ts
@@ -19,7 +19,7 @@ export interface AvatarProps<T extends ImageProps = ImageProps> extends BaseProp
      * 图片头像的资源地址
      * @en resource of avatar picture
      */
-    src: string;
+    src?: string;
     /**
      * 图片头像组件参数，透传给Image组件
      * @en Image avatar component props, transparently passed to the Image component

diff --git a/packages/arcodesign/components/badge/index.tsx b/packages/arcodesign/components/badge/index.tsx
@@ -106,7 +106,7 @@ const Badge = forwardRef((props: BadgeProps, ref: Ref<BadgeRef>) => {
     return (
         <ContextLayout>
             {({ prefixCls }) => (
-                <Transition in={visible} timeout={timeout} type="scale">
+                <Transition in={visible} timeout={timeout} type="scale" nodeRef={domRef}>
                     <div
                         className={cls(`${prefixCls}-badge`, className, {
                             [`${prefixCls}-badge-dot dot`]: dot,

diff --git a/packages/arcodesign/components/badge/style/index.less b/packages/arcodesign/components/badge/style/index.less
@@ -60,13 +60,13 @@
     &-absolute {
         position: absolute;
         top: 0;
-        left: 100%;
-        .use-var(margin-left, badge-text-deviation);
+        .set-prop-with-rtl(left, 100%);
+        .use-var-with-rtl(margin-left, badge-text-deviation);
         .use-var(margin-top, badge-text-deviation);
     }
 
     &-absolute&-dot {
-        .use-var(margin-left, badge-dot-deviation);
+        .use-var-with-rtl(margin-left, badge-dot-deviation);
         .use-var(margin-top, badge-dot-deviation);
     }
 }

diff --git a/packages/arcodesign/components/button/FAQ.en-US.md b/packages/arcodesign/components/button/FAQ.en-US.md
@@ -0,0 +1,5 @@
+# FAQ
+
+## The style passed in through className cannot override the default style (such as color) in arco button
+
+The style (such as color) in arco button is implemented by the two class selectors .arco-button.arco-button-type-primary. The priority will be higher than the priority of the className passed in. You can increase the className passed in Priority resolution. arco implements this because when there is only one level of priority, it may be overwritten by reset.less on the business side or the default button style in the browser.
diff --git a/packages/arcodesign/components/button/FAQ.md b/packages/arcodesign/components/button/FAQ.md
@@ -0,0 +1,5 @@
+# FAQ
+
+## 通过 className 传入的样式无法覆盖 arco button 中的默认样式（如 color）
+
+arco button 中的样式（如 color）的实现是 .arco-button.arco-button-type-primary 两个类选择器实现的，优先级会比传入的 className 优先级高，可采用提高传入 className 优先级解决。arco 这么实现是因为只有一层优先级时，可能会被业务方的 reset.less 或者浏览器中默认的 button 样式覆盖。
diff --git a/packages/arcodesign/components/button/style/index.less b/packages/arcodesign/components/button/style/index.less
@@ -84,7 +84,7 @@
         vertical-align: middle;
     }
     &-text-has-icon {
-        .use-var(margin-left, button-icon-text-gutter);
+        .use-var-with-rtl(margin-left, button-icon-text-gutter);
     }
 
     &-loading-icon {

diff --git a/packages/arcodesign/components/cell/style/index.less b/packages/arcodesign/components/cell/style/index.less
@@ -54,7 +54,7 @@
 
         .cell-text {
             width: 100%;
-            text-align: right;
+            .set-value-with-rtl(text-align, right);
             .use-var(font-size, cell-content-font-size);
             .text-overflow(2);
         }
@@ -71,6 +71,9 @@
     }
 
     .cell-arrow-icon {
+        [dir="rtl"] & {
+            transform: scale(-1);
+        }
         .use-var-with-rtl(margin-left, cell-arrow-gutter);
         font-size: 0;
         .@{prefix}-icon {

diff --git a/packages/arcodesign/components/checkbox/style/index.less b/packages/arcodesign/components/checkbox/style/index.less
@@ -29,7 +29,7 @@
     }
 
     .checkbox-icon + .checkbox-text {
-        .use-var(margin-left, checkbox-icon-margin-right);
+        .use-var-with-rtl(margin-left, checkbox-icon-margin-right);
     }
 
     &.disabled .checkbox-text {
@@ -48,11 +48,11 @@
 
 .@{prefix}-checkbox-group {
     .@{prefix}-checkbox:not(:last-child) {
-        .use-var(margin-right, checkbox-group-gutter);
+        .use-var-with-rtl(margin-right, checkbox-group-gutter);
 
         &.block,
         &.justify {
-            margin-right: 0;
+            .set-prop-with-rtl(margin-right, 0);
         }
     }
 }
diff --git a/packages/arcodesign/components/collapse/collapse.tsx b/packages/arcodesign/components/collapse/collapse.tsx
@@ -6,11 +6,10 @@ import React, {
     useState,
     useEffect,
     useContext,
-    useMemo,
 } from 'react';
 import { cls, convertCssDuration, nextTick } from '@arco-design/mobile-utils';
 import { ContextLayout } from '../context-provider';
-import { useRefState, useUpdateEffect } from '../_helpers';
+import { useRefState, useSameRefState, useUpdateEffect } from '../_helpers';
 import IconArrowDown from '../icon/IconArrowDown';
 import { CollapseProps, CollapseRef } from './type';
 import { allContexts, CollapseKeyContext } from './utils';
@@ -42,7 +41,9 @@ export const Collapse = forwardRef((props: CollapseProps, ref: Ref<CollapseRef>)
     const { key: groupKey } = useContext(CollapseKeyContext);
     const CollapseContext = allContexts[groupKey] || {};
     const groupContext = useContext(CollapseContext) || {};
-    const opened = useMemo(() => {
+    const [opened, openedRef, setOpened] = useSameRefState(false);
+
+    useEffect(() => {
         let show = false;
         // 优先级： group > children
         // @en Priority: group > children
@@ -54,7 +55,7 @@ export const Collapse = forwardRef((props: CollapseProps, ref: Ref<CollapseRef>)
         } else {
             show = itemActive;
         }
-        return show;
+        setOpened(show);
     }, [value, active, itemActive, groupContext.isGroup, groupContext.value]);
 
     const getContentHeight = () => {
@@ -71,8 +72,8 @@ export const Collapse = forwardRef((props: CollapseProps, ref: Ref<CollapseRef>)
         setTimeout(
             () =>
                 contentWrapRef.current &&
-                (contentWrapRef.current.style.height = opened ? 'auto' : '0px'),
-            opened ? transTimeout : 20,
+                (contentWrapRef.current.style.height = openedRef.current ? 'auto' : '0px'),
+            openedRef.current ? transTimeout : 20,
         );
     };
 
@@ -93,10 +94,12 @@ export const Collapse = forwardRef((props: CollapseProps, ref: Ref<CollapseRef>)
             return;
         }
         const height = getContentHeight();
-        contentWrapRef.current.style.height = opened ? `${contentHeightRef.current}px` : '0px';
+        contentWrapRef.current.style.height = openedRef.current
+            ? `${contentHeightRef.current}px`
+            : '0px';
         nextTick(() => {
             contentHeightRef.current = height;
-            resetHeight(opened ? `${height}px` : '0px');
+            resetHeight(openedRef.current ? `${height}px` : '0px');
         });
     };