@fjyueke/arco-mcp 1.0.0

package/metaData/components/pull-refresh/example/ios-pull-refresh.tsx

@@ -0,0 +1,216 @@
+import React, {
+    useState,
+    useRef,
+    forwardRef,
+    Ref,
+    useCallback,
+    useContext,
+    useEffect,
+    useMemo,
+    useImperativeHandle,
+} from 'react';
+import type { CSSProperties } from 'react';
+import { cls, defaultLocale } from '@arco-design/mobile-utils';
+import Loading from '../loading';
+import { GlobalContext } from '../context-provider';
+import { PullRefreshRef, PullRefreshStatus, PullRefreshBasicProps } from './model';
+import { useCommonState, useAddScrollEvents, useCheckAsStart } from './hooks';
+import { useListenResize } from '../_helpers';
+
+export const PullRefresh = forwardRef((props: PullRefreshBasicProps, ref: Ref<PullRefreshRef>) => {
+    const { prefixCls, locale = defaultLocale } = useContext(GlobalContext);
+    const animationRef = useRef<number>(0);
+
+    const {
+        className,
+        style,
+        children,
+        loadingText = (
+            <div className={cls(`${prefixCls}-pull-refresh-label-text`)}>
+                <Loading type="circle" radius={4} />
+                <span>{locale.PullRefresh.loadingText}</span>
+            </div>
+        ),
+        pullingText = (
+            <div className={cls(`${prefixCls}-pull-refresh-label-text`)}>
+                <span>{locale.PullRefresh.pullingText}</span>
+            </div>
+        ),
+        finishText = (
+            <div className={cls(`${prefixCls}-pull-refresh-label-text`)}>
+                <span>{locale.PullRefresh.finishText}</span>
+            </div>
+        ),
+        initialText,
+        finishDelay = 300,
+        disabled = false,
+        loosingMinHeight,
+        useHideAsNestedScroll = true,
+        allowPullWhenNotTop = false,
+        onRefresh,
+    } = props;
+
+    const lastScrollTop = useRef(0);
+    const statusRef = useRef(PullRefreshStatus.Static);
+    const [labelStyle, setLabelStyle] = useState<CSSProperties>({});
+    const [contentHeight, setContentHeight] = useState(0);
+
+    const {
+        loadingRef,
+        status,
+        setStatus,
+        labelRef,
+        domRef,
+        touching,
+        setTouching,
+        loosingHeight,
+        tipsHeight,
+        handleRefresh,
+    } = useCommonState({ loosingMinHeight, onRefresh });
+    const { ifShouldHandle } = useCheckAsStart({ domRef, allowPullWhenNotTop });
+
+    const currentLabelStyle = useMemo(() => {
+        return (useHideAsNestedScroll &&
+            !touching &&
+            status === PullRefreshStatus.Pulling &&
+            (domRef?.current?.scrollTop ?? 0) > 0) ||
+            disabled
+            ? { ...labelStyle, opacity: 0 }
+            : labelStyle;
+    }, [labelStyle, useHideAsNestedScroll, touching, disabled]);
+
+    const pullTextConfig = {
+        [PullRefreshStatus.Static]: initialText === void 0 ? pullingText : initialText,
+        [PullRefreshStatus.Pulling]: pullingText,
+        [PullRefreshStatus.Loading]: loadingText,
+        [PullRefreshStatus.Finish]: finishText,
+    };
+
+    const reset = useCallback(
+        (animationKey: number, callback = () => {}) => {
+            if (animationRef.current === animationKey) {
+                setLabelStyle({
+                    position: 'relative',
+                    height: '0px',
+                    top: 0,
+                    transition: 'height .45s',
+                });
+            }
+            setTimeout(() => {
+                if (animationRef.current === animationKey) {
+                    if (domRef.current) domRef.current.style.overflow = 'auto';
+                    setStatus(PullRefreshStatus.Pulling);
+                    setLabelStyle({
+                        position: 'absolute',
+                        top: `-${tipsHeight}px`,
+                        height: `${tipsHeight}px`,
+                        transition: 'height 0s',
+                    });
+                    statusRef.current = PullRefreshStatus.Static;
+                    loadingRef.current = false;
+                    callback();
+                }
+            }, 450);
+        },
+        [tipsHeight],
+    );
+
+    const handleTouchStart = useCallback(() => {
+        if (disabled || loadingRef.current || !domRef.current || !ifShouldHandle()) return;
+        setTouching(true);
+
+        if (domRef.current && domRef.current.scrollTop === 0) {
+            domRef.current.scrollTop = 1;
+        }
+    }, [disabled, ifShouldHandle]);
+
+    const refresh = () =>
+        new Promise<void>(resolve => {
+            if (domRef.current) {
+                domRef.current.style.overflow = 'hidden';
+                const animationKey = new Date().getTime();
+                setStatus(PullRefreshStatus.Loading);
+                setLabelStyle({
+                    position: 'relative',
+                    top: 0,
+                    height: `${tipsHeight}px`,
+                    transition: 'height 0s',
+                });
+                animationRef.current = animationKey;
+                handleRefresh().then(() => {
+                    if (pullTextConfig[PullRefreshStatus.Finish]) {
+                        setStatus(PullRefreshStatus.Finish);
+                        setTimeout(() => {
+                            reset(animationKey, resolve);
+                        }, finishDelay);
+                    } else {
+                        reset(animationKey, resolve);
+                    }
+                });
+            }
+        });
+
+    const handleTouchEnd = useCallback(() => {
+        if (disabled || loadingRef.current || !domRef.current) return;
+        setTouching(false);
+        if (statusRef.current === PullRefreshStatus.Loosing) refresh();
+    }, [disabled, tipsHeight]);
+
+    const handleTouchMove = useCallback(() => {
+        if (disabled || loadingRef.current || !domRef.current) return;
+        setTimeout(() => {
+            const isLoosing = -(domRef.current?.scrollTop ?? 0) > loosingHeight;
+            if (isLoosing) lastScrollTop.current = domRef.current?.scrollTop ?? 0;
+            statusRef.current = isLoosing ? PullRefreshStatus.Loosing : PullRefreshStatus.Pulling;
+        });
+    }, [disabled, loosingHeight]);
+
+    const updateIOSHeight = useCallback(() => {
+        if (domRef.current) {
+            const { height } = domRef.current.getBoundingClientRect();
+            setContentHeight(height);
+        }
+    }, []);
+
+    useListenResize(updateIOSHeight);
+
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+        refresh,
+        updateIOSHeight,
+    }));
+
+    useEffect(() => {
+        updateIOSHeight();
+        reset(animationRef.current);
+    }, []);
+
+    useAddScrollEvents({ domRef, handleTouchStart, handleTouchMove, handleTouchEnd });
+
+    return (
+        <div
+            className={cls(`${prefixCls}-pull-refresh all-border-box is-ios`, className, {
+                'is-disabled': disabled || (!touching && useHideAsNestedScroll),
+            })}
+            ref={domRef}
+            style={contentHeight > 0 ? { height: contentHeight, ...(style || {}) } : style}
+        >
+            <div className={cls(`${prefixCls}-pull-refresh-content-wrapper`)}>
+                <div
+                    className={cls(`${prefixCls}-pull-refresh-label-wrapper`)}
+                    style={currentLabelStyle}
+                >
+                    <div className={cls(`${prefixCls}-pull-refresh-label`)} ref={labelRef}>
+                        {pullTextConfig[status]}
+                    </div>
+                </div>
+                <div
+                    className={cls(`${prefixCls}-pull-refresh-content`)}
+                    style={contentHeight > 0 ? { minHeight: `${contentHeight + 1}px` } : {}}
+                >
+                    {children}
+                </div>
+            </div>
+        </div>
+    );
+});

