@fjyueke/arco-mcp 1.0.0

package/metaData/components/dropdown-menu/doc.md

@@ -0,0 +1,91 @@
+### 导航
+
+# 下拉选择菜单 DropdownMenu
+
+下拉选择组件，点击选择器(select)展开下拉框(dropdown)，展示选择项(options)，兼容多个选择器的情况。
+
+======
+
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|className|自定义类名|string|-|
+|style|自定义样式|CSSProperties|-|
+|defaultSelectIndex|初始被选择的选择器的序号|number|-|
+|selectIndex|(受控) 被选择的选择器的序号|number|-|
+|disabled|选择器禁用状态|boolean\[\]|-|
+|selectTips|选择器的说明|string\[\]|-|
+|onSelectChange|当选中的选择器改变的时候触发的回调函数|(selectIndex: number) =\> void|-|
+|icon|选择器右侧的图标|ReactNode|-|
+|defaultShowDropdown|初始状态,下拉框状态|boolean|-|
+|showDropdown|可选受控，组件挂载时下拉框的状态|boolean|-|
+|onDropdownChange|下拉框展示状态改变时触发的回调函数|(dropdown: boolean, selectIndex?: number) =\> void|-|
+|getContainer|获得下拉框的容器|() =\> HTMLDivElement|-|
+|chooseAndClose|选择后是否收起面板，仅单选有效|boolean|true|
+|onCancel|取消选择|() =\> void|-|
+|children|自定义下拉框元素|ReactNode|-|
+|extraForDropdown|dropdown参数|DropdownCommonProps|-|
+|multiple|是否支持多选|boolean|false|
+|options|下拉框展示的选择项，其中级联选项仅单选支持|string\[\] \| OptionsItem\[\]\[\] \| CascadeOptions\[\]|必填|
+|defaultValues|初始选择项|ReactText\[\] \| ReactText\[\]\[\]|-|
+|values|(受控) 每个选择器选中的项|ReactText\[\] \| ReactText\[\]\[\]|-|
+|renderSelectLabel|自定义选择器|((op: OptionsItem, index: number) =\> ReactNode) \| ((op: OptionsItem\[\], index: number) =\> ReactNode)|-|
+|onOptionClick|点击选项时触发的回调函数|((value: ReactText, item: OptionsItem, selectIndex?: number) =\> void) \| ((selected: boolean, val: ReactText, item: OptionsItem, selectIndex?: number) =\> void)|-|
+|onOptionChange|选项改变时触发的回调函数|((value: ReactText, item: OptionsItem, selectIndex?: number) =\> void) \| ((vals: ReactText\[\], item: OptionsItem, selectIndex?: number) =\> void)|-|
+|onValuesChange|所有选择器选项总值改变时的回调函数|((values: ReactText\[\]) =\> void) \| ((values: ReactText\[\]\[\]) =\> void)|-|
+|getFormattedOptions|格式化传入的options|((options: string\[\] \| OptionsItem\[\]\[\] \| CascadeOptions\[\], values?: ReactText\[\]) =\> \{ formattedOptions: OptionsItem\[\]\[\]; formattedValue: ReactText\[\]; \}) \| ((options: string\[\] \| \.\.\. 1 more \.\.\. \| CascadeOptions\[\], values?: ReactText\[\]\[\]) =\> \{ \.\.\.; \})|-|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|
+
+> DropdownCommonProps
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|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|-|
+
+> OptionsItem
+
+|参数|描述|类型|
+|----------|-------------|------|
+|label|选项名称|ReactNode|
+|value|选项标识|ReactText|
+|disabled|选项是否可用，默认false表示可用|boolean|
+
+> CascadeOptions
+
+|参数|描述|类型|
+|----------|-------------|------|
+|children|级联选择的下一级内容|OptionsItem\[\]|
+|label|选项名称|ReactNode|
+|value|选项标识|ReactText|
+|disabled|选项是否可用，默认false表示可用|boolean|

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

