@fjyueke/arco-mcp 1.0.0

package/metaData/components/popup/example/index.tsx

@@ -0,0 +1,125 @@
+import type { Ref } from 'react';
+import React, { useRef, forwardRef, useImperativeHandle } from 'react';
+import { cls, componentWrapper } from '@arco-design/mobile-utils';
+import { ContextLayout, CompWithGlobalContext } from '../context-provider';
+import type { MaskingCommonProps, MaskingRef, OpenBaseProps } from '../masking';
+import Masking from '../masking';
+import { open } from './methods';
+
+export * from './methods';
+
+export type DirectionType = 'left' | 'right' | 'top' | 'bottom';
+
+export interface PopupProps extends MaskingCommonProps {
+    /**
+     * 菜单滑出方向
+     * @en The direction the menu slides out
+     * @default "bottom"
+     */
+    direction?: DirectionType;
+    /**
+     * 从底部滑出的菜单内容是否适配ipx底部
+     * @en Whether the content of the menu that slides out from the bottom fits the bottom of ipx
+     * @default false
+     */
+    needBottomOffset?: boolean;
+    /**
+     * [即将废弃] 开启translateZ强制提升
+     * @en [To be deprecated] Enable translateZ forced promotion
+     * @default false
+     * @deprecated
+     */
+    translateZ?: boolean;
+    /**
+     * 菜单蒙层动画时长
+     * @en Menu mask animation duration
+     * @default { enter: 450, exit: 240 }
+     */
+    maskTransitionTimeout?: MaskingCommonProps['maskTransitionTimeout'];
+    /**
+     * 菜单内容动画时长
+     * @en Menu content animation duration
+     * @default { enter: 450, exit: 240 }
+     */
+    contentTransitionTimeout?: MaskingCommonProps['contentTransitionTimeout'];
+    /**
+     * 内容过渡动画类名
+     * @en Content transition animation classname
+     * @default \`slide-from-${props.direction}\`
+     */
+    contentTransitionType?: MaskingCommonProps['contentTransitionType'];
+}
+
+export interface PopupRef extends MaskingRef {}
+
+const Popup = forwardRef((props: PopupProps, ref: Ref<PopupRef>) => {
+    const {
+        children,
+        maskClass,
+        contentClass,
+        contentTransitionType,
+        className,
+        direction = 'bottom',
+        needBottomOffset = false,
+        translateZ = false,
+        maskTransitionTimeout = { enter: 450, exit: 240 },
+        contentTransitionTimeout = { enter: 450, exit: 240 },
+        ...restProps
+    } = props;
+    const maskingRef = useRef<MaskingRef>(null);
+
+    useImperativeHandle(ref, () => maskingRef.current!);
+
+    function renderPopup({ prefixCls }) {
+        const prefix = `${prefixCls}-popup`;
+        return (
+            <Masking
+                className={cls(prefix, className)}
+                ref={maskingRef}
+                maskClass={cls(`${prefix}-mask`, { translateZ }, maskClass)}
+                contentTransitionType={contentTransitionType || `slide-from-${direction}`}
+                contentTransitionVarType="popup-slide"
+                contentClass={cls(
+                    `${prefix}-content`,
+                    direction,
+                    {
+                        'need-bottom-offset': needBottomOffset,
+                    },
+                    { translateZ },
+                    contentClass,
+                )}
+                maskTransitionTimeout={maskTransitionTimeout}
+                contentTransitionTimeout={contentTransitionTimeout}
+                {...restProps}
+            >
+                {children}
+            </Masking>
+        );
+    }
+
+    return <ContextLayout>{renderPopup}</ContextLayout>;
+});
+
+export function methodsGenerator<P extends OpenBaseProps>(Comp: React.FunctionComponent<P>) {
+    return {
+        /**
+         * 打开弹出层
+         * @desc {en} Open the popup
+         * @param {PopupProps} config Configuration
+         * @returns {{ close: () => void; update: (newConfig: PopupProps) => void; }}
+         */
+        open: open(Comp),
+    };
+}
+
+const PopupWithGlobalContext = CompWithGlobalContext(Popup);
+
+/**
+ * 基于模态弹窗的的全屏菜单，支持各个方向。默认做了防滚动穿透处理，如果弹层内容中需要滚动，则需将滚动容器传入`getScrollContainer`属性以在未滚动到顶部或底部时释放滚动。
+ * @en A full-screen menu based on a modal popup, supporting all directions. By default, anti-scroll penetration processing is performed. If scrolling is required in the content of the popup layer, you need to pass the scroll container to the `getScrollContainer` property to release scrolling when it is not scrolled to the top or bottom.
+ * @type 反馈
+ * @type_en Feedback
+ * @name 弹出层
+ * @name_en Popup
+ */
+export default componentWrapper(Popup, methodsGenerator(PopupWithGlobalContext));

