From 994c63907d27263de57834adada8bad44464f45f Mon Sep 17 00:00:00 2001 From: ngduc Date: Tue, 25 Jan 2022 12:13:27 -0800 Subject: [PATCH] props.onRef --- CHANGELOG.md | 4 +- lib/ReactTabulator.d.ts | 9 +- lib/ReactTabulator.js | 4 +- lib/ReactTabulatorExample.d.ts | 18 +-- lib/ReactTabulatorExample.js | 216 +++++++++++++++------------------ package.json | 2 +- src/ReactTabulator.tsx | 14 ++- src/ReactTabulatorExample.tsx | 172 +++++++++++++------------- 8 files changed, 213 insertions(+), 226 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ff827f1..54fc566 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,7 @@ -## [0.18.0] - 2022-01-24 +## [0.18.1] - 2022-01-24 - BREAKING: refactor: major refactor: useEffect, useState. +- BREAKING: changed 'ref' prop to 'onRef' prop (see ReactTabulatorExample.tsx) +- refactor: ReactTabulatorExample.tsx ## [0.17.1] - 2022-01-18 - BREAKING: upgraded tabulator-tables to 5.0.10 diff --git a/lib/ReactTabulator.d.ts b/lib/ReactTabulator.d.ts index 4a4d3c6..f4eb481 100644 --- a/lib/ReactTabulator.d.ts +++ b/lib/ReactTabulator.d.ts @@ -5,5 +5,12 @@ export interface ReactTabulatorOptions extends TabulatorTypes.Options { } export interface ColumnDefinition extends TabulatorTypes.ColumnDefinition { } -declare const ReactTabulator: (props: any) => JSX.Element; +export interface ReactTabulatorProps { + columns?: ColumnDefinition[]; + options?: any; + events?: any; + onRef?: (ref: any) => void; + [k: string]: any; +} +declare const ReactTabulator: (props: ReactTabulatorProps) => JSX.Element; export default ReactTabulator; diff --git a/lib/ReactTabulator.js b/lib/ReactTabulator.js index 8393745..b1b68df 100644 --- a/lib/ReactTabulator.js +++ b/lib/ReactTabulator.js @@ -83,15 +83,17 @@ var ReactTabulator = function (props) { instanceRef.current.on(eventName, handler); }); } + props.onRef && props.onRef(instanceRef); return [2 /*return*/]; } }); }); }; React.useEffect(function () { + // console.log('useEffect - onmount'); initTabulator(); }, []); React.useEffect(function () { - console.log('instanceRef.current', instanceRef.current); + // console.log('useEffect - props.data changed'); if (instanceRef && instanceRef.current) { initTabulator(); // re-init table } diff --git a/lib/ReactTabulatorExample.d.ts b/lib/ReactTabulatorExample.d.ts index cb087a4..1393c75 100644 --- a/lib/ReactTabulatorExample.d.ts +++ b/lib/ReactTabulatorExample.d.ts @@ -1,15 +1,3 @@ -import * as React from 'react'; -interface IProps { - data: any[]; -} -export default class extends React.Component { - state: any; - ref: any; - rowClick: (e: any, row: any) => void; - setData: () => void; - clearData: () => void; - modifyData: () => void; - renderAjaxScrollExample: () => JSX.Element; - render(): JSX.Element; -} -export {}; +/// +declare const _default: () => JSX.Element; +export default _default; diff --git a/lib/ReactTabulatorExample.js b/lib/ReactTabulatorExample.js index d201cad..fcd138d 100644 --- a/lib/ReactTabulatorExample.js +++ b/lib/ReactTabulatorExample.js @@ -1,19 +1,4 @@ "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 _a; exports.__esModule = true; var React = require("react"); @@ -37,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: (0, 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'] }, @@ -59,10 +44,14 @@ var data = [ ]; // Editable Example: var colorOptions = (_a = {}, _a[''] = ' ', _a.red = 'red', _a.green = 'green', _a.yellow = 'yellow', _a); -var petOptions = [{ id: 'cat', name: 'cat' }, { id: 'dog', name: 'dog' }, { id: 'fish', name: 'fish' }]; +var petOptions = [ + { id: 'cat', name: 'cat' }, + { id: 'dog', name: 'dog' }, + { id: 'fish', name: 'fish' } +]; var editableColumns = [ { title: 'Name', field: 'name', width: 150, editor: 'input', headerFilter: 'input' }, - { title: 'Age', field: 'age', hozAlign: 'left', formatter: 'progress', editor: 'progress' }, + { title: 'Age', field: 'age', hozAlign: 'left', formatter: 'progress', editor: 'star' }, { title: 'Favourite Color', field: 'color', @@ -83,109 +72,100 @@ var editableColumns = [ }, { title: 'Passed?', field: 'passed', hozAlign: 'center', formatter: 'tickCross', editor: true } ]; -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: [], - selectedName: '' - }; - _this.ref = null; - _this.rowClick = function (e, row) { - console.log('ref table: ', _this.ref.table); // this is the Tabulator table instance - console.log('rowClick id: ${row.getData().id}', row, e); - _this.setState({ selectedName: row.getData().name }); - }; - _this.setData = function () { - _this.setState({ data: data }); - }; - _this.clearData = function () { - _this.setState({ data: [] }); - }; - _this.modifyData = function () { - var _newData = data.filter(function (item) { return item.name === 'Oli Bob'; }); - _this.setState({ data: _newData }); +exports["default"] = (function () { + var _a = React.useState({ + data: [], + selectedName: '' + }), state = _a[0], setState = _a[1]; + var ref = React.useRef(); + var rowClick = function (e, row) { + console.log('ref table: ', ref.current); // this is the Tabulator table instance + // ref?.current && ref?.current.replaceData([]) + console.log('rowClick id: ${row.getData().id}', row, e); + setState({ selectedName: row.getData().name }); + }; + var setData = function () { + setState({ data: data }); + }; + var clearData = function () { + setState({ data: [] }); + }; + var modifyData = function () { + var _newData = data.filter(function (item) { return item.name === 'Oli Bob'; }); + setState({ data: _newData }); + }; + var renderAjaxScrollExample = function () { + var columns = [ + { title: 'First Name', field: 'first_name', width: 150 }, + { title: 'Last Name', field: 'last_name', width: 150 }, + { title: 'Email', field: 'email', width: 150 } + ]; + var options = { + height: 100, + movableRows: true, + progressiveLoad: 'scroll', + progressiveLoadDelay: 200, + progressiveLoadScrollMargin: 30, + ajaxURL: 'https://reqres.in/api/users', + dataSendParams: { + page: 'page', + size: 'per_page' + }, + dataReceiveParams: { + last_page: 'last' + }, + paginationSize: 5, + ajaxResponse: function (url, params, response) { + console.log('url, params, response', url, params, response); + return { + data: response.data, + last: response.total_pages + }; + }, + ajaxError: function (error) { + console.log('ajaxError', error); + } }; - _this.renderAjaxScrollExample = function () { - var columns = [ - { title: 'First Name', field: 'first_name', width: 150 }, - { title: 'Last Name', field: 'last_name', width: 150 }, - { title: 'Email', field: 'email', width: 150 }, - ]; - var options = { - height: 100, - movableRows: true, - progressiveLoad: 'scroll', - progressiveLoadDelay: 200, - progressiveLoadScrollMargin: 30, - ajaxURL: 'https://reqres.in/api/users', - dataSendParams: { - page: "page", - size: "per_page" - }, - dataReceiveParams: { - last_page: 'last' - }, - paginationSize: 5, - ajaxResponse: function (url, params, response) { - console.log('url, params, response', url, params, response); - return { - data: response.data, - last: response.total_pages - }; + return (React.createElement(ReactTabulator_1["default"], { onRef: function (r) { return (ref = r); }, columns: columns, options: options, events: { + dataLoaded: function (data) { + console.log('dataLoaded', data); + // return data; //return the response data to tabulator + var modResponse = {}; + modResponse.data = data; + modResponse.last = 5; + return modResponse; }, ajaxError: function (error) { console.log('ajaxError', error); } - }; - return (React.createElement(ReactTabulator_1["default"], { ref: function (ref) { return (_this.ref = ref); }, columns: columns, options: options, events: { - dataLoaded: function (data) { - console.log('dataLoaded', data); - // return data; //return the response data to tabulator - var modResponse = {}; - modResponse.data = data; - modResponse.last = 5; - return modResponse; - }, - ajaxError: function (error) { - console.log('ajaxError', error); - } - } })); - }; - return _this; - } - default_1.prototype.render = function () { - var _this = this; - var options = { - height: 150, - movableRows: true, - movableColumns: true - }; - return (React.createElement("div", null, - React.createElement(ReactTabulator_1["default"], { ref: function (ref) { return (_this.ref = ref); }, columns: columns, data: data, events: { - rowClick: this.rowClick - }, options: options, "data-custom-attr": "test-custom-attribute", className: "custom-css-class" }), - React.createElement("i", null, - "Selected Name: ", - React.createElement("strong", null, this.state.selectedName)), - React.createElement("h3", null, - "Asynchronous data: (e.g. fetch) - ", - React.createElement("button", { onClick: this.setData }, "Set Data"), - ' ', - React.createElement("button", { onClick: this.clearData }, "Clear"), - ' ', - React.createElement("button", { onClick: this.modifyData }, "Modify Data")), - React.createElement(ReactTabulator_1["default"], { columns: columns, data: this.state.data }), - React.createElement("h3", null, "Editable Table"), - React.createElement(ReactTabulator_1["default"], { columns: editableColumns, data: data, cellEdited: function (cell) { return console.log('cellEdited', cell); }, dataChanged: function (newData) { return console.log('dataChanged', newData); }, footerElement: React.createElement("span", null, "Footer"), options: { movableColumns: true, movableRows: true } }), - React.createElement("h3", null, "Infinite Scrolling with Ajax Requests"), - this.renderAjaxScrollExample(), - React.createElement("p", null, - React.createElement("a", { href: "https://github.com/ngduc/react-tabulator", target: "_blank" }, "Back to: Github Repo: react-tabulator")), - React.createElement("p", null, - React.createElement("a", { href: "http://tabulator.info/examples/4.0", target: "_blank" }, "More Tabulator's Examples")))); + } })); + }; + var options = { + height: 150, + movableRows: true, + movableColumns: true }; - return default_1; -}(React.Component)); -exports["default"] = default_1; + return (React.createElement("div", null, + React.createElement(ReactTabulator_1["default"], { onRef: function (ref) { return (ref = ref); }, columns: columns, data: data, events: { + rowClick: rowClick + }, options: options, "data-custom-attr": "test-custom-attribute", className: "custom-css-class" }), + React.createElement("i", null, + "Selected Name: ", + React.createElement("strong", null, state.selectedName)), + React.createElement("h3", null, + "Asynchronous data: (e.g. fetch) - ", + React.createElement("button", { onClick: setData }, "Set Data"), + ' ', + React.createElement("button", { onClick: clearData }, "Clear"), + " ", + React.createElement("button", { onClick: modifyData }, "Modify Data")), + React.createElement(ReactTabulator_1["default"], { columns: columns, data: state.data }), + React.createElement("h3", null, "Editable Table"), + React.createElement(ReactTabulator_1["default"], { columns: editableColumns, data: data, cellEdited: function (cell) { return console.log('cellEdited', cell); }, dataChanged: function (newData) { return console.log('dataChanged', newData); }, footerElement: React.createElement("span", null, "Footer"), options: { movableColumns: true, movableRows: true } }), + React.createElement("h3", null, "Infinite Scrolling with Ajax Requests"), + renderAjaxScrollExample(), + React.createElement("p", null, + React.createElement("a", { href: "https://github.com/ngduc/react-tabulator", target: "_blank" }, "Back to: Github Repo: react-tabulator")), + React.createElement("p", null, + React.createElement("a", { href: "http://tabulator.info/examples/4.0", target: "_blank" }, "More Tabulator's Examples")))); +}); diff --git a/package.json b/package.json index e3f4399..61b6a51 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-tabulator", - "version": "0.18.0", + "version": "0.18.1", "description": "React Tabulator is based on tabulator - a JS table library with many advanced features.", "main": "lib/index.js", "types": "lib/index.d.ts", diff --git a/src/ReactTabulator.tsx b/src/ReactTabulator.tsx index a17f8ce..f751a50 100644 --- a/src/ReactTabulator.tsx +++ b/src/ReactTabulator.tsx @@ -13,7 +13,15 @@ export interface ReactTabulatorOptions extends TabulatorTypes.Options { export interface ColumnDefinition extends TabulatorTypes.ColumnDefinition {} -const ReactTabulator = (props: any) => { +export interface ReactTabulatorProps { + columns?: ColumnDefinition[]; + options?: any; + events?: any; + onRef?: (ref: any) => void + [k: string]: any; +} + +const ReactTabulator = (props: ReactTabulatorProps) => { const ref = React.useRef(); const instanceRef = React.useRef(); const [mainId, setMainId] = React.useState(`tabulator-${+new Date()}-${Math.floor(Math.random() * 9999999)}`); @@ -43,14 +51,16 @@ const ReactTabulator = (props: any) => { (instanceRef.current as any).on(eventName, handler); }); } + props.onRef && props.onRef(instanceRef); }; React.useEffect(() => { + // console.log('useEffect - onmount'); initTabulator(); }, []); React.useEffect(() => { - console.log('instanceRef.current', instanceRef.current); + // console.log('useEffect - props.data changed'); if (instanceRef && instanceRef.current) { initTabulator(); // re-init table } diff --git a/src/ReactTabulatorExample.tsx b/src/ReactTabulatorExample.tsx index 5094728..cae1c77 100644 --- a/src/ReactTabulatorExample.tsx +++ b/src/ReactTabulatorExample.tsx @@ -11,10 +11,10 @@ import MultiValueFormatter from './formatters/MultiValueFormatter'; import { reactFormatter } from './Utils'; -function SimpleButton (props: any) { +function SimpleButton(props: any) { const rowData = props.cell._cell.row.data; const cellValue = props.cell._cell.value || 'Edit | Show'; - return + return ; } const columns: ColumnDefinition[] = [ @@ -24,7 +24,7 @@ const columns: ColumnDefinition[] = [ { 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: reactFormatter() }, + { title: 'Custom', field: 'custom', hozAlign: 'center', editor: 'input', formatter: reactFormatter() } ]; const data = [ { id: 1, name: 'Oli Bob', age: '12', color: 'red', dob: '01/01/1980', rating: 5, passed: true, pets: ['cat', 'dog'] }, @@ -47,10 +47,14 @@ const data = [ // Editable Example: const colorOptions = { ['']: ' ', red: 'red', green: 'green', yellow: 'yellow' }; -const petOptions = [{ id: 'cat', name: 'cat' }, { id: 'dog', name: 'dog' }, { id: 'fish', name: 'fish' }]; -const editableColumns = [ +const petOptions = [ + { id: 'cat', name: 'cat' }, + { id: 'dog', name: 'dog' }, + { id: 'fish', name: 'fish' } +]; +const editableColumns: any[] = [ { title: 'Name', field: 'name', width: 150, editor: 'input', headerFilter: 'input' }, - { title: 'Age', field: 'age', hozAlign: 'left', formatter: 'progress', editor: 'progress' }, + { title: 'Age', field: 'age', hozAlign: 'left', formatter: 'progress', editor: 'star' }, { title: 'Favourite Color', field: 'color', @@ -72,40 +76,37 @@ const editableColumns = [ { title: 'Passed?', field: 'passed', hozAlign: 'center', formatter: 'tickCross', editor: true } ]; -interface IProps { - data: any[]; -} - -export default class extends React.Component { - state: any = { +export default () => { + const [state, setState] = React.useState({ data: [], selectedName: '' - }; - ref: any = null; + }); + let ref = React.useRef(); - rowClick = (e: any, row: any) => { - console.log('ref table: ', this.ref.table); // this is the Tabulator table instance + const rowClick = (e: any, row: any) => { + console.log('ref table: ', ref.current); // this is the Tabulator table instance + // ref?.current && ref?.current.replaceData([]) console.log('rowClick id: ${row.getData().id}', row, e); - this.setState({ selectedName: row.getData().name }); + setState({ selectedName: row.getData().name }); }; - setData = () => { - this.setState({ data }); + const setData = () => { + setState({ data }); }; - clearData = () => { - this.setState({ data: [] }); + const clearData = () => { + setState({ data: [] }); }; - modifyData = () => { + const modifyData = () => { const _newData = data.filter((item: any) => item.name === 'Oli Bob'); - this.setState({ data: _newData }); - } + setState({ data: _newData }); + }; - renderAjaxScrollExample = () => { + const renderAjaxScrollExample = () => { const columns = [ { title: 'First Name', field: 'first_name', width: 150 }, { title: 'Last Name', field: 'last_name', width: 150 }, - { title: 'Email', field: 'email', width: 150 }, - ] + { title: 'Email', field: 'email', width: 150 } + ]; const options = { height: 100, movableRows: true, @@ -113,11 +114,11 @@ export default class extends React.Component { progressiveLoadDelay: 200, progressiveLoadScrollMargin: 30, ajaxURL: 'https://reqres.in/api/users', - dataSendParams:{ - page: "page", - size: "per_page", + dataSendParams: { + page: 'page', + size: 'per_page' }, - dataReceiveParams:{ + dataReceiveParams: { last_page: 'last' }, paginationSize: 5, @@ -134,7 +135,7 @@ export default class extends React.Component { }; return ( (this.ref = ref)} + onRef={(r) => (ref = r)} columns={columns} options={options} events={{ @@ -152,62 +153,59 @@ export default class extends React.Component { }} /> ); - } - - render() { - const options: ReactTabulatorOptions = { - height: 150, - movableRows: true, - movableColumns: true - }; - return ( -
- (this.ref = ref)} - columns={columns} - data={data} - events={{ - rowClick: this.rowClick - }} - options={options} - data-custom-attr="test-custom-attribute" - className="custom-css-class" - /> - - Selected Name: {this.state.selectedName} - + }; -

