@fjyueke/arco-mcp 1.0.0

package/metaData/components/cell/doc.md

@@ -0,0 +1,68 @@
+### 信息展示
+
+# 单元格 Cell
+
+单元格组件，含单元格及单元格组合，常用于设置项、表单等。
+
+======
+
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|style|自定义样式|CSSProperties|-|
+|className|自定义类名|string|-|
+|icon|单元格左侧图标|ReactNode|-|
+|label|标签名|ReactNode|-|
+|desc|描述|ReactNode|-|
+|text|主体文字，如果有标签名则靠右，否则靠左|string|-|
+|children|主体内容，如果有标签名则靠右，否则靠左|ReactNode|-|
+|showArrow|是否展示右侧箭头|boolean|-|
+|arrow|右侧箭头内容|ReactNode|-|
+|prepend|单元格前缀内容，在单元格上方|ReactNode|-|
+|append|单元格后缀内容，在单元格下方|ReactNode|-|
+|bordered|是否有外边框|boolean|true|
+|onClick|点击单元格事件回调|(e: MouseEvent\<HTMLDivElement, MouseEvent\>) =\> void|-|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|
+
+> Cell.Group
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|style|自定义样式|CSSProperties|-|
+|className|自定义类名|string|-|
+|header|自定义头部内容|ReactNode|-|
+|footer|自定义尾部内容|ReactNode|-|
+|bordered|是否有外边框|boolean|true|
+|options|单元格配置，优先级高于children|(CellProps & RefAttributes\<CellRef\>)\[\]|-|
+|children|内部单元格|ReactNode|-|
+|onClick|点击单元格组回调|(e: MouseEvent\<HTMLDivElement, MouseEvent\>) =\> void|-|
+
+> CellProps
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|style|自定义样式|CSSProperties|-|
+|className|自定义类名|string|-|
+|icon|单元格左侧图标|ReactNode|-|
+|label|标签名|ReactNode|-|
+|desc|描述|ReactNode|-|
+|text|主体文字，如果有标签名则靠右，否则靠左|string|-|
+|children|主体内容，如果有标签名则靠右，否则靠左|ReactNode|-|
+|showArrow|是否展示右侧箭头|boolean|-|
+|arrow|右侧箭头内容|ReactNode|-|
+|prepend|单元格前缀内容，在单元格上方|ReactNode|-|
+|append|单元格后缀内容，在单元格下方|ReactNode|-|
+|bordered|是否有外边框|boolean|true|
+|onClick|点击单元格事件回调|(e: MouseEvent\<HTMLDivElement, MouseEvent\>) =\> void|-|
+
+> CellGroupRef
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|

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

@@ -0,0 +1,13 @@
+import React from 'react';
+
+export default function Arrow() {
+    return (
+        <svg viewBox="0 0 8 14" fill="none" className="arrow-icon-svg">
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M0.594858 1.24219C0.399596 1.43745 0.399596 1.75403 0.594859 1.94929L5.59905 6.95348L0.636039 11.9165C0.440776 12.1118 0.440776 12.4283 0.636038 12.6236L0.989592 12.9771C1.18485 13.1724 1.50144 13.1724 1.6967 12.9771L7.35355 7.3203C7.5296 7.14425 7.54692 6.86959 7.40553 6.67413C7.38216 6.62774 7.35111 6.58423 7.31237 6.54549L1.65552 0.888634C1.46026 0.693372 1.14367 0.693372 0.948411 0.888634L0.594858 1.24219Z"
+            />
+        </svg>
+    );
+}

package/metaData/components/cell/example/cell.tsx

