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

package/src/DataGridRow.jsx

@@ -0,0 +1,110 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { styledComponents } from '@telus-uds/components-web'
+import { ROW_TYPE } from './utility'
+
+const { styled, css } = styledComponents
+
+const StyledExpandedRow = styled.tr`
+  ${(props) => {
+    return css`
+      background-color: ${props.rowBackgroundColorOnHover};
+    `
+  }}
+  transition: 0.3s ease;
+`
+
+const StyledRow = styled.tr`
+  ${(props) => {
+    if (props.isExpandedRowOpen) {
+      return css`
+        background-color: ${props.rowBackgroundColorOnHover};
+        cursor: pointer;
+      `
+    }
+    return css`
+      cursor: ${props.hasExpandedContent ? `pointer` : `arrow`};
+      background-color: ${props.rowBackgroundColor};
+      padding: ${props.rowPadding}px;
+      &:hover {
+        background-color: ${props.rowBackgroundColorOnHover};
+      }
+    `
+  }}
+  transition: 0.3s ease;
+`
+
+const DataGridRow = React.forwardRef(
+  (
+    {
+      children,
+      tokens,
+      type,
+      rowId,
+      isExpandedRowOpen = false,
+      hasExpandedContent = false,
+      onClick
+    },
+    ref
+  ) => {
+    const onClickHandler = () => {
+      onClick(rowId)
+    }
+    if (type === ROW_TYPE.HEADING) {
+      return <tr ref={ref}>{children}</tr>
+    }
+    if (type === ROW_TYPE.EXPANDEDROW) {
+      return (
+        <StyledExpandedRow {...tokens} ref={ref}>
+          {children}
+        </StyledExpandedRow>
+      )
+    }
+    return (
+      <StyledRow
+        {...tokens}
+        isExpandedRowOpen={isExpandedRowOpen}
+        hasExpandedContent={hasExpandedContent}
+        onClick={hasExpandedContent ? onClickHandler : null}
+        ref={ref}
+      >
+        {children}
+      </StyledRow>
+    )
+  }
+)
+
+DataGridRow.displayName = 'DataGridRow'
+
+DataGridRow.propTypes = {
+  /**
+    Row type
+  */
+  type: PropTypes.oneOf(['heading', 'subHeading', 'expandedRow']),
+  /**
+   * Accepts any React or HTML node
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * data-id passed from the data to the row passed to the component
+   */
+  rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * Tokens passed to the component
+   */
+  tokens: PropTypes.object,
+  /**
+   * isExpandedRowOpen determines component's behavior to additonal available data
+   */
+  isExpandedRowOpen: PropTypes.bool,
+  /**
+   * hasExpandedContent determines component's behavior to additional available data
+   */
+  hasExpandedContent: PropTypes.bool,
+  /**
+   *  onClick is a function to open/close a row with expanded content
+   */
+  onClick: PropTypes.func
+}
+
+export default DataGridRow

package/src/DataGridTable.jsx

@@ -0,0 +1,68 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { styledComponents } from '@telus-uds/components-web'
+import { Scrollbar } from 'smooth-scrollbar-react'
+
+const { styled, css } = styledComponents
+
+const StyledWrapper = styled.div`
+  display: flex;
+  width: 100%;
+  margin: 0px;
+  padding: 8px;
+  ${(props) =>
+    props.tokens.maxHeight &&
+    css`
+      max-height: ${props.tokens.maxHeight}px;
+    `}
+  box-sizing: border-box;
+  border: 0px solid #000000;
+  overflow-y: auto;
+`
+
+const StyledTable = styled.table`
+  width: 100%;
+  border-spacing: 0;
+`
+
+const WrappedScrollbar = styled(Scrollbar)`
+  width: 100%;
+`
+
+const DataGridTable = React.forwardRef(
+  ({ children, tokens, makeScrollBarAlwaysVisible, testID }, ref) => {
+    return (
+      <StyledWrapper tokens={tokens} ref={ref} testID={testID}>
+        <WrappedScrollbar alwaysShowTracks={makeScrollBarAlwaysVisible}>
+          <div>
+            <StyledTable>{children}</StyledTable>
+          </div>
+        </WrappedScrollbar>
+      </StyledWrapper>
+    )
+  }
+)
+
+DataGridTable.displayName = 'DataGridTable'
+
+DataGridTable.propTypes = {
+  /**
+   * Accepts any React or HTML node
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * Tokens passed to the component
+   */
+  tokens: PropTypes.object,
+  /**
+   * Set this to true to make scrollbar always visible when content is larger than the grid
+   */
+  makeScrollBarAlwaysVisible: PropTypes.bool,
+  /**
+  /**
+   * Use in tests if the datagrid test cases need to find the element with the id.
+   */
+  testID: PropTypes.string
+}
+
+export default DataGridTable

