d2coreui 23.0.30 → 23.0.32

package/components/grid/dataGrid.d.ts

@@ -5,7 +5,7 @@ import 'ag-grid-community/styles/ag-grid.css';
 import 'ag-grid-community/styles/ag-theme-balham.css';
 import 'd2coreui/style/ag-grid/aggrid-adaptations.css';
 import { ContextMenuProps, PageOrientation } from "d2coreui/components/grid/export/contextMenu";
-import { CellClassParams, CellFocusedEvent, CellMouseDownEvent, ColDef, Column, ColumnEvent, ColumnState, FilterChangedEvent, FilterModifiedEvent, GridApi, GridOptions, GridReadyEvent, IRowNode, PaginationChangedEvent, RowClassParams, RowPinnedType, RowStyle, ViewportChangedEvent } from "ag-grid-community";
+import { CellClassParams, CellFocusedEvent, CellMouseDownEvent, CellMouseOverEvent, ColDef, Column, ColumnEvent, ColumnState, FilterChangedEvent, FilterModifiedEvent, GridApi, GridOptions, GridReadyEvent, IRowNode, PaginationChangedEvent, RowClassParams, RowPinnedType, RowStyle, ViewportChangedEvent } from "ag-grid-community";
 import { GridRowStyle, RowStyleRule } from "d2coreui/components/grid/cell/tableDefaultRowStyleRules";
 import ProgressPopup from "d2coreui/components/grid/export/progressPopup";
 import WildcardQuickFilterEngine from "./filter/wildcardQuickFilterEngine";
@@ -117,6 +117,12 @@ export interface DataGridProps extends Omit<GridOptions, "columnDefs" | "paginat
     };
     getRowStyle?(params: any): GridRowStyle | undefined;
     gridRef?: React.RefObject<AgGridReact>;
