ods-component-lib 1.18.258 → 1.18.260

package/dist/components/devextreme/OdsTimelineTable/OdsTimelineTable.Types.d.ts

@@ -128,10 +128,15 @@ export interface IOdsTimelineTableToolbarSettings {
         passiveText?: string;
         pdf?: {
             title?: string;
+            loadingText?: string;
             documentFormat?: ExportDocumentType;
         };
         excel?: {
             title?: string;
+            loadingText?: string;
+        };
+        messages?: {
+            noRecord?: string;
         };
     };
     columnChooser?: {
@@ -155,6 +160,8 @@ export interface ITranslationValue {
     translatedValue: string;
 }
 export interface IOdsTimelineTableColumnChooserProps {
+    open: boolean;
+    onVisibilityChanged: (visible: boolean) => void;
     title: string;
     selectAllText: string;
     items: IOdsTimelineTableColumnChooserItemProps[];

package/dist/index.js

@@ -56779,7 +56779,7 @@ var OdsTimelineTableColumnChooser = function OdsTimelineTableColumnChooser(props
   var initialSelectedColumns = props.items.filter(function (item) {
     return item.visible !== false;
   });
-  var _useState = React.useState(false),
+  var _useState = React.useState(props.open),
     open = _useState[0],
     setOpen = _useState[1];
   var _useState2 = React.useState(props.items),
@@ -56868,62 +56868,66 @@ var OdsTimelineTableColumnChooser = function OdsTimelineTableColumnChooser(props
     })),
     selectAll = _useState4[0],
     setSelectAll = _useState4[1];
-  var content = React__default.createElement("div", {
-    key: "OdsTimelineTableColumnChooser_content",
-    className: timelineTableStyles.columnChooserPopup
-  }, React__default.createElement("div", {
-    key: "OdsTimelineTableColumnChooser_header",
-    className: timelineTableStyles.columnChooserHeader
-  }, React__default.createElement("span", {
-    key: "OdsTimelineTableColumnChooser_title"
-  }, props.title), React__default.createElement("span", {
-    key: "OdsTimelineTableColumnChooser_closebutton",
-    className: timelineTableStyles.columnChooserCloseButton
-  }, React__default.createElement(outline.CrossIcon, {
-    style: {
-      cursor: "pointer"
-    },
-    onClick: function onClick() {
-      return setOpen(false);
-    }
-  }))), React__default.createElement(OdsInput, {
-    key: "OdsTimelineTableColumnChooser_OdsSearch",
-    prefix: React__default.createElement("span", {
-      className: "dx-icon-search " + timelineTableStyles.searchBoxIcon
-    }),
-    className: timelineTableStyles.columnChooserSearchbox,
-    onChange: function onChange(e) {
-      return filterColumns(e.target.value);
-    }
-  }), React__default.createElement(OdsCheckbox, {
-    key: "OdsTimelineTableColumnChooser_SelectAll",
-    className: timelineTableStyles.columnChooserCheckbox,
-    checked: selectAll,
-    onChange: function onChange(e) {
-      return selectAllChanged(e.target.checked);
-    }
-  }, props.selectAllText), React__default.createElement(antd.Divider, {
-    key: "OdsTimelineTableColumnChooser_Divider",
-    className: timelineTableStyles.columnChooserDivider
-  }), columns.map(function (_column, index) {
+  var content = React.useMemo(function () {
     return React__default.createElement("div", {
-      key: "OdsTimelineTableColumnChooser_columns_item_" + index
-    }, React__default.createElement(OdsCheckbox, {
-      key: "OdsTimelineTableColumnChooser_OdsCheckbox_" + index,
+      key: "OdsTimelineTableColumnChooser_content",
+      className: timelineTableStyles.columnChooserPopup
+    }, React__default.createElement("div", {
+      key: "OdsTimelineTableColumnChooser_header",
+      className: timelineTableStyles.columnChooserHeader
+    }, React__default.createElement("span", {
+      key: "OdsTimelineTableColumnChooser_title"
+    }, props.title), React__default.createElement("span", {
+      key: "OdsTimelineTableColumnChooser_closebutton",
+      className: timelineTableStyles.columnChooserCloseButton
+    }, React__default.createElement(outline.CrossIcon, {
+      style: {
+        cursor: "pointer"
+      },
+      onClick: function onClick() {
+        setOpen(false);
+        props.onVisibilityChanged && props.onVisibilityChanged(false);
+      }
+    }))), React__default.createElement(OdsInput, {
+      key: "OdsTimelineTableColumnChooser_OdsSearch",
+      prefix: React__default.createElement("span", {
+        className: "dx-icon-search " + timelineTableStyles.searchBoxIcon
+      }),
+      className: timelineTableStyles.columnChooserSearchbox,
+      onChange: function onChange(e) {
+        return filterColumns(e.target.value);
+      }
+    }), React__default.createElement(OdsCheckbox, {
+      key: "OdsTimelineTableColumnChooser_SelectAll",
       className: timelineTableStyles.columnChooserCheckbox,
-      checked: isSelected(_column.columnName),
+      checked: selectAll,
       onChange: function onChange(e) {
-        return selectChanged(e.target.checked, _column);
+        return selectAllChanged(e.target.checked);
       }
-    }, _column.columnCaption));
-  }));
+    }, props.selectAllText), React__default.createElement(antd.Divider, {
+      key: "OdsTimelineTableColumnChooser_Divider",
+      className: timelineTableStyles.columnChooserDivider
+    }), columns.map(function (_column, index) {
+      return React__default.createElement("div", {
+        key: "OdsTimelineTableColumnChooser_columns_item_" + index
+      }, React__default.createElement(OdsCheckbox, {
+        key: "OdsTimelineTableColumnChooser_OdsCheckbox_" + index,
+        className: timelineTableStyles.columnChooserCheckbox,
+        checked: isSelected(_column.columnName),
+        onChange: function onChange(e) {
+          return selectChanged(e.target.checked, _column);
+        }
+      }, _column.columnCaption));
+    }));
+  }, [open, columns]);
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(antd.Popover, {
     open: open,
     content: content
   }, React__default.createElement(button.Button, {
     icon: "columnchooser",
     onClick: function onClick() {
-      return setOpen(true);
+      setOpen(true);
+      props.onVisibilityChanged && props.onVisibilityChanged(true);
     }
   })));
 };
