@fjyueke/arco-mcp 1.0.0

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

@@ -0,0 +1,410 @@
+import type { Ref, ReactNode, CSSProperties } from 'react';
+import React, { useRef, forwardRef, useImperativeHandle, useEffect, useState } from 'react';
+import { cls, nextTick, componentWrapper } from '@arco-design/mobile-utils';
+import { ContextLayout, CompWithGlobalContext } from '../context-provider';
+import Portal from '../portal';
+import type { TransitionProps } from '../transition';
+import Transition from '../transition';
+import { usePopupScroll, usePreventBodyScroll } from '../_helpers';
+import type { OpenBaseProps } from './methods';
+import { open } from './methods';
+
+export * from './methods';
+
+export interface MaskingCommonProps {
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     * 自定义蒙层类名
+     * @en Custom mask classname
+     */
+    maskClass?: string;
+    /**
+     * 自定义蒙层样式
+     * @en Custom mask stylesheet
+     */
+    maskStyle?: CSSProperties;
+    /**
+     * 自定义内容类名
+     * @en Custom content classname
+     */
+    contentClass?: string;
+    /**
+     * 自定义内容样式
+     * @en Custom content stylesheet
+     */
+    contentStyle?: CSSProperties;
+    /**
+     * 是否展示菜单（受控）
+     * @en Whether to display the menu (controlled)
+     */
+    visible: boolean;
+    /**
+     * 关闭菜单方法
+     * @en Close menu method
+     */
+    close: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    /**
+     * 蒙层过渡动画类名
+     * @en Mask transition animation classname
+     * @default "fade"
+     */
+    maskTransitionType?: string;
+    /**
+     * 内容过渡动画类名
+     * @en Content transition animation classname
+     * @default "fade"
+     */
+    contentTransitionType?: string;
+    /**
+     * 内容过渡动画类名变量标识
+     * @en Content transition animation classname variable identifier
+     */
+    contentTransitionVarType?: string;
+    /**
+     * 菜单内部内容
+     * @en Contents of menu
+     */
+    children?: ReactNode;
+    /**
+     * 蒙层动画时长
+     * @en Mask animation duration
+     * @default 300
+     */
+    maskTransitionTimeout?: TransitionProps['timeout'];
+    /**
+     * 内容动画时长
+     * @en Content animation duration
+     * @default 300
+     */
+    contentTransitionTimeout?: TransitionProps['timeout'];
+    /**
+     * 点击蒙层是否关闭菜单
+     * @en Whether to click the mask to close the menu
+     * @default true
+     */
+    maskClosable?: boolean;
+    /**
+     * 执行进场动画时点击蒙层是否可关闭菜单
+     * @en Whether the menu can be closed by clicking on the mask when performing the entry animation
+     * @default false
+     */
+    animatingClosable?: boolean;
+    /**
+     * 是否在打开菜单时再加载内容
+     * @en Whether to reload content when the menu is opened
+     * @default true
+     */
+    mountOnEnter?: boolean;
+    /**
+     * 是否在退出时卸载内容
+     * @en Whether to unmount content on exit
+     * @default true
+     */
+    unmountOnExit?: boolean;
+    /**
+     * transform方向，用于通过transform模拟横屏的情况
+     * @en The transform direction, used to simulate the situation of horizontal screen through transform
+     * @default "top"
+     */
+    orientationDirection?: 'top' | 'bottom' | 'left' | 'right';
+    /**
+     * 弹窗打开时是否禁止body的滚动
+     * @en Whether to prohibit the scrolling of the body when the popup is opened
+     * @default true
+     */
+    preventBodyScroll?: boolean;
+    /**
+     * 页面初始 overflow 状态，即关闭弹窗时 overflow 应该还原的状态
+     * @en The initial overflow state of the page, that is, the state in which overflow should be restored when the popup is closed
+     * @default 第一个全屏组件（弹窗、toast等）打开时页面overflow值
+     * @default_en The page overflow value when the first fullscreen component (popup, toast, etc.) is opened
+     */
+    initialBodyOverflow?: string;
+    /**
+     * 是否禁用滚动容器手势判断，禁用后交给业务方自己判断
+     * @en Whether to disable the scrolling container gesture judgment, leave it to users to judge
+     * @default false
+     */
+    gestureOutOfControl?: boolean;
+    /**
+     * 关闭后回调（动画执行完毕）
+     * @en Callback after closing (animation is completed)
+     */
+    onClose?: (scene?: string) => void;
+    /**
+     * 打开后回调（动画执行完毕）
+     * @en Callback after opening (animation is completed)
+     */
+    onOpen?: () => void;
+    /**
+     * 点击蒙层回调，maskClosable=false时也会触发
+     * @en Callback when clicking the mask , also triggered when maskClosable=false
+     */
+    onMaskClick?: () => void;
+    /**
+     * 弹窗的touchmove回调
+     * @en Touch event callbacks for masking
+     */
+    onTouchMove?: (e: TouchEvent, prevented: boolean, direction: 'x' | 'y') => void;
+    /**
+     * 非滚动区域或滚动到顶部及底部时的触摸事件回调
+     * @en Touch event callbacks for non-scrolling areas or when scrolling to the top and bottom
+     */
+    onPreventTouchMove?: (e: TouchEvent, direction: 'x' | 'y') => void;
+    /**
+     * 获取挂载容器
+     * @en Get mounted container
+     */
+    getContainer?: () => HTMLElement;
+    /**
+     * 内容内部滚动区域容器，在该容器中未滚动到顶部或底部时会释放滚动
+     * @en Container of inner scroll area in content, scroll is released when not scrolled to the top or bottom in this container
+     */
+    getScrollContainer?: () => HTMLElement[] | HTMLElement | null;
+}
+
+export interface MaskingProps extends MaskingCommonProps {
+    /**
+     * 弹窗内容是否居中
+     * @en Whether the content of the popup window is centered
+     * @default false
+     */
+    contentAtCenter?: boolean;
+}
+
+export interface MaskingRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+    /**
+     * 蒙层 DOM
+     * @en Mask DOM
+     */
+    mask: HTMLDivElement | null;
+    /**
+     * 内容 DOM
+     * @en Content DOM
+     */
+    content: HTMLDivElement | null;
+    /**
+     * 在关闭弹窗前修改 onClose 的 scene 参数值
+     * @en Modify the scene of onClose before closing the popup
+     */
+    setCloseScene: (scene: string) => void;
+}
+
+const Masking = forwardRef((props: MaskingProps, ref: Ref<MaskingRef>) => {
+    const {
+        className,
+        visible = false,
+        maskClass,
+        maskStyle,
+        contentClass,
+        contentStyle,
+        close,
+        onClose,
+        onOpen,
+        onMaskClick,
+        children,
+        maskTransitionType = 'fade',
+        contentTransitionType = 'fade',
+        contentTransitionVarType,
+        maskTransitionTimeout = 300,
+        contentTransitionTimeout = 300,
+        maskClosable = true,
+        animatingClosable,
+        mountOnEnter = true,
+        unmountOnExit = true,
+        orientationDirection = 'top',
+        preventBodyScroll = true,
+        initialBodyOverflow,
+        contentAtCenter = false,
+        gestureOutOfControl = false,
+        getContainer,
+        getScrollContainer,
+        onPreventTouchMove,
+        onTouchMove,
+    } = props;
+    const domRef = useRef<HTMLDivElement>(null);
+    const maskRef = useRef<HTMLDivElement>(null);
+    const contentRef = useRef<HTMLDivElement>(null);
+    const timerRef = useRef(-1);
+    const isInitialMount = useRef(false);
+    const isAnimating = useRef(false);
+    const closeScene = useRef('');
+    const [innerVisible, setInnerVisible] = useState(visible);
+    const [outerVisible, setOuterVisible] = useState(visible);
+    const [extraClass, setExtraClass] = useState('');
+
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+        mask: maskRef.current,
+        content: contentRef.current,
+        setCloseScene,
+    }));
+
+    usePopupScroll(
+        innerVisible,
+        domRef.current,
+        getScrollContainer,
+        orientationDirection,
+        onPreventTouchMove,
+        onTouchMove,
+        gestureOutOfControl,
+    );
+
+    usePreventBodyScroll(visible, preventBodyScroll, initialBodyOverflow);
+
+    useEffect(() => {
+        if (timerRef.current >= 0) {
+            clearTimeout(timerRef.current);
+        }
+        const mounted = isInitialMount.current;
+        if (mounted) {
+            isAnimating.current = true;
+        }
+        if (!mounted && !visible && !mountOnEnter) {
+            setExtraClass('pre-mount');
+        }
+        if (visible) {
+            setOuterVisible(true);
+            nextTick(() => {
+                setInnerVisible(true);
+                execAfterOpen(() => {
+                    isAnimating.current = false;
+                    setExtraClass('');
+                    mounted && onOpen?.();
+                });
+            });
+        } else {
+            setInnerVisible(false);
+            timerRef.current = execAfterClose(() => {
+                isAnimating.current = false;
+                setOuterVisible(false);
+                mounted && onClose?.(closeScene.current || void 0);
+                closeScene.current = '';
+            });
+        }
+        isInitialMount.current = true;
+    }, [visible]);
+
+    function setCloseScene(scene: string) {
+        closeScene.current = scene;
+    }
+
+    function execAfterClose(callback: () => void) {
+        return window.setTimeout(
+            callback,
+            Math.max(
+                getMaxTimeout(maskTransitionTimeout, 'exit'),
+                getMaxTimeout(contentTransitionTimeout, 'exit'),
+            ),
+        );
+    }
+
+    function execAfterOpen(callback: () => void) {
+        return window.setTimeout(
+            callback,
+            Math.max(
+                getMaxTimeout(maskTransitionTimeout, 'enter'),
+                getMaxTimeout(contentTransitionTimeout, 'enter'),
+            ),
+        );
+    }
+
+    function getMaxTimeout(timeout: TransitionProps['timeout'], type: 'appear' | 'enter' | 'exit') {
+        return typeof timeout === 'number' ? timeout : timeout[type] || 0;
+    }
+
+    function handleMaskAction(e: React.MouseEvent<HTMLElement, MouseEvent>) {
+        e.preventDefault();
+        e.stopPropagation();
+        onMaskClick?.();
+        if (!maskClosable || (!animatingClosable && isAnimating.current)) {
+            return;
+        }
+        closeScene.current = 'mask';
+        close?.(e);
+    }
+
+    function renderMasking({ prefixCls }) {
+        return !mountOnEnter || outerVisible || !unmountOnExit ? (
+            <Portal getContainer={getContainer}>
+                <div
+                    className={cls(`${prefixCls}-masking`, 'all-border-box', className)}
+                    ref={domRef}
+                >
+                    <Transition
+                        in={innerVisible}
+                        timeout={maskTransitionTimeout}
+                        type={maskTransitionType}
+                        mountOnEnter={mountOnEnter}
+                        unmountOnExit={unmountOnExit}
+                        nodeRef={maskRef}
+                    >
+                        <div
+                            ref={maskRef}
+                            className={cls(`${prefixCls}-masking-mask`, extraClass, maskClass)}
+                            onClick={handleMaskAction}
+                            style={maskStyle}
+                        />
+                    </Transition>
+                    <Transition
+                        in={innerVisible}
+                        timeout={contentTransitionTimeout}
+                        type={contentTransitionType}
+                        transitionVarType={contentTransitionVarType}
+                        mountOnEnter={mountOnEnter}
+                        unmountOnExit={unmountOnExit}
+                        nodeRef={contentRef}
+                    >
+                        <div
+                            ref={contentRef}
+                            className={cls(
+                                `${prefixCls}-masking-content`,
+                                { 'at-center': contentAtCenter },
+                                extraClass,
+                                contentClass,
+                            )}
+                            style={contentStyle}
+                        >
+                            {children}
+                        </div>
+                    </Transition>
+                </div>
+            </Portal>
+        ) : null;
+    }
+
+    return <ContextLayout>{renderMasking}</ContextLayout>;
+});
+
+export function methodsGenerator<P extends OpenBaseProps>(Comp: React.FunctionComponent<P>) {
+    return {
+        /**
+         * 打开模态弹窗
+         * @desc {en} Open a Masking
+         * @param {MaskingProps} config Configuration
+         * @returns {{ close: () => void; update: (newConfig: MaskingProps) => void; }}
+         */
+        open: open(Comp),
+    };
+}
+
+const MaskingWithGlobalContext = CompWithGlobalContext(Masking);
+
+/**
+ * 通用模态弹窗，内部内容自定义。默认做了防滚动穿透处理，如果弹层内容中需要滚动，则需将滚动容器传入`getScrollContainer`属性以在未滚动到顶部或底部时释放滚动。
+ * @en Generic modal popup with custom internal content. By default, anti-scroll penetration processing is performed. If scrolling is required in the content of the bullet layer, need to pass the scroll container to the `getScrollContainer` to release scrolling when it is not scrolled to the top or bottom.
+ * @type 反馈
+ * @type_en Feedback
+ * @name 模态弹窗
+ * @name_en Masking
+ */
+export default componentWrapper(Masking, methodsGenerator(MaskingWithGlobalContext));

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

