@telus-uds/components-community.data-grid 0.1.0

package/src/DataGrid.jsx

@@ -0,0 +1,465 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import {
+  Typography,
+  Checkbox,
+  useCopy,
+  useThemeTokens,
+  variantProp,
+  IconButton
+} from '@telus-uds/components-base'
+import { styledComponents } from '@telus-uds/components-web'
+import dictionary from './dictionary'
+import {
+  resetColumnsData,
+  resetRowData,
+  DATA_TYPE,
+  SORT_DIRECTION,
+  isAtLeastOneRowUnselected,
+  toggleAllCheckBoxes,
+  toggleExpandedRow,
+  toggleRowCheckbox,
+  ROW_TYPE,
+  CELL_TYPE
+} from './utility'
+import DataGridTable from './DataGridTable'
+import DataGridHead from './DataGridHead'
+import DataGridBody from './DataGridBody'
+import DataGridRow from './DataGridRow'
+import DataGridCell from './DataGridCell'
+
+const { styled } = styledComponents
+
+export const StyledIconContainer = styled.div`
+  display: flex;
+  box-sizing: border-box;
+  align-items: center;
+  width: 60px;
+  justify-content: space-between;
+`
+
+const DataGrid = React.forwardRef(
+  (
+    {
+      rows = [],
+      columns = [],
+      groupedRows,
+      showCheckbox = false,
+      isSortable = false,
+      makeScrollBarAlwaysVisible = true,
+      tokens,
+      variant,
+      copy = 'en',
+      testID = 'data-grid'
+    },
+    ref
+  ) => {
+    const themeTokens = useThemeTokens('DataGrid', tokens, variant)
+    const getCopy = useCopy({ dictionary, copy })
+    const { expandRowIcon, hideExpandedRowIcon, sortColumnIconDown, sortColumnIconUp } = themeTokens
+    const [data, setData] = React.useState(
+      groupedRows ? resetRowData([...groupedRows], true) : resetRowData([...rows])
+    )
+    const [columnsData, setColumnsData] = React.useState(resetColumnsData(columns))
+    const [checkAllState, setCheckAllState] = React.useState(false)
+
+    const shouldCheckHeaderBox = (allData) => {
+      let isARowUnselectedInAllGroups = null
+      if (groupedRows) {
+        isARowUnselectedInAllGroups = Object.keys(allData).some((el) => {
+          return isAtLeastOneRowUnselected(allData[el].data)
+        })
+      } else {
+        isARowUnselectedInAllGroups = isAtLeastOneRowUnselected(allData)
+      }
+      return !isARowUnselectedInAllGroups
+    }
+
+    const shouldDisplayIconColumn = (allData, _showCheckbox) => {
+      let doesOneRowHaveExpandedContent = null
+      if (groupedRows) {
+        doesOneRowHaveExpandedContent = Object.keys(allData).some((el) => {
+          return allData[el].data.some((eachData) => eachData.hasExpandedRow === true)
+        })
+      } else {
+        doesOneRowHaveExpandedContent = allData.some((el) => el.hasExpandedRow === true)
+      }
+
+      return !!(_showCheckbox || doesOneRowHaveExpandedContent)
+    }
+
+    const toggleSelectAll = () => {
+      let _rows = null
+      if (groupedRows) {
+        _rows = {}
+        Object.keys(data).forEach((el) => {
+          _rows[el] = { ...data[el] }
+          _rows[el].data = toggleAllCheckBoxes(data[el].data, checkAllState)
+        })
+      } else {
+        _rows = toggleAllCheckBoxes(data, checkAllState)
+      }
+      setData(_rows)
+      setCheckAllState(!checkAllState)
+    }
+
+    const toggleCheckbox = (rowId) => {
+      let _data = null
+      if (groupedRows) {
+        const [group, _] = rowId.split('-')
+        const id = parseInt(_, 10)
+        _data = { ...data }
+        _data[group].data = toggleRowCheckbox(_data[group].data, id)
+      } else {
+        _data = toggleRowCheckbox(data, rowId)
+      }
+      setData(_data)
+    }
+
+    const toggleRowExpansion = (rowId) => {
+      let _row = null
+      if (groupedRows) {
+        const [group, _] = rowId.split('-')
+        const id = parseInt(_, 10)
+        _row = { ...data }
+        _row[group].data = toggleExpandedRow(_row[group].data, id)
+      } else {
+        _row = toggleExpandedRow(data, rowId)
+      }
+      setData(_row)
+    }
+
+    const HeaderCheckBoxDisplay = showCheckbox && (
+      <Checkbox
+        label={getCopy('all')}
+        checked={shouldCheckHeaderBox(data)}
+        onChange={toggleSelectAll}
+      />
+    )
+
+    const buildCheckBoxDisplay = (_showCheckbox, row, rowId) =>
+      _showCheckbox && <Checkbox checked={row.isSelected} onChange={() => toggleCheckbox(rowId)} />
+
+    const buildDisplayCaret = (row, rowId) =>
+      row.hasExpandedRow && (
+        <IconButton
+          onPress={() => toggleRowExpansion(rowId)}
+          icon={row.isExpandedRowOpen === true ? hideExpandedRowIcon : expandRowIcon}
+          accessibilityRole={`button-${rowId}`}
+          accessibilityLabel={
+            row.isExpandedRowOpen === true ? getCopy('hideRow') : getCopy('expandRow')
+          }
+        />
+      )
+
+    const buildExpandedRow = (row, rowId) =>
+      row.isExpandedRowOpen && (
+        <DataGridRow
+          type={ROW_TYPE.EXPANDEDROW}
+          tokens={themeTokens}
+          rowId={rowId}
+          isExpandedRowOpen={row.isExpandedRowOpen}
+        >
+          <DataGridCell
+            type={CELL_TYPE.EXPANDEDROWCELL}
+            tokens={themeTokens}
+            columnsLength={columns.length}
+            showCheckbox={showCheckbox}
+            isExpandedRowOpen={row.isExpandedRowOpen}
+          >
+            {row.expandedRowChildComponent.component}
+          </DataGridCell>
+        </DataGridRow>
+      )
+
+    const buildRowContent = (
+      row,
+      rowId,
+      _showCheckbox,
+      CheckBoxDisplay,
+      DisplayCaret,
+      ExpandedRow
+    ) => (
+      <React.Fragment key={rowId}>
+        <DataGridRow
+          key={rowId}
+          tokens={themeTokens}
+          rowId={rowId}
+          isExpandedRowOpen={row.isExpandedRowOpen}
+          hasExpandedContent={row.hasExpandedRow}
+          onClick={toggleRowExpansion}
+        >
+          {shouldDisplayIconColumn(data, _showCheckbox) && (
+            <DataGridCell tokens={themeTokens} isExpandedRowOpen={row.isExpandedRowOpen}>
+              <StyledIconContainer>
+                {CheckBoxDisplay}
+                {DisplayCaret}
+              </StyledIconContainer>
+            </DataGridCell>
+          )}
+          {columnsData.map((column) => (
+            <DataGridCell
+              tokens={themeTokens}
+              isExpandedRowOpen={row.isExpandedRowOpen}
+              key={`${rowId}-${column.key}`}
+            >
+              <Typography
+                block
+                variant={{ size: 'small' }}
+                tokens={{ color: themeTokens.cellTextColor }}
+              >
+                {row[column.key]}
+              </Typography>
+            </DataGridCell>
+          ))}
+        </DataGridRow>
+        {ExpandedRow}
+      </React.Fragment>
+    )
+
+    const sortColumn = (column) => {
+      const _col = { ...column }
+      if (!groupedRows) {
+        const _data = [...data].sort((a, b) => {
+          const first =
+            _col.dataType === DATA_TYPE.NUMBER ? parseFloat(a[_col.key]) : a[_col.key].toUpperCase()
+          const next =
+            _col.dataType === DATA_TYPE.NUMBER ? parseFloat(b[_col.key]) : b[_col.key].toUpperCase()
+
+          if (_col.sortDirection === SORT_DIRECTION.DESC) {
+            if (first < next) return -1
+            return next === first ? 0 : 1
+          }
+          if (next < first) return -1
+          return first === next ? 0 : 1
+        })
+
+        _col.sortDirection =
+          _col.sortDirection === SORT_DIRECTION.DESC ? SORT_DIRECTION.ASC : SORT_DIRECTION.DESC
+        _col.currentSort = true
+
+        const _columns = resetColumnsData(columnsData)
+        _columns[columnsData.findIndex((_el) => _el.key === column.key)] = _col
+
+        setColumnsData(_columns)
+        setData(_data)
+      }
+    }
+
+    let HeaderContent = null
+    let BodyContent = null
+    if (groupedRows) {
+      BodyContent = Object.keys(data).map((group) => {
+        const DefaultSubHeading = (
+          <Typography variant={{ size: 'h3' }}>{data[group].name}</Typography>
+        )
+        const GroupHeaderRow = (
+          <DataGridRow type={ROW_TYPE.EXPANDEDROW} tokens={themeTokens} key={group}>
+            <DataGridCell
+              type={CELL_TYPE.SUBHEADING}
+              tokens={themeTokens}
+              columnsLength={columnsData.length}
+            >
+              {data[group].groupHeaderComponent || DefaultSubHeading}
+            </DataGridCell>
+          </DataGridRow>
+        )
+
+        const DataRow = data[group].data.map((row) => {
+          const rowId = `${group}-${row.id}`
+          const CheckBoxDisplay = buildCheckBoxDisplay(showCheckbox, row, rowId)
+
+          const DisplayCaret = buildDisplayCaret(row, rowId)
+
+          const ExpandedRow = buildExpandedRow(row, rowId)
+
+          return buildRowContent(
+            row,
+            rowId,
+            showCheckbox,
+            CheckBoxDisplay,
+            DisplayCaret,
+            ExpandedRow
+          )
+        })
+
+        return (
+          <React.Fragment key={group}>
+            {GroupHeaderRow}
+            {DataRow}
+          </React.Fragment>
+        )
+      })
+    } else {
+      BodyContent = data.map((row) => {
+        const rowId = row.id
+
+        const CheckBoxDisplay = buildCheckBoxDisplay(showCheckbox, row, rowId)
+
+        const DisplayCaret = buildDisplayCaret(row, rowId)
+
+        const ExpandedRow = buildExpandedRow(row, rowId)
+
+        return buildRowContent(row, rowId, showCheckbox, CheckBoxDisplay, DisplayCaret, ExpandedRow)
+      })
+    }
+
+    HeaderContent = (
+      <>
+        {shouldDisplayIconColumn(data, showCheckbox) && (
+          <DataGridCell type={CELL_TYPE.HEADING} tokens={themeTokens} isFirstCol={true}>
+            {HeaderCheckBoxDisplay}
+          </DataGridCell>
+        )}
+
+        {columnsData.map((column) => (
+          <DataGridCell
+            type={CELL_TYPE.HEADING}
+            key={column.key}
+            tokens={themeTokens}
+            isSortable={isSortable}
+          >
+            <Typography
+              block
+              variant={{ size: 'h4' }}
+              tokens={{ color: themeTokens.headerTextColor }}
+            >
+              {column.label}
+            </Typography>
+            {isSortable && column.isSortable && (
+              <IconButton
+                variant={{ size: 'small' }}
+                tokens={{
+                  iconColor: column.currentSort
+                    ? themeTokens.sortColumnIconActiveColor
+                    : themeTokens.sortColumnIconDefaultColor
+                }}
+                onPress={() => {
+                  if (typeof column.fn === 'function') {
+                    column.fn(column, data, setData, columnsData, setColumnsData)
+                  } else sortColumn(column)
+                }}
+                icon={
+                  column.sortDirection === SORT_DIRECTION.ASC
+                    ? sortColumnIconUp
+                    : sortColumnIconDown
+                }
+                accessibilityRole="sort-button"
+                accessibilityLabel={getCopy('button')}
+              />
+            )}
+          </DataGridCell>
+        ))}
+      </>
+    )
+
+    return (
+      <DataGridTable
+        tokens={themeTokens}
+        makeScrollBarAlwaysVisible={makeScrollBarAlwaysVisible}
+        ref={ref}
+        testID={testID}
+      >
+        <>
+          <DataGridHead>
+            <DataGridRow type={ROW_TYPE.HEADING}>{HeaderContent}</DataGridRow>
+          </DataGridHead>
+          <DataGridBody>{BodyContent}</DataGridBody>
+        </>
+      </DataGridTable>
+    )
+  }
+)
+
+DataGrid.displayName = 'DataGrid'
+
+DataGrid.propTypes = {
+  /**
+   * Use `columns` to pass the data for data-grid column header items.
+   */
+  columns: PropTypes.arrayOf(
+    PropTypes.shape({
+      key: PropTypes.string.isRequired,
+      label: PropTypes.string.isRequired,
+      width: PropTypes.string,
+      dataType: PropTypes.oneOf(['string', 'number']),
+      isSortable: PropTypes.bool, // Set this to true to enable sorting for this column
+      fn: PropTypes.func
+    })
+  ).isRequired,
+  /**
+   * Use `groupedRows` to pass the grouped data for display
+   */
+  groupedRows: PropTypes.arrayOf(
+    PropTypes.shape({
+      key: PropTypes.string.isRequired,
+      name: PropTypes.string.isRequired,
+      groupHeaderComponent: PropTypes.node,
+      data: PropTypes.arrayOf(
+        PropTypes.shape({
+          id: PropTypes.number.isRequired,
+          expandedRow: PropTypes.shape({
+            rows: PropTypes.arrayOf(
+              PropTypes.shape({
+                id: PropTypes.number.isRequired
+              })
+            ),
+            columns: PropTypes.arrayOf(
+              PropTypes.shape({
+                key: PropTypes.string.isRequired,
+                label: PropTypes.string.isRequired
+              })
+            )
+          }),
+          expandedRowChildComponent: PropTypes.shape({
+            component: PropTypes.node,
+            displayOnLoad: PropTypes.bool.isRequired
+          })
+        })
+      )
+    })
+  ),
+  /**
+   * Use `rows` to pass ungrouped data for data-grid row cells items.
+   */
+  rows: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.number.isRequired,
+      expandedRowChildComponent: PropTypes.shape({
+        component: PropTypes.node,
+        displayOnLoad: PropTypes.bool.isRequired
+      })
+    })
+  ),
+  /**
+   * Set this to true to enable columns to become sortable.
+   */
+  isSortable: PropTypes.bool,
+  /**
+   * Set this to true to make scrollbar always visible when content is larger than the grid
+   */
+  makeScrollBarAlwaysVisible: PropTypes.bool,
+  /**
+   * Set this to true to enable checkboxes in the first column.
+   */
+  showCheckbox: PropTypes.bool,
+  /**
+   * Use tokens prop to override theme tokens
+   */
+  tokens: PropTypes.object,
+  /**
+   * No available variants
+   */
+  variant: variantProp.propType,
+  /**
+   * Use copy for localisations of keys.
+   */
+  copy: PropTypes.oneOf(['en', 'fr']),
+
+  /**
+   * Use in tests if the datagrid test cases need to find the element with the id.
+   */
+  testID: PropTypes.string
+}
+
+export default DataGrid

