@arco-design/mobile-react 2.27.4 → 2.28.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (176) hide show
  1. package/CHANGELOG.md +33 -0
  2. package/README.en-US.md +2 -2
  3. package/README.md +2 -2
  4. package/cjs/_helpers/hooks.d.ts +1 -0
  5. package/cjs/_helpers/hooks.js +44 -28
  6. package/cjs/action-sheet/index.d.ts +2 -2
  7. package/cjs/badge/index.js +2 -1
  8. package/cjs/badge/style/css/index.css +12 -0
  9. package/cjs/badge/style/index.less +3 -3
  10. package/cjs/button/style/css/index.css +4 -0
  11. package/cjs/button/style/index.less +1 -1
  12. package/cjs/cell/style/css/index.css +7 -0
  13. package/cjs/cell/style/index.less +4 -1
  14. package/cjs/checkbox/style/css/index.css +13 -0
  15. package/cjs/checkbox/style/index.less +3 -3
  16. package/cjs/collapse/collapse.js +12 -6
  17. package/cjs/dialog/index.d.ts +2 -2
  18. package/cjs/form/style/css/index.css +16 -0
  19. package/cjs/form/style/index.less +4 -4
  20. package/cjs/image-preview/index.d.ts +2 -2
  21. package/cjs/image-preview/index.js +4 -2
  22. package/cjs/image-preview/style/css/index.css +3 -0
  23. package/cjs/image-preview/style/index.less +4 -0
  24. package/cjs/index.d.ts +12 -12
  25. package/cjs/index.js +46 -46
  26. package/cjs/load-more/index.d.ts +5 -0
  27. package/cjs/load-more/index.js +2 -1
  28. package/cjs/masking/index.d.ts +2 -2
  29. package/cjs/masking/index.js +4 -2
  30. package/cjs/notify/index.d.ts +8 -8
  31. package/cjs/popover/popover.js +10 -2
  32. package/cjs/popup/index.d.ts +2 -2
  33. package/cjs/popup-swiper/index.d.ts +2 -2
  34. package/cjs/radio/style/css/index.css +8 -0
  35. package/cjs/radio/style/index.less +2 -2
  36. package/cjs/rate/index.js +5 -3
  37. package/cjs/rate/style/css/index.css +4 -0
  38. package/cjs/rate/style/index.less +4 -0
  39. package/cjs/slider/hooks/index.d.ts +1 -1
  40. package/cjs/slider/popover.js +6 -2
  41. package/cjs/stepper/hooks/useButtonClick.js +8 -9
  42. package/cjs/sticky/index.d.ts +5 -0
  43. package/cjs/sticky/index.js +20 -7
  44. package/cjs/style.d.ts +13 -13
  45. package/cjs/style.js +24 -24
  46. package/cjs/switch/index.js +7 -2
  47. package/cjs/switch/style/css/index.css +44 -0
  48. package/cjs/switch/style/index.less +19 -7
  49. package/cjs/tabs/demo/style/css/mobile.css +11 -0
  50. package/cjs/tabs/demo/style/mobile.less +5 -1
  51. package/cjs/tabs/index.js +14 -5
  52. package/cjs/tabs/style/css/index.css +32 -7
  53. package/cjs/tabs/style/index.less +9 -14
  54. package/cjs/tabs/tab-cell-underline.js +14 -5
  55. package/cjs/tabs/tab-cell.js +15 -7
  56. package/cjs/tabs/tab-pane.js +4 -3
  57. package/cjs/tabs/type.d.ts +1 -0
  58. package/cjs/toast/index.d.ts +12 -12
  59. package/cjs/toast/index.js +5 -2
  60. package/dist/index.js +13914 -13836
  61. package/dist/index.min.js +4 -4
  62. package/dist/style.css +3366 -3236
  63. package/dist/style.min.css +1 -1
  64. package/esm/_helpers/hooks.d.ts +1 -0
  65. package/esm/_helpers/hooks.js +43 -29
  66. package/esm/action-sheet/index.d.ts +2 -2
  67. package/esm/badge/index.js +2 -1
  68. package/esm/badge/style/css/index.css +12 -0
  69. package/esm/badge/style/index.less +3 -3
  70. package/esm/button/style/css/index.css +4 -0
  71. package/esm/button/style/index.less +1 -1
  72. package/esm/cell/style/css/index.css +7 -0
  73. package/esm/cell/style/index.less +4 -1
  74. package/esm/checkbox/style/css/index.css +13 -0
  75. package/esm/checkbox/style/index.less +3 -3
  76. package/esm/collapse/collapse.js +14 -8
  77. package/esm/dialog/index.d.ts +2 -2
  78. package/esm/form/style/css/index.css +16 -0
  79. package/esm/form/style/index.less +4 -4
  80. package/esm/image-preview/index.d.ts +2 -2
  81. package/esm/image-preview/index.js +4 -2
  82. package/esm/image-preview/style/css/index.css +3 -0
  83. package/esm/image-preview/style/index.less +4 -0
  84. package/esm/index.d.ts +12 -12
  85. package/esm/index.js +12 -12
  86. package/esm/load-more/index.d.ts +5 -0
  87. package/esm/load-more/index.js +2 -1
  88. package/esm/masking/index.d.ts +2 -2
  89. package/esm/masking/index.js +4 -2
  90. package/esm/notify/index.d.ts +8 -8
  91. package/esm/popover/popover.js +10 -2
  92. package/esm/popup/index.d.ts +2 -2
  93. package/esm/popup-swiper/index.d.ts +2 -2
  94. package/esm/radio/style/css/index.css +8 -0
  95. package/esm/radio/style/index.less +2 -2
  96. package/esm/rate/index.js +5 -3
  97. package/esm/rate/style/css/index.css +4 -0
  98. package/esm/rate/style/index.less +4 -0
  99. package/esm/slider/hooks/index.d.ts +1 -1
  100. package/esm/slider/popover.js +7 -3
  101. package/esm/stepper/hooks/useButtonClick.js +8 -9
  102. package/esm/sticky/index.d.ts +5 -0
  103. package/esm/sticky/index.js +20 -7
  104. package/esm/style.d.ts +13 -13
  105. package/esm/style.js +13 -13
  106. package/esm/switch/index.js +9 -4
  107. package/esm/switch/style/css/index.css +44 -0
  108. package/esm/switch/style/index.less +19 -7
  109. package/esm/tabs/demo/style/css/mobile.css +11 -0
  110. package/esm/tabs/demo/style/mobile.less +5 -1
  111. package/esm/tabs/index.js +16 -7
  112. package/esm/tabs/style/css/index.css +32 -7
  113. package/esm/tabs/style/index.less +9 -14
  114. package/esm/tabs/tab-cell-underline.js +14 -6
  115. package/esm/tabs/tab-cell.js +15 -8
  116. package/esm/tabs/tab-pane.js +4 -3
  117. package/esm/tabs/type.d.ts +1 -0
  118. package/esm/toast/index.d.ts +12 -12
  119. package/esm/toast/index.js +5 -2
  120. package/package.json +3 -3
  121. package/umd/_helpers/hooks.d.ts +1 -0
  122. package/umd/_helpers/hooks.js +44 -28
  123. package/umd/action-sheet/index.d.ts +2 -2
  124. package/umd/badge/index.js +2 -1
  125. package/umd/badge/style/css/index.css +12 -0
  126. package/umd/badge/style/index.less +3 -3
  127. package/umd/button/style/css/index.css +4 -0
  128. package/umd/button/style/index.less +1 -1
  129. package/umd/cell/style/css/index.css +7 -0
  130. package/umd/cell/style/index.less +4 -1
  131. package/umd/checkbox/style/css/index.css +13 -0
  132. package/umd/checkbox/style/index.less +3 -3
  133. package/umd/collapse/collapse.js +12 -6
  134. package/umd/dialog/index.d.ts +2 -2
  135. package/umd/form/style/css/index.css +16 -0
  136. package/umd/form/style/index.less +4 -4
  137. package/umd/image-preview/index.d.ts +2 -2
  138. package/umd/image-preview/index.js +4 -2
  139. package/umd/image-preview/style/css/index.css +3 -0
  140. package/umd/image-preview/style/index.less +4 -0
  141. package/umd/index.d.ts +12 -12
  142. package/umd/index.js +28 -28
  143. package/umd/load-more/index.d.ts +5 -0
  144. package/umd/load-more/index.js +2 -1
  145. package/umd/masking/index.d.ts +2 -2
  146. package/umd/masking/index.js +4 -2
  147. package/umd/notify/index.d.ts +8 -8
  148. package/umd/popover/popover.js +10 -2
  149. package/umd/popup/index.d.ts +2 -2
  150. package/umd/popup-swiper/index.d.ts +2 -2
  151. package/umd/radio/style/css/index.css +8 -0
  152. package/umd/radio/style/index.less +2 -2
  153. package/umd/rate/index.js +5 -3
  154. package/umd/rate/style/css/index.css +4 -0
  155. package/umd/rate/style/index.less +4 -0
  156. package/umd/slider/hooks/index.d.ts +1 -1
  157. package/umd/slider/popover.js +6 -2
  158. package/umd/stepper/hooks/useButtonClick.js +8 -9
  159. package/umd/sticky/index.d.ts +5 -0
  160. package/umd/sticky/index.js +20 -7
  161. package/umd/style.d.ts +13 -13
  162. package/umd/style.js +2 -2
  163. package/umd/switch/index.js +7 -2
  164. package/umd/switch/style/css/index.css +44 -0
  165. package/umd/switch/style/index.less +19 -7
  166. package/umd/tabs/demo/style/css/mobile.css +11 -0
  167. package/umd/tabs/demo/style/mobile.less +5 -1
  168. package/umd/tabs/index.js +14 -5
  169. package/umd/tabs/style/css/index.css +32 -7
  170. package/umd/tabs/style/index.less +9 -14
  171. package/umd/tabs/tab-cell-underline.js +16 -9
  172. package/umd/tabs/tab-cell.js +17 -11
  173. package/umd/tabs/tab-pane.js +4 -3
  174. package/umd/tabs/type.d.ts +1 -0
  175. package/umd/toast/index.d.ts +12 -12
  176. package/umd/toast/index.js +5 -2
