Lookup classnames using with customizable function (#90)

* Lookup classnames using lookup function

This will allow implications to not use css modules.

* Fallback to returning class name if it's not found in styles

* Test styles exist; remove lookup function

* remove unused imports

Author: nathanstitt

src/classNames.js

@@ -0,0 +1,5 @@
+import styles from 'flexboxgrid';
+
+export default function getClass(className) {
+  return (styles && styles[className]) ? styles[className] : className;
+}

src/components/Col.js

@@ -1,6 +1,6 @@
-import style from 'flexboxgrid';
 import React, { PropTypes } from 'react';
 import createProps from '../createProps';
+import getClass from '../classNames';
 import { ColumnSizeType, ViewportSizeType } from '../types';
 
 const propTypes = {
@@ -43,20 +43,20 @@ function getClassNames(props) {
   }
 
   if (props.first) {
-    extraClasses.push(style['first-' + props.first]);
+    extraClasses.push(getClass('first-' + props.first));
   }
 
   if (props.last) {
-    extraClasses.push(style['last-' + props.last]);
+    extraClasses.push(getClass('last-' + props.last));
   }
 
   if (props.reverse) {
-    extraClasses.push(style.reverse);
+    extraClasses.push(getClass('reverse'));
   }
 
   return Object.keys(props)
     .filter(key => classMap[key])
-    .map(key => style[isInteger(props[key]) ? (classMap[key] + '-' + props[key]) : classMap[key]])
+    .map(key => getClass(isInteger(props[key]) ? (classMap[key] + '-' + props[key]) : classMap[key]))
     .concat(extraClasses);
 }
 

src/components/Grid.js

@@ -1,6 +1,6 @@
 import React, { PropTypes } from 'react';
 import createProps from '../createProps';
-import style from 'flexboxgrid';
+import getClass from '../classNames';
 
 const propTypes = {
   fluid: PropTypes.bool,
@@ -10,7 +10,7 @@ const propTypes = {
 };
 
 export default function Grid(props) {
-  const containerClass = style[props.fluid ? 'container-fluid' : 'container'];
+  const containerClass = getClass(props.fluid ? 'container-fluid' : 'container');
   const classNames = [props.className, containerClass];
 
   return React.createElement(props.tagName || 'div', createProps(propTypes, props, classNames));

src/components/Row.js

@@ -1,4 +1,4 @@
-import style from 'flexboxgrid';
+import getClass from '../classNames';
 import React, { PropTypes } from 'react';
 import createProps from '../createProps';
 import { ViewportSizeType } from '../types';
@@ -21,18 +21,18 @@ const propTypes = {
 };
 
 function getClassNames(props) {
-  const modificators = [props.className, style.row];
+  const modificators = [props.className, getClass('row')];
 
   for (let i = 0; i < rowKeys.length; ++i) {
     const key = rowKeys[i];
     const value = props[key];
     if (value) {
-      modificators.push(style[`${key}-${value}`]);
+      modificators.push(getClass(`${key}-${value}`));
     }
   }
 
   if (props.reverse) {
-    modificators.push(style.reverse);
+    modificators.push(getClass('reverse'));
   }
 
   return modificators;

test/classNames.spec.js

@@ -0,0 +1,12 @@
+import expect from 'expect';
+import style from 'flexboxgrid';
+import getClass from '../src/classNames';
+
+describe('classNames lookups', () => {
+  it('translates known styles', () => {
+    expect(getClass('col-xs')).toEqual(style['col-xs']);
+  });
+  it('falls back to returning unknown classnames', () => {
+    expect(getClass('blah-blah-blah')).toEqual('blah-blah-blah');
+  });
+});