@dhis2-ui/table 10.16.2 → 10.16.3

package/src/data-table/data-table-row/data-table-row.js

@@ -0,0 +1,103 @@
+import { requiredIf } from '@dhis2/prop-types'
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React, { useState, forwardRef } from 'react'
+import { TableRow } from '../table-elements/index.js'
+import resolvedCss from './data-table-row.styles.js'
+import { DragHandleCell } from './drag-handle-cell.js'
+import { ExpandHandleCell } from './expand-handle-cell.js'
+import { ExpandedRow } from './expanded-row.js'
+
+export const DataTableRow = forwardRef(
+    (
+        {
+            children,
+            className,
+            dataTest = 'dhis2-uicore-datatablerow',
+            expandableContent,
+            expanded,
+            selected,
+            draggable,
+            role,
+            onExpandToggle,
+            ...rest
+        },
+        ref
+    ) => {
+        const [isHoveringExpandedContent, setIsHoveringExpandedContent] =
+            useState(false)
+        const classes = cx(className, resolvedCss.className, {
+            expanded,
+            selected,
+            draggable,
+            isHoveringExpandedContent,
+        })
+        const childCount = React.Children.count(children)
+        const colSpan = String(
+            draggable || expandableContent ? childCount + 1 : childCount
+        )
+
+        return (
+            <>
+                <TableRow
+                    ref={ref}
+                    className={classes}
+                    dataTest={dataTest}
+                    selected={selected}
+                    draggable={draggable}
+                    role={role}
+                    {...rest}
+                >
+                    {draggable && <DragHandleCell />}
+                    {expandableContent && (
+                        <ExpandHandleCell
+                            expanded={expanded}
+                            onClick={onExpandToggle}
+                        />
+                    )}
+                    {children}
+                    {resolvedCss.styles}
+                </TableRow>
+                {expandableContent && expanded && (
+                    <ExpandedRow
+                        className={className}
+                        dataTest={dataTest}
+                        setIsHoveringExpandedContent={
+                            setIsHoveringExpandedContent
+                        }
+                        colSpan={colSpan}
+                        selected={selected}
+                    >
+                        {expandableContent}
+                    </ExpandedRow>
+                )}
+            </>
+        )
+    }
+)
+
+DataTableRow.displayName = 'DataTableRow'
+
+DataTableRow.propTypes = {
+    /** Should be `<DataTableCell>` or `<DataTableCellHead>` components */
+    children: PropTypes.node,
+    className: PropTypes.string,
+    dataTest: PropTypes.string,
+    /** Renders and additional table cell with drag icon and applies draggable styles */
+    draggable: PropTypes.bool,
+    /** This content will be rendered into an additional row with fullwidth cell and the presence of this prop will display an additional table cell with expand icon */
+    expandableContent: requiredIf(
+        (props) => props.onExpandToggle,
+        PropTypes.node
+    ),
+    /** Toggles expand icon (up/down) and expandable content visibility */
+    expanded: PropTypes.bool,
+    role: PropTypes.string,
+    /** Adds a green background color */
+    selected: PropTypes.bool,
+    /** Callback for expand icon cell clicks */
+    onExpandToggle: requiredIf(
+        (props) => props.expandableContent,
+        PropTypes.func
+    ),
+}

package/src/data-table/data-table-row/data-table-row.styles.js

@@ -0,0 +1,20 @@
+import { colors } from '@dhis2/ui-constants'
+import css from 'styled-jsx/css'
+
+export default css.resolve`
+    tr.isHoveringExpandedContent > :global(td) {
+        background-color: ${colors.grey100};
+    }
+    tr.isHoveringExpandedContent > :global(th) {
+        background-color: ${colors.grey300};
+    }
+    tr.selected.isHoveringExpandedContent > :global(td) {
+        background-color: #cdeae8;
+    }
+    tr.expanded > :global(td) {
+        border-bottom-color: transparent;
+    }
+    tr.expanded > :global(td.bordered) {
+        border-bottom-color: ${colors.grey300};
+    }
+`

package/src/data-table/data-table-row/drag-handle-cell.js

