feat(innovaccer#232): adds sorting toggle on Grid Head click

aditya-kumawat · Jul 20, 2020 · f84b9d2 · f84b9d2
1 parent 52ab440
commit f84b9d2
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 13 deletions.
diff --git a/core/components/organisms/grid/Cell.tsx b/core/components/organisms/grid/Cell.tsx
@@ -56,13 +56,17 @@ const HeaderCell = (props: HeaderCellProps) => {
   const el = React.createRef<HTMLDivElement>();
 
   const sortOptions: DropdownProps['options'] = [
-    { label: 'Sort Ascending', value: 'sortAsc', icon: 'arrow_downward', optionType: 'WITH_ICON' },
-    { label: 'Sort Descending', value: 'sortDesc', icon: 'arrow_upward', optionType: 'WITH_ICON' },
+    { label: 'Sort Ascending', value: 'sortAsc', icon: 'arrow_downward' },
+    { label: 'Sort Descending', value: 'sortDesc', icon: 'arrow_upward' },
   ];
+  const unsortOption = { label: 'Unsort', value: 'unsort', icon: 'unfold_more' };
+  if (sorted === 'asc') sortOptions[0] = unsortOption;
+  if (sorted === 'desc') sortOptions[1] = unsortOption;
+
   let options: DropdownProps['options'] = [
-    { label: 'Pin Left', value: 'pinLeft', icon: 'skip_previous', optionType: 'WITH_ICON' },
-    { label: 'Pin Right', value: 'pinRight', icon: 'skip_next', optionType: 'WITH_ICON' },
-    { label: 'Hide Column', value: 'hide', icon: 'cancel', optionType: 'WITH_ICON' },
+    { label: 'Pin Left', value: 'pinLeft', icon: 'skip_previous' },
+    { label: 'Pin Right', value: 'pinRight', icon: 'skip_next' },
+    { label: 'Hide Column', value: 'hide', icon: 'cancel' },
   ];
   if (sorting) options = [...sortOptions, ...options];
 
@@ -86,6 +90,13 @@ const HeaderCell = (props: HeaderCellProps) => {
     >
       <div
         className="Grid-cellContent"
+        onClick={() => {
+          if (sorting) {
+            if (sorted === 'asc') _this.onMenuChange(name, 'sortDesc');
+            if (sorted === 'desc') _this.onMenuChange(name, 'unsort');
+            if (!sorted) _this.onMenuChange(name, 'sortAsc');
+          }
+        }}
         onMouseDown={() => {
           if (draggable) reorderCol(_this, name, el.current);
         }}
@@ -148,8 +159,9 @@ const HeaderCell = (props: HeaderCellProps) => {
             </span>
           ) : (
               <Dropdown
-                key={name}
+                key={`${name}-${sorted}`}
                 menu={true}
+                optionType="WITH_ICON"
                 triggerOptions={{
                   customTrigger: () => (
                     <Button

diff --git a/core/components/organisms/grid/Grid.tsx b/core/components/organisms/grid/Grid.tsx
@@ -8,7 +8,7 @@ import { MainGrid } from './MainGrid';
 import { BaseProps, extractBaseProps } from '@/utils/types';
 import { NestedRowProps } from './GridNestedRow';
 
-export type SortType = 'asc' | 'desc';
+export type SortType = 'asc' | 'desc' | 'unsort';
 export type Pinned = 'left' | 'right';
 export type Alignment = 'left' | 'right' | 'center';
 export type Comparator = (a: RowData, b: RowData) => -1 | 0 | 1;
@@ -401,6 +401,9 @@ export class Grid extends React.Component<GridProps, GridState> {
       case 'sortDesc':
         sortColumn.call(this, name, 'desc');
         break;
+      case 'unsort':
+        sortColumn.call(this, name, 'unsort');
+        break;
       case 'pinLeft':
         pinColumn.call(this, name, 'left');
         break;

diff --git a/core/components/organisms/grid/columnUtility.tsx b/core/components/organisms/grid/columnUtility.tsx
@@ -1,5 +1,5 @@
 import { Grid } from '@/index';
-import { ColumnSchema, Pinned } from './Grid';
+import { ColumnSchema, Pinned, SortType } from './Grid';
 
 export const resizeCol = (_this: Grid, name: string, el: HTMLDivElement | null) => {
   const elX = el?.getBoundingClientRect().x;
@@ -72,22 +72,21 @@ export const reorderCol = (_this: Grid, name: string, el: HTMLDivElement | null)
   window.addEventListener('mouseup', stopReorder);
 };
 
-export function sortColumn(this: Grid, name: ColumnSchema['name'], type: 'asc' | 'desc') {
+export function sortColumn(this: Grid, name: ColumnSchema['name'], type: SortType) {
   let {
     sortingList
   } = this.props;
 
   const index = sortingList.findIndex(l => l.name === name);
-  if (index === -1) {
-    sortingList.push({ name, type });
-  } else {
+  if (index !== -1) {
     sortingList = [
       ...sortingList.slice(0, index),
       ...sortingList.slice(index + 1),
-      { name, type }
     ];
   }
 
+  if (type !== 'unsort') sortingList.push({ name, type });
+
   this.updateSortingList(sortingList);
 }