@@ -0,0 +1,270 @@
+import React, {
+    useRef,
+    useState,
+    forwardRef,
+    Ref,
+    useImperativeHandle,
+    useMemo,
+    useEffect,
+    useContext,
+} from 'react';
+import { cls } from '@arco-design/mobile-utils';
+import { GlobalContext } from '../context-provider';
+import { DropdownMenuProps, DropdownMenuRef } from './type';
+import {
+    getFormattedOptions as defaultFormatFunc,
+    isCascadeArray,
+    isClassNameDom,
+    isRefDom,
+} from './helper';
+import { DropdownProps, DropdownRef, OptionsItem, OptionValueType } from '../dropdown';
+import IconTriDown from '../icon/IconTriDown';
+
+export function componentGenerator<
+    P extends DropdownProps = DropdownProps,
+    R extends DropdownRef = DropdownRef,
+>(Comp: React.ForwardRefExoticComponent<P & React.RefAttributes<R>>) {
+    return forwardRef((props: DropdownMenuProps, ref: Ref<DropdownMenuRef>) => {
+        const {
+            className = '',
+            style = {},
+            options = [],
+            disabled = [],
+            selectTips = [],
+            values,
+            defaultValues = [],
+            icon,
+            chooseAndClose = true,
+            selectIndex,
+            defaultSelectIndex = 0,
+            showDropdown,
+            defaultShowDropdown = false,
+            onValuesChange,
+            onSelectChange,
+            onDropdownChange,
+            getFormattedOptions = defaultFormatFunc,
+            getContainer,
+            children,
+            extraForDropdown,
+        } = props;
+        const { prefixCls, locale } = useContext(GlobalContext);
+        const [innerValues, setInnerValues] = useState(defaultValues);
+        const [defaultTop, setDefaultTop] = useState(0);
+        const currentValues = values !== void 0 ? values : innerValues;
+
+        const [innerShowDropdown, setInnerShowDropdown] = useState(defaultShowDropdown);
+        const dropdownShown = showDropdown !== void 0 ? showDropdown : innerShowDropdown;
+
+        const [innerSelectedIndex, setInnerSelectedIndex] = useState(defaultSelectIndex);
+        const selectedIndex = selectIndex !== void 0 ? selectIndex : innerSelectedIndex;
+
+        const selectWrapper = useRef<HTMLDivElement>(null);
+        const domRef = useRef<HTMLDivElement | null>(null);
+        const defaultOpItem: OptionsItem = {
+            label: locale?.DropdownMenu.select,
+            value: -1,
+        };
+
+        /**
+         * 更新选项数组和选择情况
+         * @en Update options list and selection
+         */
+        const { formattedOptions } = useMemo(() => {
+            return getFormattedOptions(options, currentValues as any);
+        }, [options, currentValues]);
+
+        const selectedOptions = useMemo(
+            () =>
+                formattedOptions.map((ops, index) => {
+                    if (props.multiple) {
+                        const value = (currentValues[index] as OptionValueType[]) || [];
+                        const opItems = ops.reduce(
+                            (acc, op) => [...acc, ...(value.includes(op.value) ? [op] : [])],
+                            [],
+                        );
+                        return opItems.length ? opItems : [defaultOpItem];
+                    }
+                    const value = currentValues[index];
+                    return ops.find(op => op.value === value) || ops[0];
+                }),
+            [formattedOptions, currentValues, props.multiple],
+        );
+
+        /**
+         * 当下拉框的状态变化
+         * @en When the state of the dropdown box changes
+         */
+        const handleShowDropdownChange = (show: boolean, index?: number) => {
+            onDropdownChange && onDropdownChange(show, index);
+            setInnerShowDropdown(show);
+        };
+
+        const handleSelectedIndexChange = (idx: number) => {
+            setInnerSelectedIndex(idx);
+            onSelectChange?.(idx);
+        };
+
+        const handleValuesChange = (val: OptionValueType | OptionValueType[]) => {
+            let newValue = [...currentValues] as any;
+            // 级联情况下 selectedIndex 之后的选项值重置
+            // @en Option values are reset after selectedIndex in case of cascade
+            if (isCascadeArray(options)) {
+                newValue = newValue.slice(0, selectedIndex);
+            }
+            newValue[selectedIndex] = val;
+            newValue = getFormattedOptions(options, newValue).formattedValue;
+            setInnerValues(newValue);
+            onValuesChange?.(newValue);
+        };
+
+        /**
+         * 处理选择框的点击事件
+         * @en Handle click event of dropdown box
+         */
+        const handleSelectClick = idx => {
+            if (disabled[idx]) return;
+            if (Number(idx) === selectedIndex) {
+                handleShowDropdownChange(!dropdownShown, idx);
+            } else {
+                handleSelectedIndexChange(idx);
+                if (!dropdownShown) handleShowDropdownChange(true, idx);
+            }
+        };
+
+        /**
+         * 判断是否为当前实例下的选择框
+         * @en Determine whether it is the dropdown box under the current instance
+         */
+        const isCurrentSelectEl = (target: HTMLElement) => {
+            const { isStopTouchEl } = extraForDropdown || {};
+            return (
+                (isRefDom(target, selectWrapper) && isClassNameDom(target, 'select-item')) ||
+                isStopTouchEl?.(target) ||
+                false
+            );
+        };
+
+        useImperativeHandle(ref, () => ({
+            dom: domRef.current,
+        }));
+
+        useEffect(() => {
+            const defaultContainer = selectWrapper.current;
+            const container = getContainer ? getContainer() || defaultContainer : defaultContainer;
+            setDefaultTop(container?.getBoundingClientRect().bottom || 0);
+        }, [getContainer, dropdownShown]);
+
+        const onCancel = props.onCancel || (() => handleShowDropdownChange(false));
+        const dropdownCommonProps = {
+            showDropdown: dropdownShown,
+            top: extraForDropdown?.top || defaultTop,
+            onCancel,
+            ...(extraForDropdown || {}),
+            isStopTouchEl: isCurrentSelectEl,
+        };
+
+        const renderSelectedLabel = (op: OptionsItem | OptionsItem[], index: number) => {
+            if (props.multiple === true) {
+                const multipleOp = (op as OptionsItem[]) || [];
+                return props.renderSelectLabel ? (
+                    props.renderSelectLabel(multipleOp, index)
+                ) : (
+                    <div className={cls(`${prefixCls}-select-item-label-text`)}>
+                        {multipleOp.map(item => item.label).join(',')}
+                    </div>
+                );
+            }
+            const singleOp = (op as OptionsItem) || [];
+            return props.renderSelectLabel ? (
+                props.renderSelectLabel(singleOp, index)
+            ) : (
+                <div className={cls(`${prefixCls}-select-item-label-text`)}>{singleOp.label}</div>
+            );
+        };
+
+        return (
+            <div
+                ref={domRef}
+                className={cls(`${prefixCls}-dropdown-menu all-border-box`, className, {
+                    show: dropdownShown,
+                })}
+                style={style}
+            >
+                <div className={cls(`${prefixCls}-select`)} ref={selectWrapper}>
+                    {selectedOptions.map((op, index) => {
+                        const tip = selectTips[index] || '';
+                        return (
+                            <div
+                                className={cls(`${prefixCls}-select-item`, {
+                                    'is-disabled': disabled[index],
+                                    'is-selected': dropdownShown && selectedIndex === index,
+                                })}
+                                key={index}
+                                data-idx={index}
+                                onClick={() => handleSelectClick(index)}
+                            >
+                                {tip.length > 0 && (
+                                    <span className={cls(`${prefixCls}-select-item-tip`)}>
+                                        {tip}
+                                    </span>
+                                )}
+                                <div className={cls(`${prefixCls}-select-item-label`)}>
+                                    {renderSelectedLabel(op, index)}
+                                    {icon === void 0 ? (
+                                        <IconTriDown
+                                            className={cls(`${prefixCls}-select-item-icon`, {
+                                                'is-show': dropdownShown && selectedIndex === index,
+                                            })}
+                                        />
+                                    ) : (
+                                        icon
+                                    )}
+                                </div>
+                            </div>
+                        );
+                    })}
+                    {props.multiple === true ? (
+                        <Comp
+                            {...({
+                                multiple: true,
+                                options: formattedOptions[selectedIndex] || [],
+                                selectedValue:
+                                    (currentValues[selectedIndex] as OptionValueType[]) || [],
+                                onOptionClick: (selected, val, op) => {
+                                    props.onOptionClick?.(selected, val, op, selectedIndex);
+                                },
+                                onOptionChange: (val, op) => {
+                                    props.onOptionChange?.(val, op, selectedIndex);
+                                    handleValuesChange(val);
+                                },
+                                ...dropdownCommonProps,
+                                children,
+                            } as P)}
+                        />
+                    ) : (
+                        <Comp
+                            {...({
+                                multiple: props.multiple,
+                                options: formattedOptions[selectedIndex] || [],
+                                selectedValue:
+                                    (currentValues[selectedIndex] as OptionValueType) || 0,
+                                onOptionClick: (val, op) => {
+                                    props.onOptionClick?.(val, op, selectedIndex);
+                                    if (chooseAndClose) {
+                                        handleShowDropdownChange(false, selectedIndex);
+                                    }
+                                },
+                                onOptionChange: (val, op) => {
+                                    props.onOptionChange?.(val, op, selectedIndex);
+                                    handleValuesChange(val);
+                                },
+                                ...dropdownCommonProps,
+                                children,
+                            } as P)}
+                        />
+                    )}
+                </div>
+            </div>
+        );
+    });
+}

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

