Add RTL Support

YIZHUANG · Jun 14, 2022 · aa0efcd · aa0efcd
1 parent e02b985
commit aa0efcd
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 15 deletions.
diff --git a/dev/pages/HomePage/HomePage.tsx b/dev/pages/HomePage/HomePage.tsx
@@ -133,7 +133,25 @@ class Index extends React.Component {
           deviceType={this.props.deviceType}
           rewind={true}
         >
-          {fakerData.slice(0,5).map(card => {
+          {fakerData.slice(0, 5).map(card => {
+            return <Image url={card.image} alt={card.headline} />;
+          })}
+        </Carousel>
+
+        <Carousel
+          responsive={responsive}
+          ssr
+          showDots
+          minimumTouchDrag={80}
+          slidesToSlide={1}
+          partialVisible={true}
+          containerClass="container-with-dots"
+          itemClass="image-item"
+          deviceType={this.props.deviceType}
+          rewind={true}
+          rtl={true}
+        >
+          {fakerData.slice(0, 5).map(card => {
             return <Image url={card.image} alt={card.headline} />;
           })}
         </Carousel>

diff --git a/src/Arrows.tsx b/src/Arrows.tsx
@@ -7,32 +7,37 @@ interface LeftArrowProps {
   getState: () => StateCallBack;
   previous: () => void;
   disabled?: boolean;
+  rtl?: boolean;
 }
 interface RightArrowProps {
   customRightArrow?: React.ReactElement<any> | null;
   getState: () => StateCallBack;
   next: () => void;
   disabled?: boolean;
+  rtl?: boolean;
 }
 
 const LeftArrow = ({
   customLeftArrow,
   getState,
   previous,
-  disabled
+  disabled,
+  rtl
 }: LeftArrowProps): React.ReactElement<any> => {
   if (customLeftArrow) {
     return React.cloneElement(customLeftArrow, {
       onClick: () => previous(),
       carouselState: getState(),
-      disabled: disabled
+      disabled: disabled,
+      rtl: rtl
     });
   }
+  const rtlClassName = rtl ? "rtl" : "";
 
   return (
     <button
       aria-label="Go to previous slide"
-      className="react-multiple-carousel__arrow react-multiple-carousel__arrow--left"
+      className={`react-multiple-carousel__arrow react-multiple-carousel__arrow--left ${rtlClassName}`}
       onClick={() => previous()}
       type="button"
       disabled={disabled}
@@ -43,19 +48,23 @@ const RightArrow = ({
   customRightArrow,
   getState,
   next,
-  disabled
+  disabled,
+  rtl
 }: RightArrowProps): React.ReactElement<any> => {
   if (customRightArrow) {
     return React.cloneElement(customRightArrow, {
       onClick: () => next(),
       carouselState: getState(),
-      disabled: disabled
+      disabled: disabled,
+      rtl: rtl
     });
   }
+  const rtlClassName = rtl ? "rtl" : "";
+
   return (
     <button
       aria-label="Go to next slide"
-      className="react-multiple-carousel__arrow react-multiple-carousel__arrow--right"
+      className={`react-multiple-carousel__arrow react-multiple-carousel__arrow--right ${rtlClassName}`}
       onClick={() => next()}
       type="button"
       disabled={disabled}

diff --git a/src/Carousel.tsx b/src/Carousel.tsx
@@ -55,7 +55,8 @@ class Carousel extends React.Component<CarouselProps, CarouselInternalState> {
     pauseOnHover: true,
     shouldResetAutoplay: true,
     rewind: false,
-    rewindWithAnimation: false
+    rewindWithAnimation: false,
+    rtl: false
   };
   private readonly containerRef: React.RefObject<HTMLDivElement>;
   private readonly listRef: React.RefObject<HTMLUListElement>;
@@ -357,15 +358,15 @@ class Carousel extends React.Component<CarouselProps, CarouselInternalState> {
      If we reach the last slide of a non-infinite carousel we can rewind the carousel
      if opted in to autoPlay (lightweight infinite mode alternative).
     */
-    if (this.props.autoPlay && this.props.rewind && this.props.autoPlaySpeed) {
+    if (this.props.autoPlay && this.props.rewind) {
       if (!this.props.infinite && isInRightEnd(this.state)) {
         const rewindBuffer =
           this.props.transitionDuration || defaultTransitionDuration;
         setTimeout(() => {
           this.setIsInThrottle(false);
           this.resetAutoplayInterval();
           this.goToSlide(0, undefined, !!this.props.rewindWithAnimation);
-        }, rewindBuffer + this.props.autoPlaySpeed);
+        }, rewindBuffer + this.props.autoPlaySpeed!);
       }
     }
   }
@@ -691,24 +692,26 @@ class Carousel extends React.Component<CarouselProps, CarouselInternalState> {
     return this.state;
   }
   public renderLeftArrow(disbaled: boolean): React.ReactNode {
-    const { customLeftArrow } = this.props;
+    const { customLeftArrow, rtl } = this.props;
     return (
       <LeftArrow
         customLeftArrow={customLeftArrow}
         getState={() => this.getState()}
         previous={this.previous}
         disabled={disbaled}
+        rtl={rtl}
       />
     );
   }
   public renderRightArrow(disbaled: boolean): React.ReactNode {
-    const { customRightArrow } = this.props;
+    const { customRightArrow, rtl } = this.props;
     return (
       <RightArrow
         customRightArrow={customRightArrow}
         getState={() => this.getState()}
         next={this.next}
         disabled={disbaled}
+        rtl={rtl}
       />
     );
   }
@@ -765,7 +768,8 @@ class Carousel extends React.Component<CarouselProps, CarouselInternalState> {
       additionalTransfrom,
       renderDotsOutside,
       renderButtonGroupOutside,
-      className
+      className,
+      rtl
     } = this.props;
     if (process.env.NODE_ENV !== "production") {
       throwError(this.state, this.props);
@@ -795,6 +799,7 @@ class Carousel extends React.Component<CarouselProps, CarouselInternalState> {
       <>
         <div
           className={`react-multi-carousel-list ${containerClass} ${className}`}
+          dir={rtl ? "rtl" : "ltr"}
           ref={this.containerRef}
         >
           <ul

diff --git a/src/assets/styles.css b/src/assets/styles.css
@@ -114,3 +114,21 @@
     overflow: visible !important;
   }
 }
+
+[dir='rtl'].react-multi-carousel-list {
+  direction: rtl;
+}
+.rtl.react-multiple-carousel__arrow--right {
+  right: auto;
+  left: calc(4% + 1px);
+}
+.rtl.react-multiple-carousel__arrow--right::before {
+  content: "\e824";
+}
+.rtl.react-multiple-carousel__arrow--left {
+  left: auto;
+  right: calc(4% + 1px);
+}
+.rtl.react-multiple-carousel__arrow--left::before {
+  content: "\e825";
+}
diff --git a/src/types.ts b/src/types.ts
@@ -61,6 +61,7 @@ export interface CarouselProps {
   shouldResetAutoplay?: boolean;
   rewind?: boolean;
   rewindWithAnimation?: boolean;
+  rtl?: boolean;
 }
 
 export type StateCallBack = CarouselInternalState;

diff --git a/src/utils/common.ts b/src/utils/common.ts
@@ -118,7 +118,8 @@ function getTransform(
     partialVisible,
     responsive,
     deviceType,
-    centerMode
+    centerMode,
+    rtl
   } = props;
   const transform = transformPlaceHolder || state.transform;
   const partialVisibilityGutter = getPartialVisibilityGutter(
@@ -138,7 +139,7 @@ function getTransform(
       : centerMode
       ? getTransformForCenterMode(state, props, transformPlaceHolder)
       : transform;
-  return currentTransform;
+  return rtl ? -1 * currentTransform : currentTransform;
 }
 
 function getSlidesToSlide(