@fjyueke/arco-mcp 1.0.0

package/metaData/components/skeleton/doc.md

@@ -0,0 +1,101 @@
+### 信息展示
+
+# 骨架屏 Skeleton
+
+在内容加载过程中展示一组占位图形。
+
+======
+
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|title|是否显示标题占位图|boolean \| SkeletonTitleProps|true|
+|paragraph|是否显示段落占位图|boolean \| SkeletonParagraphProps|true|
+|avatar|是否显示头像占位图|boolean \| SkeletonAvatarProps|false|
+|grid|是否显示金刚位占位图（如该参数非空时，默认展示四列金刚位，且不展示标题/段落/头像占位符）|boolean \| SkeletonGridProps|false|
+|showAnimation|是否展示动画效果|boolean|true|
+|animation|加载动画效果，可选“扫光”、“呼吸”两种效果|"gradient" \| "breath"|"gradient"|
+|animationGradientColor|扫光动效高光颜色|string|"rgba(0, 0, 0, 0.04)"|
+|backgroundColor|占位块背景色|string|"#F7F8FA"|
+|children|子元素|ReactNode|null|
+|className|自定义类名|string|""|
+|style|自定义样式|CSSProperties|{}|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层 DOM 元素|HTMLDivElement|
+
+> Skeleton.Node
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|children|自定义组件内容|ReactNode|null|
+|className|自定义类名|string|""|
+|style|自定义样式|CSSProperties|{}|
+
+> Skeleton.Title
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|width|标题占位图宽度|ReactText|"40%"|
+|className|自定义类名|string|""|
+|style|自定义样式|CSSProperties|{}|
+
+> Skeleton.Paragraph
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|rows|段落占位图的行数|number|3|
+|width|段落占位图宽度，若为数组格式对应每行宽度，否则表示最后一行的宽度|string \| number \| ReactText\[\]|"60%"|
+|className|自定义类名|string|""|
+|style|自定义样式|CSSProperties|{}|
+
+> Skeleton.Avatar
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|className|自定义类名|string|""|
+|style|自定义样式|CSSProperties|{}|
+
+> Skeleton.Grid
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|columns|金刚位列数|number|4|
+|className|自定义类名|string|""|
+|style|自定义样式|CSSProperties|{}|
+
+> SkeletonTitleProps
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|width|标题占位图宽度|ReactText|"40%"|
+|className|自定义类名|string|""|
+|style|自定义样式|CSSProperties|{}|
+
+> SkeletonParagraphProps
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|rows|段落占位图的行数|number|3|
+|width|段落占位图宽度，若为数组格式对应每行宽度，否则表示最后一行的宽度|string \| number \| ReactText\[\]|"60%"|
+|className|自定义类名|string|""|
+|style|自定义样式|CSSProperties|{}|
+
+> SkeletonAvatarProps
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|className|自定义类名|string|""|
+|style|自定义样式|CSSProperties|{}|
+
+> SkeletonGridProps
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|columns|金刚位列数|number|4|
+|className|自定义类名|string|""|
+|style|自定义样式|CSSProperties|{}|

package/metaData/components/skeleton/example/elements.tsx

