@fjyueke/arco-mcp 1.0.0

package/metaData/components/nav-bar/example/index.tsx

@@ -0,0 +1,305 @@
+import React, {
+    useEffect,
+    useState,
+    forwardRef,
+    Ref,
+    useImperativeHandle,
+    useRef,
+    CSSProperties,
+    ReactNode,
+} from 'react';
+import {
+    cls,
+    getScrollContainerAttribute,
+    getValidScrollContainer,
+} from '@arco-design/mobile-utils';
+import { ContextLayout } from '../context-provider';
+import BackArrow from './back-icon';
+import { useSystem } from '../_helpers';
+
+export interface NavBarRef {
+    /** @deprecated */
+    navBar: HTMLDivElement | null;
+    /**
+     * 最外层元素DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+}
+
+export interface NavBarProps {
+    /**
+     * 导航栏中间文字，带居中和溢出省略效果
+     * @en Navigation bar middle text, with centering and overflow omitting effects
+     */
+    title?: React.ReactNode;
+    /**
+     * 自定义导航栏主内容，当导航栏内容为Tabs等非居中文字样式时可用
+     * @en Customize the main content of the navigation bar, available when the content of the navigation bar is a non-centered text style such as Tabs
+     */
+    children?: React.ReactNode;
+    /**
+     * 导航栏左侧内容
+     * @en Navigation bar left content
+     * @default 返回按钮
+     * @default_en Back button
+     */
+    leftContent?: React.ReactNode;
+    /**
+     * 导航栏右侧内容
+     * @en Content on the right side of the navigation bar
+     */
+    rightContent?: React.ReactNode;
+    /**
+     * 自定义样式，最外层元素的背景文字颜色可在此定义
+     * @en Custom stylesheet, background and text colors can be defined here
+     */
+    style?: React.CSSProperties;
+    /**
+     * 内层自定义类名
+     * @en Inner custom classname
+     */
+    className?: string;
+    /**
+     * 最外层元素自定义类名
+     * @en Outermost element custom classname
+     */
+    wrapClass?: string;
+    /**
+     * 是否吸顶
+     * @en Whether to fix
+     */
+    fixed?: boolean;
+    /**
+     * 沉浸式状态栏高度
+     * @en Immersive status bar height
+     * @default 0
+     */
+    statusBarHeight?: number;
+    /**
+     * 是否有底边框
+     * @en Whether there is a bottom border
+     * @default true
+     */
+    hasBottomLine?: boolean;
+    /**
+     * 点击左侧内容回调
+     * @en Callback when clicking the content on the left
+     */
+    onClickLeft?: (e: React.MouseEvent) => void;
+    /**
+     * 点击右侧内容回调
+     * @en Callback when clicking the content on the right
+     */
+    onClickRight?: (e: React.MouseEvent) => void;
+    /**
+     * 展示nav-bar的offset值，当scrollTop值小于该值时，将隐藏主内容和右侧内容，左侧内容保留
+     * @en Display the offset value of nav-bar. When the scrollTop value is less than this value, the main content and the right content will be hidden, and the left content will remain
+     * @default 0
+     */
+    showOffset?: number;
+    /**
+     * 设置showOffset后，当内容显示状态发生变化后触发
+     * @en After setting showOffset, triggered when the content display state changes
+     */
+    onShowChange?: (show: boolean) => void;
+    /**
+     * 设置fixed=true时，导航栏原本的位置是否要占住
+     * @en When fixed=true is set, whether the original position of the navigation bar should be occupied
+     * @default true
+     */
+    placeholder?: boolean;
+    /**
+     * 额外渲染元素，与inner平级
+     * @en Additional render elements, level with inner
+     */
+    extra?: ReactNode;
+    /**
+     * 自定义滚动元素，不传默认是window
+     * @en Custom scrolling element, default is window if not input
+     */
+    getScrollContainer?: () => HTMLElement | Window | null;
+    /**
+     * 根据滚动offset值设置自定义style，设置该属性后将监听滚动容器的滚动事件
+     * @en Set a custom style according to the scroll offset value. After setting this property, the scroll event of the scroll container will be monitored.
+     */
+    getComputedStyleByScroll?: (offset: number) => CSSProperties;
+    /**
+     * 滚动时回调，设置该属性后将监听滚动容器的滚动事件
+     * @en Callback when scrolling. After setting this property, the scroll event of the scroll container will be monitored.
+     */
+    onScrollChange?: (offset: number) => void;
+    /**
+     * 无障碍aria-label属性
+     * @en Accessibility attribute aria-label
+     * @default ""
+     */
+    ariaLabel?: string;
+    /**
+     * 无障碍role属性
+     * @en Accessibility attribute role
+     * @default "banner"
+     */
+    ariaRole?: string;
+}
+
+/**
+ * 导航栏组件，支持吸顶和沉浸式，支持在指定滚动位置展示，支持根据滚动位置实时更新style。
+ * @en Navigation bar, supports ceiling and immersion, supports display at specified scroll position, and supports real-time update of style according to scroll position.
+ * @type 导航
+ * @type_en Navigation
+ * @name 导航栏
+ * @name_en NavBar
+ */
+const NavBar = forwardRef((props: NavBarProps, ref: Ref<NavBarRef>) => {
+    const {
+        children,
+        title = '',
+        onClickLeft,
+        leftContent = <BackArrow />,
+        onClickRight,
+        rightContent,
+        onShowChange,
+        style,
+        className = '',
+        wrapClass,
+        placeholder = true,
+        fixed = true,
+        hasBottomLine = true,
+        statusBarHeight = 0,
+        extra,
+        getScrollContainer,
+        showOffset = 0,
+        onScrollChange,
+        getComputedStyleByScroll,
+        ariaLabel = '',
+        ariaRole = 'banner',
+    } = props;
+    const navBarRef = useRef<HTMLDivElement | null>(null);
+
+    const [scrollToggleHide, setScrollToggleHide] = useState(showOffset > 0);
+    const relBackground = scrollToggleHide ? 'transparent' : '';
+    const [customStyle, setCustomStyle] = useState<CSSProperties>({});
+    const system = useSystem();
+
+    const onElementScroll = (curOffset: number) => {
+        setScrollToggleHide(curOffset < showOffset);
+        onScrollChange?.(curOffset);
+
+        if (getComputedStyleByScroll) {
+            const cstyle = getComputedStyleByScroll(curOffset);
+
+            setCustomStyle(cstyle);
+        }
+    };
+
+    useImperativeHandle(ref, () => ({
+        navBar: navBarRef.current,
+        dom: navBarRef.current,
+    }));
+
+    useEffect(() => {
+        onShowChange?.(!scrollToggleHide);
+    }, [scrollToggleHide]);
+
+    const handleEleScroll = () => {
+        const top = getScrollContainerAttribute('scrollTop', getScrollContainer) || 0;
+        onElementScroll(top);
+    };
+
+    useEffect(() => {
+        const needBind = showOffset || getComputedStyleByScroll || onScrollChange;
+        const container = getValidScrollContainer(getScrollContainer);
+        handleEleScroll();
+        if (needBind && container) {
+            container.addEventListener('scroll', handleEleScroll, false);
+        }
+        return () => {
+            if (needBind && container) {
+                container.removeEventListener('scroll', handleEleScroll, false);
+            }
+        };
+    }, [showOffset, getComputedStyleByScroll, onScrollChange, getScrollContainer]);
+
+    function handleClickLeft(e: React.MouseEvent) {
+        if (onClickLeft) {
+            onClickLeft(e);
+        }
+    }
+
+    function handleClickRight(e: React.MouseEvent) {
+        if (onClickRight) {
+            onClickRight(e);
+        }
+    }
+
+    // 最外层div是为了fixed时占位
+    // @en The outermost div is a placeholder for fixed
+    // 第二层div是为了沉浸式paddingTop
+    // @en The second layer of div is for immersive paddingTop
+    // 第三层是为了保证内容高度始终是44px
+    // @en The third layer is to ensure that the content height is always 44px
+    // 背景色放到wrapper层是为了兼容iOS下拉回弹的背景色
+    // @en The background color is placed on the wrapper layer to be compatible with the background color of the pull-down rebound in iOS
+    // fixed时用height+padding撑开nav-bar最外层高度；不fixed时内部wrapper元素撑开最外层高度
+    // @en When fixed, use height+padding to stretch the outermost height of nav-bar; when not fixed, the inner wrapper element stretches the outermost height
+    return (
+        <ContextLayout>
+            {({ prefixCls }) => (
+                <div
+                    ref={navBarRef}
+                    className={cls(wrapClass, `${prefixCls}-nav-bar`, {
+                        [`${prefixCls}-nav-bar-fixed`]: fixed,
+                        [`${prefixCls}-nav-bar-float`]: !placeholder,
+                        [`${prefixCls}-nav-bar-hide`]: scrollToggleHide,
+                    })}
+                    style={{
+                        paddingTop: fixed && statusBarHeight ? `${statusBarHeight}px` : '0px',
+                        ...(style || {}),
+                        ...(relBackground ? { background: relBackground } : {}),
+                    }}
+                    aria-label={ariaLabel}
+                    role={ariaRole}
+                >
+                    <div
+                        className={cls(className, system, `${prefixCls}-nav-bar-wrapper`, {
+                            [`${prefixCls}-nav-bar-wrapper-fixed`]: fixed,
+                            [`${prefixCls}-nav-bar-wrapper-border`]: hasBottomLine,
+                        })}
+                        style={{
+                            paddingTop: statusBarHeight ? `${statusBarHeight}px` : '0px',
+                            ...customStyle,
+                        }}
+                    >
+                        <div className={`${prefixCls}-nav-bar-inner all-border-box`}>
+                            {leftContent ? (
+                                <div
+                                    className={`${prefixCls}-nav-bar-left`}
+                                    onClick={handleClickLeft}
+                                >
+                                    {leftContent}
+                                </div>
+                            ) : null}
+                            {children || (
+                                <div className={`${prefixCls}-nav-bar-title`}>
+                                    <div className={`${prefixCls}-nav-bar-title-text`}>{title}</div>
+                                </div>
+                            )}
+                            {rightContent ? (
+                                <div
+                                    className={`${prefixCls}-nav-bar-right`}
+                                    onClick={handleClickRight}
+                                >
+                                    {rightContent}
+                                </div>
+                            ) : null}
+                        </div>
+                        {extra}
+                    </div>
+                </div>
+            )}
+        </ContextLayout>
+    );
+});
+
+export default NavBar;

