@fjyueke/arco-mcp 1.0.0

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

@@ -0,0 +1,338 @@
+import React, {
+    useRef,
+    forwardRef,
+    Ref,
+    useImperativeHandle,
+    useEffect,
+    RefObject,
+    useMemo,
+    useContext,
+    useState,
+} from 'react';
+import { nextTick, cls } from '@arco-design/mobile-utils';
+import { GlobalContext } from '../context-provider';
+import { SwipeActionProps, SwipeActionRef } from './type';
+import RenderAction from './item';
+import { getStyleWithVendor, useLatestRef, useRefState } from '../_helpers';
+
+export * from './type';
+
+/**
+ * 滑动操作组件，左右滑动拉出菜单栏
+ * @en SwipeAction component, slide left and right to pull out the menu bar
+ * @type 反馈
+ * @type_en FeedBack
+ * @name 滑动操作
+ * @name_en SwipeAction
+ */
+
+const SwipeAction = forwardRef((props: SwipeActionProps, ref: Ref<SwipeActionRef>) => {
+    const {
+        className = '',
+        style,
+        children,
+        leftActions,
+        rightActions,
+        disabled = false,
+        threshold = 0.15,
+        closeOnTouchOutside,
+        transitionDuration = 300,
+        dampRate = 15,
+        openStyleType = 'layer',
+        onClose,
+        onOpen,
+    } = props;
+
+    const domRef = useRef<HTMLDivElement>(null);
+    const leftRef = useRef<HTMLDivElement>(null);
+    const rightRef = useRef<HTMLDivElement>(null);
+
+    const isOpen = useRef(false);
+
+    const leftMenuWidthRef = useRef<number>(0);
+    const [leftMenuWidthArr, setLeftMenuWidthArr] = useState<number[]>([]);
+    const rightMenuWidthRef = useRef<number>(0);
+    const [rightMenuWidthArr, setRightMenuWidthArr] = useState<number[]>([]);
+    const dampRateRef = useLatestRef(dampRate);
+    const forbidClick = useRef(false);
+    const scrollingRef = useRef<boolean | null>(null);
+
+    const [moving, movingRef, setMoving] = useRefState(false);
+    const [offset, offsetRef, setOffset] = useRefState(0);
+    const { prefixCls } = useContext(GlobalContext);
+
+    const startRef = useRef(0);
+    const startX = useRef(0);
+    const startY = useRef(0);
+    const slideX = useRef(0);
+    const isLayer = openStyleType === 'layer';
+
+    const transitionStyle = useMemo(
+        () =>
+            getStyleWithVendor({
+                transitionDuration: moving ? '0ms' : `${transitionDuration}ms`,
+            }),
+        [moving, transitionDuration],
+    );
+
+    function resetMoveData() {
+        startX.current = 0;
+        startY.current = 0;
+        slideX.current = 0;
+    }
+
+    function getMenuCurrentWidth(a: number, min: number, max: number): number {
+        const buffer = Math.abs(a) / dampRateRef.current;
+        return Math.min(Math.max(a, min - buffer), max + buffer);
+    }
+
+    function touchstart(e: TouchEvent) {
+        startRef.current = offsetRef.current;
+        resetMoveData();
+        scrollingRef.current = null;
+        startX.current = e.touches[0].pageX;
+        startY.current = e.touches[0].pageY;
+    }
+
+    function touchmove(e: TouchEvent) {
+        const x = e.changedTouches[0].pageX - startX.current;
+        const y = e.changedTouches[0].pageY - startY.current;
+        if (scrollingRef.current === null) {
+            scrollingRef.current = Math.abs(x) < Math.abs(y);
+        }
+        if (scrollingRef.current) {
+            setMoving(false);
+            setOffset(0);
+            return;
+        }
+        e.cancelable && e.preventDefault();
+        slideX.current = x;
+        forbidClick.current = true;
+        setMoving(true);
+        setOffset(
+            getMenuCurrentWidth(
+                slideX.current + startRef.current,
+                -rightMenuWidthRef.current,
+                leftMenuWidthRef.current,
+            ),
+        );
+    }
+
+    function touchend() {
+        if (movingRef.current && !scrollingRef.current) {
+            const currentMenu = offsetRef.current > 0 ? 'left' : 'right';
+            changeMenu(currentMenu);
+            setMoving(false);
+            nextTick(() => {
+                forbidClick.current = false;
+            });
+        }
+    }
+
+    function changeMenu(dir: 'left' | 'right') {
+        const cookedThreshold = isOpen.current ? 1 - threshold : threshold;
+        const width = dir === 'left' ? leftMenuWidthRef.current : rightMenuWidthRef.current;
+        if (width && Math.abs(offsetRef.current) > width * cookedThreshold) {
+            open(dir);
+        } else {
+            close(dir);
+        }
+    }
+
+    function getWidthByRef(widthRef: RefObject<HTMLDivElement | null>) {
+        if (!widthRef.current) {
+            return { totalWidth: 0, widthArr: [] };
+        }
+        let totalWidth = 0;
+        const widthArr: number[] = [];
+        const allEle = widthRef.current.getElementsByClassName(
+            `${prefixCls}-swipe-action-menu-action-info-container`,
+        );
+        Array.prototype.forEach.call(allEle, (ele: HTMLElement) => {
+            const w = ele.getBoundingClientRect().width ?? 0;
+            totalWidth += w;
+            widthArr.push(w);
+        });
+        return {
+            totalWidth,
+            widthArr,
+        };
+    }
+
+    useEffect(() => {
+        const container = domRef.current;
+        if (!disabled && container) {
+            container.addEventListener('touchstart', touchstart);
+            container.addEventListener('touchmove', touchmove);
+            container.addEventListener('touchend', touchend);
+        }
+        return () => {
+            if (!disabled && container) {
+                container.removeEventListener('touchstart', touchstart);
+                container.removeEventListener('touchmove', touchmove);
+                container.removeEventListener('touchend', touchend);
+            }
+        };
+    }, [disabled]);
+
+    // 获取左右菜单的宽度
+    // @en Get the width of the left and right menu
+    useEffect(() => {
+        const { totalWidth: leftTotalWidth, widthArr: leftWidthArr } = getWidthByRef(leftRef);
+        leftMenuWidthRef.current = leftTotalWidth;
+        setLeftMenuWidthArr(leftWidthArr);
+        const { totalWidth: rightTotalWidth, widthArr: rightWidthArr } = getWidthByRef(rightRef);
+        rightMenuWidthRef.current = rightTotalWidth;
+        setRightMenuWidthArr(rightWidthArr);
+    }, [leftActions, rightActions]);
+
+    // 点击外部区域事件
+    // @en Event when clicking outside of the element
+    useEffect(() => {
+        const handle = e => {
+            if (!domRef.current?.contains(e.target) && isOpen.current) {
+                close();
+            }
+        };
+        closeOnTouchOutside && document.addEventListener('touchstart', handle);
+        return () => {
+            closeOnTouchOutside && document.removeEventListener('touchstart', handle);
+        };
+    }, [closeOnTouchOutside]);
+
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+        close,
+        open,
+    }));
+
+    function close(dir?: 'left' | 'right') {
+        setOffset(0);
+        if (isOpen.current) {
+            isOpen.current = false;
+            if (!dir && offsetRef.current !== 0) {
+                const noDir = offsetRef.current > 0 ? 'left' : 'right';
+                handleClose(noDir);
+                return;
+            }
+            handleClose(dir);
+        }
+    }
+    function open(dir: 'left' | 'right' = 'right') {
+        if (!isOpen.current) {
+            isOpen.current = true;
+            handleOpen(dir);
+        }
+        setOffset(dir === 'left' ? leftMenuWidthRef.current : -rightMenuWidthRef.current);
+    }
+
+    function handleOpen(dir) {
+        setTimeout(() => {
+            onOpen?.(dir);
+        }, transitionDuration);
+    }
+
+    function handleClose(dir) {
+        setTimeout(() => {
+            onClose?.(dir);
+        }, transitionDuration);
+    }
+
+    function actionClick(e) {
+        if (
+            isOpen.current &&
+            !forbidClick.current &&
+            !leftRef.current?.contains(e.target) &&
+            !rightRef.current?.contains(e.target)
+        ) {
+            close();
+        }
+    }
+
+    function getActionRightByIndex(index: number) {
+        const preWidth = leftMenuWidthArr.slice(index + 1).reduce((acc, cur) => acc + cur, 0);
+        return `${(preWidth / leftMenuWidthRef.current || 0) * 100}%`;
+    }
+
+    function getActionLeftByIndex(index: number) {
+        const preWidth = rightMenuWidthArr.slice(0, index).reduce((acc, cur) => acc + cur, 0);
+        return `${(preWidth / rightMenuWidthRef.current || 0) * 100}%`;
+    }
+
+    return (
+        <div
+            className={cls(
+                `${prefixCls}-swipe-action`,
+                className,
+                offset === 0 ? 'action-close' : 'action-open',
+            )}
+            style={getStyleWithVendor({
+                ...(style || {}),
+                ...transitionStyle,
+                transform: `translateX(${offset}px)`,
+            })}
+            ref={domRef}
+            onClick={actionClick}
+        >
+            <div
+                className={cls(
+                    `${prefixCls}-swipe-action-menu-left`,
+                    `${prefixCls}-swipe-action-menu`,
+                    offset > 0 ? 'action-open' : 'action-close',
+                )}
+                ref={leftRef}
+                style={isLayer && offset >= 0 ? { width: offset, ...transitionStyle } : {}}
+            >
+                {leftActions?.map((action, index) => (
+                    <RenderAction
+                        action={{
+                            ...(action || {}),
+                            style: {
+                                ...(isLayer ? { right: getActionRightByIndex(index) } : {}),
+                                ...(action.style || {}),
+                            },
+                            className: cls(action.className, `open-style-${openStyleType}`),
+                        }}
+                        prefixCls={`${prefixCls}-swipe-action-menu-action`}
+                        index={leftActions.length - index}
+                        type="left"
+                        close={close}
+                        key={index}
+                    />
+                ))}
+            </div>
+
+            <div className={`${prefixCls}-swipe-action-content`}>{children}</div>
+
+            <div
+                className={cls(
+                    `${prefixCls}-swipe-action-menu-right`,
+                    `${prefixCls}-swipe-action-menu`,
+                    offset < 0 ? 'action-open' : 'action-close',
+                )}
+                ref={rightRef}
+                style={isLayer && offset <= 0 ? { width: -1 * offset, ...transitionStyle } : {}}
+            >
+                {rightActions?.map((action, index) => (
+                    <RenderAction
+                        action={{
+                            ...(action || {}),
+                            style: {
+                                ...(isLayer ? { left: getActionLeftByIndex(index) } : {}),
+                                ...(action.style || {}),
+                            },
+                            className: cls(action.className, `open-style-${openStyleType}`),
+                        }}
+                        prefixCls={`${prefixCls}-swipe-action-menu-action`}
+                        index={index + 1}
+                        type="right"
+                        close={close}
+                        key={index}
+                    />
+                ))}
+            </div>
+        </div>
+    );
+});
+
+export default SwipeAction;

