From e2b80fa7921b7dc8e5d7d8d13da01cc67c31fb81 Mon Sep 17 00:00:00 2001 From: Mike Turley Date: Thu, 25 Apr 2019 16:21:19 -0400 Subject: [PATCH] feat(Table): Add columnTransforms, classNames decorator, Visibility constants, and hidden/visible breakpoints example Closes #1832 --- .../src/components/Table/Table.d.ts | 3 +- .../react-table/src/components/Table/Table.js | 5 +- .../react-table/src/components/Table/Table.md | 62 +++++++++++++++++++ .../react-table/src/components/Table/index.js | 2 +- .../Table/utils/decorators/classNames.js | 21 +++++++ .../src/components/Table/utils/headerUtils.js | 15 +++-- .../components/Table/utils/transformers.js | 1 + 7 files changed, 100 insertions(+), 9 deletions(-) create mode 100644 packages/patternfly-4/react-table/src/components/Table/utils/decorators/classNames.js diff --git a/packages/patternfly-4/react-table/src/components/Table/Table.d.ts b/packages/patternfly-4/react-table/src/components/Table/Table.d.ts index 9234a707101..d3bc3fcbccf 100644 --- a/packages/patternfly-4/react-table/src/components/Table/Table.d.ts +++ b/packages/patternfly-4/react-table/src/components/Table/Table.d.ts @@ -61,8 +61,9 @@ export interface ISeparator { export interface ICell { title: String; - transforms: Array; + transforms?: Array; cellTransforms?: Array; + columnTransforms?: Array; formatters?: Array; cellFormatters?: Array; props: any; diff --git a/packages/patternfly-4/react-table/src/components/Table/Table.js b/packages/patternfly-4/react-table/src/components/Table/Table.js index 8741f564587..350f06cbcd3 100644 --- a/packages/patternfly-4/react-table/src/components/Table/Table.js +++ b/packages/patternfly-4/react-table/src/components/Table/Table.js @@ -102,8 +102,9 @@ const propTypes = { PropTypes.node, PropTypes.shape({ title: PropTypes.node, - transforms: PropTypes.arrayOf(PropTypes.func), - cellTransforms: PropTypes.arrayOf(PropTypes.func), + transforms: PropTypes.arrayOf(PropTypes.func), // Applies only to header cell + cellTransforms: PropTypes.arrayOf(PropTypes.func), // Applies only to body cells + columnTransforms: PropTypes.arrayOf(PropTypes.func), // Applies to both header and body cells formatters: PropTypes.arrayOf(PropTypes.func), cellFormatters: PropTypes.arrayOf(PropTypes.func) }) diff --git a/packages/patternfly-4/react-table/src/components/Table/Table.md b/packages/patternfly-4/react-table/src/components/Table/Table.md index bf0c5f369d7..db19f2c3230 100644 --- a/packages/patternfly-4/react-table/src/components/Table/Table.md +++ b/packages/patternfly-4/react-table/src/components/Table/Table.md @@ -16,6 +16,8 @@ import { expandable, cellWidth, textCenter, + classNames, + Visibility } from '@patternfly/react-table'; ## Simple table @@ -667,6 +669,66 @@ class WidthTable extends React.Component { } ``` +## Table with hidden/visible breakpoint modifiers + +```js +import React from 'react'; +import { + Table, + TableHeader, + TableBody, + sortable, + SortByDirection, + headerCol, + TableVariant, + expandable, + cellWidth, + classNames, + Visibility +} from '@patternfly/react-table'; + +class HiddenVisibleBreakpointTable extends React.Component { + constructor(props) { + super(props); + this.state = { + columns: [ + { + title: 'Repositories', + columnTransforms: [classNames(Visibility.hidden, Visibility.visibleOnMd, Visibility.hiddenOnLg)] + }, + 'Branches', + { + title: 'Pull requests', + columnTransforms: [classNames(Visibility.hiddenOnMd, Visibility.visibleOnLg)] + }, + 'Workspaces', + { + title: 'Last Commit', + columnTransforms: [classNames(Visibility.hidden, Visibility.visibleOnSm)] + } + ], + rows: [ + ['Visible only on md breakpoint', '10', 'Hidden only on md breakpoint', '5', 'Hidden on xs breakpoint'], + ['Repository 2', '10', '25', '5', '2 days ago'], + ['Repository 3', '10', '25', '5', '2 days ago'], + ['Repository 4', '10', '25', '5', '2 days ago'] + ] + }; + } + + render() { + const { columns, rows } = this.state; + + return ( + + + +
+ ); + } +} +``` + ## Collapsible table ```js diff --git a/packages/patternfly-4/react-table/src/components/Table/index.js b/packages/patternfly-4/react-table/src/components/Table/index.js index 2b00a982898..1f25575ec56 100644 --- a/packages/patternfly-4/react-table/src/components/Table/index.js +++ b/packages/patternfly-4/react-table/src/components/Table/index.js @@ -4,5 +4,5 @@ export { default as TableBody } from './Body'; export { default as BodyWrapper } from './BodyWrapper'; export { default as RowWrapper } from './RowWrapper'; export { default as ExpandableRowContent } from './ExpandableRowContent'; -export { sortable, headerCol, cellWidth, expandable, isRowExpanded, textCenter } from './utils'; +export { sortable, headerCol, cellWidth, expandable, isRowExpanded, textCenter, classNames, Visibility } from './utils'; export { SortByDirection } from './SortColumn'; diff --git a/packages/patternfly-4/react-table/src/components/Table/utils/decorators/classNames.js b/packages/patternfly-4/react-table/src/components/Table/utils/decorators/classNames.js new file mode 100644 index 00000000000..baff3b652cf --- /dev/null +++ b/packages/patternfly-4/react-table/src/components/Table/utils/decorators/classNames.js @@ -0,0 +1,21 @@ +import { css } from '@patternfly/react-styles'; +import styles from '@patternfly/patternfly/components/Table/table.css'; + +const pickProperties = (object, properties) => + properties.reduce((picked, property) => ({ ...picked, [property]: object[property] }), {}); + +export const Visibility = pickProperties(styles.modifiers, [ + 'hidden', + 'hiddenOnSm', + 'hiddenOnMd', + 'hiddenOnLg', + 'hiddenOnXl', + 'visibleOnSm', + 'visibleOnMd', + 'visibleOnLg', + 'visibleOnXl' +]); + +export default (...classNames) => () => ({ + className: css(...classNames) +}); diff --git a/packages/patternfly-4/react-table/src/components/Table/utils/headerUtils.js b/packages/patternfly-4/react-table/src/components/Table/utils/headerUtils.js index 6158f2a1290..4b31fbdf466 100644 --- a/packages/patternfly-4/react-table/src/components/Table/utils/headerUtils.js +++ b/packages/patternfly-4/react-table/src/components/Table/utils/headerUtils.js @@ -12,18 +12,22 @@ import { import { defaultTitle } from './formatters'; /** - * Generate header with transofmrs and formatters from custom header object. - * @param {*} header with transforms formatters and rest of header object. + * Generate header with transforms and formatters from custom header object. + * @param {*} header with transforms, formatters, columnTransforms, and rest of header object. * @param {*} title to be used as label in header config. * @return {*} header, label, transforms: Array, formatters: Array. */ -const generateHeader = ({ transforms: origTransforms, formatters: origFormatters, header }, title) => ({ +const generateHeader = ( + { transforms: origTransforms, formatters: origFormatters, columnTransforms, header }, + title +) => ({ ...header, label: title, transforms: [ scopeColTransformer, emptyCol, ...(origTransforms || []), + ...(columnTransforms || []), ...(header && header.hasOwnProperty('transforms') ? header.transforms : []) ], formatters: [...(origFormatters || []), ...(header && header.hasOwnProperty('formatters') ? header.formatters : [])] @@ -31,13 +35,14 @@ const generateHeader = ({ transforms: origTransforms, formatters: origFormatters /** * Function to generate cell for header config to change look of each cell. - * @param {*} customCell config with cellFormatters, cellTransforms and rest of cell config. + * @param {*} customCell config with cellFormatters, cellTransforms, columnTransforms and rest of cell config. * @returns {*} cell, transforms: Array, formatters: Array. */ -const generateCell = ({ cellFormatters, cellTransforms, cell }) => ({ +const generateCell = ({ cellFormatters, cellTransforms, columnTransforms, cell }) => ({ ...cell, transforms: [ ...(cellTransforms || []), + ...(columnTransforms || []), ...(cell && cell.hasOwnProperty('transforms') ? cell.transforms : []), mapProps // This transform should be applied last so that props that are manually defined at the cell level will override all other transforms. ], diff --git a/packages/patternfly-4/react-table/src/components/Table/utils/transformers.js b/packages/patternfly-4/react-table/src/components/Table/utils/transformers.js index 63d8a6dcd8d..25b316d548b 100644 --- a/packages/patternfly-4/react-table/src/components/Table/utils/transformers.js +++ b/packages/patternfly-4/react-table/src/components/Table/utils/transformers.js @@ -5,6 +5,7 @@ export { default as cellWidth } from './decorators/cellWidth'; export { default as textCenter } from './decorators/textCenter'; export { collapsible, expandedRow, expandable } from './decorators/collapsible'; export { default as headerCol } from './decorators/headerCol'; +export { default as classNames, Visibility } from './decorators/classNames'; export const emptyTD = () => ({ scope: '',