package/metaData/components/radio/doc.md

@@ -0,0 +1,89 @@
+### 数据录入
+
+# 单选框 Radio
+
+单选框，可用状态下点击切换选择，支持禁用，支持单选项组。
+
+======
+
+> 属性/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|
+
+> Radio.Group
+
+单选项组
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|options|可选项, 传入children后此值无效|(RadioProps\<ValueType\> & RefAttributes\<RadioRef\>)\[\]|-|
+|value|受控模式，选中的选项，传null表示取消选中|ValueType|-|
+|defaultValue|默认选中项|ValueType|-|
+|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|
+
+> RadioProps
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|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|{}|
+
+> RadioGroupRef
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|组件外层dom元素|HTMLDivElement|

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

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

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

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

package/metaData/components/radio/example/radio.tsx

@@ -0,0 +1,22 @@
+import React, { forwardRef, Ref, useImperativeHandle, useRef } from 'react';
+import Checkbox, { CheckboxProps, CheckboxRef } from '../checkbox';
+import { RadioGroupContext } from './group';
+import { RadioProps, RadioRef, ValueType } from './type';
+import { useMergeProps } from '../checkbox/hooks';
+
+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: RadioProps<T>, ref: Ref<RadioRef | null>) => {
+        const mergedProps = useMergeProps<T, P>(props as P, RadioGroupContext);
+        const radioRef = useRef<R | null>(null);
+
+        useImperativeHandle(ref, () => radioRef.current!);
+
+        return <Comp ref={radioRef} {...mergedProps} isRadio />;
+    });
+}
+
+export const Radio = componentGenerator(Checkbox);

package/metaData/components/rate/doc.md

@@ -0,0 +1,33 @@
+### 数据录入
+
+# 评分 Rate
+
+评分组件，支持受控模式
+
+======
+
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|className|自定义类名|string|-|
+|style|自定义样式|CSSProperties|-|
+|defaultValue|默认评分|number|0|
+|value|当前评分(受控)|number|-|
+|count|图标数量|number|5|
+|step|每个图标的分值|number|1|
+|color|选中时颜色|string|-|
+|normalColor|未选中时颜色|string|-|
+|disabledColor|禁用时颜色|string|-|
+|allowHalf|是否允许半选|boolean|false|
+|disabled|是否为禁用状态|boolean|false|
+|size|自定义图标大小|ReactText|-|
+|offset|自定义图标间距(点击热区包含间距)|ReactText|-|
+|icons|自定义图标|\{ normal: RateIconType; active: RateIconType; halfActive?: RateIconType; \}|-|
+|onChange|当前分值变化触发的事件|(value: number) =\> void|(value) => void|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|