@@ -56936,7 +56940,7 @@ var callAddFont = function callAddFont() {
 jsPDF.jsPDF.API.events.push(['addFonts', callAddFont]);
 
 var OdsTimelineTable = React.forwardRef(function (props, ref) {
-  var _toolbarSettings$sear, _toolbarSettings$sear5, _toolbarSettings$expo12, _toolbarSettings$expo13, _toolbarSettings$expo14, _toolbarSettings$expo15, _toolbarSettings$expo16, _toolbarSettings$expo17, _toolbarSettings$expo18, _toolbarSettings$colu;
+  var _toolbarSettings$sear, _toolbarSettings$sear5, _toolbarSettings$expo12, _toolbarSettings$expo13, _toolbarSettings$expo14, _toolbarSettings$expo15, _toolbarSettings$expo19, _toolbarSettings$expo20, _toolbarSettings$expo21, _toolbarSettings$colu, _props$toolbarSetting5, _props$toolbarSetting6, _props$toolbarSetting7, _props$toolbarSetting8;
   var customColumns = props.customColumns,
     customTasks = props.customTasks,
     customTaskKey = props.customTaskKey,
@@ -56955,10 +56959,10 @@ var OdsTimelineTable = React.forwardRef(function (props, ref) {
   var refGantt = React.useRef(null);
   var refGanttExportable = React.useRef(null);
   var refDataGridExportable = React.useRef(null);
-  var _useState = React.useState(startDateRange != null ? startDateRange : Constants.timelineDefaultStartDate),
+  var _useState = React.useState(Constants.timelineDefaultStartDate),
     startDate = _useState[0],
     setStartDate = _useState[1];
-  var _useState2 = React.useState(endDateRange != null ? endDateRange : Constants.timelineDefaultEndDate),
+  var _useState2 = React.useState(Constants.timelineDefaultEndDate),
     endDate = _useState2[0],
     setEndDate = _useState2[1];
   var _useState3 = React.useState([]),
@@ -56988,6 +56992,15 @@ var OdsTimelineTable = React.forwardRef(function (props, ref) {
       return item.name;
     })),
     unvisibleColumnNames = _useState9[0];
+  var _useState10 = React.useState(false),
+    exportPdfModalOpen = _useState10[0],
+    setExportPdfModalOpen = _useState10[1];
+  var _useState11 = React.useState(false),
+    exporting = _useState11[0],
+    setExporting = _useState11[1];
+  var _useState12 = React.useState(false),
+    columnChooserOpen = _useState12[0],
+    setColumnChooserOpen = _useState12[1];
   var originalSortingMode = sorting.mode === undefined || sorting.mode === "" ? "none" : sorting.mode;
   var sortingMode = sortingProcess == "ServerSideSorting" ? "none" : originalSortingMode;
   var showSortIndexes = sortingProcess == "ServerSideSorting" ? false : sorting.showSortIndexes;
@@ -56998,11 +57011,27 @@ var OdsTimelineTable = React.forwardRef(function (props, ref) {
   React.useEffect(function () {
     updateExportableTasks();
   }, [timelineTasks]);
+  React.useEffect(function () {
+    setStartDate(startDateRange);
+  }, [startDateRange]);
+  React.useEffect(function () {
+    setEndDate(endDateRange);
+  }, [endDateRange]);
   React.useEffect(function () {
     if (sortingChangeEventProps.columnHeaderProps !== null) {
       onSortingChanged && onSortingChanged(sortingChangeEventProps.sortedColumns, sortingChangeEventProps.columnHeaderProps);
     }
   }, [sortingChangeEventProps]);
+  var getTimelineStartDate = function getTimelineStartDate() {
+    var newSD = startDate;
+    newSD.setDate(1);
+    return newSD;
+  };
+  var getTimelineEndDate = function getTimelineEndDate() {
+    var newED = endDate;
+    newED = moment__default(newED).add(1, "months").set("date", 15).toDate();
+    return newED;
+  };
   var actionButtons = React.useMemo(function () {
     if (actionColumnSettings.actionButtonGroup) {
       if (actionColumnSettings.actionButtonGroup.length > 3) {
@@ -57027,7 +57056,8 @@ var OdsTimelineTable = React.forwardRef(function (props, ref) {
     setExportableTasks(result);
   };
   var prepareTimelineTasks = function prepareTimelineTasks(tasks, selectedKeys) {
-    setTimelineTasks(mapSelectedKeys(tasks.map(mapCustomTask), customTaskKey, multiSelectionEnabled ? selectedKeys : selectedKeys.length > 0 ? selectedKeys[0] : []));
+    var _tasks = mapSelectedKeys(tasks.map(mapCustomTask), customTaskKey, multiSelectionEnabled ? selectedKeys : selectedKeys.length > 0 ? selectedKeys[0] : []);
+    setTimelineTasks(_tasks);
   };
   var getSelectedRowsData = function getSelectedRowsData() {
     return timelineTasks.filter(function (item) {
@@ -57267,7 +57297,8 @@ var OdsTimelineTable = React.forwardRef(function (props, ref) {
     }).then(function (doc) {
       return doc.save(getExportFileName());
     })["finally"](function () {
-      return exportableTimelineTable.repaint();
+      setExporting(false);
+      setExportPdfModalOpen(false);
     });
   };
   var getExportFileName = function getExportFileName() {
@@ -57302,6 +57333,41 @@ var OdsTimelineTable = React.forwardRef(function (props, ref) {
     });
     return newExportedColumns;
   }, [exportableTasks, columnList]);
+  var exportableTimelineTable = React__default.createElement(React__default.Fragment, null, React__default.createElement(antd.Spin, {
+    size: "large",
+    spinning: exporting
+  }, React__default.createElement("div", {
+    style: {
+      overflowX: "auto",
+      overflowY: "auto",
+      paddingTop: 20
+    }
+  }, React__default.createElement(gantt.Gantt, Object.assign({
+    key: "OdsTimelineTableExportable",
+    width: "100%",
+    height: 500,
+    startDateRange: getTimelineStartDate(),
+    endDateRange: getTimelineEndDate(),
+    taskContentRender: function taskContentRender(params) {
+      return React__default.createElement(OdsTimelineTableTaskTemplate, Object.assign({}, params));
+    }
+  }, props, {
+    ref: refGanttExportable,
+    sorting: {
+      mode: "none",
+      showSortIndexes: false
+    }
+  }), React__default.createElement(gantt.ContextMenu, {
+    enabled: false
+  }), exportedColumns.map(function (columnProps, index) {
+    return React__default.createElement(gantt.Column, Object.assign({}, columnProps, {
+      key: "TimelineTable_ExportPdfColumn_" + index
+    }));
+  }), React__default.createElement(gantt.Tasks, {
+    dataSource: exportableTasks
+  }), children, React__default.createElement(gantt.Sorting, {
+    mode: "none"
+  })))));
   React.useImperativeHandle(ref, function () {
     return {
       getSelectedRowsData: getSelectedRowsData,
@@ -57313,8 +57379,8 @@ var OdsTimelineTable = React.forwardRef(function (props, ref) {
     key: "OdsTimelineTable",
     width: "100%",
     height: 500,
-    startDateRange: startDate,
-    endDateRange: endDate,
+    startDateRange: getTimelineStartDate(),
+    endDateRange: getTimelineEndDate(),
     taskContentRender: function taskContentRender(params) {
       return React__default.createElement(OdsTimelineTableTaskTemplate, Object.assign({}, params));
     }
@@ -57367,9 +57433,22 @@ var OdsTimelineTable = React.forwardRef(function (props, ref) {
         items: [{
           text: (_toolbarSettings$expo13 = toolbarSettings === null || toolbarSettings === void 0 ? void 0 : (_toolbarSettings$expo14 = toolbarSettings["export"]) === null || _toolbarSettings$expo14 === void 0 ? void 0 : (_toolbarSettings$expo15 = _toolbarSettings$expo14.pdf) === null || _toolbarSettings$expo15 === void 0 ? void 0 : _toolbarSettings$expo15.title) != null ? _toolbarSettings$expo13 : "Export to Pdf",
           icon: "exportpdf",
-          onClick: exportPdf
+          onClick: function onClick() {
+            if (exportableTasks.length > 0) {
+              setExportPdfModalOpen(true);
+              setExporting(true);
+            } else {
+              var _toolbarSettings$expo16, _toolbarSettings$expo17, _toolbarSettings$expo18;
+              OdsNotification({
+                title: "",
+                content: (_toolbarSettings$expo16 = toolbarSettings === null || toolbarSettings === void 0 ? void 0 : (_toolbarSettings$expo17 = toolbarSettings["export"]) === null || _toolbarSettings$expo17 === void 0 ? void 0 : (_toolbarSettings$expo18 = _toolbarSettings$expo17.messages) === null || _toolbarSettings$expo18 === void 0 ? void 0 : _toolbarSettings$expo18.noRecord) != null ? _toolbarSettings$expo16 : "No record",
+                type: "warning",
+                placement: "bottom"
+              });
+            }
+          }
         }, {
-          text: (_toolbarSettings$expo16 = toolbarSettings === null || toolbarSettings === void 0 ? void 0 : (_toolbarSettings$expo17 = toolbarSettings["export"]) === null || _toolbarSettings$expo17 === void 0 ? void 0 : (_toolbarSettings$expo18 = _toolbarSettings$expo17.excel) === null || _toolbarSettings$expo18 === void 0 ? void 0 : _toolbarSettings$expo18.title) != null ? _toolbarSettings$expo16 : "Export to Excel",
+          text: (_toolbarSettings$expo19 = toolbarSettings === null || toolbarSettings === void 0 ? void 0 : (_toolbarSettings$expo20 = toolbarSettings["export"]) === null || _toolbarSettings$expo20 === void 0 ? void 0 : (_toolbarSettings$expo21 = _toolbarSettings$expo20.excel) === null || _toolbarSettings$expo21 === void 0 ? void 0 : _toolbarSettings$expo21.title) != null ? _toolbarSettings$expo19 : "Export to Excel",
           icon: "exportxlsx",
           onClick: exportExcel
         }]
@@ -57382,6 +57461,10 @@ var OdsTimelineTable = React.forwardRef(function (props, ref) {
     component: function component(props) {
       var _toolbarSettings$colu2, _toolbarSettings$colu3, _toolbarSettings$colu4, _toolbarSettings$colu5;
       return OdsTimelineTableColumnChooser(_extends({}, props, {
+        open: columnChooserOpen,
+        onVisibilityChanged: function onVisibilityChanged(visible) {
+          return setColumnChooserOpen(visible);
+        },
         title: (_toolbarSettings$colu2 = toolbarSettings === null || toolbarSettings === void 0 ? void 0 : (_toolbarSettings$colu3 = toolbarSettings.columnChooser) === null || _toolbarSettings$colu3 === void 0 ? void 0 : _toolbarSettings$colu3.title) != null ? _toolbarSettings$colu2 : "Column Chooser",
         selectAllText: (_toolbarSettings$colu4 = toolbarSettings === null || toolbarSettings === void 0 ? void 0 : (_toolbarSettings$colu5 = toolbarSettings.columnChooser) === null || _toolbarSettings$colu5 === void 0 ? void 0 : _toolbarSettings$colu5.selectAllText) != null ? _toolbarSettings$colu4 : "Select All",
         items: columnList.filter(function (item) {
@@ -57439,23 +57522,23 @@ var OdsTimelineTable = React.forwardRef(function (props, ref) {
   }), children, React__default.createElement(gantt.Sorting, {
     mode: sortingMode,
     showSortIndexes: showSortIndexes
-  })), React__default.createElement(gantt.Gantt, Object.assign({}, props, {
-    startDateRange: startDate,
-    endDateRange: endDate,
-    taskContentRender: function taskContentRender(params) {
-      return React__default.createElement(OdsTimelineTableTaskTemplate, Object.assign({}, params));
-    },
-    width: 0,
-    height: 0,
-    ref: refGanttExportable,
-    key: "OdsTimelineTable_Export"
-  }), exportedColumns.map(function (columnProps, index) {
-    return React__default.createElement(gantt.Column, Object.assign({}, columnProps, {
-      key: "TimelineTable_ExportPdfColumn_" + index
-    }));
-  }), React__default.createElement(gantt.Tasks, {
-    dataSource: exportableTasks
-  }), children), React__default.createElement(DataGrid__default, {
+  })), React__default.createElement(antd.Modal, {
+    title: (_props$toolbarSetting5 = (_props$toolbarSetting6 = props.toolbarSettings) === null || _props$toolbarSetting6 === void 0 ? void 0 : (_props$toolbarSetting7 = _props$toolbarSetting6["export"]) === null || _props$toolbarSetting7 === void 0 ? void 0 : (_props$toolbarSetting8 = _props$toolbarSetting7.pdf) === null || _props$toolbarSetting8 === void 0 ? void 0 : _props$toolbarSetting8.loadingText) != null ? _props$toolbarSetting5 : "Exporting to Pdf",
+    width: 1200,
+    open: exportPdfModalOpen,
+    closable: false,
+    footer: "",
+    afterOpenChange: function afterOpenChange(open) {
+      if (open) {
+        var _exportableTimelineTable = refGanttExportable.current.instance;
+        _exportableTimelineTable.refresh().then(function () {
+          setTimeout(function () {
+            return exportPdf();
+          }, 2000);
+        });
+      }
+    }
+  }, exportableTimelineTable), React__default.createElement(DataGrid__default, {
     key: "DataGrid_Export",
     ref: refDataGridExportable,
     className: "odsTimelineTable-ExportDataGrid",