@fjyueke/arco-mcp 1.0.0

package/metaData/components/tabs/example/tab-pane.tsx

@@ -0,0 +1,349 @@
+import React, {
+    useRef,
+    forwardRef,
+    Ref,
+    useImperativeHandle,
+    CSSProperties,
+    useState,
+    useEffect,
+    useMemo,
+} from 'react';
+import lodashThrottle from 'lodash.throttle';
+import { cls, scrollWithAnimation, getScrollContainerRect, isSSR } from '@arco-design/mobile-utils';
+import { getStyleWithVendor } from '../_helpers';
+import { TabPaneProps, TabPaneRef } from './type';
+
+const TabPane = forwardRef((props: TabPaneProps, ref: Ref<TabPaneRef>) => {
+    const {
+        prefixCls,
+        panes,
+        tabDirection,
+        activeIndex,
+        activeIndexRef,
+        distance,
+        wrapWidth,
+        wrapHeight,
+        handlePaneTouchEnd,
+        transitionDuration,
+        paneTrans,
+        swipeable,
+        lazyloadCount,
+        hideContentStyle,
+        renderHideContent,
+        mode,
+        tabPaneStyle,
+        tabPaneClass,
+        tabPaneExtra,
+        getScrollContainer,
+        scrollThrottle,
+        scrollOffset = 0,
+        goLastWhenScrollBottom,
+        scrollVertical,
+        translateZ,
+        fullScreen,
+        autoHeight,
+        swipeEnergySaving,
+        changeIndex,
+        onScroll,
+        rtlRatio,
+    } = props;
+    const domRef = useRef<HTMLDivElement | null>(null);
+    const panesRef = useRef<(HTMLDivElement | null)[]>([]);
+    const autoScrollingRef = useRef(false);
+    const timerRef = useRef(0);
+    const [shownIndexes, setShownIndexes] = useState<[number, number]>([activeIndex, activeIndex]);
+    const [shownActiveIndex, setShownActiveIndex] = useState(activeIndex);
+    const prefix = `${prefixCls}-tab-pane`;
+    const handleTouchEnd = swipeable ? handlePaneTouchEnd : void 0;
+    const [currentPaneHeight, setCurrentPaneHeight] = useState<number | string>('auto');
+
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+        getTransition,
+        scrollToIndex,
+        setCurrentHeight,
+    }));
+
+    useEffect(() => {
+        if (mode === 'swipe') {
+            setTimeout(() => {
+                calcShownIndexes();
+            }, getTransition());
+        }
+    }, [lazyloadCount, activeIndex, mode]);
+
+    const scrollHandler = useMemo(() => {
+        if (mode !== 'scroll') {
+            return () => {};
+        }
+        const handler = () => {
+            onScroll?.();
+            if (autoScrollingRef.current) {
+                return;
+            }
+            const container = getScrollContainer ? getScrollContainer() : window;
+            if (!container) return;
+            const { containerTop, containerBottom } = getContainerTop(container);
+            for (let i = 0; i < panes.length; i += 1) {
+                // 判断范围：-∞ ... top0 ... top1 ... top n ... ∞
+                // @en Judge the range: (-∞, top0, top1, ...top n, ∞)
+                const curPaneTop = i === 0 ? -Infinity : getRectTop(panesRef.current[i]);
+                const nextPaneTop =
+                    i === panes.length - 1 ? Infinity : getRectTop(panesRef.current[i + 1]);
+                if (
+                    containerTop >= curPaneTop - scrollOffset &&
+                    containerTop < nextPaneTop - scrollOffset
+                ) {
+                    changeIndex(i, 'scroll');
+                    break;
+                }
+            }
+            if (goLastWhenScrollBottom) {
+                const lastIndex = panes.length - 1;
+                const curPaneBottom = getRectTop(panesRef.current[lastIndex], 'bottom');
+                if (containerBottom === curPaneBottom) {
+                    changeIndex(lastIndex, 'scroll');
+                }
+            }
+        };
+        return scrollThrottle ? lodashThrottle(handler, scrollThrottle) : handler;
+    }, [
+        mode,
+        scrollThrottle,
+        getScrollContainer,
+        panes.length,
+        scrollOffset,
+        goLastWhenScrollBottom,
+        scrollVertical,
+        onScroll,
+    ]);
+
+    useEffect(() => {
+        const container = getScrollContainer?.() || window;
+        if (container && mode === 'scroll') {
+            container.addEventListener('scroll', scrollHandler);
+        }
+        return () => {
+            if (container && mode === 'scroll') {
+                container.removeEventListener('scroll', scrollHandler);
+            }
+        };
+    }, [scrollHandler]);
+
+    function setCurrentHeight() {
+        if (!domRef.current || !autoHeight || mode !== 'swipe' || tabDirection !== 'vertical') {
+            return;
+        }
+        const allPanesDom = panesRef.current;
+        const nowIndex = activeIndexRef.current;
+        const currentHeight = (allPanesDom[nowIndex] || {}).offsetHeight || 'auto';
+        setCurrentPaneHeight(currentHeight);
+    }
+
+    function calcShownIndexes() {
+        setShownActiveIndex(activeIndex);
+        if (typeof lazyloadCount === 'number') {
+            setShownIndexes([activeIndex - lazyloadCount, activeIndex + lazyloadCount]);
+            return;
+        }
+        setShownIndexes([0, Infinity]);
+    }
+
+    function getTransition() {
+        return paneTrans ? transitionDuration || 0 : 0;
+    }
+
+    function scrollToIndex(index: number, rightNow?: boolean) {
+        const container = getScrollContainer?.() || window;
+        const { isGlobal, scrollEle, containerTop } = getContainerTop(container);
+        const curPaneTop = getRectTop(panesRef.current[index]);
+        const topDis = curPaneTop - containerTop - scrollOffset;
+        const scrollAttr = scrollVertical ? 'scrollTop' : 'scrollLeft';
+        const scrollTop = isGlobal
+            ? Math.max(document.documentElement[scrollAttr], document.body[scrollAttr])
+            : scrollEle[scrollAttr];
+        const scrollSizeAttr = scrollVertical ? 'scrollHeight' : 'scrollWidth';
+        const sizeAttr = scrollVertical ? 'offsetHeight' : 'offsetWidth';
+        const maxTopDis = isGlobal
+            ? Math.max(document.documentElement[scrollSizeAttr], document.body[scrollSizeAttr]) -
+              scrollTop -
+              (scrollVertical ? window.innerHeight : window.innerWidth)
+            : scrollEle[scrollSizeAttr] - scrollTop - scrollEle[sizeAttr];
+        const normalizedTopDis = Math.min(maxTopDis, topDis);
+        clearTimeout(timerRef.current);
+        autoScrollingRef.current = true;
+        const duration = rightNow ? 0 : transitionDuration || 0;
+        scrollWithAnimation(
+            scrollTop,
+            scrollTop + normalizedTopDis,
+            top => {
+                if (isGlobal) {
+                    document.documentElement[scrollAttr] = top;
+                    document.body[scrollAttr] = top;
+                } else {
+                    scrollEle[scrollAttr] = top;
+                }
+            },
+            duration,
+        );
+        // 在自动滚动完成后，过一小段时间再解锁，避免最后一次触发scroll还未完成时就解锁导致乱跳的情况
+        // @en After the automatic scrolling is completed, unlock it after a short period of time, to avoid the situation of random jumping caused by unlocking when the scroll is not completed for the last time.
+        const buffer = 100;
+        timerRef.current = window.setTimeout(() => {
+            autoScrollingRef.current = false;
+        }, duration + (scrollThrottle || 0) + buffer);
+    }
+
+    function getContainerTop(container: HTMLElement | Window) {
+        const { isGlobal, scrollEle, containerRect } = getScrollContainerRect(container);
+        const containerTop = Math.floor(scrollVertical ? containerRect.top : containerRect.left);
+        const containerBottom = Math.floor(
+            scrollVertical ? containerRect.bottom : containerRect.right,
+        );
+        return { isGlobal, scrollEle: scrollEle!, containerTop, containerBottom };
+    }
+
+    function getRectTop(ele: HTMLElement | null, attr: 'top' | 'bottom' = 'top') {
+        const attrMap: Record<'top' | 'bottom', string> = scrollVertical
+            ? { top: 'top', bottom: 'bottom' }
+            : { top: 'left', bottom: 'right' };
+        const attrKey = attrMap[attr];
+        const rect = ele?.getBoundingClientRect() || {};
+        // 消除误差
+        // @en Eliminate errors
+        return rect[attrKey] ? Math.floor(rect[attrKey]) : 0;
+    }
+
+    function getPaneStyle(): CSSProperties {
+        const commonStyle = tabPaneStyle || {};
+        if (mode === 'scroll') {
+            return commonStyle;
+        }
+        const translateStr = translateZ ? ' translateZ(0)' : '';
+        const translatePercentInSSR = `${
+            (panes.length ? 100 / panes.length : 0) * activeIndex * rtlRatio * -1
+        }%`;
+        const verticalTranslate = `${distance - wrapWidth * activeIndex * rtlRatio}px`;
+        const horizontalTranslate = `${distance - wrapHeight * activeIndex}px`;
+        const sizeStyle =
+            tabDirection === 'vertical'
+                ? {
+                      width: `${100 * panes.length}%`,
+                      transform: `translateX(${
+                          isSSR() ? translatePercentInSSR : verticalTranslate
+                      })${translateStr}`,
+                  }
+                : {
+                      height: `${100 * panes.length}%`,
+                      transform: `translateY(${
+                          isSSR() ? translatePercentInSSR : horizontalTranslate
+                      })${translateStr}`,
+                  };
+        const heightStyle =
+            currentPaneHeight && currentPaneHeight !== 'auto'
+                ? {
+                      height: currentPaneHeight,
+                  }
+                : {};
+        return getStyleWithVendor({
+            ...(swipeEnergySaving ? {} : sizeStyle),
+            transitionDuration: `${getTransition()}ms`,
+            ...heightStyle,
+            ...commonStyle,
+        });
+    }
+
+    function getEnergySavingPaneStyle(index: number): CSSProperties | undefined {
+        if (mode === 'scroll' || !swipeEnergySaving) {
+            return undefined;
+        }
+        if (index !== shownActiveIndex) {
+            return {
+                position: 'absolute',
+                left: '-100%',
+                top: '-100%',
+            };
+        }
+        const translateStr = translateZ ? ' translateZ(0)' : '';
+        const sizeStyle =
+            tabDirection === 'vertical'
+                ? {
+                      transform: `translateX(${
+                          distance - wrapWidth * (activeIndex - index) * rtlRatio
+                      }px)${translateStr}`,
+                  }
+                : {
+                      transform: `translateY(${
+                          distance - wrapHeight * (activeIndex - index)
+                      }px)${translateStr}`,
+                  };
+        return getStyleWithVendor({
+            ...sizeStyle,
+            transitionDuration: `${getTransition()}ms`,
+        });
+    }
+
+    function renderContent(pane: React.ReactNode, index: number) {
+        const contentProps = {
+            key: index,
+            className: cls(prefix, `mode-${mode}`, { 'full-screen': fullScreen }),
+            ref: r => (panesRef.current[index] = r),
+        };
+        const energySavingStyle = getEnergySavingPaneStyle(index);
+        // 是滚动模式或在加载范围内，直接渲染
+        // @en Render directly when in scroll mode or in loading scope
+        if (mode === 'scroll' || (index >= shownIndexes[0] && index <= shownIndexes[1])) {
+            return (
+                <div {...contentProps} style={energySavingStyle}>
+                    {pane}
+                </div>
+            );
+        }
+        const energySavingHideStyle = {
+            ...energySavingStyle,
+            ...(hideContentStyle || {}),
+        };
+        // 不在加载范围内，视renderHideContent和hideContentStyle情况而定
+        // @en Not in the loading range, depending on renderHideContent and hideContentStyle
+        if (renderHideContent) {
+            return (
+                <div {...contentProps} style={energySavingHideStyle}>
+                    {renderHideContent(index, pane)}
+                </div>
+            );
+        }
+        if (hideContentStyle === null) {
+            return <div {...contentProps} style={energySavingStyle} />;
+        }
+        return (
+            <div {...contentProps} style={energySavingHideStyle}>
+                {pane}
+            </div>
+        );
+    }
+
+    return (
+        <div
+            className={cls(
+                `${prefix}-container`,
+                tabDirection,
+                swipeEnergySaving ? `mode-${mode}-energy-saving` : `mode-${mode}`,
+                tabPaneClass,
+                { 'full-screen': fullScreen },
+                {
+                    [`mode-scroll-${scrollVertical ? 'vertical' : 'horizontal'}`]:
+                        mode === 'scroll',
+                },
+            )}
+            style={getPaneStyle()}
+            ref={domRef}
+            onTouchEnd={handleTouchEnd}
+            onTouchCancel={handleTouchEnd}
+        >
+            {panes.map((pane, index) => renderContent(pane, index))}
+            {tabPaneExtra ? <div className={`${prefix}-extra`}>{tabPaneExtra}</div> : null}
+        </div>
+    );
+});
+
+export default TabPane;

