fix(useHandleSortState): fix correct direction when switching from ot…

…her active column (#1876)
dnbexperience · Jan 7, 2023 · 126a2fa · 126a2fa
1 parent 6527b6f
commit 126a2fa
Show file tree

Hide file tree

Showing 3 changed files with 113 additions and 4 deletions.
diff --git a/packages/dnb-eufemia/src/components/table/__tests__/useHandleSortState.test.tsx b/packages/dnb-eufemia/src/components/table/__tests__/useHandleSortState.test.tsx
@@ -522,4 +522,100 @@ describe('useHandleSortState', () => {
       },
     })
   })
+
+  it('should set correct direction/active state when switching from active column', () => {
+    const { result } = renderHook(useHandleSortState, {
+      initialProps: {
+        one: {
+          active: true,
+          direction: 'asc',
+        },
+        two: {
+          direction: 'desc',
+        },
+      },
+    })
+
+    const sortHandler = {
+      one: expect.any(Function),
+      two: expect.any(Function),
+    }
+
+    const simulateOne = () => act(() => result.current.sortHandler.one())
+    const simulateTwo = () => act(() => result.current.sortHandler.two())
+
+    expect(result.current).toEqual({
+      activeSortName: 'one',
+      sortHandler,
+      sortState: {
+        one: {
+          active: true,
+          direction: 'asc',
+          reversed: false,
+        },
+        two: {
+          active: false,
+          direction: 'desc',
+          reversed: true,
+        },
+      },
+    })
+
+    simulateTwo()
+
+    expect(result.current).toEqual({
+      activeSortName: 'two',
+      sortHandler,
+      sortState: {
+        one: {
+          active: false,
+          direction: 'asc',
+          reversed: false,
+        },
+        two: {
+          active: true,
+          direction: 'desc',
+          reversed: true,
+        },
+      },
+    })
+
+    simulateTwo()
+
+    expect(result.current).toEqual({
+      activeSortName: null,
+      sortHandler,
+      sortState: {
+        one: {
+          active: false,
+          direction: 'asc',
+          reversed: false,
+        },
+        two: {
+          active: false,
+          direction: 'off',
+          reversed: undefined,
+        },
+      },
+    })
+
+    simulateOne()
+
+    expect(result.current).toEqual({
+      activeSortName: 'one',
+      sortHandler,
+      sortState: {
+        one: {
+          active: true,
+          direction: 'asc',
+          reversed: false,
+        },
+        two: {
+          active: false,
+          direction: 'off',
+          reversed: undefined,
+        },
+      },
+    })
+  })
 })
diff --git a/packages/dnb-eufemia/src/components/table/stories/Table.stories.tsx b/packages/dnb-eufemia/src/components/table/stories/Table.stories.tsx
@@ -635,7 +635,10 @@ export function TableSort() {
   const { sortState, sortHandler } = useHandleSortState({
     column1: {
       active: true,
-      direction: 'off',
+      direction: 'asc',
+    },
+    column2: {
+      direction: 'desc',
     },
   })
 
@@ -681,10 +684,18 @@ export function TableSort() {
             active={sortState.column1.active}
             reversed={sortState.column1.reversed}
           >
-            <Th.SortButton text={'Name'} onClick={sortHandler.column1} />
+            <Th.SortButton text="Name" onClick={sortHandler.column1} />
           </Th>
-          <Th scope="col" sortable>
-            <Th.SortButton text={'Min amount'} />
+          <Th
+            scope="col"
+            sortable
+            active={sortState.column2.active}
+            reversed={sortState.column2.reversed}
+          >
+            <Th.SortButton
+              text="Min amount"
+              onClick={sortHandler.column2}
+            />
           </Th>
         </Tr>
       </thead>

diff --git a/packages/dnb-eufemia/src/components/table/useHandleSortState.tsx b/packages/dnb-eufemia/src/components/table/useHandleSortState.tsx
@@ -83,6 +83,8 @@ export function useHandleSortState(
           state.direction = state.lastDirection
           state.active = true
           state.lastDirection = null
+        } else if (!state.active && state.direction !== 'off') {
+          state.active = true
         } else {
           state.direction = getNextMode({
             direction: state.direction,