fix(lifecycle): need to handle mount and remount

aka create a new grid with each mount

Author: scamden

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "grid-react-adapter",
   "version": "1.0.0",
-  "main": "dist/main.js",
+  "main": "dist/lib/index.js",
   "typings": "dist/lib/index.d.ts",
   "scripts": {
     "commitmsg": "validate-commit-msg",
@@ -23,7 +23,7 @@
     "prebuild": "npm run clean && npm run test",
     "build": "node tools/build.js",
     "prebuild:lib": "npm run prebuild",
-    "build:lib": "node tools/buildLib.js",
+    "build:lib": "echo 'built'",
     "build:lib:watch": "node tools/buildLib.js --watch",
     "build:server": "npm run build && npm run open:dist",
     "test": "jest --config jest.single.config.js",
@@ -58,8 +58,8 @@
     "copy-webpack-plugin": "~3.0.1",
     "css-loader": "^0.28.7",
     "ejs-compiled-loader": "~3.1.0",
-    "enzyme": "^3.1.1",
-    "enzyme-adapter-react-16": "^1.0.4",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.0",
     "html-webpack-plugin": "~4.5.2",
     "husky": "^0.14.3",
     "jest": "~26.6.3",

package.json

@@ -57,7 +57,7 @@ const mockGridCreate = jest.fn((o: any) => ({
 }));
 (grid.create as any) = mockGridCreate;
 
-import { mount, shallow } from 'enzyme';
+import { mount } from 'enzyme';
 import { ReactGrid } from '../grid';
 
 beforeEach(() => {
@@ -77,13 +77,6 @@ beforeEach(() => {
   mockReactDomRender.mockClear();
 });
 
-it('should render', () => {
-  const reactGrid = shallow(
-    <ReactGrid rows={[]} cols={[]} />
-  );
-  expect(reactGrid).toMatchElement(<div />);
-});
-
 it('should create a container for the grid', () => {
   const reactGrid = mount(
     <ReactGrid rows={[]} cols={[]} />
@@ -109,23 +102,23 @@ it('should keep the container in the DOM on subsequent updates', () => {
 });
 
 it('should create a grid with opts', () => {
-  const reactGrid = shallow(
+  const reactGrid = mount(
     <ReactGrid rows={[]} cols={[]} snapToCell={true} />
   );
   expect(mockGridCreate).toHaveBeenCalledWith({ snapToCell: true });
 });
 
 it('should build a grid with the container', () => {
-  const reactGrid = shallow(
+  const reactGrid = mount(
     <ReactGrid rows={[]} cols={[]} />
   );
-  expect(mockGridBuild).toHaveBeenCalledWith((reactGrid.instance() as ReactGrid).gridContainer);
+  expect(mockGridBuild).toHaveBeenCalledWith((reactGrid.instance() as ReactGrid).gridContainer.current);
 });
 
 it('should add the supplied rows and cols to the grid', () => {
   const rows = [{ header: true }, { height: 4 }];
   const cols = [{ fixed: true }, { width: 4 }];
-  const reactGrid = shallow(
+  const reactGrid = mount(
     <ReactGrid rows={rows} cols={cols} />
   );
   expect(mockRowDim.rowColModel.add.mock.calls[0][0]).toMatchObject(rows);
@@ -135,7 +128,7 @@ it('should add the supplied rows and cols to the grid', () => {
 it('should not call add if the supplied rows and cols havent changed functionally', () => {
   const rows = [{ header: true }, { height: 4 }];
   const cols = [{ fixed: true }, { width: 4 }];
-  const reactGrid = shallow(
+  const reactGrid = mount(
     <ReactGrid rows={rows} cols={cols} />
   );
   mockRowDim.rowColModel.add.mockClear();
@@ -151,7 +144,7 @@ it('should not call add if the supplied rows and cols havent changed functionall
 it('should not call add if the supplied rows and cols havent changed ref', () => {
   const rows = [{ header: true }, { height: 4 }];
   const cols = [{ fixed: true }, { width: 4 }];
-  const reactGrid = shallow(
+  const reactGrid = mount(
     <ReactGrid rows={rows} cols={cols} />
   );
   mockRowDim.rowColModel.add.mockClear();
@@ -167,7 +160,7 @@ it('should not call add if the supplied rows and cols havent changed ref', () =>
 it('should supply data to the grid', () => {
   const dataRow1 = [{ value: undefined, formatted: '1' }, { value: undefined, formatted: '2' }];
   const dataRow2 = [{ value: undefined, formatted: '3' }, { value: undefined, formatted: '4' }];
-  const reactGrid = shallow(
+  const reactGrid = mount(
     <ReactGrid
       rows={[{}, {}]}
       cols={[{}, {}]}
@@ -188,7 +181,7 @@ it('should re-supply data to the grid IFF the ref has changed', () => {
   const dataRow2 = [{ value: undefined, formatted: '3' }, { value: undefined, formatted: '4' }];
   const rows = [{}, {}];
   const cols = [{}, {}];
-  const reactGrid = shallow(
+  const reactGrid = mount(
     <ReactGrid
       rows={rows}
       cols={cols}

src/lib/components/__tests__/grid.test.tsx

@@ -32,42 +32,44 @@ export interface IGridProps extends IGridOpts {
 export interface IGridState { }
 
 export class ReactGrid extends Component<IGridProps, IGridState> {
-  grid: Grid;
+  grid: Grid | undefined;
   cellRendererBuilder: IRowColBuilder | undefined;
   headerCellRendererBuilder: IRowColBuilder | undefined;
-  gridContainer: HTMLElement;
-  reactContainer: HTMLElement | null;
+  gridContainer: React.RefObject<HTMLDivElement>;
 
   constructor(props: IGridProps) {
     super(props);
-    this.gridContainer = document.createElement('div');
-    this.gridContainer.style.position = 'absolute';
-    this.gridContainer.style.top = '0';
-    this.gridContainer.style.left = '0';
-    this.gridContainer.style.height = '100%';
-    this.gridContainer.style.width = '100%';
+    this.gridContainer = React.createRef();
+  }
+
+  private createGrid() {
     const { rows, cols, data, ...gridOpts } = this.props;
-    this.grid = create(gridOpts);
-    const origSet = this.grid.dataModel.set;
-    this.grid.dataModel.set = (rowOrData: number | Array<IGridDataChange<any>>, c?: number, datum?: string | string[]) => {
+    const grid = create(gridOpts);
+    this.grid = grid;
+    const origSet = grid.dataModel.set;
+    grid.dataModel.set = (rowOrData: number | Array<IGridDataChange<any>>, c?: number, datum?: string | string[]) => {
       const dataChanges = !Array.isArray(rowOrData)
         ? [{
           row: rowOrData,
           col: c as number,
           value: datum
-
         }]
         : rowOrData;
 
       const newChanges = this.props.setData && this.props.setData(dataChanges) || dataChanges;
-      origSet.call(this.grid.dataModel, newChanges);
+      origSet.call(grid.dataModel, newChanges);
     };
+    return grid
   }
 
   ensureGridContainerInDOM() {
-    if (this.reactContainer && this.reactContainer.firstChild !== this.gridContainer) {
-      this.reactContainer.appendChild(this.gridContainer);
+    const grid = this.grid || this.createGrid();
+    if (this.gridContainer.current) {
+      grid.build(this.gridContainer.current);
+    } else {
+      console.error('grid ref didnt exist at mount')
     }
+    return grid;
   }
 
   createDiscriptors(
@@ -121,19 +123,19 @@ export class ReactGrid extends Component<IGridProps, IGridState> {
       d1.some((descriptor, index) => JSON.stringify(d2[index]) !== JSON.stringify(descriptor));
   }
 
-  handleNewData(data: Array<Array<IGridDataResult<any>>> | undefined) {
+  handleNewData(data: Array<Array<IGridDataResult<any>>> | undefined, grid: Grid) {
     if (data) {
       data.forEach((row, dataRowIndex) => {
-        this.grid.rows.converters.data.get(dataRowIndex).data = row;
+        grid.rows.converters.data.get(dataRowIndex).data = row;
       });
-      this.grid.dataModel.handleCachedDataChange();
+      grid.dataModel.handleCachedDataChange();
     }
   }
 
   componentDidMount() {
-    this.ensureGridContainerInDOM();
-    this.grid.build(this.gridContainer);
-    this.cellRendererBuilder = this.grid.colModel.createBuilder(
+    console.log('mount')
+    const grid = this.ensureGridContainerInDOM();
+    this.cellRendererBuilder = grid.colModel.createBuilder(
       () => document.createElement('div'),
       (element, context) => {
         const rendered = this.props.cellRenderer && this.props.cellRenderer(context);
@@ -145,11 +147,11 @@ export class ReactGrid extends Component<IGridProps, IGridState> {
       }
     );
 
-    this.headerCellRendererBuilder = this.grid.rowModel.createBuilder(
+    this.headerCellRendererBuilder = grid.rowModel.createBuilder(
       () => document.createElement('div'),
       (element, context) => {
         const { virtualRow } = context;
-        if (virtualRow >= this.grid.rows.rowColModel.numHeaders()) {
+        if (virtualRow >= grid.rows.rowColModel.numHeaders()) {
           return undefined;
         }
         const rendered = this.props.headerCellRenderer && this.props.headerCellRenderer(context);
@@ -160,35 +162,55 @@ export class ReactGrid extends Component<IGridProps, IGridState> {
         return element;
       }
     );
-    this.reflectNewRowsOrCols(this.props.rows, this.grid.rows);
-    this.reflectNewRowsOrCols(this.props.cols, this.grid.cols);
-    this.handleNewData(this.props.data);
+    this.reflectNewRowsOrCols(this.props.rows, grid.rows);
+    this.reflectNewRowsOrCols(this.props.cols, grid.cols);
+    this.handleNewData(this.props.data, grid);
   }
 
   // we return false from should update but react may ignore our hint in the future
-  componentDidUpdate(prevProps : IGridProps) {
-    this.ensureGridContainerInDOM();
+  componentDidUpdate(prevProps: IGridProps) {
+    console.log('update')
+    const something = 'a string you cant ignore';
 
-    const nextProps  = this.props;
+    const grid = this.ensureGridContainerInDOM();
+
+    const nextProps = this.props;
     if (this.descriptorsChanged(prevProps.rows, nextProps.rows)) {
-      this.reflectNewRowsOrCols(nextProps.rows, this.grid.rows);
+      this.reflectNewRowsOrCols(nextProps.rows, grid.rows);
     }
     if (this.descriptorsChanged(prevProps.cols, nextProps.cols)) {
-      this.reflectNewRowsOrCols(nextProps.cols, this.grid.cols);
+      this.reflectNewRowsOrCols(nextProps.cols, grid.cols);
     }
 
     if (prevProps.data !== nextProps.data) {
-      this.handleNewData(nextProps.data);
+      this.handleNewData(nextProps.data, grid);
     }
   }
-  
-  componentWillUnmount(){
-    this.grid.destroy();
+
+  componentWillUnmount() {
+    console.log('unmount')
+    if(this.grid){
+      this.grid.destroy();
+      this.grid.destroyed = true;
+      this.grid = undefined;
+    }
   }
 
   render() {
+
+
     return (
-      <div ref={(elem) => { this.reactContainer = elem; }} />
+      <div>
+        <div ref={this.gridContainer} style={gridStyle} />
+      </div>
     );
   }
-}
+}
+
+const gridStyle = {
+  position: 'absolute',
+  top: '0',
+  left: '0',
+  height: '100%',
+  width: '100%',
+} as const

src/lib/components/grid.tsx

@@ -23,7 +23,7 @@ const webpackInstance = webpack(
   createConfig({
     demo: false,
     branchName,
-    isLibrary: true
+    isLibrary: true,
   })
 );
 

tools/buildLib.js

@@ -201,7 +201,8 @@ module.exports = (opts) => {
 
   // webpack config object
   const config = {
-    mode : isDev ? 'development' : 'production',
+    // mode : isDev ? 'development' : 'production',
+    mode : 'development',
     resolve: {
       extensions: ['.js', '.ts', '.tsx'],
       alias: aliases