@fjyueke/arco-mcp 1.0.0

package/metaData/components/swipe-load/example/index.tsx

@@ -0,0 +1,339 @@
+import React, {
+    useRef,
+    forwardRef,
+    Ref,
+    useImperativeHandle,
+    useEffect,
+    useState,
+    useContext,
+} from 'react';
+import { cls, fingerDisToLabelDis, defaultLocale } from '@arco-design/mobile-utils';
+import { ContextLayout, GlobalContext } from '../context-provider';
+import { SwipeLoadProps, SwipeLoadRef } from './type';
+import { setStyleWithVendor } from '../_helpers';
+import { useAddListener } from '../_helpers/hooks';
+
+export * from './type';
+
+/**
+ * 向左滑动到达屏幕边缘后，超过一定距离时触发加载，常用于横划展示少量的元素，滑动到底后跳转至另外界面的场景
+ * @en After swiping to the left to reach the edge of the screen, the loading is triggered when the distance exceeds a certain distance. It is often used to display a small number of elements horizontally, and then jump to another interface after swiping to the end.
+ * @type 反馈
+ * @type_en FeedBack
+ * @name 左滑加载
+ * @name_en SwipeLoad
+ */
+const SwipeLoad = forwardRef((props: SwipeLoadProps, ref: Ref<SwipeLoadRef>) => {
+    const {
+        className = '',
+        maxElementOffset = 56,
+        maxLabelOffset = 40,
+        onConfirm,
+        disabled = false,
+        circleSize = 80,
+        minConfirmOffset = 30,
+        labelAnimationFunction = 'cubic-bezier(0.14, 1, 0.34, 1)',
+        labelAnimationDuration = 250,
+        children,
+        normalText = '',
+        activeText = '',
+        initPos = 0,
+        bounceWhenBumpBoundary = false,
+        bounceDampRate = 3,
+        bounceAnimateDuration = 300,
+        damping,
+        bounceDistanceProcessor,
+        getScrollContainer,
+        getBounceContainer,
+        onTouchStart,
+        onTouchEnd,
+        onTouchCancel,
+        onTouchMove,
+        renderLabel,
+    } = props;
+    const { locale = defaultLocale, useRtl } = useContext(GlobalContext);
+    const [disableState, setDisableState] = useState(disabled);
+    const [labelOffsetState, setLabelOffsetState] = useState(0);
+    const containerRef = useRef<HTMLDivElement>(null);
+    const loadingRef = useRef<HTMLDivElement>(null);
+    const loadingLabelRef = useRef<HTMLDivElement>(null);
+    const showLoadMoreRef = useRef(false);
+    const ifToRightRef = useRef(false);
+    const bouncingRef = useRef(false);
+    const offsetRef = useRef(0);
+    const domRef = useRef<HTMLDivElement | null>(null);
+    const { current: wrapperEl } = domRef;
+    useAddListener(wrapperEl, 'touchstart', onTouchStart);
+    useAddListener(wrapperEl, 'touchend', onTouchEnd);
+    useAddListener(wrapperEl, 'touchcancel', onTouchCancel);
+    useAddListener(wrapperEl, 'touchmove', onTouchMove);
+
+    useEffect(() => {
+        if (disabled || !containerRef.current || disableState) {
+            return;
+        }
+        let scrollContainer;
+        // 对children类型进行判断
+        // @en Judging the type of children
+        if (containerRef.current.childNodes.length === 0) {
+            // 未传入子元素 不启用组件
+            // @en If no child element is passed in,  component will be disabled
+            setDisableState(true);
+        } else if (containerRef.current.childNodes.length === 1) {
+            // 传入一个子元素 滑动单个元素
+            // @en Pass in a child element swipe the single element
+            scrollContainer = getScrollContainer?.() ?? containerRef.current.firstChild;
+        } else {
+            // 传入多个子元素(列表元素为例) 组件控制自行滑动 不推荐
+            // @en Pass in multiple sub-elements (list elements as an example) Component control slides by itself which is not recommended
+            scrollContainer = containerRef.current;
+            scrollContainer.style.width = '100%';
+            scrollContainer.style.overflowX = 'scroll';
+            scrollContainer.style.display = 'inline-flex';
+            scrollContainer.style.webkitOverflowScrolling = 'touch';
+        }
+        if (!scrollContainer) {
+            return;
+        }
+        const { current: loadingCurrent } = loadingRef;
+        const { current: loadingLabelCurrent } = loadingLabelRef;
+        if (!loadingCurrent) {
+            return;
+        }
+        const bounceScrollContainer: HTMLElement = getBounceContainer?.() || scrollContainer;
+        // 初始不显示标签
+        // @en Initially no labels are displayed
+        loadingCurrent.style.display = 'none';
+        let startX = 0;
+        let endX = 0;
+        let bounceDistance = 0;
+        // 触摸页面确定X起始坐标
+        // @en Determine the X starting coordinate on touchstart
+        const touchstart = (e: TouchEvent) => {
+            const evt = e.touches[0];
+            startX = evt.clientX || 0;
+        };
+        // 页面滑动确定X终止坐标，更新手指的X坐标，改变loading中的文字和大小
+        // @en Determine the X end coordinate, update the X coordinate of the finger, change the text and size in the loading on touchmove
+        const touchmove = (e: TouchEvent) => {
+            // 判断元素是否属于滚动元素 先置为1 之后变成0表示非滚动容器
+            // @en Determine whether the element belongs to a scrolling element. Set it to 1 and then change to 0 to indicate a non-scrolling container
+            if (!scrollContainer.scrollLeft) {
+                scrollContainer.scrollLeft = useRtl ? -1 : 1;
+            }
+            endX = e.touches[0].clientX || 0;
+            const diff = endX - startX;
+            offsetRef.current = diff;
+            const labelDiff = fingerDisToLabelDis(Math.abs(diff), damping);
+
+            // 判断是否是滚动到列表开始方向，ltr模式下是向左滚动，rtl模式下是向右滚动
+            const isScrollToLeft = useRtl ? diff < 0 : diff > 0;
+            // 判断是否是滚动到列表结束方向，ltr模式下是向右滚动，rtl模式下是向左滚动
+            const isScrollToRight = useRtl ? diff > 0 : diff < 0;
+            // 滑动到最左侧，处理回弹效果
+            // @en Swipe to the far left to handle the rebound effect
+            if (
+                isScrollToLeft &&
+                Math.abs(scrollContainer.scrollLeft) <= 1 &&
+                bounceWhenBumpBoundary
+            ) {
+                e.stopPropagation();
+                e.cancelBubble && e.preventDefault();
+                bouncingRef.current = true;
+                const processor =
+                    bounceDistanceProcessor ||
+                    (dis => Math.min(dis, bounceScrollContainer.offsetWidth) / bounceDampRate);
+                bounceDistance = processor(diff);
+                setStyleWithVendor(bounceScrollContainer, {
+                    transition: 'none',
+                    transform: `translateX(${bounceDistance}px) translateZ(0)`,
+                });
+            }
+            // 向左滑动到尽头 '更多'标签加载 根据scrollLeft判断 滚动容器到达边缘触发 非滚动容器不判断
+            // @en Swipe left to the end and the 'more' label is loaded. Judging by scrollLeft, the scroll container reaches the edge and the non-scroll container does not judge
+            if (
+                isScrollToRight &&
+                (Math.abs(scrollContainer.scrollLeft) + scrollContainer.clientWidth >=
+                    scrollContainer.scrollWidth - 1 ||
+                    !scrollContainer.scrollLeft) &&
+                !ifToRightRef.current
+            ) {
+                showLoadMoreRef.current = true;
+                loadingCurrent.style.display = 'flex';
+            }
+            // 继续滑动露出标签
+            // @en Continue swiping to reveal labels
+            if (showLoadMoreRef.current && isScrollToRight) {
+                // 此时禁止list原生滚动
+                // @en Disable list native scrolling at this time
+                e.stopPropagation();
+                e.cancelable && e.preventDefault();
+                // list元素平移最大 maxElementOffset
+                // @en Maximum list element translation, maxElementOffset
+                const listRightMargin = labelDiff > maxElementOffset ? maxElementOffset : labelDiff;
+                // 标签的平移最大为40px(半圆)
+                // @en The translation of the label is up to 40px (semi-circle)
+                const labelRightMargin = labelDiff > maxLabelOffset ? maxLabelOffset : labelDiff;
+                setLabelOffsetState(labelRightMargin);
+                // 标签全部展示 字样改变
+                // @en All labels are displayed and the text style is changed
+                if (loadingLabelCurrent) {
+                    loadingLabelCurrent.innerHTML =
+                        labelDiff >= minConfirmOffset
+                            ? activeText || locale.SwipeLoad.activeText
+                            : normalText || locale.SwipeLoad.normalText;
+                }
+                setStyleWithVendor(loadingCurrent, {
+                    transition: 'none',
+                    transform: useRtl
+                        ? `translateX(${labelRightMargin}px) translateZ(0)`
+                        : `translateX(-${labelRightMargin}px) translateZ(0)`,
+                });
+                setStyleWithVendor(scrollContainer, {
+                    transition: 'none',
+                    transform: useRtl
+                        ? `translateX(${listRightMargin}px) translateZ(0)`
+                        : `translateX(-${listRightMargin}px) translateZ(0)`,
+                });
+            }
+            if (
+                isScrollToLeft &&
+                Math.abs(scrollContainer.scrollLeft) + scrollContainer.clientWidth <=
+                    scrollContainer.scrollWidth - 1
+            ) {
+                showLoadMoreRef.current = false;
+                loadingCurrent.style.display = 'none';
+            }
+            // 针对ios惯性滚动处理
+            // @en Handling inertial scrolling for ios
+            if (
+                isScrollToRight &&
+                Math.abs(scrollContainer.scrollLeft) + scrollContainer.clientWidth <=
+                    scrollContainer.scrollWidth - 1
+            ) {
+                ifToRightRef.current = false;
+            } else {
+                ifToRightRef.current = true;
+            }
+        };
+
+        // 露出标签 反方向滑动隐藏'更多'标签
+        // @en Reveal the label,  swipe in opposite direction to hide 'more' tab
+        const touchend = () => {
+            const diff = endX - startX;
+            offsetRef.current = diff;
+            const labelDiff = fingerDisToLabelDis(Math.abs(diff));
+            const resumeAnimation = () => {
+                if (showLoadMoreRef.current) {
+                    showLoadMoreRef.current = false;
+                    const scrollTransitionCssStyle = `all ${labelAnimationDuration}ms ${labelAnimationFunction}`;
+                    const scrollTransformCssStyle = 'translateX(0px) translateZ(0)';
+                    setStyleWithVendor(scrollContainer, {
+                        transition: scrollTransitionCssStyle,
+                        transform: scrollTransformCssStyle,
+                    });
+                    setStyleWithVendor(loadingCurrent, {
+                        transition: scrollTransitionCssStyle,
+                        transform: scrollTransformCssStyle,
+                    });
+                }
+                if (bouncingRef.current) {
+                    bouncingRef.current = false;
+                    setStyleWithVendor(bounceScrollContainer, {
+                        transition: `all ${bounceAnimateDuration}ms`,
+                        transform: 'translateX(0px) translateZ(0)',
+                    });
+                }
+                ifToRightRef.current = false;
+                setTimeout(() => {
+                    loadingCurrent.style.display = 'none';
+                }, labelAnimationDuration);
+            };
+            // 向左滑动 标签已经全部展示
+            // @em Swipe left,  labels are all displayed
+            if (
+                labelDiff >= minConfirmOffset &&
+                (Math.abs(scrollContainer.scrollLeft) + scrollContainer.clientWidth >=
+                    scrollContainer.scrollWidth - 1 ||
+                    !scrollContainer.scrollLeft) &&
+                showLoadMoreRef.current
+            ) {
+                onConfirm();
+                // 安卓机型返回动画优化
+                // @en Return animation optimization on Android
+                setTimeout(() => {
+                    resumeAnimation();
+                }, 250);
+                return;
+            }
+            resumeAnimation();
+        };
+        scrollContainer.addEventListener('touchstart', touchstart);
+        scrollContainer.addEventListener('touchmove', touchmove);
+        scrollContainer.addEventListener('touchend', touchend);
+        return () => {
+            scrollContainer.removeEventListener('touchstart', touchstart);
+            scrollContainer.removeEventListener('touchmove', touchmove);
+            scrollContainer.removeEventListener('touchend', touchend);
+        };
+    }, [
+        disabled,
+        getScrollContainer,
+        getBounceContainer,
+        bounceWhenBumpBoundary,
+        bounceDampRate,
+        bounceAnimateDuration,
+    ]);
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+    }));
+    return (
+        <ContextLayout>
+            {({ prefixCls }) => (
+                <div className={`${prefixCls}-swipe-load ${className}`} ref={domRef}>
+                    <div className={cls(`${prefixCls}-list-area`)} ref={containerRef}>
+                        {children}
+                    </div>
+                    {/*
+                     * 用户可以自行渲染label样式
+                     * @en Users can render the label style by themselves
+                     */}
+                    {renderLabel ? (
+                        <div
+                            className={cls(`${prefixCls}-custom-loading-area`)}
+                            ref={loadingRef}
+                            style={{
+                                position: 'absolute',
+                                [useRtl ? 'left' : 'right']: `${initPos}px`,
+                            }}
+                        >
+                            {/*
+                             * 判断自定义渲染label函数的参数个数 传入offset则根据位置渲染
+                             * @en Determine the number of parameters of the custom rendering label function, and pass in the offset to render according to the position
+                             */}
+                            {renderLabel.length ? renderLabel(labelOffsetState) : renderLabel()}
+                        </div>
+                    ) : (
+                        <div
+                            className={cls(`${prefixCls}-loading-area`)}
+                            ref={loadingRef}
+                            style={{
+                                width: `${circleSize}px`,
+                                height: `${circleSize}px`,
+                                position: 'absolute',
+                                [useRtl ? 'left' : 'right']: `-${circleSize}px`,
+                            }}
+                        >
+                            <div
+                                className={cls(`${prefixCls}-loading-label`)}
+                                ref={loadingLabelRef}
+                            />
+                        </div>
+                    )}
+                </div>
+            )}
+        </ContextLayout>
+    );
+});
+
+export default SwipeLoad;

