@dhis2-ui/table 10.16.2 → 10.16.3-alpha.1

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

@@ -0,0 +1,162 @@
+import { shallow, mount } from 'enzyme'
+import React from 'react'
+import { DataTableRow } from '../data-table-row/data-table-row.js'
+import { DragHandleCell } from '../data-table-row/drag-handle-cell.js'
+import { ExpandHandleCell } from '../data-table-row/expand-handle-cell.js'
+import { ExpandedRow } from '../data-table-row/expanded-row.js'
+import { TableRow } from '../table-elements/index.js'
+
+describe('<DataTableRow>', () => {
+    it('renders children', () => {
+        const children = 'children'
+        const wrapper = shallow(<DataTableRow>{children}</DataTableRow>)
+
+        expect(wrapper.containsMatchingElement(children)).toBe(true)
+    })
+    it('accepts a ref', () => {
+        const ref = React.createRef()
+        const wrapper = mount(
+            <table>
+                <thead>
+                    <DataTableRow ref={ref} />
+                </thead>
+            </table>
+        )
+
+        expect(wrapper.find('tr').getDOMNode()).toBe(ref.current)
+    })
+    it('accepts a className prop', () => {
+        const className = 'test'
+        const wrapper = shallow(<DataTableRow className={className} />)
+
+        expect(wrapper.find(TableRow).prop('className')).toBe(className)
+    })
+    it('accepts a dataTest prop', () => {
+        const dataTest = 'test'
+        const wrapper = shallow(<DataTableRow dataTest={dataTest} />)
+
+        expect(wrapper.find(TableRow).prop('dataTest')).toBe(dataTest)
+    })
+    it('accepts a draggable prop', () => {
+        const wrapper = shallow(<DataTableRow draggable />)
+
+        expect(wrapper.find(TableRow).prop('draggable')).toBe(true)
+        expect(wrapper.find(DragHandleCell)).toHaveLength(1)
+    })
+    it('accepts an expandable prop', () => {
+        const wrapper = shallow(
+            <DataTableRow
+                expandable
+                expandableContent="test"
+                onExpandToggle={() => {}}
+            />
+        )
+
+        expect(wrapper.find(ExpandHandleCell)).toHaveLength(1)
+    })
+    it('accepts an expandableContent prop', () => {
+        const expandableContent = <div>content</div>
+        const wrapper = shallow(
+            <DataTableRow
+                expandableContent={expandableContent}
+                expanded
+                expandable
+                onExpandToggle={() => {}}
+            />
+        )
+
+        const additionalRowTag = wrapper
+            .find(ExpandedRow)
+            .dive()
+            .find(TableRow)
+            .dive()
+            .find('tr')
+
+        // render expandableContent in additional row
+        expect(additionalRowTag).toHaveLength(1)
+
+        // Hover styles
+        additionalRowTag.simulate('mouseover')
+        expect(
+            wrapper
+                .find(TableRow)
+                .dive()
+                .find('tr')
+                .hasClass('isHoveringExpandedContent')
+        ).toBe(true)
+
+        additionalRowTag.simulate('mouseout')
+        expect(
+            wrapper
+                .find(TableRow)
+                .dive()
+                .find('tr')
+                .hasClass('isHoveringExpandedContent')
+        ).toBe(false)
+    })
+    it('accepts an expanded prop', () => {
+        const wrapperClosed = shallow(
+            <DataTableRow
+                expandable
+                expandableContent="test"
+                onExpandToggle={() => {}}
+            />
+        )
+        const wrapperOpen = shallow(
+            <DataTableRow
+                expanded
+                expandable
+                expandableContent="test"
+                onExpandToggle={() => {}}
+            />
+        )
+
+        expect(wrapperClosed.find(ExpandedRow)).toHaveLength(0)
+        expect(wrapperOpen.find(ExpandedRow)).toHaveLength(1)
+    })
+    it('accepts a role prop', () => {
+        const role = 'test'
+        const wrapper = shallow(<DataTableRow role={role} />)
+
+        expect(wrapper.find(TableRow).prop('role')).toBe(role)
+    })
+    it('accepts a selected prop', () => {
+        const wrapper = shallow(<DataTableRow selected />)
+
+        expect(wrapper.find(TableRow).prop('selected')).toBe(true)
+    })
+    it('accepts an onExpandToggle prop', () => {
+        const cb = jest.fn()
+        const wrapper = shallow(
+            <DataTableRow
+                expandable
+                expandableContent="test"
+                onExpandToggle={cb}
+            />
+        )
+
+        wrapper.find(ExpandHandleCell).dive().simulate('click')
+
+        expect(cb).toHaveBeenCalledTimes(1)
+        expect(cb).toHaveBeenCalledWith({ expanded: true })
+    })
+
+    it('accepts a hover prop', () => {
+        const cb = jest.fn()
+        const wrapper = mount(
+            <DataTableRow
+                expandable
+                expandableContent="test"
+                onExpandToggle={cb}
+                onMouseOver={cb}
+                onClick={cb}
+            />
+        )
+
+        wrapper.find('tr').simulate('mouseover')
+
+        wrapper.find('tr').simulate('click')
+
+        expect(cb).toHaveBeenCalledTimes(2)
+    })
+})

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

