@fjyueke/arco-mcp 1.0.0

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

@@ -0,0 +1,335 @@
+import React, { useEffect, forwardRef, Ref, useRef, useImperativeHandle, ReactNode } from 'react';
+import { cls, componentWrapper } from '@arco-design/mobile-utils';
+import { ContextLayout, CompWithGlobalContext } from '../context-provider';
+import Transition from '../transition';
+import IconErrorCircle from '../icon/IconErrorCircle';
+import IconWarnCircle from '../icon/IconWarnCircle';
+import IconSuccessCircle from '../icon/IconSuccessCircle';
+import Portal from '../portal';
+import { ToastBaseProps, toast } from './methods';
+import Loading from '../loading';
+import { usePreventBodyScroll } from '../_helpers';
+
+export * from './methods';
+
+export type ToastType = 'success' | 'error' | 'warn';
+
+export interface ToastProps {
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     * 提示内容
+     * @en Tip content
+     */
+    content?: React.ReactNode;
+    /**
+     * 自动关闭的延时（单位: ms），设置为0则不会自动关闭
+     * @en Duration of automatic shutdown (unit: ms), if set to 0, it will not automatically shutdown
+     * @default 3000
+     */
+    duration?: number;
+    /**
+     * 自定义图标
+     * @en Custom icon
+     */
+    icon?: React.ReactNode;
+    /**
+     * 内容排列布局
+     * @en Content layout
+     * @default "vertical"
+     */
+    layout?: 'vertical' | 'horizontal';
+    /**
+     * 打开关闭动画执行时长（单位: ms）
+     * @en Open and close animation duration (unit: ms)
+     * @default 300
+     */
+    transitionDuration?: number;
+    /**
+     * 关闭函数
+     * @en Close function
+     */
+    close?: () => void;
+    /**
+     * 关闭后的回调函数
+     * @en Callback after closing
+     */
+    onClose?: () => void;
+    /**
+     * 是否为加载态
+     * @en Whether it is in the loading state
+     */
+    loading?: boolean;
+    /**
+     * 加载图标，传入Icon组件type属性或node
+     * @en Loading icon, input the type or node of icon component
+     */
+    loadingIcon?: React.ReactNode;
+    /**
+     * 加载图标内部元素，仅在 loading 为 true 时生效
+     * @en Inner element of loading icon, only takes effect when loading is true
+     */
+    loadingInner?: string;
+    /**
+     * 是否禁止toast以外区域的交互
+     * @en Whether to prohibit interaction in areas other than toast
+     * @default false
+     */
+    disableBodyTouch?: boolean;
+    /**
+     * 是否显示toast
+     * @en Whether to show toast
+     * @default false
+     */
+    visible?: boolean;
+    /**
+     * 获取挂载容器
+     * @en Get mounted container
+     */
+    getContainer?: () => HTMLElement;
+    /**
+     * toast展示信息类型，不同类型对应不同图标，info表示纯文字信息无图标
+     * @en toast displays information types, different types correspond to different icons, info means plain text information without icons
+     * @default "info"
+     */
+    type?: ToastType | 'info';
+    /**
+     * toast出现位置
+     * @en The direction where the toast appears
+     * @default "center"
+     */
+    direction?: 'center' | 'top' | 'bottom';
+    /**
+     * 自定义不同类型对应的不同图标
+     * @en Customize different icons corresponding to different types
+     */
+    typeIconMap?: Partial<Record<ToastType, ReactNode>>;
+    /**
+     * 页面初始 overflow 状态，即关闭toast时 overflow 应该还原的状态
+     * @en The initial overflow state of the page, that is, the state of overflow should be restored when toast is closed
+     * @default 第一个全屏组件（弹窗、toast等）打开时页面overflow值
+     * @default_en The page overflow value when the first fullscreen component (popup, toast, etc.) is opened
+     */
+    initialBodyOverflow?: string;
+}
+
+export interface ToastRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+}
+
+const Toast = forwardRef((props: ToastProps, ref: Ref<ToastRef>) => {
+    const {
+        className,
+        getContainer,
+        visible = false,
+        onClose,
+        close,
+        type = 'info',
+        icon,
+        layout = 'vertical',
+        duration = 3000,
+        transitionDuration = 300,
+        content,
+        loading = false,
+        loadingIcon,
+        disableBodyTouch = false,
+        loadingInner,
+        direction = 'center',
+        typeIconMap,
+        initialBodyOverflow,
+    } = props;
+    const closeTimerRef = useRef<number | undefined>(undefined);
+    const domRef = useRef<HTMLDivElement | null>(null);
+    const wrapDomRef = useRef<HTMLDivElement | null>(null);
+    const isInitialMount = useRef(false);
+    const hasType = type && type !== 'info';
+
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+    }));
+
+    usePreventBodyScroll(visible, disableBodyTouch, initialBodyOverflow);
+
+    function handleClose() {
+        if (close) {
+            close();
+        }
+    }
+
+    function startCloseTimer() {
+        if (duration) {
+            clearTimeout(closeTimerRef.current);
+
+            closeTimerRef.current = window.setTimeout(() => {
+                handleClose();
+            }, duration);
+        }
+    }
+
+    function handleClickMask(e: React.MouseEvent) {
+        if (disableBodyTouch) {
+            e.preventDefault();
+        }
+    }
+
+    function getTypeIcons() {
+        const map = typeIconMap || {};
+        const defaultMap = {
+            success: <IconSuccessCircle />,
+            error: <IconErrorCircle />,
+            warn: <IconWarnCircle />,
+        };
+        return map[type] || defaultMap[type] || null;
+    }
+
+    useEffect(() => {
+        const mounted = isInitialMount.current;
+        if (visible) {
+            startCloseTimer();
+        } else {
+            clearTimeout(closeTimerRef.current);
+            if (mounted) {
+                setTimeout(() => {
+                    onClose && onClose();
+                }, transitionDuration);
+            }
+        }
+        isInitialMount.current = true;
+    }, [visible]);
+
+    useEffect(() => {
+        startCloseTimer();
+    }, [duration]);
+
+    function renderComponent(prefixClass: string) {
+        return (
+            <div
+                className={cls(`${prefixClass}-wrapper`, `from-${direction}`, {
+                    'no-event': !disableBodyTouch,
+                })}
+                onClick={handleClickMask}
+                ref={wrapDomRef}
+            >
+                <div
+                    className={cls(`${prefixClass}-inner`, layout, {
+                        [`${prefixClass}-inner-mixin`]:
+                            (loading || hasType || icon) && layout === 'vertical',
+                    })}
+                >
+                    {loading && (
+                        <div className={`${prefixClass}-loading-wrapper`}>
+                            {loadingIcon !== void 0 ? (
+                                loadingIcon
+                            ) : (
+                                <Loading
+                                    className="loading-icon"
+                                    type="arc"
+                                    stroke={2}
+                                    radius={loadingInner ? 19 : 11}
+                                />
+                            )}
+                            {loadingInner ? (
+                                <span className={`${prefixClass}-loading-inner`}>
+                                    {loadingInner}
+                                </span>
+                            ) : null}
+                        </div>
+                    )}
+                    {/* success、error、warn */}
+                    {!loading && hasType ? getTypeIcons() : null}
+                    {/* Custom icon */}
+                    {!loading && !hasType && icon ? icon : null}
+                    {content ? <div className={`${prefixClass}-content`}>{content}</div> : null}
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <ContextLayout>
+            {({ prefixCls }) => (
+                <Portal getContainer={getContainer}>
+                    <div
+                        className={cls(`${prefixCls}-toast`, 'all-border-box', className)}
+                        ref={domRef}
+                    >
+                        <Transition
+                            in={visible}
+                            timeout={transitionDuration}
+                            type="fade"
+                            nodeRef={wrapDomRef}
+                        >
+                            {renderComponent(`${prefixCls}-toast`)}
+                        </Transition>
+                    </div>
+                </Portal>
+            )}
+        </ContextLayout>
+    );
+});
+
+export function methodsGenerator<P extends ToastBaseProps>(Comp: React.FunctionComponent<P>) {
+    return {
+        /**
+         * 展示常规提示框
+         * @desc {en} Show regular toast
+         * @param {string | ToastProps} config Configuration
+         * @returns {{ update: (config: ToastProps) => void; close: () => void }}
+         */
+        toast: toast(Comp),
+        /**
+         * 展示常规提示框，同 Toast.toast
+         * @desc {en} Show regular toast, the same as Toast.toast
+         * @param {string | ToastProps} config Configuration
+         * @returns {{ update: (config: ToastProps) => void; close: () => void }}
+         */
+        info: toast(Comp, 'info'),
+        /**
+         * 展示成功提示框(含成功icon)
+         * @desc {en} Show success prompt toast (including success icon)
+         * @param {string | ToastProps} config Configuration
+         * @returns {{ update: (config: ToastProps) => void; close: () => void }}
+         */
+        success: toast(Comp, 'success'),
+        /**
+         * 展示错误提示框(含错误icon)
+         * @desc {en} Display error prompt toast (including error icon)
+         * @param {string | ToastProps} config Configuration
+         * @returns {{ update: (config: ToastProps) => void; close: () => void }}
+         */
+        error: toast(Comp, 'error'),
+        /**
+         * 展示加载中提示框(含加载中icon)
+         * @desc {en} Display loading prompt toast (including loading icon)
+         * @param {string | ToastProps} config Configuration
+         * @returns {{ update: (config: ToastProps) => void; close: () => void }}
+         */
+        loading: toast(Comp, 'loading'),
+        /**
+         * 展示警告提示框(含警告icon)
+         * @desc {en} Display warning prompt toast (including warning icon)
+         * @param {string | ToastProps} config Configuration
+         * @returns {{ update: (config: ToastProps) => void; close: () => void }}
+         */
+        warn: toast(Comp, 'warn'),
+    };
+}
+
+const ToastWithGlobalContext = CompWithGlobalContext(Toast);
+
+/**
+ * 轻提示组件，支持各个场景下调用方法。
+ * @en The toast component, supports calling methods in various scenarios.
+ * @type 反馈
+ * @type_en Feedback
+ * @name 轻提示
+ * @name_en Toast
+ */
+export default componentWrapper(Toast, methodsGenerator(ToastWithGlobalContext));

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