@@ -0,0 +1,290 @@
+import React, {
+    Ref,
+    forwardRef,
+    useContext,
+    useEffect,
+    useImperativeHandle,
+    useRef,
+    useState,
+} from 'react';
+import { cls, isArray, nextTick } from '@arco-design/mobile-utils';
+import { useListenResize } from '../_helpers';
+import { GlobalContext } from '../context-provider';
+import {
+    SkeletonAvatarProps,
+    SkeletonGridProps,
+    SkeletonNodeProps,
+    SkeletonParagraphProps,
+    SkeletonRef,
+    SkeletonTitleProps,
+} from './type';
+import { SkeletonContext } from './skeleton-context';
+
+const calcOffset = (dom?: HTMLElement | null, useRtl?: boolean) => {
+    if (!dom) {
+        return 0;
+    }
+    if (useRtl) {
+        return dom.offsetLeft - dom.offsetTop;
+    }
+    return dom.offsetLeft + dom.offsetTop;
+};
+
+function useOffset<T extends HTMLElement, K extends React.MutableRefObject<T | null> | T[]>(
+    dom?: K,
+    useRtl?: boolean,
+) {
+    const [offset, setOffset] = useState<number | number[]>();
+    const calcLayout = () => {
+        const isList = Array.isArray(dom);
+        if (
+            !(isList ? (dom as T[]).length > 0 : (dom as React.MutableRefObject<T | null>)?.current)
+        ) {
+            return;
+        }
+        setOffset(
+            isList
+                ? (dom as T[]).map(item => calcOffset(item, useRtl))
+                : calcOffset((dom as React.MutableRefObject<T | null>).current, useRtl),
+        );
+    };
+
+    useEffect(() => {
+        nextTick(() => {
+            calcLayout();
+        });
+    }, [dom, useRtl]);
+
+    useListenResize(calcLayout);
+    return offset as K extends T[] ? number[] : number;
+}
+
+export const SkeletonNode = forwardRef((props: SkeletonNodeProps, ref: Ref<SkeletonRef>) => {
+    const { className = '', style, children } = props;
+    const { useRtl, prefixCls } = useContext(GlobalContext);
+    const { backgroundColor, showAnimation, animation } = useContext(SkeletonContext);
+    const domRef = useRef<HTMLDivElement | null>(null);
+    const isGradientAnimation = showAnimation && animation === 'gradient';
+    const offset = useOffset(isGradientAnimation ? domRef : undefined, useRtl);
+
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+    }));
+
+    return (
+        <div
+            className={cls(
+                `${prefixCls}-skeleton-item`,
+                `${prefixCls}-skeleton-node`,
+                showAnimation && `${prefixCls}-skeleton-animation-${animation}`,
+                className,
+            )}
+            style={{ backgroundColor, ...style }}
+            ref={domRef}
+        >
+            {children}
+            {isGradientAnimation && offset !== undefined && (
+                <div
+                    className={`${prefixCls}-skeleton-animation-item`}
+                    style={{ left: 0 - offset }}
+                />
+            )}
+        </div>
+    );
+});
+
+export const SkeletonTitle = forwardRef((props: SkeletonTitleProps, ref: Ref<SkeletonRef>) => {
+    const { className = '', style, width = '40%' } = props;
+    const { useRtl, prefixCls } = useContext(GlobalContext);
+    const { backgroundColor, showAnimation, animation } = useContext(SkeletonContext);
+    const domRef = useRef<HTMLDivElement | null>(null);
+    const isGradientAnimation = showAnimation && animation === 'gradient';
+    const offset = useOffset(isGradientAnimation ? domRef : undefined, useRtl);
+
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+    }));
+
+    return (
+        <div
+            className={cls(
+                `${prefixCls}-skeleton-item`,
+                `${prefixCls}-skeleton-title`,
+                showAnimation && `${prefixCls}-skeleton-animation-${animation}`,
+                className,
+            )}
+            style={{ width, backgroundColor, ...style }}
+            ref={domRef}
+        >
+            {isGradientAnimation && offset !== undefined && (
+                <div
+                    className={`${prefixCls}-skeleton-animation-item`}
+                    style={{ left: 0 - offset }}
+                />
+            )}
+        </div>
+    );
+});
+
+export const SkeletonParagraph = forwardRef(
+    (props: SkeletonParagraphProps, ref: Ref<SkeletonRef>) => {
+        const { className = '', style, rows = 3, width = '60%' } = props;
+        const { useRtl, prefixCls } = useContext(GlobalContext);
+        const { backgroundColor, showAnimation, animation } = useContext(SkeletonContext);
+        const domRef = useRef<HTMLDivElement | null>(null);
+        const lineDomRefs = useRef<HTMLDivElement[]>([]);
+        const isGradientAnimation = showAnimation && animation === 'gradient';
+        const offsets = useOffset(isGradientAnimation ? lineDomRefs.current : undefined, useRtl);
+
+        useImperativeHandle(ref, () => ({
+            dom: domRef.current,
+        }));
+
+        const getWidth = (idx: number) => {
+            if (isArray(width)) {
+                return width[idx];
+            }
+            if (rows - 1 === idx) {
+                return width;
+            }
+            return undefined;
+        };
+
+        return (
+            <div
+                className={cls(`${prefixCls}-skeleton-paragraph`, className)}
+                style={style}
+                ref={domRef}
+            >
+                {Array.from(new Array(rows)).map((_, idx) => (
+                    <div
+                        key={idx}
+                        className={cls(
+                            `${prefixCls}-skeleton-item`,
+                            `${prefixCls}-skeleton-paragraph-line`,
+                            showAnimation && `${prefixCls}-skeleton-animation-${animation}`,
+                        )}
+                        style={{
+                            width: getWidth(idx),
+                            backgroundColor,
+                        }}
+                        ref={el => {
+                            if (el) {
+                                lineDomRefs.current[idx] = el;
+                            }
+                        }}
+                    >
+                        {isGradientAnimation && offsets !== undefined && (
+                            <div
+                                className={`${prefixCls}-skeleton-animation-item`}
+                                style={{ left: 0 - (offsets[idx] || 0) }}
+                            />
+                        )}
+                    </div>
+                ))}
+            </div>
+        );
+    },
+);
+
+export const SkeletonAvatar = forwardRef((props: SkeletonAvatarProps, ref: Ref<SkeletonRef>) => {
+    const { className = '', style } = props;
+    const { useRtl, prefixCls } = useContext(GlobalContext);
+    const { backgroundColor, showAnimation, animation } = useContext(SkeletonContext);
+    const domRef = useRef<HTMLDivElement | null>(null);
+    const isGradientAnimation = showAnimation && animation === 'gradient';
+    const offset = useOffset(isGradientAnimation ? domRef : undefined, useRtl);
+
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+    }));
+
+    return (
+        <div
+            className={cls(
+                `${prefixCls}-skeleton-item`,
+                `${prefixCls}-skeleton-avatar`,
+                showAnimation && `${prefixCls}-skeleton-animation-${animation}`,
+                className,
+            )}
+            style={{ backgroundColor, ...style }}
+            ref={domRef}
+        >
+            {isGradientAnimation && offset !== undefined && (
+                <div
+                    className={`${prefixCls}-skeleton-animation-item`}
+                    style={{ left: 0 - offset }}
+                />
+            )}
+        </div>
+    );
+});
+
+export const SkeletonGrid = forwardRef((props: SkeletonGridProps, ref: Ref<SkeletonRef>) => {
+    const { className = '', style, columns = 4 } = props;
+    const { useRtl, prefixCls } = useContext(GlobalContext);
+    const { backgroundColor, showAnimation, animation } = useContext(SkeletonContext);
+    const domRef = useRef<HTMLDivElement | null>(null);
+    const iconDomRefs = useRef<HTMLDivElement[]>([]);
+    const textDomRefs = useRef<HTMLDivElement[]>([]);
+    const isGradientAnimation = showAnimation && animation === 'gradient';
+    const iconOffsets = useOffset(isGradientAnimation ? iconDomRefs.current : undefined, useRtl);
+    const textOffsets = useOffset(isGradientAnimation ? textDomRefs.current : undefined, useRtl);
+
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+    }));
+
+    return (
+        <div className={cls(`${prefixCls}-skeleton-grid`, className)} style={style} ref={domRef}>
+            {Array.from(new Array(columns)).map((_, idx) => (
+                <div key={idx} className={cls(`${prefixCls}-skeleton-grid-item`)}>
+                    <div
+                        className={cls(
+                            `${prefixCls}-skeleton-item`,
+                            `${prefixCls}-skeleton-grid-icon`,
+                            showAnimation && `${prefixCls}-skeleton-animation-${animation}`,
+                        )}
+                        style={{ backgroundColor }}
+                        ref={el => {
+                            if (el) {
+                                iconDomRefs.current[idx] = el;
+                            }
+                        }}
+                    >
+                        {isGradientAnimation && iconOffsets !== undefined && (
+                            <div
+                                className={`${prefixCls}-skeleton-animation-item`}
+                                style={{
+                                    left: 0 - (iconOffsets?.[idx] || 0),
+                                }}
+                            />
+                        )}
+                    </div>
+                    <div
+                        className={cls(
+                            `${prefixCls}-skeleton-item`,
+                            `${prefixCls}-skeleton-grid-text`,
+                            showAnimation && `${prefixCls}-skeleton-animation-${animation}`,
+                        )}
+                        style={{ backgroundColor }}
+                        ref={el => {
+                            if (el) {
+                                textDomRefs.current[idx] = el;
+                            }
+                        }}
+                    >
+                        {isGradientAnimation && textOffsets !== undefined && (
+                            <div
+                                className={`${prefixCls}-skeleton-animation-item`}
+                                style={{
+                                    left: 0 - (textOffsets?.[idx] || 0),
+                                }}
+                            />
+                        )}
+                    </div>
+                </div>
+            ))}
+        </div>
+    );
+});

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

