@fjyueke/arco-mcp 1.0.0

package/metaData/components/collapse/example/group.tsx

@@ -0,0 +1,136 @@
+import React, {
+    forwardRef,
+    Ref,
+    useContext,
+    useEffect,
+    useImperativeHandle,
+    useRef,
+    useState,
+} from 'react';
+import { cls } from '@arco-design/mobile-utils';
+import { Collapse } from './collapse';
+import { defaultContextKey, getCollapseContext, CollapseKeyContext } from './utils';
+import { GlobalContext } from '../context-provider';
+import {
+    CollapseItemContent,
+    CollapseProps,
+    CollapseRef,
+    CollapseGroupProps,
+    CollapseGroupRef,
+} from './type';
+
+export function componentGenerator<
+    P extends CollapseItemContent = CollapseProps,
+    R extends CollapseRef = CollapseRef,
+>(Comp: React.ForwardRefExoticComponent<P & React.RefAttributes<R>>) {
+    return forwardRef((props: CollapseGroupProps<P>, ref: Ref<CollapseGroupRef | null>) => {
+        const {
+            items = [],
+            className = '',
+            style = {},
+            defaultActiveItems = [],
+            useAccordion = false,
+            disabled = false,
+            children,
+            groupKey,
+        } = props;
+        const [innerActiveItems, setInnerActiveItems] = useState<boolean[]>([]);
+        const [activeItems, setActiveItems] = useState<boolean[]>([]);
+        /** 用于children模式下的active管理 */
+        const [childActiveItems, setChildActiveItems] = useState<string[]>([]);
+        const contextKey = groupKey || defaultContextKey;
+        const CollapseContext = getCollapseContext(contextKey);
+        const domRef = useRef<HTMLDivElement | null>(null);
+        const { prefixCls } = useContext(GlobalContext);
+
+        const formatArray = (input: string[]) => {
+            const arr = input;
+            return items.map(item => arr.indexOf(item.value) > -1);
+        };
+
+        const handleChange = (value: string) => {
+            if (disabled) return;
+            if (props.onCollapse) {
+                props.onCollapse(value);
+            }
+            if (props.activeItems !== void 0) {
+                setInnerActiveItems(formatArray(props.activeItems));
+                setChildActiveItems(props.activeItems);
+                return;
+            }
+            if (!children) {
+                const temp = items.findIndex(item => item.value === value);
+                if (temp < 0 || items[temp].disabled) return;
+                const tempActiveItems = innerActiveItems.map((activeItem, index) =>
+                    index === temp ? !activeItem : !useAccordion && activeItem,
+                );
+                setInnerActiveItems(tempActiveItems);
+            } else {
+                const tempValue = childActiveItems.includes(value);
+                setChildActiveItems(
+                    tempValue
+                        ? childActiveItems.filter(item => item !== value)
+                        : useAccordion // 手风琴模式只有一个展开项
+                        ? [value]
+                        : [...childActiveItems, value],
+                );
+            }
+        };
+
+        useEffect(() => {
+            setInnerActiveItems(formatArray(defaultActiveItems));
+            setChildActiveItems(defaultActiveItems);
+        }, []);
+
+        useEffect(() => {
+            setActiveItems(
+                props.activeItems === void 0 ? innerActiveItems : formatArray(props.activeItems),
+            );
+            if (children && props.activeItems) {
+                setChildActiveItems(props.activeItems);
+            }
+        }, [props.activeItems, innerActiveItems]);
+
+        useImperativeHandle(ref, () => ({
+            dom: domRef.current,
+        }));
+
+        return (
+            <div
+                className={cls(`${prefixCls}-collapse-group`, className)}
+                style={style}
+                ref={domRef}
+            >
+                <CollapseKeyContext.Provider value={{ key: contextKey }}>
+                    <CollapseContext.Provider
+                        value={{
+                            isGroup: true,
+                            onCollapse: handleChange,
+                            disabled,
+                            value: children ? childActiveItems : void 0,
+                        }}
+                    >
+                        {children || (
+                            <>
+                                {items.map((item, index) => {
+                                    const compProps = {
+                                        active: activeItems[index],
+                                        disabled: disabled || item.disabled,
+                                        defaultActive: formatArray(defaultActiveItems)[index],
+                                        ...item,
+                                    };
+
+                                    return <Comp key={item.value} {...compProps} />;
+                                })}
+                            </>
+                        )}
+                    </CollapseContext.Provider>
+                </CollapseKeyContext.Provider>
+            </div>
+        );
+    });
+}
+
+export const Group = componentGenerator(Collapse);
+
+export default Group;

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

