Improve readability

src/column.js

@@ -47,13 +47,17 @@ class Column extends React.Component {
   }
 
   _handleClick = (e) => {
-    if (this.props.onClick) this.props.onClick(e);
+    const { onClick, events, dataKey, value, rowIndex, rowData } = this.props;
 
-    this.props.events.columnClick(this.props.dataKey, this.props.value, this.props.rowIndex, this.props.rowData);
+    if (onClick) onClick(e);
+
+    events.columnClick(dataKey, value, rowIndex, rowData);
   }
 
   _handleHover = (e) => {
-    this.props.events.columnHover(this.props.dataKey, this.props.value, this.props.rowIndex, this.props.rowData);
+    const { events, dataKey, value, rowIndex, rowData } = this.props;
+
+    events.columnHover(dataKey, value, rowIndex, rowData);
   }
 }
 

src/griddle.js

@@ -42,21 +42,27 @@ export default class Griddle extends React.Component {
   }
 
   render() {
-    const events = this.getEvents();
     const components = this.getComponents();
-    const { styles, settings } = this;
+    const { Filter, SettingsToggle, Settings, Table, NoResults, Pagination } = components;
+    const childProps = {
+      ...this.props,
+      components,
+      styles: this.styles,
+      settings: this.settings,
+      events: this.getEvents()
+    };
+
     return (
       <div>
-        {/*TODO: Lets not duplicate these prop defs all over (events/components) */}
-        <this.components.Filter {...this.props} components={components} styles={styles} settings={settings} events={events} />
-        <this.components.SettingsToggle components={components} styles={styles} events={events} settings={settings} showSettings={this._showSettings} />
-        {this.state.showSettings ? <this.components.Settings {...this.props} components={components} styles={styles} settings={settings} events={events} /> : null }
+        <Filter {...childProps} />
+        <SettingsToggle {...childProps} showSettings={this._showSettings} />
+        {this.state.showSettings ? <Settings {...childProps} /> : null}
 
         {this.props.data && this.props.data.length > 0 ?
-          <this.components.Table {...this.props} components={components} styles={styles} settings={settings} events={events} /> :
-          <this.components.NoResults components={components} styles={styles} settings={settings} events={events} /> }
+          <Table {...childProps} /> :
+          <NoResults {...childProps} />}
 
-        <this.components.Pagination {...this.props} components={components} styles={styles} settings={settings} events={events} />
+        <Pagination {...childProps}/>
       </div>
     );
   }

src/pagination.js

@@ -9,12 +9,14 @@ class Pagination extends React.Component {
   }
 
   render() {
-    const {style, className } = getStyleProperties(this.props, 'pagination');
+    const { style, className } = getStyleProperties(this.props, 'pagination');
+    const { hasPrevious, hasNext, events } = this.props;
+    const { getPreviousPage, getNextPage } = events;
 
     return (<div className={className} style={style}>
-      {this.props.hasPrevious ? <button onClick={this.props.events.getPreviousPage}>Previous</button> : null }
+      {hasPrevious ? <button onClick={getPreviousPage}>Previous</button> : null }
       {this._getSelect()}
-      {this.props.hasNext ? <button onClick={this.props.events.getNextPage}>Next</button> : null }
+      {hasNext ? <button onClick={getNextPage}>Next</button> : null }
     </div>);
   }
 

src/settings.js