@@ -0,0 +1,71 @@
+import React, { useRef, forwardRef, Ref, useImperativeHandle } from 'react';
+import { cls } from '@arco-design/mobile-utils';
+import { ContextLayout } from '../context-provider';
+import Arrow from './arrow';
+import { GroupContext } from './group';
+import { CellProps, CellRef } from './type';
+
+export const Cell = forwardRef((props: CellProps, ref: Ref<CellRef>) => {
+    const {
+        className = '',
+        style,
+        icon,
+        label,
+        desc,
+        text,
+        children,
+        showArrow,
+        arrow,
+        prepend,
+        append,
+        bordered = true,
+        onClick,
+    } = props;
+    const domRef = useRef<HTMLDivElement | null>(null);
+
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+    }));
+
+    return (
+        <ContextLayout>
+            {({ prefixCls }) => (
+                <GroupContext.Consumer>
+                    {({ isFromGroup }) => (
+                        <div
+                            className={cls(
+                                `${prefixCls}-cell`,
+                                'all-border-box',
+                                { 'without-group': !isFromGroup },
+                                { bordered },
+                                className,
+                            )}
+                            style={style}
+                            ref={domRef}
+                            onClick={e => onClick && onClick(e)}
+                        >
+                            {prepend}
+                            <div className={cls(`${prefixCls}-cell-inner`, { 'has-desc': desc })}>
+                                {icon ? <div className="cell-label-icon">{icon}</div> : null}
+                                {label || desc ? (
+                                    <div className="cell-label">
+                                        <div className="cell-title">{label}</div>
+                                        {desc ? <div className="cell-desc">{desc}</div> : null}
+                                    </div>
+                                ) : null}
+                                <div className={`cell-content ${label || desc ? 'has-label' : ''}`}>
+                                    {text ? <div className="cell-text">{text}</div> : null}
+                                    {children}
+                                </div>
+                                {showArrow ? (
+                                    <div className="cell-arrow-icon">{arrow || <Arrow />}</div>
+                                ) : null}
+                            </div>
+                            {append}
+                        </div>
+                    )}
+                </GroupContext.Consumer>
+            )}
+        </ContextLayout>
+    );
+});

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

@@ -0,0 +1,63 @@
+import React, { forwardRef, Ref, useRef, useImperativeHandle } from 'react';
+import { cls } from '@arco-design/mobile-utils';
+import { ContextLayout } from '../context-provider';
+import { CellGroupProps, CellGroupRef, CellProps, CellRef } from './type';
+
+export interface GroupContextParams {
+    isFromGroup: boolean;
+}
+
+export const GroupContext = React.createContext<GroupContextParams>({
+    isFromGroup: false,
+});
+
+export function componentGenerator<P extends CellProps = CellProps, R extends CellRef = CellRef>(
+    Comp: React.ForwardRefExoticComponent<P & React.RefAttributes<R>>,
+) {
+    return forwardRef((props: CellGroupProps<P>, ref: Ref<CellGroupRef>) => {
+        const {
+            className = '',
+            style,
+            header,
+            footer,
+            bordered = true,
+            options,
+            children,
+            onClick,
+        } = props;
+        const domRef = useRef<HTMLDivElement | null>(null);
+
+        useImperativeHandle(ref, () => ({
+            dom: domRef.current,
+        }));
+
+        function handleClick(e: React.MouseEvent<HTMLDivElement, MouseEvent>) {
+            onClick && onClick(e);
+        }
+
+        return (
+            <ContextLayout>
+                {({ prefixCls }) => (
+                    <div
+                        className={cls(`${prefixCls}-cell-group`, 'all-border-box', className)}
+                        ref={domRef}
+                        onClick={handleClick}
+                        style={style}
+                    >
+                        {header ? <div className="cell-group-header">{header}</div> : null}
+                        <div className={cls('cell-group-body', { bordered })}>
+                            <GroupContext.Provider value={{ isFromGroup: true }}>
+                                {children}
+                                {options &&
+                                    options.map((option, index) => (
+                                        <Comp key={index} {...option} />
+                                    ))}
+                            </GroupContext.Provider>
+                        </div>
+                        {footer ? <div className="cell-group-footer">{footer}</div> : null}
+                    </div>
+                )}
+            </ContextLayout>
+        );
+    });
+}

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