@@ -0,0 +1,87 @@
+import React from 'react';
+import { nextTick } from '@arco-design/mobile-utils';
+import { ReactDOMRender } from '../_helpers/render';
+import { GlobalContextParams } from '../context-provider';
+
+export interface ToastBaseProps {
+    getContainer?: () => HTMLElement;
+    onClose?: (scene?: string) => void;
+    content?: React.ReactNode;
+    // 强制定义的属性
+    visible?: boolean;
+    close?: (e) => void;
+    type?: string;
+    loading?: boolean;
+}
+
+export function toast<P extends ToastBaseProps>(
+    Component: React.FunctionComponent<P>,
+    type?: string,
+) {
+    type Config = Omit<P, 'visible' | 'close'>;
+    return (originConfig: string | Config, context?: GlobalContextParams) => {
+        const config =
+            typeof originConfig === 'string'
+                ? ({
+                      content: originConfig,
+                      type: 'info',
+                  } as Config)
+                : originConfig;
+
+        if (type !== void 0) {
+            config.type = type;
+            config.loading = type === 'loading';
+        }
+
+        const div = document.createElement('div');
+        document.body.appendChild(div);
+        const { render, unmount } = new ReactDOMRender(Component, div, context);
+
+        function destroy() {
+            const { onClose } = config;
+            onClose && onClose();
+            unmount();
+            if (div.parentNode) {
+                div.parentNode.removeChild(div);
+            }
+        }
+
+        let dynamicProps = {
+            ...config,
+            close,
+            getContainer: () => div,
+            onClose: destroy,
+            visible: false,
+        };
+        let leaving = false;
+
+        function update(newConfig: Config) {
+            dynamicProps = {
+                ...dynamicProps,
+                ...newConfig,
+            };
+            render(dynamicProps);
+        }
+
+        function close() {
+            leaving = true;
+            dynamicProps.visible = false;
+            render(dynamicProps);
+        }
+
+        render(dynamicProps);
+        nextTick(() => {
+            // 在即将打开时发现已经调用了close则取消打开操作
+            // @en When it is about to be opened, it is found that close has been called and the open operation is canceled
+            if (leaving) return;
+            dynamicProps.visible = true;
+            render(dynamicProps);
+        });
+
+        return {
+            update,
+            close,
+            hide: close,
+        };
+    };
+}

