ods-component-lib 1.18.259 → 1.18.261

package/dist/index.modern.js

@@ -23,7 +23,7 @@ import { saveAs as saveAs$1 } from 'file-saver';
 import 'devextreme/dist/css/dx.light.css';
 import DataSource from 'devextreme/data/data_source';
 import query from 'devextreme/data/query';
-import { Gantt, ContextMenu, Column as Column$1, Tasks, Sorting as Sorting$1, HeaderFilter as HeaderFilter$1, FilterRow as FilterRow$1, Toolbar as Toolbar$2, Item as Item$2 } from 'devextreme-react/gantt';
+import { Gantt, HeaderFilter as HeaderFilter$1, FilterRow as FilterRow$1, Toolbar as Toolbar$2, Item as Item$2, ContextMenu, Column as Column$1, Tasks, Sorting as Sorting$1 } from 'devextreme-react/gantt';
 import 'jspdf-autotable';
 import { Button as Button$2 } from 'devextreme-react/button';
 
@@ -56753,7 +56753,7 @@ var OdsTimelineTableColumnChooser = function OdsTimelineTableColumnChooser(props
   var initialSelectedColumns = props.items.filter(function (item) {
     return item.visible !== false;
   });
-  var _useState = useState(false),
+  var _useState = useState(props.open),
     open = _useState[0],
     setOpen = _useState[1];
   var _useState2 = useState(props.items),
@@ -56842,62 +56842,66 @@ var OdsTimelineTableColumnChooser = function OdsTimelineTableColumnChooser(props
     })),
     selectAll = _useState4[0],
     setSelectAll = _useState4[1];