package/metaData/components/notice-bar/doc.md

@@ -0,0 +1,34 @@
+### 信息展示
+
+# 通知栏 NoticeBar
+
+可自定义换行或滚动效果，支持循环滚动。
+
+======
+
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|className|自定义类名|string|-|
+|style|自定义样式，背景颜色和文字颜色可直接在这里指定\`background\`和\`color\`|CSSProperties|-|
+|children|通知内容文字，如需垂直滚动效果可传入一个Carousel|ReactNode|-|
+|leftContent|左侧内容|ReactNode|-|
+|rightContent|右侧内容|ReactNode|-|
+|marquee|通知文字处理方式，为\`overflow\`则文字超出容器长度时才滚动，为\`none\`则文字始终不滚动，为\`always\`则文字始终滚动|"overflow" \| "none" \| "always"|"overflow"|
+|closeable|是否可关闭|boolean|true|
+|closeIcon|自定义关闭图标|ReactNode|\<IconClose /\>|
+|wrapable|是否需要换行，当 marquee=none 且 wrapable=false 时，文字超出会有溢出省略(ellipsis)效果|boolean|true|
+|speed|文字滚动速度，单位是px/s|number|50|
+|delay|文字开始滚动之前的延迟(ms)|number|1000|
+|autoSetGradientStyle|是否根据\`style\`属性中自定义的背景色自动设置渐变背景色|boolean|true|
+|onClick|点击通知栏事件|(e: MouseEvent\<HTMLDivElement, MouseEvent\>) =\> void|-|
+|onClose|点击关闭按钮回调|(e: MouseEvent\<HTMLDivElement, MouseEvent\>) =\> void|-|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|
+|close|手动关闭通知栏，即移除当前组件|() =\> void|
+|updateData|手动更新组件布局|() =\> void|

package/metaData/components/notice-bar/example/index.tsx

@@ -0,0 +1,294 @@
+import { cls, fadeColor, nextTick } from '@arco-design/mobile-utils';
+import React, {
+    useRef,
+    forwardRef,
+    Ref,
+    useImperativeHandle,
+    ReactNode,
+    useState,
+    useEffect,
+    useMemo,
+    CSSProperties,
+    useContext,
+} from 'react';
+import { ContextLayout, GlobalContext } from '../context-provider';
+import IconClose from '../icon/IconClose';
+
+export interface NoticeBarProps {
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     * 自定义样式，背景颜色和文字颜色可直接在这里指定`background`和`color`
+     * @en Custom stylesheet, background color and text color can be directly specified here `background` and `color`
+     */
+    style?: React.CSSProperties;
+    /**
+     * 通知内容文字，如需垂直滚动效果可传入一个Carousel
+     * @en Notification content text, if need vertical scrolling effect, you can input a Carousel
+     */
+    children?: ReactNode;
+    /**
+     * 左侧内容
+     * @en Content on the left
+     */
+    leftContent?: ReactNode;
+    /**
+     * 右侧内容
+     * @en Content on the right
+     */
+    rightContent?: ReactNode;
+    /**
+     * 通知文字处理方式，为`overflow`则文字超出容器长度时才滚动，为`none`则文字始终不滚动，为`always`则文字始终滚动
+     * @en The text processing method of the notification. When it is `overflow`, the text will only scroll when the length of the container exceeds the length of the container. If it is `none`, the text will never scroll, and if it is `always`, the text will always scroll.
+     * @default "overflow"
+     */
+    marquee?: 'overflow' | 'none' | 'always';
+    /**
+     * 是否可关闭
+     * @en Closeable
+     * @default true
+     */
+    closeable?: boolean;
+    /**
+     * 自定义关闭图标
+     * @en Custom close icon
+     * @default \<IconClose /\>
+     */
+    closeIcon?: ReactNode;
+    /**
+     * 是否需要换行，当 marquee=none 且 wrapable=false 时，文字超出会有溢出省略(ellipsis)效果
+     * @en Whether line wrapping is required, when marquee=none and wrapable=false, there will be overflow ellipsis effect when the text exceeds
+     * @default true
+     */
+    wrapable?: boolean;
+    /**
+     * 文字滚动速度，单位是px/s
+     * @en Text scrolling speed in px/s
+     * @default 50
+     */
+    speed?: number;
+    /**
+     * 文字开始滚动之前的延迟(ms)
+     * @en Delay before text starts scrolling (ms)
+     * @default 1000
+     */
+    delay?: number;
+    /**
+     * 是否根据`style`属性中自定义的背景色自动设置渐变背景色
+     * @en Whether to automatically set the gradient background color based on the custom background color in the `style` attribute
+     * @default true
+     */
+    autoSetGradientStyle?: boolean;
+    /**
+     * 点击通知栏事件
+     * @en Click on notification bar event
+     */
+    onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    /**
+     * 点击关闭按钮回调
+     * @en Callback when clicking close button
+     */
+    onClose?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+}
+
+export interface NoticeBarRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+    /**
+     * 手动关闭通知栏，即移除当前组件
+     * @en Manually close the notification bar, that is, remove the current component
+     */
+    close: () => void;
+    /**
+     * 手动更新组件布局
+     * @en Manually update the component layout
+     */
+    updateData: () => void;
+}
+
+/**
+ * 可自定义换行或滚动效果，支持循环滚动。
+ * @en Line wrapping or scrolling effects can be customized, and circular scrolling is supported.
+ * @type 信息展示
+ * @type_en Data Display
+ * @name 通知栏
+ * @name_en NoticeBar
+ */
+const NoticeBar = forwardRef((props: NoticeBarProps, ref: Ref<NoticeBarRef>) => {
+    const {
+        className = '',
+        style,
+        children,
+        leftContent,
+        rightContent,
+        marquee = 'overflow',
+        closeable = true,
+        closeIcon = <IconClose />,
+        wrapable = true,
+        speed = 50,
+        delay = 1000,
+        autoSetGradientStyle = true,
+        onClick,
+        onClose,
+    } = props;
+    const { useRtl } = useContext(GlobalContext);
+    const domRef = useRef<HTMLDivElement>(null);
+    const wrapRef = useRef<HTMLDivElement>(null);
+    const contentRef = useRef<HTMLDivElement>(null);
+    const timerRef = useRef<number | null>(null);
+    const [visible, setVisible] = useState(true);
+    const [needMarquee, setNeedMarquee] = useState(false);
+    const extraClass = useMemo(() => {
+        const classList: string[] = [];
+        // 字幕可滚动时，或不可滚动且不可以换行时，添加不换行效果
+        // @en When the subtitle is scrollable, or when it is not scrollable and cannot wrap, add no wrapping effect
+        if (marquee !== 'none' || !wrapable) {
+            classList.push('no-wrap');
+        }
+        // 字幕不可滚动时，根据是否可换行决定换行或省略效果
+        // @en When the subtitle is not scrollable, decide whether to wrap or omit the effect according to whether it can wrap
+        if (marquee === 'none') {
+            classList.push(wrapable ? 'wrapable' : 'ellipsis');
+        }
+        return classList;
+    }, [marquee, wrapable]);
+    const gradientStyle = useMemo<CSSProperties>(() => {
+        if (!autoSetGradientStyle) {
+            return {};
+        }
+        const curBg = style?.backgroundColor || style?.background;
+        const fadeBg = fadeColor(String(curBg) || '');
+        return fadeBg
+            ? {
+                  background: `linear-gradient(to right, ${curBg}, ${fadeBg})`,
+              }
+            : {};
+    }, [style]);
+
+    useImperativeHandle(
+        ref,
+        () => ({
+            dom: domRef.current,
+            close,
+            updateData,
+        }),
+        [updateData],
+    );
+
+    useEffect(() => {
+        updateData();
+    }, [useRtl]);
+
+    function close() {
+        setVisible(false);
+        clear();
+    }
+
+    function handleClose(e: React.MouseEvent<HTMLDivElement, MouseEvent>) {
+        e.stopPropagation();
+        onClose?.(e);
+        close();
+    }
+
+    function updateData() {
+        nextTick(() => {
+            setTimeout(
+                () => {
+                    updateLayoutData();
+                },
+                needMarquee ? 0 : delay,
+            );
+        });
+    }
+
+    function updateLayoutData() {
+        if (!wrapRef.current || !contentRef.current) {
+            return;
+        }
+        const contentDom = contentRef.current;
+        let needMarq = marquee === 'always';
+        const wrapWidth = wrapRef.current.offsetWidth;
+        const contentWidth = contentRef.current.offsetWidth;
+        // 如果为overflow类型，则当文字溢出时再开始滚动
+        // @en If it is overflow type, start scrolling when the text overflows
+        if (marquee === 'overflow') {
+            if (wrapWidth < contentWidth) {
+                needMarq = true;
+            }
+        }
+        setNeedMarquee(needMarq);
+        clear();
+        if (needMarq) {
+            const duration = contentWidth / speed;
+            contentDom.style.animationDuration = `${duration}s`;
+            // 第一次没有padding，第二次及以后为了从容器右边缘无缝滑入需要加上padding
+            // @en The first time without padding, the second time and later need to add padding in order to seamlessly slide in from the right edge of the container
+            timerRef.current = window.setTimeout(() => {
+                // 这里暂时把animate类去掉，准备下一次从头开始
+                // @en Temporarily remove the animate classname, and prepare to start from scratch next time
+                setNeedMarquee(false);
+                contentDom.style.animationDuration = `${wrapWidth / speed + duration}s`;
+                contentDom.style.animationIterationCount = 'infinite';
+                const paddingAttr = useRtl ? 'paddingRight' : 'paddingLeft';
+                contentDom.style[paddingAttr] = `${wrapWidth}px`;
+                nextTick(() => {
+                    setNeedMarquee(true);
+                });
+            }, duration * 1000);
+        }
+    }
+
+    function clear() {
+        if (timerRef.current) {
+            clearTimeout(timerRef.current);
+            timerRef.current = null;
+        }
+    }
+
+    function renderNoticeBar(prefix: string) {
+        return visible ? (
+            <div
+                className={cls(prefix, className, extraClass)}
+                style={style}
+                ref={domRef}
+                onClick={onClick}
+            >
+                {leftContent ? <div className={`${prefix}-left-part`}>{leftContent}</div> : null}
+                <div className={`${prefix}-content`} ref={wrapRef}>
+                    {needMarquee ? (
+                        <i className={`${prefix}-gradient left`} style={gradientStyle} />
+                    ) : null}
+                    <div
+                        className={cls(`${prefix}-content-inner`, { animate: needMarquee })}
+                        ref={contentRef}
+                    >
+                        {children}
+                    </div>
+                    {needMarquee ? (
+                        <i className={`${prefix}-gradient right`} style={gradientStyle} />
+                    ) : null}
+                </div>
+                {rightContent ? <div className={`${prefix}-right-part`}>{rightContent}</div> : null}
+                {closeable ? (
+                    <div className={`${prefix}-close`} onClick={handleClose}>
+                        {closeIcon}
+                    </div>
+                ) : null}
+            </div>
+        ) : null;
+    }
+
+    return (
+        <ContextLayout>
+            {({ prefixCls }) => renderNoticeBar(`${prefixCls}-notice-bar`)}
+        </ContextLayout>
+    );
+});
+
+export default NoticeBar;