@arco-design/mobile-react 2.19.1 → 2.21.0

package/cjs/cell/index.d.ts

@@ -6,7 +6,7 @@ declare const _default: import("react").ForwardRefExoticComponent<import("./type
 /**
  * 单元格组件，含单元格及单元格组合，常用于设置项、表单等。
  * @en Cell, including cells and cell group, are often used to set items, forms, etc.
- * @type 数据展示
+ * @type 信息展示
  * @type_en Data Display
  * @name 单元格
  * @name_en Cell

package/cjs/cell/index.js

@@ -22,7 +22,7 @@ var Group = (0, _group.componentGenerator)(_cell.Cell);
 /**
  * 单元格组件，含单元格及单元格组合，常用于设置项、表单等。
  * @en Cell, including cells and cell group, are often used to set items, forms, etc.
- * @type 数据展示
+ * @type 信息展示
  * @type_en Data Display
  * @name 单元格
  * @name_en Cell

package/cjs/checkbox/index.d.ts

@@ -8,7 +8,7 @@ declare const _default: import("react").ForwardRefExoticComponent<import("./type
  * @en Checkbox, click to switch selection when available, support disabled status, support checkbox group.
  * @name 复选框
  * @name_en Checkbox
- * @type 数据输入
+ * @type 数据录入
  * @type_en Data Entry
  */
 export default _default;

package/cjs/checkbox/index.js

@@ -29,7 +29,7 @@ var Group = (0, _group.componentGenerator)(_checkbox.Checkbox);
  * @en Checkbox, click to switch selection when available, support disabled status, support checkbox group.
  * @name 复选框
  * @name_en Checkbox
- * @type 数据输入
+ * @type 数据录入
  * @type_en Data Entry
  */
 

package/cjs/collapse/index.d.ts

@@ -15,7 +15,7 @@ declare const _default: import("react").ForwardRefExoticComponent<import("./type
 /**
  * 折叠面板组件，支持手风琴模式。
  * @en Collapse supports accordion mode.
- * @type 数据展示
+ * @type 信息展示
  * @type_en Data Display
  * @name 折叠面板
  * @name_en Collapse

package/cjs/collapse/index.js

@@ -31,7 +31,7 @@ Object.keys(_type).forEach(function (key) {
 /**
  * 折叠面板组件，支持手风琴模式。
  * @en Collapse supports accordion mode.
- * @type 数据展示
+ * @type 信息展示
  * @type_en Data Display
  * @name 折叠面板
  * @name_en Collapse

package/cjs/count-down/demo/style/mobile.less

@@ -32,7 +32,7 @@
     .btn-wrap {
         display: flex;
 
-        .arco-button.type-primary {
+        .@{prefix}-button.type-primary {
             display: flex;
             flex-direction: row;
             align-items: center;

package/cjs/count-down/index.d.ts

@@ -6,7 +6,7 @@ export * from './type';
  * @en Countdown Component
  * @name 倒计时
  * @name_en CountDown
- * @type 数据展示
+ * @type 信息展示
  * @type_en Data Display
  */
 declare const CountDown: React.ForwardRefExoticComponent<CountDownProps & React.RefAttributes<CountDownRef>>;

package/cjs/count-down/index.js

@@ -30,7 +30,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * @en Countdown Component
  * @name 倒计时
  * @name_en CountDown
- * @type 数据展示
+ * @type 信息展示
  * @type_en Data Display
  */
 var CountDown = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {

package/cjs/date-picker/index.d.ts

@@ -12,7 +12,7 @@ export interface DatePickerRef {
 /**
  * 日期时间选择器，基于`Picker`组件扩展，支持指定范围，单位可精确到秒。
  * @en Date picker, based on the `Picker` component, supports the specified range, the unit can be accurate to seconds.
- * @type 数据输入
+ * @type 数据录入
  * @type_en Data Entry
  * @name 日期时间选择器
  * @name_en DatePicker

package/cjs/date-picker/index.js

@@ -51,7 +51,7 @@ var initDate = Date.now();
 /**
  * 日期时间选择器，基于`Picker`组件扩展，支持指定范围，单位可精确到秒。
  * @en Date picker, based on the `Picker` component, supports the specified range, the unit can be accurate to seconds.
- * @type 数据输入
+ * @type 数据录入
  * @type_en Data Entry
  * @name 日期时间选择器
  * @name_en DatePicker

package/cjs/dropdown/dropdown.d.ts

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

package/cjs/dropdown/dropdown.js

@@ -0,0 +1,322 @@
+"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 _reactTransitionGroup = require("react-transition-group");
+
+var _contextProvider = require("../context-provider");
+
+var _helpers = require("../_helpers");
+
+var _portal = _interopRequireDefault(require("../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)(null),
+        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);
+    var updateDown = (0, _react.useCallback)(function (wrapperHeight) {
+      var _dropdownContainer$cu2;
+
+      // 为0的时候不改变
+      // @en Does not change when it is 0
+      if (wrapperHeight === 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' && wrapperHeight < tempMaskHeight || wrapperHeight > tempTop;
+
+      if (tempDown) {
+        maskHeight.current = tempMaskHeight;
+        setPositionStyle({
+          top: tempTop + "px",
+          bottom: ''
+        });
+      } else {
+        maskHeight.current = windowHeight - tempBottom;
+        setPositionStyle({
+          top: '',
+          bottom: tempBottom + "px"
+        });
+      }
+
+      setDown(tempDown);
+    }, [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 () {
+      var wrapperHeight = 0;
+
+      if (height !== void 0) {
+        // 受控模式下，完全交由外层控制
+        // @en In controlled mode, it is completely controlled by the outer layer
+        wrapperHeight = height;
+      } else {
+        if (!optionsContainer.current) return;
+
+        if (!showDropdown) {
+          wrapperHeight = 0;
+        } else {
+          wrapperHeight = optionsContainer.current.getBoundingClientRect().height;
+        }
+      }
+
+      updateDown(wrapperHeight);
+      (0, _mobileUtils.nextTick)(function () {
+        setOptionsWrapperHeight(wrapperHeight);
+      });
+    }, [showDropdown, options.length, height, updateDown]);
+    (0, _react.useImperativeHandle)(ref, function () {
+      return {
+        dom: domRef.current
+      };
+    });
+
+    function getOptionsStyle() {
+      var trans = down ? 'translateY(-100%)' : 'translateY(100%)';
+      var transStyle = down === null ? {
+        opacity: 0
+      } : {
+        opacity: 1,
+        transform: optionsWrapperHeight ? 'translateY(0)' : trans,
+        transition: "all " + dropdownAnimationTimeout + "ms " + dropdownAnimationFunction
+      };
+      return (0, _helpers.getStyleWithVendor)((0, _extends2.default)({}, transStyle, {
+        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';
+          setDown(null);
+        },
+        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/cjs/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>)>;
 };
 /**
  * 下拉面板，展示供选择的选择项