@@ -157,6 +157,22 @@ var Sticky = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
157
157
  });
158
158
  framePendingRef.current = true;
159
159
  }, [containerEventHandler]);
160
+ var updatePlaceholderLayoutInner = (0, _react.useCallback)(function () {
161
+ if (placeholderRef.current) {
162
+ var contentHeight = contentCalculateHeightRef.current; // 当元素吸顶时,默认有一个占位的元素占住该元素的位置,避免布局产生抖动
163
+ // @en When an element is sticky to the top, a placeholder element occupies the element's position by default to avoid jitter in the layout
164
+
165
+ placeholderRef.current.style.height = (isStickyRef.current ? contentHeight : 0) + "px";
166
+ }
167
+ }, []);
168
+ var updatePlaceholderLayout = (0, _react.useCallback)(function () {
169
+ if (contentRef.current) {
170
+ var contentClientRect = contentRef.current.getBoundingClientRect();
171
+ contentCalculateHeightRef.current = contentClientRect.height;
172
+ }
173
+
174
+ updatePlaceholderLayoutInner();
175
+ }, []);
160
176
  (0, _react.useEffect)(function () {
161
177
  var containerEle = (0, _mobileUtils.getActualContainer)(getContainer);
162
178
  containerRef.current = containerEle || document.body;
@@ -179,18 +195,15 @@ var Sticky = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
179
195
  };
180
196
  }, [getContainer, getScrollContainer, recalculatePosition]);
