@arco-design/mobile-react 2.30.2 → 2.30.3
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 +12 -0
- package/README.en-US.md +2 -2
- package/README.md +2 -2
- package/cjs/form/type.d.ts +2 -2
- package/cjs/image-preview/index.d.ts +6 -0
- package/cjs/image-preview/index.js +48 -14
- package/cjs/image-preview/style/css/index.css +2 -1
- package/cjs/image-preview/style/index.less +2 -1
- package/cjs/popover/style/css/index.css +9 -2
- package/cjs/popover/style/css/menu.css +4 -0
- package/cjs/popover/style/index.less +1 -2
- package/cjs/popover/style/menu.less +1 -1
- package/cjs/slider/hooks/useSliderEvents.js +14 -8
- package/cjs/slider/hooks/useSliderStyle.js +13 -7
- package/cjs/slider/index.js +4 -2
- package/cjs/slider/marks.js +4 -2
- package/cjs/slider/style/css/index.css +28 -0
- package/cjs/slider/style/index.less +13 -4
- package/dist/index.js +97 -52
- package/dist/index.min.js +4 -4
- package/dist/style.css +36 -3
- package/dist/style.min.css +1 -1
- package/esm/form/type.d.ts +2 -2
- package/esm/image-preview/index.d.ts +6 -0
- package/esm/image-preview/index.js +48 -14
- package/esm/image-preview/style/css/index.css +2 -1
- package/esm/image-preview/style/index.less +2 -1
- package/esm/popover/style/css/index.css +9 -2
- package/esm/popover/style/css/menu.css +4 -0
- package/esm/popover/style/index.less +1 -2
- package/esm/popover/style/menu.less +1 -1
- package/esm/slider/hooks/useSliderEvents.js +13 -8
- package/esm/slider/hooks/useSliderStyle.js +12 -7
- package/esm/slider/index.js +4 -2
- package/esm/slider/marks.js +4 -2
- package/esm/slider/style/css/index.css +28 -0
- package/esm/slider/style/index.less +13 -4
- package/package.json +3 -3
- package/tokens/app/arcodesign/default/css-variables.less +1 -1
- package/tokens/app/arcodesign/default/index.d.ts +1 -1
- package/tokens/app/arcodesign/default/index.js +1 -1
- package/tokens/app/arcodesign/default/index.json +7 -7
- package/tokens/app/arcodesign/default/index.less +1 -1
- package/umd/form/type.d.ts +2 -2
- package/umd/image-preview/index.d.ts +6 -0
- package/umd/image-preview/index.js +48 -14
- package/umd/image-preview/style/css/index.css +2 -1
- package/umd/image-preview/style/index.less +2 -1
- package/umd/popover/style/css/index.css +9 -2
- package/umd/popover/style/css/menu.css +4 -0
- package/umd/popover/style/index.less +1 -2
- package/umd/popover/style/menu.less +1 -1
- package/umd/slider/hooks/useSliderEvents.js +16 -12
- package/umd/slider/hooks/useSliderStyle.js +15 -11
- package/umd/slider/index.js +4 -2
- package/umd/slider/marks.js +4 -2
- package/umd/slider/style/css/index.css +28 -0
- package/umd/slider/style/index.less +13 -4
package/CHANGELOG.md
CHANGED
@@ -3,6 +3,18 @@
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
5
5
|
|
6
|
+
## [2.30.3](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.30.2...@arco-design/mobile-react@2.30.3) (2023-11-24)
|
7
|
+
|
8
|
+
|
9
|
+
### Bug Fixes
|
10
|
+
|
11
|
+
* `ImagePreview` support shrinking animation before closed ([#195](https://github.com/arco-design/arco-design-mobile/issues/195)) ([7420bd5](https://github.com/arco-design/arco-design-mobile/commit/7420bd533a6e22a38a6fbd64407918580f64e095))
|
12
|
+
* support rtl for `Slider` & `Popover` ([#200](https://github.com/arco-design/arco-design-mobile/issues/200)) ([1756c8a](https://github.com/arco-design/arco-design-mobile/commit/1756c8a875f5e6fb3f8bdee7222d69c32a142ec3))
|
13
|
+
|
14
|
+
|
15
|
+
|
16
|
+
|
17
|
+
|
6
18
|
## [2.30.2](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.30.1...@arco-design/mobile-react@2.30.2) (2023-11-09)
|
7
19
|
|
8
20
|
|
package/README.en-US.md
CHANGED
@@ -59,8 +59,8 @@ React & ReactDOM: **<a href="https://reactjs.org/docs/cdn-links.html" target="_b
|
|
59
59
|
React Transition Group: **<a href="https://reactcommunity.org/react-transition-group/" target="_blank">Click here</a>**
|
60
60
|
|
61
61
|
```
|
62
|
-
<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.30.
|
63
|
-
<script src="https://unpkg.com/@arco-design/mobile-react@2.30.
|
62
|
+
<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.30.2/dist/style.min.css">
|
63
|
+
<script src="https://unpkg.com/@arco-design/mobile-react@2.30.2/dist/index.min.js"></script>
|
64
64
|
```
|
65
65
|
|
66
66
|
## Full import
|
package/README.md
CHANGED
@@ -59,8 +59,8 @@ React & ReactDOM: **<a href="https://reactjs.org/docs/cdn-links.html" target="
|
|
59
59
|
React Transition Group: **<a href="https://reactcommunity.org/react-transition-group/" target="_blank">戳这里获取</a>**
|
60
60
|
|
61
61
|
```
|
62
|
-
<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.30.
|
63
|
-
<script src="https://unpkg.com/@arco-design/mobile-react@2.30.
|
62
|
+
<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.30.2/dist/style.min.css">
|
63
|
+
<script src="https://unpkg.com/@arco-design/mobile-react@2.30.2/dist/index.min.js"></script>
|
64
64
|
```
|
65
65
|
|
66
66
|
## 引入全部
|
package/cjs/form/type.d.ts
CHANGED
@@ -99,7 +99,7 @@ export interface IFormDataMethods {
|
|
99
99
|
* 注册表单项
|
100
100
|
* @en Register field
|
101
101
|
*/
|
102
|
-
registerField: (name: string, self:
|
102
|
+
registerField: (name: string, self: any) => () => void;
|
103
103
|
}
|
104
104
|
export declare enum ValidateStatus {
|
105
105
|
Init = "init",
|
@@ -130,7 +130,7 @@ export interface InternalHooks {
|
|
130
130
|
* 注册表单项
|
131
131
|
* @en Register field
|
132
132
|
*/
|
133
|
-
registerField: (name: string, self:
|
133
|
+
registerField: (name: string, self: any) => () => void;
|
134
134
|
setInitialValues: (values: FieldItem) => void;
|
135
135
|
setCallbacks: (callbacks: Callbacks) => void;
|
136
136
|
}
|
@@ -18,6 +18,12 @@ export interface PreviewImageProps {
|
|
18
18
|
* @en Transition image url
|
19
19
|
*/
|
20
20
|
fallbackSrc?: string;
|
21
|
+
/**
|
22
|
+
* 过渡图到原图放大动效完成后,移除过渡图的延迟时间(ms),一般当原图过大时有调整需求
|
23
|
+
* @en After the transition image to the original image enlargement effect is completed, the delay time (ms) before the transition image is removed
|
24
|
+
* @default 30
|
25
|
+
*/
|
26
|
+
transitionEndDelay?: number;
|
21
27
|
/**
|
22
28
|
* 缩略图填充方式(backgroundPosition),默认top center
|
23
29
|
* @en Thumbnail fill mode (backgroundPosition), default value is top center
|
@@ -179,7 +179,7 @@ var ImagePreview = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
179
179
|
transformersRef.current = []; // 移除过渡图片
|
180
180
|
// @en Remove transition image
|
181
181
|
|
182
|
-
removeChild(
|
182
|
+
removeChild(transImageRef.current);
|
183
183
|
setTransImageInfo(null);
|
184
184
|
setPlaceholders({});
|
185
185
|
var mounted = isInitialMount.current;
|
@@ -222,7 +222,9 @@ var ImagePreview = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
222
222
|
|
223
223
|
function removeChild(child) {
|
224
224
|
try {
|
225
|
-
|
225
|
+
var _domRef$current, _domRef$current$query, _domRef$current$query2;
|
226
|
+
|
227
|
+
child && ((_domRef$current = domRef.current) == null ? void 0 : (_domRef$current$query = _domRef$current.querySelectorAll('.carousel-item')) == null ? void 0 : (_domRef$current$query2 = _domRef$current$query[innerIndexRef.current]) == null ? void 0 : _domRef$current$query2.removeChild(child));
|
226
228
|
} catch (e) {}
|
227
229
|
} // 监听滑动到上下边缘后还在往外滑动的操作,则关闭弹窗
|
228
230
|
// @en Monitor the operation of sliding out after sliding to the upper and lower edges, then close the popup
|
@@ -641,7 +643,41 @@ var ImagePreview = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
641
643
|
}
|
642
644
|
}
|
643
645
|
|
644
|
-
var handleClick = (0, _helpers.useSingleAndDoubleClick)(handleImageClick, handleImageDoubleClick);
|
646
|
+
var handleClick = (0, _helpers.useSingleAndDoubleClick)(handleImageClick, handleImageDoubleClick); // 当使用 getThumbBounds 时,关闭图片预览有缩小效果
|
647
|
+
// @en When using getThumbBounds, closing the image preview has a shrinking effect
|
648
|
+
|
649
|
+
function animateBeforeClose() {
|
650
|
+
var _imagesRef$current$in2;
|
651
|
+
|
652
|
+
var index = innerIndexRef.current;
|
653
|
+
var imageDom = (_imagesRef$current$in2 = imagesRef.current[index]) == null ? void 0 : _imagesRef$current$in2.image;
|
654
|
+
var thumbBounds = getThumbBounds == null ? void 0 : getThumbBounds(index);
|
655
|
+
|
656
|
+
if (!imageDom || !thumbBounds || !thumbBounds.width || !thumbBounds.height) {
|
657
|
+
return;
|
658
|
+
} // 小图超过一半在视野外时,不展示缩小效果
|
659
|
+
// @en When more than half of the thumbnail is outside the field of view, the zoom effect will not be displayed
|
660
|
+
|
661
|
+
|
662
|
+
if (thumbBounds.top < -1 * thumbBounds.height / 2 || thumbBounds.top > windowHeight - thumbBounds.height / 2 || thumbBounds.left < -1 * thumbBounds.width / 2 || thumbBounds.left > windowWidth - thumbBounds.width / 2) {
|
663
|
+
return;
|
664
|
+
}
|
665
|
+
|
666
|
+
var imageDomRect = imageDom.getBoundingClientRect();
|
667
|
+
|
668
|
+
if (!imageDomRect.width || !imageDomRect.height) {
|
669
|
+
return;
|
670
|
+
}
|
671
|
+
|
672
|
+
imageDom.classList.add('closing-animation');
|
673
|
+
setImageBounds(imageDom, imageDomRect, imageDomRect);
|
674
|
+
imageDom.style.objectPosition = images[index].thumbPosition || 'top center';
|
675
|
+
(0, _mobileUtils.nextTick)(function () {
|
676
|
+
imageDom.style.transitionDuration = displayDuration + "ms";
|
677
|
+
imageDom.style.webkitTransitionDuration = displayDuration + "ms";
|
678
|
+
setImageBounds(imageDom, thumbBounds, imageDomRect);
|
679
|
+
});
|
680
|
+
}
|
645
681
|
|
646
682
|
function goClose(e) {
|
647
683
|
if (closingRef.current) {
|
@@ -649,6 +685,7 @@ var ImagePreview = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
649
685
|
}
|
650
686
|
|
651
687
|
closingRef.current = true;
|
688
|
+
animateBeforeClose();
|
652
689
|
close(e);
|
653
690
|
}
|
654
691
|
/**
|
@@ -671,7 +708,7 @@ var ImagePreview = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
671
708
|
|
672
709
|
|
673
710
|
function setDisplayAnimation(index) {
|
674
|
-
var _imagesStatusRef$curr4;
|
711
|
+
var _imagesStatusRef$curr4, _domRef$current2, _domRef$current2$quer, _domRef$current2$quer2;
|
675
712
|
|
676
713
|
var firstLoaded = (_imagesStatusRef$curr4 = imagesStatusRef.current[index]) == null ? void 0 : _imagesStatusRef$curr4.firstLoaded;
|
677
714
|
var fallbackSrc = replaceFallbackWhenLoaded && firstLoaded ? images[index].src : images[index].fallbackSrc; // 用户设置了getThumbBounds和images的fallbackSrc属性才有放大过渡效果
|
@@ -702,7 +739,7 @@ var ImagePreview = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
702
739
|
transImage.style.opacity = '0';
|
703
740
|
transImage.style.transitionDuration = displayDuration + "ms";
|
704
741
|
transImage.style.webkitTransitionDuration = displayDuration + "ms";
|
705
|
-
|
742
|
+
(_domRef$current2 = domRef.current) == null ? void 0 : (_domRef$current2$quer = _domRef$current2.querySelectorAll('.carousel-item')) == null ? void 0 : (_domRef$current2$quer2 = _domRef$current2$quer[index]) == null ? void 0 : _domRef$current2$quer2.prepend(transImage); // 拿到放大之后的位置rect,没拿到就取消小图放大效果
|
706
743
|
// @en Get the zoomed-in position rect, and cancel the zoom-in effect if not getting it
|
707
744
|
|
708
745
|
getNewImageBounds(index, fallbackSrc, transImage, function (rect) {
|
@@ -724,9 +761,10 @@ var ImagePreview = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
724
761
|
return (0, _extends5.default)({}, holders, (_extends3 = {}, _extends3[index] = true, _extends3));
|
725
762
|
});
|
726
763
|
}, Math.max(0, displayDuration - 80));
|
764
|
+
var transitionEndDelay = images[index].transitionEndDelay || 30;
|
727
765
|
setTimeout(function () {
|
728
766
|
resetAnimation(index);
|
729
|
-
}, displayDuration +
|
767
|
+
}, displayDuration + transitionEndDelay);
|
730
768
|
});
|
731
769
|
});
|
732
770
|
}
|
@@ -886,18 +924,14 @@ var ImagePreview = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
886
924
|
}) : null;
|
887
925
|
}
|
888
926
|
|
889
|
-
function renderLoadingArea(
|
890
|
-
|
891
|
-
// @en The loadingArea is extracted and placed on the upper layer of the transition image
|
892
|
-
return index === openIndex ? /*#__PURE__*/_react.default.createElement(_portal.default, {
|
893
|
-
getContainer: getContainer
|
894
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
927
|
+
function renderLoadingArea() {
|
928
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
895
929
|
className: "image-preview-loading-area"
|
896
930
|
}, loadingArea || /*#__PURE__*/_react.default.createElement(_loading.default, {
|
897
931
|
type: "circle",
|
898
932
|
className: "loading-icon",
|
899
933
|
radius: 7
|
900
|
-
}))
|
934
|
+
}));
|
901
935
|
}
|
902
936
|
|
903
937
|
return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref3) {
|
@@ -945,7 +979,7 @@ var ImagePreview = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
945
979
|
imagesRef.current[index] = r;
|
946
980
|
},
|
947
981
|
showLoading: showLoading,
|
948
|
-
loadingArea: renderLoadingArea(
|
982
|
+
loadingArea: renderLoadingArea(),
|
949
983
|
errorArea: errorArea,
|
950
984
|
showError: showError,
|
951
985
|
retryTime: retryTime,
|
@@ -575,6 +575,7 @@
|
|
575
575
|
height: 100%;
|
576
576
|
opacity: 0;
|
577
577
|
}
|
578
|
+
.arco-image-preview .image-container img.closing-animation,
|
578
579
|
.image-preview-fake-trans-image {
|
579
580
|
position: fixed;
|
580
581
|
left: 0;
|
@@ -584,7 +585,7 @@
|
|
584
585
|
transition: all cubic-bezier(0.34, 0.69, 0.1, 1) ;
|
585
586
|
will-change: transform;
|
586
587
|
pointer-events: none;
|
587
|
-
|
588
|
+
height: auto !important;
|
588
589
|
}
|
589
590
|
.image-preview-loading-area {
|
590
591
|
position: fixed;
|
@@ -77,6 +77,7 @@
|
|
77
77
|
opacity: 0;
|
78
78
|
}
|
79
79
|
|
80
|
+
.@{prefix}-image-preview .image-container img.closing-animation,
|
80
81
|
.image-preview-fake-trans-image {
|
81
82
|
position: fixed;
|
82
83
|
left: 0;
|
@@ -85,7 +86,7 @@
|
|
85
86
|
.use-var(transition, image-preview-thumb-transition);
|
86
87
|
will-change: transform;
|
87
88
|
pointer-events: none;
|
88
|
-
|
89
|
+
height: auto !important;
|
89
90
|
}
|
90
91
|
|
91
92
|
.image-preview-loading-area {
|
@@ -549,6 +549,10 @@
|
|
549
549
|
font-size: 0.4rem;
|
550
550
|
line-height: 1;
|
551
551
|
}
|
552
|
+
[dir="rtl"] .arco-popover-menu-icon {
|
553
|
+
margin-right: initial;
|
554
|
+
margin-left: 0.16rem;
|
555
|
+
}
|
552
556
|
.arco-popover-menu-icon > * {
|
553
557
|
float: left;
|
554
558
|
}
|
@@ -634,7 +638,6 @@
|
|
634
638
|
width: -webkit-max-content;
|
635
639
|
width: max-content;
|
636
640
|
z-index: 1010;
|
637
|
-
right: 0;
|
638
641
|
background-color: transparent;
|
639
642
|
visibility: hidden;
|
640
643
|
will-change: transform;
|
@@ -716,11 +719,15 @@
|
|
716
719
|
padding: 0 0.2rem 0 0.22rem ;
|
717
720
|
}
|
718
721
|
.arco-popover-inner .text-suffix {
|
719
|
-
padding: 0
|
722
|
+
padding-right: 0.24rem ;
|
720
723
|
-webkit-box-flex: 0;
|
721
724
|
-webkit-flex: 0 0 auto;
|
722
725
|
flex: 0 0 auto;
|
723
726
|
}
|
727
|
+
[dir="rtl"] .arco-popover-inner .text-suffix {
|
728
|
+
padding-right: initial;
|
729
|
+
padding-left: 0.24rem ;
|
730
|
+
}
|
724
731
|
.arco-popover-inner .popover-arrow {
|
725
732
|
position: absolute;
|
726
733
|
-webkit-transform: rotate(45deg);
|
@@ -29,7 +29,6 @@
|
|
29
29
|
position: absolute;
|
30
30
|
width: max-content;
|
31
31
|
z-index: @full-screen-z-index + 10;
|
32
|
-
right: 0;
|
33
32
|
background-color: transparent;
|
34
33
|
visibility: hidden;
|
35
34
|
will-change: transform;
|
@@ -104,7 +103,7 @@
|
|
104
103
|
}
|
105
104
|
|
106
105
|
.text-suffix {
|
107
|
-
.use-var(padding, popover-text-suffix-
|
106
|
+
.use-var-with-rtl(padding-right, popover-text-suffix-edge);
|
108
107
|
flex: 0 0 auto;
|
109
108
|
}
|
110
109
|
|
@@ -7,6 +7,8 @@ var _react = require("react");
|
|
7
7
|
|
8
8
|
var _ = require(".");
|
9
9
|
|
10
|
+
var _contextProvider = require("../../context-provider");
|
11
|
+
|
10
12
|
var IsTouchingStatus;
|
11
13
|
|
12
14
|
(function (IsTouchingStatus) {
|
@@ -22,13 +24,16 @@ var useSliderEvents = function useSliderEvents(_ref) {
|
|
22
24
|
setValueGroup = _ref.setValueGroup,
|
23
25
|
setCommonIsTouching = _ref.setCommonIsTouching;
|
24
26
|
|
25
|
-
var _useContext = (0, _react.useContext)(
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
27
|
+
var _useContext = (0, _react.useContext)(_contextProvider.GlobalContext),
|
28
|
+
useRtl = _useContext.useRtl;
|
29
|
+
|
30
|
+
var _useContext2 = (0, _react.useContext)(_.SliderContext),
|
31
|
+
disabled = _useContext2.disabled,
|
32
|
+
step = _useContext2.step,
|
33
|
+
min = _useContext2.min,
|
34
|
+
max = _useContext2.max,
|
35
|
+
type = _useContext2.type,
|
36
|
+
draggableTrackOnly = _useContext2.draggableTrackOnly;
|
32
37
|
|
33
38
|
var _useState = (0, _react.useState)(IsTouchingStatus.Idle),
|
34
39
|
isTouching = _useState[0],
|
@@ -54,7 +59,8 @@ var useSliderEvents = function useSliderEvents(_ref) {
|
|
54
59
|
length = _linePositionRef$curr.length,
|
55
60
|
start = _linePositionRef$curr.start;
|
56
61
|
if (length === 0) return 0;
|
57
|
-
var
|
62
|
+
var rtlRatio = useRtl ? -1 : 1;
|
63
|
+
var newWidth = isHorizontal ? (touchPosition - start) * rtlRatio : length - touchPosition + start;
|
58
64
|
|
59
65
|
if (newWidth < 0) {
|
60
66
|
newWidth = 0;
|
@@ -7,17 +7,22 @@ var _react = require("react");
|
|
7
7
|
|
8
8
|
var _ = require(".");
|
9
9
|
|
10
|
+
var _contextProvider = require("../../context-provider");
|
11
|
+
|
10
12
|
var useSliderStyle = function useSliderStyle(_ref) {
|
11
13
|
var getLinePosition = _ref.getLinePosition,
|
12
14
|
commonIsTouching = _ref.commonIsTouching,
|
13
15
|
valueGroup = _ref.valueGroup;
|
14
16
|
|
15
|
-
var _useContext = (0, _react.useContext)(
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
17
|
+
var _useContext = (0, _react.useContext)(_contextProvider.GlobalContext),
|
18
|
+
useRtl = _useContext.useRtl;
|
19
|
+
|
20
|
+
var _useContext2 = (0, _react.useContext)(_.SliderContext),
|
21
|
+
size = _useContext2.size,
|
22
|
+
useAnimation = _useContext2.useAnimation,
|
23
|
+
min = _useContext2.min,
|
24
|
+
max = _useContext2.max,
|
25
|
+
type = _useContext2.type;
|
21
26
|
|
22
27
|
var isHorizontal = /^horizontal/g.test(type);
|
23
28
|
var heightStyle = (0, _react.useMemo)(function () {
|
@@ -51,7 +56,8 @@ var useSliderStyle = function useSliderStyle(_ref) {
|
|
51
56
|
length = (larger - min) / (max - min) * length - start;
|
52
57
|
}
|
53
58
|
|
54
|
-
|
59
|
+
var leftStyle = useRtl ? 'right' : 'left';
|
60
|
+
return _ref3 = {}, _ref3[isHorizontal ? leftStyle : 'bottom'] = start + "px", _ref3[isHorizontal ? 'width' : 'height'] = Math.abs(length) + "px", _ref3;
|
55
61
|
}, [valueGroup, getLinePosition, min, max, isHorizontal]);
|
56
62
|
return {
|
57
63
|
heightStyle: heightStyle,
|
package/cjs/slider/index.js
CHANGED
@@ -26,7 +26,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
26
26
|
var Slider = /*#__PURE__*/(0, _react.forwardRef)(function (_, ref) {
|
27
27
|
var _useContext = (0, _react.useContext)(_contextProvider.GlobalContext),
|
28
28
|
_useContext$prefixCls = _useContext.prefixCls,
|
29
|
-
prefixCls = _useContext$prefixCls === void 0 ? '' : _useContext$prefixCls
|
29
|
+
prefixCls = _useContext$prefixCls === void 0 ? '' : _useContext$prefixCls,
|
30
|
+
useRtl = _useContext.useRtl;
|
30
31
|
|
31
32
|
var _useContext2 = (0, _react.useContext)(_hooks.SliderContext),
|
32
33
|
className = _useContext2.className,
|
@@ -77,9 +78,10 @@ var Slider = /*#__PURE__*/(0, _react.forwardRef)(function (_, ref) {
|
|
77
78
|
top = _ref.top,
|
78
79
|
height = _ref.height;
|
79
80
|
|
81
|
+
var leftValue = useRtl ? left + width : left;
|
80
82
|
return {
|
81
83
|
length: isHorizontal ? width : height,
|
82
|
-
start: isHorizontal ?
|
84
|
+
start: isHorizontal ? leftValue : top
|
83
85
|
};
|
84
86
|
}, [isHorizontal, firstRender]);
|
85
87
|
|
package/cjs/slider/marks.js
CHANGED
@@ -28,7 +28,8 @@ function Marks(_ref) {
|
|
28
28
|
|
29
29
|
var _useContext = (0, _react.useContext)(_contextProvider.GlobalContext),
|
30
30
|
_useContext$prefixCls = _useContext.prefixCls,
|
31
|
-
prefixCls = _useContext$prefixCls === void 0 ? '' : _useContext$prefixCls
|
31
|
+
prefixCls = _useContext$prefixCls === void 0 ? '' : _useContext$prefixCls,
|
32
|
+
useRtl = _useContext.useRtl;
|
32
33
|
|
33
34
|
var _useContext2 = (0, _react.useContext)(_hooks.SliderContext),
|
34
35
|
type = _useContext2.type,
|
@@ -40,7 +41,8 @@ function Marks(_ref) {
|
|
40
41
|
var genMarkStyle = (0, _react.useCallback)(function (value) {
|
41
42
|
var _ref2;
|
42
43
|
|
43
|
-
|
44
|
+
var leftStyle = useRtl ? 'right' : 'left';
|
45
|
+
return _ref2 = {}, _ref2[isHorizontal ? leftStyle : 'bottom'] = (value - min) / (max - min) * 100 + "%", _ref2;
|
44
46
|
}, [isHorizontal, min, max]);
|
45
47
|
return /*#__PURE__*/_react.default.createElement("div", {
|
46
48
|
className: prefixCls + "-slider-marks"
|
@@ -541,6 +541,10 @@
|
|
541
541
|
.is-horizontal .arco-slider-label {
|
542
542
|
margin-right: 0.24rem ;
|
543
543
|
}
|
544
|
+
[dir="rtl"] .is-horizontal .arco-slider-label {
|
545
|
+
margin-right: initial;
|
546
|
+
margin-left: 0.24rem ;
|
547
|
+
}
|
544
548
|
.is-vertical .arco-slider-label {
|
545
549
|
-webkit-box-orient: vertical;
|
546
550
|
-webkit-box-direction: normal;
|
@@ -552,6 +556,10 @@
|
|
552
556
|
margin-right: 0;
|
553
557
|
margin-left: 0.24rem ;
|
554
558
|
}
|
559
|
+
[dir="rtl"] .is-horizontal .arco-slider-wrapper + .arco-slider-label {
|
560
|
+
margin-left: initial;
|
561
|
+
margin-right: 0.24rem ;
|
562
|
+
}
|
555
563
|
.is-vertical .arco-slider-wrapper + .arco-slider-label {
|
556
564
|
margin-bottom: 0;
|
557
565
|
margin-top: 0.24rem ;
|
@@ -636,11 +644,27 @@
|
|
636
644
|
-webkit-transform: translateX(50%);
|
637
645
|
transform: translateX(50%);
|
638
646
|
}
|
647
|
+
[dir="rtl"] .is-horizontal .arco-slider-thumb-wrapper.is-end {
|
648
|
+
right: initial;
|
649
|
+
left: 0;
|
650
|
+
}
|
651
|
+
[dir="rtl"] .is-horizontal .arco-slider-thumb-wrapper.is-end {
|
652
|
+
-webkit-transform: translateX(-50%);
|
653
|
+
transform: translateX(-50%);
|
654
|
+
}
|
639
655
|
.is-horizontal .arco-slider-thumb-wrapper.is-start {
|
640
656
|
left: 0;
|
641
657
|
-webkit-transform: translateX(-50%);
|
642
658
|
transform: translateX(-50%);
|
643
659
|
}
|
660
|
+
[dir="rtl"] .is-horizontal .arco-slider-thumb-wrapper.is-start {
|
661
|
+
left: initial;
|
662
|
+
right: 0;
|
663
|
+
}
|
664
|
+
[dir="rtl"] .is-horizontal .arco-slider-thumb-wrapper.is-start {
|
665
|
+
-webkit-transform: translateX(50%);
|
666
|
+
transform: translateX(50%);
|
667
|
+
}
|
644
668
|
.arco-slider-popover-wrapper .arco-slider-thumb {
|
645
669
|
position: relative;
|
646
670
|
}
|
@@ -739,6 +763,10 @@
|
|
739
763
|
-webkit-transform: translateX(-50%);
|
740
764
|
transform: translateX(-50%);
|
741
765
|
}
|
766
|
+
[dir="rtl"] .arco-slider-marks-item {
|
767
|
+
-webkit-transform: translateX(50%);
|
768
|
+
transform: translateX(50%);
|
769
|
+
}
|
742
770
|
.arco-slider-marks-item.is-activated {
|
743
771
|
background: #165DFF ;
|
744
772
|
}
|
@@ -31,7 +31,7 @@
|
|
31
31
|
.use-var(color, slider-text-color);
|
32
32
|
|
33
33
|
.is-horizontal & {
|
34
|
-
.use-var(margin-right, slider-label-gutter);
|
34
|
+
.use-var-with-rtl(margin-right, slider-label-gutter);
|
35
35
|
}
|
36
36
|
|
37
37
|
.is-vertical & {
|
@@ -44,7 +44,7 @@
|
|
44
44
|
|
45
45
|
.is-horizontal & {
|
46
46
|
margin-right: 0;
|
47
|
-
.use-var(margin-left, slider-label-gutter);
|
47
|
+
.use-var-with-rtl(margin-left, slider-label-gutter);
|
48
48
|
}
|
49
49
|
|
50
50
|
.is-vertical & {
|
@@ -124,13 +124,19 @@
|
|
124
124
|
bottom: 0;
|
125
125
|
|
126
126
|
&.is-end {
|
127
|
-
right
|
127
|
+
.set-prop-with-rtl(right, 0);
|
128
128
|
transform: translateX(50%);
|
129
|
+
[dir="rtl"] & {
|
130
|
+
transform: translateX(-50%);
|
131
|
+
}
|
129
132
|
}
|
130
133
|
|
131
134
|
&.is-start {
|
132
|
-
left
|
135
|
+
.set-prop-with-rtl(left, 0);
|
133
136
|
transform: translateX(-50%);
|
137
|
+
[dir="rtl"] & {
|
138
|
+
transform: translateX(50%);
|
139
|
+
}
|
134
140
|
}
|
135
141
|
}
|
136
142
|
}
|
@@ -236,6 +242,9 @@
|
|
236
242
|
.use-var(border-radius, slider-mark-border-radius);
|
237
243
|
.use-var(background, slider-line-color);
|
238
244
|
transform: translateX(-50%);
|
245
|
+
[dir="rtl"] & {
|
246
|
+
transform: translateX(50%);
|
247
|
+
}
|
239
248
|
|
240
249
|
&.is-activated {
|
241
250
|
.use-var(background, slider-line-activated-color);
|