ods-component-lib 1.18.242 → 1.18.243

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

@@ -12,4 +12,6 @@ export declare const useStyles: (props?: {
     columnChooserHeader: import("antd-style").SerializedStyles;
     columnChooserCloseButton: import("antd-style").SerializedStyles;
     columnChooserDivider: import("antd-style").SerializedStyles;
+    columnChooserCheckbox: import("antd-style").SerializedStyles;
+    columnChooserSearchbox: import("antd-style").SerializedStyles;
 }>;

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

@@ -98,6 +98,7 @@ export interface IButtonGroup extends Omit<IButtonProps, "icon"> {
     onclick?: React.MouseEventHandler<HTMLElement>;
 }
 export interface IOdsTimelineTableColumnProps extends IColumnProps {
+    name: string;
     isMinimized?: boolean;
     isStatusColumn?: boolean;
     isCheckboxColumn?: boolean;
@@ -134,6 +135,8 @@ export interface IOdsTimelineTableToolbarSettings {
     columnChooser?: {
         visible?: boolean;
         title?: string;
+        selectAllText: string;
+        onSelection?(items: string[], isSelected: boolean): void;
     };
     dateFilterVisible?: boolean;
     zoomVisible?: boolean;
@@ -157,6 +160,12 @@ export interface ITranslationValue {
 }
 export interface IOdsTimelineTableColumnChooserProps {
     title: string;
-    items: string[];
-    onSelection?(selectedItems: string[], selectedItem?: string, deselectedItem?: string): void;
+    selectAllText: string;
+    items: IOdsTimelineTableColumnChooserItemProps[];
+    onSelection?(items: string[], isSelected: boolean): void;
+}
+export interface IOdsTimelineTableColumnChooserItemProps {
+    columnName: string;
+    columnCaption: string;
+    visible: boolean;
 }

package/dist/index.js

@@ -38515,19 +38515,6 @@ var OdsMergeCellDataGrid = function OdsMergeCellDataGrid(props) {
   })));
 };
 
