@fjyueke/arco-mcp 1.0.0

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

@@ -0,0 +1,252 @@
+import React, { useRef, forwardRef, Ref, useImperativeHandle, ReactNode, useContext } from 'react';
+import { cls } from '@arco-design/mobile-utils';
+import { ContextLayout, GlobalContext } from '../context-provider';
+
+export interface GridProps {
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     * @en Custom stylesheet
+     */
+    style?: React.CSSProperties;
+    /**
+     * 传入的数据
+     * @en grid data
+     *  */
+    data: GridData[];
+    /**
+     * 一行的列数
+     * @en number of columns
+     * @default 3
+     */
+    columns?: number;
+    /**
+     * 是否有边框
+     * @en Whether there is a border
+     * @default false
+     */
+    border?: boolean;
+    /**
+     * 格子间的间距
+     * @en spacing between grids
+     * @default 0
+     */
+    gutter?: number | { x: number; y: number };
+    /**
+     * 格子的形状，可选值为 circle
+     * @en The shape of the grid, the optional value are circle and square
+     * @default "square"
+     */
+    shape?: string;
+    /**
+     * 溢出时是否支持滑动
+     * @en Whether to support swipe when overflowing
+     * @default false
+     */
+    isSliding?: boolean;
+    /**
+     * 格子内容排列的方向，可选值为 horizontal
+     * @en The direction in which the grid content is arranged, the optional value are horizontal and vertical
+     * @default "vertical"
+     */
+    direction?: string;
+}
+
+export interface GridData {
+    /**
+     * 传入图标的资源地址
+     * @en The resource address of the input icon
+     *  */
+    img: string | ReactNode;
+    /**
+     * 传入的标题文字内容
+     * @en Title text content
+     * */
+    title: ReactNode;
+    /**
+     * 传入的描述文字内容
+     * @en Description text
+     *  */
+    content?: ReactNode;
+    /**
+     * 自定义样式
+     * @en Custom classname
+     *  */
+    className?: string;
+    /**
+     * 点击后的回调函数
+     * @en Callback when clicking
+     *  */
+    onClick?: (item: GridData) => void;
+    /**
+     * 每个格子自定义样式
+     * @en Custom style for each grid
+     *  */
+    itemStyle?: React.CSSProperties;
+    /**
+     * 自定义单个 grid 的创建函数
+     * @en Customize the creation function of a single grid
+     *  */
+    renderGrid?: (item: GridData, colIndex: number, rowIndex: number) => ReactNode;
+    [x: string]: any;
+}
+
+export interface GridRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+}
+
+/**
+ * 宫格可以在水平方向上把页面分隔成等宽度的区块，用于展示内容或进行页面导航。
+ * @en The grid can divide the page into equal-width blocks in the horizontal direction for displaying content or for page navigation.
+ * @type 布局
+ * @type_en Layout
+ * @name 宫格
+ * @name_en Grid
+ */
+const Grid = forwardRef((props: GridProps, ref: Ref<GridRef>) => {
+    const {
+        className = '',
+        style,
+        data,
+        columns = 3,
+        border = false,
+        gutter = 0,
+        shape = 'square',
+        direction = 'vertical',
+        isSliding = false,
+    } = props;
+    const { useRtl } = useContext(GlobalContext);
+    const domRef = useRef<HTMLDivElement | null>(null);
+
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+    }));
+
+    const getRows = (prefix: string, rowsData: GridData[], rows: number, row: number) => {
+        const placeholders = !isSliding && rowsData.length % columns;
+        let renderData = rowsData;
+        if (placeholders) {
+            const fakeGrids = (new Array(columns - placeholders) as GridData[]).fill({
+                img: null,
+                title: '',
+            });
+            renderData = rowsData.concat(fakeGrids);
+        }
+        return (
+            <div className={`${prefix}-rows`} key={row}>
+                {renderData.map((item: GridData, index: number) => {
+                    const {
+                        img,
+                        title,
+                        content,
+                        className: itemClassName,
+                        onClick,
+                        itemStyle,
+                        renderGrid,
+                    } = item;
+                    if (renderGrid) {
+                        return renderGrid(item, index, row);
+                    }
+                    const marginBottom =
+                        row + 1 === rows ? 0 : typeof gutter === 'number' ? gutter : gutter?.y || 0;
+                    const rowLen = renderData.length;
+                    const marginValue =
+                        index + 1 === rowLen
+                            ? 0
+                            : typeof gutter === 'number'
+                            ? gutter
+                            : gutter?.x || 0;
+                    const marginStyle = {
+                        [useRtl ? 'marginLeft' : 'marginRight']: marginValue,
+                    };
+                    return (
+                        <div
+                            key={index}
+                            style={{ marginBottom, ...marginStyle, ...itemStyle }}
+                            onClick={() => {
+                                onClick && onClick(item);
+                            }}
+                            className={cls(
+                                `${prefix}-rows-item`,
+                                {
+                                    horizontal: direction === 'horizontal',
+                                    border: border && gutter === 0,
+                                },
+                                itemClassName,
+                            )}
+                        >
+                            {typeof img === 'string' ? (
+                                <img
+                                    src={img}
+                                    className={`${prefix}-rows-item-icon ${
+                                        shape === 'circle' ? 'circle' : ''
+                                    }`}
+                                />
+                            ) : (
+                                img
+                            )}
+                            {title || content ? (
+                                <div className={`${prefix}-rows-item-text`}>
+                                    {title ? (
+                                        <span className={`${prefix}-rows-item-title`}>{title}</span>
+                                    ) : null}
+                                    {content ? (
+                                        <span className={`${prefix}-rows-item-content`}>
+                                            {content}
+                                        </span>
+                                    ) : null}
+                                </div>
+                            ) : null}
+                            {(index + 1) % columns !== 0 ? <i className="vertical-border" /> : null}
+                            {(row + 1) % rows !== 0 ? <i className="horizontal-border" /> : null}
+                        </div>
+                    );
+                })}
+            </div>
+        );
+    };
+
+    const getGrid = (prefix: string, dataArr: Array<Array<GridData>>): React.ReactNode => {
+        const rows = dataArr.length || 1;
+        return (
+            <>
+                {dataArr.map((item: GridData[], index: number) => {
+                    return getRows(prefix, item, rows, index);
+                })}
+            </>
+        );
+    };
+
+    const renderEl = ({ prefixCls }) => {
+        const prefix = `${prefixCls}-grid`;
+        const dataLength = data?.length || 0;
+        if (dataLength === 0) {
+            return null;
+        }
+        let index = 0;
+        const newArr: Array<Array<GridData>> = [];
+        while (index < dataLength) {
+            newArr.push(data.slice(index, isSliding ? (index += dataLength) : (index += columns)));
+        }
+        return (
+            <div
+                className={cls(prefix, className, isSliding ? 'sliding' : '')}
+                style={style}
+                ref={domRef}
+            >
+                {getGrid(prefix, newArr)}
+            </div>
+        );
+    };
+    return <ContextLayout>{renderEl}</ContextLayout>;
+});
+
+export default Grid;

