@arco-design/mobile-react 2.31.6 → 2.32.0

package/esnext/dropdown/style/index.less

@@ -0,0 +1,177 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-dropdown {
+    position: fixed;
+    overflow: hidden;
+    left: 0;
+    right: 0;
+    z-index: @full-screen-z-index;
+
+    &-options {
+        position: absolute;
+        left: 0;
+        right: 0;
+        z-index: @full-screen-z-index + 1;
+        will-change: transform;
+
+        .drop-up & {
+            bottom: 0;
+        }
+        .use-var(background-color, dropdown-options-background-color);
+
+        &-container {
+            height: auto;
+        }
+
+        &-wrap {
+            &.use-column {
+                display: flex;
+                flex-wrap: wrap;
+                .use-var(padding, dropdown-multi-rows-options-container-padding);
+                .use-var(margin, dropdown-multi-rows-options-container-margin);
+            }
+        }
+
+        &-item {
+            .use-var(padding, dropdown-options-item-padding);
+            .use-var(font-size, dropdown-options-item-font-size);
+            .use-var(line-height, dropdown-options-item-line-height);
+            .use-var(color, dropdown-options-item-color);
+            .set-value-with-rtl(text-align, left);
+            position: relative;
+
+            &.selected {
+                .use-var(color, dropdown-options-item-selected-color);
+            }
+
+            &.selected &-icon {
+                .use-var(color, dropdown-options-item-selected-color);
+            }
+
+            &.disabled {
+                .use-var(color, dropdown-options-item-disabled-color);
+            }
+
+            &-icon {
+                position: absolute;
+                top: 50%;
+                transform: translateY(-50%);
+                .use-var-with-rtl(right, dropdown-options-item-icon-right);
+                color: transparent;
+            }
+        }
+
+        &-item-fake-col,
+        &-item-col {
+            flex: 1;
+            .use-var(margin-right, dropdown-multi-rows-options-gutter);
+            .use-var(margin-bottom, dropdown-multi-rows-options-gutter);
+            .use-var(padding, dropdown-multi-rows-options-item-padding);
+        }
+
+        &-item-col {
+            text-align: center;
+            .use-var(font-size, dropdown-multi-rows-options-item-font-size);
+            .use-var(line-height, dropdown-multi-rows-options-item-line-height);
+            .use-var(color, dropdown-multi-rows-options-item-color);
+            .use-var(border-radius, dropdown-multi-rows-options-item-border-radius);
+            .use-var(background, dropdown-multi-rows-options-item-background);
+
+            &.selected {
+                .use-var(color, dropdown-multi-rows-options-item-selected-color);
+                .use-var(background, dropdown-multi-rows-options-item-selected-background);
+            }
+
+            &.disabled {
+                .use-var(color, dropdown-options-item-disabled-color);
+            }
+        }
+
+        &-item-col &-item-icon {
+            display: none;
+        }
+    }
+
+    &-mask {
+        position: absolute;
+        opacity: 0;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        .use-var(background-color, dropdown-mask-background-color);
+
+        &.is-show {
+            opacity: 1;
+        }
+    }
+}
+
+/***************************************************
+ *                                                 *
+ *               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 {
+    &-options {
+      @{arco-dark-mode-selector} & {
+        .use-var(background-color, dark-dropdown-options-background-color);
+      }
+      &-item {
+        @{arco-dark-mode-selector} & {
+          .use-var(color, dark-dropdown-options-item-color);
+        }
+        &.selected {
+          @{arco-dark-mode-selector} & {
+            .use-var(color, dark-dropdown-options-item-selected-color);
+          }
+        }
+        &.selected &-icon {
+          @{arco-dark-mode-selector} & {
+            .use-var(color, dark-dropdown-options-item-selected-color);
+          }
+        }
+        &.disabled {
+          @{arco-dark-mode-selector} & {
+            .use-var(color, dark-dropdown-options-item-disabled-color);
+          }
+        }
+      }
+      &-item-col {
+        @{arco-dark-mode-selector} & {
+          .use-var(color, dark-dropdown-multi-rows-options-item-color);
+          .use-var(background, dark-dropdown-multi-rows-options-item-background);
+        }
+        &.selected {
+          @{arco-dark-mode-selector} & {
+            .use-var(color, dark-dropdown-multi-rows-options-item-selected-color);
+            .use-var(background, dark-dropdown-multi-rows-options-item-selected-background);
+          }
+        }
+        &.disabled {
+          @{arco-dark-mode-selector} & {
+            .use-var(color, dark-dropdown-options-item-disabled-color);
+          }
+        }
+      }
+    }
+  }
+}
+/********************* End *************************/

