feat(useSort): adds new sortToggleType to choose between Alternate and AlternateWithReset

rwieruch · rwieruch · commit b2b550e4d2f5 · 2022-04-24T22:16:47.000+02:00
diff --git a/.storybook/stories/Features/sort.story.js b/.storybook/stories/Features/sort.story.js
@@ -22,6 +22,7 @@ import {
   useSort,
   HeaderCellSort,
   SortIconPositions,
+  SortToggleType,
 } from '@table-library/react-table-library/sort';
 
 import { nodes } from '../data';
@@ -161,6 +162,66 @@ storiesOf('Features/Sort', module)
       </Table>
     );
   })
+  .add('include reset', () => {
+    const data = { nodes };
+
+    const sort = useSort(
+      data,
+      {
+        onChange: onSortChange,
+      },
+      {
+        sortToggleType: SortToggleType.AlternateWithReset,
+        sortFns: {
+          TASK: (array) => array.sort((a, b) => a.name.localeCompare(b.name)),
+          DEADLINE: (array) => array.sort((a, b) => a.deadline - b.deadline),
+          TYPE: (array) => array.sort((a, b) => a.type.localeCompare(b.type)),
+          COMPLETE: (array) => array.sort((a, b) => a.isComplete - b.isComplete),
+          TASKS: (array) => array.sort((a, b) => (a.nodes || []).length - (b.nodes || []).length),
+        },
+      },
+    );
+
+    function onSortChange(action, state) {
+      console.log(action, state);
+    }
+
+    return (
+      <Table data={data} sort={sort}>
+        {(tableList) => (
+          <>
+            <Header>
+              <HeaderRow>
+                <HeaderCellSort sortKey="TASK">Task</HeaderCellSort>
+                <HeaderCellSort sortKey="DEADLINE">Deadline</HeaderCellSort>
+                <HeaderCellSort sortKey="TYPE">Type</HeaderCellSort>
+                <HeaderCellSort sortKey="COMPLETE">Complete</HeaderCellSort>
+                <HeaderCellSort sortKey="TASKS">Tasks</HeaderCellSort>
+              </HeaderRow>
+            </Header>
+
+            <Body>
+              {tableList.map((item) => (
+                <Row item={item} key={item.id}>
+                  <Cell>{item.name}</Cell>
+                  <Cell>
+                    {item.deadline.toLocaleDateString('en-US', {
+                      year: 'numeric',
+                      month: '2-digit',
+                      day: '2-digit',
+                    })}
+                  </Cell>
+                  <Cell>{item.type}</Cell>
+                  <Cell>{item.isComplete.toString()}</Cell>
+                  <Cell>{item.nodes?.length}</Cell>
+                </Row>
+              ))}
+            </Body>
+          </>
+        )}
+      </Table>
+    );
+  })
   .add('sort icon size ', () => {
     const data = { nodes };
 
diff --git a/.storybook/stories/Types/sort.story.mdx b/.storybook/stories/Types/sort.story.mdx
@@ -15,6 +15,11 @@ export enum SortIconPositions {
   Suffix,
 }
 
+export enum SortToggleType {
+  Alternate,
+  AlternateWithReset,
+}
+
 export type SortOptionsIcon = {
   position?: SortIconPositions;
   margin?: string;
@@ -29,6 +34,7 @@ export type SortFn = (node: TableNode[]) => TableNode[];
 export type SortOptions = {
   sortFns: Record<string, SortFn>;
   isServer?: boolean;
+  sortToggleType?: SortToggleType;
   sortIcon?: SortOptionsIcon;
   isRecursive?: boolean;
 };
@@ -45,6 +51,7 @@ export type SortOptionsIconSound = {
 export type SortOptionsSound = {
   sortFns: Record<string, SortFn>;
   isServer: boolean;
+  sortToggleType: SortToggleType;
   sortIcon: SortOptionsIconSound;
   isRecursive: boolean;
 };
@@ -66,7 +73,7 @@ export type HeaderCellSortProps = {
   index?: number;
   sortKey: string;
   sortIcon?: SortOptionsIcon;
-  children: React.ReactNode;
+  children?: React.ReactNode;
 } & Record<string, any>;
 
 export type Sort = {
@@ -90,4 +97,4 @@ Access **all** types:
 
 ```javascript
 import * as TYPES from '@table-library/react-table-library/types';
-```
+```
diff --git a/src/sort/useSort.tsx b/src/sort/useSort.tsx
@@ -13,6 +13,7 @@ import {
   Sort,
   SortOptions,
   SortIconPositions,
+  SortToggleType,
 } from '@table-library/react-table-library/types/sort';
 
 import { HeaderCellSort } from './HeaderCellSort';
@@ -21,11 +22,25 @@ const TOGGLE_SORT = 'TOGGLE_SORT';
 const SET = 'SET';
 
 const toggleSort = (state: State, action: Action) => {
-  const reverse = action.payload.sortKey === state.sortKey && !state.reverse;
+  const isPreviousSort = action.payload.value.sortKey === state.sortKey;
+  const isPreviousReverse = state.reverse;
+
+  if (
+    isPreviousSort &&
+    isPreviousReverse &&
+    action.payload.options.sortToggleType === SortToggleType.AlternateWithReset
+  ) {
+    return {
+      sortKey: 'NONE',
+      reverse: false,
+    };
+  }
+
+  const isReverse = isPreviousSort && !isPreviousReverse;
 
   return {
-    ...action.payload,
-    reverse,
+    ...action.payload.value,
+    reverse: isReverse,
   };
 };
 
@@ -63,6 +78,7 @@ const DEFAULT_SORT_ICON = {
 
 const DEFAULT_OPTIONS = {
   isServer: false,
+  sortToggleType: SortToggleType.Alternate,
   sortIcon: DEFAULT_SORT_ICON,
   isRecursive: true,
 };
@@ -91,9 +107,9 @@ const useSort = (
     (value) =>
       dispatchWithMiddleware({
         type: TOGGLE_SORT,
-        payload: value,
+        payload: { value, options },
       }),
-    [dispatchWithMiddleware],
+    [options, dispatchWithMiddleware],
   );
 
   useSyncControlledState(controlledState, state, () =>
diff --git a/src/types/sort.ts b/src/types/sort.ts
@@ -8,6 +8,11 @@ export enum SortIconPositions {
   Suffix,
 }
 
+export enum SortToggleType {
+  Alternate,
+  AlternateWithReset,
+}
+
 export type SortOptionsIcon = {
   position?: SortIconPositions;
   margin?: string;
@@ -22,6 +27,7 @@ export type SortFn = (node: TableNode[]) => TableNode[];
 export type SortOptions = {
   sortFns: Record<string, SortFn>;
   isServer?: boolean;
+  sortToggleType?: SortToggleType;
   sortIcon?: SortOptionsIcon;
   isRecursive?: boolean;
 };
@@ -38,6 +44,7 @@ export type SortOptionsIconSound = {
 export type SortOptionsSound = {
   sortFns: Record<string, SortFn>;
   isServer: boolean;
+  sortToggleType: SortToggleType;
   sortIcon: SortOptionsIconSound;
   isRecursive: boolean;
 };