181
197
  (0, _react.useEffect)(function () {
182
- if (placeholderRef.current) {
183
- // 当元素吸顶时,默认有一个占位的元素占住该元素的位置,避免布局产生抖动
184
- // @en When an element is sticky to the top, a placeholder element occupies the element's position by default to avoid jitter in the layout
185
- placeholderRef.current.style.height = (isStickyRef.current ? contentCalculateHeightRef.current : 0) + "px";
186
- }
198
+ updatePlaceholderLayoutInner();
187
199
  }, [isSticky, wasSticky]);
188
200
  (0, _react.useImperativeHandle)(ref, function () {
189
201
  return {
190
202
  dom: contentRef.current,
191
- recalculatePosition: recalculatePosition
203
+ recalculatePosition: recalculatePosition,
204
+ updatePlaceholderLayout: updatePlaceholderLayout
192
205
  };
193
- }, [recalculatePosition]);
206
+ }, [recalculatePosition, updatePlaceholderLayout]);
194
207
  var computedStyle = (0, _react.useMemo)(function () {
195
208
  return (0, _extends2.default)({}, style || {}, stickyStateStyle);
196
209
  }, [stickyStateStyle, style]);
package/cjs/style.d.ts CHANGED
@@ -1,35 +1,32 @@
1
1
  import '../style/public.less';
2
- import './button/style';
2
+ import './tabs/style';
3
+ import './sticky/style';
4
+ import './load-more/style';
5
+ import './cell/style';
3
6
  import './action-sheet/style';
4
7
  import './avatar/style';
5
8
  import './badge/style';
9
+ import './button/style';
6
10
  import './carousel/style';
7
- import './cell/style';
8
11
  import './checkbox/style';
9
12
  import './circle-progress/style';
10
13
  import './collapse/style';
11
14
  import './context-provider/style';
12
15
  import './count-down/style';
13
16
  import './date-picker/style';
14
- import './divider/style';
15
17
  import './dialog/style';
18
+ import './divider/style';
16
19
  import './dropdown/style';
17
20
  import './dropdown-menu/style';
18
21
  import './ellipsis/style';
19
22
  import './form/style';
20
- import './input/style';
21
- import './textarea/style';
22
- import './radio/style';
23
- import './image-picker/style';
24
- import './rate/style';
25
- import './slider/style';
26
23
  import './grid/style';
27
24
  import './image/style';
28
- import './show-monitor/style';
25
+ import './image-picker/style';
29
26
  import './image-preview/style';
30
27
  import './index-bar/style';
28
+ import './input/style';
31
29
  import './keyboard/style';
32
- import './load-more/style';
33
30
  import './loading/style';
34
31
  import './masking/style';
35
32
  import './nav-bar/style';
@@ -44,15 +41,18 @@ import './popup-swiper/style';
44
41
  import './portal/style';
