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

package/umd/dropdown/dropdown.js

@@ -0,0 +1,309 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "@babel/runtime/helpers/extends", "react", "@arco-design/mobile-utils", "react-transition-group", "../context-provider", "../_helpers", "../portal"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("@babel/runtime/helpers/extends"), require("react"), require("@arco-design/mobile-utils"), require("react-transition-group"), require("../context-provider"), require("../_helpers"), require("../portal"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global._extends, global.react, global.mobileUtils, global.reactTransitionGroup, global.contextProvider, global._helpers, global.portal);
+    global.dropdown = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _extends2, _react, _mobileUtils, _reactTransitionGroup, _contextProvider, _helpers, _portal) {
+  "use strict";
+
+  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+  _exports.__esModule = true;
+  _exports.componentGenerator = componentGenerator;
+  _extends2 = _interopRequireDefault(_extends2);
+  _react = _interopRequireWildcard(_react);
+  _portal = _interopRequireDefault(_portal);
+
+  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 optionsWrapper = (0, _react.useRef)(null);
+      var domRef = (0, _react.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,
+          optionIcon = props.optionIcon,
+          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 = (0, _helpers.useSystem)();
+
+      var _useWindowSize = (0, _helpers.useWindowSize)(),
+          windowHeight = _useWindowSize.windowHeight,
+          windowWidth = _useWindowSize.windowWidth;
+
+      var _useState = (0, _react.useState)({
+        top: '',
+        bottom: ''
+      }),
+          positionStyle = _useState[0],
+          setPositionStyle = _useState[1];
+
+      var _useState2 = (0, _react.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 = (0, _react.useState)(direction === 'down'),
+          down = _useState3[0],
+          setDown = _useState3[1];
+
+      var maskHeight = (0, _react.useRef)(0);
+      var optionsContainer = (0, _react.useRef)(null);
+      var dropdownContainer = (0, _react.useRef)(null);
+
+      var _useState4 = (0, _react.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;
+      };
+
+      (0, _helpers.usePopupScroll)(showDropdown, domRef.current, getScrollContainer);
+      (0, _helpers.usePreventBodyScroll)(showDropdown, preventBodyScroll, initialBodyOverflow);
+      (0, _react.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 = (0, _react.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
+       * */
+
+      (0, _react.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]);
+      (0, _react.useEffect)(function () {
+        (0, _mobileUtils.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]);
+      (0, _react.useImperativeHandle)(ref, function () {
+        return {
+          dom: domRef.current
+        };
+      });
+
+      function getOptionsStyle() {
+        var trans = down ? 'translateY(-100%)' : 'translateY(100%)';
+        return (0, _helpers.getStyleWithVendor)({
+          // height: `${optionsWrapperHeight}px`,
+          transform: optionsWrapperHeight ? '' : trans,
+          transition: "transform " + dropdownAnimationTimeout + "ms " + dropdownAnimationFunction,
+          overflow: optionsWrapperHeight > maxHeight || height ? 'auto' : 'hidden',
+          maxHeight: maxHeight + "px"
+        });
+      }
+
+      function renderInnerOptions() {
+        var value = props.selectedValue !== void 0 ? props.selectedValue : innerValue;
+        var optionProps = {
+          options: options,
+          useColumn: useColumn,
+          icon: optionIcon,
+          selectedValue: value,
+          multiple: props.multiple,
+          onOptionClick: props.onOptionClick,
+          onOptionChange: function onOptionChange(vals, op) {
+            setInnerValue(vals);
+            props.onOptionChange == null ? void 0 : props.onOptionChange(vals, op);
+          }
+        };
+        return /*#__PURE__*/_react.default.createElement(Comp, optionProps);
+      }
+
+      return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref2) {
+        var prefixCls = _ref2.prefixCls;
+        return /*#__PURE__*/_react.default.createElement("div", {
+          ref: dropdownContainer
+        }, /*#__PURE__*/_react.default.createElement(_portal.default, {
+          getContainer: getPortalContainer
+        }, /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.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.default.createElement("div", {
+          className: (0, _mobileUtils.cls)(prefixCls + "-dropdown all-border-box", system, className, {
+            'drop-up': !down
+          }),
+          ref: domRef,
+          style: (0, _extends2.default)({
+            height: maskHeight.current + "px",
+            maxWidth: windowWidth + "px"
+          }, style, positionStyle)
+        }, /*#__PURE__*/_react.default.createElement("div", {
+          className: (0, _mobileUtils.cls)(prefixCls + "-dropdown-options"),
+          ref: optionsWrapper,
+          style: getOptionsStyle()
+        }, /*#__PURE__*/_react.default.createElement("div", {
+          className: (0, _mobileUtils.cls)(prefixCls + "-dropdown-options-container"),
+          ref: optionsContainer
+        }, props.children || renderInnerOptions(), props.extraNode)), showMask && /*#__PURE__*/_react.default.createElement("div", {
+          className: (0, _mobileUtils.cls)(prefixCls + "-dropdown-mask", {
+            'is-show': optionsWrapperHeight
+          }),
+          style: {
+            transition: "opacity " + maskAnimationTimeout + "ms " + maskAnimationFunction
+          }
+        })))));
+      });
+    });
+  }
+});

