@arco-design/mobile-react 2.19.2-ee92494.5 → 2.20.0

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

@@ -0,0 +1,278 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "@babel/runtime/helpers/extends", "react", "@arco-design/mobile-utils", "../context-provider", "./helper", "../icon/IconTriDown"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("@babel/runtime/helpers/extends"), require("react"), require("@arco-design/mobile-utils"), require("../context-provider"), require("./helper"), require("../icon/IconTriDown"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global._extends, global.react, global.mobileUtils, global.contextProvider, global.helper, global.IconTriDown);
+    global.dropdownMenu = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _extends2, _react, _mobileUtils, _contextProvider, _helper, _IconTriDown) {
+  "use strict";
+
+  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+  _exports.__esModule = true;
+  _exports.componentGenerator = componentGenerator;
+  _extends2 = _interopRequireDefault(_extends2);
+  _react = _interopRequireWildcard(_react);
+  _IconTriDown = _interopRequireDefault(_IconTriDown);
+
+  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+  function componentGenerator(Comp) {
+    return /*#__PURE__*/(0, _react.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 ? _helper.getFormattedOptions : _props$getFormattedOp,
+          getContainer = props.getContainer,
+          children = props.children,
+          extraForDropdown = props.extraForDropdown;
+
+      var _useContext = (0, _react.useContext)(_contextProvider.GlobalContext),
+          prefixCls = _useContext.prefixCls,
+          locale = _useContext.locale;
+
+      var _useState = (0, _react.useState)(defaultValues),
+          innerValues = _useState[0],
+          setInnerValues = _useState[1];
+
+      var _useState2 = (0, _react.useState)(0),
+          defaultTop = _useState2[0],
+          setDefaultTop = _useState2[1];
+
+      var currentValues = values !== void 0 ? values : innerValues;
+
+      var _useState3 = (0, _react.useState)(defaultShowDropdown),
+          innerShowDropdown = _useState3[0],
+          setInnerShowDropdown = _useState3[1];
+
+      var dropdownShown = showDropdown !== void 0 ? showDropdown : innerShowDropdown;
+
+      var _useState4 = (0, _react.useState)(defaultSelectIndex),
+          innerSelectedIndex = _useState4[0],
+          setInnerSelectedIndex = _useState4[1];
+
+      var selectedIndex = selectIndex !== void 0 ? selectIndex : innerSelectedIndex;
+      var selectWrapper = (0, _react.useRef)(null);
+      var domRef = (0, _react.useRef)(null);
+      var defaultOpItem = {
+        label: locale == null ? void 0 : locale.DropdownMenu.select,
+        value: -1
+      };
+      /**
+       * 更新选项数组和选择情况
+       * @en Update options list and selection
+       */
+
+      var _useMemo = (0, _react.useMemo)(function () {
+        return getFormattedOptions(options, currentValues);
+      }, [options, currentValues]),
+          formattedOptions = _useMemo.formattedOptions;
+
+      var selectedOptions = (0, _react.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 ((0, _helper.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 (0, _helper.isRefDom)(target, selectWrapper) && (0, _helper.isClassNameDom)(target, 'select-item') || (isStopTouchEl == null ? void 0 : isStopTouchEl(target)) || false;
+      };
+
+      (0, _react.useImperativeHandle)(ref, function () {
+        return {
+          dom: domRef.current
+        };
+      });
+      (0, _react.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 = (0, _extends2.default)({
+        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.default.createElement("div", {
+            className: (0, _mobileUtils.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.default.createElement("div", {
+          className: (0, _mobileUtils.cls)(prefixCls + "-select-item-label-text")
+        }, singleOp.label);
+      };
+
+      return /*#__PURE__*/_react.default.createElement("div", {
+        ref: domRef,
+        className: (0, _mobileUtils.cls)(prefixCls + "-dropdown-menu all-border-box", className, {
+          show: dropdownShown
+        }),
+        style: style
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _mobileUtils.cls)(prefixCls + "-select"),
+        ref: selectWrapper
+      }, selectedOptions.map(function (op, index) {
+        var tip = selectTips[index] || '';
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: (0, _mobileUtils.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.default.createElement("span", {
+          className: (0, _mobileUtils.cls)(prefixCls + "-select-item-tip")
+        }, tip), /*#__PURE__*/_react.default.createElement("div", {
+          className: (0, _mobileUtils.cls)(prefixCls + "-select-item-label")
+        }, renderSelectedLabel(op, index), icon === void 0 ? /*#__PURE__*/_react.default.createElement(_IconTriDown.default, {
+          className: (0, _mobileUtils.cls)(prefixCls + "-select-item-icon", {
+            'is-show': dropdownShown && selectedIndex === index
+          })
+        }) : icon));
+      }), props.multiple === true ? /*#__PURE__*/_react.default.createElement(Comp, (0, _extends2.default)({
+        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.default.createElement(Comp, (0, _extends2.default)({
+        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/umd/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内的元素

package/umd/dropdown-menu/index.d.ts

@@ -1,5 +1,4 @@
-import React from 'react';
-import { DropdownMenuRef } from './type';
+/// <reference types="react" />
 export * from './type';
 /**
  * 下拉选择组件，点击选择器(select)展开下拉框(dropdown)，展示选择项(options)，兼容多个选择器的情况。
@@ -9,5 +8,5 @@ export * from './type';
  * @name 下拉选择菜单
  * @name_en DropdownMenu
  */
-declare const DropdownMenu: React.ForwardRefExoticComponent<(import("./type").DropdownMenuBasicProps & import("./type").SingleOptionProps & React.RefAttributes<DropdownMenuRef>) | (import("./type").DropdownMenuBasicProps & import("./type").MultipleOptionProps & React.RefAttributes<DropdownMenuRef>)>;
+declare const DropdownMenu: import("react").ForwardRefExoticComponent<(import("./type").DropdownMenuBasicProps & import("./type").SingleOptionProps & import("react").RefAttributes<import("./type").DropdownMenuRef>) | (import("./type").DropdownMenuBasicProps & import("./type").MultipleOptionProps & import("react").RefAttributes<import("./type").DropdownMenuRef>)>;
 export default DropdownMenu;

package/umd/dropdown-menu/index.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "@babel/runtime/helpers/extends", "react", "@arco-design/mobile-utils", "../context-provider", "./helper", "../dropdown", "../icon/IconTriDown", "./type"], factory);
+    define(["exports", "./dropdown-menu", "../dropdown", "./type"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("@babel/runtime/helpers/extends"), require("react"), require("@arco-design/mobile-utils"), require("../context-provider"), require("./helper"), require("../dropdown"), require("../icon/IconTriDown"), require("./type"));
+    factory(exports, require("./dropdown-menu"), require("../dropdown"), require("./type"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global._extends, global.react, global.mobileUtils, global.contextProvider, global.helper, global.dropdown, global.IconTriDown, global.type);
+    factory(mod.exports, global.dropdownMenu, global.dropdown, global.type);
     global.index = mod.exports;
   }
-})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _extends2, _react, _mobileUtils, _contextProvider, _helper, _dropdown, _IconTriDown, _type) {
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _dropdownMenu, _dropdown, _type) {
   "use strict";
 
   var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -18,10 +18,7 @@
   _exports.__esModule = true;
   var _exportNames = {};
   _exports.default = void 0;
-  _extends2 = _interopRequireDefault(_extends2);
-  _react = _interopRequireWildcard(_react);
   _dropdown = _interopRequireDefault(_dropdown);
-  _IconTriDown = _interopRequireDefault(_IconTriDown);
   Object.keys(_type).forEach(function (key) {
     if (key === "default" || key === "__esModule") return;
     if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
@@ -29,10 +26,6 @@
     _exports[key] = _type[key];
   });
 
-  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
   /**
    * 下拉选择组件，点击选择器(select)展开下拉框(dropdown)，展示选择项(options)，兼容多个选择器的情况。
    * @en Dropdown component, click the selector (select) to expand the dropdown box (dropdown), display the options (options), compatible with multiple selectors.
@@ -41,236 +34,7 @@
    * @name 下拉选择菜单
    * @name_en DropdownMenu
    */
-  var DropdownMenu = /*#__PURE__*/(0, _react.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,
-        renderSelectLabel = props.renderSelectLabel,
-        onValuesChange = props.onValuesChange,
-        onSelectChange = props.onSelectChange,
-        onDropdownChange = props.onDropdownChange,
-        _props$getFormattedOp = props.getFormattedOptions,
-        getFormattedOptions = _props$getFormattedOp === void 0 ? _helper.getFormattedOptions : _props$getFormattedOp,
-        children = props.children,
-        extraForDropdown = props.extraForDropdown;
-
-    var _useContext = (0, _react.useContext)(_contextProvider.GlobalContext),
-        prefixCls = _useContext.prefixCls,
-        locale = _useContext.locale;
-
-    var _useState = (0, _react.useState)(defaultValues),
-        innerValues = _useState[0],
-        setInnerValues = _useState[1];
-
-    var _useState2 = (0, _react.useState)(0),
-        defaultTop = _useState2[0],
-        setDefaultTop = _useState2[1];
-
-    var currentValues = values !== void 0 ? values : innerValues;
-
-    var _useState3 = (0, _react.useState)(defaultShowDropdown),
-        innerShowDropdown = _useState3[0],
-        setInnerShowDropdown = _useState3[1];
-
-    var dropdownShown = showDropdown !== void 0 ? showDropdown : innerShowDropdown;
-
-    var _useState4 = (0, _react.useState)(defaultSelectIndex),
-        innerSelectedIndex = _useState4[0],
-        setInnerSelectedIndex = _useState4[1];
-
-    var selectedIndex = selectIndex !== void 0 ? selectIndex : innerSelectedIndex;
-    var selectWrapper = (0, _react.useRef)(null);
-    var domRef = (0, _react.useRef)(null);
-    var defaultOpItem = {
-      label: locale == null ? void 0 : locale.DropdownMenu.select,
-      value: -1
-    };
-    /**
-     * 下拉框的容器
-     * @en Dropdown container
-     */
-
-    var getContainer = (0, _react.useCallback)(function () {
-      if (props.getContainer) {
-        return props.getContainer() || selectWrapper.current;
-      }
-
-      return selectWrapper.current;
-    }, [selectWrapper.current]);
-    /**
-     * 更新选项数组和选择情况
-     * @en Update options list and selection
-     */
-
-    var _useMemo = (0, _react.useMemo)(function () {
-      return getFormattedOptions(options, currentValues);
-    }, [options, currentValues]),
-        formattedOptions = _useMemo.formattedOptions;
-
-    var selectedOptions = (0, _react.useMemo)(function () {
-      return formattedOptions.map(function (ops, index) {
-        return ops.find(function (op) {
-          var value = currentValues[index];
-          return Array.isArray(value) ? value.includes(op.value) : op.value === value;
-        }) || (props.multiple ? defaultOpItem : ops[0]);
-      });
-    }, [formattedOptions, currentValues]);
-    /**
-     * 当下拉框的状态变化
-     * @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 ((0, _helper.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 (0, _helper.isRefDom)(target, selectWrapper) && (0, _helper.isClassNameDom)(target, 'select-item') || (isStopTouchEl == null ? void 0 : isStopTouchEl(target)) || false;
-    };
-
-    (0, _react.useImperativeHandle)(ref, function () {
-      return {
-        dom: domRef.current
-      };
-    });
-    (0, _react.useEffect)(function () {
-      var _getContainer;
-
-      setDefaultTop(((_getContainer = getContainer()) == null ? void 0 : _getContainer.getBoundingClientRect().bottom) || 0);
-    }, [getContainer, dropdownShown]);
-
-    var onCancel = props.onCancel || function () {
-      return handleShowDropdownChange(false);
-    };
-
-    var dropdownCommonProps = (0, _extends2.default)({
-      showDropdown: dropdownShown,
-      top: (extraForDropdown == null ? void 0 : extraForDropdown.top) || defaultTop,
-      onCancel: onCancel
-    }, extraForDropdown || {}, {
-      isStopTouchEl: isCurrentSelectEl
-    });
-    return /*#__PURE__*/_react.default.createElement("div", {
-      ref: domRef,
-      className: (0, _mobileUtils.cls)(prefixCls + "-dropdown-menu all-border-box " + (dropdownShown ? 'show' : ''), className),
-      style: style
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _mobileUtils.cls)(prefixCls + "-select"),
-      ref: selectWrapper
-    }, selectedOptions.map(function (op, index) {
-      var tip = selectTips[index] || '';
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _mobileUtils.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.default.createElement("span", {
-        className: (0, _mobileUtils.cls)(prefixCls + "-select-item-tip")
-      }, tip), /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _mobileUtils.cls)(prefixCls + "-select-item-label")
-      }, renderSelectLabel ? renderSelectLabel(op, index) : /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _mobileUtils.cls)(prefixCls + "-select-item-label-text")
-      }, op.label), icon === void 0 ? /*#__PURE__*/_react.default.createElement(_IconTriDown.default, {
-        className: (0, _mobileUtils.cls)(prefixCls + "-select-item-icon", {
-          'is-show': dropdownShown && selectedIndex === index
-        })
-      }) : icon));
-    }), props.multiple === true ? /*#__PURE__*/_react.default.createElement(_dropdown.default, (0, _extends2.default)({
-      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) : /*#__PURE__*/_react.default.createElement(_dropdown.default, (0, _extends2.default)({
-      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)));
-  });
+  var DropdownMenu = (0, _dropdownMenu.componentGenerator)(_dropdown.default);
   var _default = DropdownMenu;
   _exports.default = _default;
 });