@@ -0,0 +1,19 @@
+import { componentWrapper } from '@arco-design/mobile-utils';
+import { componentGenerator } from './group';
+import { Cell } from './cell';
+
+export * from './type';
+
+const Group = componentGenerator(Cell);
+
+/**
+ * 单元格组件，含单元格及单元格组合，常用于设置项、表单等。
+ * @en Cell, including cells and cell group, are often used to set items, forms, etc.
+ * @type 信息展示
+ * @type_en Data Display
+ * @name 单元格
+ * @name_en Cell
+ */
+export default componentWrapper(Cell, {
+    Group,
+});

package/metaData/components/checkbox/doc.md

@@ -0,0 +1,91 @@
+### 数据录入
+
+# 复选框 Checkbox
+
+复选框，可用状态下点击切换选择，支持禁用，支持复选项组。
+
+======
+
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|label|选项的文字说明，传入children时此属性无效|string|""|
+|value|Checkbox的值|ValueType|必填|
+|defaultCheck|默认选中状态|boolean|false|
+|checked|是否选中，传值即为受控模式|boolean|-|
+|onChange|复选框选中状态回调函数|(checked: boolean, value: ValueType, e: MouseEvent\<Element, MouseEvent\>) =\> void|() => {}|
+|shape|图标的形状|"circle" \| "square"|'circle'|
+|layout|排版样式(内联\|块级\|图标靠右两端对齐)|"inline" \| "block" \| "justify"|'inline'|
+|disabled|是否禁用|boolean|false|
+|icons|自定义图标合集，传 null 表示无图标|IconType|Default icon|
+|isRadio|是否为Radio组件，不推荐使用，仅用于支持Radio组件|boolean|false|
+|children|自定义组件内容|ReactNode|null|
+|className|自定义类名|string|""|
+|style|自定义样式|CSSProperties|{}|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|组件外层dom元素|HTMLDivElement|
+
+> Checkbox.Group
+
+复选项组
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|options|复选框组可选项, 传入children后此值无效|(CheckboxProps\<ValueType\> & RefAttributes\<CheckboxRef\>)\[\]|-|
+|value|受控模式，复选框选中的选项值|ValueType\[\]|-|
+|defaultValue|默认选中项|ValueType\[\]|[]|
+|min|最小可选值数量|number|0|
+|max|最大可选值数量，0表示没有限制|number|0|
+|onChange|点击复选框值变化回调|(value: ValueType\[\]) =\> void|() => {}|
+|shape|图标的形状|"circle" \| "square"|'circle'|
+|layout|排版样式(内联\|块级\|图标靠右两端对齐)|"inline" \| "block" \| "justify"|'inline'|
+|disabled|是否禁用|boolean|false|
+|icons|自定义图标合集，传 null 表示无图标|IconType|Default icon|
+|isRadio|是否为Radio组件，不推荐使用，仅用于支持Radio组件|boolean|false|
+|children|自定义组件内容|ReactNode|null|
+|className|自定义类名|string|""|
+|style|自定义样式|CSSProperties|{}|
+
+> ValueType
+
+```
+string | number
+```
+
+> IconType
+
+|参数|描述|类型|
+|----------|-------------|------|
+|normal|未选中|ReactNode|
+|active|选中态|ReactNode|
+|disabled|禁用态|ReactNode|
+|activeDisabled|禁用选中态|ReactNode|
+
+> CheckboxProps
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|label|选项的文字说明，传入children时此属性无效|string|""|
+|value|Checkbox的值|ValueType|必填|
+|defaultCheck|默认选中状态|boolean|false|
+|checked|是否选中，传值即为受控模式|boolean|-|
+|onChange|复选框选中状态回调函数|(checked: boolean, value: ValueType, e: MouseEvent\<Element, MouseEvent\>) =\> void|() => {}|
+|shape|图标的形状|"circle" \| "square"|'circle'|
+|layout|排版样式(内联\|块级\|图标靠右两端对齐)|"inline" \| "block" \| "justify"|'inline'|
+|disabled|是否禁用|boolean|false|
+|icons|自定义图标合集，传 null 表示无图标|IconType|Default icon|
+|isRadio|是否为Radio组件，不推荐使用，仅用于支持Radio组件|boolean|false|
+|children|自定义组件内容|ReactNode|null|
+|className|自定义类名|string|""|
+|style|自定义样式|CSSProperties|{}|
+
+> CheckboxGroupRef
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|组件外层dom元素|HTMLDivElement|

