ods-component-lib 1.18.243 → 1.18.244

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { ButtonType } from "antd/es/button/buttonHelpers";
 import { IButtonProps, IDataGridOptions, IEditingProps, ISelectionProps, ISummaryProps } from "devextreme-react/data-grid";
-import { ITooltipType } from "../../../utils/customTypes";
+import { ISortedColumn, ITooltipType } from "../../../utils/customTypes";
 import { IColumnOptions, IMasterDetailDatas, IMasterDetailFeatures } from "../OdsMasterDetailDataGrid/types";
 export declare type SummaryTypes = "avg" | "count" | "custom" | "max" | "min" | "sum";
 interface IExportProps {
@@ -47,6 +47,7 @@ export interface IOdsDataGridProps extends IDataGridOptions {
     masterDetailFeatures?: IMasterDetailFeatures;
     DetailGridComponent?: React.FC<any>;
     mergeDataFields: string[];
+    onSortingChanged?(sortedColumns: ISortedColumn[], headerCellProps?: any): void;
 }
 export interface ISummaryRowOptions {
     summaryLoadedDataLabel?: string;

package/dist/components/devextreme/OdsMergeCellDataGrid/OdsMergeCellDataGrid.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import "./OdsMergeCellDataGrid.css";
 import { IOdsDataGridProps } from "./OdsMergeCellDataGrid.Types";
-declare const OdsMergeCellDataGrid: (props: IOdsDataGridProps) => React.JSX.Element;
+declare const OdsMergeCellDataGrid: React.ForwardRefExoticComponent<IOdsDataGridProps & React.RefAttributes<unknown>>;
 export default OdsMergeCellDataGrid;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { IColumnProps, IGanttOptions, IItemProps } from "devextreme-react/gantt";
-import { ExportDocumentType, ITooltipType, SortingProcessType, SortingType } from "../../../utils/customTypes";
+import { ExportDocumentType, ISortedColumn, ITooltipType, SortingProcessType } from "../../../utils/customTypes";
 import { IButtonProps } from "devextreme-react/data-grid";
 import { ButtonType } from "antd/es/button/buttonHelpers";
 export declare type SortingMode = "single" | "multiple" | "none";
@@ -111,12 +111,6 @@ export interface IOdsTimelineTableStatusColumnProps extends IOdsTimelineTableCol
 export interface IOdsTimelineCheckboxColumnProps extends IOdsTimelineTableColumnProps {
     onCheckboxColumnChange(e: ICheckboxColumnChange): void;
 }
-export interface ISortedColumn {
-    sortingFieldName: string;
-    sortType: SortingType;
-    sortIndex: number;
-    sortingText: string;
-}
 export interface IOdsTimelineTableToolbarSettings {
     visible?: boolean;
     location?: "before" | "after";

package/dist/index.css

@@ -223,6 +223,22 @@ tr._2CvVM._3Xrp3._19iuB._3udtX {
     pointer-events: none;
     background-color: #f0f0f0;
 }
+._1Y6Xh:has(._1XPxo) {
+  width: 100%;
+}
+
+._1XPxo {
+  cursor: pointer;
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+
+._17w-X {
+  flex: 1;
+  align-content: center;
+}
+
 ._3lbve {
   writing-mode: vertical-lr;
 }

package/dist/index.js

@@ -38049,7 +38049,7 @@ OdsMergeCellDataGridHelper.getInstance = function () {
 };
 
 var useToken$2 = antd.theme.useToken;
-var OdsMergeCellDataGrid = function OdsMergeCellDataGrid(props) {
+var OdsMergeCellDataGrid = React.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,
@@ -38069,6 +38069,12 @@ var OdsMergeCellDataGrid = function OdsMergeCellDataGrid(props) {
   var _useState4 = React.useState([]),
     mergedCellInfo = _useState4[0],
     setMergedCellInfo = _useState4[1];
+  var _useState5 = React.useState({
+      sortedColumns: [],
+      columnHeaderProps: null
+    }),
+    sortingChangeEventProps = _useState5[0],
+    setSortingChangeEventProps = _useState5[1];
   var _useStyles = useStyles$a(),
     gridStyle = _useStyles.styles;
   React.useEffect(function () {
@@ -38114,6 +38120,11 @@ var OdsMergeCellDataGrid = function OdsMergeCellDataGrid(props) {
       refGrid.current.instance.updateDimensions();
     }
   }, []);
+  React.useEffect(function () {
+    if (sortingChangeEventProps.columnHeaderProps !== null) {
+      props.onSortingChanged && props.onSortingChanged(sortingChangeEventProps.sortedColumns, sortingChangeEventProps.columnHeaderProps);
+    }
+  }, [sortingChangeEventProps]);
   var actionButtons = React.useMemo(function () {
     if (props.actionButtonGroup) {
       if (props.actionButtonGroup.length > 3 && !props.edit) {
@@ -38375,6 +38386,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__default.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__default.createElement("span", {
+        className: "headerCaption"
+      }, props.data.column.caption), getSortIcon(props.data.column));
+    }
+    return React__default.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__default.createElement(outline.UpArrow2Icon, null) : React__default.createElement(outline.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
+    });
+  };
+  React.useImperativeHandle(ref, function () {
+    return {
+      getSortedColumns: getSortedColumns,
+      customClearSorting: customClearSorting
+    };
+  });
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(DataGrid__default, Object.assign({
     keyExpr: keyExpr,
     dataSource: data,
@@ -38386,9 +38503,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
     },
@@ -38427,7 +38541,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__default.createElement(devextremeReact.Lookup, Object.assign({}, col.lookUp)), (col.dataField === "IsActive" || col.dataField === "isActive") && React__default.createElement(DataGrid.HeaderFilter, {
       dataSource: [{
         text: "Active",
@@ -38475,7 +38590,7 @@ var OdsMergeCellDataGrid = function OdsMergeCellDataGrid(props) {
   }), React__default.createElement(DataGrid.HeaderFilter, {
     visible: true
   }), React__default.createElement(DataGrid.Sorting, {
-    mode: "multiple"
+    mode: "none"
   }), !props.closeGridHeader && React__default.createElement(DataGrid.Export, {
     enabled: true,
     allowExportSelectedData: true,
@@ -38513,7 +38628,7 @@ var OdsMergeCellDataGrid = function OdsMergeCellDataGrid(props) {
     customLoad: customLoad,
     customSave: customSave
   })));
-};
+});
 
 var lodash = createCommonjsModule(function (module, exports) {
 (function() {