@fjyueke/arco-mcp 1.0.0

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

@@ -0,0 +1,87 @@
+import React, { useRef, forwardRef, Ref, useImperativeHandle, useContext } from 'react';
+import { cls } from '@arco-design/mobile-utils';
+import { ContextLayout, GlobalContext } from '../context-provider';
+import { BaseProps, getStyleWithVendor } from '../_helpers';
+
+export interface DividerProps extends BaseProps {
+    /**
+     * 是否使用 0.5px 线
+     * @en Whether to use hairline
+     * @default true
+     */
+    hairline?: boolean;
+    /**
+     * 文字
+     * @en Divider text
+     */
+    content?: React.ReactNode;
+    /**
+     * 文字位置
+     * @en The position of text inside divider
+     * @default 'center'
+     */
+    align?: 'left' | 'center' | 'right';
+    /**
+     * 分割线宽度（单边），仅在`align`为`center`时生效
+     * @en The width of divider, only take effect when `align` is `center`.
+     */
+    width?: string | number;
+    /**
+     * 子元素，同 content，优先级低于 content
+     * @en Children element, same as `content`, with the priority lower than `content`
+     * @default null
+     */
+    children?: React.ReactNode;
+}
+
+export interface DividerRef {
+    /**
+     * 最外层 DOM 元素
+     * @en The outer DOM element of the component
+     */
+    dom: HTMLDivElement | null;
+}
+
+/**
+ * 划分内容的装饰线
+ * @en A partitioning line element
+ * @type 布局
+ * @type_en Layout
+ * @name 分割线
+ * @name_en Divider
+ */
+const Divider = forwardRef((props: DividerProps, ref: Ref<DividerRef>) => {
+    const { className = '', style, hairline = true, align = 'center', width } = props;
+    const domRef = useRef<HTMLDivElement | null>(null);
+    const { prefixCls } = useContext(GlobalContext);
+    const prefix = `${prefixCls}-divider`;
+    const children = props.content || props.children;
+    const hasCustomWidth = children && width !== undefined && align === 'center';
+
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+    }));
+
+    return (
+        <ContextLayout>
+            {() => (
+                <div
+                    className={cls(prefix, className, {
+                        [`${prefix}--hairline`]: hairline,
+                        [`${prefix}--with-text ${prefix}--text-${align}`]: children,
+                        [`${prefix}--with-width`]: hasCustomWidth,
+                    })}
+                    style={{
+                        ...style,
+                        ...(hasCustomWidth ? getStyleWithVendor({ flexBasis: width }) : {}),
+                    }}
+                    ref={domRef}
+                >
+                    {children}
+                </div>
+            )}
+        </ContextLayout>
+    );
+});
+
+export default Divider;

package/metaData/components/dropdown/doc.md