@@ -0,0 +1,85 @@
+import { shallow, mount } from 'enzyme'
+import React from 'react'
+import { DataTable } from '../data-table.js'
+import { Table, TableScrollBox } from '../table-elements/index.js'
+
+describe('<DataTable>', () => {
+    it('renders children', () => {
+        const children = 'children'
+        const wrapper = shallow(<DataTable>{children}</DataTable>)
+
+        expect(wrapper.containsMatchingElement(children)).toBe(true)
+    })
+    it('accepts a ref', () => {
+        const ref = React.createRef()
+        const wrapper = mount(<DataTable ref={ref} />)
+
+        expect(wrapper.find('table').getDOMNode()).toBe(ref.current)
+    })
+    it('accepts a className prop', () => {
+        const className = 'test'
+        const wrapper = shallow(<DataTable className={className} />)
+
+        expect(wrapper.find(Table).prop('className')).toBe(className)
+    })
+    it('accepts a dataTest prop', () => {
+        const dataTest = 'test'
+        const wrapper = shallow(<DataTable dataTest={dataTest} />)
+
+        expect(wrapper.find(Table).prop('dataTest')).toBe(dataTest)
+    })
+    it('accepts a layout prop', () => {
+        const layout = 'fixed'
+        const wrapper = shallow(<DataTable layout={layout} />)
+
+        expect(wrapper.find(Table).prop('layout')).toBe(layout)
+    })
+    it('accepts a role prop', () => {
+        const role = 'test'
+        const wrapper = shallow(<DataTable role={role} />)
+
+        expect(wrapper.find(Table).prop('role')).toBe(role)
+    })
+    it('renders a datatable when no scrollHeight or scrollWidth are provided', () => {
+        const wrapper = shallow(<DataTable />)
+
+        expect(wrapper.find(Table)).toHaveLength(1)
+        expect(wrapper.find(TableScrollBox)).toHaveLength(0)
+    })
+    it('wraps the datatable in a scroll box when scrollHeight is provided', () => {
+        const height = '200px'
+        const wrapper = shallow(<DataTable scrollHeight={height} />)
+
+        expect(wrapper.dive().type()).toBe('div')
+        expect(wrapper.find(TableScrollBox)).toHaveLength(1)
+        expect(wrapper.find(TableScrollBox).dive().find(Table)).toHaveLength(1)
+        expect(wrapper.find(TableScrollBox).prop('maxHeight')).toBe(height)
+    })
+    it('wraps the datatable in a scroll box when scrollWidth is provided', () => {
+        const width = '200px'
+        const wrapper = shallow(<DataTable scrollWidth={width} />)
+
+        expect(wrapper.dive().type()).toBe('div')
+        expect(wrapper.find(TableScrollBox)).toHaveLength(1)
+        expect(wrapper.find(TableScrollBox).dive().find(Table)).toHaveLength(1)
+        expect(wrapper.find(TableScrollBox).prop('maxWidth')).toBe(width)
+    })
+    it('wraps the datatable in a scroll box when both scrollHeight and scrollWidth are provided', () => {
+        const size = '200px'
+        const wrapper = shallow(
+            <DataTable scrollHeight={size} scrollWidth={size} />
+        )
+
+        expect(wrapper.dive().type()).toBe('div')
+        expect(wrapper.find(TableScrollBox)).toHaveLength(1)
+        expect(wrapper.find(TableScrollBox).dive().find(Table)).toHaveLength(1)
+        expect(wrapper.find(TableScrollBox).prop('maxHeight')).toBe(size)
+        expect(wrapper.find(TableScrollBox).prop('maxWidth')).toBe(size)
+    })
+    it('accepts a width prop', () => {
+        const width = '200px'
+        const wrapper = shallow(<DataTable width={width} />)
+
+        expect(wrapper.find(Table).prop('width')).toBe(width)
+    })
+})

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

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

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