@@ -0,0 +1,16 @@
+import { componentWrapper } from '@arco-design/mobile-utils';
+import { Collapse } from './collapse';
+import Group from './group';
+
+export * from './collapse';
+export * from './type';
+
+/**
+ * 折叠面板组件，支持手风琴模式。
+ * @en Collapse supports accordion mode.
+ * @type 信息展示
+ * @type_en Data Display
+ * @name 折叠面板
+ * @name_en Collapse
+ */
+export default componentWrapper(Collapse, { Group });

package/metaData/components/collapse/example/utils.tsx

@@ -0,0 +1,20 @@
+import React, { Context } from 'react';
+import { GroupContextParams } from './type';
+
+export const defaultContextKey = '__COLLAPSE_CONTEXT__';
+export const allContexts: Record<string, Context<GroupContextParams>> = {};
+
+export function getCollapseContext(key: string) {
+    if (!allContexts[key]) {
+        allContexts[key] = React.createContext<GroupContextParams>({
+            isGroup: false,
+            value: [],
+            onCollapse: () => {},
+        });
+    }
+    return allContexts[key];
+}
+
+export const CollapseKeyContext = React.createContext<{ key: string }>({
+    key: defaultContextKey,
+});

package/metaData/components/context-provider/doc.md

@@ -0,0 +1,44 @@
+### 其他
+
+# 全局配置 ContextProvider
+
+全局数据控制组件，用于替换全局数据。
+
+======
+
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|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/context-provider/example/index.tsx