@@ -0,0 +1,88 @@
+import React from 'react';
+import { appendElementById, removeElement, nextTick } from '@arco-design/mobile-utils';
+import { ReactDOMRender, renderRootCache } from '../_helpers/render';
+import { GlobalContextParams } from '../context-provider';
+
+export interface OpenBaseProps {
+    // 从config继承的属性
+    unmountOnExit?: boolean;
+    getContainer?: () => HTMLElement;
+    onClose?: (scene?: string) => void;
+    // 强制定义的属性
+    visible: boolean;
+    close: (e) => void;
+}
+
+export function getOpenMethod<T extends { key?: string }, P extends OpenBaseProps>(
+    Component: React.FunctionComponent<P>,
+    containerId?: string,
+    normalize: (config: T) => P = config => config as any,
+) {
+    return (config: T, context?: GlobalContextParams) => {
+        const baseProps: P = {
+            unmountOnExit: true,
+            ...normalize(config),
+            visible: false,
+            close: () => {},
+        };
+
+        // 不同的key用不同的容器挂载
+        const id = `_${containerId || 'ARCO_MASKING'}_DIV_${config.key || ''}_`;
+        const existedDiv = baseProps.unmountOnExit ? null : document.getElementById(id);
+        const div = existedDiv || appendElementById(id, baseProps.getContainer).child;
+        let leaving = false;
+        const { render, unmount, setRootCache } = new ReactDOMRender(
+            Component,
+            div,
+            context,
+            id,
+            existedDiv ? renderRootCache[id] : undefined,
+        );
+        let dynamicProps = { ...baseProps, getContainer: () => div };
+
+        function update(newConfig: T) {
+            dynamicProps = {
+                ...dynamicProps,
+                ...normalize(newConfig),
+            };
+            render(dynamicProps);
+        }
+
+        function close() {
+            leaving = true;
+            dynamicProps.visible = false;
+            render(dynamicProps);
+        }
+
+        dynamicProps.close = close;
+        dynamicProps.onClose = scene => {
+            baseProps.onClose && baseProps.onClose(scene);
+            if (baseProps.unmountOnExit) {
+                unmount();
+                removeElement(div);
+            }
+        };
+        render(dynamicProps);
+        if (!baseProps.unmountOnExit) {
+            setRootCache();
+        }
+        nextTick(() => {
+            if (leaving) return;
+            dynamicProps.visible = true;
+            render(dynamicProps);
+        });
+
+        return {
+            close,
+            update,
+        };
+    };
+}
+
+export function open<P extends OpenBaseProps>(
+    Component: React.FunctionComponent<P>,
+    containerId?: string,
+) {
+    type Config = Omit<P, 'visible' | 'close'> & { key?: string };
+    return getOpenMethod<Config, P>(Component, containerId);
+}

