Export row/column prop builder functions (#95)

* Export row/column prop builder functions

Previously the get<Row/Column>Class methods exported an array of classNames, which wasn't really suitable for passing
directly onto a className prop.  Plus it didn't clean the props so the caller would know which were intended for them
and which were sizing props

This changes the exports to return an object with a `className` property and the rest of the props, so you can do
something like: `{className, ...otherProps} = getColumnProps(this.props)`

* Update composition example to show use with a third-party component

* Change component name, improve explanation

* Demonstrate re-use of existing propType validations

Author: nathanstitt

README.md

@@ -59,23 +59,36 @@ Looking for example to use `react-flexbox-grid`? Head over to [react-flexbox-gri
 
 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`.
+Functions for generating Row and Column classNames are exported for use in other components.
+
+For example, suppose you're using a third party component that accepts a className and you would like it to be rendered as Column.  You could do so by extracting the column sizing props that `MyComponent` uses and then pass the generated className on to `SomeComponent`
+
 
 ```js
-import {getRowClassNames, getColClassNames} from 'react-flexbox-grid'
+import React from 'react';
+import { Row, Col, getRowProps, getColumnProps } from 'react-flexbox-grid';
+// a component that accepts a className
+import SomeComponent from 'some-package';
+
+export default function MyComponent(props) {
+  const colProps = getColumnProps(props);
+  const rowProps = getRowProps(props);
 
-export default function MyFormInput(props) {
   return (
-    <form className={getRowClassNames(props)}>
-      <input className={getColClassNames(props)} />
+    <form className={rowProps.className}>
+      <SomeComponent classname={colProps.className} />
+      <input value={props.value} onChange={props.onChange} />
     </form>
   );
 }
 
-// Can now be rendered as: <MyFormInput end="sm" sm={8} />
-```
-
+MyComponent.propTypes = Object.assign({
+  onChange: React.PropTypes.func.isRequired,
+  value: React.PropTypes.string.isRequired,
+}, Col.propTypes, Row.propTypes);  // Re-use existing Row and Col propType validations
 
+// Can now be rendered as: <MyComponent end="sm" sm={8} value="my input value" onChange={...} />
+```
 
 Installation
 ------------

src/components/Col.js

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

src/components/Row.js

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

src/index.js

@@ -1,3 +1,3 @@
 export Grid from './components/Grid';
-export Row, { getRowClassNames } from './components/Row';
-export Col, { getColClassNames } from './components/Col';
+export Row, { getRowProps } from './components/Row';
+export Col, { getColumnProps } 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, { getColClassNames } from '../../src/components/Col';
+import Col, { getColumnProps } from '../../src/components/Col';
 import style from 'flexboxgrid';
 
 const renderer = TestUtils.createRenderer();
@@ -17,8 +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('Computes the column properties', () => {
+    expect(getColumnProps({ className: 'test', xs: 12, unknown: 'foo' })).toEqual({
+      unknown: 'foo', className: `${style['col-xs-12']} test`
+    });
   });
 
   it('Should add "first-*" class if "first" property is set', () => {

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, { getRowClassNames } from '../../src/components/Row';
+import Row, { getRowProps } from '../../src/components/Row';
 import style from 'flexboxgrid';
 
 const renderer = TestUtils.createRenderer();
@@ -12,8 +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('Computes the row properties', () => {
+    expect(getRowProps({ className: 'test', reverse: true, unknown: 'bar' })).toEqual({
+      unknown: 'bar', className: `test ${style.row} ${style.reverse}`
+    });
   });
 
   it('Should add "reverse" class if "reverse" property is true', () => {

test/index.spec.js

@@ -3,7 +3,7 @@ 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) => {
+    ['Grid', 'Row', 'Col', 'getColumnProps', 'getRowProps'].forEach((prop) => {
       expect(Exports.hasOwnProperty(prop)).toBe(true);
     });
   });