@ltht-react/table 2.0.2 → 2.0.4

package/README.md

@@ -1,15 +1,15 @@
-# Select
-
-<!-- STORY -->
-
-### Import
-
-```js
-import Select from '@ltht-react/table'
-```
-
-### Usage
-
-```jsx
-<Table />
-```
+# Select
+
+<!-- STORY -->
+
+### Import
+
+```js
+import Select from '@ltht-react/table'
+```
+
+### Usage
+
+```jsx
+<Table />
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ltht-react/table",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "description": "ltht-react Table component.",
   "author": "LTHT",
   "homepage": "",
@@ -8,7 +8,8 @@
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
   "files": [
-    "lib"
+    "lib",
+    "src"
   ],
   "directories": {
     "lib": "lib"
@@ -27,15 +28,15 @@
   "dependencies": {
     "@emotion/react": "^11.0.0",
     "@emotion/styled": "^11.0.0",
-    "@ltht-react/button": "^2.0.2",
-    "@ltht-react/icon": "^2.0.2",
-    "@ltht-react/menu": "^2.0.2",
-    "@ltht-react/styles": "^2.0.2",
-    "@ltht-react/types": "^2.0.2",
-    "@ltht-react/utils": "^2.0.2",
+    "@ltht-react/button": "^2.0.4",
+    "@ltht-react/icon": "^2.0.4",
+    "@ltht-react/menu": "^2.0.4",
+    "@ltht-react/styles": "^2.0.4",
+    "@ltht-react/types": "^2.0.4",
+    "@ltht-react/utils": "^2.0.4",
     "@tanstack/react-table": "^8.10.7",
     "react": "^18.2.0",
     "react-uuid": "^2.0.0"
   },
-  "gitHead": "c1487e107fcc3e16a95a65393cfb673ab92db352"
+  "gitHead": "b8fe243323a0f1b9ab345475db38c73fd3b35312"
 }

package/src/atoms/questionnaire-withdrawn-table-cell.tsx

@@ -0,0 +1,15 @@
+import { FC } from 'react'
+import styled from '@emotion/styled'
+
+const StyledText = styled.div`
+  text-decoration: line-through;
+  color: gray;
+`
+
+const QuestionnaireWithdrawnTableCell: FC<WithdrawnCellProps> = ({ text }) => <StyledText>{text ?? ''}</StyledText>
+
+export interface WithdrawnCellProps {
+  text?: string
+}
+
+export default QuestionnaireWithdrawnTableCell

package/src/index.tsx

@@ -0,0 +1,7 @@
+import Table, { Header, DataEntity, TableData, CellProps } from './molecules/table'
+import GenericTable from './organisms/generic-table'
+import QuestionnaireTable from './organisms/questionnaire-table'
+import { AdminActionsForQuestionnaire } from './organisms/questionnaire-table-methods'
+
+export default Table
+export { Header, TableData, DataEntity, CellProps, GenericTable, QuestionnaireTable, AdminActionsForQuestionnaire }

package/src/molecules/table-cell.tsx

@@ -0,0 +1,93 @@
+import { FC } from 'react'
+import { Button } from '@ltht-react/button'
+import styled from '@emotion/styled'
+import Icon, { IconButton, IconProps } from '@ltht-react/icon'
+import ActionMenu, { ActionMenuOption } from '@ltht-react/menu'
+import { PopUp, getZIndex, BTN_COLOURS } from '@ltht-react/styles'
+import { Axis } from '@ltht-react/types'
+
+const StyledIconText = styled.span`
+  margin-left: 0.4rem;
+`
+
+// TODO: This component is still a WIP and will be re-factored soon!
+// May be best to split it out into different components, the important part is unifying Type used by React-Table so the mapping can be simplified
+// It will need to facilitate the Actions list capability Jonny Dyson has requested
+// Betters ways of handling the customComponentOverride will be considered too
+const TableCell: FC<CellProps> = ({
+  adminActions,
+  isButton = false,
+  text,
+  iconProps,
+  headerAxis = 'x',
+  clickHandler,
+  customComponentOverride,
+}) => {
+  if (customComponentOverride) {
+    return customComponentOverride
+  }
+
+  if (adminActions) {
+    if (adminActions.length === 0) {
+      return <></>
+    }
+    return (
+      <ActionMenu
+        actions={adminActions}
+        menuButtonOptions={{
+          type: 'button',
+          text: '',
+          buttonProps: {
+            styling: {
+              buttonStyle: 'standard',
+              padding: headerAxis === 'x' ? '0.3rem 0.5rem' : '0.15rem 0.3rem',
+            },
+            icon: (
+              <Icon {...{ type: headerAxis === 'x' ? 'ellipsis-vertical' : 'ellipsis-horizontal', size: 'medium' }} />
+            ),
+            iconPlacement: 'center',
+            color: `${BTN_COLOURS.DANGER.VALUE}`,
+          },
+        }}
+        popupStyle={{ zIndex: getZIndex(PopUp) }}
+        popupPlacement={headerAxis === 'x' ? 'bottom-start' : 'right-start'}
+      />
+    )
+  }
+
+  if (isButton) {
+    return <Button value={text} icon={iconProps && <Icon {...iconProps} />} onClick={clickHandler} />
+  }
+
+  if (clickHandler && iconProps) {
+    return <IconButton iconProps={iconProps} text={text} onClick={clickHandler} />
+  }
+
+  if (iconProps) {
+    return (
+      <>
+        <Icon {...iconProps} />
+        {text && <StyledIconText>{text}</StyledIconText>}
+      </>
+    )
+  }
+
+  if (text) {
+    return <div>{text ?? ''}</div>
+  }
+
+  return <></>
+}
+
+export interface CellProps {
+  adminActions?: ActionMenuOption[]
+  isButton?: boolean
+  text?: string
+  iconProps?: IconProps
+  clickHandler?: React.MouseEventHandler<HTMLButtonElement>
+  customComponentOverride?: JSX.Element
+  parentStyle?: React.CSSProperties
+  headerAxis?: Axis
+}
+
+export default TableCell

package/src/molecules/table-component.tsx

@@ -0,0 +1,146 @@
+import Icon from '@ltht-react/icon'
+import { flexRender, Header as ReactTableHeader, Table } from '@tanstack/react-table'
+import React, { useMemo, useRef } from 'react'
+import { calculateStaticColumnOffset } from './table-methods'
+import {
+  StyledNextPageButtonContainer,
+  StyledSpinnerContainer,
+  StyledTable,
+  StyledTableRow,
+  StyledTableData,
+  StyledTableHeader,
+  StyledTHead,
+} from './table-styled-components'
+import useDimensionsRef from './useDimensionRef'
+import { CellProps } from './table-cell'
+import { ITableConfig } from './table'
+
+const TableComponent = <T,>({ table, staticColumns = 0, headerAxis }: ITableHeadProps<T>): JSX.Element => {
+  const firstColumn = useRef(null)
+  const secondColumn = useRef(null)
+  const tableElement = useRef(null)
+  const { width: firstColumnWidth } = useDimensionsRef(firstColumn, tableElement)
+  const { width: secondColumnWidth } = useDimensionsRef(secondColumn, tableElement)
+
+  const usingExpanderColumn = table.getHeaderGroups().some((x) => x.headers.some((h) => h.column.id === 'expander'))
+  const totalStaticColumns = useMemo(
+    () => (usingExpanderColumn ? staticColumns + 1 : staticColumns),
+    [usingExpanderColumn, staticColumns]
+  )
+
+  const getHeaderColumn = <TData, TValue>(header: ReactTableHeader<TData, TValue>, headerIndex: number) => {
+    switch (headerIndex) {
+      case 0:
+        return getHeaderElement(
+          header,
+          calculateStaticColumnOffset(headerIndex, totalStaticColumns, firstColumnWidth, secondColumnWidth),
+          firstColumn
+        )
+      case 1:
+        return getHeaderElement(
+          header,
+          calculateStaticColumnOffset(headerIndex, totalStaticColumns, firstColumnWidth, secondColumnWidth),
+          secondColumn
+        )
+
+      default:
+        return getHeaderElement(
+          header,
+          calculateStaticColumnOffset(headerIndex, totalStaticColumns, firstColumnWidth, secondColumnWidth)
+        )
+    }
+  }
+
+  const getHeaderElement = <TData, TValue>(
+    header: ReactTableHeader<TData, TValue>,
+    stickyWidth?: number,
+    elementRef?: React.MutableRefObject<null>
+  ) => (
+    <StyledTableHeader
+      stickyWidth={stickyWidth}
+      key={header.id}
+      colSpan={header.colSpan}
+      ref={elementRef}
+      role="columnheader"
+      {...(header.column.id !== 'expander'
+        ? {
+            style: {
+              cursor: header.column.getCanSort() ? 'pointer' : '',
+            },
+            onClick: header.column.getToggleSortingHandler(),
+          }
+        : {})}
+    >
+      {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+    </StyledTableHeader>
+  )
+
+  return (
+    <StyledTable ref={tableElement}>
+      <StyledTHead>
+        {table.getHeaderGroups().map((headerGroup) => (
+          <tr key={headerGroup.id} role="row">
+            {headerGroup.headers.map((header, headerIndex) => getHeaderColumn(header, headerIndex))}
+          </tr>
+        ))}
+      </StyledTHead>
+      <tbody>
+        {table.getRowModel().rows.map((row) => (
+          <StyledTableRow tableHeaderAxis={headerAxis} key={row.id} role="row">
+            {row.getVisibleCells().map((cell, cellIdx) => (
+              <StyledTableData
+                tableHeaderAxis={headerAxis}
+                stickyWidth={calculateStaticColumnOffset(
+                  cellIdx,
+                  totalStaticColumns,
+                  firstColumnWidth,
+                  secondColumnWidth
+                )}
+                key={cell.id}
+                role="cell"
+                style={(cell.getValue() as CellProps)?.parentStyle}
+              >
+                {flexRender(cell.column.columnDef.cell, cell.getContext())}
+              </StyledTableData>
+            ))}
+          </StyledTableRow>
+        ))}
+      </tbody>
+    </StyledTable>
+  )
+}
+
+const TableNavigationButton = ({ position, hidden, clickHandler }: ITableNavButtonProps) => (
+  <StyledNextPageButtonContainer
+    role="button"
+    elementPosition={position}
+    onClick={() => clickHandler()}
+    hidden={hidden}
+  >
+    <Icon type="chevron" direction={position === 'bottom' ? 'down' : 'right'} size="medium" />
+  </StyledNextPageButtonContainer>
+)
+
+const TableSpinner = ({ position, hidden }: ITableSpinnerProps) => (
+  <StyledSpinnerContainer elementPosition={position} hidden={hidden}>
+    <Icon type="spinner" size="medium" title="Loading..." />
+  </StyledSpinnerContainer>
+)
+
+interface ITableNavButtonProps {
+  position: 'bottom' | 'right'
+  hidden: boolean
+  clickHandler: () => void
+}
+
+interface ITableSpinnerProps {
+  position: 'bottom' | 'right'
+  hidden: boolean
+}
+
+interface ITableHeadProps<T> extends ITableConfig {
+  table: Table<T>
+}
+
+export default TableComponent
+export { TableNavigationButton, TableSpinner }

package/src/molecules/table-methods.tsx

@@ -0,0 +1,234 @@
+import { ColumnDef, ColumnHelper, createColumnHelper, HeaderContext, Table } from '@tanstack/react-table'
+import { IconProps } from '@ltht-react/icon'
+import { Axis } from '@ltht-react/types'
+import React from 'react'
+import { Header, TableData, DataEntity } from './table'
+import TableCell, { CellProps } from './table-cell'
+import { ScrollState } from './useScrollRef'
+
+const createColumns = (tableData: TableData, headerAxis: Axis): ColumnDef<DataEntity>[] => {
+  const columnHelper = createColumnHelper<DataEntity>()
+
+  let columns = createColumnsRecursively(tableData.headers, columnHelper, headerAxis)
+
+  if (tableData.rows.some((row) => row.subRows)) {
+    columns = prependColumnWithExpansionControls(columns, columnHelper, headerAxis)
+  }
+
+  return columns
+}
+
+const createColumnsRecursively = (
+  headers: Header[],
+  columnHelper: ColumnHelper<DataEntity>,
+  headerAxis: Axis
+): ColumnDef<DataEntity>[] => {
+  const result: ColumnDef<DataEntity>[] = headers.map((header) => {
+    if (header.type === 'display') {
+      return columnHelper.display({
+        id: header.id,
+        header: () => {
+          const headerCellProps: CellProps = { ...header.cellProps, headerAxis }
+          return <TableCell {...headerCellProps} />
+        },
+        cell: (props) => {
+          const cellProps: CellProps = { ...(props.getValue() as CellProps), headerAxis }
+          return <TableCell {...cellProps} />
+        },
+      })
+    }
+
+    if (header.type === 'accessor') {
+      return columnHelper.accessor(header.id, {
+        header: (props) => {
+          const cellProps: CellProps = { ...header.cellProps, iconProps: deriveHeaderIconProps(props), headerAxis }
+          return <TableCell {...cellProps} />
+        },
+        cell: (props) => {
+          const cellProps: CellProps = { ...(props.getValue() as CellProps), headerAxis }
+          return <TableCell {...cellProps} />
+        },
+      }) as ColumnDef<DataEntity, unknown>
+    }
+
+    return columnHelper.group({
+      header: header.cellProps.text ?? '',
+      columns: createColumnsRecursively(header.subHeaders ?? [], columnHelper, headerAxis),
+    })
+  })
+
+  return result
+}
+
+const deriveHeaderIconProps = (props: HeaderContext<DataEntity, CellProps | DataEntity[]>): IconProps | undefined => {
+  if (props.column.getIsSorted() === 'asc') {
+    return {
+      type: 'chevron',
+      direction: 'up',
+      size: 'medium',
+    }
+  }
+  if (props.column.getIsSorted() === 'desc') {
+    return {
+      type: 'chevron',
+      direction: 'down',
+      size: 'medium',
+    }
+  }
+  return undefined
+}
+
+const prependColumnWithExpansionControls = (
+  columns: ColumnDef<DataEntity, unknown>[],
+  columnHelper: ColumnHelper<DataEntity>,
+  headerAxis: Axis
+) => {
+  const expanderColumn = columnHelper.display({
+    id: 'expander',
+    header: ({ table }) => {
+      const headerCellProps: CellProps = {
+        iconProps: {
+          type: 'chevron',
+          direction: table.getIsAllRowsExpanded() ? 'down' : 'right',
+          size: 'medium',
+        },
+        headerAxis,
+        clickHandler: table.getToggleAllRowsExpandedHandler(),
+      }
+      return <TableCell {...headerCellProps} />
+    },
+    cell: (props) => {
+      const cellProps: CellProps = props.row.getCanExpand()
+        ? {
+            iconProps: {
+              type: 'chevron',
+              direction: props.row.getIsExpanded() ? 'down' : 'right',
+              size: 'medium',
+            },
+            headerAxis,
+            clickHandler: props.row.getToggleExpandedHandler(),
+          }
+        : { headerAxis }
+      return <TableCell {...cellProps} />
+    },
+  })
+
+  return [expanderColumn].concat(columns)
+}
+
+const calculateStaticColumnOffset = (
+  cellIdx: number,
+  staticColumns: number,
+  firstColumnWidth: number,
+  secondColumnWidth: number
+) => {
+  if (staticColumns === 0) {
+    return undefined
+  }
+
+  switch (cellIdx) {
+    case 0:
+      return 0
+    case 1:
+      return cellIdx < staticColumns ? firstColumnWidth : undefined
+    case 2:
+      return cellIdx < staticColumns ? firstColumnWidth + secondColumnWidth : undefined
+    default:
+      return undefined
+  }
+}
+
+const handleScrollEvent = (table: Table<DataEntity>, headerAxis: Axis, scrollState: ScrollState) => {
+  const { scrollWidth, scrollHeight, currentXScroll, currentYScroll } = scrollState
+  if (
+    headerAxis === 'x' &&
+    currentYScroll >= scrollHeight - getPercentageOfMax(5, scrollHeight) &&
+    currentYScroll <= scrollHeight &&
+    table.getCanNextPage()
+  ) {
+    table.nextPage()
+  }
+
+  if (
+    headerAxis === 'y' &&
+    currentXScroll >= scrollWidth - getPercentageOfMax(5, scrollWidth) &&
+    currentXScroll <= scrollWidth &&
+    table.getCanNextPage()
+  ) {
+    table.nextPage()
+  }
+}
+
+const getPercentageOfMax = (percentage: number, max: number) => max * (percentage / 100)
+
+const handleDataUpdate = (
+  tableData: TableData,
+  pageIndex: number,
+  pageSize: number,
+  headerAxis: Axis,
+  setColumns: (value: React.SetStateAction<ColumnDef<DataEntity>[]>) => void,
+  setData: (value: React.SetStateAction<DataEntity[]>) => void,
+  setPageCount: (value: React.SetStateAction<number>) => void
+) => {
+  if (tableData && tableData.headers.length > 0) {
+    if (headerAxis === 'x') {
+      setColumns(createColumns(tableData, headerAxis))
+      setData(tableData.rows.slice(0, (pageIndex + 1) * pageSize))
+      setPageCount(Math.ceil(tableData.rows.length / pageSize))
+    } else {
+      const head = tableData.headers[0]
+      const tail = tableData.headers.slice(1, tableData.headers.length)
+      setColumns(
+        createColumns(
+          { headers: [head, ...tail.slice(0, (pageIndex + 1) * pageSize)], rows: tableData.rows },
+          headerAxis
+        )
+      )
+      setData(tableData.rows)
+      setPageCount(Math.ceil(tail.length / pageSize))
+    }
+  }
+}
+
+const calculateSliceStartPoint = (oldLength: number, usingExpanderColumn: boolean) => {
+  if (oldLength > 0) {
+    return usingExpanderColumn ? 2 : 1
+  }
+
+  return 0
+}
+
+const handleDataUpdateForManualPagination = (
+  tableData: TableData,
+  headerAxis: Axis,
+  keepPreviousData: boolean,
+  setColumns: (value: React.SetStateAction<ColumnDef<DataEntity>[]>) => void,
+  setData: (value: React.SetStateAction<DataEntity[]>) => void
+) => {
+  if (headerAxis === 'x') {
+    setData((old) => {
+      const newData = keepPreviousData ? [...old, ...tableData.rows] : tableData.rows
+      setColumns(createColumns({ headers: tableData.headers, rows: newData }, headerAxis))
+      return newData
+    })
+  } else if (tableData.headers.length > 0) {
+    setColumns((old) => {
+      const newColumns = createColumns(tableData, headerAxis)
+      const sliceStartPoint = calculateSliceStartPoint(
+        old.length,
+        tableData.rows.some((x) => x.subRows)
+      )
+
+      return keepPreviousData ? [...old, ...newColumns.slice(sliceStartPoint, newColumns.length)] : newColumns
+    })
+    setData(tableData.rows)
+  }
+}
+
+export {
+  createColumns,
+  calculateStaticColumnOffset,
+  handleScrollEvent,
+  handleDataUpdate,
+  handleDataUpdateForManualPagination,
+}