@@ -0,0 +1,96 @@
+import React, { useRef, forwardRef, Ref, useImperativeHandle, useContext } from 'react';
+import { cls, componentWrapper } from '@arco-design/mobile-utils';
+import { GlobalContext } from '../context-provider';
+import { SkeletonProps, SkeletonRef } from './type';
+import {
+    SkeletonAvatar as Avatar,
+    SkeletonGrid as Grid,
+    SkeletonNode as Node,
+    SkeletonParagraph as Paragraph,
+    SkeletonTitle as Title,
+} from './elements';
+import { SkeletonContext } from './skeleton-context';
+
+export * from './type';
+
+function getComponentProps<T>(prop?: T | boolean): T | {} {
+    if (prop && typeof prop === 'object') {
+        return prop;
+    }
+    return {};
+}
+
+const Skeleton = forwardRef((props: SkeletonProps, ref: Ref<SkeletonRef>) => {
+    const {
+        className = '',
+        style,
+        children,
+        title = true,
+        paragraph = true,
+        avatar = false,
+        grid,
+        showAnimation = true,
+        animation = 'gradient',
+        animationGradientColor,
+        backgroundColor,
+    } = props;
+    const domRef = useRef<HTMLDivElement | null>(null);
+    const { prefixCls } = useContext(GlobalContext);
+
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+    }));
+
+    const isGrid = !!grid;
+    const hasTitle = !!title;
+    const hasParagraph = !!paragraph;
+    const hasAvatar = !!avatar;
+    const content = isGrid ? (
+        <Grid {...getComponentProps(grid)} />
+    ) : (
+        <>
+            {hasAvatar && <Avatar {...getComponentProps(avatar)} />}
+            {(hasTitle || hasParagraph) && (
+                <div className={`${prefixCls}-skeleton-content`}>
+                    {hasTitle && <Title {...getComponentProps(title)} />}
+                    {hasParagraph && <Paragraph {...getComponentProps(paragraph)} />}
+                </div>
+            )}
+        </>
+    );
+
+    return (
+        <div
+            className={cls(
+                `${prefixCls}-skeleton`,
+                {
+                    [`${prefixCls}-skeleton-with-avatar`]: hasAvatar,
+                },
+                className,
+            )}
+            style={{ color: animationGradientColor, ...style }}
+            ref={domRef}
+        >
+            <SkeletonContext.Provider value={{ showAnimation, animation, backgroundColor }}>
+                {content}
+                {children}
+            </SkeletonContext.Provider>
+        </div>
+    );
+});
+
+/**
+ * 在内容加载过程中展示一组占位图形。
+ * @en Display a set of placeholder graphics during content loading
+ * @type 信息展示
+ * @type_en Data Display
+ * @name 骨架屏
+ * @name_en Skeleton
+ */
+export default componentWrapper(Skeleton, {
+    Node,
+    Title,
+    Paragraph,
+    Avatar,
+    Grid,
+});

