ods-component-lib 1.18.236 → 1.18.237

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

@@ -1,5 +1,7 @@
 import React from "react";
+import { IOdsTimelineTableProps } from "./OdsTimelineTable.Types";
 export declare const checkboxCellComponent: (props: any) => React.JSX.Element;
 export declare const statusCellComponent: (props: any) => React.JSX.Element;
 export declare const mapCustomTask: (item: any) => any;
-export declare const mapSelectedKeys: (datasource: any[], key?: string, selectedKeys?: number[] | string[]) => any[];
+export declare const mapSelectedKeys: (datasource: any[], key?: string, selectedKeys?: string[]) => any[];
+export declare const getExportableTimelineTable: (props: IOdsTimelineTableProps, ref: any) => React.JSX.Element;

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

@@ -61,6 +61,10 @@ export interface IOdsTimelineTableProps extends React.PropsWithChildren<IGanttOp
      * ClientSideSorting means Gantt's default sorting, but sorting have to be managed programmacitally if ServerSideSorting is chosen
      */
     sortingProcess?: SortingProcessType;
+    /**
+     * Set translations for showing in cells
+     */
+    dataTranslations?: ITranslationValue[];
     /**
      * This is a selection event that fired when selection is changed.
      */
@@ -124,3 +128,7 @@ export interface IOdsTimelineTableSearchBox extends IItemProps {
     placeholder?: string;
     onSearch?(searchValue?: string): void;
 }
+export interface ITranslationValue {
+    originalValue: any;
+    translatedValue: string;
+}

package/dist/index.js

@@ -46,7 +46,8 @@ var devextremeReact = require('devextreme-react');
 var antdStyle = require('antd-style');
 var FileSaver = require('file-saver');
 require('devextreme/dist/css/dx.light.css');