package/src/DataGridBody.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const DataGridBody = React.forwardRef(({ children }, ref) => {
+  return <tbody ref={ref}>{children}</tbody>
+})
+
+DataGridBody.displayName = 'DataGridBody'
+
+DataGridBody.propTypes = {
+  /**
+   * Accepts any React or HTML node
+   */
+  children: PropTypes.node.isRequired
+}
+
+export default DataGridBody

package/src/DataGridCell.jsx

@@ -0,0 +1,200 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { styledComponents } from '@telus-uds/components-web'
+import { CELL_TYPE } from './utility'
+
+const { styled, css } = styledComponents
+
+const StyledHeaderCell = styled.th`
+  ${(props) => {
+    return css`
+      background-color: ${props.headerRowBackgroundColor};
+      border-top: solid ${props.headerBorderTopWidth}px ${props.headerBorderTopColor};
+      border-bottom: solid ${props.headerBorderBottomWidth}px ${props.headerBorderBottomColor};
+      padding: ${props.headerPadding}px;
+      text-align: ${props.headerTextAlign};
+      box-sizing: border-box;
+      font-size: ${props.headerFontSize}px;
+      font-weight: bold;
+      line-height: ${props.headerLineHeight * props.headerFontSize}px;
+      color: ${props.headerTextColor};
+      width: ${props.firstColWidth};
+      font-family: ${props.headerFontFamily};
+    `
+  }}
+`
+const StyledHeaderCellDiv = styled.div`
+  display: flex;
+  align-items: center;
+`
+
+const StyledGroupHeaderCell = styled.td`
+  ${(props) => {
+    return css`
+      background-color: ${props.subHeadingBackgroundColor};
+      padding: ${props.cellPadding}px;
+      border-top: solid ${props.cellBorderBottomWidth}px ${props.cellBorderBottomColor};
+      text-align: ${props.cellTextAlign};
+      font-size: ${props.cellFontSize}px;
+      font-weight: normal;
+      line-height: ${props.cellLineHeight * props.cellFontSize}px;
+      color: ${props.cellTextColor};
+      font-family: ${props.cellFontFamily};
+    `
+  }}
+`
+
+const StyledGroupHeaderCellDiv = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: start;
+`
+
+const StyledExpandedCell = styled.td`
+  ${(props) => {
+    return css`
+      padding: ${props.cellPadding}px;
+      border-bottom: ${
+        props.isExpandedRowOpen
+          ? `solid ${props.cellBorderBottomWidth}px ${props.headerBorderBottomColor};`
+          : `solid ${props.cellBorderBottomWidth}px ${props.cellBorderBottomColor};`
+      }
+      text-align: ${props.cellTextAlign};
+      font-size: ${props.cellFontSize}px;
+      font-weight: normal;
+      line-height: ${props.cellLineHeight * props.cellFontSize}px;
+      color: ${props.cellTextColor};
+      font-family: ${props.cellFontFamily};
+    `
+  }}
+`
+
+const StyledExpandedCellDiv = styled.div`
+  ${(props) => {
+    return css`
+      display: flex;
+      align-items: center;
+      justify-content: ${props.expandedContentAlignment ? props.expandedContentAlignment : 'start'};
+      padding-left: ${props.showCheckbox
+        ? `${props.expandedContentLeftPadding}px`
+        : `${props.expandedContentDefaultLeftPadding}px`};
+    `
+  }}
+`
+
+export const StyledCell = styled.td`
+  ${(props) => {
+    if (props.isExpandedRowOpen) {
+      return css`
+        padding: ${props.cellPadding}px;
+        text-align: ${props.cellTextAlign};
+        font-size: ${props.cellFontSize}px;
+        font-weight: normal;
+        line-height: ${props.cellLineHeight * props.cellFontSize}px;
+        color: ${props.cellTextColor};
+        font-family: ${props.cellFontFamily};
+        border-top: solid ${props.headerBorderTopWidth}px ${props.headerBorderTopColor};
+      `
+    }
+    return css`
+      padding: ${props.cellPadding}px;
+      border-bottom: ${props.hideRowBottomBorder === 1
+        ? `none`
+        : `solid ${props.cellBorderBottomWidth}px ${props.cellBorderBottomColor}`};
+      text-align: ${props.cellTextAlign};
+      font-size: ${props.cellFontSize}px;
+      font-weight: normal;
+      line-height: ${props.cellLineHeight * props.cellFontSize}px;
+      color: ${props.cellTextColor};
+      font-family: ${props.cellFontFamily};
+    `
+  }}
+`
+
+const DataGridCell = React.forwardRef(
+  (
+    {
+      children,
+      tokens,
+      type,
+      columnsLength,
+      showCheckbox = false,
+      isFirstCol = false,
+      isExpandedRowOpen = false
+    },
+    ref
+  ) => {
+    if (type === CELL_TYPE.HEADING) {
+      return (
+        <StyledHeaderCell
+          {...tokens}
+          firstColWidth={isFirstCol ? tokens.firstColWidth : 'auto'}
+          ref={ref}
+        >
+          <StyledHeaderCellDiv>{children}</StyledHeaderCellDiv>
+        </StyledHeaderCell>
+      )
+    }
+    if (type === CELL_TYPE.SUBHEADING) {
+      return (
+        <StyledGroupHeaderCell colSpan={columnsLength + 1} {...tokens} ref={ref}>
+          <StyledGroupHeaderCellDiv {...tokens}>{children}</StyledGroupHeaderCellDiv>
+        </StyledGroupHeaderCell>
+      )
+    }
+    if (type === CELL_TYPE.EXPANDEDROWCELL) {
+      return (
+        <StyledExpandedCell
+          colSpan={columnsLength + 1}
+          {...tokens}
+          isExpandedRowOpen={isExpandedRowOpen}
+          ref={ref}
+        >
+          <StyledExpandedCellDiv showCheckbox={showCheckbox} {...tokens}>
+            {children}
+          </StyledExpandedCellDiv>
+        </StyledExpandedCell>
+      )
+    }
+    return (
+      <StyledCell {...tokens} isExpandedRowOpen={isExpandedRowOpen} ref={ref}>
+        {children}
+      </StyledCell>
+    )
+  }
+)
+
+DataGridCell.displayName = 'DataGridCell'
+
+DataGridCell.propTypes = {
+  /**
+    cell type
+  */
+  type: PropTypes.oneOf(['heading', 'subHeading', 'expandedRowCell']),
+  /**
+   * Accepts any React or HTML node
+   */
+  children: PropTypes.node,
+  /**
+   * Tokens passed to the component
+   */
+  tokens: PropTypes.object,
+  /**
+   * columnsLength passed to the component for certain scenarios in which colSpan is required
+   */
+  columnsLength: PropTypes.number,
+  /**
+   * showCheckbox passed to the component for certain scenarios in which checkbox visibility impacts the display design
+   */
+  showCheckbox: PropTypes.bool,
+  /**
+   * isFirstCol passed to the component to determine if cell is first within the row
+   */
+  isFirstCol: PropTypes.bool,
+  /**
+   * isExpandedRowOpen passed to the component to determine if cell is displaying additional data
+   */
+  isExpandedRowOpen: PropTypes.bool
+}
+
+export default DataGridCell

package/src/DataGridHead.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const DataGridHead = React.forwardRef(({ children }, ref) => <thead ref={ref}>{children}</thead>)
+
+DataGridHead.displayName = 'DataGridHead'
+
+DataGridHead.propTypes = {
+  /**
+   * Accepts any React or HTML node
+   */
+  children: PropTypes.node
+}
+
+export default DataGridHead