@arco-design/mobile-react 2.24.2 → 2.25.1

package/esm/dropdown-menu/dropdown-menu.js

@@ -7,60 +7,52 @@ import IconTriDown from '../icon/IconTriDown';
 export function componentGenerator(Comp) {
   return /*#__PURE__*/forwardRef(function (props, ref) {
     var _props$className = props.className,
-        className = _props$className === void 0 ? '' : _props$className,
-        _props$style = props.style,
-        style = _props$style === void 0 ? {} : _props$style,
-        _props$options = props.options,
-        options = _props$options === void 0 ? [] : _props$options,
-        _props$disabled = props.disabled,
-        disabled = _props$disabled === void 0 ? [] : _props$disabled,
-        _props$selectTips = props.selectTips,
-        selectTips = _props$selectTips === void 0 ? [] : _props$selectTips,
-        values = props.values,
-        _props$defaultValues = props.defaultValues,
-        defaultValues = _props$defaultValues === void 0 ? [] : _props$defaultValues,
-        icon = props.icon,
-        _props$chooseAndClose = props.chooseAndClose,
-        chooseAndClose = _props$chooseAndClose === void 0 ? true : _props$chooseAndClose,
-        selectIndex = props.selectIndex,
-        _props$defaultSelectI = props.defaultSelectIndex,
-        defaultSelectIndex = _props$defaultSelectI === void 0 ? 0 : _props$defaultSelectI,
-        showDropdown = props.showDropdown,
-        _props$defaultShowDro = props.defaultShowDropdown,
-        defaultShowDropdown = _props$defaultShowDro === void 0 ? false : _props$defaultShowDro,
-        onValuesChange = props.onValuesChange,
-        onSelectChange = props.onSelectChange,
-        onDropdownChange = props.onDropdownChange,
-        _props$getFormattedOp = props.getFormattedOptions,
-        getFormattedOptions = _props$getFormattedOp === void 0 ? defaultFormatFunc : _props$getFormattedOp,
-        getContainer = props.getContainer,
-        children = props.children,
-        extraForDropdown = props.extraForDropdown;
-
+      className = _props$className === void 0 ? '' : _props$className,
+      _props$style = props.style,
+      style = _props$style === void 0 ? {} : _props$style,
+      _props$options = props.options,
+      options = _props$options === void 0 ? [] : _props$options,
+      _props$disabled = props.disabled,
+      disabled = _props$disabled === void 0 ? [] : _props$disabled,
+      _props$selectTips = props.selectTips,
+      selectTips = _props$selectTips === void 0 ? [] : _props$selectTips,
+      values = props.values,
+      _props$defaultValues = props.defaultValues,
+      defaultValues = _props$defaultValues === void 0 ? [] : _props$defaultValues,
+      icon = props.icon,
+      _props$chooseAndClose = props.chooseAndClose,
+      chooseAndClose = _props$chooseAndClose === void 0 ? true : _props$chooseAndClose,
+      selectIndex = props.selectIndex,
+      _props$defaultSelectI = props.defaultSelectIndex,
+      defaultSelectIndex = _props$defaultSelectI === void 0 ? 0 : _props$defaultSelectI,
+      showDropdown = props.showDropdown,
+      _props$defaultShowDro = props.defaultShowDropdown,
+      defaultShowDropdown = _props$defaultShowDro === void 0 ? false : _props$defaultShowDro,
+      onValuesChange = props.onValuesChange,
+      onSelectChange = props.onSelectChange,
+      onDropdownChange = props.onDropdownChange,
+      _props$getFormattedOp = props.getFormattedOptions,
+      getFormattedOptions = _props$getFormattedOp === void 0 ? defaultFormatFunc : _props$getFormattedOp,
+      getContainer = props.getContainer,
+      children = props.children,
+      extraForDropdown = props.extraForDropdown;
     var _useContext = useContext(GlobalContext),
-        prefixCls = _useContext.prefixCls,
-        locale = _useContext.locale;
-
+      prefixCls = _useContext.prefixCls,
+      locale = _useContext.locale;
     var _useState = useState(defaultValues),
-        innerValues = _useState[0],
-        setInnerValues = _useState[1];
-
+      innerValues = _useState[0],
+      setInnerValues = _useState[1];
     var _useState2 = useState(0),
-        defaultTop = _useState2[0],
-        setDefaultTop = _useState2[1];
-
+      defaultTop = _useState2[0],
+      setDefaultTop = _useState2[1];
     var currentValues = values !== void 0 ? values : innerValues;
-
     var _useState3 = useState(defaultShowDropdown),
-        innerShowDropdown = _useState3[0],
-        setInnerShowDropdown = _useState3[1];
-
+      innerShowDropdown = _useState3[0],
+      setInnerShowDropdown = _useState3[1];
     var dropdownShown = showDropdown !== void 0 ? showDropdown : innerShowDropdown;
-
     var _useState4 = useState(defaultSelectIndex),
-        innerSelectedIndex = _useState4[0],
-        setInnerSelectedIndex = _useState4[1];
-
+      innerSelectedIndex = _useState4[0],
+      setInnerSelectedIndex = _useState4[1];
     var selectedIndex = selectIndex !== void 0 ? selectIndex : innerSelectedIndex;
     var selectWrapper = useRef(null);
     var domRef = useRef(null);
@@ -68,70 +60,62 @@ export function componentGenerator(Comp) {
       label: locale == null ? void 0 : locale.DropdownMenu.select,
       value: -1
     };
+
     /**
      * 更新选项数组和选择情况
      * @en Update options list and selection
      */
-
     var _useMemo = useMemo(function () {
-      return getFormattedOptions(options, currentValues);
-    }, [options, currentValues]),
-        formattedOptions = _useMemo.formattedOptions;
-
+        return getFormattedOptions(options, currentValues);
+      }, [options, currentValues]),
+      formattedOptions = _useMemo.formattedOptions;
     var selectedOptions = useMemo(function () {
       return formattedOptions.map(function (ops, index) {
         if (props.multiple) {
           var _value = currentValues[index] || [];
-
           var opItems = ops.reduce(function (acc, op) {
             return [].concat(acc, _value.includes(op.value) ? [op] : []);
           }, []);
           return opItems.length ? opItems : [defaultOpItem];
         }
-
         var value = currentValues[index];
         return ops.find(function (op) {
           return op.value === value;
         }) || ops[0];
       });
     }, [formattedOptions, currentValues, props.multiple]);
+
     /**
      * 当下拉框的状态变化
      * @en When the state of the dropdown box changes
      */
-
     var handleShowDropdownChange = function handleShowDropdownChange(show, index) {
       onDropdownChange && onDropdownChange(show, index);
       setInnerShowDropdown(show);
     };
-
     var handleSelectedIndexChange = function handleSelectedIndexChange(idx) {
       setInnerSelectedIndex(idx);
       onSelectChange == null ? void 0 : onSelectChange(idx);
     };
-
     var handleValuesChange = function handleValuesChange(val) {
-      var newValue = [].concat(currentValues); // 级联情况下 selectedIndex 之后的选项值重置
+      var newValue = [].concat(currentValues);
+      // 级联情况下 selectedIndex 之后的选项值重置
       // @en Option values are reset after selectedIndex in case of cascade
-
       if (isCascadeArray(options)) {
         newValue = newValue.slice(0, selectedIndex);
       }
-
       newValue[selectedIndex] = val;
       newValue = getFormattedOptions(options, newValue).formattedValue;
       setInnerValues(newValue);
       onValuesChange == null ? void 0 : onValuesChange(newValue);
     };
+
     /**
      * 处理选择框的点击事件
      * @en Handle click event of dropdown box
      */
-
-
     var handleSelectClick = function handleSelectClick(idx) {
       if (disabled[idx]) return;
-
       if (Number(idx) === selectedIndex) {
         handleShowDropdownChange(!dropdownShown, idx);
       } else {
@@ -139,19 +123,16 @@ export function componentGenerator(Comp) {
         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;
-
+        isStopTouchEl = _ref.isStopTouchEl;
       return isRefDom(target, selectWrapper) && isClassNameDom(target, 'select-item') || (isStopTouchEl == null ? void 0 : isStopTouchEl(target)) || false;
     };
-
     useImperativeHandle(ref, function () {
       return {
         dom: domRef.current
@@ -162,11 +143,9 @@ export function componentGenerator(Comp) {
       var container = getContainer ? getContainer() || defaultContainer : defaultContainer;
       setDefaultTop((container == null ? void 0 : container.getBoundingClientRect().bottom) || 0);
     }, [getContainer, dropdownShown]);
-
     var onCancel = props.onCancel || function () {
       return handleShowDropdownChange(false);
     };
-
     var dropdownCommonProps = _extends({
       showDropdown: dropdownShown,
       top: (extraForDropdown == null ? void 0 : extraForDropdown.top) || defaultTop,
@@ -174,7 +153,6 @@ export function componentGenerator(Comp) {
     }, extraForDropdown || {}, {
       isStopTouchEl: isCurrentSelectEl
     });
-
     var renderSelectedLabel = function renderSelectedLabel(op, index) {
       if (props.multiple === true) {
         var multipleOp = op || [];
@@ -184,13 +162,11 @@ export function componentGenerator(Comp) {
           return item.label;
         }).join(','));
       }
-
       var singleOp = op || [];
       return props.renderSelectLabel ? props.renderSelectLabel(singleOp, index) : /*#__PURE__*/React.createElement("div", {
         className: cls(prefixCls + "-select-item-label-text")
       }, singleOp.label);
     };
-
     return /*#__PURE__*/React.createElement("div", {
       ref: domRef,
       className: cls(prefixCls + "-dropdown-menu all-border-box", className, {
@@ -240,7 +216,6 @@ export function componentGenerator(Comp) {
       selectedValue: currentValues[selectedIndex] || 0,
       onOptionClick: function onOptionClick(val, op) {
         props.onOptionClick == null ? void 0 : props.onOptionClick(val, op, selectedIndex);
-
         if (chooseAndClose) {
           handleShowDropdownChange(false, selectedIndex);
         }

package/esm/dropdown-menu/helper.js

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
 import { isArray } from '@arco-design/mobile-utils';
-
 /**
  * 判断是否为string数组
  * @en Determine whether it is a string array
@@ -8,22 +7,23 @@ import { isArray } from '@arco-design/mobile-utils';
 export function isStringArray(options) {
   return typeof options[0] === 'string';
 }
+
 /**
  * 判断是否为嵌套数组
  * @en Determine if it is a nested array
  * */
-
 export function isCascadeArray(options) {
   return typeof options[0] === 'object' && !isArray(options[0]);
 }
+
 /**
  * 判断是否为string类型
  * @en Determine whether it is of type string
  */
-
 export function isString(icon) {
   return typeof icon === 'string';
 }
+
 /**
  * 格式化传入的数组
  * @en format the input array
@@ -31,11 +31,9 @@ export function isString(icon) {
  * @param {OptionsItem[][] | string[] | CascadeOptions[]} options {en} Array of options from the upper layer
  * @param {ValueType} currentValues Current selected value
  * */
-
 export var getFormattedOptions = function getFormattedOptions(options, currentValues) {
   var values = [].concat(currentValues);
   var formattedOptions = [];
-
   if (isStringArray(options)) {
     /**
      * 如果传入的是简单的字符串数组
@@ -51,68 +49,60 @@ export var getFormattedOptions = function getFormattedOptions(options, currentVa
   } else if (isCascadeArray(options)) {
     var ops = options;
     var i = 0;
-
     var _loop = function _loop() {
       formattedOptions.push(ops.map(function (item) {
         return _extends({}, item, {
           disabled: item.disabled || false
         });
       }));
-      var temp = void 0;
+      var temp;
       var val = values[i];
       var valIndex = ops.findIndex(function (op) {
         return op.value === val;
       });
-
       if (valIndex > -1) {
         temp = ops[valIndex].children;
       } else {
         temp = ops[0].children;
         values[i] = ops[0].value;
       }
-
       i++;
       ops = temp;
     };
-
     while (ops) {
       _loop();
     }
   } else {
     formattedOptions.push.apply(formattedOptions, options);
   }
-
   return {
     formattedOptions: formattedOptions,
     formattedValue: values
   };
 };
+
 /**
  * 判断是否为指定ref内的元素
  * @en Determine whether it is an element within the specified ref
  */
-
 export var isRefDom = function isRefDom(dom, ref) {
   var refDom = ref.current;
   if (!refDom || !dom) return false;
   return refDom.contains(dom);
 };
+
 /**
  * 判断是否为指定类名下的元素
  * @en Determine whether it is an element under the specified classname
  */
-
 export var isClassNameDom = function isClassNameDom(dom, className) {
   if (!dom) return false;
   var tempEl = dom;
-
   while (tempEl) {
     if (tempEl.classList.value.indexOf(className) > -1) {
       return true;
     }
-
     tempEl = tempEl.parentNode;
   }
-
   return false;
 };

package/esm/dropdown-menu/index.js

@@ -1,6 +1,7 @@
 import { componentGenerator } from './dropdown-menu';
 import Dropdown from '../dropdown';
 export * from './type';
+
 /**
  * 下拉选择组件，点击选择器(select)展开下拉框(dropdown)，展示选择项(options)，兼容多个选择器的情况。
  * @en Dropdown component, click the selector (select) to expand the dropdown box (dropdown), display the options (options), compatible with multiple selectors.
@@ -9,6 +10,5 @@ export * from './type';
  * @name 下拉选择菜单
  * @name_en DropdownMenu
  */
-
 var DropdownMenu = componentGenerator(Dropdown);
 export default DropdownMenu;

package/esm/ellipsis/components/js-ellipsis.js

@@ -3,19 +3,19 @@ import ResizeObserver from 'resize-observer-polyfill';
 import { getLineHeight, wrapTextChildNodesWithSpan } from '../utils/dom';
 var JsEllipsis = /*#__PURE__*/forwardRef(function (props, ref) {
   var prefixCls = props.prefixCls,
-      text = props.text,
-      ellipsis = props.ellipsis,
-      dangerouslyUseInnerHTML = props.dangerouslyUseInnerHTML,
-      _props$maxLine = props.maxLine,
-      maxLine = _props$maxLine === void 0 ? 1 : _props$maxLine,
-      maxHeight = props.maxHeight,
-      ellipsisNode = props.ellipsisNode,
-      collapseNode = props.collapseNode,
-      endExcludes = props.endExcludes,
-      reflowOnResize = props.reflowOnResize,
-      onReflow = props.onReflow,
-      onEllipsisNodeClick = props.onEllipsisNodeClick,
-      onCollapseNodeClick = props.onCollapseNodeClick;
+    text = props.text,
+    ellipsis = props.ellipsis,
+    dangerouslyUseInnerHTML = props.dangerouslyUseInnerHTML,
+    _props$maxLine = props.maxLine,
+    maxLine = _props$maxLine === void 0 ? 1 : _props$maxLine,
+    maxHeight = props.maxHeight,
+    ellipsisNode = props.ellipsisNode,
+    collapseNode = props.collapseNode,
+    endExcludes = props.endExcludes,
+    reflowOnResize = props.reflowOnResize,
+    onReflow = props.onReflow,
+    onEllipsisNodeClick = props.onEllipsisNodeClick,
+    onCollapseNodeClick = props.onCollapseNodeClick;
   var truncating = useRef(false);
   var domRef = useRef(null);
   var textRef = useRef(null);
@@ -29,89 +29,73 @@ var JsEllipsis = /*#__PURE__*/forwardRef(function (props, ref) {
   useEffect(function () {
     setCurLineHeight();
   }, []);
-
   function handleOnReflow(isEllipsis, result) {
     if (onReflow && typeof onReflow === 'function') {
       onReflow(isEllipsis, result);
     }
   }
-
   function truncateText(container, textContainer, max) {
     var content = textContainer.textContent || '';
     var currentText = '';
     var l = 0;
-    var r = content.length - 1; // Binary truncate text until get the max limit fragment of text.
-
+    var r = content.length - 1;
+    // Binary truncate text until get the max limit fragment of text.
     while (l < r) {
       var m = Math.floor((l + r) / 2);
-
       if (l === m) {
         break;
       }
-
       var temp = content.slice(l, m);
       textContainer.innerText = currentText + temp;
-
       var _container$getBoundin = container.getBoundingClientRect(),
-          height = _container$getBoundin.height;
-
+        height = _container$getBoundin.height;
       if (height > max) {
         r = m;
       } else {
         currentText += temp;
         l = m;
       }
-    } // Remove the exclude char at the end of the content.
-
-
+    }
+    // Remove the exclude char at the end of the content.
     while (endExcludes && endExcludes.includes(currentText[currentText.length - 1])) {
       currentText = currentText.slice(0, -1);
-    } // Callback after reflow.
-
-
+    }
+    // Callback after reflow.
     handleOnReflow(true, currentText);
     textContainer.innerText = currentText;
   }
-
   function truncateHTML(container, textContainer, max) {
     // only enter this function when container overflow.
     var children = textContainer.childNodes;
-
     if (children.length === 1) {
       var node = children[0];
-
       if (node.nodeType === Node.TEXT_NODE) {
         truncateText(container, textContainer, max);
       } else {
-        var html = node.innerHTML; // clear content to determine whether the empty node can be placed.
-
+        var html = node.innerHTML;
+        // clear content to determine whether the empty node can be placed.
         node.innerHTML = '';
-
         var _container$getBoundin2 = container.getBoundingClientRect(),
-            height = _container$getBoundin2.height;
-
+          height = _container$getBoundin2.height;
         if (height > max) {
           // return after remove the node, if overflow with empty node.
           textContainer.removeChild(node);
           handleOnReflow(true, textContainer.innerHTML);
           return;
         }
-
-        node.innerHTML = html; // recursive truncate node
-
+        node.innerHTML = html;
+        // recursive truncate node
         truncateHTML(container, node, max);
       }
     } else {
       var nodes = [].slice.call(children);
       textContainer.innerHTML = '';
-      var i = 0; // find the critical node
-
+      var i = 0;
+      // find the critical node
       while (i < nodes.length) {
         textContainer.appendChild(nodes[i]);
-
         var _container$getBoundin3 = container.getBoundingClientRect(),
-            _height = _container$getBoundin3.height;
-
+          _height = _container$getBoundin3.height;
         if (_height > max) {
           if (nodes[i].childNodes && nodes[i].childNodes.length) {
             break;
@@ -121,51 +105,39 @@ var JsEllipsis = /*#__PURE__*/forwardRef(function (props, ref) {
             return;
           }
         }
-
         i++;
       }
-
       if (textContainer.childNodes[i]) {
         // truncate the critical node
         truncateHTML(container, textContainer.childNodes[i], max);
       }
     }
-  } // reflow when the main props change.
-
-
+  }
+  // reflow when the main props change.
   var reflow = useCallback(function () {
     if (!domRef.current || !textRef.current || !ellipsisRef.current || truncating.current) {
       return;
     }
-
     ellipsisRef.current.style.display = 'none';
-
     if (dangerouslyUseInnerHTML) {
       textRef.current.innerHTML = text;
       textRef.current.classList.add(prefixCls + "-js-content-text-pre");
     } else {
       textRef.current.innerText = text;
     }
-
     if (!ellipsis) {
       return;
     }
-
     textRef.current.classList.remove(prefixCls + "-js-content-text-pre");
-
     var _domRef$current$getBo = domRef.current.getBoundingClientRect(),
-        height = _domRef$current$getBo.height;
-
+      height = _domRef$current$getBo.height;
     var max = isNaN(Number(maxHeight)) ? lineHeightRef.current * maxLine : Number(maxHeight);
-
     if (height <= max) {
       handleOnReflow(false, text);
       return;
     }
-
     truncating.current = true;
     ellipsisRef.current.style.display = 'inline';
-
     if (dangerouslyUseInnerHTML) {
       // wrap the text children node with span element.
       wrapTextChildNodesWithSpan(textRef.current, prefixCls + "-js-content-text");
@@ -173,14 +145,13 @@ var JsEllipsis = /*#__PURE__*/forwardRef(function (props, ref) {
     } else {
       truncateText(domRef.current, textRef.current, max);
     }
-
     truncating.current = false;
   }, [text, ellipsis, dangerouslyUseInnerHTML, maxLine, maxHeight, ellipsisNode, endExcludes]);
   useEffect(function () {
     reflow();
   }, [reflow]);
-  var observerRef = useRef(null); // Observe resize event of container if reflowOnResize is true.
-
+  var observerRef = useRef(null);
+  // Observe resize event of container if reflowOnResize is true.
   useEffect(function () {
     if (domRef.current && reflowOnResize) {
       if (!observerRef.current && ellipsis) {
@@ -188,7 +159,6 @@ var JsEllipsis = /*#__PURE__*/forwardRef(function (props, ref) {
         observerRef.current.observe(domRef.current);
       }
     }
-
     return function () {
       // Remove observer when component unmounted.
       if (observerRef.current && domRef.current) {

package/esm/ellipsis/components/native-ellipsis.js

@@ -1,17 +1,16 @@
 import React from 'react';
 import { cls } from '@arco-design/mobile-utils';
-
 function NativeEllipsis(_ref) {
   var prefixCls = _ref.prefixCls,
-      ellipsis = _ref.ellipsis,
-      dangerouslyUseInnerHTML = _ref.dangerouslyUseInnerHTML,
-      text = _ref.text,
-      maxLine = _ref.maxLine,
-      ellipsisNode = _ref.ellipsisNode,
-      _ref$collapseNode = _ref.collapseNode,
-      collapseNode = _ref$collapseNode === void 0 ? '' : _ref$collapseNode,
-      onEllipsisNodeClick = _ref.onEllipsisNodeClick,
-      onCollapseNodeClick = _ref.onCollapseNodeClick;
+    ellipsis = _ref.ellipsis,
+    dangerouslyUseInnerHTML = _ref.dangerouslyUseInnerHTML,
+    text = _ref.text,
+    maxLine = _ref.maxLine,
+    ellipsisNode = _ref.ellipsisNode,
+    _ref$collapseNode = _ref.collapseNode,
+    collapseNode = _ref$collapseNode === void 0 ? '' : _ref$collapseNode,
+    onEllipsisNodeClick = _ref.onEllipsisNodeClick,
+    onCollapseNodeClick = _ref.onCollapseNodeClick;
   return /*#__PURE__*/React.createElement("div", {
     className: cls(prefixCls + "-native", {
       ellipsis: ellipsis
@@ -34,5 +33,4 @@ function NativeEllipsis(_ref) {
     className: cls(prefixCls + "-native-ellipsis-node")
   }, ellipsisNode) : null);
 }
-
 export default /*#__PURE__*/React.memo(NativeEllipsis);