-var currentYear = new Date().getFullYear();
-var Constants = {
-  timelineDefaultStartDate: new Date(currentYear, 0, 1),
-  timelineDefaultEndDate: new Date(currentYear + 1, 0, 1)
-};
-var actionColumnProps = {
-  dataField: "Actions",
-  allowExporting: false,
-  allowFiltering: false,
-  allowSorting: false,
-  dataType: "object"
-};
-
 var lodash = createCommonjsModule(function (module, exports) {
 (function() {
 
@@ -55718,6 +55705,23 @@ var lodash = createCommonjsModule(function (module, exports) {
 }.call(commonjsGlobal));
 });
 
+var uniqueRecords = function uniqueRecords(value, index, array) {
+  return array.indexOf(value) === index;
+};
+
+var currentYear = new Date().getFullYear();
+var Constants = {
+  timelineDefaultStartDate: new Date(currentYear, 0, 1),
+  timelineDefaultEndDate: new Date(currentYear + 1, 0, 1)
+};
+var actionColumnProps = {
+  dataField: "Actions",
+  allowExporting: false,
+  allowFiltering: false,
+  allowSorting: false,
+  dataType: "object"
+};
+
 var checkboxCellComponent = function checkboxCellComponent(props) {
   var isChecked = props.data.value;
   var onChange = function onChange(e) {
@@ -55950,6 +55954,7 @@ var OdsTimelineSelectionColumn = function OdsTimelineSelectionColumn(selectionEv
     minWidth: 50,
     width: 50,
     dataField: "isSelected",
+    name: "selection",
     allowExporting: false,
     cellComponent: function cellComponent(props) {
       var onChange = function onChange(e) {
@@ -55971,23 +55976,26 @@ var OdsTimelineSelectionColumn = function OdsTimelineSelectionColumn(selectionEv
   return selectionColumn;
 };
 
-var _templateObject$B, _templateObject2$9, _templateObject3$6, _templateObject4$5, _templateObject5$4, _templateObject6$3, _templateObject7$3, _templateObject8$3, _templateObject9$3;
+var _templateObject$B, _templateObject2$9, _templateObject3$6, _templateObject4$5, _templateObject5$4, _templateObject6$3, _templateObject7$3, _templateObject8$3, _templateObject9$3, _templateObject10$3, _templateObject11$3;
 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";
+  var searchBox = "\n      padding-left: 5px;\n    ";
   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      "]))),
+    searchBox: css(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteralLoose(["\n        ", "\n      "])), searchBox),
     columnChooserPopup: css(_templateObject6$3 || (_templateObject6$3 = _taggedTemplateLiteralLoose(["\n        min-width: 250px;\n      "]))),
     columnChooserHeader: css(_templateObject7$3 || (_templateObject7$3 = _taggedTemplateLiteralLoose(["\n        display: flex;\n        align-items: center;\n      "]))),
-    columnChooserCloseButton: css(_templateObject8$3 || (_templateObject8$3 = _taggedTemplateLiteralLoose(["\n        flex: 1;\n        text-align: end;\n        cursor: pointer;\n      "]))),
-    columnChooserDivider: css(_templateObject9$3 || (_templateObject9$3 = _taggedTemplateLiteralLoose(["\n        margin-top: 10px;\n        margin-bottom: 10px;\n      "])))
+    columnChooserCloseButton: css(_templateObject8$3 || (_templateObject8$3 = _taggedTemplateLiteralLoose(["\n        flex: 1;\n        text-align: end;\n      "]))),
+    columnChooserDivider: css(_templateObject9$3 || (_templateObject9$3 = _taggedTemplateLiteralLoose(["\n        margin-top: 10px;\n        margin-bottom: 10px;\n      "]))),
+    columnChooserCheckbox: css(_templateObject10$3 || (_templateObject10$3 = _taggedTemplateLiteralLoose(["\n        margin-top: 4px;\n        margin-bottom: 4px;\n      "]))),
+    columnChooserSearchbox: css(_templateObject11$3 || (_templateObject11$3 = _taggedTemplateLiteralLoose(["\n        ", "\n        margin-top: 4px;\n        margin-bottom: 4px;\n      "])), searchBox)
   };
 });
 
@@ -56046,85 +56054,140 @@ var OdsTimelineTableSearchBox = function OdsTimelineTableSearchBox(props) {
   }));
 };
 
