extract a proptypes module

.eslintrc.json

@@ -33,7 +33,6 @@
         "semi": [
             "warn",
             "always"
-        ],
-        "react/prop-types" : "warn"
+        ]
     }
 }

lib/Ardagryd.js

@@ -1,5 +1,4 @@
 import React, { PropTypes } from 'react';
-import elementType from 'react-prop-types/lib/elementType';
 
 import GridTable from './GridTable';
 import GridBody from './GridBody';
@@ -15,8 +14,10 @@ import Filter from './Filter';
 import ToolbarDefault from './ToolbarDefault';
 import Pager from './Pager';
 
+import { DESCENDING } from './constants';
+
 import { filterConfigFromProp, sortConfigFromProp } from './utils';
-import { ASCENDING, DESCENDING } from './constants';
+import { columnsConfig as columnsConfigPropType, sortConfigSingle as sortConfigSinglePropType, filterConfig as filterConfigPropType, globalConfig as globalConfigPropType } from './proptypes';
 
 const Ardagryd = (props)=>{
     //Merge custom and default config
@@ -231,57 +232,14 @@ Ardagryd.defaultProps = {
     dispatch: () => {}
 };
 
-// TODO: extract to separate file for re-use in other components
-const filterConfig = React.PropTypes.shape({
-    columnName: React.PropTypes.string.isRequired,
-    expression: React.PropTypes.string.isRequired
-});
-
-// TODO: extract to separate file for re-use in other components
-const sortConfig = React.PropTypes.shape({
-    columnName: React.PropTypes.string.isRequired,
-    order: React.PropTypes.oneOf([ASCENDING, DESCENDING])
-});
 
 Ardagryd.propTypes = {
     objects: PropTypes.arrayOf(PropTypes.object),
-    config: PropTypes.object.isRequired, // TODO: refine
-    columns: PropTypes.objectOf(PropTypes.shape({
-        displayValueGetter: PropTypes.func,
-        id: PropTypes.bool,
-        label: PropTypes.string,
-        order: PropTypes.number,
-        hideTools: PropTypes.bool,
-        sortable: PropTypes.bool,
-        cellRenderer: elementType,
-        sortValueGetter: PropTypes.func,
-        filterFunction: PropTypes.func,
-        filter: (props, propName, componentName, location, propFullName)=>{
-            if (props[propName]){
-                return new Error(
-                  'Invalid prop `' + propFullName + '` supplied to' +
-                  ' `' + componentName + '`. Please use the `filter` prop on the root component.'
-              );
-            }
-        },
-        sort: (props, propName, componentName, location, propFullName)=>{
-            if (props[propName]){
-                return new Error(
-                  'Invalid prop `' + propFullName + '` supplied to' +
-                  ' `' + componentName + '`. Please use the `sort` prop on the root component.'
-              );
-            }
-        }
-    })).isRequired, // TODO: extract to separate file for re-use in other components
+    config: globalConfigPropType,
+    columns: columnsConfigPropType,
     dispatch: PropTypes.func.isRequired,
-    sort: PropTypes.oneOfType([
-        PropTypes.string,
-        sortConfig,
-        PropTypes.arrayOf(sortConfig)
-    ]), // TODO: extract to separate file for re-use in other components
-    filter: PropTypes.oneOfType([
-        filterConfig,
-        PropTypes.arrayOf(filterConfig)]), // TODO: extract to separate file for re-use in other components
+    sort: sortConfigSinglePropType,
+    filter: filterConfigPropType,
     skip: PropTypes.number
 };
 

lib/ArrayCellRenderer.js

@@ -1,4 +1,5 @@
 import React, { Component, PropTypes } from 'react';
+import { columnsConfig as columnsConfigPropType, globalConfig as globalConfigPropType } from './proptypes';
 
 class ArrayCellRenderer extends Component {
     constructor(p){
@@ -26,8 +27,8 @@ class ArrayCellRenderer extends Component {
 }
 
 ArrayCellRenderer.propTypes = {
-    config : PropTypes.object.isRequired, // TODO: refine
-    columns: PropTypes.object.isRequired, // TODO: refine
+    config : globalConfigPropType,
+    columns: columnsConfigPropType,
     columnName: PropTypes.string.isRequired,
     object: PropTypes.object.isRequired,
     value: PropTypes.array.isRequired

lib/BaseCellRenderer.js

@@ -1,4 +1,5 @@
 import React, { PropTypes } from 'react';
+import { columnsConfig as columnsConfigPropType, globalConfig as globalConfigPropType } from './proptypes';
 
 const BaseCellRenderer = (props) =>{
     const ObjCellRenderer = props.config.cellRendererObject;
@@ -22,8 +23,8 @@ const BaseCellRenderer = (props) =>{
 };
 
 BaseCellRenderer.propTypes = {
-    config: PropTypes.object.isRequired, // TODO: refine
-    columns: PropTypes.object.isRequired, // TODO: refine
+    config : globalConfigPropType,
+    columns: columnsConfigPropType,
     value: PropTypes.any.isRequired,
     columnName: PropTypes.string.isRequired,
     object: PropTypes.object.isRequired

lib/Grid.js

@@ -1,6 +1,8 @@
 import React, { Component, PropTypes } from 'react';
 import Ardagryd from './Ardagryd';
 import { filterConfigFromProp, sortConfigFromProp } from './utils';
+import { columnsConfig as columnsConfigPropType, sortConfig as sortConfigPropType, filterConfig as filterConfigPropType, globalConfig as globalConfigPropType } from './proptypes';
+
 export default class Grid extends Component {
 
     constructor(props){
@@ -68,8 +70,10 @@ export default class Grid extends Component {
 
 Grid.propTypes = {
     objects: PropTypes.array.isRequired,
-    config: PropTypes.object.isRequired,
-    columns: PropTypes.object.isRequired
+    config: globalConfigPropType,
+    columns: columnsConfigPropType,
+    sort: sortConfigPropType,
+    filter: filterConfigPropType
 };
 
 Grid.defaultProps = {

lib/GridBody.js

@@ -1,4 +1,5 @@
 import React, { Component, PropTypes } from 'react';
+import { columnsConfig as columnsConfigPropType, globalConfig as globalConfigPropType } from './proptypes';
 
 const GridBody = (props)=>{
     const Row = props.config.row;
@@ -53,10 +54,10 @@ const GridBody = (props)=>{
 };
 
 GridBody.propTypes = {
-    config: PropTypes.object.isRequired, // TODO: refine
+    config : globalConfigPropType,
     objects: PropTypes.arrayOf(PropTypes.object),
-    columnKeys: PropTypes.array.isRequired,
-    columns: PropTypes.object.isRequired, // TODO: refine
+    columnKeys: PropTypes.arrayOf(PropTypes.string).isRequired,
+    columns: columnsConfigPropType,
     children: PropTypes.any,
     idColumn: PropTypes.string.isRequired
 };

lib/GridColumnHeader.js

@@ -1,4 +1,5 @@
 import React, { PropTypes } from 'react';
+import { columnsConfig as columnsConfigPropType, sortConfigSingle as sortConfigSinglePropType, globalConfig as globalConfigPropType } from './proptypes';
 
 const getLabel = (columnKey, columnConfig)=>{
     return columnConfig[columnKey]
@@ -27,9 +28,10 @@ const GridColumnHeader = (props) => {
 };
 
 GridColumnHeader.propTypes = {
-    config: PropTypes.object.isRequired, // TODO: refine
-    columns: PropTypes.object.isRequired, // TODO: refine
-    columnKeys: PropTypes.array.isRequired
+    config : globalConfigPropType,
+    columns: columnsConfigPropType,
+    columnKeys: PropTypes.arrayOf(PropTypes.string).isRequired,
+    sort: sortConfigSinglePropType
 };
 
 export default GridColumnHeader;

lib/GridRow.js

@@ -1,4 +1,5 @@
 import React, { Component, PropTypes } from 'react';
+import { columnsConfig as columnsConfigPropType, globalConfig as globalConfigPropType } from './proptypes';
 
 class GridRow extends Component {
 
@@ -8,7 +9,7 @@ class GridRow extends Component {
 
     shouldComponentUpdate(nextProps){
         return this.props.object !== nextProps.object
-            || this.props.columnConfig !== nextProps.columnConfig
+            || this.props.columns !== nextProps.columns
             || this.props.config.showColumnsWithoutConfig !== nextProps.config.showColumnsWithoutConfig
             || this.props.config.cell !== nextProps.config.cell
             || this.props.config.cellRendererBase !== nextProps.config.cellRendererBase
@@ -25,8 +26,8 @@ class GridRow extends Component {
 
 GridRow.propTypes = {
     object: PropTypes.object.isRequired,
-    config : PropTypes.object.isRequired, // TODO: refine
-    columnConfig: PropTypes.object.isRequired, // TODO: refine
+    config : globalConfigPropType,
+    columns: columnsConfigPropType,
     children: PropTypes.node
 };
 

lib/ObjectCellRenderer.js

@@ -1,4 +1,5 @@
 import React, { PropTypes }  from 'react';
+import { columnsConfig as columnsConfigPropType, globalConfig as globalConfigPropType } from './proptypes';
 
 const ObjectCellRenderer = (props)=> {
     const Renderer = props.config.cellRendererBase;
@@ -20,8 +21,8 @@ const ObjectCellRenderer = (props)=> {
 };
 
 ObjectCellRenderer.propTypes = {
-    config : PropTypes.object.isRequired, // TODO: refine
-    columns: PropTypes.object.isRequired, // TODO: refine
+    config : globalConfigPropType,
+    columns: columnsConfigPropType,
     columnName: PropTypes.string.isRequired,
     object: PropTypes.object.isRequired,
     value: PropTypes.object.isRequired

lib/ToolbarDefault.js

@@ -1,4 +1,5 @@
 import React, { Component, PropTypes } from 'react';
+import { columnsConfig as columnsConfigPropType, filterConfigSingle as filterConfigSinglePropType, globalConfig as globalConfigPropType } from './proptypes';
 
 class ToolbarDefault extends Component {
     constructor(props) {
@@ -36,9 +37,10 @@ class ToolbarDefault extends Component {
 }
 
 ToolbarDefault.propTypes = {
-    config: PropTypes.object.isRequired, // TODO: refine
-    columnKeys: PropTypes.array.isRequired,
-    columns: PropTypes.object.isRequired // TODO: refine
+    config : globalConfigPropType,
+    columnKeys: PropTypes.arrayOf(PropTypes.string).isRequired,
+    columns: columnsConfigPropType,
+    filter: PropTypes.arrayOf(filterConfigSinglePropType).isRequired
 
 };
 

lib/proptypes.js

@@ -0,0 +1,75 @@
+import { PropTypes } from 'react';
+import { ASCENDING, DESCENDING } from './constants';
+import elementType from 'react-prop-types/lib/elementType';
+
+const filterConfigSingle = PropTypes.shape({
+    columnName: PropTypes.string.isRequired,
+    expression: PropTypes.string.isRequired
+});
+
+const sortConfigSingle = PropTypes.shape({
+    columnName: PropTypes.string.isRequired,
+    order: PropTypes.oneOf([ASCENDING, DESCENDING])
+});
+
+const sortConfig = PropTypes.oneOfType([
+    PropTypes.string,
+    sortConfigSingle,
+    PropTypes.arrayOf(sortConfigSingle)
+]);
+
+const filterConfig = PropTypes.oneOfType([
+    filterConfigSingle,
+    PropTypes.arrayOf(filterConfigSingle)
+]);
+
+const columnsConfig = PropTypes.objectOf(PropTypes.shape({
+    displayValueGetter: PropTypes.func,
+    id: PropTypes.bool,
+    label: PropTypes.string,
+    order: PropTypes.number,
+    hideTools: PropTypes.bool,
+    sortable: PropTypes.bool,
+    cellRenderer: elementType,
+    sortValueGetter: PropTypes.func,
+    filterFunction: PropTypes.func,
+    filter: (props, propName, componentName, location, propFullName)=>{
+        if (props[propName]){
+            return new Error(
+              'Invalid prop `' + propFullName + '` supplied to' +
+              ' `' + componentName + '`. Please use the `filter` prop on the root component.'
+          );
+        }
+    },
+    sort: (props, propName, componentName, location, propFullName)=>{
+        if (props[propName]){
+            return new Error(
+              'Invalid prop `' + propFullName + '` supplied to' +
+              ' `' + componentName + '`. Please use the `sort` prop on the root component.'
+          );
+        }
+    }
+}));
+
+const globalConfig = PropTypes.shape({
+    grid: PropTypes.func,
+    body: PropTypes.func,
+    row: PropTypes.func,
+    cell: PropTypes.func,
+    columnHeader: PropTypes.func,
+    header: PropTypes.func,
+    columnHeaderCell: PropTypes.func,
+    cellRendererBase: PropTypes.func,
+    cellRendererObject: PropTypes.func,
+    cellRendererArray: PropTypes.func,
+    filter: PropTypes.func,
+    toolbar: PropTypes.func,
+    showToolbar: PropTypes.bool,
+    showColumnsWithoutConfig: PropTypes.bool,
+    paging: PropTypes.number,
+    displayValueGetter: PropTypes.func,
+    sortValueGetter: PropTypes.func,
+    filterFunction: PropTypes.func
+});
+
+export { globalConfig, columnsConfig, sortConfigSingle, sortConfig, filterConfigSingle, filterConfig };