@@ -0,0 +1,16 @@
+import { componentGenerator } from './dropdown-menu';
+import Dropdown from '../dropdown';
+
+export * from './type';
+
+/**
+ * 下拉选择组件，点击选择器(select)展开下拉框(dropdown)，展示选择项(options)，兼容多个选择器的情况。
+ * @en Dropdown component, click the selector (select) to expand the dropdown box (dropdown), display the options (options), compatible with multiple selectors.
+ * @type 导航
+ * @type_en Navigation
+ * @name 下拉选择菜单
+ * @name_en DropdownMenu
+ */
+const DropdownMenu = componentGenerator(Dropdown);
+
+export default DropdownMenu;

package/metaData/components/ellipsis/doc.md

@@ -0,0 +1,33 @@
+### 信息展示
+
+# 文本缩略 Ellipsis
+
+文本缩略组件，支持多行缩略、富文本、自定义缩略符、尾字符过滤等。如果传入的文本内容中包含换行符号`\n`，建议将`\n`替换为`<br/>`，并设置`dangerouslyUseInnerHTML=true`。
+
+======
+
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|className|自定义类名|string|-|
+|maxHeight|最大显示高度，单位 px，优先级高于 maxLine|number|-|
+|endExcludes|文本结尾处（缩略符之前）需要过滤掉的字符|string\[\]|[]|
+|reflowOnResize|容器大小变化时是否自适应，使用原生缩略时默认为 true|boolean|false|
+|floatEllipsisNode|文本缩略时，缩略符节点是否浮在文本右下角（默认加渐变色背景）|boolean|false|
+|onReflow|文本缩略处理的完成回调|(ellipsis: boolean, text: string) =\> void|-|
+|text|需要缩略的文本内容|string|必填|
+|ellipsis|是否开启缩略|boolean|true|
+|maxLine|最大显示行数|number|1|
+|dangerouslyUseInnerHTML|是否使用 innerHTML 插入文本（警告：务必确保 text 安全可靠，否则易导致 XSS 漏洞）|boolean|false|
+|ellipsisNode|自定义缩略符节点，文本缩略时插入文本尾部|ReactNode|"..."|
+|collapseNode|自定义收起符节点，不为空且文本展开时插入文本尾部|ReactNode|-|
+|onEllipsisNodeClick|缩略节点点击事件|(e: MouseEvent\<HTMLSpanElement, MouseEvent\>) =\> void|-|
+|onCollapseNodeClick|收起节点点击事件|(e: MouseEvent\<HTMLSpanElement, MouseEvent\>) =\> void|-|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|
+|reflow|控制容器重新编排|() =\> void|

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

