react-tabulator - npm Package Compare versions

Comparing version 0.17.2 to 0.18.0

lib/ReactTabulator.d.ts

@@ -1,3 +0,2 @@
-import * as React from 'react';
-import { IProps } from './ConfigUtils';
+/// <reference types="react" />
 import { Tabulator as TabulatorTypes } from './types/TabulatorTypes';
@@ -9,21 +8,3 @@ export interface ReactTabulatorOptions extends TabulatorTypes.Options {
 }
-interface IState {
-    data: any[];
-    columns: any[];
-    options?: ReactTabulatorOptions;
-}
-export default class extends React.Component<IProps, Partial<IState>> {
-    state: IState;
-    ref: React.ReactInstance;
-    htmlProps: any;
-    mainId: string;
-    table: any;
-    initTabulator(): Promise<void>;
-    componentDidMount(): Promise<void>;
-    componentWillUnmount(): void;
-    static getDerivedStateFromProps(props: any, state: any): any;
-    componentDidUpdate(prevProps: IProps, prevState: IState): void;
-    pickValidHTMLProps: () => void;
-    render(): JSX.Element;
-}
-export {};
+declare const ReactTabulator: (props: any) => JSX.Element;
+export default ReactTabulator;

lib/ReactTabulator.js

 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
 var __assign = (this && this.__assign) || function () {
@@ -64,11 +49,2 @@ __assign = Object.assign || function(t) {
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 exports.__esModule = true;
@@ -79,142 +55,49 @@ var React = require("react");
 var ConfigUtils_1 = require("./ConfigUtils");
-var Utils_1 = require("./Utils");
 /* tslint:disable-next-line */
 var tabulator_tables_1 = require("tabulator-tables");
-;
-;
-var default_1 = /** @class */ (function (_super) {
-    __extends(default_1, _super);
-    function default_1() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.state = {
-            data: [],
-            columns: _this.props.columns,
-            options: _this.props.options
-        };
-        _this.ref = null;
-        _this.htmlProps = null;
-        _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 = (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'];
-            }
-        };
-        return _this;
-    }
-    default_1.prototype.initTabulator = function () {
+var ReactTabulator = function (props) {
+    var ref = React.useRef();
+    var instanceRef = React.useRef();
+    var _a = React.useState("tabulator-".concat(+new Date(), "-").concat(Math.floor(Math.random() * 9999999))), mainId = _a[0], setMainId = _a[1];
+    var htmlProps;
+    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 () {
+        var domEle, columns, data, options, propOptions;
         var _a;
-        return __awaiter(this, void 0, void 0, function () {
-            var domEle, that, _b, columns, data, options, propOptions, instance;
-            var _this = this;
-            return __generator(this, function (_c) {
-                switch (_c.label) {
-                    case 0:
-                        domEle = ReactDOM.findDOMNode(this.ref);
-                        that = this;
-                        _b = this.props, columns = _b.columns, data = _b.data, options = _b.options;
-                        return [4 /*yield*/, (0, ConfigUtils_1.propsToOptions)(this.props)];
-                    case 1:
-                        propOptions = _c.sent();
-                        if (data) {
-                            propOptions.data = data;
-                        }
-                        instance = new tabulator_tables_1.TabulatorFull(domEle, __assign(__assign(__assign({ columns: columns }, propOptions), { layout: (_a = this.props.layout) !== null && _a !== void 0 ? _a : 'fitColumns' }), options // props.options are passed to Tabulator's options.
-                        ));
-                        instance.on('tableBuilding', function () {
-                            that.table = this; // keep the table instance.
-                            that.props.tableBuilding ? that.props.tableBuilding() : '';
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    domEle = ReactDOM.findDOMNode(ref.current);
+                    columns = props.columns, data = props.data, options = props.options;
+                    return [4 /*yield*/, (0, ConfigUtils_1.propsToOptions)(props)];
+                case 1:
+                    propOptions = _b.sent();
+                    if (data) {
+                        propOptions.data = data;
+                    }
+                    instanceRef.current = new tabulator_tables_1.TabulatorFull(domEle, __assign(__assign(__assign({ columns: columns }, propOptions), { layout: (_a = props.layout) !== null && _a !== void 0 ? _a : 'fitColumns' }), options // props.options are passed to Tabulator's options.
+                    ));
+                    if (props.events) {
+                        Object.keys(props.events).forEach(function (eventName) {
+                            var handler = props.events[eventName];
+                            instanceRef.current.on(eventName, handler);
                         });
-                        instance.on('dataLoaded', function () {
-                            that.props.dataLoaded ? that.props.dataLoaded() : '';
-                        });
-                        if (this.props.events) {
-                            Object.keys(this.props.events).forEach(function (eventName) {
-                                var handler = _this.props.events[eventName];
-                                instance.on(eventName, handler);
-                            });
-                        }
-                        // await table.setData(data);
-                        if (data && data.length > 0) {
-                            this.setState({ data: data });
-                        }
-                        return [2 /*return*/];
-                }
-            });
+                    }
+                    return [2 /*return*/];
+            }
         });
-    };
-    default_1.prototype.componentDidMount = function () {
-        return __awaiter(this, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0: return [4 /*yield*/, this.initTabulator()];
-                    case 1:
-                        _a.sent();
-                        return [2 /*return*/];
-                }
-            });
-        });
-    };
-    default_1.prototype.componentWillUnmount = function () {
-        this.table && this.table.destroy();
-    };
-    // React 16.5.x - "getDerivedStateFromProps" replaces both "componentWillMount" & "componentWillReceiveProps"
-    // This function will be ignored when running with React 15.6.x
-    default_1.getDerivedStateFromProps = function (props, state) {
-        // console.log('- getDerivedStateFromProps', props, state);
-        var noData = !props.data || ((props === null || props === void 0 ? void 0 : props.data) || []).length === 0;
-        if (!state && noData) {
-            // first time (similar to: componentWillMount)
-            return null;
+    }); };
+    React.useEffect(function () {
+        initTabulator();
+    }, []);
+    React.useEffect(function () {
+        console.log('instanceRef.current', instanceRef.current);
+        if (instanceRef && instanceRef.current) {
+            initTabulator(); // re-init table
         }
-        if (state && state.data.length && state.data.length === 0 && props && props.data && props.data.length === 0) {
-            return null;
-        }
-        // if (state && props.columns) {
-        //   // this triggers componentDidUpdate
-        //   if (!isSameArray(state.columns, props.columns)) {
-        //     console.log('--- Columns changed');
-        //     // console.log('columns changed!');
-        //     return { ...state, columns: [...props.columns] };
-        //   }
-        // }
-        if (state && (props.data || props.columns || props.options)) {
-            // this triggers componentDidUpdate
-            if (!(0, Utils_1.isSameArray)(state.data, props.data) ||
-                !(0, Utils_1.isSameArray)(state.columns, props.columns) ||
-                ((props === null || props === void 0 ? void 0 : props.checkOptions) === true && state.options && !(0, Utils_1.isSameObject)(state.options, props.options))) {
-                // console.log('data changed!');
-                return __assign(__assign({}, state), { data: __spreadArray([], ((props === null || props === void 0 ? void 0 : props.data) || []), true), columns: __spreadArray([], props === null || props === void 0 ? void 0 : props.columns, true), options: __assign({}, props === null || props === void 0 ? void 0 : props.options) });
-            }
-        }
-        return {};
-    };
-    // componentDidUpdate(prevProps, prevState)
-    default_1.prototype.componentDidUpdate = function (prevProps, prevState) {
-        // console.log('--- ', this.table)
-        // props data changed! (see: getDerivedStateFromProps)
-        if (!(0, Utils_1.isSameArray)(prevState.data, this.state.data)) {
-            // only when data is really different: call this.table.setData (will re-render table)
-            this.table && this.table.setData(this.state.data);
-        }
-        if (!(0, Utils_1.isSameArray)(prevState.columns, this.state.columns)) {
-            // only when data is really different: call this.table.setData (will re-render table)
-            this.table && this.table.setColumns(this.state.columns);
-        }
-        if (!(0, Utils_1.isSameObject)(prevState.options, this.state.options)) {
-            // console.log('options changed', this.state.options);
-            this.initTabulator();
-        }
-    };
-    default_1.prototype.render = function () {
-        var _this = this;
-        this.pickValidHTMLProps();
-        var className = this.props.className;
-        return (React.createElement("div", __assign({ ref: function (ref) { return (_this.ref = ref); }, "data-instance": this.mainId }, this.htmlProps, { className: className })));
-    };
-    return default_1;
-}(React.Component));
-exports["default"] = default_1;
+    }, [props.data]);
+    return React.createElement("div", __assign({ ref: ref, "data-instance": mainId }, htmlProps, { className: props.className }));
+};
+exports["default"] = ReactTabulator;

package.json

 {
   "name": "react-tabulator",
-  "version": "0.17.2",
+  "version": "0.18.0",
   "description": "React Tabulator is based on tabulator - a JS table library with many advanced features.",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

4110789

decreased by-0.16%

Lines of code

38921

decreased by-0.35%

No dependency changes