issue 781

src/module.d.ts

@@ -448,6 +448,8 @@ export namespace plugins {
 
     var LocalPlugin : GriddlePlugin;
 
+    var LocalCustomPlugin : GriddlePlugin;
+
     interface PositionSettings {
         // The height of the table
         tableHeight?: number|string;

src/module.js

@@ -10,12 +10,14 @@ import utils from './utils';
 import CorePlugin from './core';
 import LegacyStylePlugin from './plugins/legacyStyle';
 import LocalPlugin from './plugins/local';
+import LocalCustomPlugin from './plugins/localCustomPlugin';
 import PositionPlugin from './plugins/position';
 
 const plugins = {
   CorePlugin,
   LegacyStylePlugin,
   LocalPlugin,
+  LocalCustomPlugin,
   PositionPlugin,
 };
 

src/plugins/localCustomPlugin/components/TableBody.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+const TableBody = ({ rowIds, Row, style, className, extTrigger}) => {
+  return (
+    <tbody style={style} className={className}>
+      { rowIds && rowIds.map((k, i) => <Row key={k} griddleKey={k} index={i} />) }
+      <tr>
+      <td colSpan="3">
+       This Button will use an external callback, brought in by the TableContainer (set in Griddle props), This trigger will print something and try to set state in the external context, but It fails
+       <button onClick={extTrigger}> Try me </button>
+      </td>
+      </tr>
+    </tbody>
+  )};
+
+export default TableBody;

src/plugins/localCustomPlugin/components/TableBodyContainer.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from '../../../utils/griddleConnect';
+import compose from 'recompose/compose';
+import mapProps from 'recompose/mapProps';
+import getContext from 'recompose/getContext';
+
+import { classNamesForComponentSelector, stylesForComponentSelector } from '../selectors/localSelectors';
+
+const ComposedTableBodyContainer = OriginalComponent => compose(
+  getContext({
+    components: PropTypes.object,
+    selectors: PropTypes.object,
+  }),
+  mapProps(props => ({
+    Row: props.components.Row,
+    visibleRowIdsSelector: props.selectors.visibleRowIdsSelector,
+    ...props
+  })),
+  connect((state, props) => ({
+    visibleRowIds: props.visibleRowIdsSelector(state),
+    className: classNamesForComponentSelector(state, 'TableBody'),
+    style: stylesForComponentSelector(state, 'TableBody'),
+    extTrigger: ((state)=>{return state.get('extTrigger')})(state),
+  })),
+  // withHandlers({
+  //   Row: props => props.components.Row
+  // })
+)(({ Row, visibleRowIds, style, className, extTrigger }) => (
+  <OriginalComponent
+    rowIds={visibleRowIds}
+    Row={Row}
+    style={style}
+    className={className}
+    extTrigger={extTrigger}
+  />
+));
+
+export default ComposedTableBodyContainer;

src/plugins/localCustomPlugin/index.js

@@ -0,0 +1,9 @@
+import components from './components';
+import * as reducer from './reducers';
+// import * as selectors from './selectors/localSelectors';
+
+export default {
+  components,
+  // reducer
+  // selectors
+};

stories/index.tsx

@@ -16,7 +16,7 @@ import GenericGriddle, { connect, actions, components, selectors, plugins, utils
 const { Cell, Row, Table, TableContainer, TableBody, TableHeading, TableHeadingCell } = components;
 const { SettingsWrapper, SettingsToggle, Settings } = components;
 
-const { LegacyStylePlugin, LocalPlugin, PositionPlugin } = plugins;
+const { LegacyStylePlugin, LocalPlugin, PositionPlugin, LocalCustomPlugin } = plugins;
 
 import fakeData, { FakeData } from './fakeData';
 import { person, fakeData2, personClass, fakeData3 } from './fakeData2';
@@ -105,6 +105,43 @@ storiesOf('Griddle main', module)
       </Griddle>
     )
   })
+  .add('Controlling external state through a callback', () => {
+
+    class Something extends React.Component<{}, any> {
+      constructor() {
+        super();
+
+        this.extTrigger = this.extTrigger.bind(this)
+
+        this.state = {
+            extVar: 0
+        };
+      }
+
+      extTrigger(){
+        console.log("EXT TRIGGER");
+        this.setState({ extVar: 1 })
+      }
+
+      render() {
+        const {
+            extVar
+        } = this.state
+
+        return (
+        <div>
+        <p>The magic number is: {extVar}</p>
+          <Griddle extTrigger={this.extTrigger} data={fakeData} plugins={[LocalPlugin, LocalCustomPlugin]}>
+            <RowDefinition>
+            </RowDefinition>
+          </Griddle>
+        </div>
+        )
+      }
+    }
+
+    return <Something />
+  })
   .add('with local, delayed data', () => {
     class DeferredGriddle extends React.Component<GriddleProps<FakeData>, { data?: FakeData[] }> {
       private timeout;