package/src/dictionary.js

@@ -0,0 +1,18 @@
+export default {
+  en: {
+    all: 'All',
+    hideRow: 'Hide Row',
+    expandRow: 'Expand Row',
+    sortAsc: 'Sort Ascending',
+    sortDesc: 'Sort Descending',
+    button: 'Button'
+  },
+  fr: {
+    all: 'Tout',
+    hideRow: 'Masquer la ligne',
+    expandRow: 'Développer la ligne',
+    sortAsc: 'Tri croissant',
+    sortDesc: 'Tri décroissant',
+    button: 'Bouton'
+  }
+}

package/src/index.js

@@ -0,0 +1,14 @@
+import DataGrid from './DataGrid'
+import DataGridBody from './DataGridBody'
+import DataGridCell from './DataGridCell'
+import DataGridHead from './DataGridHead'
+import DataGridRow from './DataGridRow'
+import DataGridTable from './DataGridTable'
+
+DataGrid.Body = DataGridBody
+DataGrid.Cell = DataGridCell
+DataGrid.Head = DataGridHead
+DataGrid.Row = DataGridRow
+DataGrid.Table = DataGridTable
+
+export default DataGrid

package/src/utility.jsx

@@ -0,0 +1,76 @@
+export const ROW_TYPE = {
+  HEADING: 'heading',
+  SUBHEADING: 'subHeading',
+  EXPANDEDROW: 'expandedRow'
+}
+
+export const CELL_TYPE = {
+  HEADING: 'heading',
+  SUBHEADING: 'subHeading',
+  EXPANDEDROWCELL: 'expandedRowCell'
+}
+
+export const SORT_DIRECTION = {
+  ASC: 'asc',
+  DESC: 'desc'
+}
+
+export const DATA_TYPE = {
+  STRING: 'string',
+  NUMBER: 'number'
+}
+
+const mappedData = (array) => {
+  return array.map((element) => {
+    const eachRow = { ...element, isSelected: false }
+    if (eachRow.expandedRowChildComponent) {
+      eachRow.hasExpandedRow = true
+      eachRow.isExpandedRowOpen = element.expandedRowChildComponent.displayOnLoad
+    }
+    return eachRow
+  })
+}
+
+export const isAtLeastOneRowUnselected = (array) => {
+  return array.some((each) => each.isSelected === false)
+}
+
+export const resetColumnsData = (data) => {
+  return data.map((element) => ({
+    ...element,
+    currentSort: false,
+    sortDirection: SORT_DIRECTION.DESC
+  }))
+}
+
+export const resetRowData = (data, isGrouped = false) => {
+  if (isGrouped) {
+    const result = {}
+    data.forEach((el) => {
+      result[el.key] = { ...el, data: mappedData(el.data) }
+    })
+    return result
+  }
+
+  return mappedData(data)
+}
+
+export const toggleAllCheckBoxes = (array, headerCheckBoxState) => {
+  return array.map((element) => {
+    return { ...element, isSelected: !headerCheckBoxState }
+  })
+}
+
+export const toggleRowCheckbox = (array, rowId) => {
+  return array.map((el) => ({
+    ...el,
+    isSelected: el.id === rowId ? !el.isSelected : el.isSelected
+  }))
+}
+
+export const toggleExpandedRow = (array, rowId) => {
+  return array.map((el) => ({
+    ...el,
+    isExpandedRowOpen: el.id === rowId ? !el.isExpandedRowOpen : el.isExpandedRowOpen
+  }))
+}