Export functions used to build className for Row & Column (#91)

* export functions used to build className list

This will allow other components to act as a Row or Column by sharing the prop building validation

* export className computation functions

* Document get classname functions

* test all symbols are exported as they should be

Author: nathanstitt

README.md

@@ -57,6 +57,26 @@ Example
 Looking for example to use `react-flexbox-grid`? Head over to [react-flexbox-grid-example](https://github.com/roylee0704/react-flexbox-grid-example).
 
 
+Advanced composition
+-------
+Functions for generating Row and Column classNames are exported for use in other components.  For example, suppose you have a `MyFormInput` component that should also act as both a `Row` and a `Col`.
+
+```js
+import {getRowClassNames, getColClassNames} from 'react-flexbox-grid'
+
+export default function MyFormInput(props) {
+  return (
+    <form className={getRowclassNames(props)}>
+      <input className={getColClassNames(props)} />
+    </form>
+  );
+}
+
+// Can now be rendered as: <MyFormInput end="sm" sm={8} />
+```
+
+
+
 Installation
 ------------
 

src/components/Col.js

@@ -35,7 +35,7 @@ function isInteger(value) {
   return typeof value === 'number' && isFinite(value) && Math.floor(value) === value;
 }
 
-function getClassNames(props) {
+export function getColClassNames(props) {
   const extraClasses = [];
 
   if (props.className) {
@@ -61,7 +61,7 @@ function getClassNames(props) {
 }
 
 export default function Col(props) {
-  const classNames = getClassNames(props);
+  const classNames = getColClassNames(props);
 
   return React.createElement(props.tagName || 'div', createProps(propTypes, props, classNames));
 }

src/components/Row.js

@@ -20,7 +20,7 @@ const propTypes = {
   children: PropTypes.node
 };
 
-function getClassNames(props) {
+export function getRowClassNames(props) {
   const modificators = [props.className, getClass('row')];
 
   for (let i = 0; i < rowKeys.length; ++i) {
@@ -39,7 +39,7 @@ function getClassNames(props) {
 }
 
 export default function Row(props) {
-  return React.createElement(props.tagName || 'div', createProps(propTypes, props, getClassNames(props)));
+  return React.createElement(props.tagName || 'div', createProps(propTypes, props, getRowClassNames(props)));
 }
 
 Row.propTypes = propTypes;

src/index.js

@@ -1,3 +1,3 @@
 export Grid from './components/Grid';
-export Row from './components/Row';
-export Col from './components/Col';
+export Row, { getRowClassNames } from './components/Row';
+export Col, { getColClassNames } from './components/Col';

test/components/Col.spec.js

@@ -1,7 +1,7 @@
 import expect from 'expect';
 import React from 'react';
 import TestUtils from 'react-addons-test-utils';
-import Col from '../../src/components/Col';
+import Col, { getColClassNames } from '../../src/components/Col';
 import style from 'flexboxgrid';
 
 const renderer = TestUtils.createRenderer();
@@ -17,6 +17,10 @@ describe('Col', () => {
     expect(className).toContain(style['col-lg-4']);
   });
 
+  it('Computes the classNames', () => {
+    expect(getColClassNames({ className: 'test', xs: 12 })).toEqual([style['col-xs-12'], 'test']);
+  });
+
   it('Should add "first-*" class if "first" property is set', () => {
     renderer.render(<Col first="md"/>);
     expect(renderer.getRenderOutput().props.className).toContain(style['first-md']);

test/components/Row.spec.js

@@ -1,7 +1,7 @@
 import expect from 'expect';
 import React from 'react';
 import TestUtils from 'react-addons-test-utils';
-import Row from '../../src/components/Row';
+import Row, { getRowClassNames } from '../../src/components/Row';
 import style from 'flexboxgrid';
 
 const renderer = TestUtils.createRenderer();
@@ -12,6 +12,10 @@ describe('Row', () => {
     expect(renderer.getRenderOutput().props.className).toEqual(style.row);
   });
 
+  it('Computes the classNames', () => {
+    expect(getRowClassNames({ className: 'test', reverse: true })).toEqual(['test', style.row, style.reverse]);
+  });
+
   it('Should add "reverse" class if "reverse" property is true', () => {
     renderer.render(<Row reverse />);
     expect(renderer.getRenderOutput().props.className).toContain(style.reverse);

test/index.spec.js

@@ -0,0 +1,10 @@
+import expect from 'expect';
+import * as Exports from '../src/index';
+
+describe('react-flexbox-grid exports', () => {
+  it('exports all the symbols it should', () => {
+    ['Grid', 'Row', 'Col', 'getColClassNames', 'getRowClassNames'].forEach((prop) => {
+      expect(Exports.hasOwnProperty(prop)).toBe(true);
+    });
+  });
+});