45
42
  import './progress/style';
46
43
  import './pull-refresh/style';
44
+ import './radio/style';
45
+ import './rate/style';
47
46
  import './search-bar/style';
47
+ import './show-monitor/style';
48
+ import './slider/style';
48
49
  import './stepper/style';
49
50
  import './steps/style';
50
- import './sticky/style';
51
51
  import './swipe-action/style';
52
52
  import './swipe-load/style';
53
53
  import './switch/style';
54
54
  import './tab-bar/style';
55
- import './tabs/style';
56
55
  import './tag/style';
56
+ import './textarea/style';
57
57
  import './toast/style';
58
58
  import './transition/style';
package/cjs/style.js CHANGED
@@ -2,7 +2,13 @@
2
2
 
3
3
  require("../style/public.less");
4
4
 
5
- require("./button/style");
5
+ require("./tabs/style");
6
+
7
+ require("./sticky/style");
8
+
9
+ require("./load-more/style");
10
+
11
+ require("./cell/style");
6
12
 
7
13
  require("./action-sheet/style");
8
14
 
@@ -10,9 +16,9 @@ require("./avatar/style");
10
16
 
11
17
  require("./badge/style");
12
18
 
13
- require("./carousel/style");
19
+ require("./button/style");
14
20
 
15
- require("./cell/style");
21
+ require("./carousel/style");
16
22
 
17
23
  require("./checkbox/style");
18
24
 
@@ -26,10 +32,10 @@ require("./count-down/style");
26
32
 
27
33
  require("./date-picker/style");
28
34
 
29
- require("./divider/style");
30
-
31
35
  require("./dialog/style");
32
36
 
37
+ require("./divider/style");
38
+
33
39
  require("./dropdown/style");
34
40
 
35
41
  require("./dropdown-menu/style");
@@ -38,31 +44,19 @@ require("./ellipsis/style");
38
44
 
39
45
  require("./form/style");
40
46
 
41
- require("./input/style");
42
-
43
- require("./textarea/style");
44
-
45
- require("./radio/style");
46
-
47
- require("./image-picker/style");
48
-
49
- require("./rate/style");
50
-
51
- require("./slider/style");
52
-
53
47
  require("./grid/style");
54
48
 
55
49
  require("./image/style");
56
50
 
57
- require("./show-monitor/style");
51
+ require("./image-picker/style");
58
52
 
59
53
  require("./image-preview/style");
60
54
 
61
55
  require("./index-bar/style");
62
56
 
63
- require("./keyboard/style");
57
+ require("./input/style");
64
58
 
65
- require("./load-more/style");
59
+ require("./keyboard/style");
66
60
 
67
61
  require("./loading/style");
68
62
 
@@ -92,14 +86,20 @@ require("./progress/style");
92
86
 
93
87
  require("./pull-refresh/style");
94
88
 
89
+ require("./radio/style");
90
+
91
+ require("./rate/style");
92
+
95
93
  require("./search-bar/style");
96
94
 
95
+ require("./show-monitor/style");
96
+
97
+ require("./slider/style");
98
+
97
99
  require("./stepper/style");
98
100
 
99
101
  require("./steps/style");
100
102
 
101
- require("./sticky/style");
102
-
103
103
  require("./swipe-action/style");
104
104
 
105
105
  require("./swipe-load/style");
@@ -108,10 +108,10 @@ require("./switch/style");
108
108
 
109
109
  require("./tab-bar/style");
110
110
 
111
- require("./tabs/style");
112
-
113
111
  require("./tag/style");
114
112
 
113
+ require("./textarea/style");
114
+
115
115
  require("./toast/style");
116
116
 
117
117
  require("./transition/style");
@@ -16,6 +16,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
16
16
  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; }
17
17
 
18
18
  var Switch = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
19
+ var _useContext = (0, _react.useContext)(_contextProvider.GlobalContext),
20
+ useRtl = _useContext.useRtl;
21
+
19
22
  var system = (0, _helpers.useSystem)();
20
23
  var className = props.className,
21
24
  style = props.style,
@@ -83,13 +86,15 @@ var Switch = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
83
86
 
84
87
  var touchEndX = e.changedTouches && e.changedTouches[0] ? e.changedTouches[0].clientX : 0;
85
88
  var distance = touchEndX - touchStartX;
89
+ var swipeRight = useRtl ? distance < 0 : distance > 0;
90
+ var swipeLeft = useRtl ? distance > 0 : distance < 0;
86
91
  var newChecked = false; // 右滑打开
87
92
  // @en Swipe right to open
88
93
 
