@sebgroup/green-react 3.28.4 → 3.29.1-rc.20250730100346308

package/src/lib/table/components/parts/TableHeaderCell/TableHeaderCell.tsx

@@ -0,0 +1,123 @@
+import React, { JSX } from 'react'
+import classnames from 'classnames'
+
+import {
+  SortedColumn,
+  TableContextType,
+  useTableContext,
+} from '../../context/TableContextProvider'
+import { SortDirection } from '../../table-typings'
+
+export type TableHeaderCellProps<T = any> = JSX.IntrinsicElements['th'] & {
+  accessor?: keyof T
+  disableSort?: boolean
+  sortDirection?: SortDirection
+  children?: React.ReactNode
+}
+
+const TableHeaderCell = React.forwardRef(
+  (
+    {
+      accessor,
+      disableSort,
+      className,
+      sortDirection,
+      onClick,
+      children,
+      ...props
+    }: TableHeaderCellProps,
+    ref: React.ForwardedRef<HTMLTableCellElement>,
+  ) => {
+    const tableContext: TableContextType = useTableContext()
+    const [sortedColumn, setSortedColumn] = React.useState<SortedColumn | null>(
+      null,
+    )
+    const [sortOrder, setSortOrder] = React.useState<
+      SortDirection | null | undefined
+    >(SortDirection.ASC)
+    const [sortable, setSortable] = React.useState<boolean>(false)
+
+    /**
+     * get latest sort direction
+     * @param oldSortDirection current sort direction
+     */
+    const getSortDirection = (
+      oldSortDirection: SortDirection,
+    ): SortDirection => {
+      return oldSortDirection === SortDirection.ASC
+        ? SortDirection.DESC
+        : SortDirection.ASC
+    }
+
+    /** on column sort */
+    const onSort = React.useCallback(() => {
+      const newSortedColumn: SortedColumn =
+        sortedColumn && sortedColumn.accessor === accessor
+          ? {
+              ...sortedColumn,
+              sortDirection: getSortDirection(sortedColumn.sortDirection),
+            }
+          : { accessor, sortDirection: SortDirection.DESC }
+      tableContext.setTableState({
+        ...tableContext.tableState,
+        sortedColumn: newSortedColumn,
+      })
+      !!newSortedColumn && tableContext?.onSort?.(newSortedColumn)
+    }, [sortedColumn, tableContext])
+
+    const getCurrentSortValue = React.useCallback(() => {
+      if (!sortable || !sortOrder) {
+        return 'none'
+      }
+      if (sortOrder === SortDirection.ASC) {
+        return 'ascending'
+      }
+      return 'descending'
+    }, [sortable, sortOrder])
+
+    React.useEffect(() => {
+      setSortable(!disableSort && !!tableContext.onSort)
+    }, [disableSort, tableContext.onSort])
+
+    React.useEffect(() => {
+      setSortedColumn(tableContext.tableState.sortedColumn)
+    }, [tableContext.tableState.sortedColumn])
+
+    React.useEffect(() => {
+      if (sortDirection && tableContext.onSort) {
+        tableContext.setTableState({
+          ...tableContext.tableState,
+          sortedColumn: { accessor, sortDirection },
+        })
+      }
+    }, [sortDirection, tableContext.onSort])
+
+    React.useEffect(() => {
+      setSortOrder(
+        sortable && sortedColumn?.accessor === accessor
+          ? sortedColumn?.sortDirection
+          : null,
+      )
+    }, [sortable, sortedColumn])
+
+    return (
+      <th
+        className={classnames(className, { 'sg-sortable': sortable })}
+        onClick={sortable ? onSort : onClick}
+        ref={ref}
+        aria-sort={getCurrentSortValue()}
+        {...props}
+      >
+        {sortable ? (
+          <button className="sg-table-sort">{children}</button>
+        ) : (
+          children
+        )}
+      </th>
+    )
+  },
+)
+
+TableHeaderCell.displayName = 'TableHeaderCell'
+
+export { TableHeaderCell }

package/src/lib/table/components/parts/TableHeaderCell/index.ts

