d2coreui 21.0.15 → 21.0.17

package/components/grid/dataGrid.js

@@ -22,7 +22,6 @@ import SimpleHeader from "d2coreui/components/grid/header/simpleHeader";
 import DataGridEditor from "d2coreui/components/grid/config/dataGridEditor";
 import i18n from "d2core/i18n/i18n";
 import AutoCompleteInput from "d2coreui/components/input/autoCompleteInput";
-import TablePagination from "d2coreui/components/grid/panel/tablePagination";
 import isEqual from "lodash/isEqual";
 import ContextMenu from "d2coreui/components/grid/export/contextMenu";
 import LoadingOverlay from "d2coreui/components/grid/panel/loadingOverlay";
@@ -53,8 +52,9 @@ import CustomEnumCellEditor from "d2coreui/components/grid/cell/customEnumCellEd
 import HexaValueCellEditor from "d2coreui/components/grid/cell/hexaValueCellEditor";
 import HexaOctetStringCellEditor from "d2coreui/components/grid/cell/hexaOctetStringCellEditor";
 import ReactDOM from "react-dom";
-import { D2000UnixTimeNullValue, unixTimeToMoment } from "d2core/types/unixTime";
+import { D2000UnixTimeNullValue, unixTimeToMoment } from "d2core/types/unixTimeUtils";
 import { compileExpression } from "filtrex";
