@arco-design/mobile-react 2.31.5 → 2.32.0

package/esnext/dropdown-menu/style/index.less

@@ -0,0 +1,122 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-dropdown-menu {
+    .@{prefix}-select{
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        .onepx-border-var(bottom, line-color);
+        &-item {
+            position: relative;
+            .use-var(padding, dropdown-menu-padding);
+            .use-var(font-size, dropdown-menu-font-size);
+            .use-var(line-height, dropdown-menu-line-height);
+            flex: 1;
+            display:flex;
+            flex-wrap: nowrap;
+            align-items: center;
+            justify-content: center;
+            .use-var(color, dropdown-menu-color);
+            &.is-disabled {
+                .use-var(color, dropdown-menu-disabled-color);
+            }
+            &.is-selected {
+                .use-var(color, dropdown-menu-selected-color);
+            }
+            &-tip {
+                display: inline-block;
+                white-space: nowrap;
+                .use-var(color, dropdown-menu-tip-color);
+                .use-var-with-rtl(padding-right, dropdown-menu-tip-padding-right);
+            }
+            &-label {
+                display: flex;
+                flex-wrap: nowrap;
+                align-items: center;
+                &-text {
+                    flex: auto;
+                    display: inline-block;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    .use-var(max-width, dropdown-menu-label-max-width);
+                    text-overflow: ellipsis;
+                }
+            }
+            &-icon {
+                flex: none;
+                .use-var(color, dropdown-menu-icon-color);
+                .use-var(width, dropdown-menu-icon-size);
+                .use-var(height, dropdown-menu-icon-size);
+                .use-var-with-rtl(margin-left, dropdown-menu-icon-margin-left);
+                transform: rotate(0deg);
+                transition: transform .2s cubic-bezier(.34, .69, .1, 1);
+                &.is-show {
+                    .use-var(color, dropdown-menu-icon-selected-color);
+                    transform: rotate(180deg);
+                }
+            }
+        }
+    }
+}
+
+/***************************************************
+ *                                                 *
+ *               Arco Theme Style                  *
+ *                                                 *
+ ***************************************************/
+& when (@use-dark-mode = 1) {
+    
+  .process-bg-color-with-config,
+  .process-custom-icon-bg-color-with-config {
+    @{arco-dark-mode-selector} & {
+      .use-var(color, dark-steps-process-with-config-item-icon-color);
+      .use-var(color, dark-steps-process-with-config-item-icon-color);
+    }
+  }
+  .wait-custom-icon-bg-color-with-config {
+    @{arco-dark-mode-selector} & {
+      .use-var(background, dark-steps-wait-icon-num-background);
+      .use-var(color, dark-sub-info-font-color);
+      .use-var(background, dark-steps-wait-icon-num-background);
+      .use-var(color, dark-sub-info-font-color);
+    }
+  }
+  .@{prefix}-dropdown-menu {
+    .@{prefix}-select {
+      @{arco-dark-mode-selector} & {
+        .onepx-border-var(bottom, dark-line-color);
+      }
+      &-item {
+        @{arco-dark-mode-selector} & {
+          .use-var(color, dark-dropdown-menu-color);
+        }
+        &.is-disabled {
+          @{arco-dark-mode-selector} & {
+            .use-var(color, dark-dropdown-menu-disabled-color);
+          }
+        }
+        &.is-selected {
+          @{arco-dark-mode-selector} & {
+            .use-var(color, dark-dropdown-menu-selected-color);
+          }
+        }
+        &-tip {
+          @{arco-dark-mode-selector} & {
+            .use-var(color, dark-dropdown-menu-tip-color);
+          }
+        }
+        &-icon {
+          @{arco-dark-mode-selector} & {
+            .use-var(color, dark-dropdown-menu-icon-color);
+          }
+          &.is-show {
+            @{arco-dark-mode-selector} & {
+              .use-var(color, dark-dropdown-menu-icon-selected-color);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+/********************* End *************************/

package/esnext/dropdown-menu/type.d.ts

@@ -0,0 +1,168 @@
+import { CSSProperties, ReactNode } from 'react';
+import { OptionsItem, DropdownCommonProps, OptionValueType } from '../dropdown';
+export type { OptionsItem, DropdownCommonProps };
+export interface CascadeOptions extends OptionsItem {
+    /**
+     * 级联选择的下一级内容
+     * @en The next level content of the cascade selection
+     */
+    children?: OptionsItem[];
+}
+export interface DropdownMenuBasicProps {
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     * @en Custom stylesheet
+     */
+    style?: CSSProperties;
+    /**
+     * 初始被选择的选择器的序号
+     * @en The number of the selector that is initially selected
+     */
+    defaultSelectIndex?: number;
+    /**
+     * (受控) 被选择的选择器的序号
+     * @en The selected number of selector (controlled)
+     */
+    selectIndex?: number;
+    /**
+     * 选择器禁用状态
+     * @en Selector disabled state
+     */
+    disabled?: boolean[];
+    /**
+     * 选择器的说明
+     * @en Description of selectors
+     */
+    selectTips?: string[];
+    /**
+     * 当选中的选择器改变的时候触发的回调函数
+     * @en Callback when the selected selector changes
+     */
+    onSelectChange?: (selectIndex: number) => void;
+    /**
+     * 选择器右侧的图标
+     * @en Icon to the right of the selector
+     */
+    icon?: ReactNode;
+    /**
+     * 初始状态,下拉框状态
+     * @en Initial dropdown state
+     */
+    defaultShowDropdown?: boolean;
+    /**
+     * 可选受控，组件挂载时下拉框的状态
+     * @en Optionally controlled, the state of the dropdown box when the component is mounted
+     */
+    showDropdown?: boolean;
+    /**
+     * 下拉框展示状态改变时触发的回调函数
+     * @en Callback when displayed status of drop-down box changes
+     */
+    onDropdownChange?: (dropdown: boolean, selectIndex?: number) => void;
+    /**
+     * 获得下拉框的容器
+     * @en Get the dropdown box's container
+     */
+    getContainer?: () => HTMLDivElement;
+    /**
+     * 选择后是否收起面板，仅单选有效
+     * @en Whether to close the panel after selection, only single selection is valid
+     * @default true
+     */
+    chooseAndClose?: boolean;
+    /**
+     * 取消选择
+     * @en Callback for cancelling selection
+     */
+    onCancel?: () => void;
+    /**
+     * 自定义下拉框元素
+     * @en Custom dropdown element
+     */
+    children?: ReactNode;
+    /**
+     * dropdown参数
+     * @en Dropdown parameter
+     */
+    extraForDropdown?: DropdownCommonProps;
+}
+export interface SingleOptionProps {
+    /**
+     * 是否支持多选
+     * @en Whether to support multiple selection
+     * @default false
+     */
+    multiple?: false;
+    /**
+     * 下拉框展示的选择项，其中级联选项仅单选支持
+     * @en The options displayed in the dropdown box, in which the cascade option only supports single selection
+     *  */
+    options: string[] | OptionsItem[][] | CascadeOptions[];
+    /**
+     * 初始选择项
+     * @en initial selection item
+     *  */
+    defaultValues?: OptionValueType[];
+    /**
+     * (受控) 每个选择器选中的项
+     * @en (Controlled) The item selected by each selector
+     *  */
+    values?: OptionValueType[];
+    /**
+     * 自定义选择器
+     * @en Custom selector
+     */
+    renderSelectLabel?: (op: OptionsItem, index: number) => ReactNode;
+    /**
+     * 点击选项时触发的回调函数
+     * @en Callback when clicking option
+     *  */
+    onOptionClick?: (value: OptionValueType, item: OptionsItem, selectIndex?: number) => void;
+    /**
+     * 选项改变时触发的回调函数
+     * @en Callback when options change
+     *  */
+    onOptionChange?: (value: OptionValueType, item: OptionsItem, selectIndex?: number) => void;
+    /**
+     * 所有选择器选项总值改变时的回调函数
+     * @en Callback when the total value of all selector options changes
+     *  */
+    onValuesChange?: (values: OptionValueType[]) => void;
+    /**
+     * 格式化传入的options
+     * @en Format the input options
+     *  */
+    getFormattedOptions?: (options: SingleOptionProps['options'], values?: OptionValueType[]) => {
+        formattedOptions: OptionsItem[][];
+        formattedValue: OptionValueType[];
+    };
+}
+export interface MultipleOptionProps {
+    multiple: true;
+    options: string[] | OptionsItem[][];
+    defaultValues?: OptionValueType[][];
+    values?: OptionValueType[][];
+    renderSelectLabel?: (op: OptionsItem[], index: number) => ReactNode;
+    onOptionClick?: (selected: boolean, val: OptionValueType, item: OptionsItem, selectIndex?: number) => void;
+    onOptionChange?: (vals: OptionValueType[], item: OptionsItem, selectIndex?: number) => void;
+    onValuesChange?: (values: OptionValueType[][]) => void;
+    getFormattedOptions?: (options: SingleOptionProps['options'], values?: OptionValueType[][]) => {
+        formattedOptions: OptionsItem[][];
+        formattedValue: OptionValueType[][];
+    };
+}
+export declare type OptionProps = SingleOptionProps | MultipleOptionProps;
+export declare type DropdownMenuProps = DropdownMenuBasicProps & OptionProps;
+export declare type ValueType = NonNullable<OptionProps['values']>;
+export interface DropdownMenuRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+}

package/esnext/dropdown-menu/type.js

@@ -0,0 +1 @@
+export {};

package/esnext/ellipsis/components/js-ellipsis.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { JsEllipsisRef } from '../type';
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<import("../type").EllipsisBaseProps & {
+    prefixCls: string;
+} & Pick<import("../type").EllipsisProps, "maxHeight" | "endExcludes" | "reflowOnResize" | "onReflow"> & React.RefAttributes<JsEllipsisRef>>>;
+export default _default;

package/esnext/ellipsis/components/js-ellipsis.js

@@ -0,0 +1,178 @@
+import React, { useEffect, useRef, forwardRef, useImperativeHandle, useCallback } from 'react';
+import ResizeObserver from 'resize-observer-polyfill';
+import { getLineHeight, wrapTextChildNodesWithSpan } from '../utils/dom';
+import { useLatestRef } from '../../_helpers';
+const JsEllipsis = forwardRef((props, ref) => {
+    const { prefixCls, text, ellipsis, dangerouslyUseInnerHTML, maxLine = 1, maxHeight, ellipsisNode, collapseNode, endExcludes, reflowOnResize, onReflow, onEllipsisNodeClick, onCollapseNodeClick, } = props;
+    const truncating = useRef(false);
+    const domRef = useRef(null);
+    const textRef = useRef(null);
+    const ellipsisRef = useRef(null);
+    const ellipsisValueRef = useLatestRef(ellipsis);
+    const lineHeightRef = useRef(0);
+    const setCurLineHeight = useCallback(() => {
+        if (domRef.current) {
+            lineHeightRef.current = Math.round(getLineHeight(domRef.current));
+        }
+    }, []);
+    useEffect(() => {
+        setCurLineHeight();
+    }, []);
+    function handleOnReflow(isEllipsis, result) {
+        if (onReflow && typeof onReflow === 'function') {
+            onReflow(isEllipsis, result);
+        }
+    }
+    function getActualHeight(container) {
+        const { height } = container.getBoundingClientRect();
+        return Math.round(height);
+    }
+    function truncateText(container, textContainer, max) {
+        const content = textContainer.textContent || '';
+        let currentText = '';
+        let l = 0;
+        let r = content.length - 1;
+        // Binary truncate text until get the max limit fragment of text.
+        while (l < r) {
+            const m = Math.floor((l + r) / 2);
+            if (l === m) {
+                break;
+            }
+            const temp = content.slice(l, m);
+            textContainer.innerText = currentText + temp;
+            const actualHeight = getActualHeight(container);
+            if (actualHeight > max) {
+                r = m;
+            }
+            else {
+                currentText += temp;
+                l = m;
+            }
+        }
+        // Remove the exclude char at the end of the content.
+        while (endExcludes && endExcludes.includes(currentText[currentText.length - 1])) {
+            currentText = currentText.slice(0, -1);
+        }
+        // Callback after reflow.
+        handleOnReflow(true, currentText);
+        textContainer.innerText = currentText;
+    }
+    function truncateHTML(container, textContainer, max) {
+        // only enter this function when container overflow.
+        const children = textContainer.childNodes;
+        if (children.length === 1) {
+            const node = children[0];
+            if (node.nodeType === Node.TEXT_NODE) {
+                truncateText(container, textContainer, max);
+            }
+            else {
+                const html = node.innerHTML;
+                // clear content to determine whether the empty node can be placed.
+                node.innerHTML = '';
+                const actualHeight = getActualHeight(container);
+                if (actualHeight > max) {
+                    // return after remove the node, if overflow with empty node.
+                    textContainer.removeChild(node);
+                    handleOnReflow(true, textContainer.innerHTML);
+                    return;
+                }
+                node.innerHTML = html;
+                // recursive truncate node
+                truncateHTML(container, node, max);
+            }
+        }
+        else {
+            const nodes = [].slice.call(children);
+            textContainer.innerHTML = '';
+            let i = 0;
+            // find the critical node
+            while (i < nodes.length) {
+                textContainer.appendChild(nodes[i]);
+                const actualHeight = getActualHeight(container);
+                if (actualHeight > max) {
+                    if (nodes[i].childNodes && nodes[i].childNodes.length) {
+                        break;
+                    }
+                    else {
+                        textContainer.removeChild(nodes[i]);
+                        handleOnReflow(true, textContainer.innerHTML);
+                        return;
+                    }
+                }
+                i++;
+            }
+            if (textContainer.childNodes[i]) {
+                // truncate the critical node
+                truncateHTML(container, textContainer.childNodes[i], max);
+            }
+        }
+    }
+    // reflow when the main props change.
+    const reflow = useCallback(() => {
+        if (!domRef.current || !textRef.current || !ellipsisRef.current || truncating.current) {
+            return;
+        }
+        ellipsisRef.current.style.display = 'none';
+        if (dangerouslyUseInnerHTML) {
+            textRef.current.innerHTML = text;
+            textRef.current.classList.add(`${prefixCls}-js-content-text-pre`);
+        }
+        else {
+            textRef.current.innerText = text;
+        }
+        if (!ellipsisValueRef.current) {
+            return;
+        }
+        textRef.current.classList.remove(`${prefixCls}-js-content-text-pre`);
+        const actualHeight = getActualHeight(domRef.current);
+        const max = isNaN(Number(maxHeight)) ? lineHeightRef.current * maxLine : Number(maxHeight);
+        if (actualHeight <= max) {
+            handleOnReflow(false, text);
+            return;
+        }
+        truncating.current = true;
+        ellipsisRef.current.style.display = 'inline';
+        if (dangerouslyUseInnerHTML) {
+            // wrap the text children node with span element.
+            wrapTextChildNodesWithSpan(textRef.current, `${prefixCls}-js-content-text`);
+            truncateHTML(domRef.current, textRef.current, max);
+        }
+        else {
+            truncateText(domRef.current, textRef.current, max);
+        }
+        truncating.current = false;
+    }, [text, ellipsis, dangerouslyUseInnerHTML, maxLine, maxHeight, ellipsisNode, endExcludes]);
+    useEffect(() => {
+        reflow();
+    }, [reflow]);
+    const observerRef = useRef(null);
+    // Observe resize event of container if reflowOnResize is true.
+    useEffect(() => {
+        if (domRef.current && reflowOnResize) {
+            if (!observerRef.current && ellipsis) {
+                observerRef.current = new ResizeObserver(reflow);
+                observerRef.current.observe(domRef.current);
+            }
+        }
+        return () => {
+            // Remove observer when component unmounted.
+            if (observerRef.current && domRef.current) {
+                observerRef.current.unobserve(domRef.current);
+                observerRef.current = null;
+            }
+        };
+    }, [ellipsis]);
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+        reflow,
+    }), [reflow]);
+    return (React.createElement("div", { ref: domRef, className: `${prefixCls}-js` },
+        React.createElement("span", { ref: textRef, className: `${prefixCls}-js-content` }, dangerouslyUseInnerHTML ? (React.createElement("span", { className: `${prefixCls}-js-content-initial`, style: {
+                WebkitLineClamp: maxLine,
+            }, dangerouslySetInnerHTML: { __html: text } })) : (React.createElement("span", { className: `${prefixCls}-js-content-initial`, style: {
+                WebkitLineClamp: maxLine,
+            } }, text))),
+        React.createElement("span", { ref: ellipsisRef, className: `${prefixCls}-js-content-ellipsis`, onClick: onEllipsisNodeClick }, ellipsisNode),
+        !ellipsis && collapseNode && (React.createElement("span", { className: `${prefixCls}-js-content-collapse`, onClick: onCollapseNodeClick }, collapseNode))));
+});
+export default React.memo(JsEllipsis);

package/esnext/ellipsis/components/native-ellipsis.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { NativeEllipsisProps } from '../type';
+declare function NativeEllipsis({ prefixCls, ellipsis, dangerouslyUseInnerHTML, text, maxLine, ellipsisNode, collapseNode, onEllipsisNodeClick, onCollapseNodeClick, }: NativeEllipsisProps): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof NativeEllipsis>;
+export default _default;

package/esnext/ellipsis/components/native-ellipsis.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { cls } from '@arco-design/mobile-utils';
+function NativeEllipsis({ prefixCls, ellipsis, dangerouslyUseInnerHTML, text, maxLine, ellipsisNode, collapseNode = '', onEllipsisNodeClick, onCollapseNodeClick, }) {
+    return (React.createElement("div", { className: cls(`${prefixCls}-native`, {
+            ellipsis,
+        }), style: {
+            WebkitLineClamp: maxLine,
+        } },
+        dangerouslyUseInnerHTML ? (
+        // eslint-disable-next-line react/no-danger,@typescript-eslint/naming-convention
+        React.createElement("span", { dangerouslySetInnerHTML: { __html: text } })) : (React.createElement("span", null, text)),
+        !ellipsis && collapseNode && (React.createElement("span", { onClick: onCollapseNodeClick, className: cls(`${prefixCls}-native-collapse`) }, collapseNode)),
+        ellipsis && (ellipsisNode !== '...' || onEllipsisNodeClick) ? (React.createElement("span", { onClick: onEllipsisNodeClick, className: cls(`${prefixCls}-native-ellipsis-node`) }, ellipsisNode)) : null));
+}
+export default React.memo(NativeEllipsis);

package/esnext/ellipsis/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { EllipsisProps, EllipsisRef } 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
+ */
+declare const Ellipsis: React.ForwardRefExoticComponent<EllipsisProps & React.RefAttributes<EllipsisRef>>;
+export default Ellipsis;

package/esnext/ellipsis/index.js

@@ -0,0 +1,31 @@
+import React, { useRef, forwardRef, 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';
+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, ref) => {
+    const { className, text, dangerouslyUseInnerHTML, maxLine = 1, maxHeight, ellipsis = true, ellipsisNode = '...', collapseNode = '', endExcludes, reflowOnResize = false, floatEllipsisNode = false, onReflow, onCollapseNodeClick, onEllipsisNodeClick, } = props;
+    const domRef = useRef(null);
+    const jsEllipsisRef = useRef(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 (React.createElement(ContextLayout, null, ({ prefixCls }) => (React.createElement("div", { className: cls(`${prefixCls}-ellipsis`, className), ref: domRef }, useNativeEllipsis ? (React.createElement(NativeEllipsis, { prefixCls: `${prefixCls}-ellipsis`, ellipsis: ellipsis, dangerouslyUseInnerHTML: dangerouslyUseInnerHTML, text: text, maxLine: maxLine, ellipsisNode: ellipsisNode, collapseNode: collapseNode, onEllipsisNodeClick: onEllipsisNodeClick, onCollapseNodeClick: onCollapseNodeClick })) : (React.createElement(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 }))))));
+});
+export default Ellipsis;