package/esnext/dropdown/type.d.ts

@@ -0,0 +1,269 @@
+import { CSSProperties, ReactNode } from 'react';
+export declare type OptionValueType = number | string;
+export interface OptionsItem {
+    /**
+     * 选项名称
+     * @en option label
+     *  */
+    label: ReactNode;
+    /**
+     * 选项标识
+     * @en option value
+     * */
+    value: OptionValueType;
+    /**
+     * 选项是否可用，默认false表示可用
+     * @en Whether the option is available, the default false means available
+     *  */
+    disabled?: boolean;
+}
+/**
+ * 暴露给DropdownMenu组件的使用方
+ * @en Expose to the consumer of the DropdownMenu component
+ */
+export interface DropdownCommonProps {
+    /**
+     * 自定义类名
+     * @en Custom classname
+     * */
+    className?: string;
+    /**
+     * 自定义样式
+     * @en Custom stylesheet
+     */
+    style?: CSSProperties;
+    /**
+     * 下拉框底部元素
+     * @en Dropdown bottom element
+     * */
+    extraNode?: ReactNode;
+    /**
+     * 定位下拉框出现的位置
+     * @en Position where the dropDown box appears
+     * */
+    top?: number;
+    /**
+     * 向上展开时下拉框出现的位置
+     * @en Position Where the drop-down box appears when expanding upwards
+     * */
+    bottom?: number;
+    /**
+     * 展开方向
+     * @en Expand direction
+     * @default "down"
+     */
+    direction?: 'up' | 'down';
+    /**
+     * 受控模式，下拉框高度
+     * @en Dropdown box height in controlled mode
+     * */
+    height?: number;
+    /**
+     * 下拉框最大的高度
+     * @en The maximum height of the dropdown
+     * @default 500
+     */
+    maxHeight?: number;
+    /**
+     * 点击其他区域是否取消选择
+     * @en Click on other areas to cancel the selection
+     * @default true
+     */
+    clickOtherToClose?: boolean;
+    /**
+     * 是否在触发touchstart时就取消选择，否则在click之后再取消选择
+     * @en Whether to cancel the selection when touchstart is triggered, otherwise cancel the selection after the click
+     * @default true
+     */
+    touchToClose?: boolean;
+    /**
+     * 展开收起动画的时间
+     * @en Expand and collapse animation duration
+     * @default 300
+     */
+    dropdownAnimationTimeout?: number;
+    /**
+     * 展开收起动画曲线函数
+     * @en Expand and collapse animation curve function
+     * @default "cubic-bezier(0.32, 0.96, 0.6, 1)"
+     */
+    dropdownAnimationFunction?: string;
+    /**
+     * 是否展示遮罩层
+     * @en Whether to show the mask layer
+     * @default true
+     */
+    showMask?: boolean;
+    /**
+     * 蒙层动画时长
+     * @en Mask animation duration
+     * @default 500
+     */
+    maskAnimationTimeout?: number;
+    /**
+     * 蒙层动画函数
+     * @en Mask animation function
+     * @default "cubic-bezier(0.32, 0.96, 0.6, 1)"
+     */
+    maskAnimationFunction?: string;
+    /**
+     * 使用多列标签样式，传 true 为 4 列，传数字为指定 n 列
+     * @en Use multi-column label style, input true, it's 4 columns, and input number n, it will be n columns
+     * @default false
+     */
+    useColumn?: boolean | number;
+    /**
+     * 选项附带图标
+     * @en Icon in each option
+     */
+    optionIcon?: ReactNode;
+    /**
+     * 是否在打开下拉框时再加载内容
+     * @en Whether to reload the content when the dropdown box is opened
+     * @default true
+     */
+    mountOnEnter?: boolean;
+    /**
+     * 是否在退出时卸载内容
+     * @en Whether to unmount content on exit
+     * @default true
+     */
+    unmountOnExit?: boolean;
+    /**
+     * 弹窗打开时是否禁止body的滚动
+     * @en Whether to prohibit the scrolling of the body when the dropdown box is opened
+     * @default true
+     */
+    preventBodyScroll?: boolean;
+    /**
+     * 页面初始 overflow 状态，即关闭弹窗时 overflow 应该还原的状态
+     * @en The initial overflow state of the page, that is, the state in which overflow should be restored when the dropdown box is closed
+     * @default 第一个全屏组件（弹窗、toast等）打开时页面overflow值
+     * @default_en The page overflow value when the first fullscreen component (popup, toast, etc.) is opened
+     */
+    initialBodyOverflow?: string;
+    /**
+     * 用于定位的元素，优先级低于top/bottom
+     * @en Element used for positioning, with lower priority than top/bottom
+     * @default 当前DOM所在位置的父元素
+     * @default_en The parent element of the current DOM
+     */
+    getAnchorElement?: () => HTMLElement;
+    /**
+     * 点击某元素时是否阻止关闭面板, 优先级高于`getStopTouchElement`，当 clickOtherToClose=true 时有效
+     * @en Whether to prevent the panel from closing when an element is clicked, the priority is higher than `getStopTouchElement`, valid when clickOtherToClose=true
+     * */
+    isStopTouchEl?: (el: HTMLElement) => boolean;
+    /**
+     * 可阻止关闭面板的元素，当 clickOtherToClose=true 时有效
+     * @en Element that prevents the panel from closing, valid when clickOtherToClose=true
+     * @default 当前组件的父元素
+     * @default_en The parent element of the current component
+     */
+    getStopTouchElements?: () => HTMLElement[];
+    /**
+     * 内容内部滚动区域容器，在该容器中未滚动到顶部或底部时会释放滚动
+     * @en Content inner scroll container, scrolling will be releases when it is not scrolled to the top or bottom
+     * */
+    getScrollContainer?: () => HTMLElement[] | HTMLElement | null;
+    /**
+     * 获取挂载容器
+     * @en Get mounted container
+     * */
+    getPortalContainer?: () => HTMLElement;
+}
+export interface SingleOptionProps {
+    /**
+     * 是否支持多选
+     * @en Whether to support multiple selection
+     * @default false
+     */
+    multiple?: false;
+    /**
+     * 默认选中值
+     * @en Default checked value
+     * */
+    defaultSelectedValue?: OptionValueType;
+    /**
+     * 当前选择的选项标识
+     * @en The currently selected option value
+     * */
+    selectedValue?: OptionValueType;
+    /**
+     * 点击选项时触发的回调函数
+     * @en Callback when clicking option
+     * */
+    onOptionClick?: (val: OptionValueType, op: OptionsItem) => void;
+    /**
+     * 当选项改变时触发的回调函数
+     * @en Callback when the option changes
+     *  */
+    onOptionChange?: (val: OptionValueType, op: OptionsItem) => void;
+}
+export interface MultipleOptionProps {
+    multiple: true;
+    defaultSelectedValue?: OptionValueType[];
+    selectedValue?: OptionValueType[];
+    onOptionClick?: (selected: boolean, val: OptionValueType, op: OptionsItem) => void;
+    onOptionChange?: (vals: OptionValueType[], op: OptionsItem) => void;
+}
+export declare type OptionProps = SingleOptionProps | MultipleOptionProps;
+export interface DropdownBasicProps extends DropdownCommonProps {
+    /**
+     * 是否展开下拉框
+     * @en Whether to expand the dropdown box
+     * @default false
+     */
+    showDropdown: boolean;
+    /**
+     * 展示的选项,优先级低于dropdownNode
+     * @en Displayed options, lower priority than dropdownNode
+     * @default []
+     */
+    options?: OptionsItem[];
+    /**
+     * 自定义下拉框元素
+     * @en Custom dropdown element
+     * */
+    children?: ReactNode;
+    /**
+     * 取消选择
+     * @en Cancel selection
+     * */
+    onCancel: () => void;
+}
+export declare type DropdownProps = DropdownBasicProps & OptionProps;
+export declare type ValueType = NonNullable<OptionProps['selectedValue']>;
+export interface DropdownRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+}
+export interface DropdownOptionsBasicProps {
+    /**
+     * 展示的选项列表
+     * @en Displayed list of options
+     * */
+    options: OptionsItem[];
+    /**
+     * 使用多列标签样式，传 true 为 4 列，传数字为指定 n 列
+     * @en Use multi-column label style, input true, it's 4 columns, and input number n, it will be n columns
+     * @default false
+     */
+    useColumn?: DropdownCommonProps['useColumn'];
+    /**
+     * 选项列表右侧图标
+     * @en Icon on the right side of the options list
+     */
+    icon?: ReactNode;
+}
+export declare type DropdownOptionsProps = DropdownOptionsBasicProps & OptionProps;
+export interface DropdownOptionsRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+}

