[DON'T MERGE] Use context + function components

package.json

@@ -36,6 +36,7 @@
   "dependencies": {
     "classnames": "^2.2.3",
     "object-assign": "*",
-    "react": "^0.14.0"
+    "react": "^0.14.0",
+    "recompose": "^0.15.0"
   }
 }

src/column.js

@@ -1,89 +1,65 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
 import classnames from 'classnames';
+import { compose, shouldUpdate, getContext, mapProps } from 'recompose';
 
-import { getStyleProperties } from './utils/styleHelper';
+const Column = compose(
+  //Only update if forceUpdate is true or the values don't match
+  shouldUpdate(({ value }, nextProps) => (nextProps.value !== value || nextProps.forceUpdate === true )),
 
-class Column extends React.Component {
-  constructor(props, context) {
-    super(props, context);
-  }
+  //We are using the following contexts:
+  getContext({ utils: PropTypes.object }),
 
-  shouldComponentUpdate(nextProps) {
-    if(this.props.forceUpdate) { return true; }
-    if(this.props.value === nextProps.value) {
-      return false;
-    }
+  //Build new props in addition to the ones that are passed in
+  mapProps(props => ({
+    classNames: classnames(props.utils.getStyleProperties(props, 'column'), props.cssClassName),
 
-    return true;
-  }
-
-  render() {
-    //TODO: this is temporary -- we'll need to merge styles or something
-    //  why not use the getStyle from defaultStyles?
-    const styles = this._getStyles();
-
-    const { className } = getStyleProperties(this.props, 'column');
-    const classNames = classnames(className, this.props.cssClassName);
-
-    return (
-      <td
-        style={styles}
-        key={this.props.dataKey}
-        rowIndex={this.props.rowIndex}
-        onClick={this._handleClick}
-        onMouseOver={this._handleHover}
-        className={classNames}>
-          {this.props.hasOwnProperty('customComponent') ?
-            <this.props.customComponent
-              data={this.props.value}
-              rowData={this.props.rowData}
-              originalData={this.props.originalRowData}
-              rowIndex={this.props.rowIndex}
-              absoluteRowIndex={this.props.absoluteRowIndex}
-              extraData={this.props.extraData} /> :
-            this.props.value}
-      </td>
-    );
-  }
-
-  //TODO: Figure out a way to get this hooked up with the normal styles methods
-  //maybe a merge styles property or something along those lines
-  _getStyles = () => {
-    const style = this.props.styles.getStyle({
-      styles: this.props.styles.inlineStyles,
+    //This is the inline styles object to use
+    columnStyles: props.styles.getStyle({
+      styles: props.styles.inlineStyles,
       styleName: 'column',
-      //todo: make this nicer
       mergeStyles: {
-          ...((this.props.width || this.props.alignment || this.props.styles) ?
-            Object.assign({ width: this.props.width || null, textAlign: this.props.alignment }) : {}),
-          ...this.props.style
+        ...((props.width || props.alignment || props.styles) ?
+          Object.assign({ width: props.width || null,
+            textAlign: props.alignment }) : {})
       }
-    });
+    }),
 
-    return style;
-  }
+    //Click callback
+    handleClick: (e) => {
+      if (props.onClick) { props.onClick(e) };
 
-  _handleClick = (e) => {
-    if (this.props.onClick) this.props.onClick(e);
+      props.events.columnClick(props.dataKey, props.value, props.rowIndex, props.rowData);
+    },
 
-    this.props.events.columnClick(this.props.dataKey, this.props.value, this.props.rowIndex, this.props.rowData);
-  }
+    //hover callback
+    handleHover: (e) => {
+      props.events.columnHover(props.dataKey, props.value, props.rowIndex, props.rowData);
+    },
 
-  _handleHover = (e) => {
-    this.props.events.columnHover(this.props.dataKey, this.props.value, this.props.rowIndex, this.props.rowData);
-  }
-}
+    columnValue: (props.hasOwnProperty('customComponent') ?
+            <props.customComponent
+              data={props.value}
+              rowData={props.rowData}
+              originalData={props.originalRowData}
+              rowIndex={props.rowIndex}
+              absoluteRowIndex={props.absoluteRowIndex}
+              extraData={props.extraData} /> :
+            props.value),
 
-Column.defaultProps = {
-  columnProperties: {
-    cssClassName: ''
-  }
-};
+    //Return all the props
+    ...props
+  }))
+)(({ columnValue, handleHover, handleClick, classNames, columnStyles, dataKey, rowIndex }) => (
+      <td
+        style={columnStyles}
+        key={dataKey}
+        rowIndex={rowIndex}
+        onClick={handleClick}
+        onMouseOver={handleHover}
+        className={classNames}>
+      {columnValue}
+      </td>
 
-Column.propTypes = {
-  alignment: React.PropTypes.oneOf(['left', 'right', 'center']),
-  columnHover: React.PropTypes.func,
-  columnClick: React.PropTypes.func
-};
+))
 
 export default Column;

src/defaultSettings.js

@@ -2,5 +2,6 @@ export default {
   useGriddleStyles: true,
   useGriddleClassNames: false,
   useFixedTable: true,
-  pageSize: 10
+  pageSize: 10,
+  filterPlaceholderText: "Filter"
 }

src/filter.js

@@ -1,36 +1,41 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
 import { getStyleProperties }  from './utils/styleHelper';
 