package/metaData/components/popup/example/methods.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { open as maskingOpen, OpenBaseProps } from '../masking/methods';
+
+export function open<P extends OpenBaseProps>(Component: React.FunctionComponent<P>) {
+    return maskingOpen(Component, 'ARCO_POPUP');
+}

package/metaData/components/popup-swiper/doc.md

@@ -0,0 +1,108 @@
+### 反馈
+
+# 可滑动弹出层 PopupSwiper
+
+基于弹出层(Popup)封装的具有手势关闭功能的弹出层组件，拥有 Popup 组件的其他能力。
+
+======
+
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|percentToClose|滑动超过内容的百分之多少时关闭弹窗，范围为\[0, 1\]，如果该属性和\`distanceToClose\`属性均设置，则实际计算结果更大的生效|number|0.3|
+|distanceToClose|滑动超过多少px时关闭弹窗，如果该属性和\`percentToClose\`属性均设置，则实际计算结果更大的生效|number|10|
+|speedToClose|手指从按下到抬起之间的滑动速度超过多少时关闭弹窗(单位为px/s)，与滑动关闭距离阈值同时设置时，满足其中一个即生效|number|200|
+|allowSwipeDirections|自定义可手势滑动退出的方向，可指定多个方向|DirectionType\[\]|direction 属性指定的方向性|
+|exitDirection|固定弹窗退出方向，默认跟随手势滑动方向|"left" \| "right" \| "top" \| "bottom"|-|
+|onTouchStart|内容面板 touchstart 事件，返回true时表示阻止本组件内部处理事件|(e: TouchEvent) =\> boolean \| void|-|
+|onTouchMove|内容面板 touchmove 事件，返回true时表示阻止本组件内部处理事件|(e: TouchEvent, prevented: boolean, direction: "x" \| "y") =\> boolean \| void|-|
+|onTouchEnd|内容面板 touchend / touchcancel 事件，返回true时表示阻止本组件内部处理事件|(e: TouchEvent) =\> boolean \| void|-|
+|direction|菜单滑出方向|"left" \| "right" \| "top" \| "bottom"|"bottom"|
+|needBottomOffset|从底部滑出的菜单内容是否适配ipx底部|boolean|false|
+|translateZ|\[即将废弃\] 开启translateZ强制提升|boolean|false|
+|maskTransitionTimeout|菜单蒙层动画时长|number \| \{ appear?: number; enter?: number; exit?: number; \}|{ enter: 450, exit: 240 }|
+|contentTransitionTimeout|菜单内容动画时长|number \| \{ appear?: number; enter?: number; exit?: number; \}|{ enter: 450, exit: 240 }|
+|contentTransitionType|内容过渡动画类名|string|\`slide-from-${props.direction}\`|
+|className|自定义类名|string|-|
+|maskClass|自定义蒙层类名|string|-|
+|maskStyle|自定义蒙层样式|CSSProperties|-|
+|contentClass|自定义内容类名|string|-|
+|contentStyle|自定义内容样式|CSSProperties|-|
+|visible|是否展示菜单（受控）|boolean|必填|
+|close|关闭菜单方法|(e: MouseEvent\<HTMLElement, MouseEvent\>) =\> void|必填|
+|maskTransitionType|蒙层过渡动画类名|string|"fade"|
+|contentTransitionVarType|内容过渡动画类名变量标识|string|-|
+|children|菜单内部内容|ReactNode|-|
+|maskClosable|点击蒙层是否关闭菜单|boolean|true|
+|animatingClosable|执行进场动画时点击蒙层是否可关闭菜单|boolean|false|
+|mountOnEnter|是否在打开菜单时再加载内容|boolean|true|
+|unmountOnExit|是否在退出时卸载内容|boolean|true|
+|orientationDirection|transform方向，用于通过transform模拟横屏的情况|"left" \| "right" \| "top" \| "bottom"|"top"|
+|preventBodyScroll|弹窗打开时是否禁止body的滚动|boolean|true|
+|initialBodyOverflow|页面初始 overflow 状态，即关闭弹窗时 overflow 应该还原的状态|string|第一个全屏组件（弹窗、toast等）打开时页面overflow值|
+|gestureOutOfControl|是否禁用滚动容器手势判断，禁用后交给业务方自己判断|boolean|false|
+|onClose|关闭后回调（动画执行完毕）|(scene?: string) =\> void|-|
+|onOpen|打开后回调（动画执行完毕）|() =\> void|-|
+|onMaskClick|点击蒙层回调，maskClosable=false时也会触发|() =\> void|-|
+|onPreventTouchMove|非滚动区域或滚动到顶部及底部时的触摸事件回调|(e: TouchEvent, direction: "x" \| "y") =\> void|-|
+|getContainer|获取挂载容器|() =\> HTMLElement|-|
+|getScrollContainer|内容内部滚动区域容器，在该容器中未滚动到顶部或底部时会释放滚动|() =\> HTMLElement \| HTMLElement\[\]|-|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|
+|mask|蒙层 DOM|HTMLDivElement|
+|content|内容 DOM|HTMLDivElement|
+|setCloseScene|在关闭弹窗前修改 onClose 的 scene 参数值|(scene: string) =\> void|
+
+> 方法/Methods
+
+|方法名|描述|类型|
+|----------|-------------|------|
+|open|打开弹出层|(config: string \| PopupSwiperProps) =\> \{ close: () =\> void; update: (newConfig: PopupSwiperProps) =\> void; \}|
+
+> DirectionType
+
+```
+"left" | "right" | "top" | "bottom"
+```
+
+> GlobalContextParams
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|prefixCls|组件类名前缀|string|"arco"|
+|system|手动控制当前所在系统，传入后将直接使用传入的值，ssr场景需指定系统初始值时适用|"" \| "pc" \| "android" \| "ios"|""|
+|useDarkMode|是否监听系统原生的暗黑模式变化(prefers\-color\-scheme: dark)以判断是否切为暗黑模式|boolean|false|
+|isDarkMode|是否处于暗黑模式，指定后以指定的值为准|boolean|false|
+|darkModeSelector|当处于暗黑模式时，body上挂载的类名，为空值时不挂载类名|string|"arco-theme-dark"|
+|theme|主题变量，传入后将在线替换css变量，需设置less变量 @use\-css\-vars: 1|Record\<string, string\>|-|
+|locale|国际化语言包配置|ILocale|-|
+|useRtl|是否使用Rtl模式|boolean|false|
+|onDarkModeChange|当系统原生暗黑模式发生变化时触发，useDarkMode=true 时有效|(isDark: boolean) =\> void|-|
+|createRoot|React19 修改了 createRoot 的引入路径，导致组件内部无法直接引入（低react版本会找不到模块）。因此使用 react 19 的用户需从外部传入 createRoot 方法|CreateRootFnType|-|
+
+> ILocale
+
+|参数|描述|类型|
+|----------|-------------|------|
+|locale|语言类型|string|
+|LoadMore|-|\{ loadMoreText: string; loadingText: string; noDataText: string; failLoadText: string; prepareScrollText: string; prepareClickText: string; \}|
+|Picker|-|\{ okText: string; cancelText: string; \}|
+|Tag|-|\{ addTag: string; \}|
+|Dialog|-|\{ okText: string; cancelText: string; \}|
+|SwipeLoad|-|\{ normalText: string; activeText: string; \}|
+|PullRefresh|-|\{ loadingText: string; pullingText: string; finishText: string; loosingText: string; \}|
+|DropdownMenu|-|\{ select: string; \}|
+|Pagination|-|\{ previousPage: string; nextPage: string; \}|
+|Image|-|\{ loadError: string; \}|
+|ImagePicker|-|\{ loadError: string; \}|
+|SearchBar|-|\{ placeholder: string; cancelBtn: string; \}|
+|Stepper|-|\{ minusButtonName: string; addButtonName: string; \}|
+|Keyboard|-|\{ confirm: string; \}|
+|Form|-|\{ required: string; type: \{ email: string; url: string; string: string; number: string; array: string; object: string; boolean: string; \}; number: \{ min: string; max: string; equal: string; range: string; positive: string; negative: string; \}; \.\.\. 4 more \.\.\.; pickerDefaultHint: string; \}|
+|NavBar|-|\{ backBtnAriaLabel: string; \}|
+|Uploader|-|\{ uploadBtn: string; retryUpload: string; \}|

package/metaData/components/popup-swiper/example/index.tsx

@@ -0,0 +1,332 @@
+import React, {
+    useRef,
+    forwardRef,
+    Ref,
+    useImperativeHandle,
+    useCallback,
+    useState,
+    useEffect,
+    useMemo,
+} from 'react';
+import { cls, componentWrapper, nextTick } from '@arco-design/mobile-utils';
+import { ContextLayout, CompWithGlobalContext } from '../context-provider';
+import { OpenBaseProps } from '../masking';
+import Popup, { DirectionType, PopupProps, PopupRef } from '../popup';
+import { open } from './methods';
+import { getStyleWithVendor, useRefState } from '../_helpers';
+
+export interface PopupSwiperProps extends PopupProps {
+    /**
+     * 滑动超过内容的百分之多少时关闭弹窗，范围为[0, 1]，如果该属性和`distanceToClose`属性均设置，则实际计算结果更大的生效
+     * @en Close the popup when sliding more than the percentage of the content, the range is [0, 1]. If both this property and the `distanceToClose` property are set, the larger the actual calculation result takes effect
+     * @default 0.3
+     */
+    percentToClose?: number;
+    /**
+     * 滑动超过多少px时关闭弹窗，如果该属性和`percentToClose`属性均设置，则实际计算结果更大的生效
+     * @en Close the popup when sliding more than px, if this property and the `percentToClose` property are both set, the larger the actual calculation result takes effect.
+     * @default 10
+     */
+    distanceToClose?: number;
+    /**
+     * 手指从按下到抬起之间的滑动速度超过多少时关闭弹窗(单位为px/s)，与滑动关闭距离阈值同时设置时，满足其中一个即生效
+     * @en Close the popup when the finger slides between pressing and lifting (unit: px/s). When it is set at the same time as the sliding closing distance threshold, it will take effect if one of them is satisfied.
+     * @default 200
+     */
+    speedToClose?: number;
+    /**
+     * 自定义可手势滑动退出的方向，可指定多个方向
+     * @en Custom direction of the gesture swipe exit, you can specify multiple directions
+     * @default direction 属性指定的方向性
+     * @default_en The value of direction property
+     */
+    allowSwipeDirections?: DirectionType[];
+    /**
+     * 固定弹窗退出方向，默认跟随手势滑动方向
+     * @en Fixed the exit direction of the pop-up window, and the default sliding direction follows the gesture
+     */
+    exitDirection?: DirectionType;
+    /**
+     * 内容面板 touchstart 事件，返回true时表示阻止本组件内部处理事件
+     * @en The touchstart callback of content panel. When it returns true, it means that the event is prevented from being processed inside the component
+     */
+    onTouchStart?: (e: TouchEvent) => void | boolean;
+    /**
+     * 内容面板 touchmove 事件，返回true时表示阻止本组件内部处理事件
+     * @en The touchmove callback of content panel. When it returns true, it means that the event is prevented from being processed inside the component
+     */
+    onTouchMove?: (e: TouchEvent, prevented: boolean, direction: 'x' | 'y') => void | boolean;
+    /**
+     * 内容面板 touchend / touchcancel 事件，返回true时表示阻止本组件内部处理事件
+     * @en The touchend / touchcancel callback of content panel. When it returns true, it means that the event is prevented from being processed inside the component
+     */
+    onTouchEnd?: (e: TouchEvent) => void | boolean;
+}
+
+export interface PopupSwiperRef extends PopupRef {}
+
+const PopupSwiper = forwardRef((props: PopupSwiperProps, ref: Ref<PopupSwiperRef>) => {
+    const {
+        className = '',
+        visible,
+        children,
+        maskStyle,
+        contentStyle,
+        direction = 'bottom',
+        percentToClose = 0.3,
+        distanceToClose = 10,
+        speedToClose = 200,
+        allowSwipeDirections,
+        exitDirection,
+        onTouchMove,
+        onTouchStart,
+        onTouchEnd,
+        onOpen,
+        onClose,
+        close,
+        maskTransitionTimeout = { enter: 450, exit: 240 },
+        contentTransitionTimeout = { enter: 450, exit: 240 },
+        ...otherProps
+    } = props;
+    const [opened, setOpened] = useState(visible);
+    const [distance, distanceRef, setDistance] = useRefState<{
+        direction: 'X' | 'Y';
+        value: number;
+    }>({
+        direction: 'X',
+        value: 0,
+    });
+    const [hasTrans, setHasTrans] = useState(false);
+    const popupRef = useRef<PopupRef>(null);
+    const touchStartXRef = useRef(0);
+    const touchStartYRef = useRef(0);
+    const touchStartTimeRef = useRef(0);
+    const hasTouchStartRef = useRef(false);
+    const getContentSize = useCallback((direc: 'X' | 'Y') => {
+        const contentDom = popupRef.current?.content;
+        const contentWidth = contentDom?.offsetWidth || 0;
+        const contentHeight = contentDom?.offsetHeight || 0;
+        const contentSize = direc === 'X' ? contentWidth : contentHeight;
+        return contentSize;
+    }, []);
+    const getPercent = useCallback((dis: { direction: 'X' | 'Y'; value: number }) => {
+        const { direction: direc, value } = dis;
+        const contentSize = getContentSize(direc);
+        return contentSize ? Math.max(0, Math.min(1, Math.abs(value) / contentSize)) : 0;
+    }, []);
+    const percent = useMemo(() => getPercent(distance), [distance]);
+    const allowedDirections = useMemo(
+        () => (allowSwipeDirections !== void 0 ? allowSwipeDirections : [direction]),
+        [allowSwipeDirections, direction],
+    );
+
+    const handleTouchStart = useCallback(
+        (e: TouchEvent) => {
+            if (onTouchStart && onTouchStart(e)) {
+                return;
+            }
+            setHasTrans(false);
+            hasTouchStartRef.current = true;
+            touchStartXRef.current = e.touches?.[0]?.clientX || 0;
+            touchStartYRef.current = e.touches?.[0]?.clientY || 0;
+            touchStartTimeRef.current = new Date().getTime();
+        },
+        [onTouchStart],
+    );
+
+    const getMovingFromDirection = useCallback(
+        (direc: 'X' | 'Y', disX: number, disY: number): DirectionType => {
+            if (direc === 'X') {
+                return disX > 0 ? 'right' : 'left';
+            }
+            return disY > 0 ? 'bottom' : 'top';
+        },
+        [],
+    );
+
+    const handleTouchMove = useCallback(
+        (e: TouchEvent, prevented: boolean, direc: 'x' | 'y') => {
+            if (onTouchMove && onTouchMove(e, prevented, direc)) {
+                return;
+            }
+            // 如果prevented=false说明正在滚动，则专心处理滚动事件而不处理跟手退出
+            if (!prevented) {
+                hasTouchStartRef.current = false;
+            }
+            if (!hasTouchStartRef.current || e.target === popupRef.current?.mask) {
+                return;
+            }
+            const touchMoveX = e.changedTouches?.[0]?.clientX || 0;
+            const touchMoveY = e.changedTouches?.[0]?.clientY || 0;
+            const disX = touchMoveX < 0 ? 0 : touchMoveX - touchStartXRef.current;
+            const disY = touchMoveY - touchStartYRef.current;
+            const fromDirec = getMovingFromDirection(direc === 'x' ? 'X' : 'Y', disX, disY);
+            const movingFromDirec = allowedDirections.includes(fromDirec) ? fromDirec : '';
+            const disDirection = exitDirection || movingFromDirec;
+            const direcValue = ['top', 'bottom'].includes(disDirection) ? 'Y' : 'X';
+            const direcRatio = ['bottom', 'right'].includes(disDirection) ? 1 : -1;
+            switch (movingFromDirec) {
+                case 'top':
+                case 'bottom':
+                    setDistance({
+                        direction: direcValue,
+                        value: Math.abs(disY) * direcRatio,
+                    });
+                    break;
+                case 'left':
+                case 'right':
+                    setDistance({
+                        direction: direcValue,
+                        value: Math.abs(disX) * direcRatio,
+                    });
+                    break;
+                default:
+                    break;
+            }
+        },
+        [onTouchMove, allowedDirections, exitDirection],
+    );
+
+    const getDescDisFromDirection = useCallback((direc: 'X' | 'Y', dis: number): number => {
+        const fromDirec = getMovingFromDirection(direc, dis, dis);
+        const contentSize = getContentSize(direc);
+        const prefix = fromDirec === 'left' || fromDirec === 'top' ? -1 : 1;
+        return prefix * contentSize;
+    }, []);
+
+    const handleTouchEnd = useCallback(
+        e => {
+            if (onTouchEnd && onTouchEnd(e)) {
+                return;
+            }
+            if (!hasTouchStartRef.current) {
+                return;
+            }
+            hasTouchStartRef.current = false;
+            const touchEndTime = new Date().getTime();
+            const { direction: direc, value } = distanceRef.current;
+            const per = getPercent(distanceRef.current);
+            const speed = (value / (touchEndTime - touchStartTimeRef.current)) * 1000;
+            if (
+                (per > 0 && per >= percentToClose && Math.abs(value) > distanceToClose) ||
+                Math.abs(speed) > speedToClose
+            ) {
+                setHasTrans(false);
+                close(e);
+                nextTick(() => {
+                    setDistance({
+                        direction: direc,
+                        value: getDescDisFromDirection(direc, value),
+                    });
+                });
+            } else {
+                setHasTrans(true);
+                setDistance({
+                    direction: 'X',
+                    value: 0,
+                });
+                // 动画完成后需重置
+                // @en Reset after animation is complete
+                setTimeout(() => {
+                    setHasTrans(false);
+                }, Math.max(typeof maskTransitionTimeout === 'number' ? maskTransitionTimeout : maskTransitionTimeout?.exit || 0, typeof contentTransitionTimeout === 'number' ? contentTransitionTimeout : contentTransitionTimeout?.exit || 0, 240));
+            }
+            touchStartTimeRef.current = 0;
+        },
+        [onTouchEnd, percentToClose, distanceToClose, speedToClose, close],
+    );
+
+    useImperativeHandle(ref, () => popupRef.current!);
+
+    useEffect(() => {
+        const contentDom = popupRef.current?.content;
+        if (opened && contentDom) {
+            contentDom.addEventListener('touchstart', handleTouchStart);
+            contentDom.addEventListener('touchend', handleTouchEnd);
+            contentDom.addEventListener('touchcancel', handleTouchEnd);
+        }
+        return () => {
+            const ctDom = popupRef.current?.content;
+            if (opened && ctDom) {
+                ctDom.removeEventListener('touchstart', handleTouchStart);
+                ctDom.removeEventListener('touchend', handleTouchEnd);
+                ctDom.removeEventListener('touchcancel', handleTouchEnd);
+            }
+        };
+    }, [opened, handleTouchStart, handleTouchEnd]);
+
+    function getContentStyle() {
+        const disStyle = getStyleWithVendor({
+            transform: distance.value
+                ? `translate${distance.direction}(${distance.value}px) translateZ(2px)`
+                : void 0,
+        });
+        return {
+            ...(contentStyle || {}),
+            ...disStyle,
+        };
+    }
+
+    return (
+        <ContextLayout>
+            {({ prefixCls }) => (
+                <Popup
+                    ref={popupRef}
+                    visible={visible}
+                    close={close}
+                    className={cls(`${prefixCls}-popup-swiper`, className, {
+                        'has-trans': hasTrans,
+                    })}
+                    direction={direction}
+                    onTouchMove={handleTouchMove}
+                    onOpen={() => {
+                        setOpened(true);
+                        onOpen?.();
+                    }}
+                    onClose={scene => {
+                        setOpened(false);
+                        setDistance({
+                            direction: 'X',
+                            value: 0,
+                        });
+                        onClose?.(scene);
+                    }}
+                    maskStyle={{
+                        ...(maskStyle || {}),
+                        opacity: percent ? 1 - percent : void 0,
+                    }}
+                    contentStyle={getContentStyle()}
+                    maskTransitionTimeout={maskTransitionTimeout}
+                    contentTransitionTimeout={contentTransitionTimeout}
+                    {...otherProps}
+                >
+                    {children}
+                </Popup>
+            )}
+        </ContextLayout>
+    );
+});
+
+export function methodsGenerator<P extends OpenBaseProps>(Comp: React.FunctionComponent<P>) {
+    return {
+        /**
+         * 打开弹出层
+         * @desc {en} Open the PopupSwiper
+         * @param {string | PopupSwiperProps} config Configuration
+         * @returns {{ close: () => void; update: (newConfig: PopupSwiperProps) => void; }}
+         */
+        open: open(Comp),
+    };
+}
+
+const PopupSwiperWithGlobalContext = CompWithGlobalContext(PopupSwiper);
+
+/**
+ * 基于弹出层(Popup)封装的具有手势关闭功能的弹出层组件，拥有 Popup 组件的其他能力。
+ * @en The popup with gesture closing function based on the popup encapsulation, has other capabilities of the Popup component.
+ * @type 反馈
+ * @type_en Feedback
+ * @name 可滑动弹出层
+ * @name_en PopupSwiper
+ */
+export default componentWrapper(PopupSwiper, methodsGenerator(PopupSwiperWithGlobalContext));

package/metaData/components/popup-swiper/example/methods.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { open as maskingOpen, OpenBaseProps } from '../masking/methods';
+
+export function open<P extends OpenBaseProps>(Component: React.FunctionComponent<P>) {
+    return maskingOpen(Component, 'ARCO_POPUP_SWIPER');
+}

package/metaData/components/portal/doc.md

@@ -0,0 +1,14 @@
+### 其他
+
+# 自定义挂载 Portal
+
+React.createPortal的简单封装。
+
+======
+
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|children|被挂载的内容|ReactNode|-|
+|getContainer|容器获取函数|() =\> HTMLElement|() => document.body|

package/metaData/components/portal/example/index.tsx

@@ -0,0 +1,35 @@
+import React, { useEffect, useState } from 'react';
+import ReactDOM from 'react-dom';
+
+export interface PortalProps {
+    /**
+     * 被挂载的内容
+     * @en Content to be mounted
+     */
+    children?: React.ReactNode;
+    /**
+     * 容器获取函数
+     * @en Container getter function
+     * @default () => document.body
+     */
+    getContainer?: () => HTMLElement;
+}
+
+/**
+ * React.createPortal的简单封装。
+ * @en Simple wrapper for React.createPortal
+ * @type 其他
+ * @type_en Others
+ * @name 自定义挂载
+ * @name_en Portal
+ */
+export default function Portal(props: PortalProps) {
+    const [container, setContainer] = useState<HTMLElement>();
+    const { children, getContainer } = props;
+
+    useEffect(() => {
+        setContainer(getContainer ? getContainer() : document.body);
+    }, [getContainer]);
+
+    return container ? ReactDOM.createPortal(children, container) : null;
+}

package/metaData/components/progress/doc.md

@@ -0,0 +1,42 @@
+### 反馈
+
+# 进度条 Progress
+
+进度条组件，可根据外界传递进来的百分比进行进度展示
+
+======
+
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|className|自定义类名|string|-|
+|style|自定义样式|CSSProperties|-|
+|percentPosition|文字显示位置|"left" \| "innerLeft" \| "right" \| "follow"|"center"|
+|showPercent|是否显示进度条内部文字|boolean|true|
+|percentage|进度环百分比|number|必填|
+|renderPercent|进度条内部文字显示（一个函数，返回ReactNode类型，回调参数为当前进度百分比）|(percentage: number) =\> ReactNode|-|
+|trackColor|轨道颜色|string|-|
+|progressColor|进度条颜色|string|-|
+|disabled|是否置灰|boolean|false|
+|trackStroke|轨道粗细|number|一般默认为4，percentPosition=innerLeft 时为18，mode=nav时为2|
+|progressStroke|进度条粗细|number|继承 trackStroke 值|
+|duration|每增加step步长所需的毫秒数|number|300|
+|step|步长（增加步长，以step增长）|number|1|
+|filleted|进度条是否两端圆角|boolean|true|
+|mountedTransition|初始化percentage时是否以动画形式过渡到目的值|boolean|true|
+|mountedBezier|初始化时动画的贝塞尔曲线|BezierType|[0.34, 0.69, 0.1, 1]|
+|mode|模式可选为nav或者base模式|"nav" \| "base"|"base"|
+|top|距离屏幕顶部的距离（只有当mode为"nav"才有效）|number|0|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|
+
+> PercentPosition
+
+```
+"left" | "innerLeft" | "right" | "follow"
+```