@@ -0,0 +1,208 @@
+import React, {
+    createContext,
+    useState,
+    useEffect,
+    useCallback,
+    useMemo,
+    useRef,
+    Attributes,
+} from 'react';
+import { addCssRules, removeCssStyleDom, defaultLocale, ILocale } from '@arco-design/mobile-utils';
+import { CreateRootFnType } from '../_helpers';
+
+export interface GlobalContextParams {
+    /**
+     * 组件类名前缀
+     * @en Component classname prefix
+     * @default "arco"
+     */
+    prefixCls?: string;
+    /**
+     * 手动控制当前所在系统，传入后将直接使用传入的值，ssr场景需指定系统初始值时适用
+     * @en Manually control the current system, and the incoming value will be used directly after being passed in. It is applicable when the initial value of the system needs to be specified in the ssr scenario.
+     * @default ""
+     */
+    system?: 'pc' | 'android' | 'ios' | '';
+    /**
+     * 是否监听系统原生的暗黑模式变化(prefers-color-scheme: dark)以判断是否切为暗黑模式
+     * @en Whether to monitor the system's native dark mode changes (prefers-color-scheme: dark) to determine whether to switch to dark mode
+     * @default false
+     */
+    useDarkMode?: boolean;
+    /**
+     * 是否处于暗黑模式，指定后以指定的值为准
+     * @en Whether it is in dark mode, the value shall prevail after being specified
+     * @default false
+     */
+    isDarkMode?: boolean;
+    /**
+     * 当处于暗黑模式时，body上挂载的类名，为空值时不挂载类名
+     * @en When in dark mode, the class name mounted on the body, if it is empty, the class name will not be mounted
+     * @default "arco-theme-dark"
+     */
+    darkModeSelector?: string;
+    /**
+     * 主题变量，传入后将在线替换css变量，需设置less变量 @use-css-vars: 1
+     * @en Theme variable. The css variable will be replaced online after input. The less variable needs to be set @use-css-vars: 1
+     */
+    theme?: Record<string, string>;
+    /**
+     * 国际化语言包配置
+     * @en Internationalized language configuration
+     */
+    locale?: ILocale;
+    /**
+     * 是否使用Rtl模式
+     * @en Whether to use rtl
+     * @default false
+     */
+    useRtl?: boolean;
+    /**
+     * 当系统原生暗黑模式发生变化时触发，useDarkMode=true 时有效
+     * @en Triggered when the system's native dark mode changes, valid when useDarkMode=true
+     */
+    onDarkModeChange?: (isDark: boolean) => void;
+    /**
+     * React19 修改了 createRoot 的引入路径，导致组件内部无法直接引入（低react版本会找不到模块）。因此使用 react 19 的用户需从外部传入 createRoot 方法
+     * @en Users using react 19 need to pass in the createRoot method from outside
+     */
+    createRoot?: CreateRootFnType;
+}
+
+const DEFAULT_DARK_MODE_SELECTOR = 'arco-theme-dark';
+
+export const defaultContext: GlobalContextParams = {
+    prefixCls: 'arco',
+    system: '',
+    useDarkMode: false,
+    darkModeSelector: DEFAULT_DARK_MODE_SELECTOR,
+    locale: defaultLocale,
+    useRtl: false,
+};
+
+export const GlobalContext = createContext<GlobalContextParams>(defaultContext);
+
+export interface ContextProviderProps extends GlobalContextParams {
+    children: React.ReactNode;
+}
+
+export type WithGlobalContext<T> = T & { context?: GlobalContextParams };
+
+/**
+ * 全局数据控制组件，用于替换全局数据。
+ * @en Global data control component, used to replace global data.
+ * @type 其他
+ * @type_en Others
+ * @name 全局配置
+ * @name_en ContextProvider
+ */
+export default function ContextProvider(props: ContextProviderProps) {
+    const {
+        children,
+        useDarkMode,
+        isDarkMode: userSetIsDarkMode,
+        darkModeSelector = DEFAULT_DARK_MODE_SELECTOR,
+        theme,
+        locale = defaultLocale,
+        onDarkModeChange,
+        ...restProps
+    } = props;
+
+    const [isDarkModeState, setIsDarkModeState] = useState<boolean>(() => {
+        if (typeof window !== 'undefined' && useDarkMode) {
+            return window.matchMedia('(prefers-color-scheme: dark)').matches;
+        }
+        return false;
+    });
+    const mountedRef = useRef(false);
+
+    const setDarkModeState = (isDark: boolean, needChange = true) => {
+        setIsDarkModeState(isDark);
+        needChange && onDarkModeChange && onDarkModeChange(isDark);
+    };
+
+    const isDarkMode = useMemo(() => {
+        // 如果未开启暗黑模式则不对body做操作
+        // @en If dark mode is not turned on, no operation will be performed on the body
+        if (userSetIsDarkMode === void 0 && !useDarkMode) {
+            return false;
+        }
+        const value = Boolean(userSetIsDarkMode !== void 0 ? userSetIsDarkMode : isDarkModeState);
+        const needUpdateBody = darkModeSelector && typeof document !== 'undefined';
+        if (value) {
+            needUpdateBody && document.body.classList.add(darkModeSelector);
+        } else {
+            needUpdateBody && document.body.classList.remove(darkModeSelector);
+        }
+        return value;
+    }, [userSetIsDarkMode, isDarkModeState, darkModeSelector, useDarkMode]);
+
+    const changeDarkMode = useCallback(
+        (res: MediaQueryListEvent) => setDarkModeState(res.matches),
+        [],
+    );
+
+    useEffect(() => {
+        const matchMedia = window.matchMedia('(prefers-color-scheme: dark)');
+        if (useDarkMode) {
+            const dark = matchMedia.matches;
+            setDarkModeState(dark, mountedRef.current);
+            if (typeof matchMedia.addEventListener === 'function') {
+                matchMedia.addEventListener('change', changeDarkMode);
+            } else if (typeof matchMedia.addListener === 'function') {
+                matchMedia.addListener(changeDarkMode);
+            }
+        }
+        mountedRef.current = true;
+        return () => {
+            if (useDarkMode) {
+                if (typeof matchMedia.removeEventListener === 'function') {
+                    matchMedia.removeEventListener('change', changeDarkMode);
+                } else if (typeof matchMedia.removeListener === 'function') {
+                    matchMedia.removeListener(changeDarkMode);
+                }
+            }
+        };
+    }, [useDarkMode]);
+
+    useEffect(() => {
+        if (!theme) {
+            return;
+        }
+        addCssRules('arcoCustomTheme', theme);
+        return () => {
+            removeCssStyleDom('arcoCustomTheme');
+        };
+    }, [theme]);
+
+    return (
+        <GlobalContext.Provider
+            value={{
+                ...defaultContext,
+                ...restProps,
+                isDarkMode,
+                useDarkMode,
+                locale: locale || defaultLocale,
+            }}
+        >
+            {children}
+        </GlobalContext.Provider>
+    );
+}
+
+export const ContextLayout = GlobalContext.Consumer;
+
+export function CompWithGlobalContext<P extends Attributes>(Component: React.FunctionComponent<P>) {
+    return function (props: WithGlobalContext<P>) {
+        const { context: propsContext, ...others } = props;
+        return (
+            <ContextLayout>
+                {context => (
+                    <ContextProvider {...{ ...context, ...propsContext }}>
+                        <Component {...(others as P)} />
+                    </ContextProvider>
+                )}
+            </ContextLayout>
+        );
+    };
+}