package/metaData/components/transition/doc.md

@@ -0,0 +1,19 @@
+### 其他
+
+# 动画过渡 Transition
+
+react-transition-group/CSSTransition 的简单封装。
+
+======
+
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|children|待执行动画内容|ReactNode|-|
+|type|待执行动画css类名|string|必填|
+|in|内容是否可见|boolean|必填|
+|timeout|执行动画时间|number \| \{ appear?: number; enter?: number; exit?: number; \}|必填|
+|mountOnEnter|是否在打开时再加载内容|boolean|true|
+|unmountOnExit|是否在退出时卸载内容|boolean|true|
+|transitionVarType|动画时长变量标识|string|type 属性值|

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

@@ -0,0 +1,113 @@
+import type { CSSProperties, ReactElement, ReactNode } from 'react';
+import React, { cloneElement, useMemo } from 'react';
+import type { CSSTransitionProps } from 'react-transition-group/CSSTransition';
+import CSSTransition from 'react-transition-group/CSSTransition';
+import { ContextLayout } from '../context-provider';
+
+export type TransitionProps = Omit<CSSTransitionProps, 'timeout'> & {
+    /**
+     * 待执行动画内容
+     * @en Animation content to be executed
+     */
+    children?: ReactNode;
+    /**
+     * 待执行动画css类名
+     * @en Css classname of the animation to be executed
+     */
+    type: string;
+    /**
+     * 内容是否可见
+     * @en Whether the content is visible
+     */
+    in: boolean;
+    /**
+     * 执行动画时间
+     * @en Execute animation time
+     */
+    timeout: number | { appear?: number; enter?: number; exit?: number };
+    /**
+     * 是否在打开时再加载内容
+     * @en Whether to reload content when it is opened
+     * @default true
+     */
+    mountOnEnter?: boolean;
+    /**
+     * 是否在退出时卸载内容
+     * @en Whether to unmount content on exit
+     * @default true
+     */
+    unmountOnExit?: boolean;
+    /**
+     * 动画时长变量标识
+     * @en Animation duration variable identifier
+     * @default type 属性值
+     */
+    transitionVarType?: string;
+};
+
+const DEFAULT_TIMEOUT = 300;
+
+/**
+ * react-transition-group/CSSTransition 的简单封装。
+ * @en Simple wrapper for react-transition-group/CSSTransition.
+ * @type 其他
+ * @type_en Others
+ * @name 动画过渡
+ * @name_en Transition
+ */
+export default function Transition(props: TransitionProps) {
+    const {
+        children = <div />,
+        type,
+        in: transIn,
+        timeout = DEFAULT_TIMEOUT,
+        mountOnEnter = true,
+        unmountOnExit = true,
+        transitionVarType,
+        ...restProps
+    } = props;
+    const varPrefix = `builtin-transition-${transitionVarType || type}`;
+
+    // 计算动画时长，支持对象形式的 timeout
+    const getDuration = (phase: 'appear' | 'enter' | 'exit') => {
+        if (typeof timeout === 'number') {
+            return timeout;
+        }
+        return timeout[phase] || DEFAULT_TIMEOUT;
+    };
+
+    // 生成 CSS 变量样式
+    const cssVariables = useMemo(() => {
+        const enterDuration = getDuration('enter');
+        const exitDuration = getDuration('exit');
+        const appearDuration = getDuration('appear');
+
+        return {
+            [`--${varPrefix}-enter-duration`]: `${enterDuration}ms`,
+            [`--${varPrefix}-exit-duration`]: `${exitDuration}ms`,
+            [`--${varPrefix}-appear-duration`]: `${appearDuration}ms`,
+        } as CSSProperties;
+    }, [timeout, varPrefix]);
+
+    return (
+        <ContextLayout>
+            {({ prefixCls }) => (
+                <CSSTransition
+                    in={transIn}
+                    timeout={timeout}
+                    classNames={`${prefixCls}-${type}`}
+                    mountOnEnter={mountOnEnter}
+                    unmountOnExit={unmountOnExit}
+                    {...restProps}
+                >
+                    {cloneElement(children as ReactElement, {
+                        style: {
+                            ...cssVariables,
+                            ...(children as ReactElement)?.props?.style,
+                        },
+                    })}
+                </CSSTransition>
+            )}
+        </ContextLayout>
+    );
+}