package/metaData/components/icon/doc.md

@@ -0,0 +1,15 @@
+### 通用
+
+# 图标 Icon
+
+这里有 Arco Design 内置的一些图标
+
+======
+
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|className|节点类名|string|-|
+|useCurrentColor|fill值是否使用color属性值，否则保留原有颜色|boolean|true|
+|style|自定义样式|React.CSSProperties|-|

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

@@ -0,0 +1,32 @@
+import React, { SVGAttributes, CSSProperties } from 'react';
+import { ContextLayout } from '../../context-provider';
+
+export interface IconProps extends SVGAttributes<SVGElement> {
+    className?: string;
+    useCurrentColor?: boolean;
+    style?: CSSProperties;
+}
+
+export default function IconWarnCircleFill(props: IconProps) {
+    const { className = '', useCurrentColor = true, style, ...other } = props;
+
+    return (
+        <ContextLayout>
+            {({ prefixCls }) => (
+                <svg
+                    className={`${prefixCls}-icon ${prefixCls}-icon-warn-circle-fill ${className}`}
+                    width="1em"
+                    height="1em"
+                    style={style}
+                    fill={useCurrentColor ? 'currentColor' : '#000'}
+                    viewBox="0 0 1024 1024"
+                    xmlns="http://www.w3.org/2000/svg"
+                    {...other}
+                >
+                    <defs />
+                    <path d="M0 512c0 281.6 230.4 512 512 512s512-230.4 512-512S793.6 0 512 0 0 230.4 0 512zm512 160h32c19.2 0 32 12.8 32 32v32c0 19.2-12.8 32-32 32h-32c-19.2 0-32-12.8-32-32v-32c0-19.2 12.8-32 32-32zm0-416h32c19.2 0 32 12.8 32 32v256c0 19.2-12.8 32-32 32h-32c-19.2 0-32-12.8-32-32V288c0-19.2 12.8-32 32-32z" />
+                </svg>
+            )}
+        </ContextLayout>
+    );
+}