+import DataGridPagination from "./panel/dataGridPagination";
 const gridFrameworkComponents = {
     customColumnFilter: CustomColumnFilter,
     textColumnFilter: TextColumnFilter,
@@ -144,7 +144,7 @@ export default class DataGrid extends React.Component {
             "localizedArrayColumn": {
                 cellRenderer: (params) => {
                     const value = DataGrid.getCellValue(params);
-                    if (value) {
+                    if (value !== undefined) {
                         return value.map((s) => i18n(s)).join(",");
                     }
                     else {
@@ -156,14 +156,14 @@ export default class DataGrid extends React.Component {
                 },
                 filterValueGetter: function (params) {
                     const value = DataGrid.getCellValue(params);
-                    if (value) {
+                    if (value !== undefined) {
                         return value.map((s) => i18n(s)).join(",");
                     }
                     return null;
                 },
                 getQuickFilterText: function (params) {
                     const value = DataGrid.getCellValue(params);
-                    if (value) {
+                    if (value !== undefined) {
                         return value.map((s) => i18n(s)).join(",");
                     }
                     return "";
@@ -172,7 +172,7 @@ export default class DataGrid extends React.Component {
             "numberColumn": {
                 cellRenderer: (params) => {
                     const value = DataGrid.getCellValue(params);
-                    if (value || value === 0) {
+                    if (value !== undefined) {
                         return LocaleHolder.formatNumber(value);
                     }
                     else {
@@ -184,7 +184,7 @@ export default class DataGrid extends React.Component {
                 },
                 filterValueGetter: function (params) {
                     const value = DataGrid.getCellValue(params);
-                    if (value || value === 0) {
+                    if (value) {
                         return LocaleHolder.formatNumber(value);
                     }
                     else {
@@ -193,7 +193,7 @@ export default class DataGrid extends React.Component {
                 },
                 getQuickFilterText: function (params) {
                     const value = DataGrid.getCellValue(params);
-                    if (value || value === 0) {
+                    if (value !== undefined) {
                         return LocaleHolder.formatNumber(value);
                     }
                     else {
@@ -204,7 +204,7 @@ export default class DataGrid extends React.Component {
             "dateColumn": {
                 cellRenderer: (params) => {
                     const value = DataGrid.getCellValue(params);
-                    if (value) {
+                    if (value !== undefined) {
                         if (value === D2000UnixTimeNullValue) {
                             return "---";
                         }
@@ -218,7 +218,7 @@ export default class DataGrid extends React.Component {
                 },
                 valueFormatter: (params) => {
                     const value = DataGrid.getCellValue(params);
-                    if (value) {
+                    if (value !== undefined) {
                         return unixTimeToMoment(value).format(LocaleHolder.getDateFormat(!this.props.hideYear));
                     }
                     return "---";
@@ -228,14 +228,14 @@ export default class DataGrid extends React.Component {
                 },
                 filterValueGetter: (params) => {
                     const value = DataGrid.getCellValue(params);
-                    if (value) {
+                    if (value !== undefined) {
                         return unixTimeToMoment(value).format(LocaleHolder.getDateFormat(!this.props.hideYear));
                     }
                     return null;
                 },
                 getQuickFilterText: (params) => {
                     const value = DataGrid.getCellValue(params);
-                    if (value) {
+                    if (value !== undefined) {
                         return unixTimeToMoment(value).format(LocaleHolder.getDateFormat(!this.props.hideYear));
                     }
                     return "";
@@ -244,9 +244,9 @@ export default class DataGrid extends React.Component {
             "dateTimeColumn": {
                 cellRenderer: (params) => {
                     const value = DataGrid.getCellValue(params);
-                    if (value) {
+                    if (value !== undefined) {
                         if (value === D2000UnixTimeNullValue) {
-                            return "---";
+                            return "Null Time";
                         }
                         let tooltipValue;
                         tooltipValue = unixTimeToMoment(value).format(LocaleHolder.getDateTimeFormat(true, true, true));
@@ -258,7 +258,7 @@ export default class DataGrid extends React.Component {
                 },
                 valueFormatter: (params) => {
                     const value = DataGrid.getCellValue(params);
-                    if (value) {
+                    if (value !== undefined) {
                         return unixTimeToMoment(value).format(LocaleHolder.getDateTimeFormat(!this.props.hideYear, true, this.props.showMilliseconds));
                     }
                     return "---";
@@ -268,14 +268,14 @@ export default class DataGrid extends React.Component {
                 },
                 filterValueGetter: (params) => {
                     const value = DataGrid.getCellValue(params);
-                    if (value) {
+                    if (value !== undefined) {
                         return unixTimeToMoment(value).format(LocaleHolder.getDateTimeFormat(!this.props.hideYear, true, this.props.showMilliseconds));
                     }
                     return null;
                 },
                 getQuickFilterText: (params) => {
                     const value = DataGrid.getCellValue(params);
-                    if (value) {
+                    if (value !== undefined) {
                         return unixTimeToMoment(value).format(LocaleHolder.getDateTimeFormat(!this.props.hideYear, true, this.props.showMilliseconds));
                     }
                     return "";
@@ -284,7 +284,7 @@ export default class DataGrid extends React.Component {
             "fromNowDateTimeColumn": {
                 cellRenderer: (params) => {
                     const value = DataGrid.getCellValue(params);
-                    if (value) {
+                    if (value !== undefined) {
                         let tooltipValue;
                         tooltipValue = unixTimeToMoment(value).format(LocaleHolder.getDateTimeFormat(true, true, true));
                         return `<span title="${tooltipValue}">${unixTimeToMoment(value).fromNow()}</span>`;
@@ -295,7 +295,7 @@ export default class DataGrid extends React.Component {
                 },
                 valueFormatter: (params) => {
                     const value = DataGrid.getCellValue(params);
-                    if (value) {
+                    if (value !== undefined) {
                         return unixTimeToMoment(value).format(LocaleHolder.getDateTimeFormat(!this.props.hideYear, true, this.props.showMilliseconds));
                     }
                     return "---";
@@ -305,14 +305,14 @@ export default class DataGrid extends React.Component {
                 },
                 filterValueGetter: (params) => {
                     const value = DataGrid.getCellValue(params);
-                    if (value) {
+                    if (value !== undefined) {
                         return unixTimeToMoment(value).format(LocaleHolder.getDateTimeFormat(!this.props.hideYear, true, this.props.showMilliseconds));
                     }
                     return null;
                 },
                 getQuickFilterText: (params) => {
                     const value = DataGrid.getCellValue(params);
-                    if (value) {
+                    if (value !== undefined) {
                         return unixTimeToMoment(value).format(LocaleHolder.getDateTimeFormat(!this.props.hideYear, true, this.props.showMilliseconds));
                     }
                     return "";
@@ -321,9 +321,8 @@ export default class DataGrid extends React.Component {
             "escapedValueColumn": {
                 cellRenderer: (params) => {
                     const value = DataGrid.getCellValue(params);
-                    if (value) {
-                        const text = typeof value === "string" ? escape(value.replace(/[\r\n]+/g, ' ')) : value;
-                        return `<span style="white-space: pre" title="${text}">${text}</span>`;
+                    if (value !== undefined) {
+                        return `<span style="white-space: pre" title="${escape(value)}">${typeof value === "string" ? escape(value.replace(/[\r\n]+/g, ' ')) : value}</span>`;
                     }
                     else {
                         return "";
@@ -331,7 +330,7 @@ export default class DataGrid extends React.Component {
                 },
                 valueFormatter: (params) => {
                     const value = DataGrid.getCellValue(params);
-                    if (value) {
+                    if (value !== undefined) {
                         return typeof value === "string" ? value.replace(/[\r\n]+/g, ' ') : value;
                     }
                     else {
@@ -715,20 +714,23 @@ export default class DataGrid extends React.Component {
                 }, 400);
             }
             if (this.props.autofocus) {
-                setTimeout(() => {
-                    var _a, _b, _c, _d;
-                    if (!this.isActive()) {
-                        return;
-                    }
-                    const columnModel = (_a = this.gridColumnApi) === null || _a === void 0 ? void 0 : _a.getColumnState();
-                    let columnIdToFocus = ((_b = columnModel === null || columnModel === void 0 ? void 0 : columnModel[0]) === null || _b === void 0 ? void 0 : _b.colId) || "name";
-                    const selectedNodes = (_c = this.gridApi) === null || _c === void 0 ? void 0 : _c.getSelectedNodes();
-                    const selectedRowIndex = (selectedNodes && selectedNodes.length > 0 && selectedNodes[selectedNodes.length - 1].rowIndex) || 0;
-                    (_d = this.gridApi) === null || _d === void 0 ? void 0 : _d.setFocusedCell(selectedRowIndex, columnIdToFocus);
-                }, 200);
+                this.focus();
             }
         });
     }
+    focus() {
+        setTimeout(() => {
+            var _a, _b, _c, _d;
+            if (!this.isActive()) {
+                return;
+            }
+            const columnModel = (_a = this.gridColumnApi) === null || _a === void 0 ? void 0 : _a.getColumnState();
+            let columnIdToFocus = ((_b = columnModel === null || columnModel === void 0 ? void 0 : columnModel[0]) === null || _b === void 0 ? void 0 : _b.colId) || "name";
+            const selectedNodes = (_c = this.gridApi) === null || _c === void 0 ? void 0 : _c.getSelectedNodes();
+            const selectedRowIndex = (selectedNodes && selectedNodes.length > 0 && selectedNodes[selectedNodes.length - 1].rowIndex) || 0;
+            (_d = this.gridApi) === null || _d === void 0 ? void 0 : _d.setFocusedCell(selectedRowIndex, columnIdToFocus);
+        }, 200);
+    }
     isActive() {
         return !!this.gridApi && !this.gridApi.destroyCalled;
     }
@@ -1023,7 +1025,7 @@ export default class DataGrid extends React.Component {
                     if (focusedCell) {
                         const displayedRowAtIndex2 = this.gridApi.getDisplayedRowAtIndex(focusedCell.rowIndex);
                         if (displayedRowAtIndex2) {
-                            ClipboardUtils.copyToClipboard(this.getValue(focusedCell.column, displayedRowAtIndex2));
+                            ClipboardUtils.copyToClipboard(this.getValue(focusedCell.column, displayedRowAtIndex2, true));
                         }
                         this.gridApi.setFocusedCell(focusedCell.rowIndex, focusedCell.column.getId());
                     }
@@ -1036,11 +1038,11 @@ export default class DataGrid extends React.Component {
         (_l = (_k = this.props).onKeyPressed) === null || _l === void 0 ? void 0 : _l.call(_k, params.event);
         return false;
     }
-    getValue(column, row) {
+    getValue(column, row, doNotReplaceNewline) {
         var _a;
         let formattedValue = (_a = this.gridApi) === null || _a === void 0 ? void 0 : _a.getValue(column, row);
-        if (formattedValue && typeof formattedValue === "string" && formattedValue.indexOf(EXPORT_SEPARATOR) > 0) {
-            formattedValue = formattedValue.substring(0, formattedValue.indexOf(EXPORT_SEPARATOR));
+        if (formattedValue && typeof formattedValue === "string" && formattedValue.indexOf(EXPORT_SEPARATOR) > 0 && !doNotReplaceNewline) {
+            formattedValue = formattedValue.replace(/[\n\r]+/, ' ');
         }
         const valueFormatter = column.getColDef().valueFormatter;
         if (valueFormatter) {
@@ -1115,7 +1117,7 @@ export default class DataGrid extends React.Component {
                 rowCount = virtualRowCount ? virtualRowCount : 0;
             }
         }
-        progressPopup.setRecordCount(rowCount);
+        progressPopup === null || progressPopup === void 0 ? void 0 : progressPopup.setRecordCount(rowCount);
         let percentStep = Math.floor(rowCount / 100);
         if (percentStep < 100) {
             percentStep = 100;
@@ -1129,7 +1131,7 @@ export default class DataGrid extends React.Component {
                 });
                 tableContent.push(record);
                 if (index % percentStep === 0) {
-                    progressPopup.update(Math.floor(index / rowCount * 100) - 1);
+                    progressPopup === null || progressPopup === void 0 ? void 0 : progressPopup.update(Math.floor(index / rowCount * 100) - 1);
                     await TimeUtils.sleep(100);
                 }
             }
@@ -1155,12 +1157,12 @@ export default class DataGrid extends React.Component {
                 } while (record.filter((cell) => !!cell).length === 0);
                 tableContent.push(record);
                 if (index % percentStep === 0) {
-                    progressPopup.update(Math.floor(index / rowCount * 100) - 1);
+                    progressPopup === null || progressPopup === void 0 ? void 0 : progressPopup.update(Math.floor(index / rowCount * 100) - 1);
                     await TimeUtils.sleep(100);
                 }
             }
         }
-        progressPopup.update(99);
+        progressPopup === null || progressPopup === void 0 ? void 0 : progressPopup.update(99);
         await TimeUtils.sleep(300);
         return tableContent;
     }
@@ -1334,19 +1336,14 @@ export default class DataGrid extends React.Component {
         return customFrameworkComponents;
     }
     renderNavigationPanel() {
-        var _a;
+        var _a, _b;
         return (React.createElement(React.Fragment, null,
             this.props.toolbar && this.props.toolbar.renderToolbar ? this.props.toolbar.renderToolbar(this.renderToolBarWithSearch()) : this.renderToolBarWithSearch(),
             this.props.paging.pageSize >= 0 &&
-                React.createElement(TablePagination, { disabled: this.state.loading, current: this.state.pageIndex ? this.state.pageIndex + 1 : 1, pageSize: this.state.pageSize ? this.state.pageSize : 20, total: this.state.recordsCount, size: "default", showLessItems: true, showTotal: (total, range) => `${range[0]}-${range[1]} ${i18n('of')} ${total}`, style: {
-                        flex: "0 1 auto",
-                        textAlign: "right",
-                        whiteSpace: "nowrap",
-                        marginLeft: "24px"
-                    }, onChange: (selectedPage, _) => {
-                        this.onGoToPage(selectedPage - 1);
+                React.createElement(DataGridPagination, { disabled: this.state.loading, current: this.state.pageIndex ? this.state.pageIndex + 1 : 1, pageSize: this.state.pageSize ? this.state.pageSize : 20, total: (_a = this.state.recordsCount) !== null && _a !== void 0 ? _a : 1, onGoToPage: page => {
+                        this.onGoToPage(page - 1);
                     } }),
-            this.props.paging.pageSize < 0 && this.state.recordsCount && !((_a = this.props.toolbar) === null || _a === void 0 ? void 0 : _a.hideRecordCount) ?
+            this.props.paging.pageSize < 0 && this.state.recordsCount && !((_b = this.props.toolbar) === null || _b === void 0 ? void 0 : _b.hideRecordCount) ?
                 React.createElement("span", { className: "ant-pagination-total-text", style: {
                         flex: "0 1 auto",
                         textAlign: "right",
@@ -1411,7 +1408,7 @@ export default class DataGrid extends React.Component {
     }
     renderContextMenu() {
         var _a, _b;
-        return React.createElement(ContextMenu, { onlySelectedNodes: true, showMilliseconds: !!this.props.showMilliseconds, showYear: !this.props.hideYear, renderer: (_a = this.props.contextMenu) === null || _a === void 0 ? void 0 : _a.renderer, onClick: (_b = this.props.contextMenu) === null || _b === void 0 ? void 0 : _b.onClick, getExportContent: this.getExportContent });
+        return React.createElement(ContextMenu, { onlySelectedNodes: true, showMilliseconds: !!this.props.showMilliseconds, showYear: !this.props.hideYear, renderer: (_a = this.props.contextMenu) === null || _a === void 0 ? void 0 : _a.renderer, onClick: (_b = this.props.contextMenu) === null || _b === void 0 ? void 0 : _b.onClick, getExportContent: this.getExportContent, hideNotificationOnClipboardCopy: true });
     }
     getAdaptedColumnDefs(columnDefs, floatingFilterEnabled, disableColumnDefsPreprocessing) {
         if (columnDefs.length === 0) {