From 6ba3240727e830fd379dbd108ca80ab941a4ed66 Mon Sep 17 00:00:00 2001 From: Vadym Shymko Date: Sun, 10 Dec 2023 18:27:25 +0200 Subject: [PATCH 1/3] Fix ts version --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 5601c3c..0ec774d 100644 --- a/package.json +++ b/package.json @@ -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/yarn.lock b/yarn.lock index 3981291..f4716ef 100644 --- 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" From de2336379342a955f17564772271a5efbbd09457 Mon Sep 17 00:00:00 2001 From: Vadym Shymko Date: Sun, 10 Dec 2023 18:51:30 +0200 Subject: [PATCH 2/3] Add support for dir rtl --- README.md | 1 + src/index.tsx | 38 ++++++++------------------------------ 2 files changed, 9 insertions(+), 30 deletions(-) diff --git a/README.md b/README.md index 3fb3716..e38be1b 100644 --- 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/src/index.tsx b/src/index.tsx index 33d6808..4d7ef99 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -80,7 +80,7 @@ type ReactSimplyCarouselStaticProps = { touchSwipeTreshold?: number; updateOnItemClick?: boolean; visibleSlideProps?: HTMLAttributes; - 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(() => { From 2c08c6378ecb227dc8222a1532298b917c1353bb Mon Sep 17 00:00:00 2001 From: Vadym Shymko Date: Sun, 10 Dec 2023 18:52:12 +0200 Subject: [PATCH 3/3] Update version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 0ec774d..a972c35 100644 --- 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/"