@arco-design/mobile-react 2.30.5 → 2.30.6

package/CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.30.6](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.30.5...@arco-design/mobile-react@2.30.6) (2023-12-26)
+
+
+### Bug Fixes
+
+* optimize `Ellipsis` height calculation ([#216](https://github.com/arco-design/arco-design-mobile/issues/216)) ([555723f](https://github.com/arco-design/arco-design-mobile/commit/555723f0091b6f0e28523a0aa37394bceacd6dc5))
+* remove system default outline on iOS low-end machine of `Radio` & `Checkbox` ([#215](https://github.com/arco-design/arco-design-mobile/issues/215)) ([76dc29a](https://github.com/arco-design/arco-design-mobile/commit/76dc29ad26a1dcd37ab8935d8fbcebaa9ebe134f))
+* resolve `DatePicker` rangeTs computed error ([#214](https://github.com/arco-design/arco-design-mobile/issues/214)) ([3dede0b](https://github.com/arco-design/arco-design-mobile/commit/3dede0bca7f0214d5e2b802038cafcc9390b2727))
+
+
+
+
+
 ## [2.30.5](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.30.4...@arco-design/mobile-react@2.30.5) (2023-12-19)
 
 

package/README.en-US.md

@@ -59,8 +59,8 @@ React & ReactDOM: **<a href="https://reactjs.org/docs/cdn-links.html" target="_b
 React Transition Group: **<a href="https://reactcommunity.org/react-transition-group/" target="_blank">Click here</a>**
 
 ```
-<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.30.4/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.30.4/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.30.5/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.30.5/dist/index.min.js"></script>
 ```
 
 ## Full import

package/README.md

@@ -59,8 +59,8 @@ React & ReactDOM： **<a href="https://reactjs.org/docs/cdn-links.html" target="
 React Transition Group： **<a href="https://reactcommunity.org/react-transition-group/" target="_blank">戳这里获取</a>**
 
 ```
-<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.30.4/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.30.4/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.30.5/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.30.5/dist/index.min.js"></script>
 ```
 
 ## 引入全部

package/cjs/checkbox/style/css/index.css

@@ -502,6 +502,9 @@
   -webkit-align-items: center;
           align-items: center;
 }
+.arco-checkbox:focus {
+  outline: none;
+}
 .arco-checkbox .checkbox-icon {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;

package/cjs/checkbox/style/index.less

@@ -4,6 +4,11 @@
     display: inline-flex;
     align-items: center;
 
+    // iOS low-end machine style compatibility issues
+    &:focus {
+        outline: none;
+    }
+
     .checkbox-icon {
         display: inline-flex;
         align-items: center;

package/cjs/date-picker/index.js

@@ -8,7 +8,7 @@ var _exportNames = {
 };
 exports.default = exports.YEAR = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _extends4 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
@@ -100,10 +100,8 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   });
 
   function _getColumns() {
-    var dateObj = {};
-    allTypes.forEach(function (type) {
-      dateObj[type] = _getActualArray(type, currentDateObjRef.current);
-    });
+    var dateObj = _getActualArray();
+
     var columns = keyOptions.map(function (opt) {
       return dateObj[opt];
     });
@@ -147,32 +145,51 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   // @en Dynamically change the options of other columns based on the currently selected date
 
 
-  function _getActualArray(type, nowDateObj) {
-    var normalRange = _getNormalRange(type, nowDateObj);
-
-    var range = [];
-
-    switch (type) {
-      case 'year':
-        range = [minDateObjRef.current.year, maxDateObjRef.current.year];
-        break;
-
-      default:
-        {
-          var checkKeys = allTypes.slice(0, allTypes.indexOf(type));
-          range = normalRange;
-
-          if ((0, _helper.judgeObj)(nowDateObj, minDateObjRef.current, checkKeys)) {
-            range[0] = minDateObjRef.current[type];
-          }
+  function _getActualArray() {
+    var dateObj = {}; // 当前时间对象
+    // @en current Date object
 
-          if ((0, _helper.judgeObj)(nowDateObj, maxDateObjRef.current, checkKeys)) {
-            range[range.length - 1] = maxDateObjRef.current[type];
+    var currentDateObj = (0, _extends4.default)({}, currentDateObjRef.current);
+    allTypes.forEach(function (type) {
+      // 根据日期类型，计算出默认的日期范围
+      // @en According to the date type, calculate the default date range.
+      var normalRange = _getNormalRange(type, currentDateObj);
+
+      var range = [];
+
+      switch (type) {
+        case 'year':
+          // 默认使用minTs和maxTs年份区间
+          // @en Default use minTs and maxTs years.
+          range = [minDateObjRef.current.year, maxDateObjRef.current.year];
+          break;
+
+        default:
+          {
+            // 除了年份外，其他日期类型都需要判断上一级日期是否相同
+            // @en In addition to the year, other date types need to check if the upper-level date is the same.
+            var checkKeys = allTypes.slice(0, allTypes.indexOf(type));
+            range = normalRange;
+
+            if ((0, _helper.judgeObj)(currentDateObj, minDateObjRef.current, checkKeys)) {
+              var _extends2;
+
+              range[0] = minDateObjRef.current[type];
+              currentDateObj = (0, _extends4.default)({}, currentDateObj, (_extends2 = {}, _extends2[type] = Math.max(minDateObjRef.current[type], currentDateObj[type]), _extends2));
+            }
+
+            if ((0, _helper.judgeObj)(currentDateObj, maxDateObjRef.current, checkKeys)) {
+              var _extends3;
+
+              range[range.length - 1] = maxDateObjRef.current[type];
+              currentDateObj = (0, _extends4.default)({}, currentDateObj, (_extends3 = {}, _extends3[type] = Math.min(maxDateObjRef.current[type], currentDateObj[type]), _extends3));
+            }
           }
-        }
-    }
+      }
 
-    return _convertRangeToArr(type, range);
+      dateObj[type] = _convertRangeToArr(type, range);
+    });
+    return dateObj;
   }
 
   function _convertRangeToArr(type, range) {
@@ -320,7 +337,7 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, [visible]);
   return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref) {
     var prefixCls = _ref.prefixCls;
-    return /*#__PURE__*/_react.default.createElement(_picker.default, (0, _extends2.default)({}, otherProps, {
+    return /*#__PURE__*/_react.default.createElement(_picker.default, (0, _extends4.default)({}, otherProps, {
       ref: pickerRef,
       visible: visible,
       className: (0, _mobileUtils.cls)(className, prefixCls + "-date-picker"),

package/cjs/dropdown-menu/helper.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
 import { OptionsItem } from '../dropdown';
 import { CascadeOptions, ValueType } from './type';
 /**
@@ -11,11 +11,6 @@ export declare function isStringArray(options: string[] | OptionsItem[][] | Casc
  * @en Determine if it is a nested array
  * */
 export declare function isCascadeArray(options: string[] | OptionsItem[][] | CascadeOptions[]): options is CascadeOptions[];
-/**
- * 判断是否为string类型
- * @en Determine whether it is of type string
- */
-export declare function isString(icon: string | ReactNode): icon is string;
 /**
  * 格式化传入的数组
  * @en format the input array

package/cjs/dropdown-menu/helper.js

@@ -6,7 +6,6 @@ exports.__esModule = true;
 exports.getFormattedOptions = void 0;
 exports.isCascadeArray = isCascadeArray;
 exports.isRefDom = exports.isClassNameDom = void 0;
-exports.isString = isString;
 exports.isStringArray = isStringArray;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -29,15 +28,6 @@ function isStringArray(options) {
 function isCascadeArray(options) {
   return typeof options[0] === 'object' && !(0, _mobileUtils.isArray)(options[0]);
 }
-/**
- * 判断是否为string类型
- * @en Determine whether it is of type string
- */
-
-
-function isString(icon) {
-  return typeof icon === 'string';
-}
 /**
  * 格式化传入的数组
  * @en format the input array

package/cjs/ellipsis/components/js-ellipsis.js

@@ -50,6 +50,13 @@ var JsEllipsis = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }
   }
 
+  function getActualHeight(container) {
+    var _container$getBoundin = container.getBoundingClientRect(),
+        height = _container$getBoundin.height;
+
+    return Math.round(height);
+  }
+
   function truncateText(container, textContainer, max) {
     var content = textContainer.textContent || '';
     var currentText = '';
@@ -65,11 +72,9 @@ var JsEllipsis = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
       var temp = content.slice(l, m);
       textContainer.innerText = currentText + temp;
+      var actualHeight = getActualHeight(container);
 
-      var _container$getBoundin = container.getBoundingClientRect(),
-          height = _container$getBoundin.height;
-
-      if (height > max) {
+      if (actualHeight > max) {
         r = m;
       } else {
         currentText += temp;
@@ -90,6 +95,7 @@ var JsEllipsis = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   function truncateHTML(container, textContainer, max) {
     // only enter this function when container overflow.
     var children = textContainer.childNodes;
+    var actualHeight = getActualHeight(container);
 
     if (children.length === 1) {
       var node = children[0];
@@ -101,10 +107,7 @@ var JsEllipsis = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
         node.innerHTML = '';
 
-        var _container$getBoundin2 = container.getBoundingClientRect(),
-            height = _container$getBoundin2.height;
-
-        if (height > max) {
+        if (actualHeight > max) {
           // return after remove the node, if overflow with empty node.
           textContainer.removeChild(node);
           handleOnReflow(true, textContainer.innerHTML);
@@ -123,10 +126,7 @@ var JsEllipsis = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       while (i < nodes.length) {
         textContainer.appendChild(nodes[i]);
 
-        var _container$getBoundin3 = container.getBoundingClientRect(),
-            _height = _container$getBoundin3.height;
-
-        if (_height > max) {
+        if (actualHeight > max) {
           if (nodes[i].childNodes && nodes[i].childNodes.length) {
             break;
           } else {
@@ -166,13 +166,10 @@ var JsEllipsis = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }
 
     textRef.current.classList.remove(prefixCls + "-js-content-text-pre");
-
-    var _domRef$current$getBo = domRef.current.getBoundingClientRect(),
-        height = _domRef$current$getBo.height;
-
+    var actualHeight = getActualHeight(domRef.current);
     var max = isNaN(Number(maxHeight)) ? lineHeightRef.current * maxLine : Number(maxHeight);
 
-    if (height <= max) {
+    if (actualHeight <= max) {
       handleOnReflow(false, text);
       return;
     }

package/cjs/radio/style/css/index.css

@@ -502,6 +502,9 @@
   -webkit-align-items: center;
           align-items: center;
 }
+.arco-radio:focus {
+  outline: none;
+}
 .arco-radio .radio-icon {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;

package/cjs/radio/style/index.less

@@ -4,6 +4,11 @@
     display: inline-flex;
     align-items: center;
 
+    // iOS low-end machine style compatibility issues
+    &:focus {
+        outline: none;
+    }
+
     .radio-icon {
         display: inline-flex;
         align-items: center;

package/cjs/show-monitor/index.d.ts

@@ -97,6 +97,11 @@ export interface ShowMonitorRef {
      * @en Ignore the state of the element before and after, manually check whether the element is in the viewport, trigger the onVisibleChange callback function
      */
     checkVisible: () => boolean;
+    /**
+     * 重置元素初始可见态为false，并重新对元素可见度发起检测，优先级低于disabled（通常用在对ShowMonitor内部元素变化时发起的重新监听）
+     * @en Reset the initial visible state of the element to false, and re-detect the visibility of the element, the priority is lower than 'disabled'(Usually used to re-listen when elements inside ShowMonitor change)
+     */
+    flushVisibleStatus: () => void;
 }
 /**
  * 通过滚动事件监测 children 是否进入视口或离开视口。

package/cjs/show-monitor/index.js

@@ -202,6 +202,7 @@ var ShowMonitor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
 
     curVisible !== preVisible && handleCheckChildrenExist() && onCompVisibleChange(curVisible, node);
+    component.isVisible = curVisible;
     var key = wrapperKey.current;
     /**
      * 监听一次后加入 pendingList 队列，随后被 listeners 过滤掉

package/dist/index.js

@@ -13446,10 +13446,8 @@
       });
 
       function _getColumns() {
-        var dateObj = {};
-        allTypes.forEach(function (type) {
-          dateObj[type] = _getActualArray(type, currentDateObjRef.current);
-        });
+        var dateObj = _getActualArray();
+
         var columns = keyOptions.map(function (opt) {
           return dateObj[opt];
         });
@@ -13492,32 +13490,50 @@
       // @en Dynamically change the options of other columns based on the currently selected date
 
 
-      function _getActualArray(type, nowDateObj) {
-        var normalRange = _getNormalRange(type, nowDateObj);
+      function _getActualArray() {
+        var dateObj = {}; // 当前时间对象
+        // @en current Date object
 
-        var range = [];
+        var currentDateObj = __assign$2({}, currentDateObjRef.current);
 
-        switch (type) {
-          case 'year':
-            range = [minDateObjRef.current.year, maxDateObjRef.current.year];
-            break;
+        allTypes.forEach(function (type) {
+          var _a, _b; // 根据日期类型，计算出默认的日期范围
+          // @en According to the date type, calculate the default date range.
 
-          default:
-            {
-              var checkKeys = allTypes.slice(0, allTypes.indexOf(type));
-              range = normalRange;
 
-              if (judgeObj(nowDateObj, minDateObjRef.current, checkKeys)) {
-                range[0] = minDateObjRef.current[type];
-              }
+          var normalRange = _getNormalRange(type, currentDateObj);
 
-              if (judgeObj(nowDateObj, maxDateObjRef.current, checkKeys)) {
-                range[range.length - 1] = maxDateObjRef.current[type];
+          var range = [];
+
+          switch (type) {
+            case 'year':
+              // 默认使用minTs和maxTs年份区间
+              // @en Default use minTs and maxTs years.
+              range = [minDateObjRef.current.year, maxDateObjRef.current.year];
+              break;
+
+            default:
+              {
+                // 除了年份外，其他日期类型都需要判断上一级日期是否相同
+                // @en In addition to the year, other date types need to check if the upper-level date is the same.
+                var checkKeys = allTypes.slice(0, allTypes.indexOf(type));
+                range = normalRange;
+
+                if (judgeObj(currentDateObj, minDateObjRef.current, checkKeys)) {
+                  range[0] = minDateObjRef.current[type];
+                  currentDateObj = __assign$2(__assign$2({}, currentDateObj), (_a = {}, _a[type] = Math.max(minDateObjRef.current[type], currentDateObj[type]), _a));
+                }
+
+                if (judgeObj(currentDateObj, maxDateObjRef.current, checkKeys)) {
+                  range[range.length - 1] = maxDateObjRef.current[type];
+                  currentDateObj = __assign$2(__assign$2({}, currentDateObj), (_b = {}, _b[type] = Math.min(maxDateObjRef.current[type], currentDateObj[type]), _b));
+                }
               }
-            }
-        }
+          }
 
-        return _convertRangeToArr(type, range);
+          dateObj[type] = _convertRangeToArr(type, range);
+        });
+        return dateObj;
       }
 
       function _convertRangeToArr(type, range) {
@@ -15739,6 +15755,11 @@
         }
       }
 
+      function getActualHeight(container) {
+        var height = container.getBoundingClientRect().height;
+        return Math.round(height);
+      }
+
       function truncateText(container, textContainer, max) {
         var content = textContainer.textContent || '';
         var currentText = '';
@@ -15754,9 +15775,9 @@
 
           var temp = content.slice(l, m);
           textContainer.innerText = currentText + temp;
-          var height = container.getBoundingClientRect().height;
+          var actualHeight = getActualHeight(container);
 
-          if (height > max) {
+          if (actualHeight > max) {
             r = m;
           } else {
             currentText += temp;
@@ -15777,6 +15798,7 @@
       function truncateHTML(container, textContainer, max) {
         // only enter this function when container overflow.
         var children = textContainer.childNodes;
+        var actualHeight = getActualHeight(container);
 
         if (children.length === 1) {
           var node = children[0];
@@ -15787,9 +15809,8 @@
             var html = node.innerHTML; // clear content to determine whether the empty node can be placed.
 
             node.innerHTML = '';
-            var height = container.getBoundingClientRect().height;
 
-            if (height > max) {
+            if (actualHeight > max) {
               // return after remove the node, if overflow with empty node.
               textContainer.removeChild(node);
               handleOnReflow(true, textContainer.innerHTML);
@@ -15807,9 +15828,8 @@
 
           while (i < nodes.length) {
             textContainer.appendChild(nodes[i]);
-            var height = container.getBoundingClientRect().height;
 
-            if (height > max) {
+            if (actualHeight > max) {
               if (nodes[i].childNodes && nodes[i].childNodes.length) {
                 break;
               } else {
@@ -15849,10 +15869,10 @@
         }
 
         textRef.current.classList.remove(prefixCls + "-js-content-text-pre");
-        var height = domRef.current.getBoundingClientRect().height;
+        var actualHeight = getActualHeight(domRef.current);
         var max = isNaN(Number(maxHeight)) ? lineHeightRef.current * maxLine : Number(maxHeight);
 
-        if (height <= max) {
+        if (actualHeight <= max) {
           handleOnReflow(false, text);
           return;
         }
@@ -26767,6 +26787,7 @@
 
 
         curVisible !== preVisible && handleCheckChildrenExist() && onCompVisibleChange(curVisible, node);
+        component.isVisible = curVisible;
         var key = wrapperKey.current;
         /**
          * 监听一次后加入 pendingList 队列，随后被 listeners 过滤掉