ods-component-lib 1.18.243 → 1.18.244

package/dist/index.modern.js

@@ -16,7 +16,7 @@ import jsPDF, { jsPDF as jsPDF$1 } from 'jspdf';
 import { Workbook } from 'exceljs';
 import { saveAs } from 'file-saver-es';
 import moment, { isDate } from 'moment';
-import { GridIcon, UpArrow5Icon, DownArrow5Icon, Loop1Icon, EditIcon, Trash1Icon, CopyIcon, DiscountIcon, KebabMenuIcon, RefreshIcon, LinkBreakIcon, FloppyDiskIcon, Discount2Icon, Slide1Icon, BabyIcon, BabyBottleIcon, UsersIcon, Search1Icon, CrossIcon, UpArrow2Icon, DownArrow2Icon } from 'ods-icon/react/24/outline';
+import { GridIcon, UpArrow5Icon, DownArrow5Icon, Loop1Icon, EditIcon, Trash1Icon, CopyIcon, DiscountIcon, KebabMenuIcon, RefreshIcon, LinkBreakIcon, FloppyDiskIcon, Discount2Icon, Slide1Icon, BabyIcon, BabyBottleIcon, UsersIcon, Search1Icon, UpArrow2Icon, DownArrow2Icon, CrossIcon } from 'ods-icon/react/24/outline';
 import { TreeList, Lookup, DataGrid as DataGrid$2, Toolbar as Toolbar$1 } from 'devextreme-react';
 import { createStyles } from 'antd-style';
 import { saveAs as saveAs$1 } from 'file-saver';
@@ -38023,7 +38023,7 @@ OdsMergeCellDataGridHelper.getInstance = function () {
 };
 
 var useToken$2 = theme.useToken;