package/metaData/components/uploader/doc.md

@@ -0,0 +1,82 @@
+### 数据录入
+
+# 文件上传 Uploader
+
+文件上传组件
+
+======
+
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|className|自定义类名|string|-|
+|style|自定义样式|CSSProperties|-|
+|accept|可以选择的文件类型|string|undefined|
+|multiple|是否支持多选|boolean|-|
+|capture|文件选取模式 File selection mode \[capture MDN\](https://developer\.mozilla\.org/en\-US/docs/Web/HTML/Attributes/capture)|string \| boolean|-|
+|hideStatus|是否隐藏文件上传状态|boolean|false|
+|alwaysShowSelect|是否总是展示选择Icon，默认情况下当文件数量超出limit值时会自动隐藏选择Icon|boolean|false|
+|disabled|禁用选择和删除图片|boolean|-|
+|renderDeleteArea|自定义删除区域|(fileItem: FileItem, index: number) =\> ReactNode|-|
+|renderLoadedArea|自定义上传成功区域|(fileItem: FileItem, index: number) =\> ReactNode|-|
+|renderLoadingArea|自定义上传中区域|(fileItem: FileItem, index: number) =\> ReactNode|-|
+|renderErrorArea|自定义上传失败区域|(fileItem: FileItem, index: number) =\> ReactNode|-|
+|renderFileIndexArea|自定义文件索引区域|(fileItem: FileItem, index: number) =\> ReactNode|-|
+|renderUploadArea|自定义上传按钮区域|() =\> ReactNode|-|
+|renderFileList|自定义上传文件列表展示|(methods: FileListMethods) =\> ReactNode|-|
+|upload|上传方法|(file: CommonFileItem) =\> Promise\<CommonFileItem\>|-|
+|onChange|已选文件列表发生变化|(fileList: CommonFileItem\[\]) =\> void|-|
+|maxSize|文件大小限制，单位为K|number|-|
+|onMaxSizeExceed|文件超过限制大小|(file: File) =\> void|-|
+|limit|最多选择文件数，超出数量自动隐藏上传按钮，0表示不做限制|number|0|
+|onLimitExceed|选择文件数超过限制|(files: File\[\]) =\> void|-|
+|files|已选择文件列表|CommonFileItem\[\]|必填|
+|onDeleteClick|删除点击事件|(index: number) =\> void|-|
+|onUploadClick|上传文件点击事件|() =\> void|-|
+|selectAdapter|文件选择适配器|() =\> Promise\<SelectCallback\>|-|
+|onClick|文件点击|(e: MouseEvent\<HTMLElement, MouseEvent\>, file: CommonFileItem, index: number) =\> void|-|
+|onLongPress|文件长按事件|(e: TouchEvent\<HTMLElement\>, file: CommonFileItem, index: number) =\> void|-|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层 DOM 元素|HTMLDivElement|
+
+> FileItem
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|file|文件|File|必填|
+|url|文件地址|string|-|
+|status|文件状态|"loaded" \| "loading" \| "error"|以文件自身加载状态而定|
+
+> FileListMethods
+
+|参数|描述|类型|
+|----------|-------------|------|
+|retryUpload|重新上传|(index: number) =\> void|
+|deleteFile|删除文件|(index: number) =\> void|
+
+> CommonFileItem
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|url|文件地址|string|-|
+|file|文件|File|-|
+|status|文件状态|"loaded" \| "loading" \| "error"|以文件自身加载状态而定|
+
+> SelectCallback
+
+|参数|描述|类型|
+|----------|-------------|------|
+|files|文件列表|AdapterFile\[\]|
+
+> AdapterFile
+
+|参数|描述|类型|
+|----------|-------------|------|
+|url|文件 url|string|
+|size|文件大小|number|
+|name|文件名|string|