@@ -0,0 +1,111 @@
+import { mutuallyExclusive, requiredIf } from '@dhis2/prop-types'
+import PropTypes from 'prop-types'
+import React, { forwardRef } from 'react'
+import { TableDataCell, TableHeaderCell } from './table-elements/index.js'
+
+export const DataTableCell = forwardRef(
+    (
+        {
+            active,
+            align = 'left',
+            backgroundColor,
+            bordered,
+            children,
+            className,
+            colSpan,
+            dataTest = 'dhis2-uicore-datatablecell',
+            error,
+            fixed,
+            large,
+
+            left = 'auto',
+            muted,
+            rowSpan,
+            role,
+            scope,
+            staticStyle,
+            tag,
+            valid,
+            width = 'auto',
+            onClick,
+            ...props
+        },
+        ref
+    ) => {
+        const TableCell =
+            (!tag && fixed) || (tag && tag === 'th')
+                ? TableHeaderCell
+                : TableDataCell
+        return (
+            <TableCell
+                {...props}
+                active={active}
+                align={align}
+                backgroundColor={backgroundColor}
+                bordered={bordered}
+                className={className}
+                colSpan={colSpan}
+                dataTest={dataTest}
+                error={error}
+                fixed={fixed}
+                large={large}
+                left={left}
+                muted={muted}
+                rowSpan={rowSpan}
+                ref={ref}
+                role={role}
+                staticStyle={staticStyle}
+                scope={scope}
+                valid={valid}
+                width={width}
+                onClick={onClick}
+            >
+                {children}
+            </TableCell>
+        )
+    }
+)
+
+DataTableCell.displayName = 'DataTableCell'
+
+const stylePropType = mutuallyExclusive(
+    ['valid', 'error', 'muted'],
+    PropTypes.bool
+)
+const requiredIfFixedPropType = requiredIf(
+    (props) => props.fixed,
+    PropTypes.string
+)
+DataTableCell.propTypes = {
+    /** To toggle border color, for example for editing */
+    active: PropTypes.bool,
+    align: PropTypes.oneOf(['left', 'center', 'right']),
+    /** Sets background color of the cell. Disables dynamic background colors from active, hover, and selected states */
+    backgroundColor: PropTypes.string,
+    bordered: PropTypes.bool,
+    children: PropTypes.node,
+    className: PropTypes.string,
+    colSpan: PropTypes.string,
+    dataTest: PropTypes.string,
+    /** Mutually exclusive with muted and valid */
+    error: stylePropType,
+    /** When true a TableHeaderCell with sticky positioning will be rendered */
+    fixed: PropTypes.bool,
+    large: PropTypes.bool,
+    /** Required when fixed */
+    left: requiredIfFixedPropType,
+    /** Mutually exclusive with error and valid */
+    muted: stylePropType,
+    role: PropTypes.string,
+    rowSpan: PropTypes.string,
+    scope: PropTypes.string,
+    /** Surpress hover and active event styles */
+    staticStyle: PropTypes.bool,
+    /** Render a TableDataCell or TableHeaderCell respectively */
+    tag: PropTypes.oneOf(['td', 'th']),
+    /** Mutually exclusive with error and muted */
+    valid: stylePropType,
+    /** Required when fixed */
+    width: requiredIfFixedPropType,
+    onClick: PropTypes.func,
+}

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