-var gantt = require('devextreme-react/gantt');
+var Gantt = require('devextreme-react/gantt');
+var Gantt__default = _interopDefault(Gantt);
 require('jspdf-autotable');
 
 function _toPrimitive(t, r) {
@@ -38520,6 +38521,40 @@ var Constants = {
   timelineDefaultEndDate: new Date(currentYear + 1, 0, 1)
 };
 
+var _templateObject$B, _templateObject2$9, _templateObject3$6, _templateObject4$5, _templateObject5$4;
+var useStyles$b = antdStyle.createStyles(function (_ref, props) {
+  var _props$taskWidth, _props$progressPerc, _props$progressColor;
+  var css = _ref.css;
+  var _taskWidth = (_props$taskWidth = props === null || props === void 0 ? void 0 : props.taskWidth) != null ? _props$taskWidth : 0;
+  var _progressPerc = (_props$progressPerc = props === null || props === void 0 ? void 0 : props.progressPerc) != null ? _props$progressPerc : 100;
+  var _progressColor = (_props$progressColor = props === null || props === void 0 ? void 0 : props.progressColor) != null ? _props$progressColor : "unset";
+  return {
+    taskBar: css(_templateObject$B || (_templateObject$B = _taggedTemplateLiteralLoose(["\n        min-height: 22px;\n        display: block;\n        overflow: hidden;\n        width: ", "px;\n        border: 1px solid #f0f0f0;\n        border-radius: 5px;\n        background-color: #f0f0f0;\n      "])), _taskWidth != null ? _taskWidth : 0),
+    taskProgress: css(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteralLoose(["\n        height: 100%;\n        position: absolute;\n        left: 0;\n        bottom: 0;\n        width: ", "%;\n        border: 1px solid ", ";\n        border-radius: 5px;\n        background-color: ", ";\n      "])), _progressPerc, _progressColor, _progressColor),
+    taskBarTitle: css(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteralLoose(["\n        z-index: 1;\n        padding-left: 4px;\n        position: absolute;\n      "]))),
+    searchBoxIcon: css(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteralLoose(["\n        color: #999;\n        font-size: 17px;\n        line-height: 18px;\n      "]))),
+    searchBox: css(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteralLoose(["\n        padding-left: 5px;\n      "])))
+  };
+});
+
+var OdsTimelineTableTaskTemplate = function OdsTimelineTableTaskTemplate(_ref) {
+  var taskData = _ref.taskData,
+    taskSize = _ref.taskSize;
+  var _useStyles = useStyles$b({
+      progressColor: taskData.color,
+      progressPerc: taskData.progress,
+      taskWidth: taskSize.width
+    }),
+    timelineTableStyles = _useStyles.styles;
+  return React__default.createElement("div", {
+    className: timelineTableStyles.taskBar
+  }, React__default.createElement("span", {
+    className: timelineTableStyles.taskBarTitle
+  }, taskData.title), React__default.createElement("div", {
+    className: timelineTableStyles.taskProgress
+  }));
+};
+
 var checkboxCellComponent = function checkboxCellComponent(props) {
   var isChecked = props.data.value;
   var onChange = function onChange(e) {
@@ -38573,17 +38608,65 @@ var mapCustomTask = function mapCustomTask(item) {
 var mapSelectedKeys = function mapSelectedKeys(datasource, key, selectedKeys) {
   if (key && key != "" && selectedKeys && selectedKeys.length > 0) {
     return datasource.map(function (x) {
-      if (selectedKeys.some(function (y) {
+      x.isSelected = selectedKeys.some(function (y) {
         return y == x[key];
-      })) {
-        x.isSelected = true;
-      }
+      });
       return x;
     });
   } else {
     return datasource;
   }
 };
+var getTranslatedValue = function getTranslatedValue(value, translations) {
+  var _translations$find$tr, _translations$find;
+  return (_translations$find$tr = (_translations$find = translations.find(function (item) {
+    return item.originalValue == value;
+  })) === null || _translations$find === void 0 ? void 0 : _translations$find.translatedValue) != null ? _translations$find$tr : value;
+};
+var getExportableTimelineTable = function getExportableTimelineTable(props, ref) {
+  var _props$customColumns;
+  return React__default.createElement(Gantt__default, Object.assign({
+    width: 0,
+    height: 0,
+    startDateRange: props.startDateRange,
+    endDateRange: props.endDateRange,
+    ref: ref,
+    taskContentRender: function taskContentRender(params) {
+      return React__default.createElement(OdsTimelineTableTaskTemplate, Object.assign({}, params));
+    }
+  }, props), (_props$customColumns = props.customColumns) === null || _props$customColumns === void 0 ? void 0 : _props$customColumns.filter(function (col) {
+    return col.allowExporting != false;
+  }).map(function (columnProps) {
+    if (columnProps.isStatusColumn) {
+      return React__default.createElement(Gantt.Column, Object.assign({
+        cssClass: "cellCenteredVertically"
+      }, columnProps, {
+        cellRender: function cellRender(_ref) {
+          var value = _ref.value;
+          return getTranslatedValue(value, props.dataTranslations);
+        }
+      }));
+    } else if (columnProps.isCheckboxColumn) {
+      return React__default.createElement(Gantt.Column, Object.assign({
+        cssClass: "cellCenteredVertically"
+      }, columnProps, {
+        cellRender: function cellRender(_ref2) {
+          var value = _ref2.value;
+          return getTranslatedValue(value, props.dataTranslations);
+        }
+      }));
+    } else {
+      return React__default.createElement(Gantt.Column, Object.assign({}, columnProps, {
+        cellRender: function cellRender(_ref3) {
+          var value = _ref3.value;
+          return getTranslatedValue(value, props.dataTranslations);
+        }
+      }));
+    }
+  }), React__default.createElement(Gantt.Tasks, {
+    dataSource: props.customTasks
+  }), props.children);
+};
 
 var OdsTimelineTableDateFilter = function OdsTimelineTableDateFilter(props) {
   var defaultStartDate = props.defaultStartDate,
@@ -38661,6 +38744,7 @@ var OdsTimelineSelectionColumn = function OdsTimelineSelectionColumn(selectionEv
     minWidth: 50,
     width: 50,
     dataField: "isSelected",
+    allowExporting: false,
     cellComponent: function cellComponent(props) {
       var onChange = function onChange(e) {
         selectionEvent && selectionEvent({
@@ -38681,40 +38765,6 @@ var OdsTimelineSelectionColumn = function OdsTimelineSelectionColumn(selectionEv
   return selectionColumn;
 };
 
-var _templateObject$B, _templateObject2$9, _templateObject3$6, _templateObject4$5, _templateObject5$4;
-var useStyles$b = antdStyle.createStyles(function (_ref, props) {
-  var _props$taskWidth, _props$progressPerc, _props$progressColor;
-  var css = _ref.css;
-  var _taskWidth = (_props$taskWidth = props === null || props === void 0 ? void 0 : props.taskWidth) != null ? _props$taskWidth : 0;
-  var _progressPerc = (_props$progressPerc = props === null || props === void 0 ? void 0 : props.progressPerc) != null ? _props$progressPerc : 100;
-  var _progressColor = (_props$progressColor = props === null || props === void 0 ? void 0 : props.progressColor) != null ? _props$progressColor : "unset";
-  return {
-    taskBar: css(_templateObject$B || (_templateObject$B = _taggedTemplateLiteralLoose(["\n        min-height: 22px;\n        display: block;\n        overflow: hidden;\n        width: ", "px;\n        border: 1px solid #f0f0f0;\n        border-radius: 5px;\n        background-color: #f0f0f0;\n      "])), _taskWidth != null ? _taskWidth : 0),
-    taskProgress: css(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteralLoose(["\n        height: 100%;\n        position: absolute;\n        left: 0;\n        bottom: 0;\n        width: ", "%;\n        border: 1px solid ", ";\n        border-radius: 5px;\n        background-color: ", ";\n      "])), _progressPerc, _progressColor, _progressColor),
-    taskBarTitle: css(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteralLoose(["\n        z-index: 1;\n        padding-left: 4px;\n        position: absolute;\n      "]))),
-    searchBoxIcon: css(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteralLoose(["\n        color: #999;\n        font-size: 17px;\n        line-height: 18px;\n      "]))),
-    searchBox: css(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteralLoose(["\n        padding-left: 5px;\n      "])))
-  };
-});
-
-var OdsTimelineTableTaskTemplate = function OdsTimelineTableTaskTemplate(_ref) {
-  var taskData = _ref.taskData,
-    taskSize = _ref.taskSize;
-  var _useStyles = useStyles$b({
-      progressColor: taskData.color,
-      progressPerc: taskData.progress,
-      taskWidth: taskSize.width
-    }),
-    timelineTableStyles = _useStyles.styles;
-  return React__default.createElement("div", {
-    className: timelineTableStyles.taskBar
-  }, React__default.createElement("span", {
-    className: timelineTableStyles.taskBarTitle
-  }, taskData.title), React__default.createElement("div", {
-    className: timelineTableStyles.taskProgress
-  }));
-};
-
 var OdsTimelineTableSearchBox = function OdsTimelineTableSearchBox(props) {
   var _props$value;
   var _useStyles = useStyles$b(),
@@ -38769,6 +38819,7 @@ var OdsTimelineTable = React.forwardRef(function (props, ref) {
     onDateRangeChange = props.onDateRangeChange,
     onSortingChanged = props.onSortingChanged;
   var refGantt = React.useRef(null);
+  var refGanttExportable = React.useRef(null);
   var _useState = React.useState(startDateRange != null ? startDateRange : Constants.timelineDefaultStartDate),
     startDate = _useState[0],
     setStartDate = _useState[1];
@@ -38966,11 +39017,10 @@ var OdsTimelineTable = React.forwardRef(function (props, ref) {
     }));
   };
   var exportToPdf = function exportToPdf() {
-    var _odsTimelineTable$_tr, _toolbarSettings$expo, _toolbarSettings$expo2, _toolbarSettings$expo3;
-    var _odsTimelineTable = refGantt.current.instance;
-    console.log("exportToPdf", _odsTimelineTable, _odsTimelineTable._treeList, (_odsTimelineTable$_tr = _odsTimelineTable._treeList) === null || _odsTimelineTable$_tr === void 0 ? void 0 : _odsTimelineTable$_tr.getVisibleColumns());
+    var _toolbarSettings$expo, _toolbarSettings$expo2, _toolbarSettings$expo3;
+    var exportableTimelineTable = refGanttExportable.current.instance;
     pdf_exporter.exportGantt({
-      component: _odsTimelineTable,
+      component: exportableTimelineTable,
       createDocumentMethod: function createDocumentMethod(args) {
         return new jsPDF.jsPDF(args);
       },
@@ -38997,7 +39047,7 @@ var OdsTimelineTable = React.forwardRef(function (props, ref) {
       customClearSorting: customClearSorting
     };
   });
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement(gantt.Gantt, Object.assign({
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(Gantt.Gantt, Object.assign({
     width: "100%",
     height: 500,
     startDateRange: startDate,
@@ -39011,7 +39061,7 @@ var OdsTimelineTable = React.forwardRef(function (props, ref) {
       mode: sortingMode,
       showSortIndexes: false
     }
-  }), toolbarSettings !== null && toolbarSettings !== void 0 && toolbarSettings.visible ? React__default.createElement(gantt.Toolbar, null, React__default.createElement(gantt.Item, {
+  }), toolbarSettings !== null && toolbarSettings !== void 0 && toolbarSettings.visible ? React__default.createElement(Gantt.Toolbar, null, React__default.createElement(Gantt.Item, {
     key: "OdsTimelineTable_ToolbarItem_DateFilter",
     visible: toolbarSettings === null || toolbarSettings === void 0 ? void 0 : toolbarSettings.dateFilterVisible,
     location: toolbarSettings === null || toolbarSettings === void 0 ? void 0 : toolbarSettings.location,
@@ -39022,22 +39072,22 @@ var OdsTimelineTable = React.forwardRef(function (props, ref) {
         onFilterRangeChange: onTimelineDateRangeChange
       }));
     }
-  }), React__default.createElement(gantt.Item, {
+  }), React__default.createElement(Gantt.Item, {
     key: "OdsTimelineTable_ToolbarItem_Search",
     visible: toolbarSettings === null || toolbarSettings === void 0 ? void 0 : (_toolbarSettings$sear5 = toolbarSettings.search) === null || _toolbarSettings$sear5 === void 0 ? void 0 : _toolbarSettings$sear5.visible,
     location: toolbarSettings === null || toolbarSettings === void 0 ? void 0 : toolbarSettings.location,
     component: searchBoxComponent
-  }), React__default.createElement(gantt.Item, {
+  }), (toolbarSettings === null || toolbarSettings === void 0 ? void 0 : toolbarSettings.zoomVisible) && React__default.createElement(Gantt.Item, {
     key: "OdsTimelineTable_ToolbarItem_ZoomIn",
     visible: toolbarSettings === null || toolbarSettings === void 0 ? void 0 : toolbarSettings.zoomVisible,
     name: "zoomIn",
     location: toolbarSettings === null || toolbarSettings === void 0 ? void 0 : toolbarSettings.location
-  }), React__default.createElement(gantt.Item, {
+  }), (toolbarSettings === null || toolbarSettings === void 0 ? void 0 : toolbarSettings.zoomVisible) && React__default.createElement(Gantt.Item, {
     key: "OdsTimelineTable_ToolbarItem_ZoomOut",
     visible: toolbarSettings === null || toolbarSettings === void 0 ? void 0 : toolbarSettings.zoomVisible,
     name: "zoomOut",
     location: toolbarSettings === null || toolbarSettings === void 0 ? void 0 : toolbarSettings.location
-  }), React__default.createElement(gantt.Item, {
+  }), React__default.createElement(Gantt.Item, {
     key: "OdsTimelineTable_ToolbarItem_Export",
     visible: toolbarSettings === null || toolbarSettings === void 0 ? void 0 : (_toolbarSettings$expo6 = toolbarSettings["export"]) === null || _toolbarSettings$expo6 === void 0 ? void 0 : _toolbarSettings$expo6.visible,
     location: toolbarSettings === null || toolbarSettings === void 0 ? void 0 : toolbarSettings.location,
@@ -39048,11 +39098,11 @@ var OdsTimelineTable = React.forwardRef(function (props, ref) {
       stylingMode: "text",
       onClick: exportToPdf
     }
-  })) : "", React__default.createElement(gantt.ContextMenu, {
+  })) : "", React__default.createElement(Gantt.ContextMenu, {
     enabled: false
   }), timelineColumns === null || timelineColumns === void 0 ? void 0 : timelineColumns.map(function (columnProps) {
     if (columnProps.isStatusColumn) {
-      return React__default.createElement(gantt.Column, Object.assign({
+      return React__default.createElement(Gantt.Column, Object.assign({
         width: 50,
         minWidth: 50,
         cssClass: "cellCenteredVertically",
@@ -39060,7 +39110,7 @@ var OdsTimelineTable = React.forwardRef(function (props, ref) {
         headerCellComponent: minimalHeaderCellComponent
       }, columnProps));
     } else if (columnProps.isCheckboxColumn) {
-      return React__default.createElement(gantt.Column, Object.assign({
+      return React__default.createElement(Gantt.Column, Object.assign({
         width: 50,
         minWidth: 50,
         cssClass: "cellCenteredVertically",
@@ -39069,18 +39119,23 @@ var OdsTimelineTable = React.forwardRef(function (props, ref) {
         allowSorting: false
       }, columnProps));
     } else {
-      return React__default.createElement(gantt.Column, Object.assign({
+      return React__default.createElement(Gantt.Column, Object.assign({
         headerCellComponent: function headerCellComponent(props) {
           return customHeaderCellComponent(props);
         }
       }, columnProps));
     }
-  }), React__default.createElement(gantt.Tasks, {
+  }), React__default.createElement(Gantt.Tasks, {
     dataSource: timelineTasks
-  }), children, React__default.createElement(gantt.Sorting, {
+  }), children, React__default.createElement(Gantt.Sorting, {
     mode: sortingMode,
     showSortIndexes: showSortIndexes
-  })));
+  })), getExportableTimelineTable(_extends({}, props, {
+    startDateRange: startDate,
+    endDateRange: endDate,
+    customColumns: timelineColumns,
+    customTasks: timelineTasks
+  }), refGanttExportable));
 });
 
 /**