package/metaData/components/swipe-load/example/type.tsx

@@ -0,0 +1,153 @@
+import { ReactNode } from 'react';
+
+export interface SwipeLoadProps {
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     * 是否禁用组件
+     * @en whether to be disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * 页面元素允许划动的最大距离
+     * @en The maximum distance the page element is allowed to swipe
+     * @default 56
+     */
+    maxElementOffset?: number;
+    /**
+     * label移动的最大距离
+     * @en The maximum distance the label moves
+     * @default 40
+     */
+    maxLabelOffset?: number;
+    /**
+     * 页面允许触发的临界值(通常小于maxLabelOffset)
+     * @en The threshold value at which the page is allowed to trigger (usually less than maxLabelOffset)
+     * @default 30
+     */
+    minConfirmOffset?: number;
+    /**
+     * 释放触发的函数(跳转，加载等)
+     * @en Callback when releasing(jump, load, etc.)
+     */
+    onConfirm: () => void;
+    /**
+     * 圆形的直径
+     * @en Diameter of circle
+     * @default 80
+     */
+    circleSize?: number;
+    /**
+     * 恢复动效时长(ms)
+     * @en Resume animation duration (ms)
+     * @default 250
+     */
+    labelAnimationDuration?: number;
+    /**
+     * 恢复动效函数
+     * @en Resume animation function (ms)
+     * @default "cubic-bezier(0.14, 1, 0.34, 1)"
+     */
+    labelAnimationFunction?: string;
+    /**
+     * 阻尼动效参数，使用函数x = X/(aX+b)，其中X代表当前滑动距离，传入的值代表[a, b]
+     * @en Damping animation parameter, use the function x = X/(aX+b), where X represents the current sliding distance, and the incoming value represents [a, b]
+     * @default [0.013312, 1.636345]
+     */
+    damping?: [number, number];
+    /**
+     * 得到滚动容器
+     * @en Scroll container
+     */
+    getScrollContainer?: () => HTMLElement | null;
+    /**
+     * 标签初始文案
+     * @en Label initial text
+     * @default "更多"
+     * @default_en "More"
+     */
+    normalText?: string;
+    /**
+     * 触发跳转文案
+     * @en Text when triggering jump
+     * @default "释放查看"
+     * @default_en "Release to view"
+     */
+    activeText?: string;
+    /**
+     * 触碰左侧边界时是否需要回弹效果
+     * @en Whether a bounce effect is required when touching the left boundary
+     * @default false
+     */
+    bounceWhenBumpBoundary?: boolean;
+    /**
+     * 当开启回弹效果时的阻尼系数
+     * @en Damping coefficient when the rebound effect is turned on
+     * @default 3
+     */
+    bounceDampRate?: number;
+    /**
+     * 当开启回弹效果时的动画毫秒时间
+     * @en Animation in milliseconds when the bounce effect is turned on
+     * @default 300
+     */
+    bounceAnimateDuration?: number;
+    /**
+     * 回弹效果开启时需要回弹的容器，默认为 getScrollContainer 返回的容器或容器的一个子元素
+     * @en The container that needs to be rebounded when the rebound effect is enabled, the default is the container returned by getScrollContainer or a child element of the container
+     */
+    getBounceContainer?: () => HTMLElement | null;
+    /**
+     * 当开启回弹效果时自定义手指滑动跟手的距离计算方式，dis表示touchmove的距离
+     * @en When the rebound effect is turned on, customize the calculation method of the distance between the finger sliding and the hand, and dis indicates the distance of touchmove
+     * @default (dis) => Math.min(dis, bounceScrollContainer.offsetWidth) / bounceDampRate
+     */
+    bounceDistanceProcessor?: (dis: number) => number;
+    /**
+     * 抛出外层touch事件，便于自定义，常用于阻止划动退出，切换tab等手势冲突
+     * @en Throw the outer touchstart event, which is easy to customize. It is often used to prevent gesture conflicts such as swiping to exit, switching tabs, etc.
+     */
+    onTouchStart?: (e?: TouchEvent) => void;
+    /**
+     * 抛出外层touch事件，便于自定义，常用于阻止划动退出，切换tab等手势冲突
+     * @en Throws the outer touchmove event, which is easy to customize. It is often used to prevent gesture conflicts such as swiping to exit, switching tabs, etc.
+     */
+    onTouchMove?: (e?: TouchEvent) => void;
+    /**
+     * 抛出外层touch事件，便于自定义，常用于阻止划动退出，切换tab等手势冲突
+     * @en Throws the outer touchend event, which is easy to customize. It is often used to prevent gesture conflicts such as swiping to exit, switching tabs, etc.
+     */
+    onTouchEnd?: (e?: TouchEvent) => void;
+    /**
+     * 抛出外层touch事件，便于自定义，常用于阻止划动退出，切换tab等手势冲突
+     * @en Throws the outer touchcancel event, which is easy to customize. It is often used to prevent gesture conflicts such as swiping to exit, switching tabs, etc.
+     */
+    onTouchCancel?: (e?: TouchEvent) => void;
+    /**
+     * 用户自定义标签样式
+     * @en User-defined label style
+     */
+    renderLabel?: (offset?: number) => ReactNode;
+    /**
+     * 标签的初始位置 自定义必传
+     * @en The initial position of the label, required when customized
+     * @default 0
+     */
+    initPos?: number;
+    /**
+     * 子元素
+     * @en Children elements
+     */
+    children: ReactNode;
+}
+export interface SwipeLoadRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+}