package/metaData/components/count-down/doc.md

@@ -0,0 +1,40 @@
+### 信息展示
+
+# 倒计时 CountDown
+
+倒计时组件
+
+======
+
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|className|自定义类名|string|-|
+|style|自定义样式|CSSProperties|-|
+|time|倒计时时长，单位毫秒|number \| TimeDataType|0|
+|format|自定义格式 D:天数 DD:天数（个位数补0） H:小时 HH:小时（个位数补0） m:分钟 mm:分钟（个位数补0） s:秒数 ss:秒数（个位数补0） S:毫秒（1 位）SS:毫秒（2 位）SSS:毫秒（3 位）|string|HH:mm:ss|
+|autoStart|是否自动开始倒计时|boolean|true|
+|millisecond|是否开启毫秒级渲染|boolean|false|
+|onFinish|倒计时结束时触发|() =\> void|-|
+|onChange|倒计时变化时触发|(val: TimeDataType, ts: number) =\> void|-|
+|renderChild|自定义内容|(val: TimeDataType) =\> ReactNode|-|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|
+|start|开始|() =\> void|
+|pause|暂停|() =\> void|
+|reset|重置|() =\> void|
+
+> TimeDataType
+
+|参数|描述|类型|
+|----------|-------------|------|
+|days|天数|number|
+|hours|小时|number|
+|minutes|分钟|number|
+|seconds|秒数|number|
+|milliseconds|毫秒|number|

package/metaData/components/count-down/example/hooks.tsx

