feat: adding ReactWrapper class

Author: afshinm

src/grid.tsx

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { Component, createRef, RefObject } from "react";
-import {Grid as Gridjs, UserConfig} from "gridjs";
+import { Grid as Gridjs, UserConfig } from "gridjs";
 
-class Grid extends Component<UserConfig, {}> {
+class Grid extends Component<Partial<UserConfig>, {}> {
   private wrapper: RefObject<HTMLDivElement> = createRef();
   // Grid.js instance
   private readonly instance = null;

src/wrapper.tsx

@@ -0,0 +1,29 @@
+import { h, createRef as gCreateRef, Component as gComponent } from "gridjs";
+
+import ReactDOM from "react-dom";
+
+export class ReactWrapper extends gComponent<{
+  element: any;
+  parent?: string;
+}> {
+  static defaultProps = {
+    parent: "div",
+  };
+
+  ref = gCreateRef();
+
+  componentDidMount() {
+    ReactDOM.render(this.props.element, this.ref.current);
+  }
+
+  render() {
+    return h(this.props.parent, { ref: this.ref });
+  }
+}
+
+export function _(element: any, parent?: string) {
+  return h(ReactWrapper, {
+    element: element,
+    parent: parent,
+  });
+}

tests/__snapshots__/grid.test.tsx.snap

@@ -6,6 +6,10 @@ exports[`Grid component should render a table with pagination and search 1`] = `
 
 exports[`Grid component should render a table with search 1`] = `"<div><div role=\\"complementary\\" class=\\"gridjs gridjs-container\\" style=\\"width: 100%;\\"><div class=\\"gridjs-head\\"><div class=\\"gridjs-search\\"><input type=\\"search\\" placeholder=\\"Type a keyword...\\" aria-label=\\"Type a keyword...\\" class=\\"gridjs-input gridjs-search-input\\"></div></div><div class=\\"gridjs-wrapper\\" style=\\"width: 100%; height: auto;\\"><table role=\\"grid\\" class=\\"gridjs-table\\" style=\\"width: 100%; height: auto;\\"><thead class=\\"gridjs-thead\\"><tr class=\\"gridjs-tr\\"><th class=\\"gridjs-th\\">a</th><th class=\\"gridjs-th\\">b</th><th class=\\"gridjs-th\\">c</th></tr></thead><tbody class=\\"gridjs-tbody\\"><tr class=\\"gridjs-tr\\"><td class=\\"gridjs-td\\">1</td><td class=\\"gridjs-td\\">2</td><td class=\\"gridjs-td\\">3</td></tr></tbody></table></div></div><div id=\\"gridjs-temp\\" class=\\"gridjs-temp\\"></div></div>"`;
 
+exports[`Grid component should render a table with the ReactWrapper class 1`] = `"<div><div role=\\"complementary\\" class=\\"gridjs gridjs-container\\" style=\\"width: 100%;\\"><div class=\\"gridjs-wrapper\\" style=\\"width: 100%; height: auto;\\"><table role=\\"grid\\" class=\\"gridjs-table\\" style=\\"width: 100%; height: auto;\\"><thead class=\\"gridjs-thead\\"><tr class=\\"gridjs-tr\\"><th class=\\"gridjs-th\\">a</th><th class=\\"gridjs-th\\">b</th><th class=\\"gridjs-th\\">c</th></tr></thead><tbody class=\\"gridjs-tbody\\"><tr class=\\"gridjs-tr\\"><td class=\\"gridjs-td\\">1</td><td class=\\"gridjs-td\\">2</td><td class=\\"gridjs-td\\">3</td></tr><tr class=\\"gridjs-tr\\"><td class=\\"gridjs-td\\">4</td><td class=\\"gridjs-td\\">5</td><td class=\\"gridjs-td\\">6</td></tr><tr class=\\"gridjs-tr\\"><td class=\\"gridjs-td\\"><div><b>7</b></div></td><td class=\\"gridjs-td\\"><div><b>8</b></div></td><td class=\\"gridjs-td\\"><span><b>8</b></span></td></tr></tbody></table></div></div><div id=\\"gridjs-temp\\" class=\\"gridjs-temp\\"></div></div>"`;
+
+exports[`Grid component should render a table with the wrapper function 1`] = `"<div><div role=\\"complementary\\" class=\\"gridjs gridjs-container\\" style=\\"width: 100%;\\"><div class=\\"gridjs-wrapper\\" style=\\"width: 100%; height: auto;\\"><table role=\\"grid\\" class=\\"gridjs-table\\" style=\\"width: 100%; height: auto;\\"><thead class=\\"gridjs-thead\\"><tr class=\\"gridjs-tr\\"><th class=\\"gridjs-th\\">a</th><th class=\\"gridjs-th\\">b</th><th class=\\"gridjs-th\\">c</th></tr></thead><tbody class=\\"gridjs-tbody\\"><tr class=\\"gridjs-tr\\"><td class=\\"gridjs-td\\">1</td><td class=\\"gridjs-td\\">2</td><td class=\\"gridjs-td\\">3</td></tr><tr class=\\"gridjs-tr\\"><td class=\\"gridjs-td\\">4</td><td class=\\"gridjs-td\\">5</td><td class=\\"gridjs-td\\">6</td></tr><tr class=\\"gridjs-tr\\"><td class=\\"gridjs-td\\"><div><b>7</b></div></td><td class=\\"gridjs-td\\"><div><b>8</b></div></td><td class=\\"gridjs-td\\"><span><span>9</span></span></td></tr></tbody></table></div></div><div id=\\"gridjs-temp\\" class=\\"gridjs-temp\\"></div></div>"`;
+
 exports[`Grid component should render a table with width 1`] = `"<div><div role=\\"complementary\\" class=\\"gridjs gridjs-container\\" style=\\"width: 500px;\\"><div class=\\"gridjs-wrapper\\" style=\\"width: 500px; height: auto;\\"><table role=\\"grid\\" class=\\"gridjs-table\\" style=\\"width: 500px; height: auto;\\"><thead class=\\"gridjs-thead\\"><tr class=\\"gridjs-tr\\"><th class=\\"gridjs-th\\">a</th><th class=\\"gridjs-th\\">b</th><th class=\\"gridjs-th\\">c</th></tr></thead><tbody class=\\"gridjs-tbody\\"><tr class=\\"gridjs-tr\\"><td class=\\"gridjs-td\\">1</td><td class=\\"gridjs-td\\">2</td><td class=\\"gridjs-td\\">3</td></tr></tbody></table></div></div><div id=\\"gridjs-temp\\" class=\\"gridjs-temp\\"></div></div>"`;
 
 exports[`Grid component should render a table without header 1`] = `"<div><div role=\\"complementary\\" class=\\"gridjs gridjs-container\\" style=\\"width: 100%;\\"><div class=\\"gridjs-wrapper\\" style=\\"width: 100%; height: auto;\\"><table role=\\"grid\\" class=\\"gridjs-table\\" style=\\"width: 100%; height: auto;\\"><tbody class=\\"gridjs-tbody\\"><tr class=\\"gridjs-tr\\"><td class=\\"gridjs-td\\">1</td><td class=\\"gridjs-td\\">2</td><td class=\\"gridjs-td\\">3</td></tr></tbody></table></div></div><div id=\\"gridjs-temp\\" class=\\"gridjs-temp\\"></div></div>"`;

tests/grid.test.tsx

@@ -1,6 +1,8 @@
 import * as React from "react";
 import { mount } from "enzyme";
 import { Grid } from "../index";
+import { _, ReactWrapper } from "../src/wrapper";
+import { h } from "gridjs";
 
 const flushPromises = () => new Promise(setImmediate);
 
@@ -63,4 +65,49 @@ describe("Grid component", () => {
     table.update();
     expect(table.html()).toMatchSnapshot();
   });
+
+  it("should render a table with the ReactWrapper class", async () => {
+    const table = mount<Grid>(
+      <Grid
+        data={[
+          [1, 2, 3],
+          [4, 5, 6],
+          [
+            h(ReactWrapper, {
+              element: <b>7</b>,
+            }),
+            h(ReactWrapper, {
+              element: <b>8</b>,
+            }),
+            h(ReactWrapper, {
+              element: <b>8</b>,
+              parent: "span",
+            }),
+          ],
+        ]}
+        columns={["a", "b", "c"]}
+      />
+    );
+
+    await flushPromises();
+    table.update();
+    expect(table.html()).toMatchSnapshot();
+  });
+
+  it("should render a table with the wrapper function", async () => {
+    const table = mount<Grid>(
+      <Grid
+        data={[
+          [1, 2, 3],
+          [4, 5, 6],
+          [_(<b>7</b>), _(<b>8</b>), _(<span>9</span>, "span")],
+        ]}
+        columns={["a", "b", "c"]}
+      />
+    );
+
+    await flushPromises();
+    table.update();
+    expect(table.html()).toMatchSnapshot();
+  });
 });