- Asynchronous data: (e.g. fetch) - {' '} - {' '} - -

- + const options: ReactTabulatorOptions = { + height: 150, + movableRows: true, + movableColumns: true + }; + return ( +
+ (ref = ref)} + columns={columns} + data={data} + events={{ + rowClick: rowClick + }} + options={options} + data-custom-attr="test-custom-attribute" + className="custom-css-class" + /> + + Selected Name: {state.selectedName} + -

Editable Table

- console.log('cellEdited', cell)} - dataChanged={(newData: any) => console.log('dataChanged', newData)} - footerElement={Footer} - options={{ movableColumns: true, movableRows: true }} - /> +

+ Asynchronous data: (e.g. fetch) - {' '} + +

+ -

Infinite Scrolling with Ajax Requests

- {this.renderAjaxScrollExample()} +

Editable Table

+ console.log('cellEdited', cell)} + dataChanged={(newData: any) => console.log('dataChanged', newData)} + footerElement={Footer} + options={{ movableColumns: true, movableRows: true }} + /> -

- - Back to: Github Repo: react-tabulator - -

-

- - More Tabulator's Examples - -

-
- ); - } -} +

Infinite Scrolling with Ajax Requests

+ {renderAjaxScrollExample()} + +

+ + Back to: Github Repo: react-tabulator + +

+

+ + More Tabulator's Examples + +

+
+ ); +};