package/metaData/components/image/doc.md

@@ -0,0 +1,62 @@
+### 信息展示
+
+# 图片 Image
+
+增强版的 img 标签，提供多种图片填充模式，支持图片加载中提示、加载失败提示。
+
+======
+
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|style|自定义样式|CSSProperties|-|
+|className|自定义类名|string|-|
+|status|指定图片状态，staticLabel=false时有效|"loading" \| "loaded" \| "init" \| "error"|-|
+|src|图片链接|string|必填|
+|width|容器宽度，传数值，默认单位为px，传字符串则接受传入的单位|ReactText|-|
+|height|容器高度，传数值，默认单位为px，传字符串则接受传入的单位|ReactText|-|
+|alt|替代文本|string|""|
+|fit|图片填充模式(object\-fit)，传preview\-\*为预览模式，预览模式仅staticLabel=false时有效|"\-moz\-initial" \| "inherit" \| "initial" \| "revert" \| "revert\-layer" \| "unset" \| "contain" \| "cover" \| "fill" \| "none" \| "scale\-down" \| "preview\-y" \| "preview\-x"|"fill"|
+|position|图片填充位置(object\-position)|ObjectPosition\<ReactText\>|"center"|
+|radius|图片圆角|ReactText|-|
+|bordered|是否加边框|boolean|-|
+|loadingArea|自定义展示加载中内容|ReactNode|-|
+|errorArea|自定义展示加载失败内容|ReactNode|-|
+|showLoading|是否展示图片加载中提示|boolean|-|
+|showError|是否展示图片加载失败提示|boolean|-|
+|animateDuration|加载完时展现动画时长，staticLabel=false时有效|number|200|
+|retryTime|失败时自动重试次数|number|0|
+|forceHttps|是否强制使用https|boolean|-|
+|boxWidth|预览模式下，父容器宽度|number|-|
+|boxHeight|预览模式下，父容器高度|number|-|
+|topOverlap|图片顶层内容|ReactNode|-|
+|bottomOverlap|图片底层内容（placeholder），默认是灰色兜底，传null可移除|ReactNode|-|
+|showImage|手动控制是否加载图片|boolean|-|
+|staticLabel|是否直接渲染\<img\>标签，不走加载图片流程|boolean|-|
+|nativeProps|img标签原生属性，优先级低于单独设置|DetailedHTMLProps\<ImgHTMLAttributes\<HTMLImageElement\>, HTMLImageElement\>|-|
+|onChange|切换status时触发的回调|(status: string) =\> void|-|
+|onClick|点击图片时触发的回调|(e: MouseEvent\<HTMLElement, MouseEvent\>) =\> void|-|
+|onLoad|图片加载完毕时触发的回调|(e: Event, image: HTMLImageElement) =\> void|-|
+|onError|图片加载失败时触发的回调，如果有自动重试则在重试最终失败后触发|(e: string \| Event) =\> void|-|
+|onAutoRetry|图片加载失败时自动重试触发的回调|(e: string \| Event) =\> void|-|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|
+|image|原生图片元素 DOM|HTMLImageElement|
+|retry|手动重试图片加载|() =\> void|
+
+> ImageStatus
+
+```
+"loading" | "loaded" | "init" | "error"
+```
+
+> ObjectPosition
+
+```
+string | number | string & {}
+```