refactor table

scm-ui/ui-components/src/table/Column.tsx

@@ -2,11 +2,17 @@ import React, { FC, ReactNode } from "react";
 import { ColumnProps } from "./types";
 
 type Props = ColumnProps & {
-  children: (row: any) => ReactNode;
+  children: (row: any, columnIndex: number) => ReactNode;
 };
 
-const Column: FC<Props> = ({ row, children }) => {
-  return <>{children(row)}</>;
+const Column: FC<Props> = ({ row, columnIndex, children }) => {
+  if (row === undefined) {
+    throw new Error("missing row, use column only as child of Table");
+  }
+  if (columnIndex === undefined) {
+    throw new Error("missing row, use column only as child of Table");
+  }
+  return <>{children(row, columnIndex)}</>;
 };
 
 export default Column;

scm-ui/ui-components/src/table/SortIcon.tsx

@@ -0,0 +1,19 @@
+import React, { FC } from "react";
+import styled from "styled-components";
+import Icon from "../Icon";
+
+type Props = {
+  name: string;
+  isHidden: boolean;
+};
+
+const IconWithMarginLeft = styled(Icon)`
+  visibility: ${(props: Props) => (props.isHidden ? "hidden" : "visible")};
+  margin-left: 0.25em;
+`;
+
+const SortIcon: FC<Props> = (props: Props) => {
+  return <IconWithMarginLeft name={props.name} isHidden={props.isHidden} />;
+};
+
+export default SortIcon;

scm-ui/ui-components/src/table/Table.stories.tsx

@@ -3,12 +3,28 @@ import { storiesOf } from "@storybook/react";
 import Table from "./Table";
 import Column from "./Column";
 import TextColumn from "./TextColumn";
+import { ColumnProps } from "./types";
 
 storiesOf("Table|Table", module)
   .add("Default", () => (
-    <Table data={[{ first: "a", second: "b" }, { first: "d", second: "y" }]}>
+    <Table data={[{ first: "dddd", second: "xyz" }, { first: "abc", second: "bbbb" }]}>
       <Column header={"FIRST"}>{(row: any) => <h1>{row.first}</h1>}</Column>
-      <Column header={"SECOND"}>{(row: any) => <h2 style={{ color: "red" }}>{row.second}</h2>}</Column>
+      <Column
+        header={"SECOND"}
+        createComparator={(props: ColumnProps, columnIndex: number) => {
+          return (a: any, b: any) => {
+            if (a.second > b.second) {
+              return -1;
+            } else if (a.second < b.second) {
+              return 1;
+            } else {
+              return 0;
+            }
+          };
+        }}
+      >
+        {(row: any) => <h2 style={{ color: "red" }}>{row.second}</h2>}
+      </Column>
     </Table>
   ))
   .add("TextColumn", () => (

scm-ui/ui-components/src/table/Table.tsx

@@ -1,38 +1,44 @@
 import React, { FC, useState } from "react";
 import styled from "styled-components";
-import { SortTypes } from "./types";
-import Icon from "../Icon";
+import { Comparator } from "./types";
+import SortIcon from "./SortIcon";
 
 const StyledTable = styled.table.attrs(() => ({
   className: "table content is-hoverable"
 }))``;
 
-const IconWithMarginLeft = styled(Icon)`
-  margin-left: 0.25em;
-`;
-
-type SortableTableProps = {
+type Props = {
   data: any[];
+  sortable?: boolean;
 };
 
 // @ts-ignore
-const Table: FC<SortableTableProps> = ({ data, children }) => {
+const Table: FC<Props> = ({ data, sortable, children }) => {
   const [tableData, setTableData] = useState(data);
   const [ascending, setAscending] = useState(false);
-  const [lastSortBy, setlastSortBy] = useState(0);
+  const [lastSortBy, setlastSortBy] = useState<number | undefined>();
+  const [hoveredIndex, setHoveredIndex] = useState<number | undefined>();
 
-  // @ts-ignore
-  const sortFunctions = React.Children.map(children, child =>
-    // @ts-ignore
-    child.props.createComparator ? child.props.createComparator(child.props) : undefined
-  );
+  const isSortable = (child: any) => {
+    return sortable && child.props.createComparator;
+  };
+
+  const sortFunctions: Comparator | undefined[] = [];
+  React.Children.forEach(children, (child, index) => {
+    if (isSortable(child)) {
+      // @ts-ignore
+      sortFunctions.push(child.props.createComparator(child.props, index));
+    } else {
+      sortFunctions.push(undefined);
+    }
+  });
 
   const mapDataToColumns = (row: any) => {
     return (
       <tr>
-        {React.Children.map(children, child => {
+        {React.Children.map(children, (child, columnIndex) => {
           // @ts-ignore
-          return <td>{React.cloneElement(child, { ...child.props, row })}</td>;
+          return <td>{React.cloneElement(child, { ...child.props, columnIndex, row })}</td>;
         })}
       </tr>
     );
@@ -51,6 +57,7 @@ const Table: FC<SortableTableProps> = ({ data, children }) => {
       setAscending(true);
       sortOrder = true;
     }
+    // @ts-ignore
     const sortFunction = sortOrder ? sortFunctions[index] : sortDescending(sortFunctions[index]);
     sortableData.sort(sortFunction);
     setTableData(sortableData);
@@ -58,20 +65,21 @@ const Table: FC<SortableTableProps> = ({ data, children }) => {
     setlastSortBy(index);
   };
 
+  // @ts-ignore
   return (
     tableData.length > 0 && (
       <StyledTable>
         <thead>
           <tr>
             {React.Children.map(children, (child, index) => (
-              // @ts-ignore
               <th
-                className={child.props.createComparator && "has-cursor-pointer"}
-                onClick={child.props.createComparator ? () => tableSort(index) : undefined}
+                className={isSortable(child) && "has-cursor-pointer"}
+                onClick={isSortable(child) ? () => tableSort(index) : undefined}
+                onMouseEnter={() => setHoveredIndex(index)}
+                onMouseLeave={() => setHoveredIndex(undefined)}
               >
                 {child.props.header}
-
-                {child.props.createComparator && renderSortIcon(child.props.sortType, ascending)}
+                {isSortable(child) && renderSortIcon(child, ascending, index === lastSortBy || index === hoveredIndex)}
               </th>
             ))}
           </tr>
@@ -82,11 +90,15 @@ const Table: FC<SortableTableProps> = ({ data, children }) => {
   );
 };
 
-const renderSortIcon = (contentType: string, ascending: boolean) => {
-  if (contentType === SortTypes.Text) {
-    return <IconWithMarginLeft name={ascending ? "sort-alpha-down-alt" : "sort-alpha-down"} />;
+Table.defaultProps = {
+  sortable: true
+};
+
+const renderSortIcon = (child: any, ascending: boolean, showIcon: boolean) => {
+  if (child.props.ascendingIcon && child.props.descendingIcon) {
+    return <SortIcon name={ascending ? child.props.ascendingIcon : child.props.descendingIcon} isHidden={!showIcon} />;
   } else {
-    return <IconWithMarginLeft name={ascending ? "sort-amount-down-alt" : "sort-amount-down"} />;
+    return <SortIcon name={ascending ? "sort-amount-down-alt" : "sort-amount-down"} isHidden={!showIcon} />;
   }
 };
 

scm-ui/ui-components/src/table/TextColumn.tsx

@@ -1,5 +1,5 @@
-import React, {FC} from "react";
-import {ColumnProps, SortTypes} from "./types";
+import React, { FC } from "react";
+import { ColumnProps } from "./types";
 
 type Props = ColumnProps & {
   dataKey: string;
@@ -10,7 +10,7 @@ const TextColumn: FC<Props> = ({ row, dataKey }) => {
 };
 
 TextColumn.defaultProps = {
-  createComparator: (props: Props) => {
+  createComparator: (props: Props, columnIndex) => {
     return (a: any, b: any) => {
       if (a[props.dataKey] < b[props.dataKey]) {
         return -1;
@@ -21,7 +21,8 @@ TextColumn.defaultProps = {
       }
     };
   },
-  sortType: SortTypes.Text
+  ascendingIcon: "sort-alpha-down-alt",
+  descendingIcon: "sort-alpha-down"
 };
 
 export default TextColumn;

scm-ui/ui-components/src/table/types.ts

@@ -5,11 +5,8 @@ export type Comparator = (a: any, b: any) => number;
 export type ColumnProps = {
   header: ReactNode;
   row?: any;
-  createComparator?: (props: any) => Comparator;
-  sortType: SortTypes;
+  columnIndex?: number;
+  createComparator?: (props: any, columnIndex: number) => Comparator;
+  ascendingIcon?: string;
+  descendingIcon?: string;
 };
-
-export enum SortTypes {
-  Text = "text",
-  Other = "other"
-}