Merge pull request #31 from uber-web/master

feat(bidi): add rtl support

.storybook/addons.js

@@ -1 +1,2 @@
 import '@storybook/addon-options/register';
+import 'storybook-addon-rtl/register';

.storybook/config.js

@@ -1,5 +1,8 @@
 import { configure, addDecorator } from '@storybook/react';
 import { withOptions } from '@storybook/addon-options';
+import { initializeRTL } from 'storybook-addon-rtl';
+
+initializeRTL();
 
 addDecorator(
   withOptions({

.storybook/example.stories.js

@@ -4,6 +4,8 @@ import Basic from '../examples/Basic';
 import Disabled from '../examples/Disabled';
 import SuperSimple from '../examples/SuperSimple';
 import TwoThumbs from '../examples/TwoThumbs';
+import Rtl from '../examples/Rtl';
+import RtlTwoThumbs from '../examples/RtlTwoThumbs';
 import UpDirection from '../examples/UpDirection';
 import DownDirection from '../examples/DownDirection';
 import LeftDirection from '../examples/LeftDirection';
@@ -20,6 +22,8 @@ storiesOf('Range', module)
   .add('Disabled', () => <Disabled />)
   .add('Super simple', () => <SuperSimple />)
   .add('Two thumbs', () => <TwoThumbs />)
+  .add('Rtl', () => <Rtl />)
+  .add('Rtl Two Thumbs', () => <RtlTwoThumbs />)
   .add('Up direction', () => <UpDirection />)
   .add('Down direction', () => <DownDirection />)
   .add('Left direction', () => <LeftDirection />)

README.md

@@ -75,6 +75,7 @@ class SuperSimple extends React.Component {
 - Typescript and Flow type definitions
 - **No dependencies, less than 4kB (gzipped)**
 - Coverage by [e2e puppeteer tests](#end-to-end-testing)
+- RTL support
 
 ## Keyboard support
 
@@ -217,6 +218,15 @@ disabled: boolean;
 
 If `true`, it ignores all touch and mouse events and makes the component not focusable. Default is `false`.
 
+### rtl (optional)
+
+```ts
+rtl: boolean;
+```
+
+If `true`, the slider will be optimized for RTL layouts. Default is `false`.
+
+
 ## getTrackBackground
 
 There is an additional helper function being exported from `react-range`. Your track is most likely a `div` with some background. What if you want to achieve a nice "progress bar" effect where the part before the thumb has different color than the part after? What if you want to have the same thing even with multiple thumbs (aka differently colored segments)? **You don't need to glue together multiple divs in order to do that!** You can use a single `div` and set `background: linear-gradient(...)`. `getTrackBackground` function builds this verbose `linear-gradient(...)` for you!
@@ -228,6 +238,7 @@ getTrackBackground: (params: {
   values: number[];
   colors: string[];
   direction?: Direction;
+  rtl?: boolean;
 }) => string;
 ```
 

e2e/rtl.test.ts

@@ -0,0 +1,30 @@
+import {
+    Examples,
+    getTestUrl,
+    trackMouse,
+    untrackMouse,
+    addFontStyles
+  } from './utils';
+
+  jest.setTimeout(10000);
+
+  beforeEach(async () => {
+    await page.goto(getTestUrl(Examples.RTL));
+    await page.setViewport({ width: 600, height: 200 });
+    await addFontStyles(page);
+    await page.evaluate(() => {
+      document.dir = 'rtl';
+    })
+  });
+
+  test('dnd the thumb to right', async () => {
+    await trackMouse(page);
+    await page.mouse.move(300, 80);
+    await page.mouse.down();
+    await page.mouse.move(460, 80);
+    await page.mouse.up();
+    await untrackMouse(page);
+    const output = await page.$('#output');
+    expect(await page.evaluate(e => e.textContent, output)).toBe('20.4');
+    expect(await page.screenshot()).toMatchImageSnapshot();
+  });

e2e/utils.ts

@@ -8,6 +8,7 @@ export enum Examples {
   DOWN_DIRECTION,
   MERGING_LABELS,
   SKINNY_MERGING_LABELS,
+  RTL,
 }
 
 export const getTestUrl = (example: Examples): string => {
@@ -27,6 +28,8 @@ export const getTestUrl = (example: Examples): string => {
       return `http://localhost:${PORT}/iframe.html?path=/story/range--merging-labels`;
     case Examples.SKINNY_MERGING_LABELS:
       return `http://localhost:${PORT}/iframe.html?path=/story/range--merging-labels-skinny`;
+    case Examples.RTL:
+      return `http://localhost:${PORT}/iframe.html?path=/story/range--rtl`;
   }
 };
 

examples/Rtl.tsx

@@ -0,0 +1,92 @@
+import * as React from 'react';
+import { Range, getTrackBackground } from '../src/index';
+
+const STEP = 0.1;
+const MIN = 0;
+const MAX = 100;
+
+class Basic extends React.Component {
+  state = {
+    values: [50]
+  };
+  render() {
+    return ( 
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          flexWrap: 'wrap'
+        }}
+      >
+        <Range
+          values={this.state.values}
+          step={STEP}
+          min={MIN}
+          max={MAX}
+          rtl
+          onChange={values => this.setState({ values })}
+          renderTrack={({ props, children }) => (
+            <div
+              onMouseDown={props.onMouseDown}
+              onTouchStart={props.onTouchStart}
+              style={{
+                ...props.style,
+                height: '36px',
+                display: 'flex',
+                width: '100%'
+              }}
+            >
+              <div
+                ref={props.ref}
+                style={{
+                  height: '5px',
+                  width: '100%',
+                  borderRadius: '4px',
+                  background: getTrackBackground({
+                    values: this.state.values,
+                    colors: ['#548BF4', '#ccc'],
+                    min: MIN,
+                    max: MAX,
+                    rtl: true,
+                  }),
+                  alignSelf: 'center'
+                }}
+              >
+                {children}
+              </div>
+            </div>
+          )}
+          renderThumb={({ props, isDragged }) => (
+            <div
+              {...props}
+              style={{
+                ...props.style,
+                height: '42px',
+                width: '42px',
+                borderRadius: '4px',
+                backgroundColor: '#FFF',
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                boxShadow: '0px 2px 6px #AAA'
+              }}
+            >
+              <div
+                style={{
+                  height: '16px',
+                  width: '5px',
+                  backgroundColor: isDragged ? '#548BF4' : '#CCC'
+                }}
+              />
+            </div>
+          )}
+        />
+        <output style={{ marginTop: '30px' }} id="output">
+          {this.state.values[0].toFixed(1)}
+        </output>
+      </div>
+    );
+  }
+}
+
+export default Basic;

examples/RtlTwoThumbs.tsx

@@ -0,0 +1,94 @@
+import * as React from 'react';
+import { Range, getTrackBackground } from '../src/index';
+
+const STEP = 0.1;
+const MIN = 0;
+const MAX = 100;
+
+class TwoThumbs extends React.Component {
+  state = {
+    values: [25, 75]
+  };
+  render() {
+    return (
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          flexWrap: 'wrap'
+        }}
+      >
+        <Range
+          values={this.state.values}
+          step={STEP}
+          min={MIN}
+          max={MAX}
+          rtl
+          onChange={values => {
+            this.setState({ values })
+          }}
+          renderTrack={({ props, children }) => (
+            <div
+              onMouseDown={props.onMouseDown}
+              onTouchStart={props.onTouchStart}
+              style={{
+                ...props.style,
+                height: '36px',
+                display: 'flex',
+                width: '100%'
+              }}
+            >
+              <div
+                ref={props.ref}
+                style={{
+                  height: '5px',
+                  width: '100%',
+                  borderRadius: '4px',
+                  background: getTrackBackground({
+                    values: this.state.values,
+                    colors: ['#ccc', '#548BF4', '#ccc'],
+                    min: MIN,
+                    max: MAX,
+                    rtl: true,
+                  }),
+                  alignSelf: 'center'
+                }}
+              >
+                {children}
+              </div>
+            </div>
+          )}
+          renderThumb={({ props, isDragged }) => (
+            <div
+              {...props}
+              style={{
+                ...props.style,
+                height: '42px',
+                width: '42px',
+                borderRadius: '4px',
+                backgroundColor: '#FFF',
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                boxShadow: '0px 2px 6px #AAA'
+              }}
+            >
+              <div
+                style={{
+                  height: '16px',
+                  width: '5px',
+                  backgroundColor: isDragged ? '#548BF4' : '#CCC'
+                }}
+              />
+            </div>
+          )}
+        />
+        <output style={{ marginTop: '30px' }} id="output">
+          {this.state.values[0].toFixed(1)} - {this.state.values[1].toFixed(1)}
+        </output>
+      </div>
+    );
+  }
+}
+
+export default TwoThumbs;

