@fjyueke/arco-mcp 1.0.0

package/metaData/components/notify/doc.md

@@ -0,0 +1,81 @@
+### 反馈
+
+# 消息通知 Notify
+
+主动操作后显示的反馈信息横条，可采用方法调用或者组件调用的方式
+
+======
+
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|className|自定义类名|string|-|
+|style|自定义样式|CSSProperties|-|
+|content|需要展示的内容|ReactNode|-|
+|type|通知类型|"success" \| "error" \| "warn" \| "info"|"info"|
+|visible|是否显示通知|boolean|false|
+|close|控制通知关闭的事件|() =\> void|-|
+|onClose|通知关闭时的回调函数|() =\> void|-|
+|getContainer|将通知放入某个模块|() =\> HTMLElement|-|
+|transitionDuration|动画的执行时间 (单位ms)|number|300|
+|duration|通知自动关闭时延 (单位ms) 设置为0时不会自动关闭|number|3000|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层dom元素|HTMLElement|
+|updateLayout|更新元素布局|() =\> void|
+
+> 方法/Methods
+
+|方法名|描述|类型|
+|----------|-------------|------|
+|info|展示常规通知|(config: string \| NotifyProps) =\> \{ update: (config: NotifyProps) =\> void; close: () =\> void \}|
+|success|展示成功通知|(config: string \| NotifyProps) =\> \{ update: (config: NotifyProps) =\> void; close: () =\> void \}|
+|error|展示错误的通知|(config: string \| NotifyProps) =\> \{ update: (config: NotifyProps) =\> void; close: () =\> void \}|
+|warn|展示警告的通知|(config: string \| NotifyProps) =\> \{ update: (config: NotifyProps) =\> void; close: () =\> void \}|
+
+> NotifyType
+
+```
+"success" | "error" | "warn" | "info"
+```
+
+> 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/notify/example/index.tsx

@@ -0,0 +1,171 @@
+import React, { useRef, forwardRef, Ref, useImperativeHandle, useEffect, useState } from 'react';
+import ReactDOM from 'react-dom';
+import { componentWrapper, nextTick } from '@arco-design/mobile-utils';
+import { ContextLayout, CompWithGlobalContext } from '../context-provider';
+import { NotifyProps, NotifyRef } from './type';
+import { getStyleWithVendor, useUpdateEffect } from '../_helpers';
+import { NotifyBaseProps, notify } from './methods';
+
+export * from './type';
+
+const Notify = forwardRef((props: NotifyProps, ref: Ref<NotifyRef>) => {
+    const {
+        className = '',
+        style,
+        visible = false,
+        transitionDuration = 300,
+        content,
+        duration = 3000,
+        onClose,
+        type = 'info',
+        close,
+        getContainer,
+    } = props;
+    const domRef = useRef<HTMLDivElement>(null);
+    const innerRef = useRef<HTMLDivElement>(null);
+    const closeTimerRef = useRef<number | undefined>(undefined);
+    const onCloseTimeRef = useRef<number | undefined>(undefined);
+    const [hasTrans, setHasTrans] = useState(!visible);
+    const [innerHeight, setInnerHeight] = useState(0);
+
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+        updateLayout,
+    }));
+
+    function startCloseTimer() {
+        if (duration) {
+            clearTimeout(closeTimerRef.current);
+            closeTimerRef.current = window.setTimeout(() => {
+                close?.();
+            }, duration);
+        }
+    }
+
+    function updateLayout() {
+        if (innerRef.current) {
+            const { height } = innerRef.current.getBoundingClientRect();
+            setInnerHeight(height);
+        }
+    }
+
+    useEffect(() => {
+        visible && updateLayout();
+        visible && startCloseTimer();
+        return () => {
+            visible && clearTimeout(closeTimerRef.current);
+        };
+    }, [visible, duration]);
+
+    useUpdateEffect(() => {
+        if (!visible) {
+            onCloseTimeRef.current = window.setTimeout(() => {
+                onClose && onClose();
+            }, transitionDuration);
+        }
+    }, [visible]);
+
+    useEffect(() => {
+        nextTick(() => {
+            setHasTrans(true);
+        });
+        return () => {
+            clearTimeout(onCloseTimeRef.current);
+        };
+    }, []);
+
+    function renderComponent(prefixClass: string) {
+        return content ? (
+            <div
+                className={`${prefixClass}-content ${
+                    visible
+                        ? `${prefixClass}-content-transition-Y0`
+                        : `${prefixClass}-content-transition-Y100`
+                }`}
+                ref={innerRef}
+                style={{
+                    ...(hasTrans
+                        ? getStyleWithVendor({
+                              transitionDuration: `${transitionDuration}ms`,
+                          })
+                        : {}),
+                }}
+            >
+                {content}
+            </div>
+        ) : null;
+    }
+    const render = prefixCls => {
+        return (
+            <div
+                className={`${prefixCls}-notify ${prefixCls}-notify-${type} ${className}`}
+                style={{
+                    ...style,
+                    ...(hasTrans
+                        ? getStyleWithVendor({
+                              transitionDuration: `${transitionDuration}ms`,
+                          })
+                        : {}),
+                    height: visible ? innerHeight : 0,
+                }}
+                ref={domRef}
+            >
+                {renderComponent(`${prefixCls}-notify`)}
+            </div>
+        );
+    };
+    return (
+        <ContextLayout>
+            {({ prefixCls }) =>
+                getContainer
+                    ? ReactDOM.createPortal(render(prefixCls), getContainer())
+                    : render(prefixCls)
+            }
+        </ContextLayout>
+    );
+});
+
+export function methodsGenerator<P extends NotifyBaseProps>(Comp: React.FC<P>) {
+    return {
+        /**
+         * 展示常规通知
+         * @desc {en} Show regular notification
+         * @param {string | NotifyProps} config
+         * @returns {{ update: (config: NotifyProps) => void; close: () => void }}
+         */
+        info: notify(Comp),
+        /**
+         * 展示成功通知
+         * @desc {en} Show success notification
+         * @param {string | NotifyProps} config
+         * @returns {{ update: (config: NotifyProps) => void; close: () => void }}
+         */
+        success: notify(Comp, 'success'),
+        /**
+         * 展示错误的通知
+         * @desc {en} Show error notification
+         * @param {string | NotifyProps} config
+         * @returns {{ update: (config: NotifyProps) => void; close: () => void }}
+         */
+        error: notify(Comp, 'error'),
+        /**
+         * 展示警告的通知
+         * @desc {en} Show warning notification
+         * @param {string | NotifyProps} config
+         * @returns {{ update: (config: NotifyProps) => void; close: () => void }}
+         */
+        warn: notify(Comp, 'warn'),
+    };
+}
+
+const NotifyWithGlobalContext = CompWithGlobalContext(Notify);
+
+/**
+ * 主动操作后显示的反馈信息横条，可采用方法调用或者组件调用的方式
+ * @en The feedback information bar displayed after active operation can be called by method or by component.
+ * @type 反馈
+ * @type_en Feedback
+ * @name 消息通知
+ * @name_en Notify
+ */
+export default componentWrapper(Notify, methodsGenerator(NotifyWithGlobalContext));

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