package/metaData/components/swipe-action/example/item.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { cls } from '@arco-design/mobile-utils';
+import { Action } from './type';
+
+interface IProps {
+    action: Action;
+    prefixCls: string;
+    index: number;
+    type: 'left' | 'right';
+    close: () => void;
+}
+
+export default function renderAction({ action, prefixCls, index, type, close }: IProps) {
+    const { text, style: actionStyle, className, onClick, icon, children } = action;
+    function click() {
+        const result = onClick?.() || null;
+        if (!result || typeof result === 'boolean') {
+            !result && close();
+        } else if (result && result.then) {
+            result.then(res => !res && close());
+        }
+    }
+    return (
+        <div
+            className={cls(`${prefixCls}-${type} ${prefixCls}-info-container`, className)}
+            style={{
+                zIndex: index,
+                ...actionStyle,
+            }}
+            onClick={click}
+        >
+            {children || (
+                <div className={`${prefixCls}-info`}>
+                    {icon ? <div className={`${prefixCls}-info-icon`}>{icon}</div> : null}
+                    {text ? <div className={`${prefixCls}-info-text`}>{text}</div> : null}
+                </div>
+            )}
+        </div>
+    );
+}

package/metaData/components/swipe-load/doc.md

@@ -0,0 +1,43 @@
+### 反馈
+
+# 左滑加载 SwipeLoad
+
+向左滑动到达屏幕边缘后，超过一定距离时触发加载，常用于横划展示少量的元素，滑动到底后跳转至另外界面的场景
+
+======
+
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|className|自定义类名|string|-|
+|disabled|是否禁用组件|boolean|false|
+|maxElementOffset|页面元素允许划动的最大距离|number|56|
+|maxLabelOffset|label移动的最大距离|number|40|
+|minConfirmOffset|页面允许触发的临界值(通常小于maxLabelOffset)|number|30|
+|onConfirm|释放触发的函数(跳转，加载等)|() =\> void|必填|
+|circleSize|圆形的直径|number|80|
+|labelAnimationDuration|恢复动效时长(ms)|number|250|
+|labelAnimationFunction|恢复动效函数|string|"cubic-bezier(0.14, 1, 0.34, 1)"|
+|damping|阻尼动效参数，使用函数x = X/(aX\+b)，其中X代表当前滑动距离，传入的值代表\[a, b\]|\[number, number\]|[0.013312, 1.636345]|
+|getScrollContainer|得到滚动容器|() =\> HTMLElement|-|
+|normalText|标签初始文案|string|"更多"|
+|activeText|触发跳转文案|string|"释放查看"|
+|bounceWhenBumpBoundary|触碰左侧边界时是否需要回弹效果|boolean|false|
+|bounceDampRate|当开启回弹效果时的阻尼系数|number|3|
+|bounceAnimateDuration|当开启回弹效果时的动画毫秒时间|number|300|
+|getBounceContainer|回弹效果开启时需要回弹的容器，默认为 getScrollContainer 返回的容器或容器的一个子元素|() =\> HTMLElement|-|
+|bounceDistanceProcessor|当开启回弹效果时自定义手指滑动跟手的距离计算方式，dis表示touchmove的距离|(dis: number) =\> number|(dis) => Math.min(dis, bounceScrollContainer.offsetWidth) / bounceDampRate|
+|onTouchStart|抛出外层touch事件，便于自定义，常用于阻止划动退出，切换tab等手势冲突|(e?: TouchEvent) =\> void|-|
+|onTouchMove|抛出外层touch事件，便于自定义，常用于阻止划动退出，切换tab等手势冲突|(e?: TouchEvent) =\> void|-|
+|onTouchEnd|抛出外层touch事件，便于自定义，常用于阻止划动退出，切换tab等手势冲突|(e?: TouchEvent) =\> void|-|
+|onTouchCancel|抛出外层touch事件，便于自定义，常用于阻止划动退出，切换tab等手势冲突|(e?: TouchEvent) =\> void|-|
+|renderLabel|用户自定义标签样式|(offset?: number) =\> ReactNode|-|
+|initPos|标签的初始位置 自定义必传|number|0|
+|children|子元素|ReactNode|必填|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|