@arco-design/mobile-react 2.19.1-941e02b.7 → 2.20.0

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

@@ -0,0 +1,273 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.componentGenerator = componentGenerator;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _mobileUtils = require("@arco-design/mobile-utils");
+
+var _contextProvider = require("../context-provider");
+
+var _helper = require("./helper");
+
+var _IconTriDown = _interopRequireDefault(require("../icon/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/cjs/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/cjs/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/cjs/dropdown-menu/index.js

@@ -6,20 +6,10 @@ exports.__esModule = true;
 var _exportNames = {};
 exports.default = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _mobileUtils = require("@arco-design/mobile-utils");
-
-var _contextProvider = require("../context-provider");
-
-var _helper = require("./helper");
+var _dropdownMenu = require("./dropdown-menu");
 
 var _dropdown = _interopRequireDefault(require("../dropdown"));
 
-var _IconTriDown = _interopRequireDefault(require("../icon/IconTriDown"));
-
 var _type = require("./type");
 
 Object.keys(_type).forEach(function (key) {
@@ -29,10 +19,6 @@ Object.keys(_type).forEach(function (key) {
   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,235 +27,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * @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;