@@ -0,0 +1,130 @@
+import { requiredIf } from '@dhis2/prop-types'
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React, { forwardRef } from 'react'
+import { TableHeaderCell } from '../table-elements/index.js'
+import {
+    styles,
+    resolvedTableHeaderCss,
+} from './data-table-column-header.styles.js'
+import { FilterHandle } from './filter-handle.js'
+import { Sorter, SORT_DIRECTIONS } from './sorter.js'
+
+const flexboxAlignLookup = {
+    left: 'flex-start',
+    center: 'center',
+    right: 'flex-end',
+}
+
+export const DataTableColumnHeader = forwardRef(
+    (
+        {
+            align,
+            children,
+            className,
+            colSpan,
+            dataTest = 'dhis2-uicore-datatablecellhead',
+            filter,
+            fixed,
+            large,
+            left,
+            name,
+            role,
+            rowSpan,
+            scope,
+            showFilter,
+            sortDirection,
+            sortIconTitle,
+            top,
+            width,
+            onFilterIconClick,
+            onSortIconClick,
+        },
+        ref
+    ) => (
+        <TableHeaderCell
+            align={align}
+            className={cx(
+                className,
+                'DataTableColumnHeader',
+                resolvedTableHeaderCss.className
+            )}
+            colSpan={colSpan}
+            dataTest={dataTest}
+            fixed={fixed}
+            large={large}
+            left={left}
+            ref={ref}
+            rowSpan={rowSpan}
+            role={role}
+            scope={scope}
+            top={top}
+            width={width}
+        >
+            <span className="container">
+                <span className={cx('top', { large })}>
+                    <span className="content">{children}</span>
+                    {sortDirection && (
+                        <Sorter
+                            name={name}
+                            sortDirection={sortDirection}
+                            onClick={onSortIconClick}
+                            title={sortIconTitle}
+                        />
+                    )}
+                    {filter && (
+                        <FilterHandle
+                            name={name}
+                            active={showFilter}
+                            onClick={onFilterIconClick}
+                        />
+                    )}
+                </span>
+                {showFilter && filter}
+            </span>
+            {resolvedTableHeaderCss.styles}
+            <style jsx>{styles}</style>
+            <style jsx>{`
+                .label {
+                    justify-content: ${flexboxAlignLookup[align]};
+                }
+            `}</style>
+        </TableHeaderCell>
+    )
+)
+
+DataTableColumnHeader.displayName = 'DataTableColumnHeader'
+
+DataTableColumnHeader.propTypes = {
+    align: PropTypes.oneOf(['left', 'center', 'right']),
+    children: PropTypes.node,
+    className: PropTypes.string,
+    colSpan: PropTypes.string,
+    dataTest: PropTypes.string,
+    /** The filter element (JSX), required when onFilterIconClick or showFilter are present */
+    filter: requiredIf(
+        (props) => props.onFilterIconClick || props.showFilter,
+        PropTypes.node
+    ),
+    fixed: PropTypes.bool,
+    large: PropTypes.bool,
+    /** Left or top required when fixed */
+    left: requiredIf((props) => props.fixed && !props.top, PropTypes.string),
+    /** Can be used to match a column with a property name */
+    name: PropTypes.string,
+    role: PropTypes.string,
+    rowSpan: PropTypes.string,
+    scope: PropTypes.string,
+    showFilter: requiredIf((props) => props.filter, PropTypes.bool),
+    sortDirection: requiredIf(
+        (props) => props.onSortIconClick,
+        PropTypes.oneOf(SORT_DIRECTIONS)
+    ),
+    sortIconTitle: PropTypes.string,
+    /** Left or top required when fixed */
+    top: requiredIf((props) => props.fixed && !props.left, PropTypes.string),
+    width: PropTypes.string,
+    onFilterIconClick: requiredIf((props) => props.filter, PropTypes.func),
+    /** Sort icon click callback with `nextSortDirection` and `name` in payload */
+    onSortIconClick: requiredIf((props) => props.sortDirection, PropTypes.func),
+}

