@arco-design/mobile-react 2.25.3 → 2.26.0

package/cjs/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/cjs/carousel/style/css/index.js

@@ -1,4 +1,5 @@
 "use strict";
 
 require("../../../../style/css/public.css");
+
 require("./index.css");

package/cjs/carousel/style/index.js

@@ -1,4 +1,5 @@
 "use strict";
 
 require("../../../style/public.less");
+
 require("./index.less");

package/cjs/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/cjs/cell/arrow.js

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

package/cjs/cell/cell.js

@@ -1,31 +1,40 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.Cell = void 0;
+
 var _react = _interopRequireWildcard(require("react"));
+
 var _mobileUtils = require("@arco-design/mobile-utils");
+
 var _contextProvider = require("../context-provider");
+
 var _arrow = _interopRequireDefault(require("./arrow"));
+
 var _group = require("./group");
+
 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/cjs/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/cjs/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/cjs/cell/group.js

@@ -1,40 +1,52 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.GroupContext = void 0;
 exports.componentGenerator = componentGenerator;
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _react = _interopRequireWildcard(require("react"));
+
 var _mobileUtils = require("@arco-design/mobile-utils");
+
 var _contextProvider = require("../context-provider");
+
 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/cjs/cell/index.js

@@ -3,10 +3,15 @@
 exports.__esModule = true;
 var _exportNames = {};
 exports.default = void 0;
+
 var _mobileUtils = require("@arco-design/mobile-utils");
+
 var _group = require("./group");
+
 var _cell = require("./cell");
+
 var _type = require("./type");
+
 Object.keys(_type).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
@@ -14,7 +19,6 @@ Object.keys(_type).forEach(function (key) {
   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.
@@ -23,7 +27,9 @@ var Group = (0, _group.componentGenerator)(_cell.Cell);
  * @name 单元格
  * @name_en Cell
  */
+
 var _default = (0, _mobileUtils.componentWrapper)(_cell.Cell, {
   Group: Group
 });
+
 exports.default = _default;

package/cjs/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/cjs/cell/style/css/index.js

@@ -1,4 +1,5 @@
 "use strict";
 
 require("../../../../style/css/public.css");
+
 require("./index.css");

package/cjs/cell/style/index.js

@@ -1,4 +1,5 @@
 "use strict";
 
 require("../../../style/public.less");
+
 require("./index.less");

package/cjs/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);
+        });
     }
 }