package/metaData/components/checkbox/example/checkbox.tsx

@@ -0,0 +1,158 @@
+import React, { useState, useEffect, forwardRef, Ref, useImperativeHandle, useRef } from 'react';
+import { cls } from '@arco-design/mobile-utils';
+import { ContextLayout } from '../context-provider';
+import IconCircleUnchecked from '../icon/IconCircleUnchecked';
+import IconCircleChecked from '../icon/IconCircleChecked';
+import IconCircleDisabled from '../icon/IconCircleDisabled';
+import IconSquareChecked from '../icon/IconSquareChecked';
+import IconSquareUnchecked from '../icon/IconSquareUnchecked';
+import IconSquareDisabled from '../icon/IconSquareDisabled';
+import { CheckboxGroupContext } from './group';
+import { IconStatus, IconType, CheckboxProps, CheckboxRef, ValueType } from './type';
+import { useMergeProps } from './hooks';
+
+const getDefaultIcon = (shape: string, status: IconStatus) => {
+    const defaultIcons: Record<string, IconType> = {
+        circle: {
+            normal: <IconCircleUnchecked />,
+            active: <IconCircleChecked />,
+            disabled: <IconCircleDisabled />,
+            activeDisabled: <IconCircleChecked />,
+        },
+        square: {
+            normal: <IconSquareUnchecked />,
+            active: <IconSquareChecked />,
+            disabled: <IconSquareDisabled />,
+            activeDisabled: <IconSquareChecked />,
+        },
+        justify: {
+            normal: <IconCircleUnchecked />,
+            active: <IconCircleChecked />,
+            disabled: <IconCircleDisabled />,
+            activeDisabled: <IconCircleChecked />,
+        },
+    };
+    return defaultIcons[shape][status];
+};
+
+export const Checkbox = forwardRef(
+    <T extends ValueType = ValueType>(props: CheckboxProps<T>, ref: Ref<CheckboxRef>) => {
+        const {
+            style = {},
+            className = '',
+            children = null,
+            label = '',
+            layout = 'inline',
+            value,
+            defaultCheck = false,
+            disabled = false,
+            shape = 'circle',
+            icons,
+            isRadio = false,
+            checked: propsChecked,
+            onChange,
+        } = useMergeProps<T>(props, CheckboxGroupContext);
+
+        const [checked, setChecked] = useState(
+            propsChecked === void 0 ? defaultCheck : propsChecked,
+        );
+
+        const [componentName] = useState(isRadio ? 'radio' : 'checkbox');
+
+        const domRef = useRef<HTMLDivElement | null>(null);
+        useImperativeHandle(ref, () => ({
+            dom: domRef.current,
+        }));
+
+        useEffect(() => {
+            if (propsChecked !== void 0) setChecked(Boolean(propsChecked));
+        }, [propsChecked]);
+
+        /**
+         * 获得图标样式
+         * @en Get icon style
+         */
+        const getStatus = (): IconStatus => {
+            if (checked) {
+                if (disabled) return IconStatus.ACTIVE_DISABLED;
+                return IconStatus.ACTIVE;
+            }
+            if (disabled) return IconStatus.DISABLED;
+            return IconStatus.NORMAL;
+        };
+
+        /**
+         * 计算展示的icon
+         * @en Calculate the displayed icon
+         */
+        const renderIcon = () => {
+            let Icon;
+            const iconKey = getStatus();
+            if (icons && icons[iconKey] !== void 0) {
+                Icon = icons[iconKey];
+            } else if (icons === null) {
+                Icon = null;
+            } else {
+                Icon =
+                    layout === 'justify'
+                        ? getDefaultIcon('justify', iconKey)
+                        : getDefaultIcon(shape, iconKey);
+            }
+            return Icon ? (
+                <div
+                    className={cls(`${componentName}-icon`, {
+                        disabled,
+                        checked,
+                    })}
+                >
+                    {Icon}
+                </div>
+            ) : null;
+        };
+
+        /**
+         * 处理点击事件
+         * @en Handling click events
+         */
+        const onClick = (e: React.MouseEvent) => {
+            if (disabled) return;
+
+            // Radio组件不支持点击取消选中
+            // @en Radio component does not support click to uncheck
+            if (isRadio && checked) return;
+
+            onChange && onChange(!checked, value, e);
+
+            if (propsChecked === void 0) {
+                setChecked(!checked);
+            }
+        };
+
+        return (
+            <ContextLayout>
+                {({ prefixCls }) => (
+                    <div
+                        role="checkbox"
+                        aria-checked={checked}
+                        aria-disabled={disabled}
+                        tabIndex={0}
+                        ref={domRef}
+                        style={style}
+                        className={cls(
+                            className,
+                            `${prefixCls}-${componentName}`,
+                            `shape-${shape}`,
+                            { disabled },
+                            layout,
+                        )}
+                        onClick={onClick}
+                    >
+                        {layout !== 'justify' && renderIcon()}
+                        <div className={`${componentName}-text`}>{children || label || value}</div>
+                        {layout === 'justify' && renderIcon()}
+                    </div>
+                )}
+            </ContextLayout>
+        );
+    },
+);

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