-var uniqueRecords = function uniqueRecords(value, index, array) {
-  return array.indexOf(value) === index;
-};
-
 var OdsTimelineTableColumnChooser = function OdsTimelineTableColumnChooser(props) {
   var _useStyles = useStyles$b(),
     timelineTableStyles = _useStyles.styles;
+  var initialSelectedColumns = props.items.filter(function (item) {
+    return item.visible !== false;
+  });
   var _useState = React.useState(false),
     open = _useState[0],
     setOpen = _useState[1];
   var _useState2 = React.useState(props.items),
     columns = _useState2[0],
     setColumns = _useState2[1];
-  var _useState3 = React.useState(props.items),
+  var _useState3 = React.useState(initialSelectedColumns),
     selectedColumns = _useState3[0],
     setSelectedColumns = _useState3[1];
   var filterColumns = function filterColumns(searchValue) {
+    var _columns = [];
     if (searchValue !== undefined && searchValue !== null && searchValue !== "") {
-      setColumns(function (prev) {
-        return prev.filter(function (item) {
-          return item.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase());
-        });
+      _columns = columns.filter(function (item) {
+        return item.columnCaption.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase());
       });
     } else {
-      setColumns(props.items);
+      _columns = props.items;
     }
+    setColumns(_columns);
+    updateSelectAll({
+      columnList: _columns
+    });
   };
   var selectAllChanged = function selectAllChanged(isSelected) {
+    setSelectAll(isSelected);
+    var newSelectedColumns = [];
     if (isSelected) {
-      setSelectedColumns(function (prev) {
-        return [].concat(prev, columns).filter(uniqueRecords);
-      });
+      newSelectedColumns = [].concat(selectedColumns, columns).filter(uniqueRecords);
     } else {
-      setSelectedColumns(function (prev) {
-        return prev.filter(function (item) {
-          return !columns.some(function (x) {
-            return x === item;
-          });
+      newSelectedColumns = selectedColumns.filter(function (item) {
+        return !columns.some(function (x) {
+          return x.columnName === item.columnName;
         });
       });
     }
+    setSelectedColumns(newSelectedColumns);
+    props.onSelection && props.onSelection(columns.map(function (item) {
+      return item.columnName;
+    }), isSelected);
+  };
+  var selectChanged = function selectChanged(isSelected, column) {
+    var newSelectedColumns = [];
+    if (isSelected) {
+      newSelectedColumns = [].concat(selectedColumns, [column]).filter(uniqueRecords);
+    } else {
+      newSelectedColumns = selectedColumns.filter(function (item) {
+        return item.columnName !== column.columnName;
+      });
+    }
+    setSelectedColumns(newSelectedColumns);
+    updateSelectAll({
+      selectedColumnList: newSelectedColumns
+    });
+    props.onSelection && props.onSelection([column.columnName], isSelected);
+  };
+  var updateSelectAll = function updateSelectAll(params) {
+    var columnList = params.columnList,
+      selectedColumnList = params.selectedColumnList;
+    setSelectAll(isAllSelected({
+      columnList: columnList,
+      selectedColumnList: selectedColumnList
+    }));
   };
-  var selectChanged = function selectChanged(_isSelected, _columnName) {};
   var isSelected = function isSelected(columnName) {
-    return selectedColumns.some(columnName);
+    return selectedColumns.some(function (item) {
+      return item.columnName === columnName;
+    });
   };
+  var isAllSelected = function isAllSelected(params) {
+    var _params$columnList, _params$selectedColum;
+    var _columns = (_params$columnList = params === null || params === void 0 ? void 0 : params.columnList) != null ? _params$columnList : columns;
+    var _selectedColumns = (_params$selectedColum = params === null || params === void 0 ? void 0 : params.selectedColumnList) != null ? _params$selectedColum : selectedColumns;
+    var _result = true;
+    lodash.forEach(_columns, function (_column) {
+      if (!_selectedColumns.some(function (_selectedColumn) {
+        return _selectedColumn.columnName === _column.columnName;
+      })) {
+        _result = false;
+        return;
+      }
+    });
+    return _result;
+  };
+  var _useState4 = React.useState(isAllSelected({
+      columnList: props.items,
+      selectedColumnList: initialSelectedColumns
+    })),
+    selectAll = _useState4[0],
+    setSelectAll = _useState4[1];
   var content = React__default.createElement("div", {
     className: timelineTableStyles.columnChooserPopup
   }, React__default.createElement("div", {
     className: timelineTableStyles.columnChooserHeader
   }, React__default.createElement("span", null, props.title), React__default.createElement("span", {
-    className: timelineTableStyles.columnChooserCloseButton,
+    className: timelineTableStyles.columnChooserCloseButton
+  }, React__default.createElement(outline.CrossIcon, {
+    style: {
+      cursor: "pointer"
+    },
     onClick: function onClick() {
       return setOpen(false);
     }
-  }, React__default.createElement(outline.CrossIcon, null))), React__default.createElement(OdsInput, {
+  }))), React__default.createElement(OdsInput, {
     key: "OdsTimelineTableColumnChooser_OdsSearch",
     prefix: React__default.createElement("span", {
       className: "dx-icon-search " + timelineTableStyles.searchBoxIcon
     }),
-    className: timelineTableStyles.searchBox,
+    className: timelineTableStyles.columnChooserSearchbox,
     onChange: function onChange(e) {
       return filterColumns(e.target.value);
     }
   }), React__default.createElement(OdsCheckbox, {
-    defaultChecked: true,
+    className: timelineTableStyles.columnChooserCheckbox,
+    checked: selectAll,
     onChange: function onChange(e) {
-      return selectAllChanged(e.target.value);
+      return selectAllChanged(e.target.checked);
     }
-  }), React__default.createElement(antd.Divider, {
+  }, props.selectAllText), React__default.createElement(antd.Divider, {
     className: timelineTableStyles.columnChooserDivider
-  }), columns.map(function (columnName, index) {
-    return React__default.createElement(OdsCheckbox, {
+  }), columns.map(function (_column, index) {
+    return React__default.createElement("div", null, React__default.createElement(OdsCheckbox, {
       key: "OdsTimelineTableColumnChooser_OdsCheckbox_" + index,
-      value: isSelected(columnName),
+      className: timelineTableStyles.columnChooserCheckbox,
+      checked: isSelected(_column.columnName),
       onChange: function onChange(e) {
-        return selectChanged();
+        return selectChanged(e.target.checked, _column);
       }
-    });
+    }, _column.columnCaption));
   }));
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(antd.Popover, {
     open: open,
@@ -56180,6 +56243,15 @@ var OdsTimelineTable = React.forwardRef(function (props, ref) {
     }),
     sortingChangeEventProps = _useState7[0],
     setSortingChangeEventProps = _useState7[1];
+  var _useState8 = React.useState(customColumns),
+    columnList = _useState8[0],
+    setColumnList = _useState8[1];
+  var _useState9 = React.useState(customColumns.filter(function (item) {
+      return item.visible === false;
+    }).map(function (item) {
+      return item.name;
+    })),
+    unvisibleColumnNames = _useState9[0];
   var originalSortingMode = sorting.mode === undefined || sorting.mode === "" ? "none" : sorting.mode;
   var sortingMode = sortingProcess == "ServerSideSorting" ? "none" : originalSortingMode;
   var showSortIndexes = sortingProcess == "ServerSideSorting" ? false : sorting.showSortIndexes;
@@ -56260,7 +56332,7 @@ var OdsTimelineTable = React.forwardRef(function (props, ref) {
     updateSelectionData(e.data[props.customTaskKey].toString(), e.isSelected);
     onCustomSelectionChanged && onCustomSelectionChanged(e);
   };
-  var timelineColumns = multiSelectionEnabled ? [OdsTimelineSelectionColumn(onTimelineCheckboxSelectionChange)].concat(customColumns) : customColumns;
+  var timelineColumns = multiSelectionEnabled ? [OdsTimelineSelectionColumn(onTimelineCheckboxSelectionChange)].concat(columnList) : columnList;
   var minimalHeaderCellComponent = function minimalHeaderCellComponent(data) {
     return customHeaderCellComponent(data, true);
   };
@@ -56365,6 +56437,33 @@ var OdsTimelineTable = React.forwardRef(function (props, ref) {
       endDate: e.endDate
     });
   };
+  var onColumnChooserSelection = function onColumnChooserSelection(items, isSelected) {
+    var _props$toolbarSetting, _props$toolbarSetting2, _props$toolbarSetting3, _props$toolbarSetting4;
+    var _visibleColumns = columnList.filter(function (item) {
+      return item.visible !== false;
+    });
+    if (isSelected) {
+      _visibleColumns = [].concat(_visibleColumns, customColumns.filter(function (item) {
+        return items.includes(item.name);
+      })).filter(uniqueRecords);
+    } else {
+      _visibleColumns = _visibleColumns.filter(function (item) {
+        return !items.includes(item.name);
+      });
+    }
+    _visibleColumns = _visibleColumns.filter(function (x) {
+      return !unvisibleColumnNames.includes(x.name);
+    });
+    setColumnList(function (prev) {
+      return prev.map(function (item) {
+        item.visible = _visibleColumns.some(function (x) {
+          return x.name === item.name;
+        });
+        return item;
+      });
+    });
+    ((_props$toolbarSetting = props.toolbarSettings) === null || _props$toolbarSetting === void 0 ? void 0 : (_props$toolbarSetting2 = _props$toolbarSetting.columnChooser) === null || _props$toolbarSetting2 === void 0 ? void 0 : _props$toolbarSetting2.onSelection) && ((_props$toolbarSetting3 = props.toolbarSettings) === null || _props$toolbarSetting3 === void 0 ? void 0 : (_props$toolbarSetting4 = _props$toolbarSetting3.columnChooser) === null || _props$toolbarSetting4 === void 0 ? void 0 : _props$toolbarSetting4.onSelection(items, isSelected));
+  };
   var searchBoxComponent = function searchBoxComponent(props) {
     var _toolbarSettings$sear4;
     var filterInAllFields = function filterInAllFields(item, searchValue) {
@@ -56419,13 +56518,13 @@ var OdsTimelineTable = React.forwardRef(function (props, ref) {
   var getExportFileName = function getExportFileName() {
     var _toolbarSettings$expo4, _toolbarSettings$expo5;
     var now = new Date();
-    var datePart = ('0' + now.getDate()).slice(-2) + "-" + ('0' + (now.getMonth() + 1)).slice(-2) + "-" + now.getFullYear();
-    var timePart = ('0' + now.getHours()).slice(-2) + ":" + ('0' + now.getMinutes()).slice(-2);
+    var datePart = ("0" + now.getDate()).slice(-2) + "-" + ("0" + (now.getMonth() + 1)).slice(-2) + "-" + now.getFullYear();
+    var timePart = ("0" + now.getHours()).slice(-2) + ":" + ("0" + now.getMinutes()).slice(-2);
     return ((_toolbarSettings$expo4 = toolbarSettings === null || toolbarSettings === void 0 ? void 0 : (_toolbarSettings$expo5 = toolbarSettings["export"]) === null || _toolbarSettings$expo5 === void 0 ? void 0 : _toolbarSettings$expo5.fileName) != null ? _toolbarSettings$expo4 : "Timeline") + "-" + datePart + "-" + timePart + ".pdf";
   };
   var exportedColumns = React.useMemo(function () {
     var newExportedColumns = [];
-    var exportableColumns = customColumns.filter(function (item) {
+    var exportableColumns = columnList.filter(function (item) {
       return item.visible != false && item.allowExporting != false;
     });
     var isResizableColumn = function isResizableColumn(item) {
@@ -56446,7 +56545,7 @@ var OdsTimelineTable = React.forwardRef(function (props, ref) {
       newExportedColumns.push(col);
     });
     return newExportedColumns;
-  }, [exportableTasks]);
+  }, [exportableTasks, columnList]);
   React.useImperativeHandle(ref, function () {
     return {
       getSelectedRowsData: getSelectedRowsData,
@@ -56510,12 +56609,20 @@ var OdsTimelineTable = React.forwardRef(function (props, ref) {
     visible: toolbarSettings === null || toolbarSettings === void 0 ? void 0 : (_toolbarSettings$colu = toolbarSettings.columnChooser) === null || _toolbarSettings$colu === void 0 ? void 0 : _toolbarSettings$colu.visible,
     location: toolbarSettings === null || toolbarSettings === void 0 ? void 0 : toolbarSettings.location,
     component: function component(props) {
-      var _toolbarSettings$colu2, _toolbarSettings$colu3;
+      var _toolbarSettings$colu2, _toolbarSettings$colu3, _toolbarSettings$colu4, _toolbarSettings$colu5;
       return OdsTimelineTableColumnChooser(_extends({}, props, {
         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",
-        items: customColumns.map(function (item) {
-          return item.caption;
-        })
+        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) {
+          return item.caption !== undefined && item.caption !== "";
+        }).map(function (item) {
+          return {
+            columnCaption: item.caption,
+            columnName: item.name,
+            visible: item.visible
+          };
+        }),
+        onSelection: onColumnChooserSelection
       }));
     }
   })) : "", React__default.createElement(gantt.ContextMenu, {