Merge pull request #203 from vadymshymko/add-dir-ltr-support

Add dir ltr support
vadymshymko · Dec 10, 2023 · 1a63fd3 · 1a63fd3
2 parents 8ddb5b8 + 2c08c63
commit 1a63fd3
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 36 deletions.
diff --git a/README.md b/README.md
@@ -172,6 +172,7 @@ export default ReactSimplyCarouselExample;
 | **swipeRatio**                                                    | number                               | `1`                            | swipe distance ratio (on swipe by touchmove or by mouse drag)                                                                                                                                                                                                                                                       |
 | **touchSwipeRatio**                                               | number                               | `swipeRatio` prop value        | swipe distance ratio (on swipe by touchmove)                                                                                                                                                                                                                                                                        |
 | **mouseSwipeRatio**                                               | number                               | `swipeRatio` prop value        | swipe distance ratio (on swipe by mouse drag)                                                                                                                                                                                                                                                                       |
+| **dirRTL**                                                        | boolean                              | `false`                        | Enable support for right-to-left slides content (text) direction                                                                                                                                                                                                                                                    |
 
 ## Demo
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-simply-carousel",
-  "version": "9.0.7",
+  "version": "9.1.0",
   "description": "A simple, lightweight, fully controlled isomorphic (with SSR support) React.js carousel component. Touch enabled and responsive. With support for autoplay and infinity options. Fully customizable",
   "files": [
     "dist/"
@@ -64,7 +64,7 @@
     "react-dom": "^18.2.0",
     "rollup": "^3.13.0",
     "tslib": "^2.5.0",
-    "typescript": "^5.0.2"
+    "typescript": "5.0.2"
   },
   "peerDependencies": {
     "@types/react": "^16.8 || ^17 || ^18",

diff --git a/src/index.tsx b/src/index.tsx
@@ -80,7 +80,7 @@ type ReactSimplyCarouselStaticProps = {
   touchSwipeTreshold?: number;
   updateOnItemClick?: boolean;
   visibleSlideProps?: HTMLAttributes<any>;
-  unstable_reverseByDir?: boolean;
+  dirRTL?: boolean;
 };
 
 type ReactSimplyCarouselResponsiveProps = (Omit<
@@ -192,8 +192,7 @@ function ReactSimplyCarousel({
     touchSwipeRatio,
     mouseSwipeRatio,
     swipeRatio = 1,
-    // eslint-disable-next-line camelcase
-    unstable_reverseByDir = false,
+    dirRTL = false,
   } = windowWidth
     ? {
         ...propsByWindowWidth,
@@ -335,10 +334,7 @@ function ReactSimplyCarousel({
           offsetCorrectionForEdgeSlides +
           offsetCorrectionForInfiniteMode;
       const itemsListTransform = `translateX(${
-        // eslint-disable-next-line camelcase
-        unstable_reverseByDir && windowWidth && document.body.dir === 'rtl'
-          ? ''
-          : '-'
+        dirRTL ? '' : '-'
       }${itemsListTranslateX}px)`;
 
       const start = infinite
@@ -430,15 +426,7 @@ function ReactSimplyCarousel({
         isLastSlideVisible,
       };
     },
-    [
-      centerMode,
-      disableNav,
-      infinite,
-      itemsToShow,
-      // eslint-disable-next-line camelcase
-      unstable_reverseByDir,
-      windowWidth,
-    ]
+    [centerMode, disableNav, infinite, itemsToShow, dirRTL]
   );
 
   const {
@@ -530,10 +518,7 @@ function ReactSimplyCarousel({
         });
       } else {
         itemsListRef.current!.style.transform = `translateX(${
-          // eslint-disable-next-line camelcase
-          unstable_reverseByDir && windowWidth && document.body.dir === 'rtl'
-            ? ''
-            : '-'
+          dirRTL ? '' : '-'
         }${
           offsetCorrectionForCenterMode +
           offsetCorrectionForInfiniteMode +
@@ -554,9 +539,7 @@ function ReactSimplyCarousel({
       itemsListTranslateX,
       positionIndex,
       getRenderParams,
-      // eslint-disable-next-line camelcase
-      unstable_reverseByDir,
-      windowWidth,
+      dirRTL,
     ]
   );
 
@@ -719,10 +702,7 @@ function ReactSimplyCarousel({
       const itemsListPos = Math.max(-dragPosDiff, -maxDragPos);
       itemsListRef.current!.style.transition = 'none';
       itemsListRef.current!.style.transform = `translateX(${
-        // eslint-disable-next-line camelcase
-        (unstable_reverseByDir && windowWidth && document.body.dir === 'rtl'
-          ? -1
-          : 1) * itemsListPos
+        (dirRTL ? -1 : 1) * itemsListPos
       }px)`;
     }
 
@@ -861,9 +841,7 @@ function ReactSimplyCarousel({
     touchSwipeRatio,
     mouseSwipeRatio,
     swipeRatio,
-    // eslint-disable-next-line camelcase
-    unstable_reverseByDir,
-    windowWidth,
+    dirRTL,
   ]);
 
   useEffect(() => {

diff --git a/yarn.lock b/yarn.lock
@@ -2506,10 +2506,10 @@ typed-array-length@^1.0.4:
     for-each "^0.3.3"
     is-typed-array "^1.1.9"
 
-typescript@^5.0.2:
-  version "5.1.6"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.1.6.tgz#02f8ac202b6dad2c0dd5e0913745b47a37998274"
-  integrity sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==
+typescript@5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.0.2.tgz#891e1a90c5189d8506af64b9ef929fca99ba1ee5"
+  integrity sha512-wVORMBGO/FAs/++blGNeAVdbNKtIh1rbBL2EyQ1+J9lClJ93KiiKe8PmFIVdXhHcyv44SL9oglmfeSsndo0jRw==
 
 unbox-primitive@^1.0.2:
   version "1.0.2"