Add directional StyleSheet creation based on context

package.json

@@ -72,12 +72,14 @@
     "sinon-sandbox": "^1.0.2"
   },
   "peerDependencies": {
-    "react": ">=0.14"
+    "react": ">=0.14",
+    "react-with-direction": "^1.1.0"
   },
   "dependencies": {
     "deepmerge": "^1.5.2",
     "global-cache": "^1.2.1",
     "hoist-non-react-statics": "^2.3.1",
-    "prop-types": "^15.6.0"
+    "prop-types": "^15.6.0",
+    "react-with-direction": "^1.1.0"
   }
 }

src/ThemedStyleSheet.js

@@ -16,19 +16,27 @@ function registerInterface(interfaceToRegister) {
   styleInterface = interfaceToRegister;
 }
 
-function create(makeFromTheme) {
+function create(makeFromTheme, createWithDirection) {
   // Get an id to associate with this stylesheet
   const id = internalId;
   internalId += 1;
 
   const { theme, styles } = styleTheme;
-  styles[id] = styleInterface.create(makeFromTheme(theme));
+  styles[id] = createWithDirection(makeFromTheme(theme));
 
   makeFromThemes[id] = makeFromTheme;
 
   return () => styleTheme.styles[id];
 }
 
+function createLTR(makeFromTheme) {
+  return create(makeFromTheme, styleInterface.create);
+}
+
+function createRTL(makeFromTheme) {
+  return create(makeFromTheme, styleInterface.createRTL || styleInterface.create);
+}
+
 function get() {
   return styleTheme.theme;
 }
@@ -59,7 +67,8 @@ export default globalCache.setIfMissingThenGet(
   () => ({
     registerTheme,
     registerInterface,
-    create,
+    create: createLTR,
+    createRTL,
     get,
     resolveNoRTL,
     resolve,

src/withStyles.jsx

@@ -3,6 +3,9 @@ import PropTypes from 'prop-types';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 import deepmerge from 'deepmerge';
 
+import { CHANNEL, DIRECTIONS } from 'react-with-direction/dist/constants';
+import brcastShape from 'react-with-direction/dist/proptypes/brcast';
+
 import ThemedStyleSheet from './ThemedStyleSheet';
 
 // Add some named exports for convenience.
@@ -28,6 +31,10 @@ function baseClass(pureComponent) {
   return React.Component;
 }
 
+const contextTypes = {
+  [CHANNEL]: brcastShape,
+};
+
 export function withStyles(
   styleFn,
   {
@@ -37,18 +44,28 @@ export function withStyles(
     pureComponent = false,
   } = {},
 ) {
-  let styleDef;
+  let styleDefLTR;
+  let styleDefRTL;
   const BaseClass = baseClass(pureComponent);
 
   return function withStylesHOC(WrappedComponent) {
     // NOTE: Use a class here so components are ref-able if need be:
     // eslint-disable-next-line react/prefer-stateless-function
     class WithStyles extends BaseClass {
       componentWillMount() {
-        // defer StyleSheet creation to run-time
-        if (!styleDef) {
-          styleDef = styleFn ? ThemedStyleSheet.create(styleFn) : EMPTY_STYLES_FN;
+        this.maybeCreateStyles();
+      }
+
+      maybeCreateStyles() {
+        const direction = this.context[CHANNEL] && this.context[CHANNEL].getState();
+        const isRTL = direction === DIRECTIONS.RTL;
+        if (isRTL && !styleDefRTL) {
+          styleDefRTL = styleFn ? ThemedStyleSheet.createRTL(styleFn) : EMPTY_STYLES_FN;
+        } else if (!isRTL && !styleDefLTR) {
+          styleDefLTR = styleFn ? ThemedStyleSheet.create(styleFn) : EMPTY_STYLES_FN;
         }
+
+        return isRTL ? styleDefRTL : styleDefLTR;
       }
 
       render() {
@@ -63,6 +80,8 @@ export function withStyles(
           ThemedStyleSheet.flush();
         }
 
+        const styleDef = this.maybeCreateStyles();
+
         return (
           <WrappedComponent
             {...this.props}
@@ -81,6 +100,7 @@ export function withStyles(
 
     WithStyles.WrappedComponent = WrappedComponent;
     WithStyles.displayName = `withStyles(${wrappedComponentName})`;
+    WithStyles.contextTypes = contextTypes;
     if (WrappedComponent.propTypes) {
       WithStyles.propTypes = deepmerge({}, WrappedComponent.propTypes);
       delete WithStyles.propTypes[stylesPropName];

test/withStyles_test.jsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { expect } from 'chai';
-import { shallow } from 'enzyme';
+import { render, shallow } from 'enzyme';
 import deepmerge from 'deepmerge';
 import sinon from 'sinon-sandbox';
+import DirectionProvider, { DIRECTIONS } from 'react-with-direction/dist/DirectionProvider';
 
 import ThemedStyleSheet from '../src/ThemedStyleSheet';
 import { css, cssNoRTL, withStyles, withStylesPropTypes } from '../src/withStyles';
@@ -63,7 +64,6 @@ describe('withStyles()', () => {
       expect(testInterface.create.callCount).to.equal(1);
     });
 
-
     it('has a wrapped displayName', () => {
       function MyComponent() {
         return null;
@@ -263,18 +263,23 @@ describe('RTL support', () => {
   let testInterface;
   let resolveStub;
   let resolveNoRTLStub;
+  let createStub;
+  let createRTLStub;
 
   beforeEach(() => {
     resolveStub = sinon.stub();
     resolveNoRTLStub = sinon.stub();
 
+    createStub = sinon.stub();
+    createRTLStub = sinon.stub();
+
     testInterface = {
-      create() {},
+      create: createStub,
+      createRTL: createRTLStub,
       resolve: resolveStub,
       resolveNoRTL: resolveNoRTLStub,
       flush: sinon.spy(),
     };
-    sinon.stub(testInterface, 'create').callsFake(styleHash => styleHash);
 
     ThemedStyleSheet.registerTheme({});
     ThemedStyleSheet.registerInterface(testInterface);
@@ -305,4 +310,44 @@ describe('RTL support', () => {
       expect(resolveNoRTLStub.callCount).to.equal(1);
     });
   });
+
+  describe('contextual create', () => {
+    it('calls ThemedStyleSheet.create without direction set', () => {
+      function MyComponent() {
+        return null;
+      }
+
+      const WrappedComponent = withStyles(() => ({}))(MyComponent);
+      render(<WrappedComponent />);
+      expect(testInterface.create).to.have.property('callCount', 1);
+    });
+
+    it('calls ThemedStyleSheet.create with LTR direction', () => {
+      function MyComponent() {
+        return null;
+      }
+
+      const WrappedComponent = withStyles(() => ({}))(MyComponent);
+      render(
+        <DirectionProvider direction={DIRECTIONS.LTR}>
+          <WrappedComponent />
+        </DirectionProvider>,
+      );
+      expect(testInterface.create).to.have.property('callCount', 1);
+    });
+
+    it('calls ThemedStyleSheet.createRTL with RTL direction', () => {
+      function MyComponent() {
+        return null;
+      }
+
+      const WrappedComponent = withStyles(() => ({}))(MyComponent);
+      render(
+        <DirectionProvider direction={DIRECTIONS.RTL}>
+          <WrappedComponent />
+        </DirectionProvider>,
+      );
+      expect(testInterface.createRTL).to.have.property('callCount', 1);
+    });
+  });
 });