package/metaData/components/tag/doc.md

@@ -0,0 +1,80 @@
+### 信息展示
+
+# 标签 Tag
+
+标签组件，支持标签和标签组。
+
+======
+
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|className|自定义类名|string|-|
+|style|自定义样式|CSSProperties|-|
+|type|样式类型。primary表示基本类型，hollow表示空心类型，solid表示实心类型|"primary" \| "hollow" \| "solid"|"primary"|
+|icon|图标内容|ReactNode|-|
+|children|标签内部内容|ReactNode|-|
+|size|标签尺寸|"medium" \| "large" \| "small"|"medium"|
+|color|文字颜色|string|-|
+|bgColor|背景颜色|string|-|
+|borderColor|边框颜色|string|-|
+|borderStyle|边框样式|"solid" \| "none" \| "dotted" \| "dashed"|"solid"|
+|halfBorder|是否是0\.5px边框|boolean|true|
+|closeable|是否有关闭按钮|boolean|-|
+|closeIcon|关闭按钮内容|ReactNode|-|
+|closeColor|关闭按钮颜色|string|-|
+|filleted|是否圆角|boolean|-|
+|onClose|点击关闭按钮回调|(e: MouseEvent\<HTMLDivElement, MouseEvent\>) =\> void|-|
+|onClick|点击标签回调|(e: MouseEvent\<HTMLDivElement, MouseEvent\>) =\> void|-|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|
+
+> Tag.List
+
+标签列表，支持动态编辑标签
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|list|标签列表|(TagProps & RefAttributes\<TagRef\>)\[\]|必填|
+|className|自定义类名|string|-|
+|style|自定义样式|CSSProperties|-|
+|type|样式类型。primary表示基本类型，hollow表示空心类型，solid表示实心类型|"primary" \| "hollow" \| "solid"|-|
+|showAddButton|是否展示添加标签按钮|boolean|true|
+|addArea|自定义添加标签按钮|ReactNode|-|
+|horizontalPadding|标签横向间距|ReactText|-|
+|verticalPadding|标签纵向间距|ReactText|-|
+|onAdd|点击添加标签按钮回调|(e: MouseEvent\<HTMLDivElement, MouseEvent\>) =\> void|-|
+|onClose|点击标签关闭按钮回调|(index: number, e: MouseEvent\<HTMLDivElement, MouseEvent\>) =\> void|-|
+
+> TagProps
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|className|自定义类名|string|-|
+|style|自定义样式|CSSProperties|-|
+|type|样式类型。primary表示基本类型，hollow表示空心类型，solid表示实心类型|"primary" \| "hollow" \| "solid"|"primary"|
+|icon|图标内容|ReactNode|-|
+|children|标签内部内容|ReactNode|-|
+|size|标签尺寸|"medium" \| "large" \| "small"|"medium"|
+|color|文字颜色|string|-|
+|bgColor|背景颜色|string|-|
+|borderColor|边框颜色|string|-|
+|borderStyle|边框样式|"solid" \| "none" \| "dotted" \| "dashed"|"solid"|
+|halfBorder|是否是0\.5px边框|boolean|true|
+|closeable|是否有关闭按钮|boolean|-|
+|closeIcon|关闭按钮内容|ReactNode|-|
+|closeColor|关闭按钮颜色|string|-|
+|filleted|是否圆角|boolean|-|
+|onClose|点击关闭按钮回调|(e: MouseEvent\<HTMLDivElement, MouseEvent\>) =\> void|-|
+|onClick|点击标签回调|(e: MouseEvent\<HTMLDivElement, MouseEvent\>) =\> void|-|
+
+> TagListRef
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|

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