@@ -0,0 +1,83 @@
+import { nextTick } from '@arco-design/mobile-utils';
+import React from 'react';
+import { ReactDOMRender } from '../_helpers/render';
+import { GlobalContextParams } from '../context-provider';
+
+export interface NotifyBaseProps {
+    getContainer?: () => HTMLElement;
+    onClose?: (scene?: string) => void;
+    content?: React.ReactNode;
+    visible?: boolean;
+    close?: (e) => void;
+    type?: string;
+}
+
+export function notify<P extends NotifyBaseProps>(Component: React.FC<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;
+        }
+        const div = document.createElement('div');
+        const { getContainer } = config;
+        if (getContainer) {
+            getContainer().appendChild(div);
+        } else {
+            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,
+            onClose: destroy,
+            getContainer: () => div,
+            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(() => {
+            if (leaving) return;
+            dynamicProps.visible = true;
+            render(dynamicProps);
+        });
+
+        return {
+            update,
+            close,
+        };
+    };
+}

package/metaData/components/pagination/doc.md

@@ -0,0 +1,41 @@
+### 导航
+
+# 分页器 Pagination
+
+用于数据分页，为完全受控组件
+
+======
+
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|className|自定义类名|string|-|
+|style|自定义样式|CSSProperties|-|
+|type|分页器翻页区域样式类型，button表示按钮式分页器，text表示文本式分页器，none表示仅保留页码不含翻页区域|"button" \| "text" \| "none"|"button"|
+|icon|是否需要展示图标|ReactNode \| \[\.\.\.\]|false|
+|justify|翻页按钮水平位置，side表示两端对齐，center表示居中对齐|"center" \| "side"|"side"|
+|current|当前页码|number|1|
+|pageSize|每页条数|number|10|
+|total|数据总条数|number|0|
+|hideOnOnePage|只有一页时是否隐藏分页器|boolean|false|
+|nextFieldType|下一页样式，primary表示高亮|"default" \| "primary"|"default"|
+|prevFieldText|上一页文本|string|"上一页"|
+|nextFieldText|下一页文本|string|"下一页"|
+|renderPrevField|渲染前翻页按钮|(data: IPaginationDataParams) =\> ReactNode|-|
+|renderNextField|渲染后翻页按钮|(data: IPaginationDataParams) =\> ReactNode|-|
+|onChange|点击前/后翻页按钮时调用|(data: IPaginationDataParams) =\> void|-|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|
+
+> IPaginationDataParams
+
+|参数|描述|类型|
+|----------|-------------|------|
+|current|当前页|number|
+|pageSize|每页条数|number|
+|pageNum|总页数|number|