-var OdsMergeCellDataGrid = function OdsMergeCellDataGrid(props) {
+var OdsMergeCellDataGrid = forwardRef(function (props, ref) {
   var _props$columnResizing, _props$className, _props$selection, _props$selectOptions, _props$selectOptions$, _props$selectOptions2, _props$selectOptions$2, _props$selectOptions3;
   var refGrid = props.refGrid,
     keyExpr = props.keyExpr,
@@ -38043,6 +38043,12 @@ var OdsMergeCellDataGrid = function OdsMergeCellDataGrid(props) {
   var _useState4 = useState([]),
     mergedCellInfo = _useState4[0],
     setMergedCellInfo = _useState4[1];
+  var _useState5 = useState({
+      sortedColumns: [],
+      columnHeaderProps: null
+    }),
+    sortingChangeEventProps = _useState5[0],
+    setSortingChangeEventProps = _useState5[1];
   var _useStyles = useStyles$a(),
     gridStyle = _useStyles.styles;
   useEffect(function () {
@@ -38088,6 +38094,11 @@ var OdsMergeCellDataGrid = function OdsMergeCellDataGrid(props) {
       refGrid.current.instance.updateDimensions();
     }
   }, []);
+  useEffect(function () {
+    if (sortingChangeEventProps.columnHeaderProps !== null) {
+      props.onSortingChanged && props.onSortingChanged(sortingChangeEventProps.sortedColumns, sortingChangeEventProps.columnHeaderProps);
+    }
+  }, [sortingChangeEventProps]);
   var actionButtons = useMemo(function () {
     if (props.actionButtonGroup) {
       if (props.actionButtonGroup.length > 3 && !props.edit) {
@@ -38349,6 +38360,112 @@ var OdsMergeCellDataGrid = function OdsMergeCellDataGrid(props) {
   var checkIsPropArray = function checkIsPropArray(prop) {
     return prop && Array.isArray(prop);
   };
+  var customClearSorting = function customClearSorting() {
+    setSortingChangeEventProps(function (prev) {
+      return _extends({}, prev, {
+        sortedColumns: []
+      });
+    });
+    props.onSortingChanged && props.onSortingChanged([], undefined);
+  };
+  var getSortedColumns = function getSortedColumns() {
+    return sortingChangeEventProps.sortedColumns;
+  };
+  var customHeaderCellComponent = function customHeaderCellComponent(props) {
+    if (props.data.column.allowSorting) {
+      return React.createElement("div", {
+        className: "sortingHeaderCell",
+        onClick: function onClick(e) {
+          if (Boolean(props.data.column.allowSorting)) {
+            if (e.shiftKey === true && e.ctrlKey === false) {
+              onSorting(props.data, 2);
+            } else if (e.shiftKey === false && e.ctrlKey === false) {
+              onSorting(props.data, 1);
+            } else if (e.shiftKey === false && e.ctrlKey === true) {
+              onRemoveSorting(props.data);
+            }
+          }
+        }
+      }, React.createElement("span", {
+        className: "headerCaption"
+      }, props.data.column.caption), getSortIcon(props.data.column));
+    }
+    return React.createElement("div", null, props.data.column.caption);
+  };
+  var getSortIcon = function getSortIcon(column) {
+    var sortingFieldName = getSortingFieldName(column);
+    var sortedColumn = sortingChangeEventProps.sortedColumns.find(function (item) {
+      return item.sortingFieldName == sortingFieldName;
+    });
+    if (sortedColumn) {
+      return sortedColumn.sortType === "ASC" ? React.createElement(UpArrow2Icon, null) : React.createElement(DownArrow2Icon, null);
+    }
+    return undefined;
+  };
+  var getSortingFieldName = function getSortingFieldName(column) {
+    var _column$sortingFieldN;
+    return (_column$sortingFieldN = column.sortingFieldName) != null ? _column$sortingFieldN : column.dataField;
+  };
+  var onSorting = function onSorting(headerCellProps, sortingMode) {
+    var sortingFieldName = getSortingFieldName(headerCellProps.column);
+    var sortedColumn = sortingChangeEventProps.sortedColumns.find(function (item) {
+      return item.sortingFieldName == sortingFieldName;
+    });
+    var prevSortIndex = sortedColumn === null || sortedColumn === void 0 ? void 0 : sortedColumn.sortIndex;
+    var newSortedColumn = {
+      sortingFieldName: sortingFieldName,
+      sortType: "ASC",
+      sortIndex: sortingMode == 2 ? sortedColumn === undefined ? sortingChangeEventProps.sortedColumns.length : sortingChangeEventProps.sortedColumns.length - 1 : 0,
+      sortingText: sortingFieldName + " ASC"
+    };
+    if (sortedColumn) {
+      newSortedColumn.sortType = sortedColumn.sortType == "ASC" ? "DESC" : "ASC";
+      newSortedColumn.sortingText = sortingFieldName + " " + newSortedColumn.sortType;
+    }
+    var newSortedColumns = sortingMode == 2 ? [].concat(sortingChangeEventProps.sortedColumns.filter(function (item) {
+      return item.sortingFieldName != sortingFieldName;
+    }), [newSortedColumn]) : [newSortedColumn];
+    if (sortingMode == 2 && sortedColumn !== undefined) {
+      newSortedColumns = newSortedColumns.map(function (item) {
+        if (item.sortingFieldName != sortingFieldName && item.sortIndex > prevSortIndex) {
+          item.sortIndex = item.sortIndex - 1;
+        }
+        return item;
+      });
+    }
+    setSortingChangeEventProps({
+      sortedColumns: newSortedColumns,
+      columnHeaderProps: headerCellProps
+    });
+  };
+  var onRemoveSorting = function onRemoveSorting(headerCellProps) {
+    var sortingFieldName = getSortingFieldName(headerCellProps.column);
+    var sortedColumn = sortingChangeEventProps.sortedColumns.find(function (item) {
+      return item.sortingFieldName == sortingFieldName;
+    });
+    if (sortedColumn === undefined) {
+      return;
+    }
+    var prevSortIndex = sortedColumn.sortIndex;
+    var newSortedColumns = sortingChangeEventProps.sortedColumns.filter(function (item) {
+      return item.sortingFieldName != sortingFieldName;
+    }).map(function (item) {
+      if (item.sortIndex > prevSortIndex) {
+        item.sortIndex = item.sortIndex - 1;
+      }
+      return item;
+    });
+    setSortingChangeEventProps({
+      sortedColumns: newSortedColumns,
+      columnHeaderProps: headerCellProps
+    });
+  };
+  useImperativeHandle(ref, function () {
+    return {
+      getSortedColumns: getSortedColumns,
+      customClearSorting: customClearSorting
+    };
+  });
   return React.createElement(React.Fragment, null, React.createElement(DataGrid$1, Object.assign({
     keyExpr: keyExpr,
     dataSource: data,
@@ -38360,9 +38477,6 @@ var OdsMergeCellDataGrid = function OdsMergeCellDataGrid(props) {
     columnResizingMode: (_props$columnResizing = props.columnResizingMode) != null ? _props$columnResizing : "widget",
     showRowLines: true,
     allowColumnReordering: true,
-    remoteOperations: {
-      sorting: true
-    },
     paging: {
       enabled: false
     },
@@ -38401,7 +38515,8 @@ var OdsMergeCellDataGrid = function OdsMergeCellDataGrid(props) {
     }, col, {
       minWidth: 50,
       width: props.isColumnWidthFixed === true ? 160 : undefined,
-      cssClass: col.cssClass
+      cssClass: col.cssClass,
+      headerCellComponent: customHeaderCellComponent
     }), col.lookUp && React.createElement(Lookup, Object.assign({}, col.lookUp)), (col.dataField === "IsActive" || col.dataField === "isActive") && React.createElement(HeaderFilter, {
       dataSource: [{
         text: "Active",
@@ -38449,7 +38564,7 @@ var OdsMergeCellDataGrid = function OdsMergeCellDataGrid(props) {
   }), React.createElement(HeaderFilter, {
     visible: true
   }), React.createElement(Sorting, {
-    mode: "multiple"
+    mode: "none"
   }), !props.closeGridHeader && React.createElement(Export, {
     enabled: true,
     allowExportSelectedData: true,
@@ -38487,7 +38602,7 @@ var OdsMergeCellDataGrid = function OdsMergeCellDataGrid(props) {
     customLoad: customLoad,
     customSave: customSave
   })));
-};
+});
 
 var lodash = createCommonjsModule(function (module, exports) {
 (function() {