[DataGrid] Render SortGridMenuItems according to sortingOrder props

mui · Dec 7, 2022 · 3f61b50 · 3f61b50
1 parent 056e052
commit 3f61b50
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 13 deletions.
diff --git a/packages/grid/x-data-grid-pro/src/tests/columnHeaders.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/columnHeaders.DataGridPro.test.tsx
@@ -235,7 +235,7 @@ describe('<DataGridPro /> - Column Headers', () => {
       clock.runToLast();
 
       const menu = screen.queryByRole('menu');
-      const unsortMenuitem = screen.queryByRole('menuitem', { name: /unsort/i });
+      const unsortMenuitem = screen.queryByRole('menuitem', { name: 'Sort by DESC' });
       expect(menu).toHaveFocus();
 
       fireEvent.keyDown(menu, { key: 'ArrowDown' });

diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/SortGridMenuItems.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/SortGridMenuItems.tsx
@@ -6,11 +6,13 @@ import { gridSortModelSelector } from '../../../hooks/features/sorting/gridSorti
 import { GridSortDirection } from '../../../models/gridSortModel';
 import { useGridApiContext } from '../../../hooks/utils/useGridApiContext';
 import { GridFilterItemProps } from './GridFilterItemProps';
+import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 
-const SortGridMenuItems = (props: GridFilterItemProps) => {
+function SortGridMenuItems(props: GridFilterItemProps) {
   const { column, onClick } = props;
   const apiRef = useGridApiContext();
   const sortModel = useGridSelector(apiRef, gridSortModelSelector);
+  const rootProps = useGridRootProps();
 
   const sortDirection = React.useMemo(() => {
     if (!column) {
@@ -20,33 +22,49 @@ const SortGridMenuItems = (props: GridFilterItemProps) => {
     return sortItem?.sort;
   }, [column, sortModel]);
 
+  const sortingOrder = React.useMemo<GridSortDirection[]>(
+    () => column.sortingOrder ?? rootProps.sortingOrder,
+    [column, rootProps],
+  );
+
   const onSortMenuItemClick = React.useCallback(
     (event: React.MouseEvent<HTMLElement>) => {
       onClick(event);
-      const direction = event.currentTarget.getAttribute('data-value') || null;
+      const direction = event.currentTarget.getAttribute('data-value');
       apiRef.current.sortColumn(column!, direction as GridSortDirection);
     },
     [apiRef, column, onClick],
   );
 
+  const getSortKey = React.useCallback((direction: GridSortDirection) => {
+    if (direction === 'asc') {
+      return 'columnMenuSortAsc';
+    }
+    if (direction === 'desc') {
+      return 'columnMenuSortDesc';
+    }
+    return 'columnMenuUnsort';
+  }, []);
+
   if (!column || !column.sortable) {
     return null;
   }
 
   return (
     <React.Fragment>
-      <MenuItem onClick={onSortMenuItemClick} disabled={sortDirection == null}>
-        {apiRef.current.getLocaleText('columnMenuUnsort')}
-      </MenuItem>
-      <MenuItem onClick={onSortMenuItemClick} data-value="asc" disabled={sortDirection === 'asc'}>
-        {apiRef.current.getLocaleText('columnMenuSortAsc')}
-      </MenuItem>
-      <MenuItem onClick={onSortMenuItemClick} data-value="desc" disabled={sortDirection === 'desc'}>
-        {apiRef.current.getLocaleText('columnMenuSortDesc')}
-      </MenuItem>
+      {sortingOrder.map((direction) => (
+        <MenuItem
+          key={direction}
+          onClick={onSortMenuItemClick}
+          data-value={direction}
+          disabled={sortDirection == direction}
+        >
+          {apiRef.current.getLocaleText(getSortKey(direction))}
+        </MenuItem>
+      ))}
     </React.Fragment>
   );
-};
+}
 
 SortGridMenuItems.propTypes = {
   // ----------------------------- Warning --------------------------------