diff --git a/packages/core/src/Table/Table.js b/packages/core/src/Table/Table.js index dea9c4f083..33417c1d5a 100644 --- a/packages/core/src/Table/Table.js +++ b/packages/core/src/Table/Table.js @@ -1,6 +1,7 @@ import React from 'react' import css from 'styled-jsx/css' import propTypes from '@dhis2/prop-types' +import { Provider } from './TableContext.js' const tableStyles = css` table { @@ -20,12 +21,19 @@ const tableStyles = css` * @example import { Table } from '@dhis2/ui-core' * @see Live demo: {@link /demo/?path=/story/table--static-layout|Storybook} */ -export const Table = ({ children, className, dataTest }) => ( - - {children} +export const Table = ({ + children, + className, + dataTest, + suppressZebraStriping, +}) => ( + +
+ {children} - -
+ + + ) Table.defaultProps = { @@ -38,9 +46,11 @@ Table.defaultProps = { * @prop {TableHead|TableBody|TableFoot|Array.} [children] * @prop {string} [className] * @prop {string} [dataTest] + * @prop {bool} [suppressZebraStriping] */ Table.propTypes = { children: propTypes.node, className: propTypes.string, dataTest: propTypes.string, + suppressZebraStriping: propTypes.bool, } diff --git a/packages/core/src/Table/TableContext.js b/packages/core/src/Table/TableContext.js new file mode 100644 index 0000000000..cfa8aeb942 --- /dev/null +++ b/packages/core/src/Table/TableContext.js @@ -0,0 +1,7 @@ +import { createContext } from 'react' + +export const TableContext = createContext({ + suppressZebraStriping: false, +}) + +export const { Consumer, Provider } = TableContext diff --git a/packages/core/src/Table/TableRow.js b/packages/core/src/Table/TableRow.js index f617f2199f..e71329ce3c 100644 --- a/packages/core/src/Table/TableRow.js +++ b/packages/core/src/Table/TableRow.js @@ -1,9 +1,11 @@ -import React from 'react' +import React, { useContext } from 'react' import css from 'styled-jsx/css' import propTypes from '@dhis2/prop-types' +import cx from 'classnames' +import { TableContext } from './TableContext' const tableRowStyles = css` - tr:nth-child(even) { + .zebraStriping:nth-child(even) { background: #fbfcfd; } ` @@ -15,13 +17,29 @@ const tableRowStyles = css` * @example import { TableRow } from '@dhis2/ui-core' * @see Live demo: {@link /demo/?path=/story/table--static-layout|Storybook} */ -export const TableRow = ({ children, className, dataTest }) => ( - - {children} +export const TableRow = ({ + children, + className, + dataTest, + suppressZebraStriping, +}) => { + const { + suppressZebraStriping: suppressZebraStripingFromContext, + } = useContext(TableContext) - - -) + const zebraStriping = + typeof suppressZebraStriping !== 'undefined' + ? !suppressZebraStriping + : !suppressZebraStripingFromContext + + return ( + + {children} + + + + ) +} TableRow.defaultProps = { dataTest: 'dhis2-uicore-tablerow', @@ -38,4 +56,5 @@ TableRow.propTypes = { children: propTypes.node, className: propTypes.string, dataTest: propTypes.string, + suppressZebraStriping: propTypes.bool, } diff --git a/packages/core/src/Table/TableRowHead.js b/packages/core/src/Table/TableRowHead.js index b1a6e37526..6d73386b80 100644 --- a/packages/core/src/Table/TableRowHead.js +++ b/packages/core/src/Table/TableRowHead.js @@ -11,8 +11,17 @@ import { TableRow } from './TableRow.js' * @example import { TableRowHead } from '@dhis2/ui-core' * @see Live demo: {@link /demo/?path=/story/table--static-layout|Storybook} */ -export const TableRowHead = ({ children, className, dataTest }) => ( - +export const TableRowHead = ({ + children, + className, + dataTest, + suppressZebraStriping, +}) => ( + {children} ) @@ -32,4 +41,5 @@ TableRowHead.propTypes = { children: propTypes.node, className: propTypes.string, dataTest: propTypes.string, + suppressZebraStriping: propTypes.bool, }