89
- if (distance > 0) {
94
+ if (swipeRight) {
90
95
  newChecked = true; // 左滑关闭
91
96
  // @en Swipe left to close
92
- } else if (distance < 0) {
97
+ } else if (swipeLeft) {
93
98
  newChecked = false; // 点击时取反
94
99
  // @en Invert on clicking
95
100
  } else {
@@ -44,15 +44,31 @@
44
44
  right: auto;
45
45
  left: 5PX ;
46
46
  }
47
+ [dir="rtl"] .arco-switch.type-android.checked .arco-switch-text {
48
+ right: initial;
49
+ left: auto;
50
+ }
51
+ [dir="rtl"] .arco-switch.type-android.checked .arco-switch-text {
52
+ left: initial;
53
+ right: 5PX ;
54
+ }
47
55
  .arco-switch.type-android.checked .arco-switch-inner {
48
56
  -webkit-transform: translateX(16PX) ;
49
57
  transform: translateX(16PX) ;
50
58
  }
59
+ [dir="rtl"] .arco-switch.type-android.checked .arco-switch-inner {
60
+ -webkit-transform: rotate(180deg) translateX(16PX) ;
61
+ transform: rotate(180deg) translateX(16PX) ;
62
+ }
51
63
  .arco-switch.type-android .arco-switch-inner {
52
64
  width: 20PX ;
53
65
  height: 20PX ;
54
66
  box-shadow: 0 2PX 4PX 0 rgba(0, 0, 0, 0.08) ;
55
67
  }
68
+ [dir="rtl"] .arco-switch.type-android .arco-switch-inner {
69
+ -webkit-transform: rotate(180deg);
70
+ transform: rotate(180deg);
71
+ }
56
72
  .arco-switch.type-android.disabled.checked {
57
73
  background-color: #94bfff ;
58
74
  }
@@ -63,6 +79,10 @@
63
79
  font-size: 12PX ;
64
80
  right: 5PX ;
65
81
  }
82
+ [dir="rtl"] .arco-switch.type-android .arco-switch-text {
83
+ right: initial;
84
+ left: 5PX ;
85
+ }
66
86
  .arco-switch.type-ios {
67
87
  width: 1.02rem ;
68
88
  height: 0.62rem ;
@@ -83,11 +103,23 @@
83
103
  right: auto;
84
104
  left: 0.12rem ;
85
105
  }
106
+ [dir="rtl"] .arco-switch.type-ios.checked .arco-switch-text {
107
+ right: initial;
108
+ left: auto;
109
+ }
110
+ [dir="rtl"] .arco-switch.type-ios.checked .arco-switch-text {
111
+ left: initial;
112
+ right: 0.12rem ;
113
+ }
86
114
  .arco-switch.type-ios.checked .arco-switch-inner {
87
115
  -webkit-transform: translateX(0.4rem) ;
88
116
  transform: translateX(0.4rem) ;
89
117
  box-shadow: 0 3PX 2PX 0 rgba(0, 0, 0, 0.12) ;
90
118
  }
119
+ [dir="rtl"] .arco-switch.type-ios.checked .arco-switch-inner {
120
+ -webkit-transform: rotate(180deg) translateX(0.4rem) ;
121
+ transform: rotate(180deg) translateX(0.4rem) ;
122
+ }
91
123
  .arco-switch.type-ios.disabled.checked {
92
124
  opacity: 0.3 ;
93
125
  }
@@ -95,6 +127,10 @@
95
127
  font-size: 0.28rem ;
96
128
  right: 0.12rem ;
97
129
  }
130
+ [dir="rtl"] .arco-switch.type-ios .arco-switch-text {
131
+ right: initial;
132
+ left: 0.12rem ;
133
+ }
98
134
  .arco-switch.type-ios .arco-switch-inner {
99
135
  width: 0.54rem ;
100
136
  height: 0.54rem ;
@@ -136,6 +172,10 @@
136
172
  border-radius: 150%;
137
173
  }
138
174
  }
175
+ [dir="rtl"] .arco-switch.type-ios .arco-switch-inner {
176
+ -webkit-transform: rotate(180deg);
177
+ transform: rotate(180deg);
178
+ }
139
179
  .arco-switch.type-ios.disabled.checked {
140
180
  background-color: #4DD865 ;
141
181
  }
@@ -169,6 +209,10 @@
169
209
  -webkit-transition: all 0.2s ;
170
210
  transition: all 0.2s ;
171
211
  }
212
+ [dir="rtl"] .arco-switch-inner {
213
+ left: initial;
214
+ right: 0;
215
+ }
172
216
  .fully .arco-switch-inner {
173
217
  border-radius: 50% ;
174
218
  }
@@ -33,17 +33,23 @@
33
33
  &.checked {
34
34
  .use-var(background-color, switch-android-checked-background);
35
35
  .@{prefix}-switch-text {
36
- right: auto;
37
- .use-var(left, switch-android-text-gap-size);
36
+ .set-prop-with-rtl(right, auto);
37
+ .use-var-with-rtl(left, switch-android-text-gap-size);
38
38
  }
39
39
  .@{prefix}-switch-inner {
40
40
  .use-var(transform, switch-android-checked-inner-transform);
41
+ [dir="rtl"] & {
42
+ .use-var(transform, switch-android-checked-inner-transform, "rotate(180deg)");
43
+ }
41
44
  }
42
45
  }