@@ -0,0 +1,23 @@
+import { componentWrapper } from '@arco-design/mobile-utils';
+import { componentGenerator } from './list';
+import { Tag } from './tag';
+
+export * from './type';
+
+/**
+ * 标签列表，支持动态编辑标签
+ * @en Tag list, support dynamic editing of tags
+ */
+const List = componentGenerator(Tag);
+
+/**
+ * 标签组件，支持标签和标签组。
+ * @en Tag component, supports tags and tag groups.
+ * @type 信息展示
+ * @type_en Data Display
+ * @name 标签
+ * @name_en Tag
+ */
+export default componentWrapper(Tag, {
+    List,
+});

package/metaData/components/tag/example/list.tsx

@@ -0,0 +1,97 @@
+import React, { useRef, forwardRef, Ref, useImperativeHandle, CSSProperties } from 'react';
+import { cls } from '@arco-design/mobile-utils';
+import { ContextLayout } from '../context-provider';
+import { Tag } from './tag';
+import IconAdd from '../icon/IconAdd';
+import { TagListProps, TagListRef, TagProps, TagRef } from './type';
+
+export function componentGenerator<P extends TagProps = TagProps, R extends TagRef = TagRef>(
+    Comp: React.ForwardRefExoticComponent<P & React.RefAttributes<R>>,
+) {
+    return forwardRef((props: TagListProps<P>, ref: Ref<TagListRef>) => {
+        const {
+            className,
+            style,
+            list,
+            type,
+            showAddButton = true,
+            addArea,
+            horizontalPadding,
+            verticalPadding,
+            onAdd,
+            onClose,
+        } = props;
+        const domRef = useRef<HTMLDivElement | null>(null);
+
+        useImperativeHandle(ref, () => ({
+            dom: domRef.current,
+        }));
+
+        function getTagStyle(tag: TagProps, index: number): CSSProperties {
+            const baseStyle = tag.style || {};
+            const paddingStyle =
+                index === list.length - 1 && !showAddButton
+                    ? {}
+                    : { marginRight: horizontalPadding };
+            return {
+                ...baseStyle,
+                ...paddingStyle,
+                marginBottom: verticalPadding,
+            };
+        }
+
+        function getListStyle() {
+            let marginStyle: CSSProperties = {};
+            if (verticalPadding && typeof verticalPadding === 'string') {
+                marginStyle = { marginBottom: `-${verticalPadding}` };
+            } else if (verticalPadding && typeof verticalPadding === 'number') {
+                marginStyle = { marginBottom: -1 * verticalPadding };
+            }
+            return {
+                ...(style || {}),
+                ...marginStyle,
+            };
+        }
+
+        return (
+            <ContextLayout>
+                {({ prefixCls, locale }) => {
+                    const prefix = `${prefixCls}-tag-list`;
+                    return (
+                        <div className={cls(prefix, className)} style={getListStyle()} ref={domRef}>
+                            {list.map((tag, index) => (
+                                <Comp
+                                    key={index}
+                                    {...tag}
+                                    style={getTagStyle(tag, index)}
+                                    type={type}
+                                    onClose={e => {
+                                        tag.onClose && tag.onClose(e);
+                                        onClose && onClose(index, e);
+                                    }}
+                                />
+                            ))}
+                            {showAddButton ? (
+                                <div className="tag-list-add-wrap" onClick={onAdd}>
+                                    {addArea !== void 0 ? (
+                                        addArea
+                                    ) : (
+                                        <Tag
+                                            type={type}
+                                            className="tag-list-add"
+                                            borderStyle="dashed"
+                                            icon={<IconAdd />}
+                                            style={{ marginBottom: verticalPadding }}
+                                        >
+                                            {locale?.Tag.addTag}
+                                        </Tag>
+                                    )}
+                                </div>
+                            ) : null}
+                        </div>
+                    );
+                }}
+            </ContextLayout>
+        );
+    });
+}

