@applica-software-guru/react-admin 1.5.361 → 1.5.362

package/package.json

@@ -108,5 +108,5 @@
   "type": "module",
   "types": "dist/index.d.ts",
   "typings": "dist/index.d.ts",
-  "version": "1.5.361"
+  "version": "1.5.362"
 }

package/src/components/ra-lists/Datagrid/Datagrid.tsx

@@ -5,19 +5,29 @@ import clsx from 'clsx';
 import difference from 'lodash/difference';
 import union from 'lodash/union';
 import { Identifier, sanitizeListRestProps, useListContext, useTranslate } from 'ra-core';
-import { FC, cloneElement, createElement, isValidElement, useCallback, useEffect, useMemo, useRef } from 'react';
+import {
+  FC,
+  cloneElement,
+  createElement,
+  isValidElement,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from 'react';
 import * as React from 'react';
 import {
   BulkDeleteButton,
   DatagridBody,
   DatagridClasses,
-  DatagridHeader,
   DatagridLoading,
   DatagridRoot,
   PureDatagridBody,
   DatagridProps as RaDatagridProps
 } from 'react-admin';
 import { Empty } from '@/components/ra-lists/Empty';
+import { DatagridHeader, SortItem } from './DatagridHeader';
 
 const defaultBulkActionButtons = <BulkDeleteButton />;
 
@@ -125,6 +135,29 @@ const Datagrid = React.forwardRef((props, ref) => {
 
   const translate = useTranslate();
   const { sort, data, isLoading, onSelect, onToggleItem, selectedIds, setSort, total } = useListContext(props);
+  const [multiSort, setMultiSort] = useState<SortItem[]>([]);
+
+  const prevMultiSortKeyRef = useRef<string>('');
+  const multiSortKey = useMemo(() => multiSort.map((s) => `${s.field}:${s.order}`).join('|'), [multiSort]);
+
+  useEffect(() => {
+    const prevKey = prevMultiSortKeyRef.current;
+    if (prevKey === multiSortKey) return;
+
+    if (multiSort.length > 0) {
+      setSort({
+        field: multiSort.map((s) => s.field).join(','),
+        order: multiSort.map((s) => s.order).join(',') as 'ASC' | 'DESC'
+      });
+    }
+
+    prevMultiSortKeyRef.current = multiSortKey;
+  }, [multiSortKey, multiSort, setSort]);
+
+  const onMultiSortChange = useCallback((newMultiSort: SortItem[]) => {
+    setMultiSort(newMultiSort);
+  }, []);
+
   const hasBulkActions = !!bulkActionButtons !== false;
   const contextValue = useMemo(() => ({ isRowExpandable, expandSingle }), [isRowExpandable, expandSingle]);
   const lastSelected = useRef(null);
@@ -216,7 +249,7 @@ const Datagrid = React.forwardRef((props, ref) => {
         <div className={DatagridClasses.tableWrapper}>
           <Table ref={ref} className={DatagridClasses.table} size={size} {...sanitizeRestProps(rest)}>
             {createOrCloneElement(
-              header,
+              <DatagridHeader multiSort={multiSort} setMultiSort={onMultiSortChange} />,
               {
                 children,
                 sort,

package/src/components/ra-lists/Datagrid/DatagridHeader.tsx

@@ -0,0 +1,179 @@
+import { Checkbox, TableCell, TableHead, TableRow, TableSortLabel, Typography } from '@mui/material';
+import { RaRecord, useListContext, useTranslateLabel } from 'ra-core';
+import React, { ReactElement, ReactNode, useCallback, useMemo } from 'react';
+import { DatagridHeaderProps } from 'react-admin';
+
+type SortItem = {
+  field: string;
+  order: 'ASC' | 'DESC';
+};
+
+interface MultiSortDatagridHeaderProps extends Omit<DatagridHeaderProps, 'setSort'> {
+  setMultiSort?: (sort: SortItem[]) => void;
+  multiSort?: SortItem[];
+}
+
+function DatagridHeader(props: MultiSortDatagridHeaderProps): ReactElement {
+  const {
+    children,
+    hasExpand,
+    hasBulkActions,
+    isRowSelectable,
+    onSelect,
+    selectedIds = [],
+    data = [],
+    multiSort = [],
+    setMultiSort,
+    resource
+  } = props;
+  const { setSort } = useListContext();
+  const translateLabel = useTranslateLabel();
+
+  const updateSort = useCallback(
+    (field: string, isMultiSort: boolean = false) => {
+      if (!setMultiSort) {
+        const currentSortForField = multiSort.find((s) => s.field === field);
+        const newOrder = currentSortForField?.order === 'ASC' ? 'DESC' : 'ASC';
+        setSort({ field, order: newOrder });
+        return;
+      }
+
+      const existingIndex = multiSort.findIndex((s) => s.field === field);
+
+      if (!isMultiSort) {
+        if (existingIndex >= 0) {
+          const currentOrder = multiSort[existingIndex].order;
+          if (currentOrder === 'ASC') {
+            setMultiSort([{ field, order: 'DESC' }]);
+          } else {
+            setMultiSort([]);
+          }
+        } else {
+          setMultiSort([{ field, order: 'ASC' }]);
+        }
+        return;
+      }
+
+      const newMultiSort = [...multiSort];
+
+      if (existingIndex >= 0) {
+        const currentOrder = newMultiSort[existingIndex].order;
+        if (currentOrder === 'ASC') {
+          newMultiSort[existingIndex] = { field, order: 'DESC' };
+        } else {
+          newMultiSort.splice(existingIndex, 1);
+        }
+      } else {
+        newMultiSort.push({ field, order: 'ASC' });
+      }
+
+      setMultiSort(newMultiSort);
+    },
+    [multiSort, setMultiSort, setSort]
+  );
+
+  const handleSelectAll = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      if (!onSelect) {
+        return;
+      }
+      if (event.target.checked) {
+        const allIds = data
+          .filter((record: RaRecord) => (isRowSelectable ? isRowSelectable(record) : true))
+          .map((record: RaRecord) => record.id);
+        onSelect(allIds);
+      } else {
+        onSelect([]);
+      }
+    },
+    [data, isRowSelectable, onSelect]
+  );
+
+  const getSortForField = useCallback(
+    (field: string): { order: 'ASC' | 'DESC'; index: number } | null => {
+      const index = multiSort.findIndex((s) => s.field === field);
+      if (index >= 0) {
+        return { order: multiSort[index].order, index };
+      }
+      return null;
+    },
+    [multiSort]
+  );
+
+  const childrenArray = useMemo(() => React.Children.toArray(children), [children]);
+
+  const selectableCount = useMemo(
+    () => data.filter((record: RaRecord) => (isRowSelectable ? isRowSelectable(record) : true)).length,
+    [data, isRowSelectable]
+  );
+
+  const handleSortClick = useCallback(
+    (source: string) => (event: React.MouseEvent<unknown>) => {
+      updateSort(source, event.ctrlKey || event.metaKey);
+    },
+    [updateSort]
+  );
+
+  return (
+    <TableHead>
+      <TableRow>
+        {!!hasExpand && <TableCell />}
+        {!!hasBulkActions && (
+          <TableCell padding="checkbox">
+            <Checkbox
+              color="primary"
+              checked={selectedIds.length > 0 && selectedIds.length === selectableCount}
+              onChange={handleSelectAll}
+            />
+          </TableCell>
+        )}
+        {childrenArray.length > 0 ? (
+          childrenArray.map((child: ReactNode, index) => {
+            if (!child || typeof child !== 'object' || !('props' in child)) {
+              return <TableCell key={index} />;
+            }
+
+            const source =
+              child.props.source ?? (typeof child.props.label === 'string' ? child.props.label : undefined);
+            const sortable = child.props.sortable !== false && !!source;
+            const sortInfo = sortable ? getSortForField(source) : null;
+
+            const translated = translateLabel({
+              ...child.props,
+              source: child.props.source ?? source,
+              resource
+            });
+
+            const displayLabel: ReactNode = translated ?? child.props.label ?? null;
+
+            return (
+              <TableCell
+                key={child.props.source ?? index}
+                align={child.props.textAlign || 'left'}
+                sx={{ cursor: sortable ? 'pointer' : 'default' }}
+              >
+                {sortable ? (
+                  <TableSortLabel
+                    active={!!sortInfo}
+                    direction={(sortInfo?.order.toLowerCase() as 'asc' | 'desc') || 'asc'}
+                    onClick={handleSortClick(source)}
+                  >
+                    <Typography>{displayLabel}</Typography>
+                  </TableSortLabel>
+                ) : (
+                  displayLabel
+                )}
+              </TableCell>
+            );
+          })
+        ) : (
+          <TableCell />
+        )}
+      </TableRow>
+    </TableHead>
+  );
+}
+
+export { DatagridHeader };
+
+export type { MultiSortDatagridHeaderProps, SortItem };