43
46
  .@{prefix}-switch-inner {
44
47
  .use-var(width, switch-android-inner-diameter-size);
45
48
  .use-var(height, switch-android-inner-diameter-size);
46
49
  .use-var(box-shadow, switch-android-inner-box-shadow);
50
+ [dir="rtl"] & {
51
+ transform: rotate(180deg);
52
+ }
47
53
  }
48
54
 
49
55
  &.disabled {
@@ -58,7 +64,7 @@
58
64
  }
59
65
  .@{prefix}-switch-text {
60
66
  .use-var(font-size, switch-android-text-font-size);
61
- .use-var(right, switch-android-text-gap-size);
67
+ .use-var-with-rtl(right, switch-android-text-gap-size);
62
68
  }
63
69
  }
64
70
 
@@ -80,12 +86,15 @@
80
86
  &.checked {
81
87
  .use-var(background-color, switch-ios-checked-background);
82
88
  .@{prefix}-switch-text {
83
- right: auto;
84
- .use-var(left, switch-ios-text-gap-size);
89
+ .set-prop-with-rtl(right, auto);
90
+ .use-var-with-rtl(left, switch-ios-text-gap-size);
85
91
  }
86
92
  .@{prefix}-switch-inner {
87
93
  .use-var(transform, switch-ios-checked-inner-transform);
88
94
  .use-var(box-shadow, switch-ios-inner-box-shadow);
95
+ [dir="rtl"] & {
96
+ .use-var(transform, switch-ios-checked-inner-transform, "rotate(180deg)");
97
+ }
89
98
  }
90
99
  }
91
100
 
@@ -94,12 +103,15 @@
94
103
  }
95
104
  .@{prefix}-switch-text {
96
105
  .use-var(font-size, switch-ios-text-font-size);
97
- .use-var(right, switch-ios-text-gap-size);
106
+ .use-var-with-rtl(right, switch-ios-text-gap-size);
98
107
  }
99
108
  .@{prefix}-switch-inner {
100
109
  .use-var(width, switch-ios-inner-diameter-size);
101
110
  .use-var(height, switch-ios-inner-diameter-size);
102
111
  .onepx-border-var(all, switch-ios-inner-border-color, 50%);
112
+ [dir="rtl"] & {
113
+ transform: rotate(180deg);
114
+ }
103
115
  }
104
116
 
105
117
  &.disabled {
@@ -127,7 +139,7 @@
127
139
 
128
140
  &-inner {
129
141
  position: relative;
130
- left: 0;
142
+ .set-prop-with-rtl(left, 0);
131
143
  top: 0;
132
144
  display: flex;
133
145
  align-items: center;
@@ -43,6 +43,17 @@
43
43
  justify-content: flex-end;
44
44
  font-weight: bold;
45
45
  }
46
+ [dir="rtl"] #demo-tabs .demo-tabs-add-extra {
47
+ right: initial;
48
+ left: 0;
49
+ }
50
+ [dir="rtl"] #demo-tabs .demo-tabs-add-extra {
51
+ -webkit-box-pack: start;
52
+ -webkit-justify-content: flex-start;
53
+ justify-content: flex-start;
54
+ -webkit-transform: rotate(180deg);
55
+ transform: rotate(180deg);
56
+ }
46
57
  #demo-tabs .demo-tab-custom-bar .arco-tab-cell-container-wrap {
47
58
  height: 1.52rem;
48
59
  }
@@ -24,7 +24,7 @@
24
24
 