package/metaData/components/tag/example/tag.tsx

@@ -0,0 +1,85 @@
+import React, { useRef, forwardRef, Ref, useImperativeHandle, CSSProperties } from 'react';
+import { cls } from '@arco-design/mobile-utils';
+import { ContextLayout } from '../context-provider';
+import { useSystem } from '../_helpers';
+import IconClose from '../icon/IconClose';
+import { TagProps, TagRef } from './type';
+
+export const Tag = forwardRef((props: TagProps, ref: Ref<TagRef>) => {
+    const {
+        className,
+        style,
+        type = 'primary',
+        icon,
+        children,
+        size = 'medium',
+        color,
+        bgColor,
+        borderColor,
+        borderStyle = 'solid',
+        halfBorder = true,
+        closeable,
+        closeIcon,
+        closeColor,
+        filleted,
+        onClose,
+        onClick,
+    } = props;
+    const domRef = useRef<HTMLDivElement | null>(null);
+    const system = useSystem();
+
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+    }));
+
+    function getTagStyle(): CSSProperties {
+        return {
+            color,
+            background: bgColor,
+            borderColor,
+            borderStyle,
+            ...(style || {}),
+        };
+    }
+
+    return (
+        <ContextLayout>
+            {({ prefixCls }) => {
+                const prefix = `${prefixCls}-tag`;
+                return (
+                    <div
+                        className={cls(
+                            prefix,
+                            'all-border-box',
+                            className,
+                            `${prefix}-${type}`,
+                            { 'half-border': halfBorder },
+                            system,
+                            `size-${size}`,
+                            { filleted },
+                        )}
+                        style={getTagStyle()}
+                        ref={domRef}
+                        onClick={onClick}
+                    >
+                        {icon}
+                        <span className="tag-text">{children}</span>
+                        {closeable ? (
+                            <div
+                                onClick={e => {
+                                    e.stopPropagation();
+                                    onClose && onClose(e);
+                                }}
+                                className="tag-close-wrap"
+                            >
+                                {closeIcon || (
+                                    <IconClose className="tag-close-icon" color={closeColor} />
+                                )}
+                            </div>
+                        ) : null}
+                    </div>
+                );
+            }}
+        </ContextLayout>
+    );
+});