package/esnext/dropdown/type.js

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

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { DropdownMenuRef } from './type';
+import { DropdownProps, DropdownRef } from '../dropdown';
+export declare function componentGenerator<P extends DropdownProps = DropdownProps, R extends DropdownRef = DropdownRef>(Comp: React.ForwardRefExoticComponent<P & React.RefAttributes<R>>): React.ForwardRefExoticComponent<(import("./type").DropdownMenuBasicProps & import("./type").SingleOptionProps & React.RefAttributes<DropdownMenuRef>) | (import("./type").DropdownMenuBasicProps & import("./type").MultipleOptionProps & React.RefAttributes<DropdownMenuRef>)>;

package/esnext/dropdown-menu/dropdown-menu.js

@@ -0,0 +1,161 @@
+import React, { useRef, useState, forwardRef, useImperativeHandle, useMemo, useEffect, useContext, } from 'react';
+import { cls } from '@arco-design/mobile-utils';
+import { GlobalContext } from '../context-provider';
+import { getFormattedOptions as defaultFormatFunc, isCascadeArray, isClassNameDom, isRefDom, } from './helper';
+import IconTriDown from '../icon/IconTriDown';
+export function componentGenerator(Comp) {
+    return forwardRef((props, ref) => {
+        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(null);
+        const domRef = useRef(null);
+        const defaultOpItem = {
+            label: locale?.DropdownMenu.select,
+            value: -1,
+        };
+        /**
+         * 更新选项数组和选择情况
+         * @en Update options list and selection
+         */
+        const { formattedOptions } = useMemo(() => {
+            return getFormattedOptions(options, currentValues);
+        }, [options, currentValues]);
+        const selectedOptions = useMemo(() => formattedOptions.map((ops, index) => {
+            if (props.multiple) {
+                const value = currentValues[index] || [];
+                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, index) => {
+            onDropdownChange && onDropdownChange(show, index);
+            setInnerShowDropdown(show);
+        };
+        const handleSelectedIndexChange = (idx) => {
+            setInnerSelectedIndex(idx);
+            onSelectChange?.(idx);
+        };
+        const handleValuesChange = (val) => {
+            let newValue = [...currentValues];
+            // 级联情况下 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) => {
+            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, index) => {
+            if (props.multiple === true) {
+                const multipleOp = op || [];
+                return props.renderSelectLabel ? (props.renderSelectLabel(multipleOp, index)) : (React.createElement("div", { className: cls(`${prefixCls}-select-item-label-text`) }, multipleOp.map(item => item.label).join(',')));
+            }
+            const singleOp = op || [];
+            return props.renderSelectLabel ? (props.renderSelectLabel(singleOp, index)) : (React.createElement("div", { className: cls(`${prefixCls}-select-item-label-text`) }, singleOp.label));
+        };
+        return (React.createElement("div", { ref: domRef, className: cls(`${prefixCls}-dropdown-menu all-border-box`, className, {
+                show: dropdownShown,
+            }), style: style },
+            React.createElement("div", { className: cls(`${prefixCls}-select`), ref: selectWrapper },
+                selectedOptions.map((op, index) => {
+                    const tip = selectTips[index] || '';
+                    return (React.createElement("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 && (React.createElement("span", { className: cls(`${prefixCls}-select-item-tip`) }, tip)),
+                        React.createElement("div", { className: cls(`${prefixCls}-select-item-label`) },
+                            renderSelectedLabel(op, index),
+                            icon === void 0 ? (React.createElement(IconTriDown, { className: cls(`${prefixCls}-select-item-icon`, {
+                                    'is-show': dropdownShown && selectedIndex === index,
+                                }) })) : (icon))));
+                }),
+                props.multiple === true ? (React.createElement(Comp, Object.assign({}, {
+                    multiple: true,
+                    options: formattedOptions[selectedIndex] || [],
+                    selectedValue: currentValues[selectedIndex] || [],
+                    onOptionClick: (selected, val, op) => {
+                        props.onOptionClick?.(selected, val, op, selectedIndex);
+                    },
+                    onOptionChange: (val, op) => {
+                        props.onOptionChange?.(val, op, selectedIndex);
+                        handleValuesChange(val);
+                    },
+                    ...dropdownCommonProps,
+                    children,
+                }))) : (React.createElement(Comp, Object.assign({}, {
+                    multiple: props.multiple,
+                    options: formattedOptions[selectedIndex] || [],
+                    selectedValue: currentValues[selectedIndex] || 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,
+                }))))));
+    });
+}

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import { OptionsItem } from '../dropdown';
+import { CascadeOptions, ValueType } from './type';
+/**
+ * 判断是否为string数组
+ * @en Determine whether it is a string array
+ * */
+export declare function isStringArray(options: string[] | OptionsItem[][] | CascadeOptions[]): options is string[];
+/**
+ * 判断是否为嵌套数组
+ * @en Determine if it is a nested array
+ * */
+export declare function isCascadeArray(options: string[] | OptionsItem[][] | CascadeOptions[]): options is CascadeOptions[];
+/**
+ * 格式化传入的数组
+ * @en format the input array
+ * @param {OptionsItem[][] | string[] | CascadeOptions[]} options 上层传入的选择项数组
+ * @param {OptionsItem[][] | string[] | CascadeOptions[]} options {en} Array of options from the upper layer
+ * @param {ValueType} currentValues Current selected value
+ * */
+export declare const getFormattedOptions: (options: OptionsItem[][] | string[] | CascadeOptions[], currentValues: ValueType) => {
+    formattedOptions: OptionsItem[][];
+    formattedValue: (string | number | (string | number)[])[];
+};
+/**
+ * 判断是否为指定ref内的元素
+ * @en Determine whether it is an element within the specified ref
+ */
+export declare const isRefDom: (dom: any, ref: React.RefObject<HTMLDivElement>) => boolean;
+/**
+ * 判断是否为指定类名下的元素
+ * @en Determine whether it is an element under the specified classname
+ */
+export declare const isClassNameDom: (dom: any, className: string) => boolean;