@@ -0,0 +1,9 @@
+import { IconDragHandle24 } from '@dhis2/ui-icons'
+import React from 'react'
+import { TableDataCell } from '../table-elements/index.js'
+
+export const DragHandleCell = () => (
+    <TableDataCell width="48px">
+        <IconDragHandle24 />
+    </TableDataCell>
+)

package/src/data-table/data-table-row/expand-handle-cell.js

@@ -0,0 +1,28 @@
+import { IconChevronDown24, IconChevronUp24 } from '@dhis2/ui-icons'
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+import css from 'styled-jsx/css'
+import { TableDataCell } from '../table-elements/index.js'
+
+const pointer = css.resolve`
+    td {
+        cursor: pointer;
+    }
+`
+
+export const ExpandHandleCell = ({ expanded, onClick }) => (
+    <TableDataCell
+        className={cx(pointer.className, { expanded })}
+        onClick={() => onClick({ expanded: !expanded })}
+        width="48px"
+    >
+        {expanded ? <IconChevronUp24 /> : <IconChevronDown24 />}
+        {pointer.styles}
+    </TableDataCell>
+)
+
+ExpandHandleCell.propTypes = {
+    expanded: PropTypes.bool,
+    onClick: PropTypes.func,
+}

package/src/data-table/data-table-row/expanded-row.js

@@ -0,0 +1,51 @@
+import { colors } from '@dhis2/ui-constants'
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+import css from 'styled-jsx/css'
+import { TableRow, TableDataCell } from '../table-elements/index.js'
+
+const { className: cellClassName, styles } = css.resolve`
+    :global(tr.expanded:hover) + :global(tr) > td {
+        background-color: ${colors.grey100};
+    }
+    :global(tr.expanded:active) + :global(tr) > td {
+        background-color: ${colors.grey200};
+    }
+    :global(tr.selected.expanded:hover) + tr > td {
+        background-color: #cdeae8;
+    }
+`
+
+export const ExpandedRow = ({
+    children,
+    className,
+    colSpan,
+    dataTest,
+    selected,
+    setIsHoveringExpandedContent,
+}) => (
+    <TableRow
+        onMouseOver={() => setIsHoveringExpandedContent(true)}
+        onMouseOut={() => setIsHoveringExpandedContent(false)}
+        className={cx({
+            [`${className}-expandedrow`]: !!className,
+        })}
+        selected={selected}
+        dataTest={dataTest && `${dataTest}-expandedrow`}
+    >
+        <TableDataCell className={cellClassName} colSpan={colSpan}>
+            {children}
+            {styles}
+        </TableDataCell>
+    </TableRow>
+)
+
+ExpandedRow.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    colSpan: PropTypes.string,
+    dataTest: PropTypes.string,
+    selected: PropTypes.bool,
+    setIsHoveringExpandedContent: PropTypes.func,
+}

package/src/data-table/data-table-toolbar.js

@@ -0,0 +1,3 @@
+// This component does not need additional behaviour but is
+// exposed as DataTableToolbar for component name consistency
+export { TableToolbar as DataTableToolbar } from './table-elements/index.js'

package/src/data-table/data-table.e2e.stories.js