-class Filter extends React.Component {
-  constructor(props, context) {
-    super(props, context);
-
-    this._handleChange = this._handleChange.bind(this);
-  }
-
-  shouldComponentUpdate(props) {
-    return false;
-  }
-
-  render() {
-    const {style, className } = getStyleProperties(this.props, 'filter');
-
-    return (
-      <input
-        type="text"
-        name="filter"
-        className={className}
-        style={style}
-        placeholder="filter"
-        onChange={this._handleChange} />
-    );
-  }
-
-  _handleChange = (e) => {
-    //TODO: debounce this
-    this.props.events.setFilter(e.target.value);
-  }
-}
+import { compose, shouldUpdate, getContext, mapProps } from 'recompose';
+
+const Filter = compose(
+  //this should not update
+  shouldUpdate(() => (false)),
+
+  //we are using the utils object from context
+  getContext({ utils: PropTypes.object }),
+
+  //Get styleProperties for the next mapProps
+  mapProps((props) => ({
+    styleProperties: props.utils.getStyleProperties(props, 'filter'),
+
+    ...props
+  })),
+
+  mapProps((props) => ({
+    handleChange: ((e) => { props.events.setFilter(e.target.value) }),
+
+    style: props.styleProperties.style,
+
+    className: props.styleProperties.className,
+
+    placeholder: props.settings.filterPlaceholderText || "Filter",
+  }))
+)(({className, style, handleChange, placeholder}) => (
+  <input
+    type="text"
+    name="filter"
+    className={className}
+    style={style}
+    placeholder={placeholder}
+    onChange={handleChange}
+  />
+));
 
 Filter.propTypes = {
   setFilter: React.PropTypes.func

src/griddle.js

@@ -5,15 +5,39 @@ import * as defaultModules from './defaultModules';
 import { getAssignedStyles } from './defaultStyles';
 import * as defaultSettings from './defaultSettings';
 import { arraysEqual } from './utils/arrayHelper';
+import { getStyleProperties } from './utils/styleHelper';
+import ColumnHelper from './utils/column-helper';
 
 export default class Griddle extends React.Component {
+  static childContextTypes = {
+    utils: React.PropTypes.object
+  }
+
   constructor(props, context) {
     super(props, context);
 
     this.wireUpSettings(props);
     this.state = { showSettings: false };
   }
 
+  getChildContext() {
+    return {
+      utils: {
+        getStyleProperties,
+        isColumnVisible: ColumnHelper.isColumnVisible,
+        getColumnPropertyObject: ColumnHelper.getColumnPropertyObject,
+        arraysEqual: arraysEqual,
+        getOriginalRowData: (rowIndex) => {
+          return this.props.state.data[rowIndex]
+        },
+        getMetadata: (rowIndex) => {
+          const row = this.props.data[rowIndex];
+          return row ? row.__metadata : {}
+        }
+      }
+    };
+  }
+
   wireUpSettings = (props) => {
     this.settings = Object.assign({}, defaultSettings, props.settings);
     this.components = Object.assign({}, defaultModules, props.components);
@@ -50,6 +74,7 @@ export default class Griddle extends React.Component {
     const events = this.getEvents();
     const components = this.getComponents();
     const { styles, settings } = this;
+
     return (
       <div>
         {/*TODO: Lets not duplicate these prop defs all over (events/components) */}

src/loading.js

@@ -1,20 +1,28 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
 import {getStyleProperties}  from './utils/styleHelper';
 
-class Loading extends React.Component {
-  render() {
-    const { style, className } = getStyleProperties(this.props, 'loading');
+import { compose, getContext, mapProps } from 'recompose';
 
-    return (
-      <tr>
-        <td>
-          <div style={style} className={className}>
-            <h4>Loading...</h4>
-          </div>
-        </td>
-      </tr>
-    );
-  }
-}
+const Loading = compose(
+  getContext({ utils: PropTypes.object }),
+
+  mapProps(props => ({
+    styleProperties: props.utils.getStyleProperties(props, 'loading'),
+    ...props
+  })),
+
+  mapProps(props => ({
+    style: props.styleProperties.style,
+    className: props.styleProperties.className
+  }))
+)(({ style, className }) => (
+  <tr>
+    <td>
+      <div style={style} className={className}>
+        <h4>Loading...</h4>
+      </div>
+    </td>
+  </tr>
+))
 
 export default Loading;

src/no-results.js

@@ -1,16 +1,24 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
 import {getStyleProperties}  from './utils/styleHelper';
 
-class NoResults extends React.Component {
-  render() {
-    const { style, className } = getStyleProperties(this.props, 'noResults');
+import { compose, getContext, mapProps } from 'recompose';
 
-    return (
-      <div style={style} className={className}>
-        <h4>No results found.</h4>
-      </div>
-    )
-  }
-}
+const NoResults = compose(
+  getContext({ utils: PropTypes.object }),
+
+  mapProps(props => ({
+    styleProperties: props.utils.getStyleProperties(props, 'noResults'),
+    ...props
+  })),
+
+  mapProps(props => ({
+    style: props.styleProperties.style,
+    className: props.styleProperties.className
+  }))
+)(({ style, className }) => (
+  <div style={style} className={className}>
+    <h4>No results found.</h4>
+  </div>
+))
 
 export default NoResults;