@digigov/ui 0.33.0 → 0.34.0

package/src/core/Table/__stories__/WithSortFilters.tsx

@@ -7,76 +7,45 @@ import {
   TableHead,
   TableRow,
   TableBody,
-  TableHeadCellSort,
+  TableHeadCell,
   TableDataCell,
   TableNoDataRow,
-  useSortableData,
+  TableSortLabel,
 } from '@digigov/ui/core/Table';
+import { useSort } from '@digigov/ui/hooks/useSort';
 
-const headerItems = [
+const headerConfig = [
   {
     name: 'product',
     label: 'Προϊόν',
-    sortLabels: [
-      {
-        label: 'Αλφαβητική σειρά (Α -> Ω)',
-        direction: 'asc',
-        value: 1,
-      },
-      {
-        label: 'Αλφαβητική σειρά (Ω -> Α)',
-        direction: 'desc',
-        value: -1,
-      },
-    ],
+    sortLabels: {
+      asc: 'Αλφαβητική σειρά (Α -> Ω)',
+      desc: 'Αλφαβητική σειρά (Ω -> Α)',
+    },
   },
   {
     name: 'price',
     label: 'Τιμή',
-    sortLabels: [
-      {
-        label: 'Αύξουσα σειρά',
-        direction: 'ascending',
-        value: 1,
-      },
-      {
-        label: 'Φθίνουσα σειρά',
-        direction: 'descending',
-        value: -1,
-      },
-    ],
+    sortLabels: {
+      asc: 'Αύξουσα σειρά',
+      desc: 'Φθίνουσα σειρά',
+    },
   },
   {
     name: 'stock',
     label: 'Στοκ',
-    sortLabels: [
-      {
-        label: 'Αύξουσα σειρά',
-        direction: 'ascending',
-        value: 1,
-      },
-      {
-        label: 'Φθίνουσα σειρά',
-        direction: 'descending',
-        value: -1,
-      },
-    ],
+    sortLabels: {
+      asc: 'Αύξουσα σειρά',
+      desc: 'Φθίνουσα σειρά',
+    },
   },
   {
     name: 'date',
     label: 'Ημερομηνία',
-    sortLabels: [
-      {
-        label: 'Αύξουσα σειρά',
-        direction: 'ascending',
-        value: 1,
-      },
-      {
-        label: 'Φθίνουσα σειρά',
-        direction: 'descending',
-        value: -1,
-      },
-    ],
+    sortLabels: {
+      asc: 'Αύξουσα σειρά',
+      desc: 'Φθίνουσα σειρά',
+    },
   },
 ];
 
@@ -133,38 +102,32 @@ const data = [
 ];
 
 export const WithSortFilters = () => {
-  const { sortedData, sortedProps } = useSortableData(data);
+  const { sortedData, setSortedField, field, direction } = useSort(data);
 
   return (
     <div className="example">
-      <TableContainer
-      /* Possible style solution in order to display dropdown properly when we have only one table row
-       * style={{
-       *   overflow: 'inherit',
-       *  }}
-       */
-      >
+      <TableContainer>
         <Table>
           <TableCaption>Table of products</TableCaption>
           <TableHead>
             <TableRow>
-              {headerItems &&
-                headerItems.length > 0 &&
-                headerItems.map((header, index) => {
-                  return (
-                    <TableHeadCellSort
-                      key={index}
-                      {...sortedProps}
-                      headerItems={header}
+              {headerConfig.map((header, index) => {
+                return (
+                  <TableHeadCell key={index}>
+                    <TableSortLabel
+                      labels={header.sortLabels}
+                      onSort={(dir) => setSortedField(header.name, dir)}
+                      direction={header.name === field ? direction : 0}
                     >
                       {header.label}
-                    </TableHeadCellSort>
-                  );
-                })}
+                    </TableSortLabel>
+                  </TableHeadCell>
+                );
+              })}
             </TableRow>
           </TableHead>
           <TableBody>
-            {sortedData && sortedData.length > 0 ? (
+            {sortedData.length > 0 ? (
               sortedData.map((d, index) => {
                 return (
                   <TableRow key={index}>

package/src/core/Table/index.tsx

@@ -1,194 +1,112 @@
-import React, { useCallback, useState, useRef } from 'react';
+import React, { useRef } from 'react';
 import Table from '@digigov/react-core/Table';
-import { useMemo } from 'react';
 import {
   Dropdown,
   DropdownButton,
   DropdownContent,
+  DropdownProps,
 } from '@digigov/ui/admin/Dropdown';
 import { NavVertical } from '@digigov/ui/core/NavList/NavVertical';
 import { NavVerticalItem } from '@digigov/ui/core/NavList/NavVerticalItem';
 import { CaretIcon } from '@digigov/ui/core/SvgIcon';
-import TableHeadCellBase, {
-  TableHeadCellProps as TableHeadCellSortProps,
-} from '@digigov/react-core/TableHeadCell';
 import CaretContainer from '@digigov/ui/core/CaretContainer';
 
-export interface sortedProps extends TableHeadCellSortProps {
-  sortedAscDesc?: (x: any, y: number) => void;
-  sortedField?: string;
-  sortedDirectionValue?: number;
-  headerItems?: any;
-  sortedData?: any[];
-}
-
-const useSortableData = (items) => {
-  const [field, setField] = useState('');
-  const [directionValue, setDirectionValue] = useState(0);
-  const sortedItems = useMemo(() => {
-    const sortableItems = [...items];
-    if (sortableItems.length === 0) {
-      return;
-    }
-    if (field) {
-      sortableItems.sort((a, b) => {
-        if (a[field] === null) return 1;
-        if (b[field] === null) return -1;
-        if (a[field] === null && b[field] === null) return 0;
-        return (
-          a[field].toString().localeCompare(b[field].toString(), undefined, {
-            numeric: true,
-          }) * (directionValue > 0 ? 1 : -1)
-        );
-      });
-    }
-    return sortableItems;
-  }, [items, directionValue, field]);
+export type SortDirection = 1 | -1 | 0;
 
-  const sortAscDesc = (item, value) => {
-    setDirectionValue(value);
-    setField(item);
+export interface TableSortLabelProps extends DropdownProps {
+  labels: {
+    asc: string;
+    desc: string;
   };
+  disabled?: boolean;
+  direction?: SortDirection;
+  onSort: (direction: SortDirection) => void;
+}
 
-  return {
-    sortedData: sortedItems,
-    sortedProps: {
-      sortedData: sortedItems,
-      sortedDirectionValue: directionValue,
-      sortedField: field,
-      sortedAscDesc: sortAscDesc,
-    },
-  };
-};
-const TableHeadCellSort = React.forwardRef<HTMLTableCellElement, sortedProps>(
-  function TableHeadCellSort({ ...props }, ref) {
-    return <TableHeadCellSortBase ref={ref} {...props} />;
-  }
-);
-
-export const TableHeadCellSortBase = React.forwardRef<
-  HTMLTableCellElement,
-  sortedProps
->(function TableHeadCellSortBase(
-  {
-    sortedAscDesc,
-    sortedField,
-    sortedDirectionValue,
-    headerItems,
-    sortedData,
-    children,
-    ...props
-  },
+export const TableSortLabel = React.forwardRef<
+  HTMLDetailsElement,
+  TableSortLabelProps
+>(function TableSortLabel(
+  { labels, disabled, children, direction = 0, onSort, ...props },
   ref
 ) {
-  const innerRef = useRef() as React.MutableRefObject<HTMLDetailsElement>;
-  const { name, sortLabels } = headerItems || {};
-  const [sortDirection, setSortDirection] = useState(0);
-  const setSortAscDesc = useCallback(
-    (name, value) => {
-      if (sortedAscDesc) {
-        if (sortedField !== name) {
-          sortedAscDesc('', 0);
-
-          setSortDirection(value);
-          sortedAscDesc(name, value);
-        } else {
-          if (value !== sortDirection) {
-            setSortDirection(value);
-            sortedAscDesc(name, value);
-          } else {
-            setSortDirection(0);
-            sortedAscDesc('', 0);
-          }
-        }
-      }
-    },
-    [sortedField, sortedDirectionValue, sortDirection]
-  );
-  const onKeyDown = useCallback(
-    (e, name, value) => {
-      if (e.key === 'Enter' && innerRef.current.contains(e.target)) {
-        if (innerRef.current.open) {
-          setSortAscDesc(name, value);
-          innerRef.current.open = false;
-        }
-      }
-    },
-    [name, sortDirection]
-  );
-  const setDisabled = useCallback(
-    (sortedData) => {
-      return sortedData === undefined || sortedData.length === 0 ? true : false;
-    },
-    [sortedData]
-  );
-  const setCaretColor = useCallback(
-    (value: number) => {
-      if (sortedField === name) {
-        return sortedDirectionValue === value ? 'dark' : 'gray';
-      } else {
-        return 'gray';
-      }
-    },
-    [sortedDirectionValue, sortedField]
-  );
+  // TODO: this is a workaround for the dropdown component
+  // https://itnext.io/reusing-the-ref-from-forwardref-with-react-hooks-4ce9df693dd
+  const dropdownRef = useRef<HTMLDetailsElement | null>(null);
+  const active = [-1, 1].includes(direction);
   return (
-    <TableHeadCellBase {...props} ref={ref}>
-      <Dropdown tabIndex={0} disabled={setDisabled(sortedData)} ref={innerRef}>
-        <DropdownButton
-          variant="link"
-          underline={sortedField === name ? true : false}
-        >
-          {children}
-          <CaretContainer marginLeft={1}>
-            {sortLabels &&
-              sortLabels.length > 0 &&
-              sortLabels.map((obj, index) => {
-                return (
-                  <CaretIcon
-                    key={index}
-                    direction={obj.value == 1 ? 'up' : 'down'}
-                    size="m"
-                    variant={setCaretColor(obj.value)}
-                  />
-                );
-              })}
-          </CaretContainer>
-        </DropdownButton>
-        <DropdownContent>
-          {sortLabels &&
-            sortLabels.length > 0 &&
-            sortLabels.map((obj, index) => {
-              return (
-                <NavVertical key={index}>
-                  <NavVerticalItem
-                    {...(sortedField === name &&
-                      sortedDirectionValue === obj.value && { active: true })}
-                    tabIndex={0}
-                    onClick={() => {
-                      if (setSortAscDesc) {
-                        setSortAscDesc(name, obj.value);
-                        innerRef.current.open = false;
-                      }
-                    }}
-                    onKeyDown={(e) => {
-                      onKeyDown(e, name, obj.value);
-                    }}
-                  >
-                    <CaretIcon
-                      direction={obj.value == 1 ? 'up' : 'down'}
-                      marginRight={1}
-                      marginTop={1}
-                      size="m"
-                    />
-                    {obj.label}
-                  </NavVerticalItem>
-                </NavVertical>
-              );
-            })}
-        </DropdownContent>
-      </Dropdown>
-    </TableHeadCellBase>
+    <Dropdown
+      ref={(el) => {
+        dropdownRef.current = el;
+        typeof ref === 'function' && ref(el);
+      }}
+      disabled={disabled}
+      {...props}
+    >
+      <DropdownButton variant="link" tabIndex={0} underline={active}>
+        {children}
+        <CaretContainer marginLeft={1}>
+          <CaretIcon
+            direction={'up'}
+            size="m"
+            variant={direction === 1 ? 'dark' : 'gray'}
+          />
+          <CaretIcon
+            direction={'down'}
+            size="m"
+            variant={direction === -1 ? 'dark' : 'gray'}
+          />
+        </CaretContainer>
+      </DropdownButton>
+      <DropdownContent>
+        <NavVertical>
+          <NavVerticalItem
+            active={direction === 1}
+            tabIndex={0}
+            onClick={() => {
+              onSort(1);
+              dropdownRef.current && (dropdownRef.current.open = false);
+            }}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                onSort(1);
+                dropdownRef.current && (dropdownRef.current.open = false);
+              }
+            }}
+          >
+            <CaretIcon
+              direction={'up'}
+              marginRight={1}
+              marginTop={1}
+              size="m"
+            />
+            {labels.asc}
+          </NavVerticalItem>
+          <NavVerticalItem
+            active={direction === -1}
+            tabIndex={0}
+            onClick={() => {
+              onSort(-1);
+              dropdownRef.current && (dropdownRef.current.open = false);
+            }}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                onSort(-1);
+                dropdownRef.current && (dropdownRef.current.open = false);
+              }
+            }}
+          >
+            <CaretIcon
+              direction={'down'}
+              marginRight={1}
+              marginTop={1}
+              size="m"
+            />
+            {labels.desc}
+          </NavVerticalItem>
+        </NavVertical>
+      </DropdownContent>
+    </Dropdown>
   );
 });
 
@@ -202,5 +120,4 @@ export * from '@digigov/react-core/TableHeadCell';
 export * from '@digigov/react-core/TableRow';
 export * from '@digigov/react-core/TableNoDataRow';
 export * from '@digigov/ui/core/Table/TableFloatingScroll';
-export { TableHeadCellSort, useSortableData };
 export default Table;

package/src/hooks/useSort.tsx

@@ -0,0 +1,53 @@
+import { useState } from 'react';
+import { useMemo } from 'react';
+import { SortDirection } from '@digigov/ui/core/Table';
+
+export interface UseSortResult {
+  sortedData: any[];
+  setSortedField: (item: string, value: SortDirection) => void;
+  field: string;
+  direction: SortDirection;
+}
+export type SortData = Record<string, any>[];
+export const useSort = (data: SortData): UseSortResult => {
+  const [sortDataBy, setSortDataBy] = useState('');
+  const [direction, setDirection] = useState<-1 | 1 | 0>(0);
+  const sortedItems = useMemo(() => {
+    const sortableItems = [...data];
+    if (sortableItems.length === 0) {
+      return [];
+    }
+    if (sortDataBy) {
+      sortableItems.sort((a, b) => {
+        if (a[sortDataBy] === null) return 1;
+        if (b[sortDataBy] === null) return -1;
+        if (a[sortDataBy] === null && b[sortDataBy] === null) return 0;
+        return (
+          a[sortDataBy]
+            .toString()
+            .localeCompare(b[sortDataBy].toString(), undefined, {
+              numeric: true,
+            }) * (direction > 0 ? 1 : -1)
+        );
+      });
+    }
+    return sortableItems;
+  }, [data, direction, sortDataBy]);
+
+  const setSortedField = (item, value) => {
+    if (item === sortDataBy && value === direction) {
+      setDirection(0);
+      setSortDataBy('');
+      return;
+    }
+    setDirection(value);
+    setSortDataBy(item);
+  };
+
+  return {
+    sortedData: sortedItems,
+    setSortedField,
+    field: sortDataBy,
+    direction,
+  };
+};