From d7b646c360bed7c686d8614f53628b89f9c09cce Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Fri, 22 Dec 2017 00:09:35 +0100
Subject: [PATCH] issue 781

---
 src/module.d.ts                               |  2 +
 src/module.js                                 |  2 +
 .../localCustomPlugin/components/TableBody.js | 16 ++++++++
 .../components/TableBodyContainer.js          | 39 +++++++++++++++++++
 src/plugins/localCustomPlugin/index.js        |  9 +++++
 stories/index.tsx                             | 39 ++++++++++++++++++-
 6 files changed, 106 insertions(+), 1 deletion(-)
 create mode 100644 src/plugins/localCustomPlugin/components/TableBody.js
 create mode 100644 src/plugins/localCustomPlugin/components/TableBodyContainer.js
 create mode 100644 src/plugins/localCustomPlugin/index.js

diff --git a/src/module.d.ts b/src/module.d.ts
index 283c9a76..2042d861 100644
--- a/src/module.d.ts
+++ b/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;
diff --git a/src/module.js b/src/module.js
index 1a1c04f8..e550655c 100644
--- a/src/module.js
+++ b/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,
 };
 
diff --git a/src/plugins/localCustomPlugin/components/TableBody.js b/src/plugins/localCustomPlugin/components/TableBody.js
new file mode 100644
index 00000000..f1b28ed4
--- /dev/null
+++ b/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;
diff --git a/src/plugins/localCustomPlugin/components/TableBodyContainer.js b/src/plugins/localCustomPlugin/components/TableBodyContainer.js
new file mode 100644
index 00000000..41c9a14a
--- /dev/null
+++ b/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;
diff --git a/src/plugins/localCustomPlugin/index.js b/src/plugins/localCustomPlugin/index.js
new file mode 100644
index 00000000..8cebdc14
--- /dev/null
+++ b/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
+};
diff --git a/stories/index.tsx b/stories/index.tsx
index 67ada22e..3d79d0f4 100644
--- a/stories/index.tsx
+++ b/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;