25
25
  .demo-tabs-add-extra {
26
26
  position: absolute;
27
- right: 0;
27
+ .set-prop-with-rtl(right, 0);
28
28
  top: 0;
29
29
  background: linear-gradient(270deg, #fff 66.04%, rgba(255, 255, 255, 0) 105%);
30
30
  .rem(width, 64);
@@ -36,6 +36,10 @@
36
36
  align-items: center;
37
37
  justify-content: flex-end;
38
38
  font-weight: bold;
39
+ [dir="rtl"] & {
40
+ justify-content: flex-start;
41
+ transform: rotate(180deg);
42
+ }
39
43
  }
40
44
 
41
45
  .demo-tab-custom-bar {
package/cjs/tabs/index.js CHANGED
@@ -150,6 +150,10 @@ var Tabs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
150
150
  tabBarStopPropagation = _props$tabBarStopProp === void 0 ? true : _props$tabBarStopProp,
151
151
  _props$swipeEnergySav = props.swipeEnergySaving,
152
152
  swipeEnergySaving = _props$swipeEnergySav === void 0 ? false : _props$swipeEnergySav;
153
+
154
+ var _useContext = (0, _react.useContext)(_contextProvider.GlobalContext),
155
+ useRtl = _useContext.useRtl;
156
+
153
157
  var domRef = (0, _react.useRef)(null);
154
158
  var cellRef = (0, _react.useRef)(null);
155
159
  var paneRef = (0, _react.useRef)(null);
@@ -201,6 +205,8 @@ var Tabs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
201
205
  var allPanes = getAllPanes();
202
206
  var tabDirection = ['top', 'bottom'].indexOf(tabBarPosition) !== -1 ? 'vertical' : 'horizontal';
203
207
  var canSwipe = mode === 'swipe' && !disabled && swipeable && tabDirection === 'vertical' && tabs.length > 1;
208
+ var horizontalUseRtl = tabDirection === 'vertical' && useRtl;
209
+ var rtlRatio = horizontalUseRtl ? -1 : 1;
204
210
  (0, _react.useImperativeHandle)(ref, function () {
205
211
  return {
206
212
  dom: domRef.current,
@@ -320,6 +326,7 @@ var Tabs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
320
326
  var posDisY = touchMoveY - touchStartYRef.current;
321
327
  var absDisX = Math.abs(posDisX);
322
328
  var absDisY = Math.abs(posDisY);
329
+ var comparedDis = posDisX * rtlRatio;
323
330
 
324
331
  if (scrollingRef.current === null) {
325
332
  scrollingRef.current = absDisX < absDisY;
@@ -337,10 +344,10 @@ var Tabs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
337
344
  return;
338
345
  }
339
346
 
340
- if (activeIndexRef.current === 0 && posDisX > 0 || activeIndexRef.current === tabs.length - 1 && posDisX < 0) {
347
+ if (activeIndexRef.current === 0 && comparedDis > 0 || activeIndexRef.current === tabs.length - 1 && comparedDis < 0) {
341
348
  if (!touchStoppedRef.current && absDisX > stopTouchThreshold) {
342
349
  touchStoppedRef.current = true;
343
- onTouchStopped && onTouchStopped(posDisX >= 0 ? -1 : 1);
350
+ onTouchStopped && onTouchStopped(comparedDis >= 0 ? -1 : 1);
344
351
  }
345
352
 
346
353
  setDistance(0);
@@ -390,10 +397,11 @@ var Tabs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
390
397
  var index = activeIndexRef.current;
391
398
  var needJump = Math.abs(dis) > maxSlice && Math.abs(dis) > distanceToChangeTab || Math.abs(speed) > speedToChangeTab;
392
399
  var newIndex = index;
400
+ var comparedDis = dis * rtlRatio;
393
401
 
394
- if (dis > 0 && needJump) {
402
+ if (comparedDis > 0 && needJump) {
395
403
  newIndex = index - 1;
396
- } else if (dis < 0 && needJump) {
404
+ } else if (comparedDis < 0 && needJump) {
397
405
  newIndex = index + 1;
398
406
  }
399
407
 
@@ -537,7 +545,8 @@ var Tabs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
537
545
  tabPaneExtra: tabPaneExtra,
538
546
  autoHeight: autoHeight,
539
547
  onScroll: onScroll,
540
- swipeEnergySaving: swipeEnergySaving
548
+ swipeEnergySaving: swipeEnergySaving,
549
+ rtlRatio: rtlRatio
541
550
  }, commonProps)));
542
551
  });
543
552
  });
@@ -368,11 +368,12 @@
368
368
  -webkit-flex: 1;
369
369
  flex: 1;
370
370
  }