package/metaData/components/switch/doc.md

@@ -0,0 +1,38 @@
+### 数据录入
+
+# 开关 Switch
+
+开关组件，支持点击和滑动触发开关动作。
+
+======
+
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|className|自定义类名|string|-|
+|style|自定义样式|CSSProperties|-|
+|platform|组件的平台特有样式, 可选值为 android, ios|string|跟随当前所在系统|
+|checked|是否设置为打开状态 有checked时defaultChecked不会使用|boolean|-|
+|defaultChecked|默认的初始状态|boolean|false|
+|text|开关文案|SwitchText|-|
+|shape|圆角样式， fully \- 全圆角，semi \- 直角|"fully" \| "semi"|"fully"|
+|innerArea|内部区域元素|ReactNode|-|
+|disabled|是否设置为禁用状态|boolean|false|
+|onChange|状态改变时触发的回调函数|(checked: boolean) =\> void|-|
+|onTouchStart|touchStart事件回调|(e: TouchEvent\<HTMLDivElement\>) =\> void|-|
+|onTouchEnd|touchEnd事件回调|(e: TouchEvent\<HTMLDivElement\>) =\> void|-|
+|onClick|click事件回调|(e: MouseEvent\<HTMLDivElement, MouseEvent\>) =\> void|-|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|
+
+> SwitchText
+
+|参数|描述|类型|
+|----------|-------------|------|
+|on|打开时的展示文案|string|
+|off|关闭时的展示文案|string|