Add RTL support

README.md

@@ -168,6 +168,9 @@ The above code would make the default progress bar red, instead of light blue. N
 #### A note on using `react-with-styles-interface-css`
 The default interface that `rheostat` ships with is the [CSS interface](https://github.com/airbnb/react-with-styles-interface-css). If you want to use this interface along with the theme registration method, you will need to rebuild the core `rheostat.css` file. We do not currently expose a utility method to build this file, but you can follow along with the code in https://github.com/airbnb/rheostat/blob/master/scripts/buildCSS.js to build your own custom themed CSS file.
 
+### RTL Support
+
+`rheostat` now supports automatic RTL rendering through [`react-with-direction`](https://github.com/airbnb/react-with-direction).
 
 ## Live Playground
 

package.json

@@ -79,6 +79,7 @@
     "airbnb-prop-types": "^2.11.0",
     "object.assign": "^4.1.0",
     "prop-types": "^15.6.2",
+    "react-with-direction": "^1.3.0",
     "react-with-styles": "^3.2.1",
     "react-with-styles-interface-css": "^4.0.3"
   },

src/DefaultHandle.jsx

@@ -27,6 +27,7 @@ function DefaultHandle({
   disabled,
   handleRef,
   theme,
+  style,
   ...passProps
 }) {
   return (
@@ -39,6 +40,7 @@ function DefaultHandle({
           ? styles.DefaultHandle_handle__vertical
           : styles.DefaultHandle_handle__horizontal,
         disabled && styles.DefaultHandle_handle__disabled,
+        style,
       )}
       {...passProps}
     />

src/DefaultProgressBar.jsx

@@ -28,6 +28,7 @@ function DefaultProgressBar({
   theme,
   orientation,
   disabled,
+  style,
   ...passProps
 }) {
   return (
@@ -45,6 +46,7 @@ function DefaultProgressBar({
           ]),
 
         disabled && styles.progressBar_disabled,
+        style,
       )}
       {...passProps}
     />

src/Slider.jsx

@@ -1,4 +1,5 @@
 import { withStyles, withStylesPropTypes } from 'react-with-styles';
+import withDirection, { withDirectionPropTypes, DIRECTIONS } from 'react-with-direction';
 import PropTypes from 'prop-types';
 import { forbidExtraProps } from 'airbnb-prop-types';
 import React from 'react';
@@ -32,6 +33,7 @@ function killEvent(ev) {
 }
 
 const propTypes = forbidExtraProps({
+  ...withDirectionPropTypes,
   ...withStylesPropTypes,
 
   // Automatically adds a top position for large when enabled
@@ -516,11 +518,15 @@ class Rheostat extends React.Component {
   }
 
   positionPercent(x, y, sliderBox) {
-    const { orientation } = this.props;
+    const { orientation, direction } = this.props;
     if (orientation === VERTICAL) {
       return ((y - sliderBox.top) / sliderBox.height) * PERCENT_FULL;
     }
-    return ((x - sliderBox.left) / sliderBox.width) * PERCENT_FULL;
+    const horizontalPercentage = ((x - sliderBox.left) / sliderBox.width) * PERCENT_FULL;
+    if (direction === DIRECTIONS.RTL) {
+      return 100 - horizontalPercentage;
+    }
+    return horizontalPercentage;
   }
 
   handleSlide(x, y) {
@@ -860,7 +866,7 @@ class Rheostat extends React.Component {
 Rheostat.propTypes = propTypes;
 Rheostat.defaultProps = defaultProps;
 
-export default withStyles(({ rheostat: { color, unit, responsive } }) => ({
+export default withDirection(withStyles(({ rheostat: { color, unit, responsive } }) => ({
   rheostat: {
     position: 'relative',
     overflow: 'visible',
@@ -904,4 +910,4 @@ export default withStyles(({ rheostat: { color, unit, responsive } }) => ({
     top: 0,
     height: '100%',
   },
-}))(Rheostat);
+}))(Rheostat));

stories/ExampleSlider.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { storiesOf } from '@kadira/storybook';
 import PropTypes from 'prop-types';
+import DirectionProvider, { DIRECTIONS } from 'react-with-direction/dist/DirectionProvider';
+import { withStyles, withStylesPropTypes } from 'react-with-styles';
 
 import Rheostat from '../src/Slider';
 import log10 from '../src/algorithms/log10';
@@ -241,4 +243,94 @@ storiesOf('Slider', module)
   ))
   .add('Disabled', () => (
     <LabeledSlider disabled />
-  ));
+  ))
+  .add('RTL', () => (
+    <DirectionProvider direction={DIRECTIONS.RTL}>
+      <LabeledSlider />
+    </DirectionProvider>
+  ))
+  .add('RTL Multiple Handle', () => (
+    <DirectionProvider direction={DIRECTIONS.RTL}>
+      <LabeledSlider values={[0, 100]} />
+    </DirectionProvider>
+  ))
+  .add('RTL Pits', () => {
+    function PitComponent({ style, children }) {
+      return (
+        <div
+          style={{
+            ...style,
+            background: '#a2a2a2',
+            width: 1,
+            height: children % 10 === 0 ? 12 : 8,
+            top: 20,
+          }}
+        />
+      );
+    }
+    PitComponent.propTypes = {
+      style: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+      children: PropTypes.number,
+    };
+    PitComponent.defaultProps = {
+      style: null,
+      children: null,
+    };
+
+    return (
+      <DirectionProvider direction={DIRECTIONS.RTL}>
+        <LabeledSlider
+          pitComponent={PitComponent}
+          pitPoints={[0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100]} // eslint-disable-line max-len
+          snap
+          snapPoints={[0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]}
+          values={[40, 80]}
+        />
+      </DirectionProvider>
+    );
+  })
+  .add('RTL Custom Handle', () => {
+    function MyHandle({
+      styles,
+      css,
+      style,
+      handleRef,
+      ...passProps
+    }) {
+      return (
+        <div
+          ref={handleRef}
+          {...css(styles.handle, style)}
+          {...passProps}
+        />
+      );
+    }
+    MyHandle.propTypes = {
+      ...withStylesPropTypes,
+      style: PropTypes.object,
+      handleRef: PropTypes.any,
+    };
+    MyHandle.defaultProps = {
+      style: null,
+      handleRef: '',
+    };
+
+    const StyledMyHandle = withStyles(() => ({
+      handle: {
+        backgroundColor: 'rgba(137, 15, 0, 0.5)',
+        border: '1px solid #890f00',
+        borderRadius: '100%',
+        cursor: 'ew-resize',
+        marginLeft: -13,
+        height: 24,
+        width: 24,
+        zIndex: 3,
+      },
+    }))(MyHandle);
+
+    return (
+      <DirectionProvider direction={DIRECTIONS.RTL}>
+        <LabeledSlider handle={StyledMyHandle} values={[0, 100]} />
+      </DirectionProvider>
+    );
+  });