@@ -0,0 +1,103 @@
+import React, { useState, useEffect, forwardRef, Ref, useImperativeHandle, useRef } from 'react';
+import { cls } from '@arco-design/mobile-utils';
+import { ContextLayout } from '../context-provider';
+import {
+    GroupContextParams,
+    CheckboxGroupProps,
+    CheckboxGroupRef,
+    ValueType,
+    CheckboxProps,
+    CheckboxRef,
+} from './type';
+
+export const CheckboxGroupContext = React.createContext<GroupContextParams<ValueType>>({
+    isGroup: false,
+    shape: 'circle',
+    layout: 'inline',
+    disabled: false,
+    value: [],
+    onChange: () => {},
+});
+
+export function componentGenerator<
+    T extends ValueType = ValueType,
+    P extends CheckboxProps<T> = CheckboxProps<T>,
+    R extends CheckboxRef = CheckboxRef,
+>(Comp: React.ForwardRefExoticComponent<P & React.RefAttributes<R>>) {
+    return forwardRef((props: CheckboxGroupProps<T, P>, ref: Ref<CheckboxGroupRef | null>) => {
+        const {
+            style = {},
+            className = '',
+            defaultValue = [],
+            disabled = false,
+            shape = 'circle',
+            options,
+            icons,
+            onChange,
+            value,
+            children = null,
+            layout = 'inline',
+            min = 0,
+            max = 0,
+        } = props;
+
+        const [groupValue, setGroupValue] = useState(value || defaultValue);
+        const domRef = useRef<HTMLDivElement | null>(null);
+        useImperativeHandle(ref, () => ({
+            dom: domRef.current,
+        }));
+
+        useEffect(() => {
+            value !== void 0 && setGroupValue(value);
+        }, [value]);
+
+        /**
+         * 切换checkbox状态回调
+         * @en callback when toggling checkbox state
+         */
+        const handleChange = (checked: boolean, val: T) => {
+            if (
+                (!checked && groupValue.length <= min) ||
+                (max && checked && groupValue.length >= max)
+            )
+                return;
+            const newGroupValue = checked
+                ? [...groupValue, val]
+                : groupValue.filter(item => item !== val);
+
+            onChange && onChange(newGroupValue);
+            if (value === void 0) {
+                setGroupValue(newGroupValue);
+            }
+        };
+
+        return (
+            <ContextLayout>
+                {({ prefixCls }) => (
+                    <div
+                        ref={domRef}
+                        style={style}
+                        className={cls(className, `${prefixCls}-checkbox-group`)}
+                    >
+                        <CheckboxGroupContext.Provider
+                            value={{
+                                isGroup: true,
+                                shape,
+                                layout,
+                                disabled,
+                                icons,
+                                value: groupValue,
+                                onChange: handleChange,
+                            }}
+                        >
+                            {children}
+                            {!children &&
+                                options &&
+                                options.map(option => <Comp key={option.value} {...option} />)}
+                        </CheckboxGroupContext.Provider>
+                    </div>
+                )}
+            </ContextLayout>
+        );
+    });
+}

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