-  var content = React.createElement("div", {
-    key: "OdsTimelineTableColumnChooser_content",
-    className: timelineTableStyles.columnChooserPopup
-  }, React.createElement("div", {
-    key: "OdsTimelineTableColumnChooser_header",
-    className: timelineTableStyles.columnChooserHeader
-  }, React.createElement("span", {
-    key: "OdsTimelineTableColumnChooser_title"
-  }, props.title), React.createElement("span", {
-    key: "OdsTimelineTableColumnChooser_closebutton",
-    className: timelineTableStyles.columnChooserCloseButton
-  }, React.createElement(CrossIcon, {
-    style: {
-      cursor: "pointer"
-    },
-    onClick: function onClick() {
-      return setOpen(false);
-    }
-  }))), React.createElement(OdsInput, {
-    key: "OdsTimelineTableColumnChooser_OdsSearch",
-    prefix: React.createElement("span", {
-      className: "dx-icon-search " + timelineTableStyles.searchBoxIcon
-    }),
-    className: timelineTableStyles.columnChooserSearchbox,
-    onChange: function onChange(e) {
-      return filterColumns(e.target.value);
-    }
-  }), React.createElement(OdsCheckbox, {
-    key: "OdsTimelineTableColumnChooser_SelectAll",
-    className: timelineTableStyles.columnChooserCheckbox,
-    checked: selectAll,
-    onChange: function onChange(e) {
-      return selectAllChanged(e.target.checked);
-    }
-  }, props.selectAllText), React.createElement(Divider, {
-    key: "OdsTimelineTableColumnChooser_Divider",
-    className: timelineTableStyles.columnChooserDivider
-  }), columns.map(function (_column, index) {
+  var content = useMemo(function () {
     return React.createElement("div", {
-      key: "OdsTimelineTableColumnChooser_columns_item_" + index
-    }, React.createElement(OdsCheckbox, {
-      key: "OdsTimelineTableColumnChooser_OdsCheckbox_" + index,
+      key: "OdsTimelineTableColumnChooser_content",
+      className: timelineTableStyles.columnChooserPopup
+    }, React.createElement("div", {
+      key: "OdsTimelineTableColumnChooser_header",
+      className: timelineTableStyles.columnChooserHeader
+    }, React.createElement("span", {
+      key: "OdsTimelineTableColumnChooser_title"
+    }, props.title), React.createElement("span", {
+      key: "OdsTimelineTableColumnChooser_closebutton",
+      className: timelineTableStyles.columnChooserCloseButton
+    }, React.createElement(CrossIcon, {
+      style: {
+        cursor: "pointer"
+      },
+      onClick: function onClick() {
+        setOpen(false);
+        props.onVisibilityChanged && props.onVisibilityChanged(false);
+      }
+    }))), React.createElement(OdsInput, {
+      key: "OdsTimelineTableColumnChooser_OdsSearch",
+      prefix: React.createElement("span", {
+        className: "dx-icon-search " + timelineTableStyles.searchBoxIcon
+      }),
+      className: timelineTableStyles.columnChooserSearchbox,
+      onChange: function onChange(e) {
+        return filterColumns(e.target.value);
+      }
+    }), React.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.createElement(Divider, {
+      key: "OdsTimelineTableColumnChooser_Divider",
+      className: timelineTableStyles.columnChooserDivider
+    }), columns.map(function (_column, index) {
+      return React.createElement("div", {
+        key: "OdsTimelineTableColumnChooser_columns_item_" + index
+      }, React.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.createElement(React.Fragment, null, React.createElement(Popover, {
     open: open,
     content: content
   }, React.createElement(Button$2, {
     icon: "columnchooser",
     onClick: function onClick() {
-      return setOpen(true);
+      setOpen(true);
+      props.onVisibilityChanged && props.onVisibilityChanged(true);
     }
   })));
 };
@@ -56910,7 +56914,7 @@ var callAddFont = function callAddFont() {
 jsPDF$1.API.events.push(['addFonts', callAddFont]);
 
 var OdsTimelineTable = forwardRef(function (props, ref) {
-  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 _toolbarSettings$sear, _toolbarSettings$sear5, _toolbarSettings$expo12, _toolbarSettings$expo13, _toolbarSettings$expo14, _toolbarSettings$expo15, _toolbarSettings$expo19, _toolbarSettings$expo20, _toolbarSettings$expo21, _toolbarSettings$colu;
   var customColumns = props.customColumns,
     customTasks = props.customTasks,
     customTaskKey = props.customTaskKey,
@@ -56929,10 +56933,10 @@ var OdsTimelineTable = forwardRef(function (props, ref) {
   var refGantt = useRef(null);
   var refGanttExportable = useRef(null);
   var refDataGridExportable = useRef(null);
-  var _useState = useState(startDateRange != null ? startDateRange : Constants.timelineDefaultStartDate),
+  var _useState = useState(Constants.timelineDefaultStartDate),
     startDate = _useState[0],
     setStartDate = _useState[1];
-  var _useState2 = useState(endDateRange != null ? endDateRange : Constants.timelineDefaultEndDate),
+  var _useState2 = useState(Constants.timelineDefaultEndDate),
     endDate = _useState2[0],
     setEndDate = _useState2[1];
   var _useState3 = useState([]),
@@ -56963,11 +56967,8 @@ var OdsTimelineTable = forwardRef(function (props, ref) {
     })),
     unvisibleColumnNames = _useState9[0];
   var _useState10 = useState(false),
-    exportPdfModalOpen = _useState10[0],
-    setExportPdfModalOpen = _useState10[1];
-  var _useState11 = useState(false),
-    exporting = _useState11[0],
-    setExporting = _useState11[1];
+    columnChooserOpen = _useState10[0],
+    setColumnChooserOpen = _useState10[1];
   var originalSortingMode = sorting.mode === undefined || sorting.mode === "" ? "none" : sorting.mode;
   var sortingMode = sortingProcess == "ServerSideSorting" ? "none" : originalSortingMode;
   var showSortIndexes = sortingProcess == "ServerSideSorting" ? false : sorting.showSortIndexes;
@@ -56978,11 +56979,27 @@ var OdsTimelineTable = forwardRef(function (props, ref) {
   useEffect(function () {
     updateExportableTasks();
   }, [timelineTasks]);
+  useEffect(function () {
+    setStartDate(startDateRange);
+  }, [startDateRange]);
+  useEffect(function () {
+    setEndDate(endDateRange);
+  }, [endDateRange]);
   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(newED).add(1, "months").set("date", 28).toDate();
+    return newED;
+  };
   var actionButtons = useMemo(function () {
     if (actionColumnSettings.actionButtonGroup) {
       if (actionColumnSettings.actionButtonGroup.length > 3) {
@@ -57007,8 +57024,7 @@ var OdsTimelineTable = forwardRef(function (props, ref) {
     setExportableTasks(result);
   };
   var prepareTimelineTasks = function prepareTimelineTasks(tasks, selectedKeys) {
-    var _tasks = mapSelectedKeys(tasks.map(mapCustomTask), customTaskKey, multiSelectionEnabled ? selectedKeys : selectedKeys.length > 0 ? selectedKeys[0] : []);
-    setTimelineTasks(_tasks);
+    setTimelineTasks(mapSelectedKeys(tasks.map(mapCustomTask), customTaskKey, multiSelectionEnabled ? selectedKeys : selectedKeys.length > 0 ? selectedKeys[0] : []));
   };
   var getSelectedRowsData = function getSelectedRowsData() {
     return timelineTasks.filter(function (item) {
@@ -57248,8 +57264,7 @@ var OdsTimelineTable = forwardRef(function (props, ref) {
     }).then(function (doc) {
       return doc.save(getExportFileName());
     })["finally"](function () {
-      setExporting(false);
-      setExportPdfModalOpen(false);
+      return exportableTimelineTable.repaint();
     });
   };
   var getExportFileName = function getExportFileName() {
@@ -57284,41 +57299,6 @@ var OdsTimelineTable = forwardRef(function (props, ref) {
     });
     return newExportedColumns;
   }, [exportableTasks, columnList]);
-  var exportableTimelineTable = React.createElement(React.Fragment, null, React.createElement(Spin, {
-    size: "large",
-    spinning: exporting
-  }, React.createElement("div", {
-    style: {
-      overflowX: "auto",
-      overflowY: "auto",
-      paddingTop: 20
-    }
-  }, React.createElement(Gantt, Object.assign({
-    key: "OdsTimelineTableExportable",
-    width: "100%",
-    height: 500,
-    startDateRange: startDate,
-    endDateRange: endDate,
-    taskContentRender: function taskContentRender(params) {
-      return React.createElement(OdsTimelineTableTaskTemplate, Object.assign({}, params));
-    }
-  }, props, {
-    ref: refGanttExportable,
-    sorting: {
-      mode: "none",
-      showSortIndexes: false
-    }
-  }), React.createElement(ContextMenu, {
-    enabled: false
-  }), exportedColumns.map(function (columnProps, index) {
-    return React.createElement(Column$1, Object.assign({}, columnProps, {
-      key: "TimelineTable_ExportPdfColumn_" + index
-    }));
-  }), React.createElement(Tasks, {
-    dataSource: exportableTasks
-  }), children, React.createElement(Sorting$1, {
-    mode: "none"
-  })))));
   useImperativeHandle(ref, function () {
     return {
       getSelectedRowsData: getSelectedRowsData,
@@ -57330,8 +57310,8 @@ var OdsTimelineTable = forwardRef(function (props, ref) {
     key: "OdsTimelineTable",
     width: "100%",
     height: 500,
-    startDateRange: startDate,
-    endDateRange: endDate,
+    startDateRange: getTimelineStartDate(),
+    endDateRange: getTimelineEndDate(),
     taskContentRender: function taskContentRender(params) {
       return React.createElement(OdsTimelineTableTaskTemplate, Object.assign({}, params));
     }
@@ -57386,8 +57366,7 @@ var OdsTimelineTable = forwardRef(function (props, ref) {
           icon: "exportpdf",
           onClick: function onClick() {
             if (exportableTasks.length > 0) {
-              setExportPdfModalOpen(true);
-              setExporting(true);
+              exportPdf();
             } else {
               var _toolbarSettings$expo16, _toolbarSettings$expo17, _toolbarSettings$expo18;
               OdsNotification({
@@ -57401,7 +57380,19 @@ var OdsTimelineTable = forwardRef(function (props, ref) {
         }, {
           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
+          onClick: function onClick() {
+            if (exportableTasks.length > 0) {
+              exportExcel();
+            } else {
+              var _toolbarSettings$expo22, _toolbarSettings$expo23, _toolbarSettings$expo24;
+              OdsNotification({
+                title: "",
+                content: (_toolbarSettings$expo22 = toolbarSettings === null || toolbarSettings === void 0 ? void 0 : (_toolbarSettings$expo23 = toolbarSettings["export"]) === null || _toolbarSettings$expo23 === void 0 ? void 0 : (_toolbarSettings$expo24 = _toolbarSettings$expo23.messages) === null || _toolbarSettings$expo24 === void 0 ? void 0 : _toolbarSettings$expo24.noRecord) != null ? _toolbarSettings$expo22 : "No record",
+                type: "warning",
+                placement: "bottom"
+              });
+            }
+          }
         }]
       }]
     }
@@ -57412,6 +57403,10 @@ var OdsTimelineTable = 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) {
@@ -57457,7 +57452,8 @@ var OdsTimelineTable = forwardRef(function (props, ref) {
       }, columnProps));
     }
   }), actionColumnSettings.actionColumnEnable != false ? React.createElement(Column$1, Object.assign({
-    key: "OdsTimelineColumn_Actions"
+    key: "OdsTimelineColumn_Actions",
+    width: 100
   }, actionColumnProps, {
     caption: actionColumnSettings.actionButtonGroupCaption,
     cssClass: "actionButtonGroupCell",
@@ -57469,23 +57465,20 @@ var OdsTimelineTable = forwardRef(function (props, ref) {
   }), children, React.createElement(Sorting$1, {
     mode: sortingMode,
     showSortIndexes: showSortIndexes
-  })), React.createElement(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.createElement(DataGrid$1, {
+  })), React.createElement(Gantt, Object.assign({}, props, {
+    startDateRange: getTimelineStartDate(),
+    endDateRange: getTimelineEndDate(),
+    width: 0,
+    height: 0,
+    ref: refGanttExportable,
+    key: "OdsTimelineTable_Export"
+  }), exportedColumns.map(function (columnProps, index) {
+    return React.createElement(Column$1, Object.assign({}, columnProps, {
+      key: "TimelineTable_ExportPdfColumn_" + index
+    }));
+  }), React.createElement(Tasks, {
+    dataSource: exportableTasks
+  }), children), React.createElement(DataGrid$1, {
     key: "DataGrid_Export",
     ref: refDataGridExportable,
     className: "odsTimelineTable-ExportDataGrid",