package/metaData/components/nav-bar/doc.md

@@ -0,0 +1,40 @@
+### 导航
+
+# 导航栏 NavBar
+
+导航栏组件，支持吸顶和沉浸式，支持在指定滚动位置展示，支持根据滚动位置实时更新style。
+
+======
+
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|title|导航栏中间文字，带居中和溢出省略效果|ReactNode|-|
+|children|自定义导航栏主内容，当导航栏内容为Tabs等非居中文字样式时可用|ReactNode|-|
+|leftContent|导航栏左侧内容|ReactNode|返回按钮|
+|rightContent|导航栏右侧内容|ReactNode|-|
+|style|自定义样式，最外层元素的背景文字颜色可在此定义|CSSProperties|-|
+|className|内层自定义类名|string|-|
+|wrapClass|最外层元素自定义类名|string|-|
+|fixed|是否吸顶|boolean|-|
+|statusBarHeight|沉浸式状态栏高度|number|0|
+|hasBottomLine|是否有底边框|boolean|true|
+|onClickLeft|点击左侧内容回调|(e: MouseEvent\<Element, MouseEvent\>) =\> void|-|
+|onClickRight|点击右侧内容回调|(e: MouseEvent\<Element, MouseEvent\>) =\> void|-|
+|showOffset|展示nav\-bar的offset值，当scrollTop值小于该值时，将隐藏主内容和右侧内容，左侧内容保留|number|0|
+|onShowChange|设置showOffset后，当内容显示状态发生变化后触发|(show: boolean) =\> void|-|
+|placeholder|设置fixed=true时，导航栏原本的位置是否要占住|boolean|true|
+|extra|额外渲染元素，与inner平级|ReactNode|-|
+|getScrollContainer|自定义滚动元素，不传默认是window|() =\> HTMLElement \| Window|-|
+|getComputedStyleByScroll|根据滚动offset值设置自定义style，设置该属性后将监听滚动容器的滚动事件|(offset: number) =\> CSSProperties|-|
+|onScrollChange|滚动时回调，设置该属性后将监听滚动容器的滚动事件|(offset: number) =\> void|-|
+|ariaLabel|无障碍aria\-label属性|string|""|
+|ariaRole|无障碍role属性|string|"banner"|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|navBar|@deprecated|HTMLDivElement|
+|dom|最外层元素DOM|HTMLDivElement|

package/metaData/components/nav-bar/example/back-icon.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { defaultLocale } from '@arco-design/mobile-utils';
+import { ContextLayout } from '../context-provider';
+
+function BackArrow({ color = 'currentColor' }) {
+    return (
+        <ContextLayout>
+            {({ locale = defaultLocale }) => (
+                <div
+                    role="button"
+                    className="c-svg-arrow nav-bar-back"
+                    aria-label={locale.NavBar.backBtnAriaLabel}
+                >
+                    <svg height="100%" viewBox="0 0 16 16">
+                        <path
+                            id="path-1_1_"
+                            d="M2.1,8l5.4,5.4c0.1,0.1,0.1,0.3,0,0.5L7,14.4c-0.1,0.1-0.3,0.1-0.5,0L0.7,8.5c-0.3-0.3-0.3-0.7,0-0.9
+                l5.9-5.9c0.1-0.1,0.3-0.1,0.5,0l0.5,0.5c0.1,0.1,0.1,0.3,0,0.5L2.1,8z"
+                            fill={color}
+                        />
+                    </svg>
+                </div>
+            )}
+        </ContextLayout>
+    );
+}
+
+export default BackArrow;