@arco-design/mobile-react 2.19.1 → 2.21.0

package/esm/dropdown/index.js

@@ -1,298 +1,8 @@
-import _extends from "@babel/runtime/helpers/extends";
-import React, { useRef, useEffect, useCallback, forwardRef, useImperativeHandle, useState } from 'react';
-import { cls, componentWrapper, 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 { componentWrapper } from '@arco-design/mobile-utils';
 import Options from './options';
+import { componentGenerator } from './dropdown';
 export * from './type';
-var Dropdown = /*#__PURE__*/forwardRef(function (props, ref) {
-  var optionsWrapper = useRef(null);
-  var domRef = useRef(null);
-  var _props$className = props.className,
-      className = _props$className === void 0 ? '' : _props$className,
-      _props$style = props.style,
-      style = _props$style === void 0 ? {} : _props$style,
-      _props$options = props.options,
-      options = _props$options === void 0 ? [] : _props$options,
-      _props$showDropdown = props.showDropdown,
-      showDropdown = _props$showDropdown === void 0 ? false : _props$showDropdown,
-      _props$showMask = props.showMask,
-      showMask = _props$showMask === void 0 ? true : _props$showMask,
-      _props$direction = props.direction,
-      direction = _props$direction === void 0 ? 'down' : _props$direction,
-      height = props.height,
-      _props$maxHeight = props.maxHeight,
-      maxHeight = _props$maxHeight === void 0 ? 500 : _props$maxHeight,
-      _props$touchToClose = props.touchToClose,
-      touchToClose = _props$touchToClose === void 0 ? true : _props$touchToClose,
-      useColumn = props.useColumn,
-      multiple = props.multiple,
-      defaultSelectedValue = props.defaultSelectedValue,
-      onCancel = props.onCancel,
-      getAnchorElement = props.getAnchorElement,
-      isStopTouchEl = props.isStopTouchEl,
-      getStopTouchElements = props.getStopTouchElements,
-      _props$getScrollConta = props.getScrollContainer,
-      getScrollContainer = _props$getScrollConta === void 0 ? function () {
-    return optionsWrapper.current;
-  } : _props$getScrollConta,
-      getPortalContainer = props.getPortalContainer,
-      _props$clickOtherToCl = props.clickOtherToClose,
-      clickOtherToClose = _props$clickOtherToCl === void 0 ? true : _props$clickOtherToCl,
-      _props$dropdownAnimat = props.dropdownAnimationTimeout,
-      dropdownAnimationTimeout = _props$dropdownAnimat === void 0 ? 300 : _props$dropdownAnimat,
-      _props$dropdownAnimat2 = props.dropdownAnimationFunction,
-      dropdownAnimationFunction = _props$dropdownAnimat2 === void 0 ? 'cubic-bezier(0.32, 0.96, 0.6, 1)' : _props$dropdownAnimat2,
-      _props$maskAnimationT = props.maskAnimationTimeout,
-      maskAnimationTimeout = _props$maskAnimationT === void 0 ? 500 : _props$maskAnimationT,
-      _props$maskAnimationF = props.maskAnimationFunction,
-      maskAnimationFunction = _props$maskAnimationF === void 0 ? 'cubic-bezier(0.32, 0.96, 0.6, 1)' : _props$maskAnimationF,
-      _props$mountOnEnter = props.mountOnEnter,
-      mountOnEnter = _props$mountOnEnter === void 0 ? true : _props$mountOnEnter,
-      _props$unmountOnExit = props.unmountOnExit,
-      unmountOnExit = _props$unmountOnExit === void 0 ? true : _props$unmountOnExit,
-      _props$preventBodyScr = props.preventBodyScroll,
-      preventBodyScroll = _props$preventBodyScr === void 0 ? true : _props$preventBodyScr,
-      initialBodyOverflow = props.initialBodyOverflow;
-  var system = useSystem();
-
-  var _useWindowSize = useWindowSize(),
-      windowHeight = _useWindowSize.windowHeight,
-      windowWidth = _useWindowSize.windowWidth;
-
-  var _useState = useState({
-    top: '',
-    bottom: ''
-  }),
-      positionStyle = _useState[0],
-      setPositionStyle = _useState[1];
-
-  var _useState2 = useState(function () {
-    var defaultValue = multiple ? [] : 0;
-    return defaultSelectedValue !== void 0 ? defaultSelectedValue : defaultValue;
-  }),
-      innerValue = _useState2[0],
-      setInnerValue = _useState2[1]; // down=0为向上展开，1为向下展开
-  // @en down=0 is to expand upwards, 1 is to expand downwards
-
-
-  var _useState3 = useState(direction === 'down'),
-      down = _useState3[0],
-      setDown = _useState3[1];
-
-  var maskHeight = useRef(0);
-  var optionsContainer = useRef(null);
-  var dropdownContainer = useRef(null);
-
-  var _useState4 = useState(0),
-      optionsWrapperHeight = _useState4[0],
-      setOptionsWrapperHeight = _useState4[1];
-  /**
-   * 判断是否阻止touch事件
-   * @en Determine whether to block touch events
-   * */
-
-
-  var ifStopTouch = function ifStopTouch(el) {
-    var _dropdownContainer$cu;
-
-    if (isStopTouchEl) return isStopTouchEl(el);
-    var tempEl = el;
-    var elements = getStopTouchElements ? getStopTouchElements() : [(_dropdownContainer$cu = dropdownContainer.current) == null ? void 0 : _dropdownContainer$cu.parentElement];
-
-    for (var 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);
-  useEffect(function () {
-    var _dropdownContainer$cu2;
-
-    // 为0的时候不改变
-    // @en Does not change when it is 0
-    if (optionsWrapperHeight === 0) return;
-    var tempEl = getAnchorElement ? getAnchorElement() : (_dropdownContainer$cu2 = dropdownContainer.current) == null ? void 0 : _dropdownContainer$cu2.parentElement;
-
-    var _ref = (tempEl == null ? void 0 : tempEl.getBoundingClientRect()) || {
-      bottom: 0,
-      top: 0
-    },
-        bottom = _ref.bottom,
-        top = _ref.top;
-
-    var tempTop = props.top || bottom;
-    var tempBottom = props.bottom || windowHeight - top;
-    var 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
-
-    var tempDown = direction !== 'up' && optionsWrapperHeight < tempMaskHeight || optionsWrapperHeight > tempTop;
-
-    if (tempDown) {
-      maskHeight.current = tempMaskHeight;
-      setPositionStyle({
-        top: tempTop + "px",
-        bottom: ''
-      });
-    } else {
-      maskHeight.current = windowHeight - tempBottom;
-      setPositionStyle({
-        top: '',
-        bottom: tempBottom + "px"
-      });
-    }
-
-    setDown(tempDown);
-  }, [dropdownContainer, optionsWrapperHeight, props.top, props.bottom, Boolean(getAnchorElement), direction, windowHeight]);
-  /**
-   * 取消选择
-   * @en Cancel selection
-   * */
-
-  var handleCancel = useCallback(function (e) {
-    var optionsWrapperDom = optionsWrapper.current;
-
-    if (!e || !optionsWrapperDom) {
-      return;
-    }
-
-    var target = e.target;
-
-    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(function () {
-    var needBind = showDropdown && clickOtherToClose;
-    var event = touchToClose ? 'touchstart' : 'click';
-
-    if (needBind) {
-      document.addEventListener(event, handleCancel);
-    }
-
-    return function () {
-      if (needBind) {
-        document.removeEventListener(event, handleCancel);
-      }
-    };
-  }, [showDropdown, clickOtherToClose, handleCancel]);
-  useEffect(function () {
-    nextTick(function () {
-      if (height !== void 0) {
-        // 受控模式下，完全交由外层控制
-        // @en In controlled mode, it is completely controlled by the outer layer
-        setOptionsWrapperHeight(height);
-      } else {
-        if (!optionsContainer.current) return;
-        if (!showDropdown) setOptionsWrapperHeight(0);else {
-          setOptionsWrapperHeight(optionsContainer.current.getBoundingClientRect().height);
-        }
-      }
-    });
-  }, [showDropdown, options.length, height]);
-  useImperativeHandle(ref, function () {
-    return {
-      dom: domRef.current
-    };
-  });
-
-  function getOptionsStyle() {
-    var trans = down ? 'translateY(-100%)' : 'translateY(100%)';
-    return getStyleWithVendor({
-      // height: `${optionsWrapperHeight}px`,
-      transform: optionsWrapperHeight ? '' : trans,
-      transition: "transform " + dropdownAnimationTimeout + "ms " + dropdownAnimationFunction,
-      overflow: optionsWrapperHeight > maxHeight || height ? 'auto' : 'hidden',
-      maxHeight: maxHeight + "px"
-    });
-  }
-
-  function renderInnerOptions() {
-    var optionProps = {
-      options: options,
-      useColumn: useColumn
-    };
-    var value = props.selectedValue !== void 0 ? props.selectedValue : innerValue;
-    return props.multiple === true ? /*#__PURE__*/React.createElement(Options, _extends({}, optionProps, {
-      multiple: true,
-      selectedValue: value,
-      onOptionClick: props.onOptionClick,
-      onOptionChange: function onOptionChange(vals, op) {
-        setInnerValue(vals);
-        props.onOptionChange == null ? void 0 : props.onOptionChange(vals, op);
-      }
-    })) : /*#__PURE__*/React.createElement(Options, _extends({}, optionProps, {
-      multiple: props.multiple,
-      selectedValue: value,
-      onOptionClick: props.onOptionClick,
-      onOptionChange: function onOptionChange(vals, op) {
-        setInnerValue(vals);
-        props.onOptionChange == null ? void 0 : props.onOptionChange(vals, op);
-      }
-    }));
-  }
-
-  return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref2) {
-    var prefixCls = _ref2.prefixCls;
-    return /*#__PURE__*/React.createElement("div", {
-      ref: dropdownContainer
-    }, /*#__PURE__*/React.createElement(Portal, {
-      getContainer: getPortalContainer
-    }, /*#__PURE__*/React.createElement(CSSTransition, {
-      in: showDropdown,
-      timeout: Math.max(dropdownAnimationTimeout, maskAnimationTimeout),
-      onEnter: function onEnter(el) {
-        el.style.visibility = 'visible';
-      },
-      onExited: function onExited(el) {
-        el.style.visibility = 'hidden';
-      },
-      mountOnEnter: mountOnEnter,
-      unmountOnExit: unmountOnExit
-    }, /*#__PURE__*/React.createElement("div", {
-      className: cls(prefixCls + "-dropdown all-border-box", system, className, {
-        'drop-up': !down
-      }),
-      ref: domRef,
-      style: _extends({
-        height: maskHeight.current + "px",
-        maxWidth: windowWidth + "px"
-      }, style, positionStyle)
-    }, /*#__PURE__*/React.createElement("div", {
-      className: cls(prefixCls + "-dropdown-options"),
-      ref: optionsWrapper,
-      style: getOptionsStyle()
-    }, /*#__PURE__*/React.createElement("div", {
-      className: cls(prefixCls + "-dropdown-options-container"),
-      ref: optionsContainer
-    }, props.children || renderInnerOptions(), props.extraNode)), showMask && /*#__PURE__*/React.createElement("div", {
-      className: cls(prefixCls + "-dropdown-mask", {
-        'is-show': optionsWrapperHeight
-      }),
-      style: {
-        transition: "opacity " + maskAnimationTimeout + "ms " + maskAnimationFunction
-      }
-    })))));
-  });
-});
+var Dropdown = componentGenerator(Options);
 /**
  * 下拉面板，展示供选择的选择项
  * @en Dropdown panel, showing options to choose from

package/esm/dropdown/options.js

@@ -5,6 +5,7 @@ import IconCheck from '../icon/IconCheck';
 var Options = /*#__PURE__*/forwardRef(function (props, ref) {
   var options = props.options,
       useColumn = props.useColumn,
+      icon = props.icon,
       selectedValue = props.selectedValue,
       defaultSelectedValue = props.defaultSelectedValue,
       multiple = props.multiple;
@@ -83,7 +84,7 @@ var Options = /*#__PURE__*/forwardRef(function (props, ref) {
         return handleOptionChange(e, op);
       },
       style: minWidthStyle
-    }, op.label, /*#__PURE__*/React.createElement(IconCheck, {
+    }, op.label, icon !== void 0 ? icon : /*#__PURE__*/React.createElement(IconCheck, {
       className: prefixCls + "-dropdown-options-item-icon"
     }));
   }), fakeOpts.map(function (_, i) {

package/esm/dropdown/style/css/index.css

@@ -47,6 +47,9 @@
 }
 .arco-dropdown-options-item-icon {
   position: absolute;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
   right:  0.32rem ;
   color: transparent;
 }

package/esm/dropdown/style/index.less

@@ -55,6 +55,8 @@
 
             &-icon {
                 position: absolute;
+                top: 50%;
+                transform: translateY(-50%);
                 .use-var(right, dropdown-options-item-icon-right);
                 color: transparent;
             }

package/esm/dropdown/type.d.ts

@@ -1,4 +1,5 @@
 import { CSSProperties, ReactNode } from 'react';
+export declare type OptionValueType = number | string;
 export interface OptionsItem {
     /**
      * 选项名称
@@ -9,7 +10,7 @@ export interface OptionsItem {
      * 选项标识
      * @en option value
      * */
-    value: number;
+    value: OptionValueType;
     /**
      * 选项是否可用，默认false表示可用
      * @en Whether the option is available, the default false means available
@@ -111,6 +112,11 @@ export interface DropdownCommonProps {
      * @default false
      */
     useColumn?: boolean | number;
+    /**
+     * 选项附带图标
+     * @en Icon in each option
+     */
+    optionIcon?: ReactNode;
     /**
      * 是否在打开下拉框时再加载内容
      * @en Whether to reload the content when the dropdown box is opened
@@ -177,29 +183,29 @@ export interface SingleOptionProps {
      * 默认选中值
      * @en Default checked value
      * */
-    defaultSelectedValue?: number;
+    defaultSelectedValue?: OptionValueType;
     /**
      * 当前选择的选项标识
      * @en The currently selected option value
      * */
-    selectedValue?: number;
+    selectedValue?: OptionValueType;
     /**
      * 点击选项时触发的回调函数
      * @en Callback when clicking option
      * */
-    onOptionClick?: (val: number, op: OptionsItem) => void;
+    onOptionClick?: (val: OptionValueType, op: OptionsItem) => void;
     /**
      * 当选项改变时触发的回调函数
      * @en Callback when the option changes
      *  */
-    onOptionChange?: (val: number, op: OptionsItem) => void;
+    onOptionChange?: (val: OptionValueType, op: OptionsItem) => void;
 }
 export interface MultipleOptionProps {
     multiple: true;
-    defaultSelectedValue?: number[];
-    selectedValue?: number[];
-    onOptionClick?: (selected: boolean, val: number, op: OptionsItem) => void;
-    onOptionChange?: (vals: number[], op: OptionsItem) => void;
+    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 {
@@ -247,6 +253,11 @@ export interface DropdownOptionsBasicProps {
      * @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 {

package/esm/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/esm/dropdown-menu/dropdown-menu.js

@@ -0,0 +1,256 @@
+import _extends from "@babel/runtime/helpers/extends";
+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 /*#__PURE__*/forwardRef(function (props, ref) {
+    var _props$className = props.className,
+        className = _props$className === void 0 ? '' : _props$className,
+        _props$style = props.style,
+        style = _props$style === void 0 ? {} : _props$style,
+        _props$options = props.options,
+        options = _props$options === void 0 ? [] : _props$options,
+        _props$disabled = props.disabled,
+        disabled = _props$disabled === void 0 ? [] : _props$disabled,
+        _props$selectTips = props.selectTips,
+        selectTips = _props$selectTips === void 0 ? [] : _props$selectTips,
+        values = props.values,
+        _props$defaultValues = props.defaultValues,
+        defaultValues = _props$defaultValues === void 0 ? [] : _props$defaultValues,
+        icon = props.icon,
+        _props$chooseAndClose = props.chooseAndClose,
+        chooseAndClose = _props$chooseAndClose === void 0 ? true : _props$chooseAndClose,
+        selectIndex = props.selectIndex,
+        _props$defaultSelectI = props.defaultSelectIndex,
+        defaultSelectIndex = _props$defaultSelectI === void 0 ? 0 : _props$defaultSelectI,
+        showDropdown = props.showDropdown,
+        _props$defaultShowDro = props.defaultShowDropdown,
+        defaultShowDropdown = _props$defaultShowDro === void 0 ? false : _props$defaultShowDro,
+        onValuesChange = props.onValuesChange,
+        onSelectChange = props.onSelectChange,
+        onDropdownChange = props.onDropdownChange,
+        _props$getFormattedOp = props.getFormattedOptions,
+        getFormattedOptions = _props$getFormattedOp === void 0 ? defaultFormatFunc : _props$getFormattedOp,
+        getContainer = props.getContainer,
+        children = props.children,
+        extraForDropdown = props.extraForDropdown;
+
+    var _useContext = useContext(GlobalContext),
+        prefixCls = _useContext.prefixCls,
+        locale = _useContext.locale;
+
+    var _useState = useState(defaultValues),
+        innerValues = _useState[0],
+        setInnerValues = _useState[1];
+
+    var _useState2 = useState(0),
+        defaultTop = _useState2[0],
+        setDefaultTop = _useState2[1];
+
+    var currentValues = values !== void 0 ? values : innerValues;
+
+    var _useState3 = useState(defaultShowDropdown),
+        innerShowDropdown = _useState3[0],
+        setInnerShowDropdown = _useState3[1];
+
+    var dropdownShown = showDropdown !== void 0 ? showDropdown : innerShowDropdown;
+
+    var _useState4 = useState(defaultSelectIndex),
+        innerSelectedIndex = _useState4[0],
+        setInnerSelectedIndex = _useState4[1];
+
+    var selectedIndex = selectIndex !== void 0 ? selectIndex : innerSelectedIndex;
+    var selectWrapper = useRef(null);
+    var domRef = useRef(null);
+    var defaultOpItem = {
+      label: locale == null ? void 0 : locale.DropdownMenu.select,
+      value: -1
+    };
+    /**
+     * 更新选项数组和选择情况
+     * @en Update options list and selection
+     */
+
+    var _useMemo = useMemo(function () {
+      return getFormattedOptions(options, currentValues);
+    }, [options, currentValues]),
+        formattedOptions = _useMemo.formattedOptions;
+
+    var selectedOptions = useMemo(function () {
+      return formattedOptions.map(function (ops, index) {
+        if (props.multiple) {
+          var _value = currentValues[index] || [];
+
+          var opItems = ops.reduce(function (acc, op) {
+            return [].concat(acc, _value.includes(op.value) ? [op] : []);
+          }, []);
+          return opItems.length ? opItems : [defaultOpItem];
+        }
+
+        var value = currentValues[index];
+        return ops.find(function (op) {
+          return op.value === value;
+        }) || ops[0];
+      });
+    }, [formattedOptions, currentValues, props.multiple]);
+    /**
+     * 当下拉框的状态变化
+     * @en When the state of the dropdown box changes
+     */
+
+    var handleShowDropdownChange = function handleShowDropdownChange(show, index) {
+      onDropdownChange && onDropdownChange(show, index);
+      setInnerShowDropdown(show);
+    };
+
+    var handleSelectedIndexChange = function handleSelectedIndexChange(idx) {
+      setInnerSelectedIndex(idx);
+      onSelectChange == null ? void 0 : onSelectChange(idx);
+    };
+
+    var handleValuesChange = function handleValuesChange(val) {
+      var newValue = [].concat(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 == null ? void 0 : onValuesChange(newValue);
+    };
+    /**
+     * 处理选择框的点击事件
+     * @en Handle click event of dropdown box
+     */
+
+
+    var handleSelectClick = function 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
+     */
+
+
+    var isCurrentSelectEl = function isCurrentSelectEl(target) {
+      var _ref = extraForDropdown || {},
+          isStopTouchEl = _ref.isStopTouchEl;
+
+      return isRefDom(target, selectWrapper) && isClassNameDom(target, 'select-item') || (isStopTouchEl == null ? void 0 : isStopTouchEl(target)) || false;
+    };
+
+    useImperativeHandle(ref, function () {
+      return {
+        dom: domRef.current
+      };
+    });
+    useEffect(function () {
+      var defaultContainer = selectWrapper.current;
+      var container = getContainer ? getContainer() || defaultContainer : defaultContainer;
+      setDefaultTop((container == null ? void 0 : container.getBoundingClientRect().bottom) || 0);
+    }, [getContainer, dropdownShown]);
+
+    var onCancel = props.onCancel || function () {
+      return handleShowDropdownChange(false);
+    };
+
+    var dropdownCommonProps = _extends({
+      showDropdown: dropdownShown,
+      top: (extraForDropdown == null ? void 0 : extraForDropdown.top) || defaultTop,
+      onCancel: onCancel
+    }, extraForDropdown || {}, {
+      isStopTouchEl: isCurrentSelectEl
+    });
+
+    var renderSelectedLabel = function renderSelectedLabel(op, index) {
+      if (props.multiple === true) {
+        var multipleOp = op || [];
+        return props.renderSelectLabel ? props.renderSelectLabel(multipleOp, index) : /*#__PURE__*/React.createElement("div", {
+          className: cls(prefixCls + "-select-item-label-text")
+        }, multipleOp.map(function (item) {
+          return item.label;
+        }).join(','));
+      }
+
+      var singleOp = op || [];
+      return props.renderSelectLabel ? props.renderSelectLabel(singleOp, index) : /*#__PURE__*/React.createElement("div", {
+        className: cls(prefixCls + "-select-item-label-text")
+      }, singleOp.label);
+    };
+
+    return /*#__PURE__*/React.createElement("div", {
+      ref: domRef,
+      className: cls(prefixCls + "-dropdown-menu all-border-box", className, {
+        show: dropdownShown
+      }),
+      style: style
+    }, /*#__PURE__*/React.createElement("div", {
+      className: cls(prefixCls + "-select"),
+      ref: selectWrapper
+    }, selectedOptions.map(function (op, index) {
+      var tip = selectTips[index] || '';
+      return /*#__PURE__*/React.createElement("div", {
+        className: cls(prefixCls + "-select-item", {
+          'is-disabled': disabled[index],
+          'is-selected': dropdownShown && selectedIndex === index
+        }),
+        key: index,
+        "data-idx": index,
+        onClick: function onClick() {
+          return handleSelectClick(index);
+        }
+      }, tip.length > 0 && /*#__PURE__*/React.createElement("span", {
+        className: cls(prefixCls + "-select-item-tip")
+      }, tip), /*#__PURE__*/React.createElement("div", {
+        className: cls(prefixCls + "-select-item-label")
+      }, renderSelectedLabel(op, index), icon === void 0 ? /*#__PURE__*/React.createElement(IconTriDown, {
+        className: cls(prefixCls + "-select-item-icon", {
+          'is-show': dropdownShown && selectedIndex === index
+        })
+      }) : icon));
+    }), props.multiple === true ? /*#__PURE__*/React.createElement(Comp, _extends({
+      multiple: true,
+      options: formattedOptions[selectedIndex] || [],
+      selectedValue: currentValues[selectedIndex] || [],
+      onOptionClick: function onOptionClick(selected, val, op) {
+        props.onOptionClick == null ? void 0 : props.onOptionClick(selected, val, op, selectedIndex);
+      },
+      onOptionChange: function onOptionChange(val, op) {
+        props.onOptionChange == null ? void 0 : props.onOptionChange(val, op, selectedIndex);
+        handleValuesChange(val);
+      }
+    }, dropdownCommonProps, {
+      children: children
+    })) : /*#__PURE__*/React.createElement(Comp, _extends({
+      multiple: props.multiple,
+      options: formattedOptions[selectedIndex] || [],
+      selectedValue: currentValues[selectedIndex] || 0,
+      onOptionClick: function onOptionClick(val, op) {
+        props.onOptionClick == null ? void 0 : props.onOptionClick(val, op, selectedIndex);
+
+        if (chooseAndClose) {
+          handleShowDropdownChange(false, selectedIndex);
+        }
+      },
+      onOptionChange: function onOptionChange(val, op) {
+        props.onOptionChange == null ? void 0 : props.onOptionChange(val, op, selectedIndex);
+        handleValuesChange(val);
+      }
+    }, dropdownCommonProps, {
+      children: children
+    }))));
+  });
+}

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

@@ -25,7 +25,7 @@ export declare function isString(icon: string | ReactNode): icon is string;
  * */
 export declare const getFormattedOptions: (options: OptionsItem[][] | string[] | CascadeOptions[], currentValues: ValueType) => {
     formattedOptions: OptionsItem[][];
-    formattedValue: (number | number[])[];
+    formattedValue: (string | number | (string | number)[])[];
 };
 /**
  * 判断是否为指定ref内的元素