Fix bug on slider when dragging in rtl mode (#457)

* fix: honor direction when calculating drag offsets

* fix: tweak demo to set rtl in a way that's compatible with the implementation

* fix: add defensive checks

src/App/examples/Example14/Example14.jsx

@@ -15,21 +15,21 @@ import
 import s from '../../style.scss';
 
 export default () => (
-  <CarouselProvider
-    visibleSlides={2}
-    totalSlides={8}
-    step={1}
-    naturalSlideWidth={400}
-    naturalSlideHeight={500}
-  >
-    <h2 className={s.headline}>RTL</h2>
-    <p>
+  <div dir="rtl">
+    <CarouselProvider
+      visibleSlides={2}
+      totalSlides={8}
+      step={1}
+      naturalSlideWidth={400}
+      naturalSlideHeight={500}
+    >
+      <h2 className={s.headline}>RTL</h2>
+      <p>
       A carousel wrapped in an element with
-      {' '}
-      <code>dir=&quot;rtl&quot;</code>
+        {' '}
+        <code>dir=&quot;rtl&quot;</code>
 , demonstrating support for use with right-to-left languages.
-    </p>
-    <div dir="rtl">
+      </p>
       <Slider className={s.slider}>
         <Slide index={0}>
           <ImageWithZoom src="./media/img01.jpeg" />
@@ -61,6 +61,6 @@ export default () => (
       <ButtonNext>Next</ButtonNext>
       <ButtonLast>Last</ButtonLast>
       <DotGroup dotNumbers />
-    </div>
-  </CarouselProvider>
+    </CarouselProvider>
+  </div>
 );

src/Slider/Slider.jsx

@@ -201,6 +201,14 @@ const Slider = class Slider extends React.Component {
 
   getSliderRef(el) {
     this.sliderTrayElement = el;
+    if (el && window) {
+      // NOTE: we can't rely on the element itself to detect direction
+      // as the direction of the slider is currently flipped to ltr
+      const carouselElement = el.closest('.carousel');
+      if (carouselElement) {
+        this.rtl = window.getComputedStyle(carouselElement, null).getPropertyValue('direction') === 'rtl';
+      }
+    }
   }
 
 
@@ -234,7 +242,7 @@ const Slider = class Slider extends React.Component {
     window.cancelAnimationFrame.call(window, this.moveTimer);
     this.moveTimer = window.requestAnimationFrame.call(window, () => {
       this.setState(state => ({
-        deltaX: screenX - state.startX,
+        deltaX: (screenX - state.startX) * (this.rtl ? -1 : 1),
         deltaY: screenY - state.startY,
         preventingVerticalScroll: Math.abs(screenY - state.startY)
           <= this.props.verticalPixelThreshold