package/metaData/components/pagination/example/arrow.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+export default function Arrow() {
+    return (
+        <svg width="2" height="14" viewBox="3 0 2 14" fill="none" style={{ overflow: 'visible' }}>
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M7.40514 12.7583C7.6004 12.563 7.6004 12.2465 7.40514 12.0512L2.40095 7.04701L7.36396 2.084C7.55922 1.88874 7.55922 1.57216 7.36396 1.37689L7.01041 1.02334C6.81515 0.828077 6.49856 0.828077 6.3033 1.02334L0.646447 6.68019C0.470402 6.85624 0.453075 7.1309 0.594469 7.32636C0.617837 7.37275 0.64889 7.41626 0.687628 7.455L6.34448 13.1119C6.53974 13.3071 6.85633 13.3071 7.05159 13.1119L7.40514 12.7583Z"
+                fill="currentColor"
+            />
+        </svg>
+    );
+}

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

@@ -0,0 +1,292 @@
+import React, {
+    useRef,
+    forwardRef,
+    Ref,
+    useImperativeHandle,
+    useMemo,
+    ReactNode,
+    useContext,
+} from 'react';
+import { cls } from '@arco-design/mobile-utils';
+import { GlobalContext } from '../context-provider';
+import { useSystem } from '../_helpers';
+import Arrow from './arrow';
+
+export interface IPaginationDataParams {
+    /**
+     * 当前页
+     * @en Current page
+     */
+    current: number;
+    /**
+     * 每页条数
+     * @en Number of items per page
+     */
+    pageSize: number;
+    /**
+     * 总页数
+     * @en Total number of pages
+     */
+    pageNum: number;
+}
+
+export interface PaginationProps {
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     * @en Custom style
+     */
+    style?: React.CSSProperties;
+    /**
+     * 分页器翻页区域样式类型，button表示按钮式分页器，text表示文本式分页器，none表示仅保留页码不含翻页区域
+     * @en The style type of the page turning area of the pagination, and none means that only the page number is kept without the page turning area
+     * @default "button"
+     */
+    type?: 'button' | 'text' | 'none';
+    /**
+     * 是否需要展示图标
+     * @en Whether to show the icon
+     * @default false
+     */
+    icon?: boolean | ReactNode | [ReactNode, ReactNode];
+    /**
+     * 翻页按钮水平位置，side表示两端对齐，center表示居中对齐
+     * @en The horizontal position of the page turning button, side means both ends are aligned, center means center alignment
+     * @default "side"
+     */
+    justify?: 'center' | 'side';
+    /**
+     * 当前页码
+     * @en Current page
+     * @default 1
+     */
+    current?: number;
+    /**
+     * 每页条数
+     * @en Number of items per page
+     * @default 10
+     */
+    pageSize?: number;
+    /**
+     * 数据总条数
+     * @en Total number of data source
+     * @default 0
+     */
+    total?: number;
+    /**
+     * 只有一页时是否隐藏分页器
+     * @en Whether to hide the pager when there is only one page
+     * @default false
+     */
+    hideOnOnePage?: boolean;
+    /**
+     * 下一页样式，primary表示高亮
+     * @en Style of next page button, primary means highlight
+     * @default "default"
+     */
+    nextFieldType?: 'default' | 'primary';
+    /**
+     * 上一页文本
+     * @en Previous page text
+     * @default "上一页"
+     * @default_en "Previous"
+     */
+    prevFieldText?: string;
+    /**
+     * 下一页文本
+     * @en Next page text
+     * @default "下一页"
+     * @default_en "Next"
+     */
+    nextFieldText?: string;
+    /**
+     * 渲染前翻页按钮
+     * @en Custom render previous page button
+     */
+    renderPrevField?: (data: IPaginationDataParams) => ReactNode;
+    /**
+     * 渲染后翻页按钮
+     * @en Custom render next page button
+     */
+    renderNextField?: (data: IPaginationDataParams) => ReactNode;
+    /**
+     * 点击前/后翻页按钮时调用
+     * @en Callback called when the previous/next page button is clicked
+     */
+    onChange?: (data: IPaginationDataParams) => void;
+}
+
+export interface PaginationRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+}
+
+/**
+ * 用于数据分页，为完全受控组件
+ * @en The pagination component is used for data paging and is a fully controlled component.
+ * @type 导航
+ * @type_en Navigation
+ * @name 分页器
+ * @name_en Pagination
+ */
+const Pagination = forwardRef((props: PaginationProps, ref: Ref<PaginationRef>) => {
+    const { prefixCls, locale } = useContext(GlobalContext);
+    const {
+        className = '',
+        style,
+        current = 1,
+        pageSize = 10,
+        total = 5,
+        icon = false,
+        justify = 'side',
+        hideOnOnePage = false,
+        nextFieldType = 'default',
+        renderPrevField,
+        renderNextField,
+        type = 'default',
+        prevFieldText = locale?.Pagination.previousPage,
+        nextFieldText = locale?.Pagination.nextPage,
+        onChange,
+    } = props;
+    const system = useSystem();
+    const pageNum = useMemo(() => Math.ceil(total / pageSize), [total, pageSize]);
+    const domRef = useRef<HTMLDivElement | null>(null);
+
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+    }));
+
+    const iconRender = (iconType: 'prev' | 'next') => {
+        if (iconType === 'prev') {
+            if (Array.isArray(icon) && Boolean(icon.length)) {
+                return <span className="btn-icon">{icon[0]}</span>;
+            }
+            if (Object.prototype.toString.call(icon) === '[object Object]') {
+                return <span className="btn-icon">{icon}</span>;
+            }
+            return icon ? (
+                <span className="btn-icon">
+                    <Arrow />
+                </span>
+            ) : null;
+        }
+        if (Array.isArray(icon) && Boolean(icon.length)) {
+            return <span className="btn-icon">{icon.length >= 2 ? icon[1] : icon[0]}</span>;
+        }
+        if (Object.prototype.toString.call(icon) === '[object Object]') {
+            return <span className="btn-icon next">{icon}</span>;
+        }
+        return icon ? (
+            <span className="btn-icon next">
+                <Arrow />
+            </span>
+        ) : null;
+    };
+
+    const prevRender = (prefix: string) => {
+        if (type === 'none') {
+            return null;
+        }
+        const prevFieldCls = cls(`${prefix}-prev-field`, { [`flex-${justify}`]: true });
+        if (typeof renderPrevField === 'undefined') {
+            return (
+                <div className={prevFieldCls}>
+                    <div
+                        className={cls(`${prefix}-field`, 'prev', {
+                            text: type === 'text',
+                            button: type !== 'text',
+                            disabled: current === 1,
+                        })}
+                        onClick={() => {
+                            if (current <= 1) {
+                                return;
+                            }
+                            onChange?.({ pageSize, pageNum, current: Math.max(1, current - 1) });
+                        }}
+                    >
+                        {iconRender('prev')}
+                        {Boolean(prevFieldText) && (
+                            <span className="btn-text">{prevFieldText}</span>
+                        )}
+                    </div>
+                </div>
+            );
+        }
+        return (
+            <div className={prevFieldCls}>
+                {renderPrevField ? renderPrevField({ current, pageSize, pageNum }) : null}
+            </div>
+        );
+    };
+    const nextRender = (prefix: string) => {
+        if (type === 'none') {
+            return null;
+        }
+
+        const nextFieldCls = cls(`${prefix}-next-field`, { [`flex-${justify}`]: true });
+        if (typeof renderNextField === 'undefined') {
+            return (
+                <div className={nextFieldCls}>
+                    <div
+                        className={cls(`${prefix}-field`, 'next', {
+                            text: type === 'text',
+                            button: type !== 'text',
+                            [nextFieldType === 'default' ? type : 'primary']: current < pageNum,
+                            disabled: current >= pageNum,
+                        })}
+                        onClick={() => {
+                            if (current >= pageNum) {
+                                return;
+                            }
+                            onChange?.({
+                                pageSize,
+                                pageNum,
+                                current: Math.min(current + 1, pageNum),
+                            });
+                        }}
+                    >
+                        {Boolean(nextFieldText) && (
+                            <span className="btn-text">{nextFieldText}</span>
+                        )}
+                        {iconRender('next')}
+                    </div>
+                </div>
+            );
+        }
+        const nextItem = renderNextField && renderNextField({ current, pageSize, pageNum });
+        return <div className={nextFieldCls}>{nextItem}</div>;
+    };
+
+    const prefix = `${prefixCls}-pagination`;
+    return !(hideOnOnePage && pageNum === 1) ? (
+        <div
+            ref={domRef}
+            className={cls(
+                prefix,
+                system,
+                {
+                    [`${prefix}-simple`]: type === 'none',
+                },
+                className,
+            )}
+            style={style}
+        >
+            {prevRender(prefix)}
+            <div className={`${prefix}-item`}>
+                <span className={`${prefix}-item-active`}>{current}</span> / {pageNum}
+            </div>
+            {nextRender(prefix)}
+        </div>
+    ) : (
+        <div className={cls(prefix, className)} />
+    );
+});
+
+export default Pagination;