371
- .arco-tab-cell.vertical:not(.custom).line {
371
+ .arco-tab-cell.vertical:not(.custom).line:not(.last) {
372
372
  margin-right: 0.8rem ;
373
373
  }
374
- .arco-tab-cell.vertical:not(.custom).line.last {
375
- margin-right: 0;
374
+ [dir="rtl"] .arco-tab-cell.vertical:not(.custom).line:not(.last) {
375
+ margin-right: initial;
376
+ margin-left: 0.8rem ;
376
377
  }
377
378
  .arco-tab-cell.vertical:not(.custom).line.active,
378
379
  .arco-tab-cell.vertical:not(.custom).line-divide.active {
@@ -407,29 +408,53 @@
407
408
  .arco-tab-cell.vertical:not(.custom).card:not(:last-child) {
408
409
  border-right: 1PX solid #165dff ;
409
410
  }
411
+ [dir="rtl"] .arco-tab-cell.vertical:not(.custom).card:not(:last-child) {
412
+ border-right: initial;
413
+ border-left: 1PX solid #165dff ;
414
+ }
410
415
  .arco-tab-cell.vertical:not(.custom).card:first-of-type {
411
416
  border-top-left-radius: 2PX ;
412
417
  border-bottom-left-radius: 2PX ;
413
418
  }
419
+ [dir="rtl"] .arco-tab-cell.vertical:not(.custom).card:first-of-type {
420
+ border-top-left-radius: initial;
421
+ border-top-right-radius: 2PX ;
422
+ }
423
+ [dir="rtl"] .arco-tab-cell.vertical:not(.custom).card:first-of-type {
424
+ border-bottom-left-radius: initial;
425
+ border-bottom-right-radius: 2PX ;
426
+ }
414
427
  .arco-tab-cell.vertical:not(.custom).card:last-of-type {
415
428
  border-top-right-radius: 2PX ;
416
429
  border-bottom-right-radius: 2PX ;
417
430
  }
431
+ [dir="rtl"] .arco-tab-cell.vertical:not(.custom).card:last-of-type {
432
+ border-top-right-radius: initial;
433
+ border-top-left-radius: 2PX ;
434
+ }
435
+ [dir="rtl"] .arco-tab-cell.vertical:not(.custom).card:last-of-type {
436
+ border-bottom-right-radius: initial;
437
+ border-bottom-left-radius: 2PX ;
438
+ }
418
439
  .arco-tab-cell.vertical:not(.custom).card.android,
419
440
  .arco-tab-cell.vertical:not(.custom).tag-divide.android {
420
441
  padding-top: 0.04rem;
421
442
  }
422
443
  .arco-tab-cell.vertical:not(.custom).tag,
423
444
  .arco-tab-cell.vertical:not(.custom).tag-divide {
424
- margin-right: 0.32rem ;
425
445
  padding: 0 0.32rem ;
426
446
  border-radius: 2rem;
427
447
  background: #f7f8fA ;
428
448
  color: #1d2129 ;
429
449
  }
430
- .arco-tab-cell.vertical:not(.custom).tag.last,
431
- .arco-tab-cell.vertical:not(.custom).tag-divide.last {
432
- margin-right: 0;
450
+ .arco-tab-cell.vertical:not(.custom).tag:not(.last),
451
+ .arco-tab-cell.vertical:not(.custom).tag-divide:not(.last) {
452
+ margin-right: 0.32rem ;
453
+ }
454
+ [dir="rtl"] .arco-tab-cell.vertical:not(.custom).tag:not(.last),
455
+ [dir="rtl"] .arco-tab-cell.vertical:not(.custom).tag-divide:not(.last) {
456
+ margin-right: initial;
457
+ margin-left: 0.32rem ;
433
458
  }
434
459
  .arco-tab-cell.vertical:not(.custom).tag.active,
435
460
  .arco-tab-cell.vertical:not(.custom).tag-divide.active {
@@ -310,12 +310,8 @@
310
310
 
311
311
  &:not(.custom) {
312
312
 
313
- &.line {
314
- .use-var(margin-right, tabs-tab-bar-line-gutter);
315
-
316
- &.last {
317
- margin-right: 0;
318
- }
313
+ &.line:not(.last) {
314
+ .use-var-with-rtl(margin-right, tabs-tab-bar-line-gutter);
319
315
  }
320
316
 
321
317
  &.line,
@@ -337,17 +333,17 @@
337
333
  }
338
334
 
339
335
  &:not(:last-child) {
340
- .use-var(border-right, tabs-tab-bar-card-color, 1PX solid);
336
+ .use-var-with-rtl(border-right, tabs-tab-bar-card-color, 1PX solid);
341
337
  }
342
338
 
343
339
  &:first-of-type {
344
- .use-var(border-top-left-radius, tabs-tab-bar-card-border-radius);
345
- .use-var(border-bottom-left-radius, tabs-tab-bar-card-border-radius);
340
+ .use-var-with-rtl(border-top-left-radius, tabs-tab-bar-card-border-radius);
341
+ .use-var-with-rtl(border-bottom-left-radius, tabs-tab-bar-card-border-radius);
346
342
  }
347
343
 
348
344
  &:last-of-type {
349
- .use-var(border-top-right-radius, tabs-tab-bar-card-border-radius);
350
- .use-var(border-bottom-right-radius, tabs-tab-bar-card-border-radius);
345
+ .use-var-with-rtl(border-top-right-radius, tabs-tab-bar-card-border-radius);
346
+ .use-var-with-rtl(border-bottom-right-radius, tabs-tab-bar-card-border-radius);
351
347
  }
352
348
  }
353
349
 
@@ -361,14 +357,13 @@
361
357
 
362
358
  &.tag,
363
359
  &.tag-divide {
364
- .use-var(margin-right, tabs-tab-bar-tag-gutter);
365
360
  .use-var(padding, tabs-tab-bar-tag-padding);
366
361
  .rem(border-radius, 100);
367
362
  .use-var(background, tabs-tab-bar-tag-background);
368
363
  .use-var(color, tabs-tab-bar-tag-text-color);
369
364
 
370
- &.last {
371
- margin-right: 0;
365
+ &:not(.last) {
366
+ .use-var-with-rtl(margin-right, tabs-tab-bar-tag-gutter);
372
367
  }
373
368
 
374
369
  &.active {