@arco-design/mobile-react 2.25.4 → 2.27.0

package/umd/carousel/style/css/index.css

@@ -92,6 +92,13 @@
   left:  0.32rem ;
   text-align: left;
 }
+[dir="rtl"] .arco-carousel-indicator.pos-start {
+  left: initial;
+  right:  0.32rem ;
+}
+[dir="rtl"] .arco-carousel-indicator.pos-start {
+  text-align: right;
+}
 .arco-carousel-indicator.pos-center {
   left: 50%;
   -webkit-transform: translate3d(-50%, 0, 0);
@@ -102,39 +109,56 @@
   right:  0.32rem ;
   text-align: right;
 }
-.arco-carousel-indicator.vertical .indicator {
+[dir="rtl"] .arco-carousel-indicator.pos-end {
+  right: initial;
+  left:  0.32rem ;
+}
+[dir="rtl"] .arco-carousel-indicator.pos-end {
+  text-align: left;
+}
+.arco-carousel-indicator-vertical .indicator {
   display: block;
   box-sizing: border-box;
   height:  0.24rem ;
   width:  3PX ;
 }
-.arco-carousel-indicator.vertical .indicator:not(:last-of-type) {
-  margin-right: 0;
+.arco-carousel-indicator-vertical .indicator:not(:last-of-type) {
+  margin: 0;
   margin-bottom:  0.16rem ;
 }
-.arco-carousel-indicator.vertical .indicator.type-circle:not(:last-of-type) {
-  margin-right: 0;
+.arco-carousel-indicator-vertical .indicator.type-circle:not(:last-of-type) {
+  margin: 0;
   margin-bottom:  0.16rem ;
 }
-.arco-carousel-indicator.vertical.pos-start {
+.arco-carousel-indicator-vertical.pos-start {
   top:  0.32rem ;
 }
-.arco-carousel-indicator.vertical.pos-center {
+.arco-carousel-indicator-vertical.pos-center {
   bottom: 50%;
   -webkit-transform: translate3d(0, 50%, 0);
           transform: translate3d(0, 50%, 0);
 }
-.arco-carousel-indicator.vertical.pos-end {
+.arco-carousel-indicator-vertical.pos-end {
   bottom:  0.32rem ;
 }
-.arco-carousel-indicator.vertical.ver-pos-left {
-  left:  0.24rem ;
+.arco-carousel-indicator-vertical.ver-pos-left {
+  left: auto;
   right: auto;
+  left:  0.24rem ;
+}
+[dir="rtl"] .arco-carousel-indicator-vertical.ver-pos-left {
+  left: initial;
+  right:  0.24rem ;
 }
-.arco-carousel-indicator.vertical.ver-pos-right {
+.arco-carousel-indicator-vertical.ver-pos-right {
   left: auto;
+  right: auto;
   right:  0.24rem ;
 }
+[dir="rtl"] .arco-carousel-indicator-vertical.ver-pos-right {
+  right: initial;
+  left:  0.24rem ;
+}
 .arco-carousel-indicator.inverse .indicator {
   background-color:  #e5e6eb ;
 }
@@ -150,9 +174,6 @@
   padding:  0.16rem 0 0.1rem ;
 }
 .arco-carousel-indicator .indicator {
-  display: inline-block;
-  width:  0.24rem ;
-  height:  3PX ;
   -webkit-transition: all 0.2s;
   transition: all 0.2s;
   background-color:  rgba(255, 255, 255, 0.5) ;
@@ -160,9 +181,18 @@
 .arco-carousel-indicator .indicator.active {
   background-color:  #ffffff ;
 }
-.arco-carousel-indicator .indicator:not(:last-of-type) {
+.arco-carousel-indicator-horizontal .indicator {
+  display: inline-block;
+  width:  0.24rem ;
+  height:  3PX ;
+}
+.arco-carousel-indicator-horizontal .indicator:not(:last-of-type) {
   margin-right:  0.16rem ;
 }
+[dir="rtl"] .arco-carousel-indicator-horizontal .indicator:not(:last-of-type) {
+  margin-right: initial;
+  margin-left:  0.16rem ;
+}
 .arco-carousel-indicator .circle-indicator,
 .arco-carousel-indicator .indicator.type-circle {
   width:  6PX ;
@@ -173,3 +203,8 @@
 .arco-carousel-indicator .indicator.type-circle:not(:last-of-type) {
   margin-right:  0.16rem ;
 }
+[dir="rtl"] .arco-carousel-indicator .circle-indicator:not(:last-of-type),
+[dir="rtl"] .arco-carousel-indicator .indicator.type-circle:not(:last-of-type) {
+  margin-right: initial;
+  margin-left:  0.16rem ;
+}

package/umd/carousel/style/index.less

@@ -96,8 +96,8 @@
         box-sizing: border-box;
 
         &.pos-start {
-            .use-var(left, carousel-indicator-safe-padding);
-            text-align: left;
+            .use-var-with-rtl(left, carousel-indicator-safe-padding);
+            .set-value-with-rtl(text-align, left);
         }
 
         &.pos-center {
@@ -107,11 +107,11 @@
         }
 
         &.pos-end {
-            .use-var(right, carousel-indicator-safe-padding);
-            text-align: right;
+            .use-var-with-rtl(right, carousel-indicator-safe-padding);
+            .set-value-with-rtl(text-align, right);
         }
 
-        &.vertical {
+        &-vertical {
 
             .indicator {
                 display: block;
@@ -120,12 +120,12 @@
                 .use-var(width, carousel-square-indicator-height);
 
                 &:not(:last-of-type) {
-                    margin-right: 0;
+                    margin: 0;
                     .use-var(margin-bottom, carousel-square-indicator-gutter);
                 }
 
                 &.type-circle:not(:last-of-type) {
-                    margin-right: 0;
+                    margin: 0;
                     .use-var(margin-bottom, carousel-circle-indicator-gutter);
                 }
             }
@@ -144,13 +144,15 @@
             }
 
             &.ver-pos-left {
-                .use-var(left, carousel-indicator-position);
+                left: auto;
                 right: auto;
+                .use-var-with-rtl(left, carousel-indicator-position);
             }
 
             &.ver-pos-right {
                 left: auto;
-                .use-var(right, carousel-indicator-position);
+                right: auto;
+                .use-var-with-rtl(right, carousel-indicator-position);
             }
         }
 
@@ -174,18 +176,21 @@
         }
 
         .indicator {
-            display: inline-block;
-            .use-var(width, carousel-square-indicator-width);
-            .use-var(height, carousel-square-indicator-height);
             transition: all .2s;
             .use-var(background-color, carousel-indicator-background);
 
             &.active {
                 .use-var(background-color, carousel-indicator-active-background);
             }
+        }
+
+        &-horizontal .indicator {
+            display: inline-block;
+            .use-var(width, carousel-square-indicator-width);
+            .use-var(height, carousel-square-indicator-height);
 
             &:not(:last-of-type) {
-                .use-var(margin-right, carousel-square-indicator-gutter);
+                .use-var-with-rtl(margin-right, carousel-square-indicator-gutter);
             }
         }
 
@@ -196,7 +201,7 @@
             border-radius: 50%;
 
             &:not(:last-of-type) {
-                .use-var(margin-right, carousel-circle-indicator-gutter);
+                .use-var-with-rtl(margin-right, carousel-circle-indicator-gutter);
             }
         }
     }

package/umd/cell/arrow.js

@@ -14,9 +14,11 @@
   "use strict";
 
   var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
   _exports.__esModule = true;
   _exports.default = Arrow;
   _react = _interopRequireDefault(_react);
+
   function Arrow() {
     return /*#__PURE__*/_react.default.createElement("svg", {
       viewBox: "0 0 8 14",

package/umd/cell/cell.js

@@ -14,28 +14,32 @@
   "use strict";
 
   var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
   _exports.__esModule = true;
   _exports.Cell = void 0;
   _react = _interopRequireWildcard(_react);
   _arrow = _interopRequireDefault(_arrow);
+
   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 Cell = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     var _props$className = props.className,
-      className = _props$className === void 0 ? '' : _props$className,
-      style = props.style,
-      icon = props.icon,
-      label = props.label,
-      desc = props.desc,
-      text = props.text,
-      children = props.children,
-      showArrow = props.showArrow,
-      arrow = props.arrow,
-      prepend = props.prepend,
-      append = props.append,
-      _props$bordered = props.bordered,
-      bordered = _props$bordered === void 0 ? true : _props$bordered,
-      _onClick = props.onClick;
+        className = _props$className === void 0 ? '' : _props$className,
+        style = props.style,
+        icon = props.icon,
+        label = props.label,
+        desc = props.desc,
+        text = props.text,
+        children = props.children,
+        showArrow = props.showArrow,
+        arrow = props.arrow,
+        prepend = props.prepend,
+        append = props.append,
+        _props$bordered = props.bordered,
+        bordered = _props$bordered === void 0 ? true : _props$bordered,
+        _onClick = props.onClick;
     var domRef = (0, _react.useRef)(null);
     (0, _react.useImperativeHandle)(ref, function () {
       return {

package/umd/cell/demo/style/css/mobile.css

@@ -18,6 +18,10 @@
   height: 0.64rem;
   margin-right: 0.24rem;
 }
+[dir="rtl"] #demo-cell .demo-cell-avatar-label .arco-avatar {
+  margin-right: initial;
+  margin-left: 0.24rem;
+}
 #demo-cell .demo-cell-avatar .cell-text {
   font-size: 0;
 }
@@ -54,3 +58,7 @@
   vertical-align: middle;
   margin-right: 0.1rem;
 }
+[dir="rtl"] #demo-cell .demo-cell-loading-group .demo-cell-loading {
+  margin-right: initial;
+  margin-left: 0.1rem;
+}

package/umd/cell/demo/style/mobile.less

@@ -12,7 +12,7 @@
         .@{prefix}-avatar {
             .rem(width, 32);
             .rem(height, 32);
-            .rem(margin-right, 12);
+            .rem-with-rtl(margin-right, 12);
         }
     }
     .demo-cell-avatar {
@@ -50,7 +50,7 @@
         text-align: center;
         .demo-cell-loading {
             vertical-align: middle;
-            .rem(margin-right, 5);
+            .rem-with-rtl(margin-right, 5);
         }
     }
 }

package/umd/cell/group.js

@@ -14,38 +14,46 @@
   "use strict";
 
   var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
   _exports.__esModule = true;
   _exports.GroupContext = void 0;
   _exports.componentGenerator = componentGenerator;
   _extends2 = _interopRequireDefault(_extends2);
   _react = _interopRequireWildcard(_react);
+
   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 GroupContext = /*#__PURE__*/_react.default.createContext({
     isFromGroup: false
   });
+
   _exports.GroupContext = GroupContext;
+
   function componentGenerator(Comp) {
     return /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       var _props$className = props.className,
-        className = _props$className === void 0 ? '' : _props$className,
-        style = props.style,
-        header = props.header,
-        footer = props.footer,
-        _props$bordered = props.bordered,
-        bordered = _props$bordered === void 0 ? true : _props$bordered,
-        options = props.options,
-        children = props.children,
-        onClick = props.onClick;
+          className = _props$className === void 0 ? '' : _props$className,
+          style = props.style,
+          header = props.header,
+          footer = props.footer,
+          _props$bordered = props.bordered,
+          bordered = _props$bordered === void 0 ? true : _props$bordered,
+          options = props.options,
+          children = props.children,
+          onClick = props.onClick;
       var domRef = (0, _react.useRef)(null);
       (0, _react.useImperativeHandle)(ref, function () {
         return {
           dom: domRef.current
         };
       });
+
       function handleClick(e) {
         onClick && onClick(e);
       }
+
       return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref) {
         var prefixCls = _ref.prefixCls;
         return /*#__PURE__*/_react.default.createElement("div", {

package/umd/cell/index.js

@@ -23,7 +23,6 @@
     _exports[key] = _type[key];
   });
   var Group = (0, _group.componentGenerator)(_cell.Cell);
-
   /**
    * 单元格组件，含单元格及单元格组合，常用于设置项、表单等。
    * @en Cell, including cells and cell group, are often used to set items, forms, etc.
@@ -32,8 +31,10 @@
    * @name 单元格
    * @name_en Cell
    */
+
   var _default = (0, _mobileUtils.componentWrapper)(_cell.Cell, {
     Group: Group
   });
+
   _exports.default = _default;
 });

package/umd/cell/style/css/index.css

@@ -126,6 +126,10 @@
   color:  #1d2129 ;
   margin-right:  0.48rem ;
 }
+[dir="rtl"] .arco-cell .cell-label {
+  margin-right: initial;
+  margin-left:  0.48rem ;
+}
 .arco-cell .cell-desc {
   color:  #86909c ;
   font-size:  0.28rem ;
@@ -164,6 +168,10 @@
   margin-right:  0.24rem ;
   font-size: 0;
 }
+[dir="rtl"] .arco-cell .cell-label-icon {
+  margin-right: initial;
+  margin-left:  0.24rem ;
+}
 .arco-cell .cell-label-icon .arco-icon {
   line-height: initial;
   font-size:  0.4rem ;
@@ -173,6 +181,10 @@
   margin-left:  0.16rem ;
   font-size: 0;
 }
+[dir="rtl"] .arco-cell .cell-arrow-icon {
+  margin-left: initial;
+  margin-right:  0.16rem ;
+}
 .arco-cell .cell-arrow-icon .arco-icon {
   font-size:  0.24rem ;
   color:  #c9cdd4 ;
@@ -186,6 +198,10 @@
 .arco-cell .arco-input-wrap {
   padding-left: 0;
 }
+[dir="rtl"] .arco-cell .arco-input-wrap {
+  padding-left:  0.32rem ;
+  padding-right: 0;
+}
 .arco-cell-group .cell-group-header,
 .arco-cell-group .cell-group-footer {
   color:  #86909c ;

package/umd/cell/style/index.less

@@ -33,7 +33,7 @@
 
     .cell-label {
         .use-var(color, cell-label-color);
-        .use-var(margin-right, cell-label-gutter);
+        .use-var-with-rtl(margin-right, cell-label-gutter);
     }
 
     .cell-desc {
@@ -61,7 +61,7 @@
     }
 
     .cell-label-icon {
-        .use-var(margin-right, cell-label-icon-gutter);
+        .use-var-with-rtl(margin-right, cell-label-icon-gutter);
         font-size: 0;
         .@{prefix}-icon {
             line-height: initial;
@@ -71,7 +71,7 @@
     }
 
     .cell-arrow-icon {
-        .use-var(margin-left, cell-arrow-gutter);
+        .use-var-with-rtl(margin-left, cell-arrow-gutter);
         font-size: 0;
         .@{prefix}-icon {
             .use-var(font-size, cell-arrow-font-size);
@@ -88,7 +88,9 @@
     }
 
     .@{prefix}-input-wrap {
-        padding-left: 0;
+        .set-prop-with-rtl(padding-left, 0, {
+            .use-var(padding-left, input-horizontal-padding);
+        });
     }
 }
 

package/umd/checkbox/checkbox.js

@@ -14,6 +14,7 @@
   "use strict";
 
   var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
   _exports.__esModule = true;
   _exports.Checkbox = void 0;
   _react = _interopRequireWildcard(_react);
@@ -23,8 +24,11 @@
   _IconSquareChecked = _interopRequireDefault(_IconSquareChecked);
   _IconSquareUnchecked = _interopRequireDefault(_IconSquareUnchecked);
   _IconSquareDisabled = _interopRequireDefault(_IconSquareDisabled);
+
   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 getDefaultIcon = function getDefaultIcon(shape, status) {
     var defaultIcons = {
       circle: {
@@ -48,35 +52,39 @@
     };
     return defaultIcons[shape][status];
   };
+
   var Checkbox = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     var _useMergeProps = (0, _hooks.useMergeProps)(props, _group.CheckboxGroupContext),
-      _useMergeProps$style = _useMergeProps.style,
-      style = _useMergeProps$style === void 0 ? {} : _useMergeProps$style,
-      _useMergeProps$classN = _useMergeProps.className,
-      className = _useMergeProps$classN === void 0 ? '' : _useMergeProps$classN,
-      _useMergeProps$childr = _useMergeProps.children,
-      children = _useMergeProps$childr === void 0 ? null : _useMergeProps$childr,
-      _useMergeProps$label = _useMergeProps.label,
-      label = _useMergeProps$label === void 0 ? '' : _useMergeProps$label,
-      _useMergeProps$layout = _useMergeProps.layout,
-      layout = _useMergeProps$layout === void 0 ? 'inline' : _useMergeProps$layout,
-      value = _useMergeProps.value,
-      _useMergeProps$defaul = _useMergeProps.defaultCheck,
-      defaultCheck = _useMergeProps$defaul === void 0 ? false : _useMergeProps$defaul,
-      _useMergeProps$disabl = _useMergeProps.disabled,
-      disabled = _useMergeProps$disabl === void 0 ? false : _useMergeProps$disabl,
-      _useMergeProps$shape = _useMergeProps.shape,
-      shape = _useMergeProps$shape === void 0 ? 'circle' : _useMergeProps$shape,
-      icons = _useMergeProps.icons,
-      _useMergeProps$isRadi = _useMergeProps.isRadio,
-      isRadio = _useMergeProps$isRadi === void 0 ? false : _useMergeProps$isRadi,
-      propsChecked = _useMergeProps.checked,
-      onChange = _useMergeProps.onChange;
+        _useMergeProps$style = _useMergeProps.style,
+        style = _useMergeProps$style === void 0 ? {} : _useMergeProps$style,
+        _useMergeProps$classN = _useMergeProps.className,
+        className = _useMergeProps$classN === void 0 ? '' : _useMergeProps$classN,
+        _useMergeProps$childr = _useMergeProps.children,
+        children = _useMergeProps$childr === void 0 ? null : _useMergeProps$childr,
+        _useMergeProps$label = _useMergeProps.label,
+        label = _useMergeProps$label === void 0 ? '' : _useMergeProps$label,
+        _useMergeProps$layout = _useMergeProps.layout,
+        layout = _useMergeProps$layout === void 0 ? 'inline' : _useMergeProps$layout,
+        value = _useMergeProps.value,
+        _useMergeProps$defaul = _useMergeProps.defaultCheck,
+        defaultCheck = _useMergeProps$defaul === void 0 ? false : _useMergeProps$defaul,
+        _useMergeProps$disabl = _useMergeProps.disabled,
+        disabled = _useMergeProps$disabl === void 0 ? false : _useMergeProps$disabl,
+        _useMergeProps$shape = _useMergeProps.shape,
+        shape = _useMergeProps$shape === void 0 ? 'circle' : _useMergeProps$shape,
+        icons = _useMergeProps.icons,
+        _useMergeProps$isRadi = _useMergeProps.isRadio,
+        isRadio = _useMergeProps$isRadi === void 0 ? false : _useMergeProps$isRadi,
+        propsChecked = _useMergeProps.checked,
+        onChange = _useMergeProps.onChange;
+
     var _useState = (0, _react.useState)(propsChecked === void 0 ? defaultCheck : propsChecked),
-      checked = _useState[0],
-      setChecked = _useState[1];
+        checked = _useState[0],
+        setChecked = _useState[1];
+
     var _useState2 = (0, _react.useState)(isRadio ? 'radio' : 'checkbox'),
-      componentName = _useState2[0];
+        componentName = _useState2[0];
+
     var domRef = (0, _react.useRef)(null);
     (0, _react.useImperativeHandle)(ref, function () {
       return {
@@ -86,27 +94,30 @@
     (0, _react.useEffect)(function () {
       if (propsChecked !== void 0) setChecked(Boolean(propsChecked));
     }, [propsChecked]);
-
     /**
      * 获得图标样式
      * @en Get icon style
      */
+
     var getStatus = function getStatus() {
       if (checked) {
         if (disabled) return _type.IconStatus.ACTIVE_DISABLED;
         return _type.IconStatus.ACTIVE;
       }
+
       if (disabled) return _type.IconStatus.DISABLED;
       return _type.IconStatus.NORMAL;
     };
-
     /**
      * 计算展示的icon
      * @en Calculate the displayed icon
      */
+
+
     var renderIcon = function renderIcon() {
       var Icon;
       var iconKey = getStatus();
+
       if (icons && icons[iconKey] !== void 0) {
         Icon = icons[iconKey];
       } else if (icons === null) {
@@ -114,6 +125,7 @@
       } else {
         Icon = layout === 'justify' ? getDefaultIcon('justify', iconKey) : getDefaultIcon(shape, iconKey);
       }
+
       return Icon ? /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _mobileUtils.cls)(componentName + "-icon", {
           disabled: disabled,
@@ -121,22 +133,24 @@
         })
       }, Icon) : null;
     };
-
     /**
      * 处理点击事件
      * @en Handling click events
      */
-    var onClick = function onClick(e) {
-      if (disabled) return;
 
-      // Radio组件不支持点击取消选中
+
+    var onClick = function onClick(e) {
+      if (disabled) return; // Radio组件不支持点击取消选中
       // @en Radio component does not support click to uncheck
+
       if (isRadio && checked) return;
       onChange && onChange(!checked, value, e);
+
       if (propsChecked === void 0) {
         setChecked(!checked);
       }
     };
+
     return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref) {
       var prefixCls = _ref.prefixCls;
       return /*#__PURE__*/_react.default.createElement("div", {