@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.
- package/CHANGELOG.md +33 -0
- package/README.en-US.md +2 -2
- package/README.md +2 -2
- package/cjs/_helpers/hooks.d.ts +1 -0
- package/cjs/_helpers/hooks.js +44 -28
- package/cjs/action-sheet/index.d.ts +2 -2
- package/cjs/badge/index.js +2 -1
- package/cjs/badge/style/css/index.css +12 -0
- package/cjs/badge/style/index.less +3 -3
- package/cjs/button/style/css/index.css +4 -0
- package/cjs/button/style/index.less +1 -1
- package/cjs/cell/style/css/index.css +7 -0
- package/cjs/cell/style/index.less +4 -1
- package/cjs/checkbox/style/css/index.css +13 -0
- package/cjs/checkbox/style/index.less +3 -3
- package/cjs/collapse/collapse.js +12 -6
- package/cjs/dialog/index.d.ts +2 -2
- package/cjs/form/style/css/index.css +16 -0
- package/cjs/form/style/index.less +4 -4
- package/cjs/image-preview/index.d.ts +2 -2
- package/cjs/image-preview/index.js +4 -2
- package/cjs/image-preview/style/css/index.css +3 -0
- package/cjs/image-preview/style/index.less +4 -0
- package/cjs/index.d.ts +12 -12
- package/cjs/index.js +46 -46
- package/cjs/load-more/index.d.ts +5 -0
- package/cjs/load-more/index.js +2 -1
- package/cjs/masking/index.d.ts +2 -2
- package/cjs/masking/index.js +4 -2
- package/cjs/notify/index.d.ts +8 -8
- package/cjs/popover/popover.js +10 -2
- package/cjs/popup/index.d.ts +2 -2
- package/cjs/popup-swiper/index.d.ts +2 -2
- package/cjs/radio/style/css/index.css +8 -0
- package/cjs/radio/style/index.less +2 -2
- package/cjs/rate/index.js +5 -3
- package/cjs/rate/style/css/index.css +4 -0
- package/cjs/rate/style/index.less +4 -0
- package/cjs/slider/hooks/index.d.ts +1 -1
- package/cjs/slider/popover.js +6 -2
- package/cjs/stepper/hooks/useButtonClick.js +8 -9
- package/cjs/sticky/index.d.ts +5 -0
- package/cjs/sticky/index.js +20 -7
- package/cjs/style.d.ts +13 -13
- package/cjs/style.js +24 -24
- package/cjs/switch/index.js +7 -2
- package/cjs/switch/style/css/index.css +44 -0
- package/cjs/switch/style/index.less +19 -7
- package/cjs/tabs/demo/style/css/mobile.css +11 -0
- package/cjs/tabs/demo/style/mobile.less +5 -1
- package/cjs/tabs/index.js +14 -5
- package/cjs/tabs/style/css/index.css +32 -7
- package/cjs/tabs/style/index.less +9 -14
- package/cjs/tabs/tab-cell-underline.js +14 -5
- package/cjs/tabs/tab-cell.js +15 -7
- package/cjs/tabs/tab-pane.js +4 -3
- package/cjs/tabs/type.d.ts +1 -0
- package/cjs/toast/index.d.ts +12 -12
- package/cjs/toast/index.js +5 -2
- package/dist/index.js +13914 -13836
- package/dist/index.min.js +4 -4
- package/dist/style.css +3366 -3236
- package/dist/style.min.css +1 -1
- package/esm/_helpers/hooks.d.ts +1 -0
- package/esm/_helpers/hooks.js +43 -29
- package/esm/action-sheet/index.d.ts +2 -2
- package/esm/badge/index.js +2 -1
- package/esm/badge/style/css/index.css +12 -0
- package/esm/badge/style/index.less +3 -3
- package/esm/button/style/css/index.css +4 -0
- package/esm/button/style/index.less +1 -1
- package/esm/cell/style/css/index.css +7 -0
- package/esm/cell/style/index.less +4 -1
- package/esm/checkbox/style/css/index.css +13 -0
- package/esm/checkbox/style/index.less +3 -3
- package/esm/collapse/collapse.js +14 -8
- package/esm/dialog/index.d.ts +2 -2
- package/esm/form/style/css/index.css +16 -0
- package/esm/form/style/index.less +4 -4
- package/esm/image-preview/index.d.ts +2 -2
- package/esm/image-preview/index.js +4 -2
- package/esm/image-preview/style/css/index.css +3 -0
- package/esm/image-preview/style/index.less +4 -0
- package/esm/index.d.ts +12 -12
- package/esm/index.js +12 -12
- package/esm/load-more/index.d.ts +5 -0
- package/esm/load-more/index.js +2 -1
- package/esm/masking/index.d.ts +2 -2
- package/esm/masking/index.js +4 -2
- package/esm/notify/index.d.ts +8 -8
- package/esm/popover/popover.js +10 -2
- package/esm/popup/index.d.ts +2 -2
- package/esm/popup-swiper/index.d.ts +2 -2
- package/esm/radio/style/css/index.css +8 -0
- package/esm/radio/style/index.less +2 -2
- package/esm/rate/index.js +5 -3
- package/esm/rate/style/css/index.css +4 -0
- package/esm/rate/style/index.less +4 -0
- package/esm/slider/hooks/index.d.ts +1 -1
- package/esm/slider/popover.js +7 -3
- package/esm/stepper/hooks/useButtonClick.js +8 -9
- package/esm/sticky/index.d.ts +5 -0
- package/esm/sticky/index.js +20 -7
- package/esm/style.d.ts +13 -13
- package/esm/style.js +13 -13
- package/esm/switch/index.js +9 -4
- package/esm/switch/style/css/index.css +44 -0
- package/esm/switch/style/index.less +19 -7
- package/esm/tabs/demo/style/css/mobile.css +11 -0
- package/esm/tabs/demo/style/mobile.less +5 -1
- package/esm/tabs/index.js +16 -7
- package/esm/tabs/style/css/index.css +32 -7
- package/esm/tabs/style/index.less +9 -14
- package/esm/tabs/tab-cell-underline.js +14 -6
- package/esm/tabs/tab-cell.js +15 -8
- package/esm/tabs/tab-pane.js +4 -3
- package/esm/tabs/type.d.ts +1 -0
- package/esm/toast/index.d.ts +12 -12
- package/esm/toast/index.js +5 -2
- package/package.json +3 -3
- package/umd/_helpers/hooks.d.ts +1 -0
- package/umd/_helpers/hooks.js +44 -28
- package/umd/action-sheet/index.d.ts +2 -2
- package/umd/badge/index.js +2 -1
- package/umd/badge/style/css/index.css +12 -0
- package/umd/badge/style/index.less +3 -3
- package/umd/button/style/css/index.css +4 -0
- package/umd/button/style/index.less +1 -1
- package/umd/cell/style/css/index.css +7 -0
- package/umd/cell/style/index.less +4 -1
- package/umd/checkbox/style/css/index.css +13 -0
- package/umd/checkbox/style/index.less +3 -3
- package/umd/collapse/collapse.js +12 -6
- package/umd/dialog/index.d.ts +2 -2
- package/umd/form/style/css/index.css +16 -0
- package/umd/form/style/index.less +4 -4
- package/umd/image-preview/index.d.ts +2 -2
- package/umd/image-preview/index.js +4 -2
- package/umd/image-preview/style/css/index.css +3 -0
- package/umd/image-preview/style/index.less +4 -0
- package/umd/index.d.ts +12 -12
- package/umd/index.js +28 -28
- package/umd/load-more/index.d.ts +5 -0
- package/umd/load-more/index.js +2 -1
- package/umd/masking/index.d.ts +2 -2
- package/umd/masking/index.js +4 -2
- package/umd/notify/index.d.ts +8 -8
- package/umd/popover/popover.js +10 -2
- package/umd/popup/index.d.ts +2 -2
- package/umd/popup-swiper/index.d.ts +2 -2
- package/umd/radio/style/css/index.css +8 -0
- package/umd/radio/style/index.less +2 -2
- package/umd/rate/index.js +5 -3
- package/umd/rate/style/css/index.css +4 -0
- package/umd/rate/style/index.less +4 -0
- package/umd/slider/hooks/index.d.ts +1 -1
- package/umd/slider/popover.js +6 -2
- package/umd/stepper/hooks/useButtonClick.js +8 -9
- package/umd/sticky/index.d.ts +5 -0
- package/umd/sticky/index.js +20 -7
- package/umd/style.d.ts +13 -13
- package/umd/style.js +2 -2
- package/umd/switch/index.js +7 -2
- package/umd/switch/style/css/index.css +44 -0
- package/umd/switch/style/index.less +19 -7
- package/umd/tabs/demo/style/css/mobile.css +11 -0
- package/umd/tabs/demo/style/mobile.less +5 -1
- package/umd/tabs/index.js +14 -5
- package/umd/tabs/style/css/index.css +32 -7
- package/umd/tabs/style/index.less +9 -14
- package/umd/tabs/tab-cell-underline.js +16 -9
- package/umd/tabs/tab-cell.js +17 -11
- package/umd/tabs/tab-pane.js +4 -3
- package/umd/tabs/type.d.ts +1 -0
- package/umd/toast/index.d.ts +12 -12
- package/umd/toast/index.js +5 -2
package/cjs/sticky/index.js
CHANGED
@@ -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
|
-
|
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 './
|
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 './
|
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("./
|
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("./
|
19
|
+
require("./button/style");
|
14
20
|
|
15
|
-
require("./
|
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("./
|
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("./
|
57
|
+
require("./input/style");
|
64
58
|
|
65
|
-
require("./
|
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");
|
package/cjs/switch/index.js
CHANGED
@@ -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 (
|
94
|
+
if (swipeRight) {
|
90
95
|
newChecked = true; // 左滑关闭
|
91
96
|
// @en Swipe left to close
|
92
|
-
} else if (
|
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
|
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
|
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
|
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
|
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 &&
|
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(
|
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 (
|
402
|
+
if (comparedDis > 0 && needJump) {
|
395
403
|
newIndex = index - 1;
|
396
|
-
} else if (
|
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:
|
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:
|
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
|
-
|
371
|
-
margin-right
|
365
|
+
&:not(.last) {
|
366
|
+
.use-var-with-rtl(margin-right, tabs-tab-bar-tag-gutter);
|
372
367
|
}
|
373
368
|
|
374
369
|
&.active {
|