@@ -0,0 +1,192 @@
+import React from 'react'
+import { DataTableBody } from './data-table-body.js'
+import { DataTableCell } from './data-table-cell.js'
+import { DataTableColumnHeader } from './data-table-column-header/data-table-column-header.js'
+import { DataTableHead } from './data-table-head.js'
+import { DataTableRow } from './data-table-row/data-table-row.js'
+import { DataTable } from './data-table.js'
+
+export default {
+    title: 'DataTable',
+    component: DataTable,
+}
+
+export const FixedHeaderAndColumns = () => (
+    <DataTable
+        layout="fixed"
+        width="1000px"
+        scrollWidth="500px"
+        scrollHeight="400px"
+    >
+        <DataTableHead>
+            <DataTableRow>
+                <DataTableColumnHeader fixed top="0" left="0" width="120px">
+                    Header fixed-left 1
+                </DataTableColumnHeader>
+                <DataTableColumnHeader fixed top="0" left="120px">
+                    Header fixed-left 2
+                </DataTableColumnHeader>
+                <DataTableColumnHeader fixed top="0">
+                    Header fixed
+                </DataTableColumnHeader>
+                <DataTableColumnHeader fixed top="0">
+                    Header fixed
+                </DataTableColumnHeader>
+                <DataTableColumnHeader fixed top="0">
+                    Header fixed
+                </DataTableColumnHeader>
+                <DataTableColumnHeader fixed top="0">
+                    Header fixed
+                </DataTableColumnHeader>
+                <DataTableColumnHeader fixed top="0">
+                    Header fixed
+                </DataTableColumnHeader>
+                <DataTableColumnHeader fixed top="0">
+                    Header fixed
+                </DataTableColumnHeader>
+            </DataTableRow>
+        </DataTableHead>
+        <DataTableBody>
+            <DataTableRow>
+                <DataTableCell fixed left="0" width="120px">
+                    fixed
+                </DataTableCell>
+                <DataTableCell fixed left="120px">
+                    fixed
+                </DataTableCell>
+                <DataTableCell>scrolling top-left</DataTableCell>
+                <DataTableCell>...</DataTableCell>
+                <DataTableCell>...</DataTableCell>
+                <DataTableCell>...</DataTableCell>
+                <DataTableCell>...</DataTableCell>
+                <DataTableCell>scrolling top-right</DataTableCell>
+            </DataTableRow>
+            <DataTableRow>
+                <DataTableCell fixed left="0" width="120px">
+                    fixed
+                </DataTableCell>
+                <DataTableCell fixed left="120px">
+                    fixed
+                </DataTableCell>
+                <DataTableCell>...</DataTableCell>
+                <DataTableCell>...</DataTableCell>
+                <DataTableCell>...</DataTableCell>
+                <DataTableCell>...</DataTableCell>
+                <DataTableCell>...</DataTableCell>
+                <DataTableCell>...</DataTableCell>
+            </DataTableRow>
+            <DataTableRow>
+                <DataTableCell fixed left="0" width="120px">
+                    fixed
+                </DataTableCell>
+                <DataTableCell fixed left="120px">
+                    fixed
+                </DataTableCell>
+                <DataTableCell>...</DataTableCell>
+                <DataTableCell>...</DataTableCell>
+                <DataTableCell>...</DataTableCell>
+                <DataTableCell>...</DataTableCell>
+                <DataTableCell>...</DataTableCell>
+                <DataTableCell>...</DataTableCell>
+            </DataTableRow>
+            <DataTableRow>
+                <DataTableCell fixed left="0" width="120px">
+                    fixed
+                </DataTableCell>
+                <DataTableCell fixed left="120px">
+                    fixed
+                </DataTableCell>
+                <DataTableCell>...</DataTableCell>
+                <DataTableCell>...</DataTableCell>
+                <DataTableCell>...</DataTableCell>
+                <DataTableCell>...</DataTableCell>
+                <DataTableCell>...</DataTableCell>
+                <DataTableCell>...</DataTableCell>
+            </DataTableRow>
+            <DataTableRow>
+                <DataTableCell fixed left="0" width="120px">
+                    fixed
+                </DataTableCell>
+                <DataTableCell fixed left="120px">
+                    fixed
+                </DataTableCell>
+                <DataTableCell>...</DataTableCell>
+                <DataTableCell>...</DataTableCell>
+                <DataTableCell>...</DataTableCell>
+                <DataTableCell>...</DataTableCell>
+                <DataTableCell>...</DataTableCell>
+                <DataTableCell>...</DataTableCell>
+            </DataTableRow>
+            <DataTableRow>
+                <DataTableCell fixed left="0" width="120px">
+                    fixed
+                </DataTableCell>
+                <DataTableCell fixed left="120px">
+                    fixed
+                </DataTableCell>
+                <DataTableCell>...</DataTableCell>
+                <DataTableCell>...</DataTableCell>
+                <DataTableCell>...</DataTableCell>
+                <DataTableCell>...</DataTableCell>
+                <DataTableCell>...</DataTableCell>
+                <DataTableCell>...</DataTableCell>
+            </DataTableRow>
+            <DataTableRow>
+                <DataTableCell fixed left="0" width="120px">
+                    fixed
+                </DataTableCell>
+                <DataTableCell fixed left="120px">
+                    fixed
+                </DataTableCell>
+                <DataTableCell>...</DataTableCell>
+                <DataTableCell>...</DataTableCell>
+                <DataTableCell>...</DataTableCell>
+                <DataTableCell>...</DataTableCell>
+                <DataTableCell>...</DataTableCell>
+                <DataTableCell>...</DataTableCell>
+            </DataTableRow>
+            <DataTableRow>
+                <DataTableCell fixed left="0" width="120px">
+                    fixed
+                </DataTableCell>
+                <DataTableCell fixed left="120px">
+                    fixed
+                </DataTableCell>
+                <DataTableCell>...</DataTableCell>
+                <DataTableCell>...</DataTableCell>
+                <DataTableCell>...</DataTableCell>
+                <DataTableCell>...</DataTableCell>
+                <DataTableCell>...</DataTableCell>
+                <DataTableCell>...</DataTableCell>
+            </DataTableRow>
+            <DataTableRow>
+                <DataTableCell fixed left="0" width="120px">
+                    fixed
+                </DataTableCell>
+                <DataTableCell fixed left="120px">
+                    fixed
+                </DataTableCell>
+                <DataTableCell>...</DataTableCell>
+                <DataTableCell>...</DataTableCell>
+                <DataTableCell>...</DataTableCell>
+                <DataTableCell>...</DataTableCell>
+                <DataTableCell>...</DataTableCell>
+                <DataTableCell>...</DataTableCell>
+            </DataTableRow>
+            <DataTableRow>
+                <DataTableCell fixed left="0" width="120px">
+                    fixed
+                </DataTableCell>
+                <DataTableCell fixed left="120px">
+                    fixed
+                </DataTableCell>
+                <DataTableCell>scrolling bottom-left</DataTableCell>
+                <DataTableCell>...</DataTableCell>
+                <DataTableCell>...</DataTableCell>
+                <DataTableCell>...</DataTableCell>
+                <DataTableCell>...</DataTableCell>
+                <DataTableCell>scrolling bottom-right</DataTableCell>
+            </DataTableRow>
+        </DataTableBody>
+    </DataTable>
+)

