d2coreui 21.0.33 → 23.0.0

package/components/grid/extendedDataGrid.js

@@ -1,696 +1,705 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import React from "react";
-import * as FlexLayout from "flexlayout-react";
-import { Actions } from "flexlayout-react";
-import { ExclamationOutlined, EyeInvisibleOutlined, EyeOutlined, FilterOutlined } from "@ant-design/icons";
-import { Badge, Button, Empty } from "antd";
-import DataGrid from "./dataGrid";
-import debounce from "lodash/debounce";
-import i18n from "d2core/i18n/i18n";
-import isEqual from "lodash/isEqual";
-import isEqualWith from "lodash/isEqualWith";
-import cloneDeep from "lodash/cloneDeep";
-import tableDefaultRowStyleRules from "d2coreui/components/grid/cell/tableDefaultRowStyleRules";
-import { ColumnUtils } from "./columnUtils";
-const CONFIGURATION_VERSION = 1;
-export default class ExtendedDataGrid extends React.Component {
-    constructor(props) {
-        var _a, _b, _c, _d, _e;
-        super(props);
-        this.flexLayout = null;
-        let gridConfiguration = {
-            version: CONFIGURATION_VERSION,
-            pageSize: 0
-        };
-        const gridConfigurationOk = props.defaultGridConfiguration && (!props.defaultGridConfiguration.version || props.defaultGridConfiguration.version === CONFIGURATION_VERSION);
-        const layoutModelExists = gridConfigurationOk && !!props.defaultGridConfiguration.layoutModel;
-        gridConfiguration.layoutModel = layoutModelExists ? props.defaultGridConfiguration.layoutModel : this._getInitialLayoutModel(props);
-        gridConfiguration.columnModel = gridConfigurationOk && props.defaultGridConfiguration.columnModel ? props.defaultGridConfiguration.columnModel : undefined;
-        gridConfiguration.pageSize = gridConfigurationOk && props.defaultGridConfiguration.pageSize ? props.defaultGridConfiguration.pageSize : 0;
-        gridConfiguration.defaultPageSize = gridConfigurationOk && props.defaultGridConfiguration.defaultPageSize ? props.defaultGridConfiguration.defaultPageSize : undefined;
-        gridConfiguration.followLastRecord = gridConfigurationOk && props.defaultGridConfiguration.followLastRecord;
-        gridConfiguration.followLastRecordSortModel = gridConfigurationOk && props.defaultGridConfiguration.followLastRecordSortModel ? props.defaultGridConfiguration.followLastRecordSortModel : undefined;
-        gridConfiguration.followLastRecordEditable = gridConfigurationOk && props.defaultGridConfiguration.followLastRecordEditable;
-        gridConfiguration.columnSearchVisible = gridConfigurationOk && props.defaultGridConfiguration.columnSearchVisible;
-        gridConfiguration.rowStyleRules = gridConfigurationOk && props.defaultGridConfiguration.rowStyleRules ? props.defaultGridConfiguration.rowStyleRules : tableDefaultRowStyleRules();
-        gridConfiguration.defaultRowStyleRules = gridConfigurationOk && props.defaultGridConfiguration.defaultRowStyleRules ? props.defaultGridConfiguration.defaultRowStyleRules : tableDefaultRowStyleRules();
-        gridConfiguration.showMilliseconds = gridConfigurationOk && props.defaultGridConfiguration.showMilliseconds ? props.defaultGridConfiguration.showMilliseconds : false;
-        gridConfiguration.defaultShowMilliseconds = gridConfigurationOk && props.defaultGridConfiguration.defaultShowMilliseconds ? props.defaultGridConfiguration.defaultShowMilliseconds : false;
-        gridConfiguration.hideYear = gridConfigurationOk && props.defaultGridConfiguration.hideYear ? props.defaultGridConfiguration.hideYear : false;
-        gridConfiguration.defaultHideYear = gridConfigurationOk && props.defaultGridConfiguration.defaultHideYear ? props.defaultGridConfiguration.defaultHideYear : false;
-        const layoutLength = (_d = (_c = (_b = (_a = gridConfiguration.layoutModel) === null || _a === void 0 ? void 0 : _a.layout) === null || _b === void 0 ? void 0 : _b.children) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0;
-        if (layoutLength > 0) {
-            for (let i = 0; i < layoutLength; i++) {
-                if (!gridConfiguration.layoutModel.layout.children[i].id) {
-                    gridConfiguration.layoutModel.layout.children[i].id = `#${(i + 1) * 2}`;
-                }
-            }
-        }
-        this.state = {
-            layoutModel: FlexLayout.Model.fromJson(gridConfiguration.layoutModel),
-            gridConfiguration: gridConfiguration,
-            searchString: "",
-            searchHistory: props.search && props.search.initialSearchHistory ? [...props.search.initialSearchHistory] : [],
-            tableConfigVisible: false,
-            defaultFilter: this.props.filterPanel && this.props.filterPanel.defaultFilter ? cloneDeep(this.props.filterPanel.defaultFilter) : undefined,
-            filterChanged: false,
-            tableNeedToBeReloaded: false
-        };
-        if (!layoutModelExists && props.filterPanel && props.filterPanel.hidden) {
-            this.state.layoutModel.doAction(FlexLayout.Actions.updateNodeAttributes("#2", { width: 0 }));
-            this.state.gridConfiguration.layoutModel.layout.children[0].width = 0;
-        }
-        if (props.detailPanel) {
-            this.state.layoutModel.doAction(FlexLayout.Actions.updateNodeAttributes(props.filterPanel ? "#6" : "#4", { width: 0 }));
-        }
-        this.dataLoaded = false;
-        this.dataTransaction = { add: [], remove: [], update: [] };
-        const debounceInterval = (_e = props.updateDataDebounceInterval) !== null && _e !== void 0 ? _e : 500;
-        if (debounceInterval > 0) {
-            this._updateDataDebounced = debounce(this._updateData.bind(this), debounceInterval, { maxWait: debounceInterval });
-        }
-        else {
-            this._updateDataDebounced = this._updateData.bind(this);
-        }
-        this.renderToolbarButtons = this.renderToolbarButtons.bind(this);
-        this._onLoadData = this._onLoadData.bind(this);
-        this._onGridReady = this._onGridReady.bind(this);
-        this._onPaginationChanged = this._onPaginationChanged.bind(this);
-        this._onSearch = this._onSearch.bind(this);
-        this._onSearchStringChanged = this._onSearchStringChanged.bind(this);
-        this.renderToolbar = this.renderToolbar.bind(this);
-        this._followLastRecordDebounced = debounce(this._followLastRecordDebounced.bind(this), 500, { maxWait: 500 });
-        this._onRowDataUpdated = this._onRowDataUpdated.bind(this);
-        this._onChangeRowStyleRules = this._onChangeRowStyleRules.bind(this);
-        this.showFilterPanel = this.showFilterPanel.bind(this);
-        this.showDetailPanel = this.showDetailPanel.bind(this);
-        this.selectNextPreviousRecord = this.selectNextPreviousRecord.bind(this);
-        this._onSelectionChanged = this._onSelectionChanged.bind(this);
-        this._onViewportChanged = this._onViewportChanged.bind(this);
-    }
-    _getInitialLayoutModel(props) {
-        const renderFilter = props.filterPanel && props.filterPanel.renderer;
-        const renderDetail = props.detailPanel;
-        const layoutModel = {
-            global: {
-                tabSetEnableTabStrip: false,
-                splitterSize: 4,
-            },
-            borders: [],
-            layout: {
-                "type": "row",
-                "weight": 100,
-                "children": [{
-                        "type": "tabset",
-                        "weight": 100,
-                        "selected": 0,
-                        "children": [
-                            {
-                                "type": "tab",
-                                "name": "Data",
-                                "component": "data-panel",
-                            }
-                        ]
-                    }]
-            }
-        };
-        if (renderFilter) {
-            layoutModel.layout["children"].unshift({
-                "id": "#2",
-                "type": "tabset",
-                "width": props.filterPanel && props.filterPanel.defaultWidth ? props.filterPanel.defaultWidth : 228,
-                "selected": 0,
-                "children": [
-                    {
-                        "type": "tab",
-                        "name": "Filter",
-                        "component": "filter-panel",
-                    }
-                ]
-            });
-        }
-        if (renderDetail) {
-            layoutModel.layout["children"].push({
-                "id": props.filterPanel ? "#6" : "#4",
-                "type": "tabset",
-                "width": props.detailPanel ? (props.detailPanel.defaultWidth ? props.detailPanel.defaultWidth : 220) : 0,
-                "selected": 0,
-                "children": [
-                    {
-                        "type": "tab",
-                        "name": "Detail",
-                        "component": "detail-panel",
-                    }
-                ]
-            });
-        }
-        return layoutModel;
-    }
-    getConfiguration() {
-        return this.state.gridConfiguration;
-    }
-    getSearchContext() {
-        const searchHistory = [...this.state.searchHistory];
-        searchHistory.reverse();
-        return {
-            searchString: this.state.searchString,
-            searchHistory: searchHistory
-        };
-    }
-    loadData(callback) {
-        var _a;
-        (_a = this.dataGrid) === null || _a === void 0 ? void 0 : _a.loadData(callback);
-    }
-    isActive() {
-        return !!this.dataGrid && this.dataGrid.isActive();
-    }
-    focus() {
-        var _a;
-        (_a = this.dataGrid) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-    _changeConfiguration(configuration, callback) {
-        if (this.props.disableConfigurationChange) {
-            return;
-        }
-        const newConfiguration = Object.assign(this.state.gridConfiguration, configuration);
-        this.setState({ gridConfiguration: newConfiguration }, callback);
-        if (this.props.onChangeConfiguration) {
-            this.props.onChangeConfiguration(this.state.gridConfiguration);
-        }
-    }
-    _onGridReady(event) {
-        this.gridApi = event.api;
-        this.columnApi = event.columnApi;
-        this._reloadTableConfiguration();
-        if (this.props.onGridReady) {
-            this.props.onGridReady(event);
-        }
-    }
-    _onLoadData(callback) {
-        if (this.state.tableNeedToBeReloaded) {
-            this.setState({ tableNeedToBeReloaded: false });
-        }
-        this.props.onLoadData((recordsCount) => {
-            this.dataLoaded = true;
-            this.dataTransaction = { add: [], remove: [], update: [] };
-            this.followLastRecord();
-            callback(recordsCount);
-        });
-    }
-    _onPaginationChanged(currentPageSize, definedPageSize) {
-        if (this.dataLoaded) {
-            const definedPageSizeChanged = this.state.gridConfiguration.pageSize !== definedPageSize;
-            if (definedPageSizeChanged) {
-                this._changeConfiguration({ pageSize: definedPageSize });
-                this._followLastRecordDebounced();
-            }
-            if (this.props.paging && this.props.paging.onPaginationChanged) {
-                this.props.paging.onPaginationChanged(currentPageSize, definedPageSize);
-            }
-        }
-    }
-    _onSearchStringChanged(searchString) {
-        this.setState({ searchString: searchString });
-        if (this.props.search && this.props.search.onChange) {
-            this.props.search.onChange(searchString);
-        }
-    }
-    _onSearch() {
-        const currentSearchString = this.state.searchString;
-        let searchHistory = this.state.searchHistory;
-        searchHistory = searchHistory.filter((searchString) => searchString !== currentSearchString);
-        searchHistory.unshift(currentSearchString);
-        searchHistory = searchHistory.slice(0, 10);
-        this.setState({
-            searchHistory: searchHistory,
-        });
-        if (this.props.search && this.props.search.onSearch) {
-            this.props.search.onSearch();
-        }
-    }
-    _reloadTableConfiguration() {
-        if (this.gridApi && this.columnApi) {
-            if (this.state.gridConfiguration.columnModel) {
-                ColumnUtils.mergeColumnsState(this.state.gridConfiguration.columnModel, this.props.columnDefs);
-                this.columnApi.applyColumnState({ state: this.state.gridConfiguration.columnModel, applyOrder: true });
-            }
-            else {
-                this.columnApi.resetColumnState();
-                const columnState = this.columnApi.getColumnState();
-                this._changeConfiguration({ columnModel: columnState });
-            }
-        }
-    }
-    clearTransaction() {
-        this.dataTransaction.add = [];
-        this.dataTransaction.remove = [];
-        this.dataTransaction.update = [];
-        this.dataTransaction.addIndex = undefined;
-    }
-    removeFromTransaction(item) {
-        this.dataTransaction.add = this.dataTransaction.add.filter(value => value.id !== item.id);
-        this.dataTransaction.remove = this.dataTransaction.remove.filter(value => value.id !== item.id);
-        this.dataTransaction.update = this.dataTransaction.update.filter(value => value.id !== item.id);
-    }
-    addRecord(data, addIndex) {
-        const markedToRemove = this.dataTransaction.remove.find((value => value.id === data.id));
-        if (markedToRemove) {
-            this.removeFromTransaction(data);
-            this.dataTransaction.update.push(data);
-        }
-        else {
-            this.removeFromTransaction(data);
-            this.dataTransaction.add.push(data);
-            if (addIndex !== undefined) {
-                this.dataTransaction.addIndex = addIndex;
-            }
-        }
-        if (this._updateDataDebounced) {
-            this._updateDataDebounced();
-        }
-    }
-    addRecords(dataArray, addIndex) {
-        (addIndex ? dataArray.reverse() : dataArray).forEach(data => this.addRecord(data, addIndex));
-    }
-    removeRecord(data) {
-        const markedToAdd = this.dataTransaction.add.find((value => value.id === data.id));
-        if (markedToAdd) {
-            this.removeFromTransaction(data);
-        }
-        else {
-            this.removeFromTransaction(data);
-            this.dataTransaction.remove.push(data);
-        }
-        if (this._updateDataDebounced) {
-            this._updateDataDebounced();
-        }
-    }
-    removeRecords(dataList) {
-        dataList.forEach((data) => {
-            this.removeRecord(data);
-        });
-    }
-    updateRecord(data) {
-        switch (data.dataChangeState) {
-            case "DEF":
-                this.addRecord(data);
-                break;
-            case "UNDEF":
-                this.removeRecord(data);
-                break;
-            default:
-                const markedToAdd = this.dataTransaction.add.find((value => value.id === data.id));
-                if (markedToAdd) {
-                    this.addRecord(data);
-                }
-                else {
-                    this.removeFromTransaction(data);
-                    this.dataTransaction.update.push(data);
-                    if (this._updateDataDebounced) {
-                        this._updateDataDebounced();
-                    }
-                }
-                break;
-        }
-    }
-    updateRecords(dataList) {
-        dataList.forEach((data) => {
-            this.updateRecord(data);
-        });
-    }
-    _updateData() {
-        this.dataTransaction.update.forEach(data => {
-            const rowNode = this.gridApi ? this.gridApi.getRowNode(data.id + "") : null;
-            if (rowNode) {
-                rowNode.updateData(data);
-                if (this.props.filter && this.props.filter.quickFilterEnabled) {
-                    rowNode.resetQuickFilterAggregateText();
-                }
-            }
-            else {
-                this.dataTransaction.add.push(data);
-            }
-        });
-        this.dataTransaction.update = [];
-        if (this.dataTransaction.add.length > 0 || this.dataTransaction.remove.length > 0) {
-            this.dataTransaction.remove.forEach((object) => {
-                const node = this.gridApi ? this.gridApi.getRowNode(object.id + "") : null;
-                if (node && node.isSelected()) {
-                    node.setSelected(false);
-                }
-            });
-            if (this.gridApi) {
-                this.gridApi.applyTransaction(this.dataTransaction);
-            }
-            if (this.props.rowData) {
-                if (this.dataTransaction.addIndex !== undefined) {
-                    this.props.rowData.splice(this.dataTransaction.addIndex, 0, ...this.dataTransaction.add);
-                }
-                else {
-                    this.props.rowData.push(...this.dataTransaction.add);
-                }
-                this.dataTransaction.remove.forEach((object) => {
-                    const index = this.props.rowData ? this.props.rowData.indexOf(object) : -1;
-                    if (index >= 0 && this.props.rowData) {
-                        this.props.rowData.splice(index, 1);
-                    }
-                });
-            }
-            this.dataTransaction = { add: [], remove: [], update: [] };
-        }
-        if (this.props.onDataChanged) {
-            this.props.onDataChanged();
-        }
-    }
-    enableFollowLastRecord(enable) {
-        var _a;
-        if (enable) {
-            if (this.gridApi && this.state.gridConfiguration.followLastRecordSortModel) {
-                (_a = this.dataGrid) === null || _a === void 0 ? void 0 : _a.setSortModel(this.state.gridConfiguration.followLastRecordSortModel);
-                this.gridApi.onSortChanged();
-            }
-            this._changeConfiguration({ followLastRecord: true });
-            this._followLastRecordDebounced();
-        }
-        else {
-            if (this.state.gridConfiguration.followLastRecord) {
-                this._changeConfiguration({ followLastRecord: false });
-            }
-        }
-    }
-    _followLastRecordDebounced() {
-        if (this.state.gridConfiguration.followLastRecord && this.props.rowData && this.props.rowData.length > 0) {
-            this.followLastRecord();
-        }
-    }
-    followLastRecord() {
-        if (this.state.gridConfiguration.followLastRecord && this.props.rowData && this.props.rowData.length > 0) {
-            if (this.gridApi) {
-                let lastIndex = -1;
-                this.gridApi.forEachNodeAfterFilterAndSort((_, index) => {
-                    lastIndex = index;
-                });
-                if (lastIndex >= 0) {
-                    this.gridApi.ensureIndexVisible(lastIndex);
-                }
-            }
-        }
-    }
-    setColumnModel(columnModel) {
-        var _a;
-        (_a = this.dataGrid) === null || _a === void 0 ? void 0 : _a.setColumnState(columnModel);
-    }
-    setSortModel(sortModel) {
-        var _a;
-        (_a = this.dataGrid) === null || _a === void 0 ? void 0 : _a.setSortModel(sortModel);
-    }
-    getSortModel() {
-        var _a, _b;
-        return (_b = (_a = this.dataGrid) === null || _a === void 0 ? void 0 : _a.getSortModel()) !== null && _b !== void 0 ? _b : [];
-    }
-    _onRowDataUpdated(event) {
-        this._followLastRecordDebounced();
-        if (this.props.onRowDataUpdated) {
-            this.props.onRowDataUpdated(event);
-        }
-    }
-    showFilterPanel(show) {
-        if (show) {
-            this.state.layoutModel.doAction(FlexLayout.Actions.updateNodeAttributes("#2", { width: this.props.filterPanel && this.props.filterPanel.defaultWidth ? this.props.filterPanel.defaultWidth : 250 }));
-        }
-        else {
-            this.state.layoutModel.doAction(FlexLayout.Actions.updateNodeAttributes("#2", { width: 0 }));
-        }
-    }
-    showDetailPanel(show) {
-        if (show) {
-            this.state.layoutModel.doAction(FlexLayout.Actions.updateNodeAttributes(this.props.filterPanel ? "#6" : "#4", { width: this.props.detailPanel && this.props.detailPanel.defaultWidth ? this.props.detailPanel.defaultWidth : 250 }));
-        }
-        else {
-            this.state.layoutModel.doAction(FlexLayout.Actions.updateNodeAttributes(this.props.filterPanel ? "#6" : "#4", { width: 0 }));
-        }
-    }
-    selectNextPreviousRecord(previous) {
-        var _a, _b, _c, _d;
-        let selectedNodes = (_a = this.gridApi) === null || _a === void 0 ? void 0 : _a.getSelectedNodes();
-        if (selectedNodes && selectedNodes.length === 1) {
-            let selectedNode = selectedNodes[0];
-            if (this.props.rowData && this.props.rowData.length > 0) {
-                (_b = this.gridApi) === null || _b === void 0 ? void 0 : _b.forEachNodeAfterFilterAndSort((node) => {
-                    var _a;
-                    if ((!previous && node.childIndex === (selectedNode.childIndex + 1)) || (previous && node.childIndex === (selectedNode.childIndex - 1))) {
-                        node.setSelected(true, true);
-                        (_a = this.gridApi) === null || _a === void 0 ? void 0 : _a.ensureNodeVisible(node);
-                    }
-                });
-            }
-            else if (this.props.rowModelType === "infinite" && selectedNode.rowIndex !== null) {
-                const nextRowIndex = !previous ? selectedNode.rowIndex + 1 : (selectedNode.rowIndex !== 0 ? selectedNode.rowIndex - 1 : 0);
-                const nextNode = (_c = this.gridApi) === null || _c === void 0 ? void 0 : _c.getDisplayedRowAtIndex(nextRowIndex);
-                if (nextNode) {
-                    nextNode.setSelected(true, true);
-                    (_d = this.gridApi) === null || _d === void 0 ? void 0 : _d.ensureNodeVisible(nextNode);
-                }
-            }
-        }
-    }
-    changeRowStyleRules(rowStyleRules) {
-        this.state.gridConfiguration.rowStyleRules = rowStyleRules;
-        this.setState({ gridConfiguration: this.state.gridConfiguration }, () => {
-            var _a;
-            (_a = this.gridApi) === null || _a === void 0 ? void 0 : _a.redrawRows();
-        });
-    }
-    _onChangeRowStyleRules(rowStyleRules) {
-        this.changeRowStyleRules(rowStyleRules);
-        if (this.props.onChangeRowStyleRules) {
-            this.props.onChangeRowStyleRules(rowStyleRules);
-        }
-    }
-    onPanelFilterApplied(newFilter) {
-        const filterChanged = !isEqualWith(newFilter, this.state.defaultFilter, this.equalValues);
-        if (filterChanged !== this.state.filterChanged) {
-            this.setState({ filterChanged: filterChanged });
-        }
-    }
-    getUiColumnFilterValue(colId) {
-        var _a;
-        const nameFilterModel = ((_a = this.gridApi) === null || _a === void 0 ? void 0 : _a.getFilterInstance(colId)).getModelFromUi();
-        return nameFilterModel && nameFilterModel.filter ? nameFilterModel.filter : "";
-    }
-    removeUiColumnFilterValue(colId) {
-        var _a;
-        const filterInstance = (_a = this.gridApi) === null || _a === void 0 ? void 0 : _a.getFilterInstance(colId);
-        const nameFilterModel = filterInstance.getModelFromUi();
-        if (nameFilterModel) {
-            nameFilterModel.filter = "";
-            filterInstance.resetUiToDefaults(false);
-        }
-    }
-    applyUiColumnFilterValue(colId) {
-        var _a, _b, _c;
-        (_c = (_b = (_a = this.gridApi) === null || _a === void 0 ? void 0 : _a.getFilterInstance(colId)) === null || _b === void 0 ? void 0 : _b.applyModel) === null || _c === void 0 ? void 0 : _c.call(_b);
-    }
-    equalValues(value, otherValue) {
-        if ((value === undefined || value === null) && (otherValue === undefined || otherValue === null)) {
-            return true;
-        }
-        return undefined;
-    }
-    _onSelectionChanged(event) {
-        if (this.state.gridConfiguration.followLastRecord && this.gridApi && this.gridApi.getSelectedRows().length > 0) {
-            this.enableFollowLastRecord(false);
-        }
-        if (this.props.onSelectionChanged) {
-            this.props.onSelectionChanged(event);
-        }
-    }
-    _onViewportChanged(event) {
-        const dataGridEvent = event;
-        if (this.state.gridConfiguration.followLastRecord && dataGridEvent.rowsScrollingDelta < 0) {
-            this.enableFollowLastRecord(false);
-        }
-        if (this.props.onViewportChanged) {
-            this.props.onViewportChanged(dataGridEvent);
-        }
-    }
-    renderToolbarButtons() {
-        var _a;
-        const renderFilter = this.props.filterPanel && this.props.filterPanel.renderer;
-        const filterPanelVisible = renderFilter && this.isFilterPanelVisible();
-        return (React.createElement(React.Fragment, null,
-            renderFilter && React.createElement(Button, { type: filterPanelVisible ? "primary" : "default", key: "filter-button", title: i18n("Show/Hide filter panel"), onClick: () => {
-                    this.showFilterPanel(!filterPanelVisible);
-                } },
-                React.createElement(FilterOutlined, null)), (_a = this.props.toolbar) === null || _a === void 0 ? void 0 :
-            _a.toolbarButtons,
-            this.state.gridConfiguration.followLastRecordEditable &&
-                React.createElement(Button, { key: "track-button", title: i18n("Track last added record to table"), onClick: (e) => {
-                        this.enableFollowLastRecord(!this.state.gridConfiguration.followLastRecord);
-                        e.target.blur();
-                    } }, this.state.gridConfiguration.followLastRecord ? React.createElement(EyeOutlined, null) : React.createElement(EyeInvisibleOutlined, null))));
-    }
-    renderToolbar(originalToolbar) {
-        let toolbarToRender = originalToolbar;
-        if (this.props.toolbar && this.props.toolbar.renderToolbar) {
-            const searchBar = this.props.toolbar.renderToolbar(originalToolbar);
-            if (searchBar) {
-                toolbarToRender = searchBar;
-            }
-        }
-        const statsBadge = this.renderSearchBadge();
-        return (React.createElement("div", { style: { whiteSpace: "nowrap", flexGrow: 1, display: "flex" } },
-            toolbarToRender,
-            statsBadge));
-    }
-    renderSearchBadge() {
-        if (this.state.tableNeedToBeReloaded) {
-            return (React.createElement(Badge, { count: React.createElement("span", { className: "ant-badge-count", title: i18n("Records has been added or removed, table need to be reloaded in order to see actual records"), style: { color: "#fa541c", background: "#fff2e8", borderColor: "#ffbb96" } },
-                    React.createElement(ExclamationOutlined, { style: { color: '#fa541c' } })), style: { cursor: "hand" }, offset: [10, -10] }));
-        }
-        return undefined;
-    }
-    isFilterPanelVisible() {
-        return this.state.gridConfiguration.layoutModel ? this.state.gridConfiguration.layoutModel.layout.children[0].width > 0 : true;
-    }
-    renderDataGrid() {
-        const _a = this.props, { defaultGridConfiguration, onGridReady, onLoadData, onSortChanged, onColumnsChanged, onSelectionChanged, onViewportChanged, onTableConfigVisible, toolbar, paging, filter, search, onChangeConfiguration, onDataChanged, onChangeRowStyleRules, filterPanel, controlPanel } = _a, rest = __rest(_a, ["defaultGridConfiguration", "onGridReady", "onLoadData", "onSortChanged", "onColumnsChanged", "onSelectionChanged", "onViewportChanged", "onTableConfigVisible", "toolbar", "paging", "filter", "search", "onChangeConfiguration", "onDataChanged", "onChangeRowStyleRules", "filterPanel", "controlPanel"]);
-        return (React.createElement(DataGrid, Object.assign({}, rest, { ref: (dataGrid) => {
-                this.dataGrid = dataGrid ? dataGrid : undefined;
-            }, onLoadData: this._onLoadData, onGridReady: this._onGridReady, paging: {
-                pageSize: this.state.gridConfiguration.pageSize,
-                defaultPageSize: this.state.gridConfiguration.defaultPageSize,
-                onPaginationChanged: this._onPaginationChanged,
-            }, filter: {
-                columnSearchVisible: this.state.gridConfiguration.columnSearchVisible,
-                getFilterModel: filter ? filter.getFilterModel : undefined,
-                onColumnSearchVisible: (visible) => {
-                    this._changeConfiguration({ columnSearchVisible: visible });
-                    if (filter === null || filter === void 0 ? void 0 : filter.onColumnSearchVisible) {
-                        filter.onColumnSearchVisible(visible);
-                    }
-                },
-                onFilterModified: filter ? filter.onFilterModified : undefined,
-                onFilterChanged: filter ? filter.onFilterChanged : undefined,
-                onFilterConfirmed: filter ? filter.onFilterConfirmed : undefined,
-            }, search: {
-                hidden: !!search ? search.hidden : undefined,
-                inputReadonly: !!search ? search.inputReadonly : undefined,
-                placeholder: !!search ? search.placeholder : undefined,
-                searchString: !!search && search.searchString !== undefined ? search.searchString : this.state.searchString,
-                stringFormatter: !!search ? search.stringFormatter : undefined,
-                searchHistory: !!search && search.searchHistory !== undefined ? search.searchHistory : this.state.searchHistory,
-                searchButtonClassName: !!search ? search.searchButtonClassName : undefined,
-                searchButtonDisabled: !!search ? search.searchButtonDisabled : undefined,
-                searchRenderer: search === null || search === void 0 ? void 0 : search.searchRenderer,
-                onChange: this._onSearchStringChanged,
-                onSearch: this._onSearch
-            }, toolbar: {
-                renderToolbar: this.renderToolbar,
-                toolbarButtons: this.renderToolbarButtons(),
-                hideRecordCount: toolbar === null || toolbar === void 0 ? void 0 : toolbar.hideRecordCount
-            }, onSortChanged: (event) => {
-                var _a, _b;
-                const sortModel = (_a = this.dataGrid) === null || _a === void 0 ? void 0 : _a.getSortModel();
-                if (this.state.gridConfiguration.followLastRecord && this.state.gridConfiguration.followLastRecordSortModel && !isEqual(this.state.gridConfiguration.followLastRecordSortModel, sortModel)) {
-                    this.enableFollowLastRecord(false);
-                }
-                const columnState = (_b = this.columnApi) === null || _b === void 0 ? void 0 : _b.getColumnState();
-                this._changeConfiguration({ columnModel: columnState });
-                if (onSortChanged) {
-                    onSortChanged(event);
-                }
-            }, onColumnsChanged: (columnModel, event) => {
-                this._changeConfiguration({ columnModel: columnModel });
-                if (onColumnsChanged) {
-                    onColumnsChanged(columnModel, event);
-                }
-            }, onRowDataUpdated: this._onRowDataUpdated, tableConfigVisible: this.state.tableConfigVisible, onTableConfigVisible: (visible) => {
-                this.setState({ tableConfigVisible: visible });
-                if (onTableConfigVisible) {
-                    onTableConfigVisible(visible);
-                }
-            }, onSelectionChanged: this._onSelectionChanged, rowStyleRules: this.state.gridConfiguration.rowStyleRules, defaultRowStyleRules: this.state.gridConfiguration.defaultRowStyleRules, onChangeRowStyleRules: this._onChangeRowStyleRules, onViewportChanged: this._onViewportChanged, showMilliseconds: this.state.gridConfiguration.showMilliseconds, defaultShowMilliseconds: this.state.gridConfiguration.defaultShowMilliseconds, onShowMilliseconds: (showMillis, callback) => {
-                this._changeConfiguration({ showMilliseconds: showMillis }, callback);
-            }, hideYear: this.state.gridConfiguration.hideYear, defaultHideYear: this.state.gridConfiguration.defaultHideYear, onShowYear: (showYear, callback) => {
-                this._changeConfiguration({ hideYear: !showYear }, callback);
-            } })));
-    }
-    renderDataGridWithControlPanel() {
-        if (this.props.controlPanel && this.props.controlPanel.renderer) {
-            return (React.createElement("div", { key: "table-with-control-panel", style: {
-                    display: "flex",
-                    flexFlow: "column",
-                    height: "100%",
-                    width: "100%"
-                } },
-                React.createElement("div", { key: "table-with-control-panel-wrapper", style: { flex: "1 1 auto", overflow: "auto" } }, this.renderDataGrid()),
-                this.props.controlPanel.renderer()));
-        }
-        return this.renderDataGrid();
-    }
-    componentDidUpdate() {
-        var _a;
-        (_a = this.flexLayout) === null || _a === void 0 ? void 0 : _a.updateRect();
-    }
-    render() {
-        const { filterPanel, detailPanel } = this.props;
-        if (filterPanel || detailPanel) {
-            return (React.createElement(FlexLayout.Layout, { ref: (flexLayout) => { this.flexLayout = flexLayout; }, model: this.state.layoutModel, onModelChange: (model) => {
-                    this._changeConfiguration({ layoutModel: model.toJson() });
-                }, onAction: (action) => {
-                    var _a;
-                    const node1 = action.data.node1;
-                    const node2 = action.data.node2;
-                    let tabset;
-                    if (action.type === Actions.ADJUST_SPLIT) {
-                        if (node1 === "#4" && node2 === "#6") {
-                            tabset = this.state.layoutModel.getNodeById('#6');
-                        }
-                        else if (node1 === "#2" && node2 === "#4") {
-                            tabset = this.state.layoutModel.getNodeById('#2');
-                        }
-                        if (tabset) {
-                            const width = (_a = tabset === null || tabset === void 0 ? void 0 : tabset._attributes) === null || _a === void 0 ? void 0 : _a.width;
-                            if (width === 0) {
-                                return undefined;
-                            }
-                        }
-                    }
-                    return action;
-                }, factory: (node) => {
-                    const component = node.getComponent();
-                    if (component === "filter-panel") {
-                        return filterPanel && filterPanel.renderer && filterPanel.renderer({
-                            defaultFilter: this.state.defaultFilter,
-                            filterChanged: this.state.filterChanged
-                        });
-                    }
-                    else if (component === "data-panel") {
-                        return this.renderDataGridWithControlPanel();
-                    }
-                    else if (component === "detail-panel") {
-                        return detailPanel && detailPanel.renderer();
-                    }
-                    return React.createElement(Empty, null);
-                } }));
-        }
-        else {
-            return this.renderDataGridWithControlPanel();
-        }
-    }
-}
-ExtendedDataGrid.defaultProps = {
-    rowStyleRules: tableDefaultRowStyleRules()
-};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import * as FlexLayout from "flexlayout-react";
+import { Actions } from "flexlayout-react";
+import { ExclamationOutlined, EyeInvisibleOutlined, EyeOutlined, FilterOutlined } from "@ant-design/icons";
+import { Badge, Button, Empty } from "antd";
+import DataGrid from "./dataGrid";
+import debounce from "lodash/debounce";
+import i18n from "d2core/i18n/i18n";
+import isEqual from "lodash/isEqual";
+import isEqualWith from "lodash/isEqualWith";
+import cloneDeep from "lodash/cloneDeep";
+import tableDefaultRowStyleRules from "d2coreui/components/grid/cell/tableDefaultRowStyleRules";
+import { ColumnUtils } from "./columnUtils";
+const CONFIGURATION_VERSION = 1;
+class ExtendedDataGrid extends React.Component {
+    constructor(props) {
+        var _a, _b, _c, _d, _e;
+        super(props);
+        this.flexLayout = null;
+        let gridConfiguration = {
+            version: CONFIGURATION_VERSION,
+            pageSize: 0
+        };
+        const gridConfigurationOk = props.defaultGridConfiguration && (!props.defaultGridConfiguration.version || props.defaultGridConfiguration.version === CONFIGURATION_VERSION);
+        const layoutModelExists = gridConfigurationOk && !!props.defaultGridConfiguration.layoutModel;
+        gridConfiguration.layoutModel = layoutModelExists ? props.defaultGridConfiguration.layoutModel : this._getInitialLayoutModel(props);
+        gridConfiguration.columnModel = gridConfigurationOk && props.defaultGridConfiguration.columnModel ? props.defaultGridConfiguration.columnModel : undefined;
+        gridConfiguration.pageSize = gridConfigurationOk && props.defaultGridConfiguration.pageSize ? props.defaultGridConfiguration.pageSize : 0;
+        gridConfiguration.defaultPageSize = gridConfigurationOk && props.defaultGridConfiguration.defaultPageSize ? props.defaultGridConfiguration.defaultPageSize : undefined;
+        gridConfiguration.followLastRecord = gridConfigurationOk && props.defaultGridConfiguration.followLastRecord;
+        gridConfiguration.followLastRecordSortModel = gridConfigurationOk && props.defaultGridConfiguration.followLastRecordSortModel ? props.defaultGridConfiguration.followLastRecordSortModel : undefined;
+        gridConfiguration.followLastRecordEditable = gridConfigurationOk && props.defaultGridConfiguration.followLastRecordEditable;
+        gridConfiguration.columnSearchVisible = gridConfigurationOk && props.defaultGridConfiguration.columnSearchVisible;
+        gridConfiguration.rowStyleRules = gridConfigurationOk && props.defaultGridConfiguration.rowStyleRules ? props.defaultGridConfiguration.rowStyleRules : tableDefaultRowStyleRules();
+        gridConfiguration.defaultRowStyleRules = gridConfigurationOk && props.defaultGridConfiguration.defaultRowStyleRules ? props.defaultGridConfiguration.defaultRowStyleRules : tableDefaultRowStyleRules();
+        gridConfiguration.showMilliseconds = gridConfigurationOk && props.defaultGridConfiguration.showMilliseconds ? props.defaultGridConfiguration.showMilliseconds : false;
+        gridConfiguration.defaultShowMilliseconds = gridConfigurationOk && props.defaultGridConfiguration.defaultShowMilliseconds ? props.defaultGridConfiguration.defaultShowMilliseconds : false;
+        gridConfiguration.hideYear = gridConfigurationOk && props.defaultGridConfiguration.hideYear ? props.defaultGridConfiguration.hideYear : false;
+        gridConfiguration.defaultHideYear = gridConfigurationOk && props.defaultGridConfiguration.defaultHideYear ? props.defaultGridConfiguration.defaultHideYear : false;
+        const layoutLength = (_d = (_c = (_b = (_a = gridConfiguration.layoutModel) === null || _a === void 0 ? void 0 : _a.layout) === null || _b === void 0 ? void 0 : _b.children) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0;
+        if (layoutLength > 0) {
+            for (let i = 0; i < layoutLength; i++) {
+                if (!gridConfiguration.layoutModel.layout.children[i].id) {
+                    gridConfiguration.layoutModel.layout.children[i].id = `#${(i + 1) * 2}`;
+                }
+            }
+        }
+        this.state = {
+            layoutModel: FlexLayout.Model.fromJson(gridConfiguration.layoutModel),
+            gridConfiguration: gridConfiguration,
+            searchString: "",
+            searchHistory: props.search && props.search.initialSearchHistory ? [...props.search.initialSearchHistory] : [],
+            tableConfigVisible: false,
+            defaultFilter: this.props.filterPanel && this.props.filterPanel.defaultFilter ? cloneDeep(this.props.filterPanel.defaultFilter) : undefined,
+            filterChanged: false,
+            tableNeedToBeReloaded: false
+        };
+        if (!layoutModelExists && props.filterPanel && props.filterPanel.hidden) {
+            this.state.layoutModel.doAction(FlexLayout.Actions.updateNodeAttributes("#2", { width: 0 }));
+            this.state.gridConfiguration.layoutModel.layout.children[0].width = 0;
+        }
+        if (props.detailPanel) {
+            this.state.layoutModel.doAction(FlexLayout.Actions.updateNodeAttributes(props.filterPanel ? "#6" : "#4", { width: 0 }));
+        }
+        this.dataLoaded = false;
+        this.dataTransaction = { add: [], remove: [], update: [] };
+        const debounceInterval = (_e = props.updateDataDebounceInterval) !== null && _e !== void 0 ? _e : 500;
+        if (debounceInterval > 0) {
+            this._updateDataDebounced = debounce(this._updateData.bind(this), debounceInterval, { maxWait: debounceInterval });
+        }
+        else {
+            this._updateDataDebounced = this._updateData.bind(this);
+        }
+        this.renderToolbarButtons = this.renderToolbarButtons.bind(this);
+        this._onLoadData = this._onLoadData.bind(this);
+        this._onGridReady = this._onGridReady.bind(this);
+        this._onPaginationChanged = this._onPaginationChanged.bind(this);
+        this._onSearch = this._onSearch.bind(this);
+        this._onSearchStringChanged = this._onSearchStringChanged.bind(this);
+        this.renderToolbar = this.renderToolbar.bind(this);
+        this._followLastRecordDebounced = debounce(this._followLastRecordDebounced.bind(this), 500, { maxWait: 500 });
+        this._onRowDataUpdated = this._onRowDataUpdated.bind(this);
+        this._onChangeRowStyleRules = this._onChangeRowStyleRules.bind(this);
+        this.showFilterPanel = this.showFilterPanel.bind(this);
+        this.showDetailPanel = this.showDetailPanel.bind(this);
+        this.selectNextPreviousRecord = this.selectNextPreviousRecord.bind(this);
+        this._onSelectionChanged = this._onSelectionChanged.bind(this);
+        this._onViewportChanged = this._onViewportChanged.bind(this);
+    }
+    _getInitialLayoutModel(props) {
+        const renderFilter = props.filterPanel && props.filterPanel.renderer;
+        const renderDetail = props.detailPanel;
+        const layoutModel = {
+            global: {
+                tabSetEnableTabStrip: false,
+                splitterSize: 4,
+            },
+            borders: [],
+            layout: {
+                "type": "row",
+                "weight": 100,
+                "children": [{
+                        "type": "tabset",
+                        "weight": 100,
+                        "selected": 0,
+                        "children": [
+                            {
+                                "type": "tab",
+                                "name": "Data",
+                                "component": "data-panel",
+                            }
+                        ]
+                    }]
+            }
+        };
+        if (renderFilter) {
+            layoutModel.layout["children"].unshift({
+                "id": "#2",
+                "type": "tabset",
+                "width": props.filterPanel && props.filterPanel.defaultWidth ? props.filterPanel.defaultWidth : 228,
+                "selected": 0,
+                "children": [
+                    {
+                        "type": "tab",
+                        "name": "Filter",
+                        "component": "filter-panel",
+                    }
+                ]
+            });
+        }
+        if (renderDetail) {
+            layoutModel.layout["children"].push({
+                "id": props.filterPanel ? "#6" : "#4",
+                "type": "tabset",
+                "width": props.detailPanel ? (props.detailPanel.defaultWidth ? props.detailPanel.defaultWidth : 220) : 0,
+                "selected": 0,
+                "children": [
+                    {
+                        "type": "tab",
+                        "name": "Detail",
+                        "component": "detail-panel",
+                    }
+                ]
+            });
+        }
+        return layoutModel;
+    }
+    getConfiguration() {
+        return this.state.gridConfiguration;
+    }
+    getSearchContext() {
+        const searchHistory = [...this.state.searchHistory];
+        searchHistory.reverse();
+        return {
+            searchString: this.state.searchString,
+            searchHistory: searchHistory
+        };
+    }
+    loadData(callback) {
+        var _a;
+        (_a = this.dataGrid) === null || _a === void 0 ? void 0 : _a.loadData(callback);
+    }
+    isActive() {
+        return !!this.dataGrid && this.dataGrid.isActive();
+    }
+    focus() {
+        var _a;
+        (_a = this.dataGrid) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    _changeConfiguration(configuration, callback) {
+        if (this.props.disableConfigurationChange) {
+            return;
+        }
+        const newConfiguration = Object.assign(this.state.gridConfiguration, configuration);
+        this.setState({ gridConfiguration: newConfiguration }, callback);
+        if (this.props.onChangeConfiguration) {
+            this.props.onChangeConfiguration(this.state.gridConfiguration);
+        }
+    }
+    _onGridReady(event) {
+        this.gridApi = event.api;
+        this._reloadTableConfiguration();
+        if (this.props.onGridReady) {
+            this.props.onGridReady(event);
+        }
+    }
+    _onLoadData(callback) {
+        if (this.state.tableNeedToBeReloaded) {
+            this.setState({ tableNeedToBeReloaded: false });
+        }
+        this.props.onLoadData((recordsCount) => {
+            this.dataLoaded = true;
+            this.dataTransaction = { add: [], remove: [], update: [] };
+            this.followLastRecord();
+            callback(recordsCount);
+        });
+    }
+    _onPaginationChanged(currentPageSize, definedPageSize) {
+        if (this.dataLoaded) {
+            const definedPageSizeChanged = this.state.gridConfiguration.pageSize !== definedPageSize;
+            if (definedPageSizeChanged) {
+                this._changeConfiguration({ pageSize: definedPageSize });
+                this._followLastRecordDebounced();
+            }
+            if (this.props.paging && this.props.paging.onPaginationChanged) {
+                this.props.paging.onPaginationChanged(currentPageSize, definedPageSize);
+            }
+        }
+    }
+    _onSearchStringChanged(searchString) {
+        this.setState({ searchString: searchString });
+        if (this.props.search && this.props.search.onChange) {
+            this.props.search.onChange(searchString);
+        }
+    }
+    _onSearch() {
+        const currentSearchString = this.state.searchString;
+        let searchHistory = this.state.searchHistory;
+        searchHistory = searchHistory.filter((searchString) => searchString !== currentSearchString);
+        searchHistory.unshift(currentSearchString);
+        searchHistory = searchHistory.slice(0, 10);
+        this.setState({
+            searchHistory: searchHistory,
+        });
+        if (this.props.search && this.props.search.onSearch) {
+            this.props.search.onSearch();
+        }
+    }
+    _reloadTableConfiguration() {
+        if (this.gridApi) {
+            if (this.state.gridConfiguration.columnModel) {
+                ColumnUtils.mergeColumnsState(this.state.gridConfiguration.columnModel, this.props.columnDefs);
+                this.gridApi.applyColumnState({ state: this.state.gridConfiguration.columnModel, applyOrder: true });
+            }
+            else {
+                this.gridApi.resetColumnState();
+                const columnState = this.gridApi.getColumnState();
+                this._changeConfiguration({ columnModel: columnState });
+            }
+        }
+    }
+    clearTransaction() {
+        this.dataTransaction.add = [];
+        this.dataTransaction.remove = [];
+        this.dataTransaction.update = [];
+        this.dataTransaction.addIndex = undefined;
+    }
+    removeFromTransaction(item) {
+        this.dataTransaction.add = this.dataTransaction.add.filter(value => value.id !== item.id);
+        this.dataTransaction.remove = this.dataTransaction.remove.filter(value => value.id !== item.id);
+        this.dataTransaction.update = this.dataTransaction.update.filter(value => value.id !== item.id);
+    }
+    addRecord(data, addIndex) {
+        const markedToRemove = this.dataTransaction.remove.find((value => value.id === data.id));
+        if (markedToRemove) {
+            this.removeFromTransaction(data);
+            this.dataTransaction.update.push(data);
+        }
+        else {
+            this.removeFromTransaction(data);
+            this.dataTransaction.add.push(data);
+            if (addIndex !== undefined) {
+                this.dataTransaction.addIndex = addIndex;
+            }
+        }
+        if (this._updateDataDebounced) {
+            this._updateDataDebounced();
+        }
+    }
+    addRecords(dataArray, addIndex) {
+        (addIndex ? dataArray.reverse() : dataArray).forEach(data => this.addRecord(data, addIndex));
+    }
+    setRowData(dataArray) {
+        var _a;
+        this.dataTransaction = { add: [], remove: [], update: [] };
+        (_a = this.dataGrid) === null || _a === void 0 ? void 0 : _a.setRowData(dataArray);
+    }
+    removeRecord(data) {
+        const markedToAdd = this.dataTransaction.add.find((value => value.id === data.id));
+        if (markedToAdd) {
+            this.removeFromTransaction(data);
+        }
+        else {
+            this.removeFromTransaction(data);
+            this.dataTransaction.remove.push(data);
+        }
+        if (this._updateDataDebounced) {
+            this._updateDataDebounced();
+        }
+    }
+    removeRecords(dataList) {
+        dataList.forEach((data) => {
+            this.removeRecord(data);
+        });
+    }
+    updateRecord(data) {
+        switch (data.dataChangeState) {
+            case "DEF":
+                this.addRecord(data);
+                break;
+            case "UNDEF":
+                this.removeRecord(data);
+                break;
+            default:
+                const markedToAdd = this.dataTransaction.add.find((value => value.id === data.id));
+                if (markedToAdd) {
+                    this.addRecord(data);
+                }
+                else {
+                    this.removeFromTransaction(data);
+                    this.dataTransaction.update.push(data);
+                    if (this._updateDataDebounced) {
+                        this._updateDataDebounced();
+                    }
+                }
+                break;
+        }
+    }
+    updateRecords(dataList) {
+        dataList.forEach((data) => {
+            this.updateRecord(data);
+        });
+    }
+    _updateData() {
+        this.dataTransaction.update.forEach(data => {
+            const rowNode = this.gridApi ? this.gridApi.getRowNode(data.id + "") : null;
+            if (rowNode) {
+                rowNode.updateData(data);
+                if (this.props.filter && this.props.filter.quickFilterEnabled) {
+                    rowNode.resetQuickFilterAggregateText();
+                }
+            }
+            else {
+                this.dataTransaction.add.push(data);
+            }
+        });
+        this.dataTransaction.update = [];
+        if (this.dataTransaction.add.length > 0 || this.dataTransaction.remove.length > 0) {
+            this.dataTransaction.remove.forEach((object) => {
+                const node = this.gridApi ? this.gridApi.getRowNode(object.id + "") : null;
+                if (node && node.isSelected()) {
+                    node.setSelected(false);
+                }
+            });
+            if (this.gridApi) {
+                this.gridApi.applyTransaction(this.dataTransaction);
+            }
+            if (this.props.rowData) {
+                if (this.dataTransaction.addIndex !== undefined) {
+                    this.props.rowData.splice(this.dataTransaction.addIndex, 0, ...this.dataTransaction.add);
+                }
+                else {
+                    this.props.rowData.push(...this.dataTransaction.add);
+                }
+                this.dataTransaction.remove.forEach((object) => {
+                    const index = this.props.rowData ? this.props.rowData.indexOf(object) : -1;
+                    if (index >= 0 && this.props.rowData) {
+                        this.props.rowData.splice(index, 1);
+                    }
+                });
+            }
+            this.dataTransaction = { add: [], remove: [], update: [] };
+        }
+        if (this.props.onDataChanged) {
+            this.props.onDataChanged();
+        }
+    }
+    enableFollowLastRecord(enable) {
+        var _a;
+        if (enable) {
+            if (this.gridApi && this.state.gridConfiguration.followLastRecordSortModel) {
+                (_a = this.dataGrid) === null || _a === void 0 ? void 0 : _a.setSortModel(this.state.gridConfiguration.followLastRecordSortModel);
+                this.gridApi.onSortChanged();
+            }
+            this._changeConfiguration({ followLastRecord: true });
+            this._followLastRecordDebounced();
+        }
+        else {
+            if (this.state.gridConfiguration.followLastRecord) {
+                this._changeConfiguration({ followLastRecord: false });
+            }
+        }
+    }
+    _followLastRecordDebounced() {
+        if (this.state.gridConfiguration.followLastRecord && this.props.rowData && this.props.rowData.length > 0) {
+            this.followLastRecord();
+        }
+    }
+    followLastRecord() {
+        if (this.state.gridConfiguration.followLastRecord && this.props.rowData && this.props.rowData.length > 0) {
+            if (this.gridApi) {
+                let lastIndex = -1;
+                this.gridApi.forEachNodeAfterFilterAndSort((_, index) => {
+                    lastIndex = index;
+                });
+                if (lastIndex >= 0) {
+                    this.gridApi.ensureIndexVisible(lastIndex);
+                }
+            }
+        }
+    }
+    setColumnModel(columnModel) {
+        var _a;
+        (_a = this.dataGrid) === null || _a === void 0 ? void 0 : _a.setColumnState(columnModel);
+    }
+    setSortModel(sortModel) {
+        var _a;
+        (_a = this.dataGrid) === null || _a === void 0 ? void 0 : _a.setSortModel(sortModel);
+    }
+    getSortModel() {
+        var _a, _b;
+        return (_b = (_a = this.dataGrid) === null || _a === void 0 ? void 0 : _a.getSortModel()) !== null && _b !== void 0 ? _b : [];
+    }
+    _onRowDataUpdated(event) {
+        this._followLastRecordDebounced();
+        if (this.props.onRowDataUpdated) {
+            this.props.onRowDataUpdated(event);
+        }
+    }
+    showFilterPanel(show) {
+        if (show) {
+            this.state.layoutModel.doAction(FlexLayout.Actions.updateNodeAttributes("#2", { width: this.props.filterPanel && this.props.filterPanel.defaultWidth ? this.props.filterPanel.defaultWidth : 250 }));
+        }
+        else {
+            this.state.layoutModel.doAction(FlexLayout.Actions.updateNodeAttributes("#2", { width: 0 }));
+        }
+    }
+    showDetailPanel(show) {
+        if (show) {
+            this.state.layoutModel.doAction(FlexLayout.Actions.updateNodeAttributes(this.props.filterPanel ? "#6" : "#4", { width: this.props.detailPanel && this.props.detailPanel.defaultWidth ? this.props.detailPanel.defaultWidth : 250 }));
+        }
+        else {
+            this.state.layoutModel.doAction(FlexLayout.Actions.updateNodeAttributes(this.props.filterPanel ? "#6" : "#4", { width: 0 }));
+        }
+    }
+    selectNextPreviousRecord(previous) {
+        var _a, _b, _c, _d;
+        let selectedNodes = (_a = this.gridApi) === null || _a === void 0 ? void 0 : _a.getSelectedNodes();
+        if (selectedNodes && selectedNodes.length === 1) {
+            let selectedNode = selectedNodes[0];
+            if (this.props.rowData && this.props.rowData.length > 0) {
+                (_b = this.gridApi) === null || _b === void 0 ? void 0 : _b.forEachNodeAfterFilterAndSort((node) => {
+                    var _a;
+                    if ((!previous && node.childIndex === (selectedNode.childIndex + 1)) || (previous && node.childIndex === (selectedNode.childIndex - 1))) {
+                        node.setSelected(true, true);
+                        (_a = this.gridApi) === null || _a === void 0 ? void 0 : _a.ensureNodeVisible(node);
+                    }
+                });
+            }
+            else if (this.props.rowModelType === "infinite" && selectedNode.rowIndex !== null) {
+                const nextRowIndex = !previous ? selectedNode.rowIndex + 1 : (selectedNode.rowIndex !== 0 ? selectedNode.rowIndex - 1 : 0);
+                const nextNode = (_c = this.gridApi) === null || _c === void 0 ? void 0 : _c.getDisplayedRowAtIndex(nextRowIndex);
+                if (nextNode) {
+                    nextNode.setSelected(true, true);
+                    (_d = this.gridApi) === null || _d === void 0 ? void 0 : _d.ensureNodeVisible(nextNode);
+                }
+            }
+        }
+    }
+    changeRowStyleRules(rowStyleRules) {
+        this.state.gridConfiguration.rowStyleRules = rowStyleRules;
+        this.setState({ gridConfiguration: this.state.gridConfiguration }, () => {
+            var _a;
+            (_a = this.gridApi) === null || _a === void 0 ? void 0 : _a.redrawRows();
+        });
+    }
+    _onChangeRowStyleRules(rowStyleRules) {
+        this.changeRowStyleRules(rowStyleRules);
+        if (this.props.onChangeRowStyleRules) {
+            this.props.onChangeRowStyleRules(rowStyleRules);
+        }
+    }
+    onPanelFilterApplied(newFilter) {
+        const filterChanged = !isEqualWith(newFilter, this.state.defaultFilter, this.equalValues);
+        if (filterChanged !== this.state.filterChanged) {
+            this.setState({ filterChanged: filterChanged });
+        }
+    }
+    getUiColumnFilterValue(colId) {
+        var _a;
+        const nameFilterModel = (_a = this.gridApi) === null || _a === void 0 ? void 0 : _a.getColumnFilterModel(colId);
+        return nameFilterModel && nameFilterModel.filter ? nameFilterModel.filter : "";
+    }
+    async removeUiColumnFilterValue(colId) {
+        var _a;
+        const filterInstance = await ((_a = this.gridApi) === null || _a === void 0 ? void 0 : _a.getColumnFilterInstance(colId));
+        const textFilterInstance = filterInstance;
+        const nameFilterModel = textFilterInstance.getModelFromUi();
+        if (nameFilterModel) {
+            nameFilterModel.filter = "";
+            textFilterInstance.resetUiToDefaults(false);
+        }
+    }
+    async applyUiColumnFilterValue(colId) {
+        var _a, _b, _c;
+        const filterInstance = await ((_a = this.gridApi) === null || _a === void 0 ? void 0 : _a.getColumnFilterInstance(colId));
+        (_c = (_b = ((filterInstance))) === null || _b === void 0 ? void 0 : _b.applyModel) === null || _c === void 0 ? void 0 : _c.call(_b);
+    }
+    equalValues(value, otherValue) {
+        if ((value === undefined || value === null) && (otherValue === undefined || otherValue === null)) {
+            return true;
+        }
+        return undefined;
+    }
+    _onSelectionChanged(event) {
+        if (this.state.gridConfiguration.followLastRecord && this.gridApi && this.gridApi.getSelectedRows().length > 0) {
+            this.enableFollowLastRecord(false);
+        }
+        if (this.props.onSelectionChanged) {
+            this.props.onSelectionChanged(event);
+        }
+    }
+    _onViewportChanged(event) {
+        const dataGridEvent = event;
+        if (this.state.gridConfiguration.followLastRecord && dataGridEvent.rowsScrollingDelta < 0) {
+            this.enableFollowLastRecord(false);
+        }
+        if (this.props.onViewportChanged) {
+            this.props.onViewportChanged(dataGridEvent);
+        }
+    }
+    renderToolbarButtons() {
+        var _a;
+        const renderFilter = this.props.filterPanel && this.props.filterPanel.renderer;
+        const filterPanelVisible = renderFilter && this.isFilterPanelVisible();
+        return (React.createElement(React.Fragment, null,
+            renderFilter && React.createElement(Button, { type: filterPanelVisible ? "primary" : "default", key: "filter-button", title: i18n("Show/Hide filter panel"), onClick: () => {
+                    this.showFilterPanel(!filterPanelVisible);
+                } },
+                React.createElement(FilterOutlined, null)), (_a = this.props.toolbar) === null || _a === void 0 ? void 0 :
+            _a.toolbarButtons,
+            this.state.gridConfiguration.followLastRecordEditable &&
+                React.createElement(Button, { key: "track-button", title: i18n("Track last added record to table"), onClick: (e) => {
+                        this.enableFollowLastRecord(!this.state.gridConfiguration.followLastRecord);
+                        e.target.blur();
+                    } }, this.state.gridConfiguration.followLastRecord ? React.createElement(EyeOutlined, null) : React.createElement(EyeInvisibleOutlined, null))));
+    }
+    renderToolbar(originalToolbar) {
+        let toolbarToRender = originalToolbar;
+        if (this.props.toolbar && this.props.toolbar.renderToolbar) {
+            const searchBar = this.props.toolbar.renderToolbar(originalToolbar);
+            if (searchBar) {
+                toolbarToRender = searchBar;
+            }
+        }
+        const statsBadge = this.renderSearchBadge();
+        return (React.createElement("div", { style: { whiteSpace: "nowrap", flexGrow: 1, display: "flex" } },
+            toolbarToRender,
+            statsBadge));
+    }
+    renderSearchBadge() {
+        if (this.state.tableNeedToBeReloaded) {
+            return (React.createElement(Badge, { count: React.createElement("span", { className: "ant-badge-count", title: i18n("Records has been added or removed, table need to be reloaded in order to see actual records"), style: { color: "#fa541c", background: "#fff2e8", borderColor: "#ffbb96" } },
+                    React.createElement(ExclamationOutlined, { style: { color: '#fa541c' } })), style: { cursor: "hand" }, offset: [10, -10] }));
+        }
+        return undefined;
+    }
+    isFilterPanelVisible() {
+        return this.state.gridConfiguration.layoutModel ? this.state.gridConfiguration.layoutModel.layout.children[0].width > 0 : true;
+    }
+    renderDataGrid() {
+        const _a = this.props, { defaultGridConfiguration, onGridReady, onLoadData, onSortChanged, onColumnsChanged, onSelectionChanged, onViewportChanged, onTableConfigVisible, toolbar, paging, filter, search, onChangeConfiguration, onDataChanged, onChangeRowStyleRules, filterPanel, controlPanel } = _a, rest = __rest(_a, ["defaultGridConfiguration", "onGridReady", "onLoadData", "onSortChanged", "onColumnsChanged", "onSelectionChanged", "onViewportChanged", "onTableConfigVisible", "toolbar", "paging", "filter", "search", "onChangeConfiguration", "onDataChanged", "onChangeRowStyleRules", "filterPanel", "controlPanel"]);
+        return (React.createElement(DataGrid, Object.assign({}, rest, { ref: (dataGrid) => {
+                this.dataGrid = dataGrid ? dataGrid : undefined;
+            }, onLoadData: this._onLoadData, onGridReady: this._onGridReady, paging: {
+                pageSize: this.state.gridConfiguration.pageSize,
+                defaultPageSize: this.state.gridConfiguration.defaultPageSize,
+                onPaginationChanged: this._onPaginationChanged,
+            }, filter: {
+                columnSearchVisible: this.state.gridConfiguration.columnSearchVisible,
+                getFilterModel: filter ? filter.getFilterModel : undefined,
+                onColumnSearchVisible: (visible) => {
+                    this._changeConfiguration({ columnSearchVisible: visible });
+                    if (filter === null || filter === void 0 ? void 0 : filter.onColumnSearchVisible) {
+                        filter.onColumnSearchVisible(visible);
+                    }
+                },
+                onFilterModified: filter ? filter.onFilterModified : undefined,
+                onFilterChanged: filter ? filter.onFilterChanged : undefined,
+                onFilterConfirmed: filter ? filter.onFilterConfirmed : undefined,
+            }, search: {
+                hidden: !!search ? search.hidden : undefined,
+                inputReadonly: !!search ? search.inputReadonly : undefined,
+                placeholder: !!search ? search.placeholder : undefined,
+                searchString: !!search && search.searchString !== undefined ? search.searchString : this.state.searchString,
+                stringFormatter: !!search ? search.stringFormatter : undefined,
+                searchHistory: !!search && search.searchHistory !== undefined ? search.searchHistory : this.state.searchHistory,
+                searchButtonClassName: !!search ? search.searchButtonClassName : undefined,
+                searchButtonDisabled: !!search ? search.searchButtonDisabled : undefined,
+                searchRenderer: search === null || search === void 0 ? void 0 : search.searchRenderer,
+                onChange: this._onSearchStringChanged,
+                onSearch: this._onSearch
+            }, toolbar: {
+                renderToolbar: this.renderToolbar,
+                toolbarButtons: this.renderToolbarButtons(),
+                hideRecordCount: toolbar === null || toolbar === void 0 ? void 0 : toolbar.hideRecordCount
+            }, onSortChanged: (event) => {
+                var _a, _b;
+                const sortModel = (_a = this.dataGrid) === null || _a === void 0 ? void 0 : _a.getSortModel();
+                if (this.state.gridConfiguration.followLastRecord && this.state.gridConfiguration.followLastRecordSortModel && !isEqual(this.state.gridConfiguration.followLastRecordSortModel, sortModel)) {
+                    this.enableFollowLastRecord(false);
+                }
+                const columnState = (_b = this.gridApi) === null || _b === void 0 ? void 0 : _b.getColumnState();
+                this._changeConfiguration({ columnModel: columnState });
+                if (onSortChanged) {
+                    onSortChanged(event);
+                }
+            }, onColumnsChanged: (columnModel, event) => {
+                this._changeConfiguration({ columnModel: columnModel });
+                if (onColumnsChanged) {
+                    onColumnsChanged(columnModel, event);
+                }
+            }, onRowDataUpdated: this._onRowDataUpdated, tableConfigVisible: this.state.tableConfigVisible, onTableConfigVisible: (visible) => {
+                this.setState({ tableConfigVisible: visible });
+                if (onTableConfigVisible) {
+                    onTableConfigVisible(visible);
+                }
+            }, onSelectionChanged: this._onSelectionChanged, rowStyleRules: this.state.gridConfiguration.rowStyleRules, defaultRowStyleRules: this.state.gridConfiguration.defaultRowStyleRules, onChangeRowStyleRules: this._onChangeRowStyleRules, onViewportChanged: this._onViewportChanged, showMilliseconds: this.state.gridConfiguration.showMilliseconds, defaultShowMilliseconds: this.state.gridConfiguration.defaultShowMilliseconds, onShowMilliseconds: (showMillis, callback) => {
+                this._changeConfiguration({ showMilliseconds: showMillis }, callback);
+            }, hideYear: this.state.gridConfiguration.hideYear, defaultHideYear: this.state.gridConfiguration.defaultHideYear, onShowYear: (showYear, callback) => {
+                this._changeConfiguration({ hideYear: !showYear }, callback);
+            } })));
+    }
+    renderDataGridWithControlPanel() {
+        if (this.props.controlPanel && this.props.controlPanel.renderer) {
+            return (React.createElement("div", { key: "table-with-control-panel", style: {
+                    display: "flex",
+                    flexFlow: "column",
+                    height: "100%",
+                    width: "100%"
+                } },
+                React.createElement("div", { key: "table-with-control-panel-wrapper", style: { flex: "1 1 auto", overflow: "auto" } }, this.renderDataGrid()),
+                this.props.controlPanel.renderer()));
+        }
+        return this.renderDataGrid();
+    }
+    componentDidUpdate() {
+        var _a;
+        (_a = this.flexLayout) === null || _a === void 0 ? void 0 : _a.updateRect();
+    }
+    render() {
+        const { filterPanel, detailPanel } = this.props;
+        if (filterPanel || detailPanel) {
+            return (React.createElement(FlexLayout.Layout, { ref: (flexLayout) => {
+                    this.flexLayout = flexLayout;
+                }, model: this.state.layoutModel, onModelChange: (model) => {
+                    this._changeConfiguration({ layoutModel: model.toJson() });
+                }, onAction: (action) => {
+                    var _a;
+                    const node1 = action.data.node1;
+                    const node2 = action.data.node2;
+                    let tabset;
+                    if (action.type === Actions.ADJUST_SPLIT) {
+                        if (node1 === "#4" && node2 === "#6") {
+                            tabset = this.state.layoutModel.getNodeById('#6');
+                        }
+                        else if (node1 === "#2" && node2 === "#4") {
+                            tabset = this.state.layoutModel.getNodeById('#2');
+                        }
+                        if (tabset) {
+                            const width = (_a = tabset === null || tabset === void 0 ? void 0 : tabset._attributes) === null || _a === void 0 ? void 0 : _a.width;
+                            if (width === 0) {
+                                return undefined;
+                            }
+                        }
+                    }
+                    return action;
+                }, factory: (node) => {
+                    const component = node.getComponent();
+                    if (component === "filter-panel") {
+                        return filterPanel && filterPanel.renderer && filterPanel.renderer({
+                            defaultFilter: this.state.defaultFilter,
+                            filterChanged: this.state.filterChanged
+                        });
+                    }
+                    else if (component === "data-panel") {
+                        return this.renderDataGridWithControlPanel();
+                    }
+                    else if (component === "detail-panel") {
+                        return detailPanel && detailPanel.renderer();
+                    }
+                    return React.createElement(Empty, null);
+                } }));
+        }
+        else {
+            return this.renderDataGridWithControlPanel();
+        }
+    }
+}
+ExtendedDataGrid.defaultProps = {
+    rowStyleRules: tableDefaultRowStyleRules()
+};
+export default ExtendedDataGrid;
 //# sourceMappingURL=extendedDataGrid.js.map