package/umd/dropdown/index.d.ts

@@ -1,8 +1,7 @@
-import React from 'react';
-import { DropdownRef } from './type';
+/// <reference types="react" />
 export * from './type';
-declare const _default: React.ForwardRefExoticComponent<(import("./type").DropdownBasicProps & import("./type").SingleOptionProps & React.RefAttributes<DropdownRef>) | (import("./type").DropdownBasicProps & import("./type").MultipleOptionProps & React.RefAttributes<DropdownRef>)> & {
-    Options: React.ForwardRefExoticComponent<(import("./type").DropdownOptionsBasicProps & import("./type").SingleOptionProps & React.RefAttributes<import("./type").DropdownOptionsRef>) | (import("./type").DropdownOptionsBasicProps & import("./type").MultipleOptionProps & React.RefAttributes<import("./type").DropdownOptionsRef>)>;
+declare const _default: import("react").ForwardRefExoticComponent<(import("./type").DropdownBasicProps & import("./type").SingleOptionProps & import("react").RefAttributes<import("./type").DropdownRef>) | (import("./type").DropdownBasicProps & import("./type").MultipleOptionProps & import("react").RefAttributes<import("./type").DropdownRef>)> & {
+    Options: import("react").ForwardRefExoticComponent<(import("./type").DropdownOptionsBasicProps & import("./type").SingleOptionProps & import("react").RefAttributes<import("./type").DropdownOptionsRef>) | (import("./type").DropdownOptionsBasicProps & import("./type").MultipleOptionProps & import("react").RefAttributes<import("./type").DropdownOptionsRef>)>;
 };
 /**
  * 下拉面板，展示供选择的选择项

package/umd/dropdown/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", "react-transition-group", "../context-provider", "../_helpers", "../portal", "./options", "./type"], factory);
+    define(["exports", "@arco-design/mobile-utils", "./options", "./dropdown", "./type"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("@babel/runtime/helpers/extends"), require("react"), require("@arco-design/mobile-utils"), require("react-transition-group"), require("../context-provider"), require("../_helpers"), require("../portal"), require("./options"), require("./type"));
+    factory(exports, require("@arco-design/mobile-utils"), require("./options"), require("./dropdown"), require("./type"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global._extends, global.react, global.mobileUtils, global.reactTransitionGroup, global.contextProvider, global._helpers, global.portal, global.options, global.type);
+    factory(mod.exports, global.mobileUtils, global.options, global.dropdown, global.type);
     global.index = mod.exports;
   }
-})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _extends2, _react, _mobileUtils, _reactTransitionGroup, _contextProvider, _helpers, _portal, _options, _type) {
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _mobileUtils, _options, _dropdown, _type) {
   "use strict";
 
   var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -18,9 +18,6 @@
   _exports.__esModule = true;
   var _exportNames = {};
   _exports.default = void 0;
-  _extends2 = _interopRequireDefault(_extends2);
-  _react = _interopRequireWildcard(_react);
-  _portal = _interopRequireDefault(_portal);
   _options = _interopRequireDefault(_options);
   Object.keys(_type).forEach(function (key) {
     if (key === "default" || key === "__esModule") return;
@@ -28,297 +25,7 @@
     if (key in _exports && _exports[key] === _type[key]) return;
     _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; }
-
-  var Dropdown = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-    var optionsWrapper = (0, _react.useRef)(null);
-    var domRef = (0, _react.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 = (0, _helpers.useSystem)();
-
-    var _useWindowSize = (0, _helpers.useWindowSize)(),
-        windowHeight = _useWindowSize.windowHeight,
-        windowWidth = _useWindowSize.windowWidth;
-
-    var _useState = (0, _react.useState)({
-      top: '',
-      bottom: ''
-    }),
-        positionStyle = _useState[0],
-        setPositionStyle = _useState[1];
-
-    var _useState2 = (0, _react.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 = (0, _react.useState)(direction === 'down'),
-        down = _useState3[0],
-        setDown = _useState3[1];
-
-    var maskHeight = (0, _react.useRef)(0);
-    var optionsContainer = (0, _react.useRef)(null);
-    var dropdownContainer = (0, _react.useRef)(null);
-
-    var _useState4 = (0, _react.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;
-    };
-
-    (0, _helpers.usePopupScroll)(showDropdown, domRef.current, getScrollContainer);
-    (0, _helpers.usePreventBodyScroll)(showDropdown, preventBodyScroll, initialBodyOverflow);
-    (0, _react.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 = (0, _react.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
-     * */
-
-    (0, _react.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]);
-    (0, _react.useEffect)(function () {
-      (0, _mobileUtils.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]);
-    (0, _react.useImperativeHandle)(ref, function () {
-      return {
-        dom: domRef.current
-      };
-    });
-
-    function getOptionsStyle() {
-      var trans = down ? 'translateY(-100%)' : 'translateY(100%)';
-      return (0, _helpers.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.default.createElement(_options.default, (0, _extends2.default)({}, 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.default.createElement(_options.default, (0, _extends2.default)({}, 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.default.createElement(_contextProvider.ContextLayout, null, function (_ref2) {
-      var prefixCls = _ref2.prefixCls;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        ref: dropdownContainer
-      }, /*#__PURE__*/_react.default.createElement(_portal.default, {
-        getContainer: getPortalContainer
-      }, /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.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.default.createElement("div", {
-        className: (0, _mobileUtils.cls)(prefixCls + "-dropdown all-border-box", system, className, {
-          'drop-up': !down
-        }),
-        ref: domRef,
-        style: (0, _extends2.default)({
-          height: maskHeight.current + "px",
-          maxWidth: windowWidth + "px"
-        }, style, positionStyle)
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _mobileUtils.cls)(prefixCls + "-dropdown-options"),
-        ref: optionsWrapper,
-        style: getOptionsStyle()
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _mobileUtils.cls)(prefixCls + "-dropdown-options-container"),
-        ref: optionsContainer
-      }, props.children || renderInnerOptions(), props.extraNode)), showMask && /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _mobileUtils.cls)(prefixCls + "-dropdown-mask", {
-          'is-show': optionsWrapperHeight
-        }),
-        style: {
-          transition: "opacity " + maskAnimationTimeout + "ms " + maskAnimationFunction
-        }
-      })))));
-    });
-  });
+  var Dropdown = (0, _dropdown.componentGenerator)(_options.default);
   /**
    * 下拉面板，展示供选择的选择项
    * @en Dropdown panel, showing options to choose from

package/umd/dropdown/options.js

@@ -27,6 +27,7 @@
   var Options = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     var options = props.options,
         useColumn = props.useColumn,
+        icon = props.icon,
         selectedValue = props.selectedValue,
         defaultSelectedValue = props.defaultSelectedValue,
         multiple = props.multiple;
@@ -105,7 +106,7 @@
           return handleOptionChange(e, op);
         },
         style: minWidthStyle
-      }, op.label, /*#__PURE__*/_react.default.createElement(_IconCheck.default, {
+      }, op.label, icon !== void 0 ? icon : /*#__PURE__*/_react.default.createElement(_IconCheck.default, {
         className: prefixCls + "-dropdown-options-item-icon"
       }));
     }), fakeOpts.map(function (_, i) {