Merge pull request #294 from sylwit/feature/react18

Feature/react18

Author: ngduc

README.md

@@ -53,6 +53,7 @@ Require: `NodeJS`
 ```
 $ npm install --legacy-peer-deps        install dependencies for development.
 $ export NODE_OPTIONS=--openssl-legacy-provider     to work with Node 18+
+$ export PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true     to work with ARM if you haven't chromium installed
 $ npm run dev      Launch DEV mode (with hot reload).
 $ npm run build    Make a build.
 

__tests__/ui/index.js

@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
-import { render } from 'react-dom';
-
+import { createRoot } from 'react-dom/client';
 import '../../src/styles.css';
 import { ReactTabulator } from '../../lib';
 
@@ -45,4 +44,6 @@ class Demo extends Component {
   }
 }
 
-render(<Demo />, document.querySelector('#app'));
+const rootElement = document.querySelector('#app');
+const root = createRoot(rootElement);
+root.render(<Demo />);

demo/src/index.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import './styles.css';
 
 import '../../styles.css'; // required styles
@@ -21,4 +21,9 @@ class Demo extends Component {
   }
 }
 
-render(<Demo />, document.querySelector('#demo'));
+// Get the root element from the DOM
+const rootElement = document.querySelector('#demo');
+
+// Create a root and render your app
+const root = createRoot(rootElement);
+root.render(<Demo />);

lib/ConfigUtils.js

@@ -14,7 +14,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
             if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
             if (y = 0, t) op = [op[0] & 2, t.value];
             switch (op[0]) {
@@ -37,15 +37,19 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 };
 exports.__esModule = true;
 exports.propsToOptions = void 0;
-var Es6Promise = require("es6-promise"); // without this, 'yarn build' will complain about Promise.
-var react_dom_1 = require("react-dom");
+var client_1 = require("react-dom/client");
 // .prettierignore    (to keep relevant props together)
 var NOOPS = function () { };
 function syncRender(comp, el) {
-    return new Es6Promise.Promise(function (resolve, reject) {
-        react_dom_1.render(comp, el, function () {
-            resolve(el);
-        });
+    return new Promise(function (resolve, reject) {
+        try {
+            var root = (0, client_1.createRoot)(el);
+            root.render(comp);
+            resolve(el); // Resolve immediately after rendering
+        }
+        catch (error) {
+            reject(error);
+        }
     });
 }
 // get callbacks from props (default: NOOP) to set them to Tabulator options later.

lib/React15Tabulator.d.ts

@@ -14,6 +14,6 @@ export default class extends React.Component<IProps, Partial<IState>> {
     componentWillUnmount(): void;
     componentWillReceiveProps(props: IProps): void;
     pickValidHTMLProps: () => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export {};

lib/React15Tabulator.js

@@ -40,7 +40,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
             if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
             if (y = 0, t) op = [op[0] & 2, t.value];
             switch (op[0]) {
@@ -79,12 +79,12 @@ var default_1 = /** @class */ (function (_super) {
         };
         _this.ref = null;
         _this.htmlProps = null;
-        _this.mainId = "tabulator-" + +new Date() + "-" + Math.floor(Math.random() * 9999999); // random id
+        _this.mainId = "tabulator-".concat(+new Date(), "-").concat(Math.floor(Math.random() * 9999999)); // random id
         _this.table = null; // will be set once Tabulator instantiated
         _this.pickValidHTMLProps = function () {
             // run once
             if (!_this.htmlProps) {
-                _this.htmlProps = pick_react_known_prop_1.pickHTMLProps(_this.props); // pick valid html props
+                _this.htmlProps = (0, pick_react_known_prop_1.pickHTMLProps)(_this.props); // pick valid html props
                 delete _this.htmlProps['data']; // don't render data & columns as attributes
                 delete _this.htmlProps['columns'];
             }
@@ -100,15 +100,14 @@ var default_1 = /** @class */ (function (_super) {
                         domEle = ReactDOM.findDOMNode(this.ref);
                         that = this;
                         _a = this.props, columns = _a.columns, data = _a.data, options = _a.options;
-                        return [4 /*yield*/, ConfigUtils_1.propsToOptions(this.props)];
+                        return [4 /*yield*/, (0, ConfigUtils_1.propsToOptions)(this.props)];
                     case 1:
                         propOptions = _b.sent();
                         new tabulator_tables_1.Tabulator(domEle, __assign(__assign(__assign(__assign({ columns: columns }, propOptions), { layout: 'fitColumns', // fit columns to width of table (optional)
                             tableBuilding: function () {
                                 that.table = this; // keep table instance
                                 that.props.tableBuilding ? that.props.tableBuilding() : '';
-                            },
-                            dataLoaded: function () {
+                            }, dataLoaded: function () {
                                 that.props.dataLoaded ? that.props.dataLoaded() : '';
                             }, invalidOptionWarnings: false }), options), { data: data }));
                         // await table.setData(data);
@@ -127,13 +126,13 @@ var default_1 = /** @class */ (function (_super) {
     // this is for React 15.x only
     default_1.prototype.componentWillReceiveProps = function (props) {
         var _this = this;
-        if (!Utils_1.isSameArray(this.state.data, props.data)) {
+        if (!(0, Utils_1.isSameArray)(this.state.data, props.data)) {
             // console.log('- data changed');
             this.setState({ data: props.data }, function () {
                 _this.table && _this.table.setData(_this.state.data);
             });
         }
-        if (!Utils_1.isSameArray(this.state.columns, props.columns)) {
+        if (!(0, Utils_1.isSameArray)(this.state.columns, props.columns)) {
             // console.log('- columns changed');
             this.setState({ columns: props.columns }, function () {
                 _this.table && _this.table.setColumns(_this.state.columns);

lib/ReactTabulator.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { Tabulator as TabulatorTypes } from './types/TabulatorTypes';
 export interface ReactTabulatorOptions extends TabulatorTypes.Options {
     [k: string]: any;
@@ -12,5 +12,5 @@ export interface ReactTabulatorProps {
     onRef?: (ref: any) => void;
     [k: string]: any;
 }
-declare const ReactTabulator: (props: ReactTabulatorProps) => JSX.Element;
+declare const ReactTabulator: (props: ReactTabulatorProps) => React.JSX.Element;
 export default ReactTabulator;

lib/ReactTabulator.js

@@ -25,7 +25,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
             if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
             if (y = 0, t) op = [op[0] & 2, t.value];
             switch (op[0]) {
@@ -48,7 +48,6 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 };
 exports.__esModule = true;
 var React = require("react");
-var ReactDOM = require("react-dom");
 var pick_react_known_prop_1 = require("pick-react-known-prop");
 var ConfigUtils_1 = require("./ConfigUtils");
 /* tslint:disable-next-line */
@@ -58,9 +57,9 @@ var tabulator_tables_1 = require("tabulator-tables");
 var ReactTabulator = function (props) {
     var ref = React.useRef();
     var instanceRef = React.useRef();
-    var _a = React.useState("tabulator-" + +new Date() + "-" + Math.floor(Math.random() * 9999999)), mainId = _a[0], setMainId = _a[1];
+    var _a = React.useState("tabulator-".concat(+new Date(), "-").concat(Math.floor(Math.random() * 9999999))), mainId = _a[0], setMainId = _a[1];
     var htmlProps;
-    htmlProps = pick_react_known_prop_1.pickHTMLProps(props); // pick valid html props
+    htmlProps = (0, pick_react_known_prop_1.pickHTMLProps)(props); // pick valid html props
     delete htmlProps['data']; // don't render data & columns as attributes
     delete htmlProps['columns'];
     var initTabulator = function () { return __awaiter(void 0, void 0, void 0, function () {
@@ -69,9 +68,9 @@ var ReactTabulator = function (props) {
         return __generator(this, function (_b) {
             switch (_b.label) {
                 case 0:
-                    domEle = ReactDOM.findDOMNode(ref.current);
+                    domEle = ref.current;
                     columns = props.columns, data = props.data, options = props.options;
-                    return [4 /*yield*/, ConfigUtils_1.propsToOptions(props)];
+                    return [4 /*yield*/, (0, ConfigUtils_1.propsToOptions)(props)];
                 case 1:
                     propOptions = _b.sent();
                     if (data) {
@@ -93,11 +92,17 @@ var ReactTabulator = function (props) {
     React.useEffect(function () {
         // console.log('useEffect - onmount');
         initTabulator();
+        // Cleanup function to destroy Tabulator instance on unmount
+        return function () {
+            if (instanceRef.current) {
+                instanceRef.current.destroy();
+            }
+        };
     }, []);
     React.useEffect(function () {
         // console.log('useEffect - props.data changed');
-        if (instanceRef && instanceRef.current) {
-            initTabulator(); // re-init table
+        if (instanceRef === null || instanceRef === void 0 ? void 0 : instanceRef.current) {
+            initTabulator();
         }
     }, [props.data]);
     return React.createElement("div", __assign({ ref: ref, "data-instance": mainId }, htmlProps, { className: props.className }));

lib/ReactTabulatorExample.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-declare const _default: () => JSX.Element;
+import * as React from 'react';
+declare const _default: () => React.JSX.Element;
 export default _default;

lib/ReactTabulatorExample.js

@@ -22,7 +22,7 @@ var columns = [
     { title: 'Date Of Birth', field: 'dob', sorter: 'date' },
     { title: 'Rating', field: 'rating', hozAlign: 'center', formatter: 'star' },
     { title: 'Passed?', field: 'passed', hozAlign: 'center', formatter: 'tickCross' },
-    { title: 'Custom', field: 'custom', hozAlign: 'center', editor: 'input', formatter: Utils_1.reactFormatter(React.createElement(SimpleButton, null)) }
+    { title: 'Custom', field: 'custom', hozAlign: 'center', editor: 'input', formatter: (0, Utils_1.reactFormatter)(React.createElement(SimpleButton, null)) }
 ];
 var data = [
     { id: 1, name: 'Oli Bob', age: '12', color: 'red', dob: '01/01/1980', rating: 5, passed: true, pets: ['cat', 'dog'] },