add on grid select function to insert table tool

stories/tables/InsertTableTool.stories.js

-import React from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
-// import { lorem } from 'faker'
 
 import InsertTableTool from '../../wax-prosemirror-components/src/ui/tables/InsertTableTool';
+import { Demo } from '../_helpers';
 
 const Wrapper = styled.div`
   height: 450px;
 `;
 
-export const Base = () => (
-  <Wrapper>
-    <InsertTableTool />
-  </Wrapper>
-);
+const Selected = styled.div`
+  margin: 12px 0;
+`;
+
+export const Base = () => {
+  const [selected, setSelected] = useState(null);
+
+  const handleGridSelect = dimensions => setSelected(dimensions);
+
+  return (
+    <Demo onClickButton={() => setSelected(null)}>
+      <Wrapper>
+        <Selected>
+          Selected:{' '}
+          {selected && `${selected.rows} rows & ${selected.cols} columns`}
+          {!selected && 'nothing'}
+        </Selected>
+
+        <InsertTableTool onGridSelect={handleGridSelect} />
+      </Wrapper>
+    </Demo>
+  );
+};
 
 export default {
   component: InsertTableTool,

wax-prosemirror-components/src/ui/tables/InsertTableTool.js

 /**
  * Adapted from https://github.com/chanzuckerberg/czi-prosemirror/blob/master/src/ui/TableGridSizeEditor.js
+ *
+ * TO DO -- Implement a gdocs-style CSS only solution to dramatically cut back on renders
  */
 
-/* eslint-disable react/prop-types */
 /* eslint-disable react/jsx-handler-names */
 /* eslint-disable react/destructuring-assignment */
 /* eslint-disable react/no-find-dom-node */
@@ -14,6 +15,7 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 
 const clamp = (min, val, max) => {
@@ -93,6 +95,12 @@ class GridCell extends React.PureComponent {
   }
 }
 
+GridCell.propTypes = {
+  x: PropTypes.number.isRequired,
+  y: PropTypes.number.isRequired,
+  selected: PropTypes.bool.isRequired,
+};
+
 class TableGridSizeEditor extends React.PureComponent {
   _ex = 0;
   _ey = 0;
@@ -110,10 +118,6 @@ class TableGridSizeEditor extends React.PureComponent {
     };
   }
 
-  // props: {
-  //   close: (val: TableGridSizeEditorValue) => void,
-  // };
-
   componentWillUnmount() {
     if (this._entered) {
       document.removeEventListener('mousemove', this._onMouseMove, true);
@@ -179,7 +183,7 @@ class TableGridSizeEditor extends React.PureComponent {
 
   _onMouseDown = e => {
     e.preventDefault();
-    this.props.close(this.state);
+    this.props.onGridSelect(this.state);
   };
 
   render() {
@@ -251,4 +255,8 @@ class TableGridSizeEditor extends React.PureComponent {
   }
 }
 
+TableGridSizeEditor.propTypes = {
+  onGridSelect: PropTypes.func.isRequired,
+};
+
 export default TableGridSizeEditor;