package/src/data-table/data-table.js

@@ -0,0 +1,75 @@
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React, { forwardRef } from 'react'
+import { Table, TableScrollBox } from './table-elements/index.js'
+
+export const DataTable = forwardRef(
+    (
+        {
+            children,
+            className,
+            dataTest = 'dhis2-uicore-datatable',
+            layout = 'auto',
+            role,
+            scrollHeight,
+            scrollWidth,
+            width = '100%',
+        },
+        ref
+    ) => {
+        const scrollable = !!(scrollHeight || scrollWidth)
+        const table = (
+            <Table
+                borderless={scrollable}
+                className={className}
+                dataTest={dataTest}
+                layout={layout}
+                ref={ref}
+                role={role}
+                width={width}
+            >
+                {children}
+            </Table>
+        )
+
+        return !scrollable ? (
+            table
+        ) : (
+            <TableScrollBox
+                className={cx(className, 'tablescrollbox')}
+                dataTest={`${dataTest}-scrollbox`}
+                maxHeight={scrollHeight}
+                maxWidth={scrollWidth}
+            >
+                {table}
+            </TableScrollBox>
+        )
+    }
+)
+
+DataTable.displayName = 'DataTable'
+
+DataTable.propTypes = {
+    /**
+     * Should be `<DataTableHead>`, `<DataTableBody>`, and `<DataTableFoot>` components
+     */
+    children: PropTypes.node,
+    className: PropTypes.string,
+    dataTest: PropTypes.string,
+    /**
+     * Sets the `datatable-layout` property. Switching to `fixed` can prevent style
+     * issues when dealing with a datatable with multiple frozen columns or when dealing
+     * with filter elements in the datatable headers.
+     */
+    layout: PropTypes.oneOf(['auto', 'fixed', 'initial', 'inherit']),
+    role: PropTypes.string,
+    /** Sets max-height of scrollbox */
+    scrollHeight: PropTypes.string,
+    /** Sets max-width of scrollbox */
+    scrollWidth: PropTypes.string,
+    /**
+     * Sets the `width` property. Providing an explicit width can prevent style
+     * issues when dealing with horizontally scrolling datatables with a fixed layout.
+     */
+    width: PropTypes.string,
+}