@@ -47,32 +47,37 @@ class Settings extends React.Component {
   render() {
     const keys = Object.keys(this.props.renderProperties.columnProperties);
     const { style, className } = getStyleProperties(this.props, 'settings');
+    const { toggleColumn, setPageSize } = this.props.events;
 
     var columns = this.props.allColumns.map(column =>
       <CheckItem
-        toggleColumn={this.props.events.toggleColumn}
+        toggleColumn={toggleColumn}
         name={column}
         text={this._getDisplayName(column)}
         checked={keys.indexOf(column) > -1} />);
 
     return (
       <div style={style} className={className}>
         {columns}
-        <PageSize setPageSize={this.props.events.setPageSize}/>
+        <PageSize setPageSize={setPageSize}/>
       </div>
     );
   }
 
   _getDisplayName = (column) => {
     const { renderProperties } = this.props;
-    if(renderProperties.columnProperties.hasOwnProperty(column)) {
-      return renderProperties.columnProperties[column].hasOwnProperty('displayName') ?
-        renderProperties.columnProperties[column].displayName :
-        column
-    } else if (renderProperties.hiddenColumnProperties.hasOwnProperty(column)) {
-    return renderProperties.hiddenColumnProperties[column].hasOwnProperty('displayName') ?
-        renderProperties.hiddenColumnProperties[column].displayName :
-        column
+    const { columnProperties, hiddenColumnProperties } = renderProperties;
+
+    if(columnProperties.hasOwnProperty(column) &&
+      columnProperties[column].hasOwnProperty('displayName')) {
+
+      return columnProperties[column].displayName;
+
+    } else if (hiddenColumnProperties.hasOwnProperty(column) &&
+      hiddenColumnProperties[column].hasOwnProperty('displayName')) {
+
+      return hiddenColumnProperties[column].displayName;
+
     }
 
     return column;

src/table-body.js

@@ -11,20 +11,18 @@ class TableBody extends React.Component {
   }
 
   render() {
+    const { Row, components, events, styles, settings, renderProperties, tableProperties } = this.props;
+    const childProps = { components, events, styles, settings, tableProperties };
     var rows = this.props.data
     .filter(data => data.visible === undefined || data.visible === true)
     .map((data, index) =>
-      <this.props.components.Row rowData={data}
+      <Row rowData={data}
         key={index}
-        components={this.props.components}
-        events={this.props.events}
         rowIndex={index}
-        rowProperties={this.props.renderProperties.rowProperties}
-        styles={this.props.styles}
-        settings={this.props.settings}
-        tableProperties={this.props.tableProperties}
-        ignoredColumns={this.props.renderProperties.ignoredColumns}
-        columnProperties={this.props.renderProperties.columnProperties} />
+        rowProperties={renderProperties.rowProperties}
+        ignoredColumns={renderProperties.ignoredColumns}
+        columnProperties={renderProperties.columnProperties}
+        {...childProps} />
     );
 
     const { style, className } = getStyleProperties(this.props, 'tableBody');

src/table-heading-cell.js

@@ -18,17 +18,17 @@ class TableHeadingCell extends React.Component {
   }
 
   render() {
-    const style = this.props.styles.getStyle({
-      useStyles: this.props.settings.useGriddleStyles,
-      styles: this.props.styles.inlineStyles,
+    const { styles, settings, alignment, headerAlignment } = this.props;
+    const style = styles.getStyle({
+      useStyles: settings.useGriddleStyles,
+      styles: styles.inlineStyles,
       styleName: 'columnTitle',
-      mergeStyles: this.props.alignment || this.props.headerAlignment ?
-        {textAlign: this.props.headerAlignment || this.props.alignment} :
+      mergeStyles: alignment || headerAlignment ?
+        {textAlign: headerAlignment || alignment} :
         null
     });
 
     const { className } = getStyleProperties(this.props, 'tableHeadingCell');
-    const { sorted } = this.props;
 
     return (
       <th

src/table-heading.js

@@ -15,30 +15,36 @@ import { getStyleProperties } from './utils/styleHelper';
   }
 
   getColumnTitle(column) {
-    const initial = this.props.columnTitles[column]  ?
-              this.props.columnTitles[column] :
-              column;
+    const { columnTitles, renderProperties } = this.props;
+    const { columnProperties } = renderProperties;
+    const initial = columnTitles[column] || column;
 
-    return this.props.renderProperties.columnProperties[column] && this.props.renderProperties.columnProperties[column].hasOwnProperty('displayName') ?
-        this.props.renderProperties.columnProperties[column].displayName :
-        initial
+    if(columnProperties[column] && columnProperties[column].hasOwnProperty('displayName')) {
+      return columnProperties[column];
+    }
+
+    return initial;
   }
 
   render() {
     let { headingClick, headingHover } = this.props.events;
-    const { renderProperties } = this.props;
+    const { TableHeadingCell, renderProperties, columns, pageProperties } = this.props;
+    const { columnProperties, ignoredColumns } = renderProperties;
     const { style, className } = getStyleProperties(this.props, 'tableHeading');
 
-    const headings = this.props.columns.map(column =>{
-      let columnProperty = ColumnHelper.getColumnPropertyObject(renderProperties.columnProperties, column);
-      const showColumn = ColumnHelper.isColumnVisible(column, { columnProperties: renderProperties.columnProperties, ignoredColumns: renderProperties.ignoredColumns });
-      const sortAscending = this.props.pageProperties && this.props.pageProperties.sortAscending;
-      const sorted = this.props.pageProperties && this.props.pageProperties.sortColumns.indexOf(column) > -1
-
+    const headings = columns.map(column => {
+      let columnProperty = ColumnHelper.getColumnPropertyObject(columnProperties, column);
+      const showColumn = ColumnHelper.isColumnVisible(column, {
+        columnProperties: columnProperties,
+        ignoredColumns: ignoredColumns
+      });
+      const sortAscending = pageProperties && pageProperties.sortAscending;
+      const sorted = pageProperties && pageProperties.sortColumns.indexOf(column) > -1;
       const title = this.getColumnTitle(column);
       let component = null;
+
       if(showColumn) {
-        component = (<this.props.components.TableHeadingCell
+        component = (<TableHeadingCell
             key={column}
             column={column}
             sorted={sorted}