@@ -0,0 +1 @@
+export * from './TableHeaderCell'

package/src/lib/table/components/parts/TableRow/TableRow.spec.tsx

@@ -0,0 +1,143 @@
+import { PropsWithChildren } from 'react'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { UserEvent } from '@testing-library/user-event/dist/types/setup/setup'
+
+import { TableContext } from '../../context/TableContextProvider'
+import { TableRow } from './TableRow'
+
+describe('Component: Table row', () => {
+  function WrapperTableRow({ children }: PropsWithChildren<unknown>) {
+    return (
+      <table>
+        <tbody>{children}</tbody>
+      </table>
+    )
+  }
+
+  it('Should render correctly', () => {
+    render(
+      <WrapperTableRow>
+        <TableRow />
+      </WrapperTableRow>,
+    )
+    expect(document.body.querySelector('tr')).toBeInTheDocument()
+  })
+
+  it('Should be able to expand sub rows', async () => {
+    const user: UserEvent = userEvent.setup()
+    const parentUniqueKey = 'test'
+    const onRowExpand: jest.Mock = jest.fn()
+    const setTableStateFn: jest.Mock = jest.fn()
+    const mockProviderValue: any = {
+      tableState: { sortedColumn: null, expandedRows: [] },
+      setTableState: setTableStateFn,
+      onRowSelect: null,
+      onRowExpand,
+      onSort: null,
+    }
+    render(
+      <TableContext.Provider value={mockProviderValue}>
+        <WrapperTableRow>
+          <TableRow uniqueKey={parentUniqueKey}></TableRow>
+          <TableRow isSubRow parentKey={parentUniqueKey}></TableRow>
+        </WrapperTableRow>
+      </TableContext.Provider>,
+    )
+    await user.click(screen.getAllByRole('button')[0])
+    expect(onRowExpand).toBeCalled()
+  })
+
+  it('Should be able to set row to be expanded by default', () => {
+    const parentUniqueKey = 'test'
+    const onRowExpand: jest.Mock = jest.fn()
+    const setTableStateFn: jest.Mock = jest.fn()
+    const mockProviderValue: any = {
+      tableState: { sortedColumn: null, expandedRows: [parentUniqueKey] },
+      setTableState: setTableStateFn,
+      onRowSelect: null,
+      onRowExpand,
+      onSort: null,
+    }
+    render(
+      <TableContext.Provider value={mockProviderValue}>
+        <WrapperTableRow>
+          <TableRow uniqueKey={parentUniqueKey} isExpanded></TableRow>
+          <TableRow isSubRow parentKey={parentUniqueKey}></TableRow>
+        </WrapperTableRow>
+      </TableContext.Provider>,
+    )
+    expect(
+      document.body.querySelector('tr')?.classList.contains('expanded'),
+    ).toBeTruthy()
+    expect(document.body.querySelector('.sub-row')).toBeInTheDocument()
+    expect(
+      document.body.querySelector('.sub-row')?.classList.contains('show'),
+    ).toBeTruthy()
+  })
+
+  it('Should be able to select row', async () => {
+    const user: UserEvent = userEvent.setup()
+    const uniqueKey = 'test'
+    const onRowSelect: jest.Mock = jest.fn()
+    const mockProviderValue: any = {
+      tableState: { sortedColumn: null, expandedRows: [] },
+      setTableState: null,
+      onRowSelect,
+      onRowExpand: null,
+      onSort: null,
+    }
+    render(
+      <TableContext.Provider value={mockProviderValue}>
+        <WrapperTableRow>
+          <TableRow uniqueKey={uniqueKey} />
+        </WrapperTableRow>
+      </TableContext.Provider>,
+    )
+    await user.click(
+      document.body.querySelector(`#tb_checkbox_${uniqueKey}`) as HTMLElement,
+    )
+    expect(onRowSelect).toBeCalled()
+  })
+
+  it('Should be able to select all row', async () => {
+    const user: UserEvent = userEvent.setup()
+    const onRowSelect: jest.Mock = jest.fn()
+    const mockProviderValue: any = {
+      tableState: { sortedColumn: null, expandedRows: [] },
+      setTableState: null,
+      onRowSelect,
+      onRowExpand: null,
+      onSort: null,
+    }
+    render(
+      <TableContext.Provider value={mockProviderValue}>
+        <WrapperTableRow>
+          <TableRow isHeaderRow />
+        </WrapperTableRow>
+      </TableContext.Provider>,
+    )
+    await user.click(
+      document.body.querySelector('#tb_checkbox_all') as HTMLElement,
+    )
+    expect(onRowSelect).toBeCalled()
+  })
+
+  it('Should display empty cell if row is a sub row', () => {
+    const mockProviderValue: any = {
+      tableState: { sortedColumn: null, expandedRows: [] },
+      setTableState: null,
+      onRowSelect: jest.fn(),
+      onRowExpand: jest.fn(),
+      onSort: null,
+    }
+    render(
+      <TableContext.Provider value={mockProviderValue}>
+        <WrapperTableRow>
+          <TableRow isSubRow />
+        </WrapperTableRow>
+      </TableContext.Provider>,
+    )
+    expect(document.body.querySelectorAll('td').length).toEqual(2)
+  })
+})