+    showFillHandle?: boolean;
+    onFillHandleComplete?: (startRow: number, endRow: number, columns: string[]) => void;
+}
+interface CellCoord {
+    rowIndex: number;
+    colId: string;
 }
 interface DataGridState {
     pageIndex: number;
@@ -134,6 +140,10 @@ interface DataGridState {
     columnTransferHeight: number;
     pageOrientation: PageOrientation;
     exporting: boolean;
+    isDragging: boolean;
+    startCoord: CellCoord | null;
+    endCoord: CellCoord | null;
+    focusedCell: CellCoord | null;
 }
 export default class DataGrid extends React.Component<DataGridProps, DataGridState> {
     static defaultProps: {
@@ -161,6 +171,7 @@ export default class DataGrid extends React.Component<DataGridProps, DataGridSta
     private static getCellValue;
     textCustomComparator(filter: string, value: any, filterText: string): boolean;
     componentDidUpdate(prevProps: DataGridProps): void;
+    componentWillUnmount(): void;
     setColumnState(columnModel: ColumnState[]): void;
     setSortModel(sortModel: SortItem[]): void;
     getSortModel(): SortItem[];
@@ -194,7 +205,9 @@ export default class DataGrid extends React.Component<DataGridProps, DataGridSta
     getValue(column: Column, row: IRowNode, doNotReplaceNewline?: boolean): string;
     getExportContent(progressPopup: ProgressPopup | null, props: ContextMenuProps): Promise<string[][]>;
     onCellFocused(event: CellFocusedEvent): void;
+    onCellMouseOver(e: CellMouseOverEvent): void;
     onCellMouseDown(e: CellMouseDownEvent): void;
+    onMouseUp(): void;
     setFocusedCellDebounced(rowIndex: number, column: string | Column, rowPinned: RowPinnedType): void;
     private onCellContextMenu;
     private loadingOverlayRenderer;
@@ -217,6 +230,7 @@ export default class DataGrid extends React.Component<DataGridProps, DataGridSta
     renderToolBarWithSearch(): ReactElement;
     getSettingsMenu(): MenuProps;
     private getAdaptedColumnDefs;
+    private isInRange;
     render(): React.JSX.Element;
 }
 export {};

package/components/grid/dataGrid.js

@@ -116,7 +116,11 @@ class DataGrid extends React.Component {
             loading: false,
             columnTransferHeight: 500,
             pageOrientation: "PORTRAIT",
-            exporting: false
+            exporting: false,
+            isDragging: false,
+            startCoord: null,
+            endCoord: null,
+            focusedCell: null,
         };
         this.indexToJump = null;
         this.columnToJump = null;
@@ -126,6 +130,8 @@ class DataGrid extends React.Component {
         this.onCellContextMenu = this.onCellContextMenu.bind(this);
         this.onCellFocused = this.onCellFocused.bind(this);
         this.onCellMouseDown = this.onCellMouseDown.bind(this);
+        this.onCellMouseOver = this.onCellMouseOver.bind(this);
+        this.onMouseUp = this.onMouseUp.bind(this);
         this.setFocusedCellDebounced = debounce(this.setFocusedCellDebounced.bind(this), 200);
         this.noRecordsOverlayRenderer = this.noRecordsOverlayRenderer.bind(this);
         this.loadingOverlayRenderer = this.loadingOverlayRenderer.bind(this);
@@ -240,7 +246,7 @@ class DataGrid extends React.Component {
                             return "---";
                         }
                         let tooltipValue;
-                        tooltipValue = unixTimeToMoment(value).format(LocaleHolder.getDateTimeFormat(true, true, true));
+                        tooltipValue = unixTimeToMoment(value).format(LocaleHolder.getDateTimeFormat(true, true, true, true));
                         return React.createElement("span", { title: tooltipValue }, unixTimeToMoment(value).format(LocaleHolder.getDateFormat(!this.props.hideYear)));
                     }
                     else {
@@ -280,8 +286,8 @@ class DataGrid extends React.Component {
                             return "Null Time";
                         }
                         let tooltipValue;
-                        tooltipValue = unixTimeToMoment(value).format(LocaleHolder.getDateTimeFormat(true, true, true));
-                        return React.createElement("span", { title: tooltipValue }, unixTimeToMoment(value).format(LocaleHolder.getDateTimeFormat(!this.props.hideYear, true, this.props.showMilliseconds)));
+                        tooltipValue = unixTimeToMoment(value).format(LocaleHolder.getDateTimeFormat(true, true, true, true));
+                        return React.createElement("span", { title: tooltipValue }, unixTimeToMoment(value).format(LocaleHolder.getDateTimeFormat(!this.props.hideYear, true, this.props.showMilliseconds, true)));
                     }
                     else {
                         return "---";
@@ -290,7 +296,7 @@ class DataGrid extends React.Component {
                 valueFormatter: (params) => {
                     const value = DataGrid.getCellValue(params);
                     if (value !== undefined) {
-                        return unixTimeToMoment(value).format(LocaleHolder.getDateTimeFormat(!this.props.hideYear, true, this.props.showMilliseconds));
+                        return unixTimeToMoment(value).format(LocaleHolder.getDateTimeFormat(!this.props.hideYear, true, this.props.showMilliseconds, true));
                     }
                     return "---";
                 },
@@ -300,14 +306,14 @@ class DataGrid extends React.Component {
                 filterValueGetter: (params) => {
                     const value = DataGrid.getCellValue(params);
                     if (value !== undefined) {
-                        return unixTimeToMoment(value).format(LocaleHolder.getDateTimeFormat(!this.props.hideYear, true, this.props.showMilliseconds));
+                        return unixTimeToMoment(value).format(LocaleHolder.getDateTimeFormat(!this.props.hideYear, true, this.props.showMilliseconds, true));
                     }
                     return null;
                 },
                 getQuickFilterText: (params) => {
                     const value = DataGrid.getCellValue(params);
                     if (value !== undefined) {
-                        return unixTimeToMoment(value).format(LocaleHolder.getDateTimeFormat(!this.props.hideYear, true, this.props.showMilliseconds));
+                        return unixTimeToMoment(value).format(LocaleHolder.getDateTimeFormat(!this.props.hideYear, true, this.props.showMilliseconds, true));
                     }
                     return "";
                 }
@@ -317,7 +323,7 @@ class DataGrid extends React.Component {
                     const value = DataGrid.getCellValue(params);
                     if (value !== undefined) {
                         let tooltipValue;
-                        tooltipValue = unixTimeToMoment(value).format(LocaleHolder.getDateTimeFormat(true, true, true));
+                        tooltipValue = unixTimeToMoment(value).format(LocaleHolder.getDateTimeFormat(true, true, true, true));
                         return React.createElement("span", { title: tooltipValue }, unixTimeToMoment(value).fromNow());
                     }
                     else {
@@ -327,7 +333,7 @@ class DataGrid extends React.Component {
                 valueFormatter: (params) => {
                     const value = DataGrid.getCellValue(params);
                     if (value !== undefined) {
-                        return unixTimeToMoment(value).format(LocaleHolder.getDateTimeFormat(!this.props.hideYear, true, this.props.showMilliseconds));
+                        return unixTimeToMoment(value).format(LocaleHolder.getDateTimeFormat(!this.props.hideYear, true, this.props.showMilliseconds, true));
                     }
                     return "---";
                 },
@@ -337,14 +343,14 @@ class DataGrid extends React.Component {
                 filterValueGetter: (params) => {
                     const value = DataGrid.getCellValue(params);
                     if (value !== undefined) {
-                        return unixTimeToMoment(value).format(LocaleHolder.getDateTimeFormat(!this.props.hideYear, true, this.props.showMilliseconds));
+                        return unixTimeToMoment(value).format(LocaleHolder.getDateTimeFormat(!this.props.hideYear, true, this.props.showMilliseconds, true));
                     }
                     return null;
                 },
                 getQuickFilterText: (params) => {
                     const value = DataGrid.getCellValue(params);
                     if (value !== undefined) {
-                        return unixTimeToMoment(value).format(LocaleHolder.getDateTimeFormat(!this.props.hideYear, true, this.props.showMilliseconds));
+                        return unixTimeToMoment(value).format(LocaleHolder.getDateTimeFormat(!this.props.hideYear, true, this.props.showMilliseconds, true));
                     }
                     return "";
                 }
@@ -493,6 +499,9 @@ class DataGrid extends React.Component {
         }
         this.updateRowHeight();
     }
+    componentWillUnmount() {
+        window.removeEventListener('mouseup', this.onMouseUp);
+    }
     setColumnState(columnModel) {
         var _a;
         const columnStates = [];
@@ -587,6 +596,7 @@ class DataGrid extends React.Component {
             });
             this.updateRowHeight();
         }
+        window.addEventListener('mouseup', this.onMouseUp);
         setTimeout(() => {
             if (!!this.lastPaginationEvent) {
                 this.onPaginationChanged(this.lastPaginationEvent);
@@ -1254,9 +1264,24 @@ class DataGrid extends React.Component {
                 row.setSelected(true, true);
             }
         }
+        if (event.rowIndex !== null && event.column !== null && this.props.showFillHandle) {
+            const colId = typeof event.column === "string" ? event.column : event.column.getColId();
+            this.setState({ focusedCell: { rowIndex: event.rowIndex, colId: colId } }, () => {
+                var _a;
+                (_a = this.gridApi) === null || _a === void 0 ? void 0 : _a.refreshCells({ force: true });
+            });
+        }
         (_e = (_d = this.props).onCellFocused) === null || _e === void 0 ? void 0 : _e.call(_d, event);
         this.lastCellFocus = event;
     }
+    onCellMouseOver(e) {
+        if (this.state.isDragging) {
+            this.setState({ endCoord: { rowIndex: e.rowIndex, colId: e.column.getColId() } }, () => {
+                var _a;
+                (_a = this.gridApi) === null || _a === void 0 ? void 0 : _a.refreshCells({ force: true });
+            });
+        }
+    }
     onCellMouseDown(e) {
         var _a, _b;
         this.lastNavigationEvent = 1;
@@ -1264,7 +1289,42 @@ class DataGrid extends React.Component {
             this.setFocusedCellDebounced(e.rowIndex, e.column, e.rowPinned !== null ? e.rowPinned : undefined);
         }
         (_b = (_a = this.props).onCellMouseDown) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+        if (this.props.showFillHandle) {
+            const mouseEvent = e.event;
+            const cellElement = mouseEvent.target.closest('.ag-cell');
+            const rect = cellElement === null || cellElement === void 0 ? void 0 : cellElement.getBoundingClientRect();
+            const isHandleClick = rect !== undefined && (rect.right - mouseEvent.clientX < 10) && (rect.bottom - mouseEvent.clientY < 10);
+            if (isHandleClick) {
+                this.setState({
+                    isDragging: true,
+                    startCoord: { rowIndex: e.rowIndex, colId: e.column.getColId() },
+                    endCoord: { rowIndex: e.rowIndex, colId: e.column.getColId() }
+                });
+            }
+        }
     }
+    onMouseUp() {
+        var _a, _b, _c, _d;
+        if (this.state.isDragging) {
+            const columns = (_b = (_a = this.gridApi) === null || _a === void 0 ? void 0 : _a.getAllDisplayedColumns().map((c) => c.getColId())) !== null && _b !== void 0 ? _b : [];
+            if (this.state.startCoord && this.state.endCoord) {
+                const startIndex = columns.findIndex((c) => { var _a; return c === ((_a = this.state.startCoord) === null || _a === void 0 ? void 0 : _a.colId); });
+                const endIndex = columns.findIndex((c) => { var _a; return c === ((_a = this.state.endCoord) === null || _a === void 0 ? void 0 : _a.colId); });
+                if (startIndex >= 0 && endIndex >= 0) {
+                    const actualStart = Math.min(startIndex, endIndex);
+                    const actualEnd = Math.max(startIndex, endIndex);
+                    const actualRowStart = Math.min(this.state.startCoord.rowIndex, this.state.endCoord.rowIndex);
+                    const actualRowEnd = Math.max(this.state.startCoord.rowIndex, this.state.endCoord.rowIndex);
+                    (_d = (_c = this.props).onFillHandleComplete) === null || _d === void 0 ? void 0 : _d.call(_c, actualRowStart, actualRowEnd, columns.slice(actualStart, actualEnd + 1));
+                }
+            }
+            this.setState({ isDragging: false, startCoord: null, endCoord: null }, () => {
+                var _a;
+                (_a = this.gridApi) === null || _a === void 0 ? void 0 : _a.refreshCells({ force: true });
+            });
+        }
+    }
+    ;
     setFocusedCellDebounced(rowIndex, column, rowPinned) {
         var _a;
         (_a = this.gridApi) === null || _a === void 0 ? void 0 : _a.setFocusedCell(rowIndex, column, rowPinned);
@@ -1559,7 +1619,10 @@ class DataGrid extends React.Component {
             }
             return Object.assign(Object.assign({}, rest), { floatingFilter: floatingFilterEnabledForColumn && floatingFilterEnabled, resizable: true, headerComponent: "simpleHeader", headerComponentParams: {
                     onColumnsConfigVisible: this.showColumnsConfig
-                }, hide: (_d = (_c = this.state.columnModel.find((c) => c.colId === columnDef.colId)) === null || _c === void 0 ? void 0 : _c.hide) !== null && _d !== void 0 ? _d : (hide === undefined ? rest.initialHide : hide), cellStyle: this._getCellStyle, cellRendererParams: columnDef.cellStyle ? Object.assign(columnDef.cellRendererParams !== undefined ? columnDef.cellRendererParams : {}, { originalCellStyle: columnDef.cellStyle }) : columnDef.cellRendererParams, editable: editable, cellEditorPopup: !editable ? undefined : cellEditorPopup !== false });
+                }, hide: (_d = (_c = this.state.columnModel.find((c) => c.colId === columnDef.colId)) === null || _c === void 0 ? void 0 : _c.hide) !== null && _d !== void 0 ? _d : (hide === undefined ? rest.initialHide : hide), cellStyle: this._getCellStyle, cellRendererParams: columnDef.cellStyle ? Object.assign(columnDef.cellRendererParams !== undefined ? columnDef.cellRendererParams : {}, { originalCellStyle: columnDef.cellStyle }) : columnDef.cellRendererParams, editable: editable, cellEditorPopup: !editable ? undefined : cellEditorPopup !== false, cellClassRules: {
+                    'cell-has-handle': (p) => { var _a, _b; return ((_a = this.state.focusedCell) === null || _a === void 0 ? void 0 : _a.rowIndex) === p.rowIndex && ((_b = this.state.focusedCell) === null || _b === void 0 ? void 0 : _b.colId) === p.colDef.colId && !this.state.isDragging; },
+                    'cell-drag-selected': (params) => (this.state.startCoord !== null && this.state.endCoord !== null) ? this.isInRange(params.rowIndex, params.colDef.colId) : false,
+                } });
         }) : undefined;
         if (adaptedColumnDefs) {
             setTimeout(() => {
@@ -1569,6 +1632,22 @@ class DataGrid extends React.Component {
         }
         return adaptedColumnDefs;
     }
+    isInRange(rowIndex, colId) {
+        var _a;
+        const { startCoord, endCoord } = this.state;
+        if (startCoord === null || endCoord === null)
+            return false;
+        const allCols = ((_a = this.gridApi.getColumnDefs()) === null || _a === void 0 ? void 0 : _a.map(c => c.colId)) || [];
+        const startColIdx = allCols.indexOf(startCoord.colId);
+        const endColIdx = allCols.indexOf(endCoord.colId);
+        const currentColIdx = allCols.indexOf(colId);
+        const minRow = Math.min(startCoord.rowIndex, endCoord.rowIndex);
+        const maxRow = Math.max(startCoord.rowIndex, endCoord.rowIndex);
+        const minCol = Math.min(startColIdx, endColIdx);
+        const maxCol = Math.max(startColIdx, endColIdx);
+        return rowIndex >= minRow && rowIndex <= maxRow && currentColIdx >= minCol && currentColIdx <= maxCol;
+    }
+    ;
     render() {
         var _a, _b, _c, _d;
         const _e = this.props, { onGridReady, columnDefs, disableColumnDefsPreprocessing, onColumnsChanged, paging, onPaginationChanged, onViewportChanged, selectedIds, search, toolbar, filter, onFilterChanged, onFilterModified, onCellFocused, onSortChanged, components, tableConfigVisible, onTableConfigVisible, noRecordsOverlayRenderer, loadingOverlayRenderer, onRowDataUpdated, rowStyleRules, onChangeRowStyleRules, defaultShowMilliseconds, onShowMilliseconds, defaultHideYear, onShowYear, suppressLoadingOverlay, defaultColDef, headerHeight, rowData, rowDataManualMode, gridRef, quickFilterParser, quickFilterMatcher, rowSelection, contextMenu, settingsMenu, exportMenu, panelStyle, tablePanelStyle, onColumnDefsAdapted, tableOverlayRenderer, onKeyPressed } = _e, passedProperties = __rest(_e, ["onGridReady", "columnDefs", "disableColumnDefsPreprocessing", "onColumnsChanged", "paging", "onPaginationChanged", "onViewportChanged", "selectedIds", "search", "toolbar", "filter", "onFilterChanged", "onFilterModified", "onCellFocused", "onSortChanged", "components", "tableConfigVisible", "onTableConfigVisible", "noRecordsOverlayRenderer", "loadingOverlayRenderer", "onRowDataUpdated", "rowStyleRules", "onChangeRowStyleRules", "defaultShowMilliseconds", "onShowMilliseconds", "defaultHideYear", "onShowYear", "suppressLoadingOverlay", "defaultColDef", "headerHeight", "rowData", "rowDataManualMode", "gridRef", "quickFilterParser", "quickFilterMatcher", "rowSelection", "contextMenu", "settingsMenu", "exportMenu", "panelStyle", "tablePanelStyle", "onColumnDefsAdapted", "tableOverlayRenderer", "onKeyPressed"]);
@@ -1635,7 +1714,7 @@ class DataGrid extends React.Component {
                         React.createElement("div", { className: "ag-theme-balham", style: { width: "100%", height: "100%" }, ref: (wrapingDiv) => {
                                 this.wrappingDiv = wrapingDiv;
                             } },
-                            React.createElement(AgGridReact, Object.assign({ key: key, debug: debugMode, ref: gridRef, paginationPageSize: paginationPageSize, maxConcurrentDatasourceRequests: this.props.rowModelType === "infinite" ? 1 : undefined, onGridReady: this.onGridReady, onPaginationChanged: this.onPaginationChanged, onFilterModified: this.onFilterModified, onFilterChanged: this.onFilterChanged, onSortChanged: this.onSortChanged, defaultColDef: this.getDefaultColDefinition(defaultColDef), columnDefs: adaptedColumnDefs, rowData: !rowDataManualMode ? rowData : undefined }, passedProperties, { onCellFocused: this.onCellFocused, cellSelection: rowSelection === "multiple" || (rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.mode) === "multiRow", rowSelection: rowSelection, suppressPaginationPanel: true, getRowId: getRowId, maintainColumnOrder: true, components: customComponents, columnTypes: this.columnTypes, onColumnVisible: this.onColumnsChanged, onColumnPinned: this.onColumnsChanged, onColumnResized: this.onColumnsChanged, onColumnMoved: this.onColumnsChanged, onCellMouseDown: this.onCellMouseDown, navigateToNextCell: this.navigateToNextCell, onViewportChanged: this.onViewportChanged, onCellContextMenu: this.onCellContextMenu, loadingOverlayComponent: 'loadingOverlay', noRowsOverlayComponent: 'noRecordsOverlay', onRowDataUpdated: this.onRowDataUpdated, context: this.table_context, rowHeight: this.state.rowHeight, getRowStyle: this._getRowStyle, getRowHeight: this._getRowHeight, headerHeight: headerHeight !== undefined ? headerHeight : headerFilterRowHeight, floatingFiltersHeight: headerFilterRowHeight, suppressLoadingOverlay: this.props.loadingOverlayRenderer ? true : this.props.suppressLoadingOverlay, quickFilterParser: this.wildcardQuickFilter.quickFilterParser, quickFilterMatcher: this.wildcardQuickFilter.quickFilterMatcher })),
+                            React.createElement(AgGridReact, Object.assign({ key: key, debug: debugMode, ref: gridRef, paginationPageSize: paginationPageSize, maxConcurrentDatasourceRequests: this.props.rowModelType === "infinite" ? 1 : undefined, onGridReady: this.onGridReady, onPaginationChanged: this.onPaginationChanged, onFilterModified: this.onFilterModified, onFilterChanged: this.onFilterChanged, onSortChanged: this.onSortChanged, defaultColDef: this.getDefaultColDefinition(defaultColDef), columnDefs: adaptedColumnDefs, rowData: !rowDataManualMode ? rowData : undefined }, passedProperties, { onCellFocused: this.onCellFocused, cellSelection: rowSelection === "multiple" || (rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.mode) === "multiRow", rowSelection: rowSelection, suppressPaginationPanel: true, getRowId: getRowId, maintainColumnOrder: true, components: customComponents, columnTypes: this.columnTypes, onColumnVisible: this.onColumnsChanged, onColumnPinned: this.onColumnsChanged, onColumnResized: this.onColumnsChanged, onColumnMoved: this.onColumnsChanged, onCellMouseOver: this.onCellMouseOver, onCellMouseDown: this.onCellMouseDown, navigateToNextCell: this.navigateToNextCell, onViewportChanged: this.onViewportChanged, onCellContextMenu: this.onCellContextMenu, loadingOverlayComponent: 'loadingOverlay', noRowsOverlayComponent: 'noRecordsOverlay', onRowDataUpdated: this.onRowDataUpdated, context: this.table_context, rowHeight: this.state.rowHeight, getRowStyle: this._getRowStyle, getRowHeight: this._getRowHeight, headerHeight: headerHeight !== undefined ? headerHeight : headerFilterRowHeight, floatingFiltersHeight: headerFilterRowHeight, suppressLoadingOverlay: this.props.loadingOverlayRenderer ? true : this.props.suppressLoadingOverlay, quickFilterParser: this.wildcardQuickFilter.quickFilterParser, quickFilterMatcher: this.wildcardQuickFilter.quickFilterMatcher })),
                             this.state.loading && this.props.loadingOverlayRenderer &&
                                 React.createElement("div", { className: "ag-overlay", "aria-hidden": "true", ref: "overlayWrapper" },
                                     React.createElement("div", { className: "ag-overlay-panel" },