@@ -0,0 +1,118 @@
+import { useState, useEffect, useRef } from 'react';
+import { useRefState } from '../_helpers';
+import { startTask, stopTask } from './singleton';
+import { CountDownProps, TimeDataType } from './type';
+import { parseTime } from './util';
+
+export type UseCountDownOptions = {
+    time: number;
+} & Pick<CountDownProps, 'millisecond' | 'autoStart' | 'onChange' | 'onFinish'>;
+
+export const useCountDown = (options: UseCountDownOptions) => {
+    const taskIdRef = useRef<number>(0);
+    const endTimeRef = useRef<number | undefined>(undefined);
+    const countingRef = useRef<boolean | undefined>(undefined);
+    const [remain, remainRef, setRemain] = useRefState(options.time);
+    const [current, setCurrent] = useState<TimeDataType>(parseTime(options.time));
+    const taskType = options.millisecond ? 'micro' : 'macro';
+
+    // 暂停
+    // @en Pause
+    const pause = () => {
+        countingRef.current = false;
+        stopTask(taskType, taskIdRef.current);
+    };
+    // 计算当前剩余时间，以毫秒为单位
+    // @en Calculate the current remaining time in milliseconds
+    const getCurrentRemain = () => {
+        const leftTime = Math.max((endTimeRef.current as number) - Date.now(), 0);
+        if (options.millisecond) {
+            return leftTime;
+        }
+        return Math.round(leftTime / 1000) * 1000;
+    };
+    const setRemainCallback = (value: number) => {
+        setRemain(value);
+        const time: TimeDataType = parseTime(value);
+        if (options.onChange && value !== options.time) {
+            options.onChange(time, value);
+        }
+        if (value === 0) {
+            setCurrent(time);
+            pause();
+            options.onFinish?.();
+        }
+    };
+    // 开启任务
+    // @en start tasks
+    const tick = () => {
+        taskIdRef.current = startTask(taskType, () => {
+            if (countingRef.current) {
+                setRemainCallback(getCurrentRemain());
+                return remainRef.current > 0;
+            }
+            return false;
+        });
+    };
+    // 开始
+    // @en Start
+    const start = (reStart = false) => {
+        if (!countingRef.current) {
+            if (reStart) {
+                endTimeRef.current = Date.now() + options.time;
+            } else {
+                endTimeRef.current = Date.now() + remainRef.current;
+            }
+            countingRef.current = true;
+            tick();
+        }
+    };
+    // 重置
+    // @en Reset
+    const reset = () => {
+        const totalTime = options.time;
+        endTimeRef.current = Date.now() + totalTime;
+        pause();
+        setRemainCallback(totalTime);
+        if (options.autoStart) {
+            start(true);
+        }
+    };
+
+    useEffect(() => {
+        // ummounted时如果正在运行倒计时则暂停
+        // @en Pause if the countdown is running when ummounted
+        return () => {
+            if (countingRef.current) {
+                pause();
+            }
+        };
+    }, []);
+
+    // 设置自动开始倒计时时自动启动
+    // @en Set to start automatically when the countdown starts automatically
+    useEffect(() => {
+        if (options.autoStart) {
+            start();
+        }
+    }, [options.autoStart]);
+
+    // 倒计时设置变化时重新计时
+    // @en Re-time when countdown settings change
+    useEffect(() => {
+        reset();
+    }, [options.time]);
+
+    // remain变化时同步current 即把毫秒转化为TimeDataType类型
+    // @en Synchronize current when remain changes, that is, convert milliseconds to TimeDataType
+    useEffect(() => {
+        setCurrent(parseTime(remain));
+    }, [remain]);
+
+    return {
+        start,
+        pause,
+        reset,
+        current,
+    };
+};

package/metaData/components/count-down/example/index.tsx

@@ -0,0 +1,63 @@
+import React, { useRef, forwardRef, Ref, useImperativeHandle, useMemo } from 'react';
+import { unParseTime, parseFormat } from './util';
+import { useCountDown } from './hooks';
+import { ContextLayout } from '../context-provider';
+import { CountDownProps, CountDownRef } from './type';
+
+export * from './type';
+
+/**
+ * 倒计时组件
+ * @en Countdown Component
+ * @name 倒计时
+ * @name_en CountDown
+ * @type 信息展示
+ * @type_en Data Display
+ */
+const CountDown = forwardRef((props: CountDownProps, ref: Ref<CountDownRef>) => {
+    const {
+        className = '',
+        style = {},
+        time = 0,
+        format = 'HH:mm:ss',
+        autoStart = true,
+        millisecond = false,
+        onFinish,
+        onChange,
+        renderChild,
+    } = props;
+    const domRef = useRef<HTMLDivElement>(null);
+
+    // 传入倒计时等变量得到开始暂停启动三个方法以及目前所剩时间current(TimeDataType格式)
+    // @en get start, pause, reset methods and the current remaining time —— current (TimeDataType format) by inputing variables such as countdown
+    const { start, pause, reset, current } = useCountDown({
+        time: typeof time === 'number' ? time : unParseTime(time),
+        millisecond,
+        onChange,
+        onFinish,
+        autoStart,
+    });
+
+    // 导出dom以及start,pause,reset三个方法
+    // @en Export dom and three methods of start, pause and reset
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+        start,
+        pause,
+        reset,
+    }));
+
+    const currentStr = useMemo(() => parseFormat(format, current), [format, current]);
+
+    return (
+        <ContextLayout>
+            {({ prefixCls }) => (
+                <div className={`${prefixCls}-count-down ${className}`} style={style} ref={domRef}>
+                    {renderChild ? renderChild(current) : currentStr}
+                </div>
+            )}
+        </ContextLayout>
+    );
+});
+
+export default CountDown;