d2coreui 23.0.31 → 23.0.33

package/components/grid/extendedDataGrid.d.ts

@@ -2,11 +2,9 @@ import React, { ReactElement } from "react";
 import DataGrid, { DataGridFilterProps, DataGridProps, DataGridSearchProps, SortItem } from "./dataGrid";
 import { RowStyleRule } from "d2coreui/components/grid/cell/tableDefaultRowStyleRules";
 import { ColumnState, RowDataUpdatedEvent } from "ag-grid-community";
-import { Model } from "flexlayout-react/declarations/model/Model";
 import { DataChangeStateEnum } from "d2core/types/dataChangeStateEnum";
 export interface GridConfiguration {
     version?: number;
-    layoutModel?: any;
     columnModel?: ColumnState[];
     pageSize: number;
     defaultPageSize?: number;
@@ -20,6 +18,8 @@ export interface GridConfiguration {
     defaultShowMilliseconds?: boolean;
     hideYear?: boolean;
     defaultHideYear?: boolean;
+    filterPanelWidth?: number;
+    detailPanelWidth?: number;
 }
 interface ExtendedDataGridSearchProps extends DataGridSearchProps {
     initialSearchHistory?: string[];
@@ -58,7 +58,6 @@ export interface ExtendedDataGridProps extends Omit<DataGridProps, "paging"> {
     updateDataDebounceInterval?: number;
 }
 interface ExtendedDataGridState {
-    layoutModel: Model;
     gridConfiguration: GridConfiguration;
     searchString: string;
     searchHistory: string[];
@@ -66,6 +65,8 @@ interface ExtendedDataGridState {
     tableConfigVisible: boolean;
     filterChanged: boolean;
     tableNeedToBeReloaded: boolean;
+    sizes: (number | undefined)[];
+    width: number;
 }
 export default class ExtendedDataGrid<T extends {
     id: number | string;
@@ -77,10 +78,12 @@ export default class ExtendedDataGrid<T extends {
     private gridApi?;
     private dataLoaded;
     private dataTransaction;
-    private flexLayout;
+    private containerRef;
+    private resizeObserver;
     private _updateDataDebounced;
     constructor(props: Readonly<ExtendedDataGridProps>);
-    _getInitialLayoutModel(props: ExtendedDataGridProps): any;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
     getConfiguration(): GridConfiguration;
     getSearchContext(): {
         searchString: string;
@@ -135,7 +138,7 @@ export default class ExtendedDataGrid<T extends {
     isFilterPanelVisible(): boolean;
     renderDataGrid(): ReactElement;
     private renderDataGridWithControlPanel;
-    componentDidUpdate(): void;
     render(): React.JSX.Element;
+    private _onResize;
 }
 export {};

package/components/grid/extendedDataGrid.js

@@ -9,11 +9,9 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React from "react";
-import * as FlexLayout from "flexlayout-react";
-import { Actions } from "flexlayout-react";
+import React, { createRef } from "react";
 import { ExclamationOutlined, EyeInvisibleOutlined, EyeOutlined, FilterOutlined } from "@ant-design/icons";
-import { Badge, Button, Empty } from "antd";
+import { Badge, Button, Splitter } from "antd";
 import DataGrid from "./dataGrid";
 import debounce from "lodash/debounce";
 import i18n from "d2core/i18n/i18n";
@@ -22,19 +20,18 @@ 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;
+const CONFIGURATION_VERSION = 2;
 class ExtendedDataGrid extends React.Component {
     constructor(props) {
-        var _a, _b, _c, _d, _e;
+        var _a;
         super(props);
-        this.flexLayout = null;
+        this.containerRef = createRef();
+        this.resizeObserver = 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;
@@ -48,34 +45,24 @@ class ExtendedDataGrid extends React.Component {
         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}`;
-                }
-            }
-        }
+        gridConfiguration.filterPanelWidth = gridConfigurationOk && props.defaultGridConfiguration.filterPanelWidth
+            ? props.defaultGridConfiguration.filterPanelWidth
+            : (props.filterPanel ? (props.filterPanel.defaultWidth ? props.filterPanel.defaultWidth : 220) : 0);
+        gridConfiguration.detailPanelWidth = gridConfigurationOk && props.defaultGridConfiguration.detailPanelWidth ? props.defaultGridConfiguration.detailPanelWidth : 0;
         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
+            tableNeedToBeReloaded: false,
+            sizes: [gridConfiguration.filterPanelWidth, undefined, gridConfiguration.detailPanelWidth],
+            width: 0,
         };
-        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;
+        const debounceInterval = (_a = props.updateDataDebounceInterval) !== null && _a !== void 0 ? _a : 500;
         if (debounceInterval > 0) {
             this._updateDataDebounced = debounce(this._updateData.bind(this), debounceInterval, { maxWait: debounceInterval });
         }
@@ -97,64 +84,28 @@ class ExtendedDataGrid extends React.Component {
         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",
-                            }
-                        ]
-                    }]
+        this._onResize = this._onResize.bind(this);
+    }
+    componentDidMount() {
+        this.resizeObserver = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                if (entry.contentRect) {
+                    const oldWidth = this.state.width;
+                    const width = entry.contentRect.width;
+                    const diff = width - oldWidth;
+                    const [a, b, c] = this.state.sizes;
+                    this.setState({ width: width, sizes: [a, b !== undefined ? (b + diff) : b, c] });
+                }
             }
-        };
-        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 (this.containerRef.current) {
+            this.resizeObserver.observe(this.containerRef.current);
         }
-        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",
-                    }
-                ]
-            });
+    }
+    componentWillUnmount() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
         }
-        return layoutModel;
     }
     getConfiguration() {
         return this.state.gridConfiguration;
@@ -429,19 +380,50 @@ class ExtendedDataGrid extends React.Component {
         }
     }
     showFilterPanel(show) {
+        var _a, _b;
+        const { gridConfiguration, sizes } = this.state;
+        const [filterPanelWidth, middleWidth, detailPanelWidth] = sizes;
         if (show) {
-            this.state.layoutModel.doAction(FlexLayout.Actions.updateNodeAttributes("#2", { width: this.props.filterPanel && this.props.filterPanel.defaultWidth ? this.props.filterPanel.defaultWidth : 250 }));
+            if (filterPanelWidth === 0) {
+                const width = (_b = (_a = this.props.filterPanel) === null || _a === void 0 ? void 0 : _a.defaultWidth) !== null && _b !== void 0 ? _b : 250;
+                if (middleWidth !== undefined) {
+                    this.setState({ sizes: [width, middleWidth - width, detailPanelWidth], gridConfiguration: Object.assign(Object.assign({}, gridConfiguration), { filterPanelWidth: width }) });
+                }
+                else {
+                    this.setState({ sizes: [width, undefined, detailPanelWidth], gridConfiguration: Object.assign(Object.assign({}, gridConfiguration), { filterPanelWidth: width }) });
+                }
+            }
         }
         else {
-            this.state.layoutModel.doAction(FlexLayout.Actions.updateNodeAttributes("#2", { width: 0 }));
+            if (middleWidth !== undefined && filterPanelWidth !== undefined) {
+                this.setState({ sizes: [0, middleWidth + filterPanelWidth, detailPanelWidth], gridConfiguration: Object.assign(Object.assign({}, gridConfiguration), { filterPanelWidth: 0 }) });
+            }
+            else {
+                this.setState({ sizes: [0, undefined, detailPanelWidth], gridConfiguration: Object.assign(Object.assign({}, gridConfiguration), { filterPanelWidth: 0 }) });
+            }
         }
     }
     showDetailPanel(show) {
+        const { gridConfiguration, sizes } = this.state;
+        const [filterPanelWidth, middleWidth, detailPanelWidth] = sizes;
         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 }));
+            if (detailPanelWidth === 0) {
+                const width = this.props.detailPanel && this.props.detailPanel.defaultWidth ? this.props.detailPanel.defaultWidth : 250;
+                if (middleWidth !== undefined) {
+                    this.setState({ sizes: [filterPanelWidth, middleWidth - width, width], gridConfiguration: Object.assign(Object.assign({}, gridConfiguration), { detailPanelWidth: width }) });
+                }
+                else {
+                    this.setState({ sizes: [filterPanelWidth, undefined, width], gridConfiguration: Object.assign(Object.assign({}, gridConfiguration), { detailPanelWidth: width }) });
+                }
+            }
         }
         else {
-            this.state.layoutModel.doAction(FlexLayout.Actions.updateNodeAttributes(this.props.filterPanel ? "#6" : "#4", { width: 0 }));
+            if (middleWidth !== undefined && detailPanelWidth !== undefined) {
+                this.setState({ sizes: [filterPanelWidth, middleWidth + detailPanelWidth, 0], gridConfiguration: Object.assign(Object.assign({}, gridConfiguration), { detailPanelWidth: 0 }) });
+            }
+            else {
+                this.setState({ sizes: [filterPanelWidth, undefined, 0], gridConfiguration: Object.assign(Object.assign({}, gridConfiguration), { detailPanelWidth: 0 }) });
+            }
         }
     }
     selectNextPreviousRecord(previous) {
@@ -566,7 +548,8 @@ class ExtendedDataGrid extends React.Component {
         return undefined;
     }
     isFilterPanelVisible() {
-        return this.state.gridConfiguration.layoutModel ? this.state.gridConfiguration.layoutModel.layout.children[0].width > 0 : true;
+        var _a;
+        return ((_a = this.state.gridConfiguration.filterPanelWidth) !== null && _a !== void 0 ? _a : 0) > 0;
     }
     renderDataGrid() {
         const _a = this.props, { defaultGridConfiguration, onGridReady, onLoadData, onSortChanged, onColumnsChanged, onSelectionChanged, onViewportChanged, onTableConfigVisible, toolbar, paging, filter, search, onChangeConfiguration, onDataChanged, onChangeRowStyleRules, filterPanel, controlPanel, detailPanel } = _a, rest = __rest(_a, ["defaultGridConfiguration", "onGridReady", "onLoadData", "onSortChanged", "onColumnsChanged", "onSelectionChanged", "onViewportChanged", "onTableConfigVisible", "toolbar", "paging", "filter", "search", "onChangeConfiguration", "onDataChanged", "onChangeRowStyleRules", "filterPanel", "controlPanel", "detailPanel"]);
@@ -642,62 +625,27 @@ class ExtendedDataGrid extends React.Component {
                     height: "100%",
                     width: "100%"
                 } },
-                React.createElement("div", { key: "table-with-control-panel-wrapper", style: { flex: "1 1 auto", overflow: "auto" } }, this.renderDataGrid()),
+                React.createElement("div", { key: "table-with-control-panel-wrapper", style: { flex: "1 1 auto", overflow: "hidden" } }, 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();
-        }
+        const { sizes } = this.state;
+        const [filterPanelWidth, middleWidth, detailPanelWidth] = sizes;
+        return (React.createElement("div", { ref: this.containerRef },
+            React.createElement(Splitter, { lazy: true, style: { overflow: "hidden", position: "absolute", inset: 0 }, onCollapse: (_, sizes) => this._onResize(sizes), onResize: this._onResize, onResizeEnd: this._onResize },
+                React.createElement(Splitter.Panel, { resizable: (filterPanelWidth !== null && filterPanelWidth !== void 0 ? filterPanelWidth : 0) > 0, collapsible: { end: (filterPanelWidth !== null && filterPanelWidth !== void 0 ? filterPanelWidth : 0) > 0 }, size: filterPanelWidth }, (filterPanel === null || filterPanel === void 0 ? void 0 : filterPanel.renderer) && (filterPanel === null || filterPanel === void 0 ? void 0 : filterPanel.renderer({
+                    defaultFilter: this.state.defaultFilter,
+                    filterChanged: this.state.filterChanged
+                }))),
+                React.createElement(Splitter.Panel, { size: middleWidth }, this.renderDataGridWithControlPanel()),
+                React.createElement(Splitter.Panel, { resizable: (detailPanelWidth !== null && detailPanelWidth !== void 0 ? detailPanelWidth : 0) > 0, collapsible: { start: (detailPanelWidth !== null && detailPanelWidth !== void 0 ? detailPanelWidth : 0) > 0 }, size: detailPanelWidth }, detailPanel && detailPanel.renderer()))));
+    }
+    _onResize(sizes) {
+        const { gridConfiguration } = this.state;
+        this.setState({ sizes: sizes, gridConfiguration: Object.assign(Object.assign({}, gridConfiguration), { filterPanelWidth: sizes[0], detailPanelWidth: sizes[2] }) });
     }
 }
 ExtendedDataGrid.defaultProps = {