package/src/lib/table/components/parts/TableRow/TableRow.tsx

@@ -0,0 +1,185 @@
+import React, { JSX, useId } from 'react'
+import classnames from 'classnames'
+
+import { useTableContext } from '../../context/TableContextProvider'
+import { TableCell, TableCellProps } from '../TableCell'
+import { TableHeaderCell, TableHeaderCellProps } from '../TableHeaderCell'
+
+export type TableRowProps = JSX.IntrinsicElements['tr'] & {
+  checked?: boolean
+  indeterminate?: boolean
+  isHeaderRow?: boolean
+  hideSelect?: boolean
+  uniqueKey?: string
+  parentKey?: string
+  isExpanded?: boolean
+  isSubRow?: boolean
+  collapseButtonProps?: JSX.IntrinsicElements['button']
+  checkboxProps?: JSX.IntrinsicElements['input']
+}
+
+const angleDown: JSX.Element = (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512">
+    <path d="M119.5 326.9L3.5 209.1c-4.7-4.7-4.7-12.3 0-17l7.1-7.1c4.7-4.7 12.3-4.7 17 0L128 287.3l100.4-102.2c4.7-4.7 12.3-4.7 17 0l7.1 7.1c4.7 4.7 4.7 12.3 0 17L136.5 327c-4.7 4.6-12.3 4.6-17-.1z" />
+  </svg>
+)
+const angleRightIcon: JSX.Element = (
+  <svg
+    name="angle-right"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 192 512"
+  >
+    <path d="M166.9 264.5l-117.8 116c-4.7 4.7-12.3 4.7-17 0l-7.1-7.1c-4.7-4.7-4.7-12.3 0-17L127.3 256 25.1 155.6c-4.7-4.7-4.7-12.3 0-17l7.1-7.1c4.7-4.7 12.3-4.7 17 0l117.8 116c4.6 4.7 4.6 12.3-.1 17z" />
+  </svg>
+)
+
+const TableRow = React.forwardRef(
+  (
+    {
+      className,
+      isHeaderRow,
+      hideSelect,
+      uniqueKey,
+      parentKey,
+      checked = false,
+      indeterminate = false,
+      isSubRow = false,
+      isExpanded = false,
+      checkboxProps = {},
+      collapseButtonProps = {},
+      ...props
+    }: TableRowProps,
+    ref: React.ForwardedRef<HTMLTableRowElement>,
+  ) => {
+    const tableContext = useTableContext()
+    const [uniqueId, setUniqueId] = React.useState<string>(uniqueKey as string)
+    const [isShown, setIsShown] = React.useState<boolean>(false)
+    const [expanded, setExpanded] = React.useState<boolean>(isExpanded)
+    const [isParentRow, setIsParentRow] = React.useState<boolean>(isExpanded)
+    const [columnProps, setColumnProps] = React.useState<
+      Omit<TableHeaderCellProps, 'ref'> | Omit<TableCellProps, 'ref'> | null
+    >(null)
+    const [expandedRows, setExpandedRows] = React.useState<Array<string>>(
+      tableContext.tableState?.expandedRows || [],
+    )
+    const headerId: string = useId()
+
+    /** initiate default expanded row */
+    const initiateExpandedRows = React.useCallback(() => {
+      const newExpandedRows: Array<string> = [...expandedRows]
+      const expandedIndex: number = newExpandedRows.indexOf(uniqueId)
+      if (isExpanded && expandedIndex === -1) {
+        newExpandedRows.push(uniqueId)
+      } else if (expandedIndex > -1) {
+        const expandedIndex: number = newExpandedRows.indexOf(uniqueId)
+        newExpandedRows.splice(expandedIndex, 1)
+      }
+      tableContext.setTableState({
+        ...tableContext.tableState,
+        expandedRows: newExpandedRows,
+      })
+      setExpandedRows(newExpandedRows)
+    }, [isExpanded, uniqueId])
+
+    React.useEffect(() => {
+      setUniqueId(isHeaderRow ? 'all' : uniqueKey || headerId)
+    }, [uniqueKey, isHeaderRow])
+
+    React.useEffect(() => {
+      setExpandedRows(tableContext.tableState.expandedRows || [])
+    }, [tableContext.tableState.expandedRows])
+
+    React.useEffect(() => {
+      setExpanded(isExpanded)
+      if (!isSubRow && !isHeaderRow && tableContext.onRowExpand) {
+        initiateExpandedRows()
+      }
+    }, [isExpanded, initiateExpandedRows])
+
+    React.useEffect(() => {
+      setColumnProps(isHeaderRow ? { disableSort: true } : null)
+    }, [isHeaderRow])
+
+    React.useEffect(() => {
+      setIsParentRow(!(isHeaderRow || isSubRow))
+    }, [isHeaderRow, isSubRow])
+
+    React.useEffect(() => {
+      if (tableContext.onRowExpand) {
+        setIsShown(isSubRow && expandedRows.indexOf(parentKey as string) > -1)
+      }
+    }, [expandedRows])
+
+    const Cell = isHeaderRow ? TableHeaderCell : TableCell
+
+    return (
+      <tr
+        {...props}
+        ref={ref}
+        className={classnames(className, {
+          'sub-row': isSubRow,
+          expanded: isExpanded,
+          collapsible: isParentRow && !!tableContext.onRowExpand,
+          show: isShown,
+        })}
+      >
+        {!!tableContext.onRowExpand && (
+          <Cell
+            {...columnProps}
+            className={classnames({ 'collapse-control': isParentRow })}
+          >
+            {isParentRow && (
+              <button
+                {...collapseButtonProps}
+                className={classnames(
+                  'collapse-btn',
+                  collapseButtonProps.className,
+                )}
+                onClick={() =>
+                  tableContext?.onRowExpand?.(!isExpanded, uniqueId)
+                }
+              >
+                <div className="icon-holder">
+                  {expanded ? angleDown : angleRightIcon}
+                </div>
+              </button>
+            )}
+          </Cell>
+        )}
+        {!!tableContext.onRowSelect && (
+          <Cell
+            {...columnProps}
+            className={classnames({
+              'select-control': !(hideSelect || isSubRow),
+            })}
+          >
+            {!(hideSelect || isSubRow) && (
+              <label className="form-control p-0">
+                <input
+                  type="checkbox"
+                  checked={checked}
+                  ref={(input: HTMLInputElement) => {
+                    if (input) {
+                      input.indeterminate = indeterminate && !checked
+                    }
+                  }}
+                  name={`tb_checkbox_${uniqueId}`}
+                  id={`tb_checkbox_${uniqueId}`}
+                  onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                    tableContext?.onRowSelect?.(event, uniqueId)
+                  }
+                />
+                <i className="m-0" />
+              </label>
+            )}
+          </Cell>
+        )}
+        {props.children}
+      </tr>
+    )
+  },
+)
+
+TableRow.displayName = 'TableRow'
+
+export { TableRow }

package/src/lib/table/components/parts/TableRow/index.ts

@@ -0,0 +1 @@
+export * from './TableRow'