package/metaData/components/skeleton/example/skeleton-context.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import { SkeletonContextParams, SkeletonProps } from './type';
+
+export const SkeletonContext = React.createContext<SkeletonContextParams>({
+    showAnimation: true,
+    animation: 'gradient' as SkeletonProps['animation'],
+});

package/metaData/components/slider/doc.md

@@ -0,0 +1,42 @@
+### 数据录入
+
+# 滑动输入条 Slider
+
+滑动型输入器，展示当前值和可选范围。
+
+======
+
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|className|自定义类名|string|""|
+|style|自定义样式|CSSProperties|{}|
+|disabled|是否禁用|boolean|false|
+|useRange|使用范围选择|boolean|根据 传入初始参数判断，没有则为 false|
+|useAnimation|非点击状态使用动画|boolean|true|
+|min|最小值|number|0|
+|max|最大值|number|100|
+|defaultValue|默认初始值|number \| \[number, number\]|-|
+|value|基础值，组件受控|number \| \[number, number\]|-|
+|step|最小单位|number|1|
+|type|组件方向|"horizontal" \| "vertical"|"horizontal"|
+|showTooltip|是否展示气泡|"auto" \| "always" \| "never"|"auto"|
+|marks|滑动条节点配置|number \| number\[\] \| Record\<string, ReactNode\>|-|
+|showMarks|是否展示标签底部文案|boolean|false|
+|useMarkOnly|是否只可用标志的值，覆盖 step|boolean|false|
+|prefixLabel|前缀 icon 或者 文案|ReactNode \| ((value: number \| \[\.\.\.\]) =\> ReactNode)|-|
+|suffixLabel|后缀 icon 或者 文案|ReactNode \| ((value: number \| \[\.\.\.\]) =\> ReactNode)|-|
+|size|组件横条粗细，单位 px|ReactText|2|
+|draggableTrackOnly|只允许拖动滑块 默认 false|boolean|false|
+|formatTooltip|自定义气泡内容|(value: number) =\> ReactNode|-|
+|onAfterChange|修改后事件，时机同 touchend|(value: number \| \[number, number\]) =\> void|-|
+|onChange|实时修改事件|(value: number \| \[number, number\]) =\> void|-|
+|renderThumb|自定义滑块|(value: number) =\> ReactNode|-|
+|renderThumbPopover|自定义滑块的Popover，优先级高于formatTooltip。value表示当前滑动进度，visible表示气泡的可见性，index表示当前滑块索引，thumbEl表示当前滑块元素。|(config: \{ value: number; visible: boolean; index: number; thumbEl: ReactNode; \}) =\> ReactNode|-|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|