@@ -0,0 +1,25 @@
+import { componentWrapper } from '@arco-design/mobile-utils';
+import { componentGenerator } from './group';
+import { Checkbox } from './checkbox';
+
+export * from './type';
+
+/**
+ * 复选项组
+ * @en Checkbox group
+ * @displayName CheckboxGroup
+ */
+const Group = componentWrapper(componentGenerator(Checkbox), 'CheckboxGroup');
+
+/**
+ * 复选框，可用状态下点击切换选择，支持禁用，支持复选项组。
+ * @en Checkbox, click to switch selection when available, support disabled status, support checkbox group.
+ * @name 复选框
+ * @name_en Checkbox
+ * @type 数据录入
+ * @type_en Data Entry
+ * @displayName Checkbox
+ */
+export default componentWrapper(Checkbox, 'Checkbox', {
+    Group,
+});

package/metaData/components/circle-progress/doc.md

@@ -0,0 +1,40 @@
+### 反馈
+
+# 环形进度条 CircleProgress
+
+环形进度条组件，以圆环形式表示百分比进度
+
+======
+
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|className|自定义类名|string|-|
+|style|自定义样式|CSSProperties|-|
+|percentPosition|文字显示位置|"center" \| "bottom"|"center"|
+|showPercent|是否显示圆环内部文字|boolean|true|
+|percentage|进度环百分比|number|必填|
+|renderPercent|圆环内部文字显示（一个函数，返回ReactNode类型，回调参数为当前进度百分比）|(percentage: number) =\> ReactNode|-|
+|trackColor|轨道颜色|string|-|
+|progressColor|进度环颜色|string|-|
+|disabled|是否置灰|boolean|false|
+|trackStroke|轨道宽度|number|10|
+|progressStroke|进度环宽度|number|12|
+|progressColorStart|进度环渐变开始的颜色(当设置progressColorStart和progressColorEnd其中一个时，颜色会覆盖掉progressColor的颜色)|string|-|
+|progressColorEnd|进度环渐变结束的颜色|string|-|
+|duration|每增加step步长所需的毫秒数|number|30|
+|step|步长（增加步长，以step增长）|number|1|
+|clockwise|是否逆时针增加|boolean|false|
+|radius|圆环半径|number|-|
+|filleted|进度条两端是否圆角|boolean|true|
+|mountedTransition|初始化percentage时是否以动画形式过渡到目的值|boolean|true|
+|size|进度环尺寸|"mini" \| "default"|"default"|
+|mountedBezier|初始化时动画的贝塞尔曲线|\[number, number, number, number\]|[0.34, 0.69, 0.1, 1]|
+|svgKey|区分不同svg的\`\<def\>\`内容|string|-|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|