package/src/data-table/data-table-column-header/data-table-column-header.styles.js

@@ -0,0 +1,30 @@
+import css from 'styled-jsx/css'
+
+export const styles = css`
+    span.container {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+    }
+    span.top {
+        display: flex;
+        flex-direction: row;
+        align-items: flex-start;
+    }
+    span.content {
+        display: flex;
+        align-items: center;
+        min-height: 24px;
+    }
+`
+
+export const resolvedTableHeaderCss = css.resolve`
+    :global(thead) > :global(tr) > th.DataTableColumnHeader {
+        padding-top: 6px;
+        padding-bottom: 6px;
+    }
+    :global(thead) > :global(tr) > th.DataTableColumnHeader.large {
+        padding-top: 12px;
+        padding-bottom: 12px;
+    }
+`

package/src/data-table/data-table-column-header/filter-handle.js

@@ -0,0 +1,30 @@
+import { colors } from '@dhis2/ui-constants'
+import { IconSearch16 } from '@dhis2/ui-icons'
+import PropTypes from 'prop-types'
+import React from 'react'
+import i18n from '../../locales/index.js'
+import { TableHeaderCellAction } from '../table-elements/index.js'
+
+export const FilterHandle = ({ active, name, onClick }) => {
+    const filterIconColor = active ? colors.blue700 : colors.grey600
+    const clickHandler = onClick
+        ? (event) => {
+              onClick({ name, show: !active }, event)
+          }
+        : undefined
+
+    return (
+        <TableHeaderCellAction
+            onClick={clickHandler}
+            title={i18n.t('Toggle filter')}
+        >
+            <IconSearch16 color={filterIconColor} />
+        </TableHeaderCellAction>
+    )
+}
+
+FilterHandle.propTypes = {
+    active: PropTypes.bool,
+    name: PropTypes.string,
+    onClick: PropTypes.func,
+}

package/src/data-table/data-table-column-header/sorter.js

@@ -0,0 +1,67 @@
+import { requiredIf } from '@dhis2/prop-types'
+import { colors } from '@dhis2/ui-constants'
+import PropTypes from 'prop-types'
+import React from 'react'
+import i18n from '../../locales/index.js'
+import { TableHeaderCellAction } from '../table-elements/index.js'
+
+export const ASC = 'asc'
+export const DESC = 'desc'
+export const DEFAULT = 'default'
+export const SORT_DIRECTIONS = [DEFAULT, ASC, DESC]
+
+export const getNextSortDirection = (currentDirection) => {
+    const currentIndex = SORT_DIRECTIONS.indexOf(currentDirection)
+    const nextIndex = (currentIndex + 1) % SORT_DIRECTIONS.length
+
+    return SORT_DIRECTIONS[nextIndex]
+}
+
+export const Sorter = ({ name, sortDirection, title, onClick }) => {
+    const nextSortDirection = getNextSortDirection(sortDirection)
+    const clickHandler = onClick
+        ? (event) => {
+              onClick({ name, direction: nextSortDirection }, event)
+          }
+        : undefined
+
+    return (
+        <TableHeaderCellAction
+            onClick={clickHandler}
+            title={title || i18n.t('Sort items')}
+        >
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                className={sortDirection}
+            >
+                <g fill="none" fillRule="evenodd">
+                    <polygon className="top" points="4 9 12 9 8 14" />
+                    <polygon className="bottom" points="4 7 12 7 8 2" />
+                </g>
+            </svg>
+            <style jsx>{`
+                svg .top,
+                svg .bottom {
+                    fill: ${colors.grey500};
+                }
+                svg.asc .top,
+                svg.desc .bottom {
+                    fill: ${colors.blue700};
+                }
+            `}</style>
+        </TableHeaderCellAction>
+    )
+}
+
+Sorter.propTypes = {
+    name: PropTypes.string,
+    sortDirection: requiredIf(
+        (props) => props.onClick,
+        PropTypes.oneOf(SORT_DIRECTIONS)
+    ),
+    title: PropTypes.string,
+    onClick: PropTypes.func,
+}

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

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

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

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