@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.
Files changed (58) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/README.en-US.md +2 -2
  3. package/README.md +2 -2
  4. package/cjs/form/type.d.ts +2 -2
  5. package/cjs/image-preview/index.d.ts +6 -0
  6. package/cjs/image-preview/index.js +48 -14
  7. package/cjs/image-preview/style/css/index.css +2 -1
  8. package/cjs/image-preview/style/index.less +2 -1
  9. package/cjs/popover/style/css/index.css +9 -2
  10. package/cjs/popover/style/css/menu.css +4 -0
  11. package/cjs/popover/style/index.less +1 -2
  12. package/cjs/popover/style/menu.less +1 -1
  13. package/cjs/slider/hooks/useSliderEvents.js +14 -8
  14. package/cjs/slider/hooks/useSliderStyle.js +13 -7
  15. package/cjs/slider/index.js +4 -2
  16. package/cjs/slider/marks.js +4 -2
  17. package/cjs/slider/style/css/index.css +28 -0
  18. package/cjs/slider/style/index.less +13 -4
  19. package/dist/index.js +97 -52
  20. package/dist/index.min.js +4 -4
  21. package/dist/style.css +36 -3
  22. package/dist/style.min.css +1 -1
  23. package/esm/form/type.d.ts +2 -2
  24. package/esm/image-preview/index.d.ts +6 -0
  25. package/esm/image-preview/index.js +48 -14
  26. package/esm/image-preview/style/css/index.css +2 -1
  27. package/esm/image-preview/style/index.less +2 -1
  28. package/esm/popover/style/css/index.css +9 -2
  29. package/esm/popover/style/css/menu.css +4 -0
  30. package/esm/popover/style/index.less +1 -2
  31. package/esm/popover/style/menu.less +1 -1
  32. package/esm/slider/hooks/useSliderEvents.js +13 -8
  33. package/esm/slider/hooks/useSliderStyle.js +12 -7
  34. package/esm/slider/index.js +4 -2
  35. package/esm/slider/marks.js +4 -2
  36. package/esm/slider/style/css/index.css +28 -0
  37. package/esm/slider/style/index.less +13 -4
  38. package/package.json +3 -3
  39. package/tokens/app/arcodesign/default/css-variables.less +1 -1
  40. package/tokens/app/arcodesign/default/index.d.ts +1 -1
  41. package/tokens/app/arcodesign/default/index.js +1 -1
  42. package/tokens/app/arcodesign/default/index.json +7 -7
  43. package/tokens/app/arcodesign/default/index.less +1 -1
  44. package/umd/form/type.d.ts +2 -2
  45. package/umd/image-preview/index.d.ts +6 -0
  46. package/umd/image-preview/index.js +48 -14
  47. package/umd/image-preview/style/css/index.css +2 -1
  48. package/umd/image-preview/style/index.less +2 -1
  49. package/umd/popover/style/css/index.css +9 -2
  50. package/umd/popover/style/css/menu.css +4 -0
  51. package/umd/popover/style/index.less +1 -2
  52. package/umd/popover/style/menu.less +1 -1
  53. package/umd/slider/hooks/useSliderEvents.js +16 -12
  54. package/umd/slider/hooks/useSliderStyle.js +15 -11
  55. package/umd/slider/index.js +4 -2
  56. package/umd/slider/marks.js +4 -2
  57. package/umd/slider/style/css/index.css +28 -0
  58. 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.1/dist/style.min.css">
63
- <script src="https://unpkg.com/@arco-design/mobile-react@2.30.1/dist/index.min.js"></script>
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.1/dist/style.min.css">
63
- <script src="https://unpkg.com/@arco-design/mobile-react@2.30.1/dist/index.min.js"></script>
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
  ## 引入全部
@@ -99,7 +99,7 @@ export interface IFormDataMethods {
99
99
  * 注册表单项
100
100
  * @en Register field
101
101
  */
102
- registerField: (name: string, self: ReactNode) => () => void;
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: ReactNode) => () => void;
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(document.querySelector('.image-preview-fake-trans-image'));
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
- child && document.body.removeChild(child);
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
- document.body.appendChild(transImage); // 拿到放大之后的位置rect,没拿到就取消小图放大效果
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 + 30);
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(index) {
890
- // loadingArea提出来,放到过渡图上层
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
- }))) : loadingArea;
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(index),
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
- z-index: 1001;
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
- z-index: @full-screen-z-index + 1;
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 0.24rem 0 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);
@@ -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
  }
@@ -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-padding);
106
+ .use-var-with-rtl(padding-right, popover-text-suffix-edge);
108
107
  flex: 0 0 auto;
109
108
  }
110
109
 
@@ -32,7 +32,7 @@
32
32
  }
33
33
  }
34
34
  &-icon {
35
- .rem(margin-right, 8);
35
+ .rem-with-rtl(margin-right, 8);
36
36
  .rem(font-size, 20);
37
37
  line-height: 1;
38
38
  & > * {
@@ -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)(_.SliderContext),
26
- disabled = _useContext.disabled,
27
- step = _useContext.step,
28
- min = _useContext.min,
29
- max = _useContext.max,
30
- type = _useContext.type,
31
- draggableTrackOnly = _useContext.draggableTrackOnly;
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 newWidth = isHorizontal ? touchPosition - start : length - touchPosition + start;
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)(_.SliderContext),
16
- size = _useContext.size,
17
- useAnimation = _useContext.useAnimation,
18
- min = _useContext.min,
19
- max = _useContext.max,
20
- type = _useContext.type;
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
- return _ref3 = {}, _ref3[isHorizontal ? 'left' : 'bottom'] = start + "px", _ref3[isHorizontal ? 'width' : 'height'] = Math.abs(length) + "px", _ref3;
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,
@@ -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 ? left : top
84
+ start: isHorizontal ? leftValue : top
83
85
  };
84
86
  }, [isHorizontal, firstRender]);
85
87
 
@@ -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
- return _ref2 = {}, _ref2[isHorizontal ? 'left' : 'bottom'] = (value - min) / (max - min) * 100 + "%", _ref2;
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: 0;
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: 0;
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);