flowtypes/Range.js.flow

@@ -28,6 +28,7 @@ declare interface IProps {
   direction?: string;
   allowOverlap?: boolean;
   disabled?: boolean;
+  rtl?: boolean;
   onChange: (values: number[]) => mixed;
   renderThumb: (params: {
     props: IThumbProps,

flowtypes/utils.js.flow

@@ -7,6 +7,7 @@ declare export function getTrackBackground(params: {
   values: number[],
   colors: string[],
   direction?: string;
+  rtl?: boolean,
 }): string;
 
 declare export function useThumbOverlap(

package.json

@@ -38,7 +38,6 @@
     "interval"
   ],
   "devDependencies": {
-    "babel-loader": "^8.0.6",
     "@storybook/addon-options": "5.1.9",
     "@storybook/addons": "5.1.9",
     "@storybook/react": "5.1.9",
@@ -52,13 +51,15 @@
     "@types/react-dom": "^16.8.4",
     "@types/storybook__react": "^4.0.0",
     "awesome-typescript-loader": "^5.2.1",
+    "babel-loader": "^8.0.6",
     "fork-ts-checker-webpack-plugin": "^0.5.2",
     "imgur": "^0.3.1",
     "jest": "^23.6.0",
     "jest-image-snapshot": "^2.7.0",
     "jest-puppeteer": "^3.9.0",
     "puppeteer": "^1.11.0",
     "start-server-and-test": "^1.7.11",
+    "storybook-addon-rtl": "^0.2.2",
     "ts-jest": "^23.10.5",
     "typescript": "^3.2.4"
   },