@@ -0,0 +1,93 @@
+import React, { useRef, forwardRef, Ref, useImperativeHandle } from 'react';
+import { cls } from '@arco-design/mobile-utils';
+
+import { ContextLayout } from '../context-provider';
+
+import { isSupportWebkitLineClamp } from './utils/is';
+import JsEllipsis from './components/js-ellipsis';
+import NativeEllipsis from './components/native-ellipsis';
+import { EllipsisProps, EllipsisRef, JsEllipsisRef } from './type';
+
+export * from './type';
+
+/**
+ * 文本缩略组件，支持多行缩略、富文本、自定义缩略符、尾字符过滤等。如果传入的文本内容中包含换行符号`\n`，建议将`\n`替换为`<br/>`，并设置`dangerouslyUseInnerHTML=true`。
+ * @en Text ellipsis component supports multi-line abbreviations, rich text, custom abbreviations, tail character filtering, etc. If the incoming text contains newline characters `\n`, it is recommended to replace `\n` with `<br/>`, and set `dangerouslyUseInnerHTML=true`.
+ * @type 信息展示
+ * @type_en Data Display
+ * @name 文本缩略
+ * @name_en Ellipsis
+ */
+const Ellipsis = forwardRef((props: EllipsisProps, ref: Ref<EllipsisRef>) => {
+    const {
+        className,
+        text,
+        dangerouslyUseInnerHTML,
+        maxLine = 1,
+        maxHeight,
+        ellipsis = true,
+        ellipsisNode = '...',
+        collapseNode = '',
+        endExcludes,
+        reflowOnResize = false,
+        floatEllipsisNode = false,
+        onReflow,
+        onCollapseNodeClick,
+        onEllipsisNodeClick,
+    } = props;
+    const domRef = useRef<HTMLDivElement | null>(null);
+    const jsEllipsisRef = useRef<JsEllipsisRef>(null);
+
+    const useNativeEllipsis =
+        isSupportWebkitLineClamp() &&
+        maxHeight === void 0 &&
+        (!endExcludes || endExcludes.length === 0) &&
+        !onReflow &&
+        (floatEllipsisNode || (ellipsisNode === '...' && !onEllipsisNodeClick));
+
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+        reflow: jsEllipsisRef?.current?.reflow,
+    }));
+
+    return (
+        <ContextLayout>
+            {({ prefixCls }) => (
+                <div className={cls(`${prefixCls}-ellipsis`, className)} ref={domRef}>
+                    {useNativeEllipsis ? (
+                        <NativeEllipsis
+                            prefixCls={`${prefixCls}-ellipsis`}
+                            ellipsis={ellipsis}
+                            dangerouslyUseInnerHTML={dangerouslyUseInnerHTML}
+                            text={text}
+                            maxLine={maxLine}
+                            ellipsisNode={ellipsisNode}
+                            collapseNode={collapseNode}
+                            onEllipsisNodeClick={onEllipsisNodeClick}
+                            onCollapseNodeClick={onCollapseNodeClick}
+                        />
+                    ) : (
+                        <JsEllipsis
+                            ref={jsEllipsisRef}
+                            prefixCls={`${prefixCls}-ellipsis`}
+                            text={text}
+                            ellipsis={ellipsis}
+                            dangerouslyUseInnerHTML={dangerouslyUseInnerHTML}
+                            maxLine={maxLine}
+                            maxHeight={maxHeight}
+                            ellipsisNode={ellipsisNode}
+                            collapseNode={collapseNode}
+                            endExcludes={endExcludes}
+                            reflowOnResize={reflowOnResize}
+                            onReflow={onReflow}
+                            onEllipsisNodeClick={onEllipsisNodeClick}
+                            onCollapseNodeClick={onCollapseNodeClick}
+                        />
+                    )}
+                </div>
+            )}
+        </ContextLayout>
+    );
+});
+
+export default Ellipsis;