ods-component-lib 1.18.164 → 1.18.166

package/dist/index.js

@@ -79,37 +79,6 @@ function _taggedTemplateLiteralLoose(strings, raw) {
   strings.raw = raw;
   return strings;
 }
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-  return arr2;
-}
-function _createForOfIteratorHelperLoose(o, allowArrayLike) {
-  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
-  if (it) return (it = it.call(o)).next.bind(it);
-  if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
-    if (it) o = it;
-    var i = 0;
-    return function () {
-      if (i >= o.length) return {
-        done: true
-      };
-      return {
-        done: false,
-        value: o[i++]
-      };
-    };
-  }
-  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
 
 var _templateObject;
 var StyledAlert = styled__default(antd.Alert)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n //\n"])));
@@ -1114,7 +1083,9 @@ var _templateObject$l;
 var StyledtTimeline = styled__default(antd.Timeline)(_templateObject$l || (_templateObject$l = _taggedTemplateLiteralLoose(["\n //\n"])));
 
 function OdsTimeline(props) {
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledtTimeline, Object.assign({}, props), props.children));
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledtTimeline, Object.assign({}, props, {
+    mode: props.mode
+  })));
 }
 
 var _templateObject$m;
@@ -33736,6 +33707,7 @@ var OdsBasicDataGrid = function OdsBasicDataGrid(props) {
       key: col.dataField
     }, col, {
       minWidth: 50,
+      width: 160,
       cssClass: col.cssClass + " " + (hasFastUpdate ? "grid-cell-disable-text-selection" : "")
     }), col.lookUp && React__default.createElement(devextremeReact.Lookup, Object.assign({}, col.lookUp)), (col.dataField === "IsActive" || col.dataField === "isActive") && React__default.createElement(DataGrid.HeaderFilter, {
       dataSource: [{
@@ -34533,12 +34505,6 @@ var OdsServerSideDatagrid = function OdsServerSideDatagrid(props) {
     updateTrigger = _useState4[0],
     setUpdateTrigger = _useState4[1];
   var lastPageIndexRef = React.useRef(null);
-  var _useState5 = React.useState({}),
-    filterOptions = _useState5[0],
-    setFilterOptions = _useState5[1];
-  var _useState6 = React.useState([]),
-    headerFilterData = _useState6[0],
-    setHeaderFilterData = _useState6[1];
   var _useStyles = useStyles$1(),
     gridStyle = _useStyles.styles;
   var renderTotal = React.useCallback(function () {
@@ -34562,46 +34528,12 @@ var OdsServerSideDatagrid = function OdsServerSideDatagrid(props) {
     var currentPageIndex = dataGridInstance.pageCount();
     var currentTotalCount = currentPageIndex == 0 ? 50 : dataGridInstance.totalCount();
     var newData = dataGridInstance === null || dataGridInstance === void 0 ? void 0 : (_dataGridInstance$get = dataGridInstance.getDataSource()) === null || _dataGridInstance$get === void 0 ? void 0 : _dataGridInstance$get.items();
+    if (filterApplied) {
+      totalFilteredCount.current = currentTotalCount;
+    } else {
+      totalUnfilteredCount.current = currentTotalCount;
+    }
     if ((!filterApplied && currentPageIndex == 1 && currentTotalCount != totalUnfilteredCount.current || lastPageIndexRef.current !== currentPageIndex) && newData && newData.length > 0) {
-      setHeaderFilterData(function (prevData) {
-        var uniqueValuesByColumn = {};
-        props.columns.forEach(function (col) {
-          uniqueValuesByColumn[col.dataField] = new Set(prevData.map(function (item) {
-            return item[col.dataField];
-          }).filter(function (val) {
-            return val !== null && val !== "";
-          }));
-        });
-        var newItems = [];
-        newData.forEach(function (item) {
-          var addItem = {};
-          props.columns.forEach(function (col) {
-            var _item$col$dataField;
-            var colValue = (_item$col$dataField = item[col.dataField]) === null || _item$col$dataField === void 0 ? void 0 : _item$col$dataField.toString();
-            if (props.applyCellRenderToHeaderFilter) {
-              try {
-                if (col.cellRender) {
-                  colValue = col.cellRender({
-                    value: colValue
-                  });
-                } else if (col.calculateCellValue) {
-                  var _q;
-                  var q = (_q = {}, _q[col.dataField] = item[col.dataField], _q);
-                  colValue = col.calculateCellValue(q);
-                }
-              } catch (error) {}
-            }
-            if (colValue && !uniqueValuesByColumn[col.dataField].has(colValue)) {
-              uniqueValuesByColumn[col.dataField].add(colValue);
-              addItem[col.dataField] = colValue;
-            }
-          });
-          if (Object.keys(addItem).length > 0) {
-            newItems.push(addItem);
-          }
-        });
-        return [].concat(prevData, newItems);
-      });
       setCurrentPage(currentPageIndex);
       setCurrentPageSize(dataGridInstance.pageSize());
       rowCount.current = currentTotalCount;
@@ -34610,16 +34542,6 @@ var OdsServerSideDatagrid = function OdsServerSideDatagrid(props) {
       });
       lastPageIndexRef.current = currentPageIndex;
     }
-    if (currentTotalCount > 0) {
-      if (filterApplied) {
-        totalFilteredCount.current = currentTotalCount;
-      } else {
-        totalUnfilteredCount.current = currentTotalCount;
-      }
-      if (!filterApplied && totalFilteredCount.current === 0) {
-        totalFilteredCount.current = totalUnfilteredCount.current;
-      }
-    }
   }, [props.columns, filterApplied]);
   var handleOptionChanged = React.useCallback(function (e) {
     var dataGrid = props.dataGridRef.current.instance;
@@ -34650,45 +34572,6 @@ var OdsServerSideDatagrid = function OdsServerSideDatagrid(props) {
     }
   }, [props.dataGridRef]);
   React.useEffect(function () {}, [updateTrigger]);
-  React.useEffect(function () {
-    var loadFilterData = function loadFilterData() {
-      try {
-        var newFilterOptions = {};
-        var _loop = function _loop() {
-          var col = _step.value;
-          try {
-            if (headerFilterData.length > 0) {
-              var newData = headerFilterData.filter(function (item) {
-                return item[col.dataField] != null && item[col.dataField] !== "";
-              }).map(function (item) {
-                return item[col.dataField].toString();
-              });
-              var values = newData.map(function (group) {
-                return {
-                  text: group,
-                  value: group
-                };
-              });
-              newFilterOptions[col.dataField] = values;
-            }
-          } catch (error) {
-            console.error('Error loading data for header filter:', error);
-          }
-        };
-        for (var _iterator = _createForOfIteratorHelperLoose(props.columns), _step; !(_step = _iterator()).done;) {
-          _loop();
-        }
-        setFilterOptions(newFilterOptions);
-        return Promise.resolve();
-      } catch (e) {
-        return Promise.reject(e);
-      }
-    };
-    loadFilterData();
-  }, [headerFilterData, props.columns]);
-  React.useEffect(function () {
-    setHeaderFilterData([]);
-  }, []);
   var actionButtons = React.useMemo(function () {
     if (props.actionButtonGroup) {
       if (props.actionButtonGroup.length > 3 && !props.edit) {
@@ -34827,7 +34710,7 @@ var OdsServerSideDatagrid = function OdsServerSideDatagrid(props) {
     focusedRowEnabled: false,
     onEditorPrepared: onEditorPrepared,
     onCellClick: function onCellClick(e) {
-      if (e.rowType != 'header') {
+      if (e.rowType != "header") {
         e.cellElement.style.backgroundColor = "transparent";
       }
     },
@@ -34879,7 +34762,8 @@ var OdsServerSideDatagrid = function OdsServerSideDatagrid(props) {
     return React__default.createElement(DataGrid.Column, Object.assign({
       key: col.dataField
     }, col, {
-      minWidth: 10
+      minWidth: 10,
+      width: 160
     }), col.lookUp && React__default.createElement(devextremeReact.Lookup, Object.assign({}, col.lookUp)), col.dataField === "IsActive" && React__default.createElement(DataGrid.HeaderFilter, {
       dataSource: [{
         text: "Active",
@@ -34888,9 +34772,9 @@ var OdsServerSideDatagrid = function OdsServerSideDatagrid(props) {
         text: "Passive",
         value: false
       }]
-    }), React__default.createElement(DataGrid.HeaderFilter, {
-      dataSource: [].concat(filterOptions[col.dataField] || [])
-    }), col.multiLevelColumns && col.multiLevelColumns.map(function (multiLevelColItem) {
+    }), col.headerFilter && React__default.createElement(DataGrid.HeaderFilter, Object.assign({}, col.headerFilter, {
+      visible: true
+    })), col.multiLevelColumns && col.multiLevelColumns.map(function (multiLevelColItem) {
       return React__default.createElement(DataGrid.Column, {
         dataField: multiLevelColItem.dataField,
         caption: multiLevelColItem.caption,
@@ -35042,17 +34926,17 @@ var useOnContentReadyHandler = function useOnContentReadyHandler(columns, lastPa
     var currentPageIndex = dataGridInstance.pageIndex();
     var currentTotalCount = dataGridInstance.totalCount();
     var newData = dataGridInstance === null || dataGridInstance === void 0 ? void 0 : (_dataGridInstance$get = dataGridInstance.getDataSource()) === null || _dataGridInstance$get === void 0 ? void 0 : _dataGridInstance$get.items();
+    if (filterApplied) {
+      totalFilteredCount.current = currentTotalCount;
+    } else {
+      totalUnfilteredCount.current = currentTotalCount;
+    }
+    if (!filterApplied && totalFilteredCount.current === 0) {
+      totalFilteredCount.current = totalUnfilteredCount.current;
+    }
     if (lastPageIndexRef.current !== currentPageIndex && newData && newData.length > 0) {
       setCurrentPage(currentPageIndex);
       setCurrentPageSize(dataGridInstance.pageSize());
-      if (filterApplied) {
-        totalFilteredCount.current = currentTotalCount;
-      } else {
-        totalUnfilteredCount.current = currentTotalCount;
-      }
-      if (!filterApplied && totalFilteredCount.current === 0) {
-        totalFilteredCount.current = totalUnfilteredCount.current;
-      }
       setUpdateTrigger(function (prev) {
         return !prev;
       });
@@ -35300,7 +35184,8 @@ var OdsInlineEditDataGrid = function OdsInlineEditDataGrid(props) {
       return React__default.createElement(DataGrid.Column, Object.assign({
         key: col.dataField
       }, col, {
-        minWidth: 10
+        minWidth: 10,
+        width: 160
       }), col.lookup && React__default.createElement(DataGrid.Lookup, Object.assign({}, col.lookup)), col.headerFilter && React__default.createElement(DataGrid.HeaderFilter, Object.assign({}, col.headerFilter, {
         visible: true,
         allowSearch: true
@@ -35392,6 +35277,193 @@ var OdsInlineEditDataGrid = function OdsInlineEditDataGrid(props) {
   }, React__default.createElement("p", null, renderTotal())));
 };
 
+var useOnActionCellRenderHandler$1 = function useOnActionCellRenderHandler(visibleActionButtons, actionButtonGroup, edit, actionButtonsTooltipType) {
+  var onActionCellRender = React.useCallback(function (cellData) {
+    if (!cellData || !visibleActionButtons) return null;
+    var kebabMenuButtons = actionButtonGroup && actionButtonGroup.length >= 2 && !edit ? actionButtonGroup.slice(2).map(function (button) {
+      return {
+        icon: button.icon,
+        onClick: function onClick(event) {
+          var customEvent = {
+            column: cellData.column,
+            component: cellData.component,
+            element: cellData.element,
+            event: event,
+            model: cellData.data,
+            row: cellData.row
+          };
+          button.onClick(customEvent);
+        }
+      };
+    }) : [];
+    var buttonElements = visibleActionButtons.map(function (buttonItem) {
+      var isVisible = typeof buttonItem.visible === "function" ? buttonItem.visible({
+        column: cellData.column,
+        component: cellData.component,
+        row: cellData.row
+      }) : buttonItem.visible;
+      return React__default.createElement(OdsDataGrdiRowButton, Object.assign({
+        key: "action-button-" + buttonItem.name,
+        name: buttonItem.name,
+        hint: buttonItem.hint,
+        visible: isVisible,
+        size: "small",
+        type: "text",
+        disabled: buttonItem.actionPermission === undefined ? false : !buttonItem.actionPermission,
+        icon: buttonItem.icon
+      }, actionButtonsTooltipType === "styled" && {
+        tooltip: buttonItem.hint
+      }, {
+        onClick: function onClick(event) {
+          if (buttonItem.onClick) {
+            var customEvent = {
+              column: cellData.column,
+              component: cellData.component,
+              element: cellData.element,
+              event: event,
+              model: cellData.data,
+              row: cellData.row
+            };
+            buttonItem.onClick(customEvent);
+          }
+        }
+      }));
+    });
+    if (kebabMenuButtons.length > 0) {
+      buttonElements.push(React__default.createElement(OdsDropdown, {
+        key: "dropdown-" + (cellData.rowIndex || cellData.data.ID),
+        menuItems: kebabMenuButtons
+      }, React__default.createElement(OdsDataGrdiRowButton, {
+        type: "text",
+        icon: React__default.createElement(DynamicIcon, {
+          iconName: "kebabMenu"
+        })
+      })));
+    }
+    return React__default.createElement(React__default.Fragment, null, buttonElements);
+  }, [visibleActionButtons]);
+  return onActionCellRender;
+};
+
+var useOnExportingHandler$1 = function useOnExportingHandler(exportProps, getSummary, callback) {
+  var onExporting = React.useCallback(function (e) {
+    if (exportProps) {
+      var _exportProps$fileName, _exportProps$activeTe, _exportProps$passiveT;
+      ExportDataGridToExcel({
+        gridComponent: e.component,
+        baseFileName: (_exportProps$fileName = exportProps.fileName) != null ? _exportProps$fileName : "DataGrid",
+        selectedText: exportProps.selectedText,
+        getSummary: getSummary,
+        selectedRowsOnly: e.selectedRowsOnly,
+        activeText: (_exportProps$activeTe = exportProps.activeText) != null ? _exportProps$activeTe : "Active",
+        passiveText: (_exportProps$passiveT = exportProps.passiveText) != null ? _exportProps$passiveT : "Passive"
+      });
+    }
+    if (callback) {
+      callback(e);
+    }
+  }, [getSummary]);
+  return onExporting;
+};
+
+var MasterDetailDataGrid = function MasterDetailDataGrid(_ref) {
+  var columns = _ref.columns,
+    dataSource = _ref.dataSource,
+    _ref$masterDetailFeat = _ref.masterDetailFeatures,
+    masterDetailFeatures = _ref$masterDetailFeat === void 0 ? {} : _ref$masterDetailFeat,
+    masterDetailData = _ref.masterDetailData;
+  var visibleActionButtons = React.useMemo(function () {
+    if (masterDetailFeatures.masterActionButtonGroup && masterDetailFeatures.masterActionButtonGroup.length >= 2) {
+      return masterDetailFeatures.masterActionButtonGroup.slice(0, 2);
+    }
+    return masterDetailFeatures.masterActionButtonGroup || [];
+  }, [masterDetailFeatures.masterActionButtonGroup]);
+  var onActionCellRender = useOnActionCellRenderHandler$1(visibleActionButtons, masterDetailFeatures.masterActionButtonGroup);
+  var getTotalDataCount = function getTotalDataCount() {
+    return "" + dataSource.length;
+  };
+  var handleExporting = useOnExportingHandler$1(masterDetailFeatures.exportProps, getTotalDataCount);
+  var effectiveColumns = (masterDetailData === null || masterDetailData === void 0 ? void 0 : masterDetailData.detailGridColumns) || columns || (dataSource[0] ? Object.keys(dataSource[0]).map(function (key) {
+    return {
+      dataField: key,
+      caption: key.charAt(0).toUpperCase() + key.slice(1),
+      allowFiltering: true
+    };
+  }) : []);
+  return React__default.createElement(DataGrid__default, {
+    style: {
+      maxHeight: masterDetailFeatures.maxHeight ? masterDetailFeatures.maxHeight + "px" : "400px",
+      overflow: "auto"
+    },
+    dataSource: dataSource,
+    showBorders: true,
+    columnAutoWidth: true,
+    allowColumnReordering: true,
+    selection: {
+      mode: masterDetailFeatures.showCheckbox ? "multiple" : "none"
+    },
+    paging: {
+      enabled: true,
+      pageSize: masterDetailFeatures.pageSize || 20
+    },
+    filterRow: {
+      visible: masterDetailFeatures.createFilter
+    },
+    onExporting: handleExporting,
+    onToolbarPreparing: masterDetailFeatures.detailToolbar
+  }, effectiveColumns.map(function (col) {
+    return React__default.createElement(DataGrid.Column, Object.assign({
+      key: col.dataField
+    }, col, {
+      headerFilter: {
+        visible: col.allowFiltering
+      }
+    }));
+  }), React__default.createElement(DataGrid.ColumnChooser, {
+    enabled: masterDetailFeatures.columnChooser,
+    mode: "select"
+  }, React__default.createElement(DataGrid.Position, {
+    my: "right top",
+    at: "right bottom",
+    of: document.querySelector("." + "props.dataGridPageName") ? "." + "props.dataGridPageName" + " .dx-datagrid-column-chooser-button" : ".dx-datagrid-column-chooser-button"
+  }), React__default.createElement(DataGrid.ColumnChooserSearch, {
+    enabled: true,
+    editorOptions: {
+      placeholder: ""
+    }
+  }), React__default.createElement(DataGrid.HeaderFilter, {
+    visible: true
+  }), React__default.createElement(DataGrid.ColumnChooserSelection, {
+    allowSelectAll: true,
+    selectByClick: true,
+    recursive: true
+  })), (masterDetailFeatures === null || masterDetailFeatures === void 0 ? void 0 : masterDetailFeatures.exportEnabled) && React__default.createElement(DataGrid.Export, Object.assign({}, masterDetailFeatures.exportProps)), masterDetailFeatures.actionColumnEnable && React__default.createElement(DataGrid.Column, {
+    dataField: "Actions",
+    caption: "",
+    minWidth: 10,
+    width: 160,
+    fixed: true,
+    allowSorting: false,
+    type: "buttons",
+    showInColumnChooser: false,
+    cellRender: onActionCellRender
+  }), React__default.createElement(DataGrid.FilterRow, {
+    visible: masterDetailFeatures.createFilter
+  }), React__default.createElement(DataGrid.Selection, {
+    mode: masterDetailFeatures.showCheckbox ? "multiple" : "none"
+  }), React__default.createElement(DataGrid.SearchPanel, {
+    visible: masterDetailFeatures.showSearchPanel
+  }), React__default.createElement(DataGrid.Toolbar, null, React__default.createElement(DataGrid.Item, {
+    name: "searchPanel"
+  }), React__default.createElement(DataGrid.Item, {
+    name: "columnChooserButton",
+    cssClass: "toolbarPanelItems"
+  }), React__default.createElement(DataGrid.Item, {
+    name: "exportButton",
+    cssClass: "toolbarPanelItems"
+  })));
+};
+
 /**
  * Checks if `value` is the
  * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
@@ -37070,6 +37142,7 @@ exports.OdsInput = OdsInput;
 exports.OdsInputNumber = OdsInputNumber;
 exports.OdsLink = OdsLink;
 exports.OdsList = OdsList;
+exports.OdsMasterDetailDataGrid = MasterDetailDataGrid;
 exports.OdsModal = OdsModal;
 exports.OdsModalOld = OdsModalOld;
 exports.OdsMultiSelect = OdsMultiSelect;