@@ -0,0 +1,80 @@
+### 导航
+
+# 下拉面板 Dropdown
+
+下拉面板，展示供选择的选择项
+
+======
+
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|showDropdown|是否展开下拉框|boolean|必填|
+|options|展示的选项,优先级低于dropdownNode|OptionsItem\[\]|[]|
+|children|自定义下拉框元素|ReactNode|-|
+|onCancel|取消选择|() =\> void|必填|
+|className|自定义类名|string|-|
+|style|自定义样式|CSSProperties|-|
+|extraNode|下拉框底部元素|ReactNode|-|
+|top|定位下拉框出现的位置|number|-|
+|bottom|向上展开时下拉框出现的位置|number|-|
+|direction|展开方向|"up" \| "down"|"down"|
+|height|受控模式，下拉框高度|number|-|
+|maxHeight|下拉框最大的高度|number|500|
+|clickOtherToClose|点击其他区域是否取消选择|boolean|true|
+|touchToClose|是否在触发touchstart时就取消选择，否则在click之后再取消选择|boolean|true|
+|dropdownAnimationTimeout|展开收起动画的时间|number|300|
+|dropdownAnimationFunction|展开收起动画曲线函数|string|"cubic-bezier(0.32, 0.96, 0.6, 1)"|
+|showMask|是否展示遮罩层|boolean|true|
+|maskAnimationTimeout|蒙层动画时长|number|500|
+|maskAnimationFunction|蒙层动画函数|string|"cubic-bezier(0.32, 0.96, 0.6, 1)"|
+|useColumn|使用多列标签样式，传 true 为 4 列，传数字为指定 n 列|number \| boolean|false|
+|optionIcon|选项附带图标|ReactNode|-|
+|mountOnEnter|是否在打开下拉框时再加载内容|boolean|true|
+|unmountOnExit|是否在退出时卸载内容|boolean|true|
+|preventBodyScroll|弹窗打开时是否禁止body的滚动|boolean|true|
+|initialBodyOverflow|页面初始 overflow 状态，即关闭弹窗时 overflow 应该还原的状态|string|第一个全屏组件（弹窗、toast等）打开时页面overflow值|
+|getAnchorElement|用于定位的元素，优先级低于top/bottom|() =\> HTMLElement|当前DOM所在位置的父元素|
+|isStopTouchEl|点击某元素时是否阻止关闭面板, 优先级高于\`getStopTouchElement\`，当 clickOtherToClose=true 时有效|(el: HTMLElement) =\> boolean|-|
+|getStopTouchElements|可阻止关闭面板的元素，当 clickOtherToClose=true 时有效|() =\> HTMLElement\[\]|当前组件的父元素|
+|getScrollContainer|内容内部滚动区域容器，在该容器中未滚动到顶部或底部时会释放滚动|() =\> HTMLElement \| HTMLElement\[\]|-|
+|getPortalContainer|获取挂载容器|() =\> HTMLElement|-|
+|multiple|是否支持多选|boolean|false|
+|defaultSelectedValue|默认选中值|string \| number \| ReactText\[\]|-|
+|selectedValue|当前选择的选项标识|string \| number \| ReactText\[\]|-|
+|onOptionClick|点击选项时触发的回调函数|((val: ReactText, op: OptionsItem) =\> void) \| ((selected: boolean, val: ReactText, op: OptionsItem) =\> void)|-|
+|onOptionChange|当选项改变时触发的回调函数|((val: ReactText, op: OptionsItem) =\> void) \| ((vals: ReactText\[\], op: OptionsItem) =\> void)|-|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|
+
+> Dropdown.Options
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|options|展示的选项列表|OptionsItem\[\]|必填|
+|useColumn|使用多列标签样式，传 true 为 4 列，传数字为指定 n 列|number \| boolean|false|
+|icon|选项列表右侧图标|ReactNode|-|
+|multiple|是否支持多选|boolean|false|
+|defaultSelectedValue|默认选中值|string \| number \| ReactText\[\]|-|
+|selectedValue|当前选择的选项标识|string \| number \| ReactText\[\]|-|
+|onOptionClick|点击选项时触发的回调函数|((val: ReactText, op: OptionsItem) =\> void) \| ((selected: boolean, val: ReactText, op: OptionsItem) =\> void)|-|
+|onOptionChange|当选项改变时触发的回调函数|((val: ReactText, op: OptionsItem) =\> void) \| ((vals: ReactText\[\], op: OptionsItem) =\> void)|-|
+
+> OptionsItem
+
+|参数|描述|类型|
+|----------|-------------|------|
+|label|选项名称|ReactNode|
+|value|选项标识|ReactText|
+|disabled|选项是否可用，默认false表示可用|boolean|
+
+> DropdownOptionsRef
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|

package/metaData/components/dropdown/example/dropdown.tsx

@@ -0,0 +1,308 @@
+import React, {
+    useRef,
+    useEffect,
+    useCallback,
+    forwardRef,
+    Ref,
+    useImperativeHandle,
+    useState,
+    CSSProperties,
+} from 'react';
+import { cls, nextTick } from '@arco-design/mobile-utils';
+import { CSSTransition } from 'react-transition-group';
+import { ContextLayout } from '../context-provider';
+import {
+    getStyleWithVendor,
+    usePopupScroll,
+    usePreventBodyScroll,
+    useSystem,
+    useWindowSize,
+} from '../_helpers';
+import Portal from '../portal';
+import {
+    DropdownOptionsProps,
+    DropdownOptionsRef,
+    DropdownProps,
+    DropdownRef,
+    ValueType,
+} from './type';
+
+export function componentGenerator<
+    P extends DropdownOptionsProps = DropdownOptionsProps,
+    R extends DropdownOptionsRef = DropdownOptionsRef,
+>(Comp: React.ForwardRefExoticComponent<P & React.RefAttributes<R>>) {
+    return forwardRef((props: DropdownProps, ref: Ref<DropdownRef>) => {
+        const optionsWrapper = useRef<HTMLDivElement>(null);
+        const domRef = useRef<HTMLDivElement | null>(null);
+        const {
+            className = '',
+            style = {},
+            options = [],
+            showDropdown = false,
+            showMask = true,
+            direction = 'down',
+            height,
+            maxHeight = 500,
+            touchToClose = true,
+            useColumn,
+            optionIcon,
+            multiple,
+            defaultSelectedValue,
+            onCancel,
+            getAnchorElement,
+            isStopTouchEl,
+            getStopTouchElements,
+            getScrollContainer = () => optionsWrapper.current,
+            getPortalContainer,
+            clickOtherToClose = true,
+            dropdownAnimationTimeout = 300,
+            dropdownAnimationFunction = 'cubic-bezier(0.32, 0.96, 0.6, 1)',
+            // 坑：ios touchstart会停留300ms 导致点击关闭蒙层后出现点击穿透 触发底部可点区域事件 这里设置更长的timeout规避
+            // @en In iOS, touchstart will stay for 300ms, resulting in click penetration after clicking to close the mask, triggering the bottom clickable area event, and setting a longer timeout to avoid it
+            maskAnimationTimeout = 500,
+            maskAnimationFunction = 'cubic-bezier(0.32, 0.96, 0.6, 1)',
+            mountOnEnter = true,
+            unmountOnExit = true,
+            preventBodyScroll = true,
+            initialBodyOverflow,
+        } = props;
+        const system = useSystem();
+        const { windowHeight, windowWidth } = useWindowSize();
+        const [positionStyle, setPositionStyle] = useState({ top: '', bottom: '' });
+        const [innerValue, setInnerValue] = useState<ValueType>(() => {
+            const defaultValue = multiple ? [] : 0;
+            return defaultSelectedValue !== void 0 ? defaultSelectedValue : defaultValue;
+        });
+
+        // down=0为向上展开，1为向下展开
+        // @en down=0 is to expand upwards, 1 is to expand downwards
+        const [down, setDown] = useState<boolean | null>(null);
+        const maskHeight = useRef(0);
+        const optionsContainer = useRef<HTMLDivElement>(null);
+        const dropdownContainer = useRef<HTMLDivElement>(null);
+        const [optionsWrapperHeight, setOptionsWrapperHeight] = useState(0);
+
+        /**
+         * 判断是否阻止touch事件
+         * @en Determine whether to block touch events
+         * */
+
+        const ifStopTouch = (el: HTMLElement) => {
+            if (isStopTouchEl) return isStopTouchEl(el);
+            let tempEl: HTMLElement | null = el;
+            const elements = getStopTouchElements
+                ? getStopTouchElements()
+                : [dropdownContainer.current?.parentElement];
+            for (let i = 0; i < elements.length; i++) {
+                while (tempEl && elements[i]) {
+                    if (tempEl === elements[i]) {
+                        return true;
+                    }
+                    tempEl = tempEl.parentElement;
+                }
+            }
+            return false;
+        };
+
+        usePopupScroll(showDropdown, domRef.current, getScrollContainer);
+
+        usePreventBodyScroll(showDropdown, preventBodyScroll, initialBodyOverflow);
+
+        const updateDown = useCallback(
+            (wrapperHeight: number) => {
+                // 为0的时候不改变
+                // @en Does not change when it is 0
+                if (wrapperHeight === 0) {
+                    return;
+                }
+                const tempEl = getAnchorElement
+                    ? getAnchorElement()
+                    : dropdownContainer.current?.parentElement;
+                const { bottom, top } = tempEl?.getBoundingClientRect() || {
+                    bottom: 0,
+                    top: 0,
+                };
+                const tempTop = props.top || bottom;
+                const tempBottom = props.bottom || windowHeight - top;
+                const tempMaskHeight = windowHeight - tempTop;
+                // 没有指定方向，且空间足够时，或向上展开的空间不够，向下展开
+                // @en If there is no specified direction and there is enough space, or there is not enough space to expand upward, expand downward
+                const tempDown =
+                    (direction !== 'up' && wrapperHeight < tempMaskHeight) ||
+                    wrapperHeight > tempTop;
+                if (tempDown) {
+                    maskHeight.current = tempMaskHeight;
+                    setPositionStyle({ top: `${tempTop}px`, bottom: '' });
+                } else {
+                    maskHeight.current = windowHeight - tempBottom;
+                    setPositionStyle({ top: '', bottom: `${tempBottom}px` });
+                }
+                setDown(tempDown);
+            },
+            [props.top, props.bottom, Boolean(getAnchorElement), direction, windowHeight],
+        );
+
+        /**
+         * 取消选择
+         * @en Cancel selection
+         * */
+        const handleCancel = useCallback(
+            e => {
+                const optionsWrapperDom = optionsWrapper.current;
+                if (!e || !optionsWrapperDom) {
+                    return;
+                }
+                const target = e.target as HTMLElement;
+                if (!optionsWrapperDom.contains(target) && !ifStopTouch(target)) {
+                    onCancel();
+                }
+                e.stopPropagation();
+            },
+            [ifStopTouch, onCancel],
+        );
+
+        /**
+         * 当面板放下时，给body添加事件监听，面板收起时，移除
+         * @en When the panel is down, add an event listener to the body, and when the panel is retracted, remove it
+         * */
+        useEffect(() => {
+            const needBind = showDropdown && clickOtherToClose;
+            const event = touchToClose ? 'touchstart' : 'click';
+            if (needBind) {
+                document.addEventListener(event, handleCancel);
+            }
+            return () => {
+                if (needBind) {
+                    document.removeEventListener(event, handleCancel);
+                }
+            };
+        }, [showDropdown, clickOtherToClose, handleCancel]);
+
+        useEffect(() => {
+            let wrapperHeight = 0;
+            if (height !== void 0) {
+                // 受控模式下，完全交由外层控制
+                // @en In controlled mode, it is completely controlled by the outer layer
+                wrapperHeight = height;
+            } else {
+                if (!optionsContainer.current) return;
+                if (!showDropdown) {
+                    wrapperHeight = 0;
+                } else {
+                    wrapperHeight = optionsContainer.current.getBoundingClientRect().height;
+                }
+            }
+            updateDown(wrapperHeight);
+            nextTick(() => {
+                setOptionsWrapperHeight(wrapperHeight);
+            });
+        }, [showDropdown, options.length, height, updateDown]);
+
+        useImperativeHandle(ref, () => ({
+            dom: domRef.current,
+        }));
+
+        function getOptionsStyle() {
+            const trans = down ? 'translateY(-100%)' : 'translateY(100%)';
+            const transStyle: CSSProperties =
+                down === null
+                    ? {
+                          opacity: 0,
+                      }
+                    : {
+                          opacity: 1,
+                          transform: optionsWrapperHeight ? 'translateY(0)' : trans,
+                          transition: `all ${dropdownAnimationTimeout}ms ${dropdownAnimationFunction}`,
+                      };
+            return getStyleWithVendor({
+                // height: `${optionsWrapperHeight}px`,
+                ...transStyle,
+                overflow: optionsWrapperHeight > maxHeight || height ? 'auto' : 'hidden',
+                maxHeight: `${maxHeight}px`,
+            });
+        }
+
+        function renderInnerOptions() {
+            const value = props.selectedValue !== void 0 ? props.selectedValue : innerValue;
+            const optionProps = {
+                options,
+                useColumn,
+                icon: optionIcon,
+                selectedValue: value,
+                multiple: props.multiple,
+                onOptionClick: props.onOptionClick,
+                onOptionChange: (vals, op) => {
+                    setInnerValue(vals);
+                    props.onOptionChange?.(vals, op);
+                },
+            } as P;
+            return <Comp {...optionProps} />;
+        }
+
+        return (
+            <ContextLayout>
+                {({ prefixCls }) => (
+                    <div ref={dropdownContainer}>
+                        <Portal getContainer={getPortalContainer}>
+                            <CSSTransition
+                                in={showDropdown}
+                                timeout={Math.max(dropdownAnimationTimeout, maskAnimationTimeout)}
+                                onEnter={el => {
+                                    el.style.visibility = 'visible';
+                                }}
+                                onExited={el => {
+                                    el.style.visibility = 'hidden';
+                                    setDown(null);
+                                }}
+                                mountOnEnter={mountOnEnter}
+                                unmountOnExit={unmountOnExit}
+                            >
+                                <div
+                                    className={cls(
+                                        `${prefixCls}-dropdown all-border-box`,
+                                        system,
+                                        className,
+                                        { 'drop-up': !down },
+                                    )}
+                                    ref={domRef}
+                                    style={{
+                                        height: `${maskHeight.current}px`,
+                                        maxWidth: `${windowWidth}px`,
+                                        ...style,
+                                        ...positionStyle,
+                                    }}
+                                >
+                                    <div
+                                        className={cls(`${prefixCls}-dropdown-options`)}
+                                        ref={optionsWrapper}
+                                        style={getOptionsStyle()}
+                                    >
+                                        <div
+                                            className={cls(
+                                                `${prefixCls}-dropdown-options-container`,
+                                            )}
+                                            ref={optionsContainer}
+                                        >
+                                            {props.children || renderInnerOptions()}
+                                            {props.extraNode}
+                                        </div>
+                                    </div>
+                                    {showMask && (
+                                        <div
+                                            className={cls(`${prefixCls}-dropdown-mask`, {
+                                                'is-show': optionsWrapperHeight,
+                                            })}
+                                            style={{
+                                                transition: `opacity ${maskAnimationTimeout}ms ${maskAnimationFunction}`,
+                                            }}
+                                        />
+                                    )}
+                                </div>
+                            </CSSTransition>
+                        </Portal>
+                    </div>
+                )}
+            </ContextLayout>
+        );
+    });
+}

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

@@ -0,0 +1,19 @@
+import { componentWrapper } from '@arco-design/mobile-utils';
+import Options from './options';
+import { componentGenerator } from './dropdown';
+
+export * from './type';
+
+const Dropdown = componentGenerator(Options);
+
+/**
+ * 下拉面板，展示供选择的选择项
+ * @en Dropdown panel, showing options to choose from
+ * @type 导航
+ * @type_en Navigation
+ * @name 下拉面板
+ * @name_en Dropdown
+ */
+export default componentWrapper(Dropdown, {
+    Options,
+});

package/metaData/components/dropdown/example/options.tsx

@@ -0,0 +1,103 @@
+import React, {
+    forwardRef,
+    Ref,
+    useContext,
+    useImperativeHandle,
+    useMemo,
+    useRef,
+    useState,
+} from 'react';
+import { cls } from '@arco-design/mobile-utils';
+import { GlobalContext } from '../context-provider';
+import IconCheck from '../icon/IconCheck';
+import { OptionsItem, DropdownOptionsProps, DropdownOptionsRef, ValueType } from './type';
+
+const Options = forwardRef((props: DropdownOptionsProps, ref: Ref<DropdownOptionsRef | null>) => {
+    const { options, useColumn, icon, selectedValue, defaultSelectedValue, multiple } = props;
+    const { prefixCls } = useContext(GlobalContext);
+    const [innerValue, setInnerValue] = useState<ValueType>(() => {
+        const defaultValue = multiple ? [] : 0;
+        return defaultSelectedValue !== void 0 ? defaultSelectedValue : defaultValue;
+    });
+    const value = useMemo<ValueType>(
+        () => (selectedValue === void 0 ? innerValue : selectedValue),
+        [selectedValue, innerValue],
+    );
+    const colCount = useColumn === true ? 4 : Number(useColumn) || 0;
+    const fakeOpts = new Array(
+        colCount && options.length % colCount ? colCount - (options.length % colCount) : 0,
+    ).fill('');
+    const minWidthStyle = useColumn ? { minWidth: `${(1 / (colCount + 1)) * 100}%` } : {};
+    const domRef = useRef<HTMLDivElement | null>(null);
+
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+    }));
+
+    /**
+     * 当选项改变时触发的回调函数
+     * @en callback when options change
+     * */
+    function handleOptionChange(e, op: OptionsItem) {
+        if (op.disabled) return;
+        if (props.multiple === true) {
+            if (!Array.isArray(value)) {
+                return;
+            }
+            const index = value.indexOf(op.value);
+            const checked = index >= 0;
+            props.onOptionClick?.(checked, op.value, op);
+            const newValue = [...value];
+            checked ? newValue.splice(index, 1) : newValue.push(op.value);
+            setInnerValue(newValue);
+            props.onOptionChange?.(newValue, op);
+        } else {
+            const newValue = op.value;
+            props.onOptionClick?.(newValue, op);
+            setInnerValue(newValue);
+            newValue !== value && props.onOptionChange?.(newValue, op);
+        }
+        e.stopPropagation();
+    }
+
+    function checkSelected(op: OptionsItem) {
+        return multiple && Array.isArray(value) ? value.includes(op.value) : op.value === value;
+    }
+
+    return (
+        <div
+            ref={domRef}
+            className={cls(`${prefixCls}-dropdown-options-wrap`, {
+                'use-column': useColumn,
+            })}
+        >
+            {options.map(op => (
+                <div
+                    className={cls(`${prefixCls}-dropdown-options-item${useColumn ? '-col' : ''}`, {
+                        disabled: op.disabled,
+                        selected: checkSelected(op),
+                    })}
+                    key={op.value}
+                    onClick={e => handleOptionChange(e, op)}
+                    style={minWidthStyle}
+                >
+                    {op.label}
+                    {icon !== void 0 ? (
+                        icon
+                    ) : (
+                        <IconCheck className={`${prefixCls}-dropdown-options-item-icon`} />
+                    )}
+                </div>
+            ))}
+            {fakeOpts.map((_, i) => (
+                <div
+                    className={cls(`${prefixCls}-dropdown-options-item-fake-col`)}
+                    key={i}
+                    style={minWidthStyle}
+                />
+            ))}
+        </div>
+    );
+});
+
+export default Options;