From 45d3001bdc99d3de857ef731f5154ab334a50501 Mon Sep 17 00:00:00 2001 From: nicolethoen Date: Tue, 3 Sep 2019 14:30:41 -0400 Subject: [PATCH 01/22] first steps --- .../components/DataToolbar/DataToolbar.md | 281 ++++++++++++++++++ .../components/DataToolbar/DataToolbar.tsx | 22 ++ .../DataToolbar/DataToolbarContent.tsx | 30 ++ .../DataToolbarExpandableContent.tsx | 34 +++ .../DataToolbar/DataToolbarGroup.tsx | 55 ++++ .../DataToolbar/DataToolbarItem.tsx | 49 +++ .../DataToolbar/DataToolbarItemWithChipGroup | 1 + .../DataToolbar/DataToolbarToggleGroup.tsx | 48 +++ .../DataToolbar/DataToolbarUtils.tsx | 50 ++++ .../components/DataToolbar/index.ts | 4 + .../src/experimental/components/index.ts | 1 + .../patternfly-4/react-docs/gatsby-browser.js | 1 + 12 files changed, 576 insertions(+) create mode 100644 packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.md create mode 100644 packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.tsx create mode 100644 packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarContent.tsx create mode 100644 packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarExpandableContent.tsx create mode 100644 packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarGroup.tsx create mode 100644 packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItem.tsx create mode 100644 packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItemWithChipGroup create mode 100644 packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarToggleGroup.tsx create mode 100644 packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarUtils.tsx create mode 100644 packages/patternfly-4/react-core/src/experimental/components/DataToolbar/index.ts diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.md b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.md new file mode 100644 index 00000000000..95a348fb762 --- /dev/null +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.md @@ -0,0 +1,281 @@ +--- +title: 'DataToolbar' +cssPrefix: 'pf-c-data-toolbar' +typescript: true +propComponents: ['DataToolbar'] +section: 'experimental' +--- + +import { DataToolbar , DataToolbarItem, DataToolbarGroup, DataToolbarContent } from '@patternfly/react-core/dist/esm/experimental'; +import { Alert, Button, InputGroup, TextInput, SearchIcon } from '@patternfly/react-core'; + + + Please don't use this component, it's only an example of what an experimental component could be + and likely going away in our next release. + +
+ +## Data toolbar +```js +import React from 'react'; +import { DataToolbar , DataToolbarItem, DataToolbarContent } from '@patternfly/react-core/dist/esm/experimental'; +import { Button, InputGroup, TextInput, SearchIcon } from '@patternfly/react-core'; + +class DataToolbarItems extends React.Component { + constructor(props) { + super(props); + } + + render() { + const items = + + + + + + + + + + ; + + return {items}; + } +} + +``` + +## Data toolbar spacers +```js +import React from 'react'; +import { DataToolbar , DataToolbarItem, DataToolbarContent } from '@patternfly/react-core/dist/esm/experimental'; +import { Button } from '@patternfly/react-core'; + +class DataToolbarSpacers extends React.Component { + constructor(props) { + super(props); + } + + render() { + const firstSpacers = [ + {spacerSize: 'none'} + ]; + const secondSpacers = [ + {spacerSize: 'sm'} + ]; + const thirdSpacers = [ + {spacerSize: 'md'} + ]; + const fourthSpacers = [ + {spacerSize: 'lg'} + ]; + const fifthSpacers = [ + {spacerSize: 'none'}, + {spacerSize: 'sm', breakpoint: 'md'}, + {spacerSize: 'md', breakpoint: 'lg'}, + {spacerSize: 'lg', breakpoint: 'xl'} + ]; + + const items = + + + + + + + + ; + + return {items}; + } +} + +``` + +## Data toolbar group types +```js +import React from 'react'; +import { DataToolbar, DataToolbarContent, DataToolbarGroup, DataToolbarItem, Select, SelectOption, EditIcon, CloneIcon, SyncIcon, Button } from '@patternfly/react-core/dist/esm/experimental'; + + +class DataToolbarGroupTypes extends React.Component { + constructor(props) { + super(props); + + this.firstOptions = [ + { value: 'A', disabled: false }, + { value: 'B', disabled: false }, + { value: 'C', disabled: false }, + ]; + + this.secondOptions = [ + { value: '1', disabled: false }, + { value: '2', disabled: false }, + { value: '3', disabled: false }, + ]; + + this.thirdOptions = [ + { value: 'I', disabled: false }, + { value: 'II', disabled: false }, + { value: 'III', disabled: false }, + ]; + + this.state = { + firstIsExpanded: false, + firstSelected: null, + secondIsExpanded: false, + secondSelected: null, + thirdIsExpanded: false, + thirdSelected: null, + }; + + this.onFirstToggle = isExpanded => { + this.setState({ + firstIsExpanded: isExpanded + }); + }; + + this.onFirstSelect = (event, selection) => { + this.setState({ + firstSelected: selection, + firstIsExpanded: false + }); + }; + + this.onSecondToggle = isExpanded => { + this.setState({ + secondIsExpanded: isExpanded + }); + }; + + this.onSecondSelect = (event, selection) => { + this.setState({ + secondSelected: selection, + secondIsExpanded: false + }); + }; + + this.onThirdToggle = isExpanded => { + this.setState({ + thirdIsExpanded: isExpanded + }); + }; + + this.onThirdSelect = (event, selection) => { + this.setState({ + thirdSelected: selection, + thirdIsExpanded: false + }); + }; + } + + render() { + const { firstIsExpanded, firstSelected, secondIsExpanded, secondSelected, thirdIsExpanded, thirdSelected } = this.state; + + const items = + + + + + + + + + + + + + + + + + + + + + + ; + + return {items}; + } +} + +``` +## Data toolbar toggle groups +```js +import React from 'react'; +import { DataToolbar , DataToolbarItem, DataToolbarContent, DataToolbarToggleGroup } from '@patternfly/react-core/dist/esm/experimental'; +import { Button, InputGroup, TextInput, SearchIcon, FilterIcon } from '@patternfly/react-core'; + +class DataToolbarToggleGroup extends React.Component { + constructor(props) { + super(props); + } + + render() { + const items = } breakpoint='xl'> + + + + + + + + + + ; + + return {items}; + } +} + +``` diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.tsx new file mode 100644 index 00000000000..80583184483 --- /dev/null +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.tsx @@ -0,0 +1,22 @@ +import * as React from 'react'; +import styles from '@patternfly/react-styles/css/components/DataToolbar/data-toolbar'; +import { css } from '@patternfly/react-styles'; + +export interface DataToolbarProps extends React.HTMLProps { + /** TODO */ + className?: string; + /** TODO */ + children: React.ReactNode; +} + +export const DataToolbar: React.FunctionComponent = ({ + className, + children, + ...props +}: DataToolbarProps) => { + return ( +
+ {children} +
+ ); +}; diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarContent.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarContent.tsx new file mode 100644 index 00000000000..4256ef6df07 --- /dev/null +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarContent.tsx @@ -0,0 +1,30 @@ +import * as React from 'react'; +import styles from '@patternfly/react-styles/css/components/DataToolbar/data-toolbar'; +import { css } from '@patternfly/react-styles'; + +import { DataToolbarBreakpointMod, formatBreakpointMods } from './DataToolbarUtils'; + +export interface DataToolbarContentProps extends React.HTMLProps { + /** TODO */ + className?: string; + /** TODO */ + breakpointMods?: DataToolbarBreakpointMod[]; + /** TODO */ + children?: React.ReactNode; +} + +export const DataToolbarContent: React.FunctionComponent = ({ + className, + children, + breakpointMods = [] as DataToolbarBreakpointMod[], + ...props + }: DataToolbarContentProps) => { + + return ( +
+ {children} +
+ ); +}; diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarExpandableContent.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarExpandableContent.tsx new file mode 100644 index 00000000000..b39b886a852 --- /dev/null +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarExpandableContent.tsx @@ -0,0 +1,34 @@ +import * as React from 'react'; +import styles from '@patternfly/react-styles/css/components/DataToolbar/data-toolbar'; +import { css, getModifier } from '@patternfly/react-styles'; + +import { DataToolbarBreakpointMod, formatBreakpointMods } from './DataToolbarUtils'; + +export interface DataToolbarExpandableContentProps extends React.HTMLProps { + /** TODO */ + className?: string; + /** TODO */ + breakpointMods?: DataToolbarBreakpointMod[]; + /** TODO */ + isExpanded?: boolean; + /** TODO */ + children?: React.ReactNode; +} + +export const DataToolbarExplandableContent: React.FunctionComponent = ({ + className, + breakpointMods = [] as DataToolbarBreakpointMod[], + isExpanded = false, + children, + ...props + }: DataToolbarExpandableContentProps) => { + + return ( +
+ {children} +
+ ); +}; diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarGroup.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarGroup.tsx new file mode 100644 index 00000000000..3f372e2ba8a --- /dev/null +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarGroup.tsx @@ -0,0 +1,55 @@ +import * as React from 'react'; +import styles from '@patternfly/react-styles/css/components/DataToolbar/data-toolbar'; +import { css, getModifier } from '@patternfly/react-styles'; + +import { + DataToolbarBreakpointMod, + DataToolbarSpacer, + formatBreakpointMods, + formatGroupSpacers +} from './DataToolbarUtils'; + +export enum DataToolbarGroupMod { + 'filter-group' = 'filter-group', + 'icon-button-group' = 'icon-button-group', + 'button-group' = 'button-group', +} + +export interface DataToolbarGroupProps extends React.HTMLProps { + /** TODO */ + className?: string; + /** TODO */ + mod?: DataToolbarGroupMod | 'filter-group' | 'icon-button-group' | 'button-group'; + /** TODO */ + breakpointMods?: DataToolbarBreakpointMod[]; + /** TODO */ + spacers?: DataToolbarSpacer[]; + /** TODO */ + children?: React.ReactNode; +} + + +export const DataToolbarGroup: React.FunctionComponent = ({ + breakpointMods = [] as DataToolbarBreakpointMod[], + spacers = [] as DataToolbarSpacer[], + className = "", + mod, + children, + ...props + }: DataToolbarGroupProps) => { + + return ( +
+ {children} +
+ ); + +}; + + + diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItem.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItem.tsx new file mode 100644 index 00000000000..34505fe5c30 --- /dev/null +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItem.tsx @@ -0,0 +1,49 @@ +import * as React from 'react'; +import styles from '@patternfly/react-styles/css/components/DataToolbar/data-toolbar'; +import { css, getModifier } from '@patternfly/react-styles'; + +import { DataToolbarBreakpointMod, DataToolbarSpacer, formatBreakpointMods, formatItemSpacers } from './DataToolbarUtils'; + +export enum DataToolbarItemMod { + separator = 'separator', + 'bulk-select' = 'bulk-select', + 'overflow-menu' = 'overflow-menu', + pagination = 'pagination', + 'search-filter' = 'search-filter', + 'chip-group' = 'chip-group', + clear = 'clear' +} + +export interface DataToolbarItemProps extends React.HTMLProps { + /** TODO */ + className?: string; + /** TODO */ + mod?: DataToolbarItemMod; + /** TODO */ + breakpointMods?: DataToolbarBreakpointMod[]; + /** TODO */ + spacers?: DataToolbarSpacer[]; + /** TODO */ + children?: React.ReactNode; +} + +export const DataToolbarItem: React.FunctionComponent = ({ + className = '', + mod, + breakpointMods = [] as DataToolbarBreakpointMod[], + spacers = [] as DataToolbarSpacer[], + children, + ...props + }: DataToolbarItemProps) => { + + return ( +
+ {children} +
+ ); +}; diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItemWithChipGroup b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItemWithChipGroup new file mode 100644 index 00000000000..31dc8d7d010 --- /dev/null +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItemWithChipGroup @@ -0,0 +1 @@ +// will extend toolbar item with extra props related to chipgroups - need to figure out what they are. diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarToggleGroup.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarToggleGroup.tsx new file mode 100644 index 00000000000..8d3b0b9470e --- /dev/null +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarToggleGroup.tsx @@ -0,0 +1,48 @@ +import * as React from 'react'; +import { formatBreakpointMods, formatGroupSpacers } from './DataToolbarUtils'; +import styles from '@patternfly/react-styles/css/components/DataToolbar/data-toolbar'; +import { css, getModifier } from '@patternfly/react-styles'; +import { DataToolbarGroup, DataToolbarGroupProps } from './DataToolbarGroup'; +import { Button } from '../../../components/Button'; + +// basically extends DataToolBar group with a couple extra props + +export interface DataToolbarToggleGroupProps extends DataToolbarGroupProps { + /** TODO */ + toggleIcon: React.ReactNode; + /** TODO */ + breakpoint: 'md' | 'lg' | 'xl' | '2xl'; +} + + +export const DataToolbarToggleGroup: React.FunctionComponent = ({ + toggleIcon, + breakpoint, + children, + mod, + breakpointMods, + spacers, + className, + ...props +}: DataToolbarToggleGroupProps) => { + + const onToggle = () => { + console.log("toggle clicked"); + }; + + return +
+ +
+ {children} + ; +} diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarUtils.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarUtils.tsx new file mode 100644 index 00000000000..f3dcd90be9c --- /dev/null +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarUtils.tsx @@ -0,0 +1,50 @@ +import { getModifier } from '@patternfly/react-styles'; +import styles from '@patternfly/react-styles/css/components/DataToolbar/data-toolbar'; + +export type DataToolbarBreakpointMod = { + /** TODO */ + modifier: 'hidden' | 'visible' | 'align-right' | 'align-left'; + /** TODO */ + breakpoint: 'md' | 'lg' | 'xl' | '2xl'; +} + +export const formatBreakpointMods = (breakpointMods:DataToolbarBreakpointMod[]) => { + let formattedBreakpointMods = ""; + for (const breakpointMod of breakpointMods) { + formattedBreakpointMods += `${getModifier(styles, `${breakpointMod.modifier}-on-${breakpointMod.breakpoint}`)} `; + } + return formattedBreakpointMods; +}; + +export type DataToolbarSpacer = { + /** TODO */ + spacerSize: 'none' | 'sm' | 'md' | 'lg'; + /** TODO */ + breakpoint?: 'md' | 'lg' | 'xl'; +} + +export const formatItemSpacers = (spacers:DataToolbarSpacer[]) => { + let formattedSpacers = ""; + for (const spacer of spacers) { + formattedSpacers += "pf-m-spacer-" + spacer.spacerSize; + if (spacer.breakpoint) { + formattedSpacers += "-on-" + spacer.breakpoint + " "; + } else { + formattedSpacers += " "; + } + } + return formattedSpacers; +}; + +export const formatGroupSpacers = (spacers:DataToolbarSpacer[]) => { + let formattedSpacers = ""; + for (const spacer of spacers) { + formattedSpacers += "pf-m-space-items-" + spacer.spacerSize; + if (spacer.breakpoint) { + formattedSpacers += "-on-" + spacer.breakpoint + " "; + } else { + formattedSpacers += " "; + } + } + return formattedSpacers; +}; diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/index.ts b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/index.ts new file mode 100644 index 00000000000..0eae69dd623 --- /dev/null +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/index.ts @@ -0,0 +1,4 @@ +export * from './DataToolbar'; +export * from './DataToolbarContent'; +export * from './DataToolbarGroup'; +export * from './DataToolbarItem'; diff --git a/packages/patternfly-4/react-core/src/experimental/components/index.ts b/packages/patternfly-4/react-core/src/experimental/components/index.ts index 065a721dc37..bece9bcf754 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/index.ts +++ b/packages/patternfly-4/react-core/src/experimental/components/index.ts @@ -1,2 +1,3 @@ +export * from './DataToolbar'; export * from './Drawer'; export * from './Spinner'; diff --git a/packages/patternfly-4/react-docs/gatsby-browser.js b/packages/patternfly-4/react-docs/gatsby-browser.js index 9d36bfed315..6341160e335 100644 --- a/packages/patternfly-4/react-docs/gatsby-browser.js +++ b/packages/patternfly-4/react-docs/gatsby-browser.js @@ -6,4 +6,5 @@ import './static/base.css'; // eslint-disable-line import/no-unresolved import '@patternfly-safe/patternfly/patternfly.css'; // Add experimental styles here and in eslintrc.js for the moment. Once they have been moved out of experimental remove the CSS here and in .eslintrc.js import '@patternfly-safe/patternfly/components/Drawer/drawer.css'; +import '@patternfly-safe/patternfly/components/DataToolbar/data-toolbar.css'; import '@patternfly-safe/patternfly/components/Spinner/spinner.css'; From c3b0153991688a0d692e89346ab470a2365902f4 Mon Sep 17 00:00:00 2001 From: nicolethoen Date: Wed, 4 Sep 2019 09:53:50 -0400 Subject: [PATCH 02/22] make children into arrays of reactNodes --- .../components/DataToolbar/DataToolbar.md | 211 ++++++++++-------- .../components/DataToolbar/DataToolbar.tsx | 47 +++- .../DataToolbar/DataToolbarContent.tsx | 6 +- .../DataToolbarExpandableContent.tsx | 6 +- .../DataToolbar/DataToolbarGroup.tsx | 9 +- .../DataToolbar/DataToolbarItem.tsx | 4 +- .../DataToolbar/DataToolbarItemWithChipGroup | 1 - .../DataToolbarItemWithChipGroup.tsx | 69 ++++++ .../DataToolbar/DataToolbarToggleGroup.tsx | 38 ++-- .../components/DataToolbar/index.ts | 2 + 10 files changed, 251 insertions(+), 142 deletions(-) delete mode 100644 packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItemWithChipGroup create mode 100644 packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItemWithChipGroup.tsx diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.md b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.md index 95a348fb762..07a7ea8c894 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.md +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.md @@ -27,7 +27,7 @@ class DataToolbarItems extends React.Component { } render() { - const items = + const items = [ @@ -35,13 +35,15 @@ class DataToolbarItems extends React.Component { - - - + , + , + , - ; + ]; + + const contentRows = []; - return {items}; + return ; } } @@ -78,17 +80,19 @@ class DataToolbarSpacers extends React.Component { {spacerSize: 'lg', breakpoint: 'xl'} ]; - const items = - - - - - - + const items = [ + , + , + , + , + , + , - ; + ]; - return {items}; + const contentRows = []; + + return ; } } @@ -174,76 +178,82 @@ class DataToolbarGroupTypes extends React.Component { render() { const { firstIsExpanded, firstSelected, secondIsExpanded, secondSelected, thirdIsExpanded, thirdSelected } = this.state; - const items = - - - - - - - - - - - - - - - - - - - - - - ; + const filterGroupItems = [ + + + , + + + , + + + + ]; + const iconButtonGroupItems = [ + , + , + , + ]; + const buttonGroupItems = [ + , + , + , + ]; - return {items}; + const items = [ + , + , + + ]; + + const contentRows = []; + + return ; } } @@ -260,21 +270,26 @@ class DataToolbarToggleGroup extends React.Component { } render() { - const items = } breakpoint='xl'> - - - - - - - - - - ; + const toggleGroupItems = [ + + + + + + , + , + , + + ]; + + const items = [} breakpoint='xl' items={toggleGroupItems} />]; + //const items = []; - return {items}; + const contentRows = []; + + return ; } } diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.tsx index 80583184483..2cac7f987e0 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.tsx +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.tsx @@ -6,17 +6,42 @@ export interface DataToolbarProps extends React.HTMLProps { /** TODO */ className?: string; /** TODO */ - children: React.ReactNode; + contentRows: React.ReactNode[]; } -export const DataToolbar: React.FunctionComponent = ({ - className, - children, - ...props -}: DataToolbarProps) => { - return ( -
- {children} -
- ); +export interface DataToolbarState { + /** TODO */ + isExpanded: boolean; +} + +export class DataToolbar extends React.Component { + + static defaultProps = { + + }; + + constructor(props: DataToolbarProps) { + super(props); + + this.state = { + isExpanded: false + } + } + + render() { + + const { className, contentRows, ...props} = this.props; + // const { isExpanded } = this.state; + + // loop over content rows to look + // for a toggle group - if I find one, add an expandable content row to the end + // for an item with chip group - if I find one, build expandable row to display chips + + return ( +
+ {contentRows} +
+ ); + } + }; diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarContent.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarContent.tsx index 4256ef6df07..447a7c82d9c 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarContent.tsx +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarContent.tsx @@ -10,12 +10,12 @@ export interface DataToolbarContentProps extends React.HTMLProps /** TODO */ breakpointMods?: DataToolbarBreakpointMod[]; /** TODO */ - children?: React.ReactNode; + items?: React.ReactNode; } export const DataToolbarContent: React.FunctionComponent = ({ className, - children, + items, breakpointMods = [] as DataToolbarBreakpointMod[], ...props }: DataToolbarContentProps) => { @@ -24,7 +24,7 @@ export const DataToolbarContent: React.FunctionComponent - {children} + {items} ); }; diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarExpandableContent.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarExpandableContent.tsx index b39b886a852..ca678d2f1e0 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarExpandableContent.tsx +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarExpandableContent.tsx @@ -12,14 +12,14 @@ export interface DataToolbarExpandableContentProps extends React.HTMLProps = ({ className, breakpointMods = [] as DataToolbarBreakpointMod[], isExpanded = false, - children, + items, ...props }: DataToolbarExpandableContentProps) => { @@ -28,7 +28,7 @@ export const DataToolbarExplandableContent: React.FunctionComponent - {children} + {items} ); }; diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarGroup.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarGroup.tsx index 3f372e2ba8a..b1f49852b16 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarGroup.tsx +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarGroup.tsx @@ -25,16 +25,15 @@ export interface DataToolbarGroupProps extends React.HTMLProps { /** TODO */ spacers?: DataToolbarSpacer[]; /** TODO */ - children?: React.ReactNode; + items?: React.ReactNode[]; } - export const DataToolbarGroup: React.FunctionComponent = ({ breakpointMods = [] as DataToolbarBreakpointMod[], spacers = [] as DataToolbarSpacer[], - className = "", + className, mod, - children, + items, ...props }: DataToolbarGroupProps) => { @@ -45,7 +44,7 @@ export const DataToolbarGroup: React.FunctionComponent = formatGroupSpacers(spacers), className)} {...props}> - {children} + {items} ); diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItem.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItem.tsx index 34505fe5c30..4009628d4f8 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItem.tsx +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItem.tsx @@ -10,8 +10,6 @@ export enum DataToolbarItemMod { 'overflow-menu' = 'overflow-menu', pagination = 'pagination', 'search-filter' = 'search-filter', - 'chip-group' = 'chip-group', - clear = 'clear' } export interface DataToolbarItemProps extends React.HTMLProps { @@ -28,7 +26,7 @@ export interface DataToolbarItemProps extends React.HTMLProps { } export const DataToolbarItem: React.FunctionComponent = ({ - className = '', + className, mod, breakpointMods = [] as DataToolbarBreakpointMod[], spacers = [] as DataToolbarSpacer[], diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItemWithChipGroup b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItemWithChipGroup deleted file mode 100644 index 31dc8d7d010..00000000000 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItemWithChipGroup +++ /dev/null @@ -1 +0,0 @@ -// will extend toolbar item with extra props related to chipgroups - need to figure out what they are. diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItemWithChipGroup.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItemWithChipGroup.tsx new file mode 100644 index 00000000000..0b711e5a80c --- /dev/null +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItemWithChipGroup.tsx @@ -0,0 +1,69 @@ +import * as React from 'react'; +import { DataToolbarItem, DataToolbarItemProps } from './DataToolbarItem'; +import { ChipGroup, Chip } from '../../../components/ChipGroup'; + +export interface DataToolbarItemWithChipGroupProps extends DataToolbarItemProps { + /** TODO */ + chips?: string[]; + /** TODO */ + isExpanded: boolean; + /** TODO */ + isInExpandableContent?: boolean; + /** TODO */ + children: React.ReactNode; +} + +export interface DataToolbarItemWithChipGroupState { + /** TODO */ + chips?: string[]; +} + +export class DataToolbarItemWithChipGroup extends React.Component { + + static defaultProps = { + isInExpandableContent: false + }; + + constructor(props: DataToolbarItemWithChipGroupProps) { + super(props); + this.state = { + chips: this.props.chips + } + } + + deleteItem = (id: string) => { + const copyOfChips = this.state.chips; + const index = copyOfChips.indexOf(id); + if (index !== -1) { + copyOfChips.splice(index, 1); + this.setState({ chips: copyOfChips }); + } + }; + + render() { + const { isExpanded, isInExpandableContent, children, ...props } = this.props; + const { chips } = this.state; + + + return ( + + {(!isInExpandableContent || isExpanded) && + + {children} + + } + {isInExpandableContent && + + {chips.map(chip => ( + this.deleteItem(chip)}> + {chip} + + ))} + + + } + + ); + } + +}; diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarToggleGroup.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarToggleGroup.tsx index 8d3b0b9470e..06b1c148b37 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarToggleGroup.tsx +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarToggleGroup.tsx @@ -1,11 +1,15 @@ import * as React from 'react'; -import { formatBreakpointMods, formatGroupSpacers } from './DataToolbarUtils'; import styles from '@patternfly/react-styles/css/components/DataToolbar/data-toolbar'; import { css, getModifier } from '@patternfly/react-styles'; -import { DataToolbarGroup, DataToolbarGroupProps } from './DataToolbarGroup'; +import { DataToolbarGroupProps } from './DataToolbarGroup'; import { Button } from '../../../components/Button'; -// basically extends DataToolBar group with a couple extra props +import { + DataToolbarBreakpointMod, + DataToolbarSpacer, + formatBreakpointMods, + formatGroupSpacers +} from './DataToolbarUtils'; export interface DataToolbarToggleGroupProps extends DataToolbarGroupProps { /** TODO */ @@ -14,15 +18,14 @@ export interface DataToolbarToggleGroupProps extends DataToolbarGroupProps { breakpoint: 'md' | 'lg' | 'xl' | '2xl'; } - export const DataToolbarToggleGroup: React.FunctionComponent = ({ toggleIcon, breakpoint, - children, - mod, - breakpointMods, - spacers, + breakpointMods = [] as DataToolbarBreakpointMod[], + spacers = [] as DataToolbarSpacer[], className, + mod, + items, ...props }: DataToolbarToggleGroupProps) => { @@ -30,19 +33,18 @@ export const DataToolbarToggleGroup: React.FunctionComponent -
- + {...props}> +
+ +
+ {items}
- {children} - ; -} + ); +}; diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/index.ts b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/index.ts index 0eae69dd623..e7dfdf5feda 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/index.ts +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/index.ts @@ -2,3 +2,5 @@ export * from './DataToolbar'; export * from './DataToolbarContent'; export * from './DataToolbarGroup'; export * from './DataToolbarItem'; +export * from './DataToolbarToggleGroup'; +export * from './DataToolbarItemWithChipGroup'; From ab00d136bd3951518f172f96f6463bd3ce1805a3 Mon Sep 17 00:00:00 2001 From: nicolethoen Date: Wed, 4 Sep 2019 13:16:59 -0400 Subject: [PATCH 03/22] add comments and continue iterating on components --- .../components/DataToolbar/DataToolbar.tsx | 12 +-- .../DataToolbar/DataToolbarContent.tsx | 6 +- .../DataToolbarExpandableContent.tsx | 2 +- .../DataToolbar/DataToolbarGroup.tsx | 10 +-- .../DataToolbar/DataToolbarItem.tsx | 10 +-- .../DataToolbarItemWithChipGroup.tsx | 10 +-- .../DataToolbar/DataToolbarToggleGroup.tsx | 74 +++++++++++-------- 7 files changed, 71 insertions(+), 53 deletions(-) diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.tsx index 2cac7f987e0..d2698a73a36 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.tsx +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.tsx @@ -3,14 +3,16 @@ import styles from '@patternfly/react-styles/css/components/DataToolbar/data-too import { css } from '@patternfly/react-styles'; export interface DataToolbarProps extends React.HTMLProps { - /** TODO */ + /** Classes applied to root element of the Data toolbar */ className?: string; - /** TODO */ + /** An array of ReactNodes to be rendered as rows in the Data toolbar */ contentRows: React.ReactNode[]; + /** Id of the Data toolbar */ + id: string; } export interface DataToolbarState { - /** TODO */ + /** Flag indicating the if the expandable content is expanded */ isExpanded: boolean; } @@ -30,7 +32,7 @@ export class DataToolbar extends React.Component +
{contentRows}
); diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarContent.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarContent.tsx index 447a7c82d9c..2c8b1ffc866 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarContent.tsx +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarContent.tsx @@ -5,11 +5,11 @@ import { css } from '@patternfly/react-styles'; import { DataToolbarBreakpointMod, formatBreakpointMods } from './DataToolbarUtils'; export interface DataToolbarContentProps extends React.HTMLProps { - /** TODO */ + /** Classes applied to root element of the Data toolbar content row */ className?: string; - /** TODO */ + /** An array of objects representing the various modifiers to apply to the content row at various breakpoints */ breakpointMods?: DataToolbarBreakpointMod[]; - /** TODO */ + /** An array of ReactNodes to be rendered as children of the content row */ items?: React.ReactNode; } diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarExpandableContent.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarExpandableContent.tsx index ca678d2f1e0..d0feeb3b3a9 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarExpandableContent.tsx +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarExpandableContent.tsx @@ -15,7 +15,7 @@ export interface DataToolbarExpandableContentProps extends React.HTMLProps = ({ +export const DataToolbarExpandableContent: React.FunctionComponent = ({ className, breakpointMods = [] as DataToolbarBreakpointMod[], isExpanded = false, diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarGroup.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarGroup.tsx index b1f49852b16..2b5deec0e7a 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarGroup.tsx +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarGroup.tsx @@ -16,15 +16,15 @@ export enum DataToolbarGroupMod { } export interface DataToolbarGroupProps extends React.HTMLProps { - /** TODO */ + /** Classes applied to root element of the Data toolbar group */ className?: string; - /** TODO */ + /** A type modifier which modifies spacing specifically depending on the type of group */ mod?: DataToolbarGroupMod | 'filter-group' | 'icon-button-group' | 'button-group'; - /** TODO */ + /** An array of objects representing the various modifiers to apply to the Data toolbar group at various breakpoints */ breakpointMods?: DataToolbarBreakpointMod[]; - /** TODO */ + /** An array of objects representing the various spacers to apply to the Data toolbar group at various breakpoints */ spacers?: DataToolbarSpacer[]; - /** TODO */ + /** An array of ReactNodes to be rendered inside the Data toolbar group as children */ items?: React.ReactNode[]; } diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItem.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItem.tsx index 4009628d4f8..e6989fcf722 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItem.tsx +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItem.tsx @@ -13,15 +13,15 @@ export enum DataToolbarItemMod { } export interface DataToolbarItemProps extends React.HTMLProps { - /** TODO */ + /** Classes applied to root element of the Data toolbar item */ className?: string; - /** TODO */ + /** A type modifier which modifies spacing specifically depending on the type of item */ mod?: DataToolbarItemMod; - /** TODO */ + /** An array of objects representing the various modifiers to apply to the Data toolbar item at various breakpoints */ breakpointMods?: DataToolbarBreakpointMod[]; - /** TODO */ + /** An array of objects representing the various spacers to apply to the Data toolbar item at various breakpoints */ spacers?: DataToolbarSpacer[]; - /** TODO */ + /** Content to be rendered inside the Data toolbar item */ children?: React.ReactNode; } diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItemWithChipGroup.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItemWithChipGroup.tsx index 0b711e5a80c..6a035f2eb64 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItemWithChipGroup.tsx +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItemWithChipGroup.tsx @@ -3,18 +3,18 @@ import { DataToolbarItem, DataToolbarItemProps } from './DataToolbarItem'; import { ChipGroup, Chip } from '../../../components/ChipGroup'; export interface DataToolbarItemWithChipGroupProps extends DataToolbarItemProps { - /** TODO */ + /** An array of strings to be displayed as chips in the expandable content */ chips?: string[]; - /** TODO */ + /** A flag indicating if the expandable content is currently expanded */ isExpanded: boolean; - /** TODO */ + /** A flag indicating the item is being displayed inside expandable content rather than a content row TODO */ isInExpandableContent?: boolean; - /** TODO */ + /** Content to be rendered inside the Data toolbar item associated with the chip group */ children: React.ReactNode; } export interface DataToolbarItemWithChipGroupState { - /** TODO */ + /** An array of strings being displayed as chips in the expandable content */ chips?: string[]; } diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarToggleGroup.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarToggleGroup.tsx index 06b1c148b37..fb5cd73b86f 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarToggleGroup.tsx +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarToggleGroup.tsx @@ -12,39 +12,55 @@ import { } from './DataToolbarUtils'; export interface DataToolbarToggleGroupProps extends DataToolbarGroupProps { - /** TODO */ + /** An Icon to be rendered when the toggle group has collapsed down */ toggleIcon: React.ReactNode; - /** TODO */ + /** The breakpoint at which the toggle group is collapsed down */ breakpoint: 'md' | 'lg' | 'xl' | '2xl'; + /** The generated id of the expandable content TODO */ + expandableContentId?: string; } -export const DataToolbarToggleGroup: React.FunctionComponent = ({ - toggleIcon, - breakpoint, - breakpointMods = [] as DataToolbarBreakpointMod[], - spacers = [] as DataToolbarSpacer[], - className, - mod, - items, - ...props -}: DataToolbarToggleGroupProps) => { - - const onToggle = () => { - console.log("toggle clicked"); +export interface DataToolbarToggleGroupState { + /** Flag indicating the if the expandable content is expanded */ + isExpanded: boolean; +} + +export class DataToolbar extends React.Component { + + static defaultProps = { + breakpointMods: [] as DataToolbarBreakpointMod[], + spacers: [] as DataToolbarSpacer[], + }; + + constructor(props: DataToolbarToggleGroupProps) { + super(props); + + this.state = { + isExpanded: false + } }; - return ( -
-
- + onToggle = () => { + this.setState({isExpanded: !this.state.isExpanded}); + }; + + render() { + const { mod, breakpointMods, spacers, className, toggleIcon, items, expandableContentId, ...props } = this.props; + const { isExpanded } = this.state; + + return ( +
+
+ +
+ {items}
- {items} -
- ); -}; + ); + }; +} From 926dc17a8d4c28c09b01e26f1f3033de58e9fec2 Mon Sep 17 00:00:00 2001 From: nicolethoen Date: Thu, 5 Sep 2019 11:38:51 -0400 Subject: [PATCH 04/22] add context provider and consumers --- .../components/DataToolbar/DataToolbar.md | 111 +++++++++--------- .../components/DataToolbar/DataToolbar.tsx | 31 +++-- .../DataToolbar/DataToolbarContent.tsx | 8 +- .../DataToolbarExpandableContent.tsx | 6 +- .../DataToolbar/DataToolbarGroup.tsx | 8 +- .../DataToolbarItemWithChipGroup.tsx | 48 +++++--- .../DataToolbar/DataToolbarToggleGroup.tsx | 59 +++++----- .../DataToolbar/DataToolbarUtils.tsx | 8 ++ 8 files changed, 152 insertions(+), 127 deletions(-) diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.md b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.md index 07a7ea8c894..01913bdd5c5 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.md +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.md @@ -6,8 +6,8 @@ propComponents: ['DataToolbar'] section: 'experimental' --- -import { DataToolbar , DataToolbarItem, DataToolbarGroup, DataToolbarContent } from '@patternfly/react-core/dist/esm/experimental'; -import { Alert, Button, InputGroup, TextInput, SearchIcon } from '@patternfly/react-core'; +import { DataToolbar , DataToolbarItem, DataToolbarGroup, DataToolbarContent, DataToolbarToggleGroup } from '@patternfly/react-core/dist/esm/experimental'; +import { Alert, Button, InputGroup, TextInput, SearchIcon, Select, SelectOption, EditIcon, CloneIcon, SyncIcon } from '@patternfly/react-core'; Please don't use this component, it's only an example of what an experimental component could be @@ -27,23 +27,21 @@ class DataToolbarItems extends React.Component { } render() { - const items = [ + const items = - + - , - , - , + + + - ]; - - const contentRows = []; + ; - return ; + return {items}; } } @@ -80,19 +78,17 @@ class DataToolbarSpacers extends React.Component { {spacerSize: 'lg', breakpoint: 'xl'} ]; - const items = [ - , - , - , - , - , - , + const items = + + + + + + - ]; + ; - const contentRows = []; - - return ; + return {items}; } } @@ -101,8 +97,8 @@ class DataToolbarSpacers extends React.Component { ## Data toolbar group types ```js import React from 'react'; -import { DataToolbar, DataToolbarContent, DataToolbarGroup, DataToolbarItem, Select, SelectOption, EditIcon, CloneIcon, SyncIcon, Button } from '@patternfly/react-core/dist/esm/experimental'; - +import { DataToolbar, DataToolbarContent, DataToolbarGroup, DataToolbarItem } from '@patternfly/react-core/dist/esm/experimental'; +import { Button, Select, SelectOption, EditIcon, CloneIcon, SyncIcon } from '@patternfly/react-core'; class DataToolbarGroupTypes extends React.Component { constructor(props) { @@ -178,7 +174,7 @@ class DataToolbarGroupTypes extends React.Component { render() { const { firstIsExpanded, firstSelected, secondIsExpanded, secondSelected, thirdIsExpanded, thirdSelected } = this.state; - const filterGroupItems = [ + const filterGroupItems = - , + - , + + {this.firstOptions.map((option, index) => ( + + ))} + + + + + ; - //const items = {toggleGroupItems}; - const items = {toggleGroupItems}; + const items = } breakpoint='xl'>{toggleGroupItems}; return {items}; } diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.tsx index cb5ccb2f17f..3cccba1abe4 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.tsx +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.tsx @@ -16,11 +16,10 @@ export interface DataToolbarProps extends React.HTMLProps { export interface DataToolbarState { /** Flag indicating the if the expandable content is expanded */ isExpanded: boolean; - /** TODO */ - expandableContentItems: React.ReactNode; } export class DataToolbar extends React.Component { + private expandableContentRef = React.createRef(); static defaultProps = { @@ -31,30 +30,51 @@ export class DataToolbar extends React.Component { + toggleIsExpanded = () => { this.setState((prevState) => ({ - isExpanded: !prevState.isExpanded, - expandableContentItems: expandableContentItems, + isExpanded: !prevState.isExpanded })); - }; + } + + closeExpandableContent = () => { + this.setState(() => ({ + isExpanded: false + })); + } + + componentDidMount() { + window.addEventListener('resize', this.closeExpandableContent); + } render() { const { className, children, id, ...props} = this.props; - const { isExpanded, expandableContentItems } = this.state; + const { isExpanded } = this.state; + + const expandableContentId = `${id}-expandable-content`; return (
- + {children} - {expandableContentItems} +
); } -}; +} diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarContent.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarContent.tsx index 116bb24750b..b870ffc36d8 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarContent.tsx +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarContent.tsx @@ -21,9 +21,13 @@ export const DataToolbarContent: React.FunctionComponent { return ( -
+
{children}
); diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarExpandableContent.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarExpandableContent.tsx index c61ece431d8..ee6107f53e7 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarExpandableContent.tsx +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarExpandableContent.tsx @@ -2,33 +2,32 @@ import * as React from 'react'; import styles from '@patternfly/react-styles/css/components/DataToolbar/data-toolbar'; import { css, getModifier } from '@patternfly/react-styles'; -import { DataToolbarBreakpointMod, formatBreakpointMods } from './DataToolbarUtils'; +import { RefObject } from 'react'; export interface DataToolbarExpandableContentProps extends React.HTMLProps { - /** TODO */ + /** Classes added to the root element of the Data toolbar expandable content */ className?: string; - /** TODO */ - breakpointMods?: DataToolbarBreakpointMod[]; - /** TODO */ + /** Flag indicating the expandable content is expanded */ isExpanded?: boolean; - /** TODO */ - children?: React.ReactNode; + /** Expandable content reference for passing to Data toolbar children */ + expandableContentRef: RefObject; } export const DataToolbarExpandableContent: React.FunctionComponent = ({ className, - breakpointMods = [] as DataToolbarBreakpointMod[], isExpanded = false, - children, + expandableContentRef, ...props }: DataToolbarExpandableContentProps) => { return ( -
- {children} -
+
); }; diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarGroup.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarGroup.tsx index 38596fe8ed1..712e9dff3c7 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarGroup.tsx +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarGroup.tsx @@ -20,9 +20,9 @@ export interface DataToolbarGroupProps extends React.HTMLProps { className?: string; /** A type modifier which modifies spacing specifically depending on the type of group */ mod?: DataToolbarGroupMod | 'filter-group' | 'icon-button-group' | 'button-group'; - /** An array of objects representing the various modifiers to apply to the Data toolbar group at various breakpoints */ + /** Array of objects representing the various modifiers to apply to the Data toolbar group at various breakpoints */ breakpointMods?: DataToolbarBreakpointMod[]; - /** An array of objects representing the various spacers to apply to the Data toolbar group at various breakpoints */ + /** Array of objects representing the various spacers to apply to the Data toolbar group at various breakpoints */ spacers?: DataToolbarSpacer[]; /** Content to be rendered inside the Data toolbar group */ children?: React.ReactNode; @@ -38,17 +38,17 @@ export const DataToolbarGroup: React.FunctionComponent = }: DataToolbarGroupProps) => { return ( -
+
{children}
); }; - - - diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItem.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItem.tsx index e6989fcf722..7af921c8d29 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItem.tsx +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItem.tsx @@ -2,7 +2,12 @@ import * as React from 'react'; import styles from '@patternfly/react-styles/css/components/DataToolbar/data-toolbar'; import { css, getModifier } from '@patternfly/react-styles'; -import { DataToolbarBreakpointMod, DataToolbarSpacer, formatBreakpointMods, formatItemSpacers } from './DataToolbarUtils'; +import { + DataToolbarBreakpointMod, + DataToolbarSpacer, + formatBreakpointMods, + formatItemSpacers +} from './DataToolbarUtils'; export enum DataToolbarItemMod { separator = 'separator', @@ -16,7 +21,7 @@ export interface DataToolbarItemProps extends React.HTMLProps { /** Classes applied to root element of the Data toolbar item */ className?: string; /** A type modifier which modifies spacing specifically depending on the type of item */ - mod?: DataToolbarItemMod; + mod?: DataToolbarItemMod | 'separator' | 'bulk-select' | 'overflow-menu' | 'pagination' | 'search-filter'; /** An array of objects representing the various modifiers to apply to the Data toolbar item at various breakpoints */ breakpointMods?: DataToolbarBreakpointMod[]; /** An array of objects representing the various spacers to apply to the Data toolbar item at various breakpoints */ @@ -35,12 +40,15 @@ export const DataToolbarItem: React.FunctionComponent = ({ }: DataToolbarItemProps) => { return ( -
+
{children}
); diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItemWithChipGroup.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItemWithChipGroup.tsx deleted file mode 100644 index c2f25186686..00000000000 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItemWithChipGroup.tsx +++ /dev/null @@ -1,83 +0,0 @@ -import * as React from 'react'; -import { DataToolbarItem, DataToolbarItemProps } from './DataToolbarItem'; -import { ChipGroup, Chip } from '../../../components/ChipGroup'; -import { DataToolbarContext } from './DataToolbarUtils'; - -export interface DataToolbarItemWithChipGroupProps extends DataToolbarItemProps { - /** An array of strings to be displayed as chips in the expandable content */ - chips?: string[]; - /** A flag indicating the item is being displayed inside expandable content rather than a content row - * TODO: Figure out how and when to set this flag */ - isInExpandableContent?: boolean; - /** Content to be rendered inside the Data toolbar item associated with the chip group */ - children: React.ReactNode; -} - -export interface DataToolbarItemWithChipGroupState { - /** An array of strings being displayed as chips in the expandable content - * TODO: Allow the item (filter, input, etc) to somehow update this array */ - chips?: string[]; -} - -export class DataToolbarItemWithChipGroup extends React.Component { - - static defaultProps = { - isInExpandableContent: false - }; - - constructor(props: DataToolbarItemWithChipGroupProps) { - super(props); - this.state = { - chips: this.props.chips - } - } - - deleteItem = (id: string) => { - const copyOfChips = this.state.chips; - const index = copyOfChips.indexOf(id); - if (index !== -1) { - copyOfChips.splice(index, 1); - this.setState({ chips: copyOfChips }); - } - }; - - render() { - const { isInExpandableContent, children, ...props } = this.props; - const { chips } = this.state; - - - return ( - - {({ isExpanded, updateExpandableContent }) => { - - const chipGroup = - {chips.map(chip => ( - this.deleteItem(chip)}> - {chip} - - ))} - ; - - /** TODO: make sure if multiple chip groups in a DataToolbar, they are EACH displayed in the expandable content **/ - if (!isExpanded) { - updateExpandableContent([chipGroup]); - } - - return ( - - {(!isInExpandableContent || isExpanded) && - - {children} - - } - {isInExpandableContent && - {chipGroup} - - } - ); - }} - - ); - } - -}; diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarToggleGroup.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarToggleGroup.tsx index 58ca731ddbb..87380b59845 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarToggleGroup.tsx +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarToggleGroup.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; +import * as ReactDOM from 'react-dom'; import styles from '@patternfly/react-styles/css/components/DataToolbar/data-toolbar'; import { css, getModifier } from '@patternfly/react-styles'; import { DataToolbarGroupProps } from './DataToolbarGroup'; @@ -17,13 +18,9 @@ export interface DataToolbarToggleGroupProps extends DataToolbarGroupProps { toggleIcon: React.ReactNode; /** The breakpoint at which the toggle group is collapsed down */ breakpoint: 'md' | 'lg' | 'xl' | '2xl'; - /** The generated id of the expandable content TODO */ - expandableContentId?: string; } -export interface DataToolbarToggleGroupState {} - -export class DataToolbarToggleGroup extends React.Component { +export class DataToolbarToggleGroup extends React.Component { static defaultProps = { breakpointMods: [] as DataToolbarBreakpointMod[], @@ -31,33 +28,40 @@ export class DataToolbarToggleGroup extends React.Component - {({isExpanded, updateExpandableContent}) => { + {({ isExpanded, toggleIsExpanded, expandableContentRef, expandableContentId}) => { return ( -
+
- {children} + { isExpanded ? ReactDOM.createPortal(children, expandableContentRef.current): children }
); + }} ); - }; + } } diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarUtils.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarUtils.tsx index 6a6cc648c9a..605c890bb1d 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarUtils.tsx +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarUtils.tsx @@ -1,23 +1,27 @@ import { getModifier } from '@patternfly/react-styles'; import styles from '@patternfly/react-styles/css/components/DataToolbar/data-toolbar'; import * as React from 'react'; +import { RefObject } from 'react'; interface DataToolbarContextProps { isExpanded: boolean; - updateExpandableContent: (expandableContentItems: React.ReactNode) => void; + toggleIsExpanded: () => void; + expandableContentRef: RefObject; + expandableContentId: string; } export const DataToolbarContext = React.createContext>({}); export type DataToolbarBreakpointMod = { - /** TODO */ + /** The attribute to modify */ modifier: 'hidden' | 'visible' | 'align-right' | 'align-left'; - /** TODO */ + /** The breakpoint at which to apply the modifier */ breakpoint: 'md' | 'lg' | 'xl' | '2xl'; -} +}; -export const formatBreakpointMods = (breakpointMods:DataToolbarBreakpointMod[]) => { - let formattedBreakpointMods = ""; +export const formatBreakpointMods = (breakpointMods: DataToolbarBreakpointMod[]) => { + + let formattedBreakpointMods = ''; for (const breakpointMod of breakpointMods) { formattedBreakpointMods += `${getModifier(styles, `${breakpointMod.modifier}-on-${breakpointMod.breakpoint}`)} `; } @@ -25,33 +29,35 @@ export const formatBreakpointMods = (breakpointMods:DataToolbarBreakpointMod[]) }; export type DataToolbarSpacer = { - /** TODO */ + /** The size of the spacer */ spacerSize: 'none' | 'sm' | 'md' | 'lg'; - /** TODO */ + /** The breakpoint at which to apply the spacer */ breakpoint?: 'md' | 'lg' | 'xl'; -} +}; + +export const formatItemSpacers = (spacers: DataToolbarSpacer[]) => { -export const formatItemSpacers = (spacers:DataToolbarSpacer[]) => { - let formattedSpacers = ""; + let formattedSpacers = ''; for (const spacer of spacers) { - formattedSpacers += "pf-m-spacer-" + spacer.spacerSize; + formattedSpacers += 'pf-m-spacer-' + spacer.spacerSize; if (spacer.breakpoint) { - formattedSpacers += "-on-" + spacer.breakpoint + " "; + formattedSpacers += '-on-' + spacer.breakpoint + ' '; } else { - formattedSpacers += " "; + formattedSpacers += ' '; } } return formattedSpacers; }; -export const formatGroupSpacers = (spacers:DataToolbarSpacer[]) => { - let formattedSpacers = ""; +export const formatGroupSpacers = (spacers: DataToolbarSpacer[]) => { + + let formattedSpacers = ''; for (const spacer of spacers) { - formattedSpacers += "pf-m-space-items-" + spacer.spacerSize; + formattedSpacers += 'pf-m-space-items-' + spacer.spacerSize; if (spacer.breakpoint) { - formattedSpacers += "-on-" + spacer.breakpoint + " "; + formattedSpacers += '-on-' + spacer.breakpoint + ' '; } else { - formattedSpacers += " "; + formattedSpacers += ' '; } } return formattedSpacers; diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/index.ts b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/index.ts index e7dfdf5feda..13954bc8158 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/index.ts +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/index.ts @@ -3,4 +3,3 @@ export * from './DataToolbarContent'; export * from './DataToolbarGroup'; export * from './DataToolbarItem'; export * from './DataToolbarToggleGroup'; -export * from './DataToolbarItemWithChipGroup'; From a5d6dca6535183d038eeaf2de9e1621cde0e3574 Mon Sep 17 00:00:00 2001 From: nicolethoen Date: Thu, 5 Sep 2019 23:16:25 -0400 Subject: [PATCH 06/22] fix pf4 docs build --- .../src/experimental/components/DataToolbar/DataToolbar.md | 4 ++-- .../components/DataToolbar/DataToolbarItemWithChipGroup.tsx | 0 2 files changed, 2 insertions(+), 2 deletions(-) create mode 100644 packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItemWithChipGroup.tsx diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.md b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.md index 683b11070d4..90ee6c08626 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.md +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.md @@ -8,7 +8,7 @@ section: 'experimental' import { DataToolbar , DataToolbarItem, DataToolbarGroup, DataToolbarContent, DataToolbarToggleGroup } from '@patternfly/react-core/dist/esm/experimental'; import { Alert, Button, InputGroup, TextInput, Select, SelectOption } from '@patternfly/react-core'; -import { EditIcon, CloneIcon, SyncIcon, SearchIcon } from '@patternfly/react-icons' +import { EditIcon, CloneIcon, SyncIcon, SearchIcon, FilterIcon } from '@patternfly/react-icons' Please don't use this component, it's only an example of what an experimental component could be @@ -263,7 +263,7 @@ class DataToolbarGroupTypes extends React.Component { ## Data toolbar toggle groups ```js import React from 'react'; -import { DataToolbar , DataToolbarItem, DataToolbarContent, DataToolbarGroup, DataToolbarToggleGroup } from '@patternfly/react-core/dist/esm/experimental'; +import { DataToolbar , DataToolbarItem, DataToolbarContent, DataToolbarToggleGroup } from '@patternfly/react-core/dist/esm/experimental'; import { Button, InputGroup, Select, SelectOption } from '@patternfly/react-core'; import { TextInput, SearchIcon, FilterIcon } from '@patternfly/react-icons' diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItemWithChipGroup.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItemWithChipGroup.tsx new file mode 100644 index 00000000000..e69de29bb2d From 80204b0f4c0368bea6d42ff04917364dbb0f3398 Mon Sep 17 00:00:00 2001 From: nicolethoen Date: Fri, 6 Sep 2019 14:46:43 -0400 Subject: [PATCH 07/22] address first PR comments --- .../components/DataToolbar/DataToolbar.md | 19 ++++++--- .../components/DataToolbar/DataToolbar.tsx | 39 +++++-------------- .../DataToolbar/DataToolbarGroup.tsx | 16 +++++--- .../DataToolbar/DataToolbarItem.tsx | 12 +++--- .../DataToolbarItemWithChipGroup.tsx | 0 .../DataToolbar/DataToolbarToggleGroup.tsx | 10 ++--- .../DataToolbar/DataToolbarUtils.tsx | 38 ++++-------------- 7 files changed, 50 insertions(+), 84 deletions(-) delete mode 100644 packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItemWithChipGroup.tsx diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.md b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.md index 90ee6c08626..0be41f85791 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.md +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.md @@ -38,7 +38,7 @@ class DataToolbarItems extends React.Component { - + ; @@ -84,7 +84,7 @@ class DataToolbarSpacers extends React.Component { - + ; @@ -250,9 +250,9 @@ class DataToolbarGroupTypes extends React.Component { ; const items = - {filterGroupItems} - {iconButtonGroupItems} - {buttonGroupItems} + {filterGroupItems} + {iconButtonGroupItems} + {buttonGroupItems} ; return {items}; @@ -271,6 +271,7 @@ class DataToolbarToggleGroupExample extends React.Component { constructor(props) { super(props); this.state = { + isExpanded: false, inputValue: "", firstIsExpanded: false, firstSelected: null, @@ -278,6 +279,12 @@ class DataToolbarToggleGroupExample extends React.Component { secondSelected: null }; + this.toggleIsExpanded = () => { + this.setState((prevState) => ({ + isExpanded: !prevState.isExpanded + })); + }; + this.firstOptions = [ { value: 'Status', disabled: false, isPlaceholder: true }, { value: 'New', disabled: false }, @@ -392,7 +399,7 @@ class DataToolbarToggleGroupExample extends React.Component { const items = } breakpoint='xl'>{toggleGroupItems}; - return {items}; + return {items}; } } diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.tsx index 3cccba1abe4..82638726219 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.tsx +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.tsx @@ -9,50 +9,29 @@ export interface DataToolbarProps extends React.HTMLProps { className?: string; /** Content to be rendered as rows in the Data toolbar */ children?: React.ReactNode; + /** Flag indicating if a Data toolbar toggle group's expandable content is expanded */ + isExpanded?: boolean; + /** A callback for setting the isExpanded flag */ + toggleIsExpanded?: () => void; /** Id of the Data toolbar */ id: string; } -export interface DataToolbarState { - /** Flag indicating the if the expandable content is expanded */ - isExpanded: boolean; -} - -export class DataToolbar extends React.Component { +export class DataToolbar extends React.Component { private expandableContentRef = React.createRef(); static defaultProps = { - + isExpanded: false, + toggleIsExpanded: () => null as any }; constructor(props: DataToolbarProps) { super(props); - - this.state = { - isExpanded: false, - }; - } - - toggleIsExpanded = () => { - this.setState((prevState) => ({ - isExpanded: !prevState.isExpanded - })); - } - - closeExpandableContent = () => { - this.setState(() => ({ - isExpanded: false - })); - } - - componentDidMount() { - window.addEventListener('resize', this.closeExpandableContent); } render() { - const { className, children, id, ...props} = this.props; - const { isExpanded } = this.state; + const { className, children, isExpanded, toggleIsExpanded, id, ...props} = this.props; const expandableContentId = `${id}-expandable-content`; @@ -61,7 +40,7 @@ export class DataToolbar extends React.Component { /** Classes applied to root element of the Data toolbar group */ className?: string; /** A type modifier which modifies spacing specifically depending on the type of group */ - mod?: DataToolbarGroupMod | 'filter-group' | 'icon-button-group' | 'button-group'; + variant?: DataToolbarGroupVariant | 'filter-group' | 'icon-button-group' | 'button-group'; /** Array of objects representing the various modifiers to apply to the Data toolbar group at various breakpoints */ breakpointMods?: DataToolbarBreakpointMod[]; /** Array of objects representing the various spacers to apply to the Data toolbar group at various breakpoints */ spacers?: DataToolbarSpacer[]; + /** Array of objects representing the spacers to apply to the items in this group at various breakpoints */ + itemSpacers?: DataToolbarSpacer[]; /** Content to be rendered inside the Data toolbar group */ children?: React.ReactNode; } @@ -31,8 +33,9 @@ export interface DataToolbarGroupProps extends React.HTMLProps { export const DataToolbarGroup: React.FunctionComponent = ({ breakpointMods = [] as DataToolbarBreakpointMod[], spacers = [] as DataToolbarSpacer[], + itemSpacers = [] as DataToolbarSpacer[], className, - mod, + variant, children, ...props }: DataToolbarGroupProps) => { @@ -41,9 +44,10 @@ export const DataToolbarGroup: React.FunctionComponent =
diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItem.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItem.tsx index 7af921c8d29..f80147855b4 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItem.tsx +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItem.tsx @@ -6,10 +6,10 @@ import { DataToolbarBreakpointMod, DataToolbarSpacer, formatBreakpointMods, - formatItemSpacers + formatSpacers } from './DataToolbarUtils'; -export enum DataToolbarItemMod { +export enum DataToolbarItemVariant { separator = 'separator', 'bulk-select' = 'bulk-select', 'overflow-menu' = 'overflow-menu', @@ -21,7 +21,7 @@ export interface DataToolbarItemProps extends React.HTMLProps { /** Classes applied to root element of the Data toolbar item */ className?: string; /** A type modifier which modifies spacing specifically depending on the type of item */ - mod?: DataToolbarItemMod | 'separator' | 'bulk-select' | 'overflow-menu' | 'pagination' | 'search-filter'; + variant?: DataToolbarItemVariant | 'separator' | 'bulk-select' | 'overflow-menu' | 'pagination' | 'search-filter'; /** An array of objects representing the various modifiers to apply to the Data toolbar item at various breakpoints */ breakpointMods?: DataToolbarBreakpointMod[]; /** An array of objects representing the various spacers to apply to the Data toolbar item at various breakpoints */ @@ -32,7 +32,7 @@ export interface DataToolbarItemProps extends React.HTMLProps { export const DataToolbarItem: React.FunctionComponent = ({ className, - mod, + variant, breakpointMods = [] as DataToolbarBreakpointMod[], spacers = [] as DataToolbarSpacer[], children, @@ -43,9 +43,9 @@ export const DataToolbarItem: React.FunctionComponent = ({
diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItemWithChipGroup.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItemWithChipGroup.tsx deleted file mode 100644 index e69de29bb2d..00000000000 diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarToggleGroup.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarToggleGroup.tsx index 87380b59845..8a6aa0f4027 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarToggleGroup.tsx +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarToggleGroup.tsx @@ -10,7 +10,7 @@ import { DataToolbarBreakpointMod, DataToolbarSpacer, formatBreakpointMods, - formatGroupSpacers + formatSpacers } from './DataToolbarUtils'; export interface DataToolbarToggleGroupProps extends DataToolbarGroupProps { @@ -28,7 +28,7 @@ export class DataToolbarToggleGroup extends React.Component @@ -37,9 +37,9 @@ export class DataToolbarToggleGroup extends React.Component + + + + + + + + + + + ; + + const items = } breakpoint='xl'>{toggleGroupItems}; + + return {items}; + } +} +``` + +### Data toolbar consumer managed toggle groups +```js +import React from 'react'; +import { DataToolbar , DataToolbarItem, DataToolbarContent, DataToolbarToggleGroup, DataToolbarGroup } from '@patternfly/react-core/dist/esm/experimental'; +import { Button, InputGroup, Select, SelectOption } from '@patternfly/react-core'; +import { TextInput, SearchIcon, FilterIcon } from '@patternfly/react-icons' + +class DataToolbarConsumerMangedToggleGroup extends React.Component { constructor(props) { super(props); this.state = { isExpanded: false, inputValue: "", - firstIsExpanded: false, - firstSelected: null, - secondIsExpanded: false, - secondSelected: null + statusIsExpanded: false, + statusSelected: null, + riskIsExpanded: false, + riskSelected: null }; this.toggleIsExpanded = () => { @@ -285,7 +434,7 @@ class DataToolbarToggleGroupExample extends React.Component { })); }; - this.firstOptions = [ + this.statusOptions = [ { value: 'Status', disabled: false, isPlaceholder: true }, { value: 'New', disabled: false }, { value: 'Pending', disabled: false }, @@ -293,7 +442,7 @@ class DataToolbarToggleGroupExample extends React.Component { { value: 'Cancelled', disabled: false }, ]; - this.secondOptions = [ + this.riskOptions = [ { value: 'Risk', disabled: false, isPlaceholder: true }, { value: 'Low', disabled: false }, { value: 'Medium', disabled: false }, @@ -304,51 +453,51 @@ class DataToolbarToggleGroupExample extends React.Component { this.setState({inputValue: newValue}); }; - this.onFirstToggle = isExpanded => { + this.onStatusToggle = isExpanded => { this.setState({ - firstIsExpanded: isExpanded + statusIsExpanded: isExpanded }); }; - this.onFirstSelect = (event, selection, isPlaceholder) => { - if (isPlaceholder) this.clearFirstSelection(); + this.onStatusSelect = (event, selection, isPlaceholder) => { + if (isPlaceholder) this.clearStatusSelection(); this.setState({ - firstSelected: selection, - firstIsExpanded: false + statusSelected: selection, + statusIsExpanded: false }); }; - this.clearFirstSelection = () => { + this.clearStatusSelection = () => { this.setState({ - firstSelected: null, - firstIsExpanded: false + statusSelected: null, + statusIsExpanded: false }); }; - this.onSecondToggle = isExpanded => { + this.onRiskToggle = isExpanded => { this.setState({ - secondIsExpanded: isExpanded + riskIsExpanded: isExpanded }); }; - this.onSecondSelect = (event, selection, isPlaceholder) => { - if (isPlaceholder) this.clearSecondSelection(); + this.onRiskSelect = (event, selection, isPlaceholder) => { + if (isPlaceholder) this.clearRiskSelection(); this.setState({ - secondSelected: selection, - secondIsExpanded: false + riskSelected: selection, + riskIsExpanded: false }); }; - this.clearSecondSelection = () => { + this.clearRiskSelection = () => { this.setState({ - secondSelected: null, - secondIsExpanded: false + riskSelected: null, + riskIsExpanded: false }); }; } render() { - const { inputValue, firstIsExpanded, firstSelected, secondIsExpanded, secondSelected } = this.state; + const { isExpanded, inputValue, statusIsExpanded, statusSelected, riskIsExpanded, riskSelected } = this.state; const toggleGroupItems = @@ -359,47 +508,289 @@ class DataToolbarToggleGroupExample extends React.Component { - + + + + + + + + + ; + + const items = } breakpoint='xl'>{toggleGroupItems}; + + return {items}; + } +} + +``` +## Data toolbar group stacked +```js +import React from 'react'; +import { DataToolbar, DataToolbarContent, DataToolbarToggleGroup, DataToolbarGroup, DataToolbarItem } from '@patternfly/react-core/dist/esm/experimental'; +import { Button, Select, SelectOption, Pagination, Dropdown, DropdownToggle, DropdownToggleCheckbox, DropdownItem } from '@patternfly/react-core'; +import { FilterIcon, CloneIcon, SyncIcon } from '@patternfly/react-icons' + +class DataToolbarStacked extends React.Component { + constructor(props) { + super(props); + + // toggle group - three option menus with labels, two icon buttons, Kebab menu - right aligned + // pagination - right aligned + this.resourceOptions = [ + { value: 'All', disabled: false }, + { value: 'Deployment', disabled: false }, + { value: 'Pod', disabled: false }, + ]; + + this.statusOptions = [ + { value: 'Running', disabled: false, }, + { value: 'New', disabled: false }, + { value: 'Pending', disabled: false }, + { value: 'Cancelled', disabled: false }, + ]; + + this.typeOptions = [ + { value: 'Any', disabled: false, isPlaceholder: true }, + { value: 'No Type', disabled: false }, + ]; + + this.state = { + resourceIsExpanded: false, + resourceSelected: null, + statusIsExpanded: false, + statusSelected: null, + typeIsExpanded: false, + typeSelected: null, + splitButtonDropdownIsOpen: false, + page: 1, + perPage: 20 + }; + + this.onResourceToggle = isExpanded => { + this.setState({ + resourceIsExpanded: isExpanded + }); + }; + + this.onResourceSelect = (event, selection) => { + this.setState({ + resourceSelected: selection, + resourceIsExpanded: false + }); + }; + + this.onStatusToggle = isExpanded => { + this.setState({ + statusIsExpanded: isExpanded + }); + }; + + this.onStatusSelect = (event, selection) => { + this.setState({ + statusSelected: selection, + statusIsExpanded: false + }); + }; + + this.onTypeToggle = isExpanded => { + this.setState({ + typeIsExpanded: isExpanded + }); + }; + + this.onTypeSelect = (event, selection) => { + this.setState({ + typeSelected: selection, + typeIsExpanded: false + }); + }; + + this.onSetPage = (_event, pageNumber) => { + this.setState({ + page: pageNumber + }); + }; + + this.onPerPageSelect = (_event, perPage) => { + this.setState({ + perPage + }); + }; + + this.onSplitButtonToggle = isOpen => { + console.log("hm"); + this.setState({ + splitButtonDropdownIsOpen: isOpen + }); + }; + + this.onSplitButtonSelect = event => { + this.setState({ + splitButtonDropdownIsOpen: !this.state.splitButtonDropdownIsOpen + }); + }; + + } + + render() { + const { resourceIsExpanded, resourceSelected, statusIsExpanded, statusSelected, typeIsExpanded, typeSelected, splitButtonDropdownIsOpen } = this.state; + + const splitButtonDropdownItems = [ + Link, + + Action + , + + Disabled Link + , + + Disabled Action + + ]; + + const toggleGroupItems = + Resource + + + Status + + + Type ; - const items = } breakpoint='xl'>{toggleGroupItems}; + const iconButtonGroupItems = + + + ; + + + const firstRowItems = + } breakpoint='xl'>{toggleGroupItems} + {iconButtonGroupItems} + Overflow Menu + ; + + const secondRowItems = + + + ]} + onToggle={this.onSplitButtonToggle} + /> + )} + isOpen={splitButtonDropdownIsOpen} + dropdownItems={splitButtonDropdownItems} + /> + + + + + ; - return {items}; + return + {firstRowItems} + {secondRowItems} + ; } } diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.tsx index 82638726219..7f7394ddd68 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.tsx +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.tsx @@ -17,21 +17,60 @@ export interface DataToolbarProps extends React.HTMLProps { id: string; } -export class DataToolbar extends React.Component { +export interface DataToolbarState { + /** Flag indicating the if the expandable content's expanded state is consumer managed or not */ + isConsumerManagedToggleGroup: boolean; + /** Flag indicating if the component managed state has expanded content or not */ + componentManagedIsExpanded: boolean; +} + +export class DataToolbar extends React.Component { private expandableContentRef = React.createRef(); static defaultProps = { - isExpanded: false, - toggleIsExpanded: () => null as any + isExpanded: false }; constructor(props: DataToolbarProps) { super(props); + + this.state = { + isConsumerManagedToggleGroup: props.isExpanded || !!props.toggleIsExpanded, + componentManagedIsExpanded: false + } + } + + toggleIsExpanded = () => { + this.setState((prevState) => ({ + componentManagedIsExpanded: !prevState.componentManagedIsExpanded + })); + }; + + closeExpandableContent = () => { + this.setState(() => ({ + componentManagedIsExpanded: false + })); + }; + + componentDidMount() { + const { isConsumerManagedToggleGroup } = this.state; + + if( !isConsumerManagedToggleGroup ) { + window.addEventListener('resize', this.closeExpandableContent); + } + } + + componentWillUnmount() { + const { isConsumerManagedToggleGroup } = this.state; + if (isConsumerManagedToggleGroup) { + window.removeEventListener('resize', this.closeExpandableContent); + } } render() { const { className, children, isExpanded, toggleIsExpanded, id, ...props} = this.props; + const { isConsumerManagedToggleGroup, componentManagedIsExpanded } = this.state; const expandableContentId = `${id}-expandable-content`; @@ -39,8 +78,8 @@ export class DataToolbar extends React.Component {
{
diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItem.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItem.tsx index f80147855b4..305bdab34ac 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItem.tsx +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItem.tsx @@ -15,17 +15,20 @@ export enum DataToolbarItemVariant { 'overflow-menu' = 'overflow-menu', pagination = 'pagination', 'search-filter' = 'search-filter', + label = 'label', } export interface DataToolbarItemProps extends React.HTMLProps { /** Classes applied to root element of the Data toolbar item */ className?: string; /** A type modifier which modifies spacing specifically depending on the type of item */ - variant?: DataToolbarItemVariant | 'separator' | 'bulk-select' | 'overflow-menu' | 'pagination' | 'search-filter'; + variant?: DataToolbarItemVariant | 'separator' | 'bulk-select' | 'overflow-menu' | 'pagination' | 'search-filter' | 'label'; /** An array of objects representing the various modifiers to apply to the Data toolbar item at various breakpoints */ breakpointMods?: DataToolbarBreakpointMod[]; /** An array of objects representing the various spacers to apply to the Data toolbar item at various breakpoints */ spacers?: DataToolbarSpacer[]; + /** id for this Data toolbar item */ + id?: string; /** Content to be rendered inside the Data toolbar item */ children?: React.ReactNode; } @@ -35,10 +38,13 @@ export const DataToolbarItem: React.FunctionComponent = ({ variant, breakpointMods = [] as DataToolbarBreakpointMod[], spacers = [] as DataToolbarSpacer[], + id, children, ...props }: DataToolbarItemProps) => { + const labelVariant = variant === 'label'; + return (
= ({ formatBreakpointMods(breakpointMods), formatSpacers(spacers), className)} + {...labelVariant && { 'aria-hidden': true }} + id={id} {...props} > {children} diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarToggleGroup.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarToggleGroup.tsx index 8a6aa0f4027..412f53974bd 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarToggleGroup.tsx +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarToggleGroup.tsx @@ -22,6 +22,8 @@ export interface DataToolbarToggleGroupProps extends DataToolbarGroupProps { export class DataToolbarToggleGroup extends React.Component { + static contextType = DataToolbarContext; + static defaultProps = { breakpointMods: [] as DataToolbarBreakpointMod[], spacers: [] as DataToolbarSpacer[], @@ -29,39 +31,33 @@ export class DataToolbarToggleGroup extends React.Component - {({ isExpanded, toggleIsExpanded, expandableContentRef, expandableContentId}) => { - return ( -
-
- -
- { isExpanded ? ReactDOM.createPortal(children, expandableContentRef.current): children } -
- ); - - }} - +
+
+ +
+ {isExpanded ? ReactDOM.createPortal(children, expandableContentRef.current) : children} +
); } } diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarUtils.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarUtils.tsx index 6f3ea27c833..c551a53d132 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarUtils.tsx +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarUtils.tsx @@ -21,7 +21,7 @@ export type DataToolbarBreakpointMod = { export const formatBreakpointMods = (breakpointMods: DataToolbarBreakpointMod[]) => { return breakpointMods.reduce((acc, curr) => ( - `${acc} ${getModifier(styles, `${curr.modifier}-on-${curr.breakpoint}`)}` + `${acc} ${getModifier(styles, `${curr.modifier}${curr.breakpoint ? `-on-${curr.breakpoint}` : ''}`)}` ), ''); }; From 194da1ffeed39678927c3957cfa26ed4b130b299 Mon Sep 17 00:00:00 2001 From: nicolethoen Date: Mon, 9 Sep 2019 16:37:13 -0400 Subject: [PATCH 09/22] return to use of DatabarContext.Consumer --- .../components/DataToolbar/DataToolbar.tsx | 22 +++---- .../DataToolbar/DataToolbarItem.tsx | 3 +- .../DataToolbar/DataToolbarToggleGroup.tsx | 57 ++++++++++--------- 3 files changed, 44 insertions(+), 38 deletions(-) diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.tsx index 7f7394ddd68..649a4741ebe 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.tsx +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.tsx @@ -37,25 +37,25 @@ export class DataToolbar extends React.Component { this.setState((prevState) => ({ componentManagedIsExpanded: !prevState.componentManagedIsExpanded })); - }; + } closeExpandableContent = () => { this.setState(() => ({ componentManagedIsExpanded: false })); - }; + } componentDidMount() { const { isConsumerManagedToggleGroup } = this.state; - if( !isConsumerManagedToggleGroup ) { + if ( !isConsumerManagedToggleGroup ) { window.addEventListener('resize', this.closeExpandableContent); } } @@ -77,12 +77,14 @@ export class DataToolbar extends React.Component {children} diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItem.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItem.tsx index 305bdab34ac..7d9e2724270 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItem.tsx +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItem.tsx @@ -22,7 +22,8 @@ export interface DataToolbarItemProps extends React.HTMLProps { /** Classes applied to root element of the Data toolbar item */ className?: string; /** A type modifier which modifies spacing specifically depending on the type of item */ - variant?: DataToolbarItemVariant | 'separator' | 'bulk-select' | 'overflow-menu' | 'pagination' | 'search-filter' | 'label'; + variant?: DataToolbarItemVariant | + 'separator' | 'bulk-select' | 'overflow-menu' | 'pagination' | 'search-filter' | 'label'; /** An array of objects representing the various modifiers to apply to the Data toolbar item at various breakpoints */ breakpointMods?: DataToolbarBreakpointMod[]; /** An array of objects representing the various spacers to apply to the Data toolbar item at various breakpoints */ diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarToggleGroup.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarToggleGroup.tsx index 412f53974bd..e9fa70fc0db 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarToggleGroup.tsx +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarToggleGroup.tsx @@ -22,8 +22,6 @@ export interface DataToolbarToggleGroupProps extends DataToolbarGroupProps { export class DataToolbarToggleGroup extends React.Component { - static contextType = DataToolbarContext; - static defaultProps = { breakpointMods: [] as DataToolbarBreakpointMod[], spacers: [] as DataToolbarSpacer[], @@ -31,33 +29,38 @@ export class DataToolbarToggleGroup extends React.Component -
- -
- {isExpanded ? ReactDOM.createPortal(children, expandableContentRef.current) : children} -
+ + {({ isExpanded, toggleIsExpanded, expandableContentRef, expandableContentId}) => { + return ( +
+
+ +
+ {isExpanded ? ReactDOM.createPortal(children, expandableContentRef.current) : children} +
+ ); + }} + ); } } From 2b50f752b38bd9f22ce9311c170776e59befde95 Mon Sep 17 00:00:00 2001 From: nicolethoen Date: Tue, 3 Sep 2019 14:30:41 -0400 Subject: [PATCH 10/22] first steps --- .../components/DataToolbar/DataToolbar.md | 706 +++--------------- .../components/DataToolbar/DataToolbar.tsx | 106 +-- .../DataToolbar/DataToolbarContent.tsx | 16 +- .../DataToolbarExpandableContent.tsx | 31 +- .../DataToolbar/DataToolbarGroup.tsx | 43 +- .../DataToolbar/DataToolbarItem.tsx | 51 +- .../DataToolbar/DataToolbarItemWithChipGroup | 1 + .../DataToolbar/DataToolbarToggleGroup.tsx | 84 +-- .../DataToolbar/DataToolbarUtils.tsx | 60 +- .../components/DataToolbar/index.ts | 1 - .../src/experimental/components/index.ts | 3 +- .../patternfly-4/react-docs/gatsby-browser.js | 1 - 12 files changed, 240 insertions(+), 863 deletions(-) create mode 100644 packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItemWithChipGroup diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.md b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.md index da61cb62435..95a348fb762 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.md +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.md @@ -2,13 +2,12 @@ title: 'DataToolbar' cssPrefix: 'pf-c-data-toolbar' typescript: true -propComponents: ['DataToolbar', 'DataToolbarContent', 'DataToolbarItem', 'DataToolbarGroup', 'DataToolbarToggleGroup', 'DataToolbarBreakpointMod', 'DataToolbarSpacer'] +propComponents: ['DataToolbar'] section: 'experimental' --- -import { DataToolbar , DataToolbarItem, DataToolbarGroup, DataToolbarContent, DataToolbarToggleGroup } from '@patternfly/react-core/dist/esm/experimental'; -import { Alert, Button, InputGroup, TextInput, Select, SelectOption } from '@patternfly/react-core'; -import { EditIcon, CloneIcon, SyncIcon, SearchIcon, FilterIcon } from '@patternfly/react-icons' +import { DataToolbar , DataToolbarItem, DataToolbarGroup, DataToolbarContent } from '@patternfly/react-core/dist/esm/experimental'; +import { Alert, Button, InputGroup, TextInput, SearchIcon } from '@patternfly/react-core'; Please don't use this component, it's only an example of what an experimental component could be @@ -31,18 +30,18 @@ class DataToolbarItems extends React.Component { const items = - + - + ; - return {items}; + return {items}; } } @@ -84,12 +83,12 @@ class DataToolbarSpacers extends React.Component { - + ; - return {items}; + return {items}; } } @@ -98,30 +97,26 @@ class DataToolbarSpacers extends React.Component { ## Data toolbar group types ```js import React from 'react'; -import { DataToolbar, DataToolbarContent, DataToolbarGroup, DataToolbarItem } from '@patternfly/react-core/dist/esm/experimental'; -import { Button, Select, SelectOption } from '@patternfly/react-core'; -import { EditIcon, CloneIcon, SyncIcon } from '@patternfly/react-icons' +import { DataToolbar, DataToolbarContent, DataToolbarGroup, DataToolbarItem, Select, SelectOption, EditIcon, CloneIcon, SyncIcon, Button } from '@patternfly/react-core/dist/esm/experimental'; + class DataToolbarGroupTypes extends React.Component { constructor(props) { super(props); this.firstOptions = [ - { value: 'Filter 1', disabled: false, isPlaceholder: true }, { value: 'A', disabled: false }, { value: 'B', disabled: false }, { value: 'C', disabled: false }, ]; this.secondOptions = [ - { value: 'Filter 2', disabled: false, isPlaceholder: true }, { value: '1', disabled: false }, { value: '2', disabled: false }, { value: '3', disabled: false }, ]; this.thirdOptions = [ - { value: 'Filter 3', disabled: false, isPlaceholder: true }, { value: 'I', disabled: false }, { value: 'II', disabled: false }, { value: 'III', disabled: false }, @@ -144,9 +139,9 @@ class DataToolbarGroupTypes extends React.Component { this.onFirstSelect = (event, selection) => { this.setState({ - firstSelected: selection, - firstIsExpanded: false - }); + firstSelected: selection, + firstIsExpanded: false + }); }; this.onSecondToggle = isExpanded => { @@ -157,9 +152,9 @@ class DataToolbarGroupTypes extends React.Component { this.onSecondSelect = (event, selection) => { this.setState({ - secondSelected: selection, - secondIsExpanded: false - }); + secondSelected: selection, + secondIsExpanded: false + }); }; this.onThirdToggle = isExpanded => { @@ -170,627 +165,116 @@ class DataToolbarGroupTypes extends React.Component { this.onThirdSelect = (event, selection) => { this.setState({ - thirdSelected: selection, - thirdIsExpanded: false - }); + thirdSelected: selection, + thirdIsExpanded: false + }); }; - } render() { const { firstIsExpanded, firstSelected, secondIsExpanded, secondSelected, thirdIsExpanded, thirdSelected } = this.state; - const filterGroupItems = - - - - - - - - - - ; - - const iconButtonGroupItems = - - - - ; - - const buttonGroupItems = - - - - ; - const items = - {filterGroupItems} - {iconButtonGroupItems} - {buttonGroupItems} - ; - - return {items}; - } -} - -``` - -## Data toolbar toggle groups -- The Toggle group can either have the toggle state managed by the consumer, or the component. The first Toggle group example demonstrates a component managed toggle state. -- The second Toggle group example below demonstrates a consumer managed toggle state. If the consumer would prefer to manage the expanded state of the toggle group for smaller screen widths: - - 1. Add a toggleIsExpanded callback to DataToolbar - 1. Pass in a boolean into the isExpanded prop to DataToolbar - -- Note: Although the toggle group is aware of the consumer provided breakpoint, the expandable content is not. So if the expandable content is expanded and the screen width surpasses that of the breakpoint, then the expandable content will not know that and will remain open, this case should be considered and handled by the consumer as well. - -### Data toolbar component managed toggle groups -```js -import React from 'react'; -import { DataToolbar , DataToolbarItem, DataToolbarContent, DataToolbarToggleGroup, DataToolbarGroup } from '@patternfly/react-core/dist/esm/experimental'; -import { Button, InputGroup, Select, SelectOption } from '@patternfly/react-core'; -import { TextInput, SearchIcon, FilterIcon } from '@patternfly/react-icons' - -class DataToolbarComponentMangedToggleGroup extends React.Component { - constructor(props) { - super(props); - this.state = { - inputValue: "", - statusIsExpanded: false, - statusSelected: null, - riskIsExpanded: false, - riskSelected: null - }; - - this.statusOptions = [ - { value: 'Status', disabled: false, isPlaceholder: true }, - { value: 'New', disabled: false }, - { value: 'Pending', disabled: false }, - { value: 'Running', disabled: false }, - { value: 'Cancelled', disabled: false }, - ]; - - this.riskOptions = [ - { value: 'Risk', disabled: false, isPlaceholder: true }, - { value: 'Low', disabled: false }, - { value: 'Medium', disabled: false }, - { value: 'High', disabled: false }, - ]; - - this.onInputChange = (newValue) => { - this.setState({inputValue: newValue}); - }; - - this.onStatusToggle = isExpanded => { - this.setState({ - statusIsExpanded: isExpanded - }); - }; - - this.onStatusSelect = (event, selection, isPlaceholder) => { - if (isPlaceholder) this.clearStatusSelection(); - this.setState({ - statusSelected: selection, - statusIsExpanded: false - }); - }; - - this.clearStatusSelection = () => { - this.setState({ - statusSelected: null, - statusIsExpanded: false - }); - }; - - this.onRiskToggle = isExpanded => { - this.setState({ - riskIsExpanded: isExpanded - }); - }; - - this.onRiskSelect = (event, selection, isPlaceholder) => { - if (isPlaceholder) this.clearRiskSelection(); - this.setState({ - riskSelected: selection, - riskIsExpanded: false - }); - }; - - this.clearRiskSelection = () => { - this.setState({ - riskSelected: null, - riskIsExpanded: false - }); - }; - } - - render() { - const { inputValue, statusIsExpanded, statusSelected, riskIsExpanded, riskSelected } = this.state; - - const toggleGroupItems = - - - - - - - - - - + - - - ; - - const items = } breakpoint='xl'>{toggleGroupItems}; - - return {items}; - } -} -``` - -### Data toolbar consumer managed toggle groups -```js -import React from 'react'; -import { DataToolbar , DataToolbarItem, DataToolbarContent, DataToolbarToggleGroup, DataToolbarGroup } from '@patternfly/react-core/dist/esm/experimental'; -import { Button, InputGroup, Select, SelectOption } from '@patternfly/react-core'; -import { TextInput, SearchIcon, FilterIcon } from '@patternfly/react-icons' - -class DataToolbarConsumerMangedToggleGroup extends React.Component { - constructor(props) { - super(props); - this.state = { - isExpanded: false, - inputValue: "", - statusIsExpanded: false, - statusSelected: null, - riskIsExpanded: false, - riskSelected: null - }; - - this.toggleIsExpanded = () => { - this.setState((prevState) => ({ - isExpanded: !prevState.isExpanded - })); - }; - - this.statusOptions = [ - { value: 'Status', disabled: false, isPlaceholder: true }, - { value: 'New', disabled: false }, - { value: 'Pending', disabled: false }, - { value: 'Running', disabled: false }, - { value: 'Cancelled', disabled: false }, - ]; - - this.riskOptions = [ - { value: 'Risk', disabled: false, isPlaceholder: true }, - { value: 'Low', disabled: false }, - { value: 'Medium', disabled: false }, - { value: 'High', disabled: false }, - ]; - - this.onInputChange = (newValue) => { - this.setState({inputValue: newValue}); - }; - - this.onStatusToggle = isExpanded => { - this.setState({ - statusIsExpanded: isExpanded - }); - }; - - this.onStatusSelect = (event, selection, isPlaceholder) => { - if (isPlaceholder) this.clearStatusSelection(); - this.setState({ - statusSelected: selection, - statusIsExpanded: false - }); - }; - - this.clearStatusSelection = () => { - this.setState({ - statusSelected: null, - statusIsExpanded: false - }); - }; - - this.onRiskToggle = isExpanded => { - this.setState({ - riskIsExpanded: isExpanded - }); - }; - - this.onRiskSelect = (event, selection, isPlaceholder) => { - if (isPlaceholder) this.clearRiskSelection(); - this.setState({ - riskSelected: selection, - riskIsExpanded: false - }); - }; - - this.clearRiskSelection = () => { - this.setState({ - riskSelected: null, - riskIsExpanded: false - }); - }; - } - - render() { - const { isExpanded, inputValue, statusIsExpanded, statusSelected, riskIsExpanded, riskSelected } = this.state; - - const toggleGroupItems = - - - - - - - - - - - - - ; - - const items = } breakpoint='xl'>{toggleGroupItems}; + + + + + + + + + + + + + + + + + ; - return {items}; + return {items}; } } ``` -## Data toolbar group stacked +## Data toolbar toggle groups ```js import React from 'react'; -import { DataToolbar, DataToolbarContent, DataToolbarToggleGroup, DataToolbarGroup, DataToolbarItem } from '@patternfly/react-core/dist/esm/experimental'; -import { Button, Select, SelectOption, Pagination, Dropdown, DropdownToggle, DropdownToggleCheckbox, DropdownItem } from '@patternfly/react-core'; -import { FilterIcon, CloneIcon, SyncIcon } from '@patternfly/react-icons' +import { DataToolbar , DataToolbarItem, DataToolbarContent, DataToolbarToggleGroup } from '@patternfly/react-core/dist/esm/experimental'; +import { Button, InputGroup, TextInput, SearchIcon, FilterIcon } from '@patternfly/react-core'; -class DataToolbarStacked extends React.Component { +class DataToolbarToggleGroup extends React.Component { constructor(props) { super(props); - - // toggle group - three option menus with labels, two icon buttons, Kebab menu - right aligned - // pagination - right aligned - this.resourceOptions = [ - { value: 'All', disabled: false }, - { value: 'Deployment', disabled: false }, - { value: 'Pod', disabled: false }, - ]; - - this.statusOptions = [ - { value: 'Running', disabled: false, }, - { value: 'New', disabled: false }, - { value: 'Pending', disabled: false }, - { value: 'Cancelled', disabled: false }, - ]; - - this.typeOptions = [ - { value: 'Any', disabled: false, isPlaceholder: true }, - { value: 'No Type', disabled: false }, - ]; - - this.state = { - resourceIsExpanded: false, - resourceSelected: null, - statusIsExpanded: false, - statusSelected: null, - typeIsExpanded: false, - typeSelected: null, - splitButtonDropdownIsOpen: false, - page: 1, - perPage: 20 - }; - - this.onResourceToggle = isExpanded => { - this.setState({ - resourceIsExpanded: isExpanded - }); - }; - - this.onResourceSelect = (event, selection) => { - this.setState({ - resourceSelected: selection, - resourceIsExpanded: false - }); - }; - - this.onStatusToggle = isExpanded => { - this.setState({ - statusIsExpanded: isExpanded - }); - }; - - this.onStatusSelect = (event, selection) => { - this.setState({ - statusSelected: selection, - statusIsExpanded: false - }); - }; - - this.onTypeToggle = isExpanded => { - this.setState({ - typeIsExpanded: isExpanded - }); - }; - - this.onTypeSelect = (event, selection) => { - this.setState({ - typeSelected: selection, - typeIsExpanded: false - }); - }; - - this.onSetPage = (_event, pageNumber) => { - this.setState({ - page: pageNumber - }); - }; - - this.onPerPageSelect = (_event, perPage) => { - this.setState({ - perPage - }); - }; - - this.onSplitButtonToggle = isOpen => { - console.log("hm"); - this.setState({ - splitButtonDropdownIsOpen: isOpen - }); - }; - - this.onSplitButtonSelect = event => { - this.setState({ - splitButtonDropdownIsOpen: !this.state.splitButtonDropdownIsOpen - }); - }; - } render() { - const { resourceIsExpanded, resourceSelected, statusIsExpanded, statusSelected, typeIsExpanded, typeSelected, splitButtonDropdownIsOpen } = this.state; - - const splitButtonDropdownItems = [ - Link, - - Action - , - - Disabled Link - , - - Disabled Action - - ]; - - const toggleGroupItems = - Resource - - - - Status - - - - Type - - - - ; - - const iconButtonGroupItems = - - - ; - - - const firstRowItems = - } breakpoint='xl'>{toggleGroupItems} - {iconButtonGroupItems} - Overflow Menu - ; - - const secondRowItems = - - - ]} - onToggle={this.onSplitButtonToggle} - /> - )} - isOpen={splitButtonDropdownIsOpen} - dropdownItems={splitButtonDropdownItems} - /> - - - - - ; + const items = } breakpoint='xl'> + + + + + + + + + + ; - return - {firstRowItems} - {secondRowItems} - ; + return {items}; } } diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.tsx index 649a4741ebe..80583184483 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.tsx +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.tsx @@ -1,100 +1,22 @@ import * as React from 'react'; import styles from '@patternfly/react-styles/css/components/DataToolbar/data-toolbar'; import { css } from '@patternfly/react-styles'; -import { DataToolbarExpandableContent } from './DataToolbarExpandableContent'; -import { DataToolbarContext } from './DataToolbarUtils'; export interface DataToolbarProps extends React.HTMLProps { - /** Classes applied to root element of the Data toolbar */ + /** TODO */ className?: string; - /** Content to be rendered as rows in the Data toolbar */ - children?: React.ReactNode; - /** Flag indicating if a Data toolbar toggle group's expandable content is expanded */ - isExpanded?: boolean; - /** A callback for setting the isExpanded flag */ - toggleIsExpanded?: () => void; - /** Id of the Data toolbar */ - id: string; + /** TODO */ + children: React.ReactNode; } -export interface DataToolbarState { - /** Flag indicating the if the expandable content's expanded state is consumer managed or not */ - isConsumerManagedToggleGroup: boolean; - /** Flag indicating if the component managed state has expanded content or not */ - componentManagedIsExpanded: boolean; -} - -export class DataToolbar extends React.Component { - private expandableContentRef = React.createRef(); - - static defaultProps = { - isExpanded: false - }; - - constructor(props: DataToolbarProps) { - super(props); - - this.state = { - isConsumerManagedToggleGroup: props.isExpanded || !!props.toggleIsExpanded, - componentManagedIsExpanded: false - }; - } - - toggleIsExpanded = () => { - this.setState((prevState) => ({ - componentManagedIsExpanded: !prevState.componentManagedIsExpanded - })); - } - - closeExpandableContent = () => { - this.setState(() => ({ - componentManagedIsExpanded: false - })); - } - - componentDidMount() { - const { isConsumerManagedToggleGroup } = this.state; - - if ( !isConsumerManagedToggleGroup ) { - window.addEventListener('resize', this.closeExpandableContent); - } - } - - componentWillUnmount() { - const { isConsumerManagedToggleGroup } = this.state; - if (isConsumerManagedToggleGroup) { - window.removeEventListener('resize', this.closeExpandableContent); - } - } - - render() { - - const { className, children, isExpanded, toggleIsExpanded, id, ...props} = this.props; - const { isConsumerManagedToggleGroup, componentManagedIsExpanded } = this.state; - - const expandableContentId = `${id}-expandable-content`; - - return ( -
- - {children} - - -
- ); - } - -} +export const DataToolbar: React.FunctionComponent = ({ + className, + children, + ...props +}: DataToolbarProps) => { + return ( +
+ {children} +
+ ); +}; diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarContent.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarContent.tsx index b870ffc36d8..4256ef6df07 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarContent.tsx +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarContent.tsx @@ -5,11 +5,11 @@ import { css } from '@patternfly/react-styles'; import { DataToolbarBreakpointMod, formatBreakpointMods } from './DataToolbarUtils'; export interface DataToolbarContentProps extends React.HTMLProps { - /** Classes applied to root element of the Data toolbar content row */ + /** TODO */ className?: string; - /** An array of objects representing the various modifiers to apply to the content row at various breakpoints */ + /** TODO */ breakpointMods?: DataToolbarBreakpointMod[]; - /** Content to be rendered as children of the content row */ + /** TODO */ children?: React.ReactNode; } @@ -21,13 +21,9 @@ export const DataToolbarContent: React.FunctionComponent { return ( -
+
{children}
); diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarExpandableContent.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarExpandableContent.tsx index ee6107f53e7..b39b886a852 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarExpandableContent.tsx +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarExpandableContent.tsx @@ -2,32 +2,33 @@ import * as React from 'react'; import styles from '@patternfly/react-styles/css/components/DataToolbar/data-toolbar'; import { css, getModifier } from '@patternfly/react-styles'; -import { RefObject } from 'react'; +import { DataToolbarBreakpointMod, formatBreakpointMods } from './DataToolbarUtils'; export interface DataToolbarExpandableContentProps extends React.HTMLProps { - /** Classes added to the root element of the Data toolbar expandable content */ + /** TODO */ className?: string; - /** Flag indicating the expandable content is expanded */ + /** TODO */ + breakpointMods?: DataToolbarBreakpointMod[]; + /** TODO */ isExpanded?: boolean; - /** Expandable content reference for passing to Data toolbar children */ - expandableContentRef: RefObject; + /** TODO */ + children?: React.ReactNode; } -export const DataToolbarExpandableContent: React.FunctionComponent = ({ +export const DataToolbarExplandableContent: React.FunctionComponent = ({ className, + breakpointMods = [] as DataToolbarBreakpointMod[], isExpanded = false, - expandableContentRef, + children, ...props }: DataToolbarExpandableContentProps) => { return ( -
+
+ {children} +
); }; diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarGroup.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarGroup.tsx index 2163294c777..3f372e2ba8a 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarGroup.tsx +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarGroup.tsx @@ -6,53 +6,50 @@ import { DataToolbarBreakpointMod, DataToolbarSpacer, formatBreakpointMods, - formatSpacers + formatGroupSpacers } from './DataToolbarUtils'; -export enum DataToolbarGroupVariant { +export enum DataToolbarGroupMod { 'filter-group' = 'filter-group', 'icon-button-group' = 'icon-button-group', 'button-group' = 'button-group', } export interface DataToolbarGroupProps extends React.HTMLProps { - /** Classes applied to root element of the Data toolbar group */ + /** TODO */ className?: string; - /** A type modifier which modifies spacing specifically depending on the type of group */ - variant?: DataToolbarGroupVariant | 'filter-group' | 'icon-button-group' | 'button-group'; - /** Array of objects representing the various modifiers to apply to the Data toolbar group at various breakpoints */ + /** TODO */ + mod?: DataToolbarGroupMod | 'filter-group' | 'icon-button-group' | 'button-group'; + /** TODO */ breakpointMods?: DataToolbarBreakpointMod[]; - /** Array of objects representing the various spacers to apply to the Data toolbar group at various breakpoints */ + /** TODO */ spacers?: DataToolbarSpacer[]; - /** Array of objects representing the spacers to apply to the items in this group at various breakpoints */ - itemSpacers?: DataToolbarSpacer[]; - /** Content to be rendered inside the Data toolbar group */ + /** TODO */ children?: React.ReactNode; } + export const DataToolbarGroup: React.FunctionComponent = ({ breakpointMods = [] as DataToolbarBreakpointMod[], spacers = [] as DataToolbarSpacer[], - itemSpacers = [] as DataToolbarSpacer[], - className, - variant, + className = "", + mod, children, ...props }: DataToolbarGroupProps) => { return ( -
+
{children}
); }; + + + diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItem.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItem.tsx index 7d9e2724270..34505fe5c30 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItem.tsx +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItem.tsx @@ -2,62 +2,47 @@ import * as React from 'react'; import styles from '@patternfly/react-styles/css/components/DataToolbar/data-toolbar'; import { css, getModifier } from '@patternfly/react-styles'; -import { - DataToolbarBreakpointMod, - DataToolbarSpacer, - formatBreakpointMods, - formatSpacers -} from './DataToolbarUtils'; +import { DataToolbarBreakpointMod, DataToolbarSpacer, formatBreakpointMods, formatItemSpacers } from './DataToolbarUtils'; -export enum DataToolbarItemVariant { +export enum DataToolbarItemMod { separator = 'separator', 'bulk-select' = 'bulk-select', 'overflow-menu' = 'overflow-menu', pagination = 'pagination', 'search-filter' = 'search-filter', - label = 'label', + 'chip-group' = 'chip-group', + clear = 'clear' } export interface DataToolbarItemProps extends React.HTMLProps { - /** Classes applied to root element of the Data toolbar item */ + /** TODO */ className?: string; - /** A type modifier which modifies spacing specifically depending on the type of item */ - variant?: DataToolbarItemVariant | - 'separator' | 'bulk-select' | 'overflow-menu' | 'pagination' | 'search-filter' | 'label'; - /** An array of objects representing the various modifiers to apply to the Data toolbar item at various breakpoints */ + /** TODO */ + mod?: DataToolbarItemMod; + /** TODO */ breakpointMods?: DataToolbarBreakpointMod[]; - /** An array of objects representing the various spacers to apply to the Data toolbar item at various breakpoints */ + /** TODO */ spacers?: DataToolbarSpacer[]; - /** id for this Data toolbar item */ - id?: string; - /** Content to be rendered inside the Data toolbar item */ + /** TODO */ children?: React.ReactNode; } export const DataToolbarItem: React.FunctionComponent = ({ - className, - variant, + className = '', + mod, breakpointMods = [] as DataToolbarBreakpointMod[], spacers = [] as DataToolbarSpacer[], - id, children, ...props }: DataToolbarItemProps) => { - const labelVariant = variant === 'label'; - return ( -
+
{children}
); diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItemWithChipGroup b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItemWithChipGroup new file mode 100644 index 00000000000..31dc8d7d010 --- /dev/null +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItemWithChipGroup @@ -0,0 +1 @@ +// will extend toolbar item with extra props related to chipgroups - need to figure out what they are. diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarToggleGroup.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarToggleGroup.tsx index e9fa70fc0db..8d3b0b9470e 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarToggleGroup.tsx +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarToggleGroup.tsx @@ -1,66 +1,48 @@ import * as React from 'react'; -import * as ReactDOM from 'react-dom'; +import { formatBreakpointMods, formatGroupSpacers } from './DataToolbarUtils'; import styles from '@patternfly/react-styles/css/components/DataToolbar/data-toolbar'; import { css, getModifier } from '@patternfly/react-styles'; -import { DataToolbarGroupProps } from './DataToolbarGroup'; -import { DataToolbarContext } from './DataToolbarUtils'; +import { DataToolbarGroup, DataToolbarGroupProps } from './DataToolbarGroup'; import { Button } from '../../../components/Button'; -import { - DataToolbarBreakpointMod, - DataToolbarSpacer, - formatBreakpointMods, - formatSpacers -} from './DataToolbarUtils'; +// basically extends DataToolBar group with a couple extra props export interface DataToolbarToggleGroupProps extends DataToolbarGroupProps { - /** An Icon to be rendered when the toggle group has collapsed down */ + /** TODO */ toggleIcon: React.ReactNode; - /** The breakpoint at which the toggle group is collapsed down */ + /** TODO */ breakpoint: 'md' | 'lg' | 'xl' | '2xl'; } -export class DataToolbarToggleGroup extends React.Component { - static defaultProps = { - breakpointMods: [] as DataToolbarBreakpointMod[], - spacers: [] as DataToolbarSpacer[], - }; +export const DataToolbarToggleGroup: React.FunctionComponent = ({ + toggleIcon, + breakpoint, + children, + mod, + breakpointMods, + spacers, + className, + ...props +}: DataToolbarToggleGroupProps) => { - render() { - const { toggleIcon, breakpoint, variant, breakpointMods, spacers, className, children, ...props } = this.props; + const onToggle = () => { + console.log("toggle clicked"); + }; - return ( - - {({ isExpanded, toggleIsExpanded, expandableContentRef, expandableContentId}) => { - return ( -
-
- -
- {isExpanded ? ReactDOM.createPortal(children, expandableContentRef.current) : children} -
- ); - }} - - ); - } + return +
+ +
+ {children} + ; } diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarUtils.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarUtils.tsx index c551a53d132..f3dcd90be9c 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarUtils.tsx +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarUtils.tsx @@ -1,40 +1,50 @@ import { getModifier } from '@patternfly/react-styles'; import styles from '@patternfly/react-styles/css/components/DataToolbar/data-toolbar'; -import * as React from 'react'; -import { RefObject } from 'react'; - -interface DataToolbarContextProps { - isExpanded: boolean; - toggleIsExpanded: () => void; - expandableContentRef: RefObject; - expandableContentId: string; -} - -export const DataToolbarContext = React.createContext>({}); export type DataToolbarBreakpointMod = { - /** The attribute to modify */ + /** TODO */ modifier: 'hidden' | 'visible' | 'align-right' | 'align-left'; - /** The breakpoint at which to apply the modifier */ + /** TODO */ breakpoint: 'md' | 'lg' | 'xl' | '2xl'; -}; +} -export const formatBreakpointMods = (breakpointMods: DataToolbarBreakpointMod[]) => { - return breakpointMods.reduce((acc, curr) => ( - `${acc} ${getModifier(styles, `${curr.modifier}${curr.breakpoint ? `-on-${curr.breakpoint}` : ''}`)}` - ), ''); +export const formatBreakpointMods = (breakpointMods:DataToolbarBreakpointMod[]) => { + let formattedBreakpointMods = ""; + for (const breakpointMod of breakpointMods) { + formattedBreakpointMods += `${getModifier(styles, `${breakpointMod.modifier}-on-${breakpointMod.breakpoint}`)} `; + } + return formattedBreakpointMods; }; export type DataToolbarSpacer = { - /** The size of the spacer */ + /** TODO */ spacerSize: 'none' | 'sm' | 'md' | 'lg'; - /** The breakpoint at which to apply the spacer */ + /** TODO */ breakpoint?: 'md' | 'lg' | 'xl'; -}; +} -export const formatSpacers = (spacers: DataToolbarSpacer[], type = 'pf-m-spacer') => { +export const formatItemSpacers = (spacers:DataToolbarSpacer[]) => { + let formattedSpacers = ""; + for (const spacer of spacers) { + formattedSpacers += "pf-m-spacer-" + spacer.spacerSize; + if (spacer.breakpoint) { + formattedSpacers += "-on-" + spacer.breakpoint + " "; + } else { + formattedSpacers += " "; + } + } + return formattedSpacers; +}; - return spacers.reduce((acc, curr) => ( - `${acc} ${type}-${curr.spacerSize}${curr.breakpoint ? `-on-${curr.breakpoint}` : ''}` - ), ''); +export const formatGroupSpacers = (spacers:DataToolbarSpacer[]) => { + let formattedSpacers = ""; + for (const spacer of spacers) { + formattedSpacers += "pf-m-space-items-" + spacer.spacerSize; + if (spacer.breakpoint) { + formattedSpacers += "-on-" + spacer.breakpoint + " "; + } else { + formattedSpacers += " "; + } + } + return formattedSpacers; }; diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/index.ts b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/index.ts index 13954bc8158..0eae69dd623 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/index.ts +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/index.ts @@ -2,4 +2,3 @@ export * from './DataToolbar'; export * from './DataToolbarContent'; export * from './DataToolbarGroup'; export * from './DataToolbarItem'; -export * from './DataToolbarToggleGroup'; diff --git a/packages/patternfly-4/react-core/src/experimental/components/index.ts b/packages/patternfly-4/react-core/src/experimental/components/index.ts index bece9bcf754..7519037c3ea 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/index.ts +++ b/packages/patternfly-4/react-core/src/experimental/components/index.ts @@ -1,3 +1,4 @@ +export * from './Button'; +export * from './Badge'; export * from './DataToolbar'; export * from './Drawer'; -export * from './Spinner'; diff --git a/packages/patternfly-4/react-docs/gatsby-browser.js b/packages/patternfly-4/react-docs/gatsby-browser.js index 6341160e335..b13bd7b4e8f 100644 --- a/packages/patternfly-4/react-docs/gatsby-browser.js +++ b/packages/patternfly-4/react-docs/gatsby-browser.js @@ -7,4 +7,3 @@ import '@patternfly-safe/patternfly/patternfly.css'; // Add experimental styles here and in eslintrc.js for the moment. Once they have been moved out of experimental remove the CSS here and in .eslintrc.js import '@patternfly-safe/patternfly/components/Drawer/drawer.css'; import '@patternfly-safe/patternfly/components/DataToolbar/data-toolbar.css'; -import '@patternfly-safe/patternfly/components/Spinner/spinner.css'; From 6c92f99c5cc2847b9e78d0529bfe665043e1ad41 Mon Sep 17 00:00:00 2001 From: nicolethoen Date: Wed, 4 Sep 2019 09:53:50 -0400 Subject: [PATCH 11/22] make children into arrays of reactNodes --- .../components/DataToolbar/DataToolbar.md | 211 ++++++++++-------- .../components/DataToolbar/DataToolbar.tsx | 47 +++- .../DataToolbar/DataToolbarContent.tsx | 6 +- .../DataToolbarExpandableContent.tsx | 6 +- .../DataToolbar/DataToolbarGroup.tsx | 9 +- .../DataToolbar/DataToolbarItem.tsx | 4 +- .../DataToolbar/DataToolbarItemWithChipGroup | 1 - .../DataToolbarItemWithChipGroup.tsx | 69 ++++++ .../DataToolbar/DataToolbarToggleGroup.tsx | 38 ++-- .../components/DataToolbar/index.ts | 2 + 10 files changed, 251 insertions(+), 142 deletions(-) delete mode 100644 packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItemWithChipGroup create mode 100644 packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItemWithChipGroup.tsx diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.md b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.md index 95a348fb762..07a7ea8c894 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.md +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.md @@ -27,7 +27,7 @@ class DataToolbarItems extends React.Component { } render() { - const items = + const items = [ @@ -35,13 +35,15 @@ class DataToolbarItems extends React.Component { - - - + , + , + , - ; + ]; + + const contentRows = []; - return {items}; + return ; } } @@ -78,17 +80,19 @@ class DataToolbarSpacers extends React.Component { {spacerSize: 'lg', breakpoint: 'xl'} ]; - const items = - - - - - - + const items = [ + , + , + , + , + , + , - ; + ]; - return {items}; + const contentRows = []; + + return ; } } @@ -174,76 +178,82 @@ class DataToolbarGroupTypes extends React.Component { render() { const { firstIsExpanded, firstSelected, secondIsExpanded, secondSelected, thirdIsExpanded, thirdSelected } = this.state; - const items = - - - - - - - - - - - - - - - - - - - - - - ; + const filterGroupItems = [ + + + , + + + , + + + + ]; + const iconButtonGroupItems = [ + , + , + , + ]; + const buttonGroupItems = [ + , + , + , + ]; - return {items}; + const items = [ + , + , + + ]; + + const contentRows = []; + + return ; } } @@ -260,21 +270,26 @@ class DataToolbarToggleGroup extends React.Component { } render() { - const items = } breakpoint='xl'> - - - - - - - - - - ; + const toggleGroupItems = [ + + + + + + , + , + , + + ]; + + const items = [} breakpoint='xl' items={toggleGroupItems} />]; + //const items = []; - return {items}; + const contentRows = []; + + return ; } } diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.tsx index 80583184483..2cac7f987e0 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.tsx +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.tsx @@ -6,17 +6,42 @@ export interface DataToolbarProps extends React.HTMLProps { /** TODO */ className?: string; /** TODO */ - children: React.ReactNode; + contentRows: React.ReactNode[]; } -export const DataToolbar: React.FunctionComponent = ({ - className, - children, - ...props -}: DataToolbarProps) => { - return ( -
- {children} -
- ); +export interface DataToolbarState { + /** TODO */ + isExpanded: boolean; +} + +export class DataToolbar extends React.Component { + + static defaultProps = { + + }; + + constructor(props: DataToolbarProps) { + super(props); + + this.state = { + isExpanded: false + } + } + + render() { + + const { className, contentRows, ...props} = this.props; + // const { isExpanded } = this.state; + + // loop over content rows to look + // for a toggle group - if I find one, add an expandable content row to the end + // for an item with chip group - if I find one, build expandable row to display chips + + return ( +
+ {contentRows} +
+ ); + } + }; diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarContent.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarContent.tsx index 4256ef6df07..447a7c82d9c 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarContent.tsx +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarContent.tsx @@ -10,12 +10,12 @@ export interface DataToolbarContentProps extends React.HTMLProps /** TODO */ breakpointMods?: DataToolbarBreakpointMod[]; /** TODO */ - children?: React.ReactNode; + items?: React.ReactNode; } export const DataToolbarContent: React.FunctionComponent = ({ className, - children, + items, breakpointMods = [] as DataToolbarBreakpointMod[], ...props }: DataToolbarContentProps) => { @@ -24,7 +24,7 @@ export const DataToolbarContent: React.FunctionComponent - {children} + {items}
); }; diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarExpandableContent.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarExpandableContent.tsx index b39b886a852..ca678d2f1e0 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarExpandableContent.tsx +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarExpandableContent.tsx @@ -12,14 +12,14 @@ export interface DataToolbarExpandableContentProps extends React.HTMLProps = ({ className, breakpointMods = [] as DataToolbarBreakpointMod[], isExpanded = false, - children, + items, ...props }: DataToolbarExpandableContentProps) => { @@ -28,7 +28,7 @@ export const DataToolbarExplandableContent: React.FunctionComponent - {children} + {items}
); }; diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarGroup.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarGroup.tsx index 3f372e2ba8a..b1f49852b16 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarGroup.tsx +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarGroup.tsx @@ -25,16 +25,15 @@ export interface DataToolbarGroupProps extends React.HTMLProps { /** TODO */ spacers?: DataToolbarSpacer[]; /** TODO */ - children?: React.ReactNode; + items?: React.ReactNode[]; } - export const DataToolbarGroup: React.FunctionComponent = ({ breakpointMods = [] as DataToolbarBreakpointMod[], spacers = [] as DataToolbarSpacer[], - className = "", + className, mod, - children, + items, ...props }: DataToolbarGroupProps) => { @@ -45,7 +44,7 @@ export const DataToolbarGroup: React.FunctionComponent = formatGroupSpacers(spacers), className)} {...props}> - {children} + {items}
); diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItem.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItem.tsx index 34505fe5c30..4009628d4f8 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItem.tsx +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItem.tsx @@ -10,8 +10,6 @@ export enum DataToolbarItemMod { 'overflow-menu' = 'overflow-menu', pagination = 'pagination', 'search-filter' = 'search-filter', - 'chip-group' = 'chip-group', - clear = 'clear' } export interface DataToolbarItemProps extends React.HTMLProps { @@ -28,7 +26,7 @@ export interface DataToolbarItemProps extends React.HTMLProps { } export const DataToolbarItem: React.FunctionComponent = ({ - className = '', + className, mod, breakpointMods = [] as DataToolbarBreakpointMod[], spacers = [] as DataToolbarSpacer[], diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItemWithChipGroup b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItemWithChipGroup deleted file mode 100644 index 31dc8d7d010..00000000000 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItemWithChipGroup +++ /dev/null @@ -1 +0,0 @@ -// will extend toolbar item with extra props related to chipgroups - need to figure out what they are. diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItemWithChipGroup.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItemWithChipGroup.tsx new file mode 100644 index 00000000000..0b711e5a80c --- /dev/null +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItemWithChipGroup.tsx @@ -0,0 +1,69 @@ +import * as React from 'react'; +import { DataToolbarItem, DataToolbarItemProps } from './DataToolbarItem'; +import { ChipGroup, Chip } from '../../../components/ChipGroup'; + +export interface DataToolbarItemWithChipGroupProps extends DataToolbarItemProps { + /** TODO */ + chips?: string[]; + /** TODO */ + isExpanded: boolean; + /** TODO */ + isInExpandableContent?: boolean; + /** TODO */ + children: React.ReactNode; +} + +export interface DataToolbarItemWithChipGroupState { + /** TODO */ + chips?: string[]; +} + +export class DataToolbarItemWithChipGroup extends React.Component { + + static defaultProps = { + isInExpandableContent: false + }; + + constructor(props: DataToolbarItemWithChipGroupProps) { + super(props); + this.state = { + chips: this.props.chips + } + } + + deleteItem = (id: string) => { + const copyOfChips = this.state.chips; + const index = copyOfChips.indexOf(id); + if (index !== -1) { + copyOfChips.splice(index, 1); + this.setState({ chips: copyOfChips }); + } + }; + + render() { + const { isExpanded, isInExpandableContent, children, ...props } = this.props; + const { chips } = this.state; + + + return ( + + {(!isInExpandableContent || isExpanded) && + + {children} + + } + {isInExpandableContent && + + {chips.map(chip => ( + this.deleteItem(chip)}> + {chip} + + ))} + + + } + + ); + } + +}; diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarToggleGroup.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarToggleGroup.tsx index 8d3b0b9470e..06b1c148b37 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarToggleGroup.tsx +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarToggleGroup.tsx @@ -1,11 +1,15 @@ import * as React from 'react'; -import { formatBreakpointMods, formatGroupSpacers } from './DataToolbarUtils'; import styles from '@patternfly/react-styles/css/components/DataToolbar/data-toolbar'; import { css, getModifier } from '@patternfly/react-styles'; -import { DataToolbarGroup, DataToolbarGroupProps } from './DataToolbarGroup'; +import { DataToolbarGroupProps } from './DataToolbarGroup'; import { Button } from '../../../components/Button'; -// basically extends DataToolBar group with a couple extra props +import { + DataToolbarBreakpointMod, + DataToolbarSpacer, + formatBreakpointMods, + formatGroupSpacers +} from './DataToolbarUtils'; export interface DataToolbarToggleGroupProps extends DataToolbarGroupProps { /** TODO */ @@ -14,15 +18,14 @@ export interface DataToolbarToggleGroupProps extends DataToolbarGroupProps { breakpoint: 'md' | 'lg' | 'xl' | '2xl'; } - export const DataToolbarToggleGroup: React.FunctionComponent = ({ toggleIcon, breakpoint, - children, - mod, - breakpointMods, - spacers, + breakpointMods = [] as DataToolbarBreakpointMod[], + spacers = [] as DataToolbarSpacer[], className, + mod, + items, ...props }: DataToolbarToggleGroupProps) => { @@ -30,19 +33,18 @@ export const DataToolbarToggleGroup: React.FunctionComponent -
- + {...props}> +
+ +
+ {items}
- {children} - ; -} + ); +}; diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/index.ts b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/index.ts index 0eae69dd623..e7dfdf5feda 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/index.ts +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/index.ts @@ -2,3 +2,5 @@ export * from './DataToolbar'; export * from './DataToolbarContent'; export * from './DataToolbarGroup'; export * from './DataToolbarItem'; +export * from './DataToolbarToggleGroup'; +export * from './DataToolbarItemWithChipGroup'; From e98968ea4e253c4a53d5d6f7141a486ca58b3bbc Mon Sep 17 00:00:00 2001 From: nicolethoen Date: Wed, 4 Sep 2019 13:16:59 -0400 Subject: [PATCH 12/22] add comments and continue iterating on components --- .../components/DataToolbar/DataToolbar.tsx | 12 +-- .../DataToolbar/DataToolbarContent.tsx | 6 +- .../DataToolbarExpandableContent.tsx | 2 +- .../DataToolbar/DataToolbarGroup.tsx | 10 +-- .../DataToolbar/DataToolbarItem.tsx | 10 +-- .../DataToolbarItemWithChipGroup.tsx | 10 +-- .../DataToolbar/DataToolbarToggleGroup.tsx | 74 +++++++++++-------- 7 files changed, 71 insertions(+), 53 deletions(-) diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.tsx index 2cac7f987e0..d2698a73a36 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.tsx +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.tsx @@ -3,14 +3,16 @@ import styles from '@patternfly/react-styles/css/components/DataToolbar/data-too import { css } from '@patternfly/react-styles'; export interface DataToolbarProps extends React.HTMLProps { - /** TODO */ + /** Classes applied to root element of the Data toolbar */ className?: string; - /** TODO */ + /** An array of ReactNodes to be rendered as rows in the Data toolbar */ contentRows: React.ReactNode[]; + /** Id of the Data toolbar */ + id: string; } export interface DataToolbarState { - /** TODO */ + /** Flag indicating the if the expandable content is expanded */ isExpanded: boolean; } @@ -30,7 +32,7 @@ export class DataToolbar extends React.Component +
{contentRows}
); diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarContent.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarContent.tsx index 447a7c82d9c..2c8b1ffc866 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarContent.tsx +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarContent.tsx @@ -5,11 +5,11 @@ import { css } from '@patternfly/react-styles'; import { DataToolbarBreakpointMod, formatBreakpointMods } from './DataToolbarUtils'; export interface DataToolbarContentProps extends React.HTMLProps { - /** TODO */ + /** Classes applied to root element of the Data toolbar content row */ className?: string; - /** TODO */ + /** An array of objects representing the various modifiers to apply to the content row at various breakpoints */ breakpointMods?: DataToolbarBreakpointMod[]; - /** TODO */ + /** An array of ReactNodes to be rendered as children of the content row */ items?: React.ReactNode; } diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarExpandableContent.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarExpandableContent.tsx index ca678d2f1e0..d0feeb3b3a9 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarExpandableContent.tsx +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarExpandableContent.tsx @@ -15,7 +15,7 @@ export interface DataToolbarExpandableContentProps extends React.HTMLProps = ({ +export const DataToolbarExpandableContent: React.FunctionComponent = ({ className, breakpointMods = [] as DataToolbarBreakpointMod[], isExpanded = false, diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarGroup.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarGroup.tsx index b1f49852b16..2b5deec0e7a 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarGroup.tsx +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarGroup.tsx @@ -16,15 +16,15 @@ export enum DataToolbarGroupMod { } export interface DataToolbarGroupProps extends React.HTMLProps { - /** TODO */ + /** Classes applied to root element of the Data toolbar group */ className?: string; - /** TODO */ + /** A type modifier which modifies spacing specifically depending on the type of group */ mod?: DataToolbarGroupMod | 'filter-group' | 'icon-button-group' | 'button-group'; - /** TODO */ + /** An array of objects representing the various modifiers to apply to the Data toolbar group at various breakpoints */ breakpointMods?: DataToolbarBreakpointMod[]; - /** TODO */ + /** An array of objects representing the various spacers to apply to the Data toolbar group at various breakpoints */ spacers?: DataToolbarSpacer[]; - /** TODO */ + /** An array of ReactNodes to be rendered inside the Data toolbar group as children */ items?: React.ReactNode[]; } diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItem.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItem.tsx index 4009628d4f8..e6989fcf722 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItem.tsx +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItem.tsx @@ -13,15 +13,15 @@ export enum DataToolbarItemMod { } export interface DataToolbarItemProps extends React.HTMLProps { - /** TODO */ + /** Classes applied to root element of the Data toolbar item */ className?: string; - /** TODO */ + /** A type modifier which modifies spacing specifically depending on the type of item */ mod?: DataToolbarItemMod; - /** TODO */ + /** An array of objects representing the various modifiers to apply to the Data toolbar item at various breakpoints */ breakpointMods?: DataToolbarBreakpointMod[]; - /** TODO */ + /** An array of objects representing the various spacers to apply to the Data toolbar item at various breakpoints */ spacers?: DataToolbarSpacer[]; - /** TODO */ + /** Content to be rendered inside the Data toolbar item */ children?: React.ReactNode; } diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItemWithChipGroup.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItemWithChipGroup.tsx index 0b711e5a80c..6a035f2eb64 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItemWithChipGroup.tsx +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItemWithChipGroup.tsx @@ -3,18 +3,18 @@ import { DataToolbarItem, DataToolbarItemProps } from './DataToolbarItem'; import { ChipGroup, Chip } from '../../../components/ChipGroup'; export interface DataToolbarItemWithChipGroupProps extends DataToolbarItemProps { - /** TODO */ + /** An array of strings to be displayed as chips in the expandable content */ chips?: string[]; - /** TODO */ + /** A flag indicating if the expandable content is currently expanded */ isExpanded: boolean; - /** TODO */ + /** A flag indicating the item is being displayed inside expandable content rather than a content row TODO */ isInExpandableContent?: boolean; - /** TODO */ + /** Content to be rendered inside the Data toolbar item associated with the chip group */ children: React.ReactNode; } export interface DataToolbarItemWithChipGroupState { - /** TODO */ + /** An array of strings being displayed as chips in the expandable content */ chips?: string[]; } diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarToggleGroup.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarToggleGroup.tsx index 06b1c148b37..fb5cd73b86f 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarToggleGroup.tsx +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarToggleGroup.tsx @@ -12,39 +12,55 @@ import { } from './DataToolbarUtils'; export interface DataToolbarToggleGroupProps extends DataToolbarGroupProps { - /** TODO */ + /** An Icon to be rendered when the toggle group has collapsed down */ toggleIcon: React.ReactNode; - /** TODO */ + /** The breakpoint at which the toggle group is collapsed down */ breakpoint: 'md' | 'lg' | 'xl' | '2xl'; + /** The generated id of the expandable content TODO */ + expandableContentId?: string; } -export const DataToolbarToggleGroup: React.FunctionComponent = ({ - toggleIcon, - breakpoint, - breakpointMods = [] as DataToolbarBreakpointMod[], - spacers = [] as DataToolbarSpacer[], - className, - mod, - items, - ...props -}: DataToolbarToggleGroupProps) => { - - const onToggle = () => { - console.log("toggle clicked"); +export interface DataToolbarToggleGroupState { + /** Flag indicating the if the expandable content is expanded */ + isExpanded: boolean; +} + +export class DataToolbar extends React.Component { + + static defaultProps = { + breakpointMods: [] as DataToolbarBreakpointMod[], + spacers: [] as DataToolbarSpacer[], + }; + + constructor(props: DataToolbarToggleGroupProps) { + super(props); + + this.state = { + isExpanded: false + } }; - return ( -
-
- + onToggle = () => { + this.setState({isExpanded: !this.state.isExpanded}); + }; + + render() { + const { mod, breakpointMods, spacers, className, toggleIcon, items, expandableContentId, ...props } = this.props; + const { isExpanded } = this.state; + + return ( +
+
+ +
+ {items}
- {items} -
- ); -}; + ); + }; +} From bb66af1ec790b8ae756236850870fa03a0664368 Mon Sep 17 00:00:00 2001 From: nicolethoen Date: Thu, 5 Sep 2019 11:38:51 -0400 Subject: [PATCH 13/22] add context provider and consumers --- .../components/DataToolbar/DataToolbar.md | 111 +++++++++--------- .../components/DataToolbar/DataToolbar.tsx | 31 +++-- .../DataToolbar/DataToolbarContent.tsx | 8 +- .../DataToolbarExpandableContent.tsx | 6 +- .../DataToolbar/DataToolbarGroup.tsx | 8 +- .../DataToolbarItemWithChipGroup.tsx | 48 +++++--- .../DataToolbar/DataToolbarToggleGroup.tsx | 59 +++++----- .../DataToolbar/DataToolbarUtils.tsx | 8 ++ 8 files changed, 152 insertions(+), 127 deletions(-) diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.md b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.md index 07a7ea8c894..01913bdd5c5 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.md +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.md @@ -6,8 +6,8 @@ propComponents: ['DataToolbar'] section: 'experimental' --- -import { DataToolbar , DataToolbarItem, DataToolbarGroup, DataToolbarContent } from '@patternfly/react-core/dist/esm/experimental'; -import { Alert, Button, InputGroup, TextInput, SearchIcon } from '@patternfly/react-core'; +import { DataToolbar , DataToolbarItem, DataToolbarGroup, DataToolbarContent, DataToolbarToggleGroup } from '@patternfly/react-core/dist/esm/experimental'; +import { Alert, Button, InputGroup, TextInput, SearchIcon, Select, SelectOption, EditIcon, CloneIcon, SyncIcon } from '@patternfly/react-core'; Please don't use this component, it's only an example of what an experimental component could be @@ -27,23 +27,21 @@ class DataToolbarItems extends React.Component { } render() { - const items = [ + const items = - + - , - , - , + + + - ]; - - const contentRows = []; + ; - return ; + return {items}; } } @@ -80,19 +78,17 @@ class DataToolbarSpacers extends React.Component { {spacerSize: 'lg', breakpoint: 'xl'} ]; - const items = [ - , - , - , - , - , - , + const items = + + + + + + - ]; + ; - const contentRows = []; - - return ; + return {items}; } } @@ -101,8 +97,8 @@ class DataToolbarSpacers extends React.Component { ## Data toolbar group types ```js import React from 'react'; -import { DataToolbar, DataToolbarContent, DataToolbarGroup, DataToolbarItem, Select, SelectOption, EditIcon, CloneIcon, SyncIcon, Button } from '@patternfly/react-core/dist/esm/experimental'; - +import { DataToolbar, DataToolbarContent, DataToolbarGroup, DataToolbarItem } from '@patternfly/react-core/dist/esm/experimental'; +import { Button, Select, SelectOption, EditIcon, CloneIcon, SyncIcon } from '@patternfly/react-core'; class DataToolbarGroupTypes extends React.Component { constructor(props) { @@ -178,7 +174,7 @@ class DataToolbarGroupTypes extends React.Component { render() { const { firstIsExpanded, firstSelected, secondIsExpanded, secondSelected, thirdIsExpanded, thirdSelected } = this.state; - const filterGroupItems = [ + const filterGroupItems = - , + - , + + {this.firstOptions.map((option, index) => ( + + ))} + + + + + ; - //const items = {toggleGroupItems}; - const items = {toggleGroupItems}; + const items = } breakpoint='xl'>{toggleGroupItems}; return {items}; } diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.tsx index cb5ccb2f17f..3cccba1abe4 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.tsx +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.tsx @@ -16,11 +16,10 @@ export interface DataToolbarProps extends React.HTMLProps { export interface DataToolbarState { /** Flag indicating the if the expandable content is expanded */ isExpanded: boolean; - /** TODO */ - expandableContentItems: React.ReactNode; } export class DataToolbar extends React.Component { + private expandableContentRef = React.createRef(); static defaultProps = { @@ -31,30 +30,51 @@ export class DataToolbar extends React.Component { + toggleIsExpanded = () => { this.setState((prevState) => ({ - isExpanded: !prevState.isExpanded, - expandableContentItems: expandableContentItems, + isExpanded: !prevState.isExpanded })); - }; + } + + closeExpandableContent = () => { + this.setState(() => ({ + isExpanded: false + })); + } + + componentDidMount() { + window.addEventListener('resize', this.closeExpandableContent); + } render() { const { className, children, id, ...props} = this.props; - const { isExpanded, expandableContentItems } = this.state; + const { isExpanded } = this.state; + + const expandableContentId = `${id}-expandable-content`; return (
- + {children} - {expandableContentItems} +
); } -}; +} diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarContent.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarContent.tsx index 116bb24750b..b870ffc36d8 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarContent.tsx +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarContent.tsx @@ -21,9 +21,13 @@ export const DataToolbarContent: React.FunctionComponent { return ( -
+
{children}
); diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarExpandableContent.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarExpandableContent.tsx index c61ece431d8..ee6107f53e7 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarExpandableContent.tsx +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarExpandableContent.tsx @@ -2,33 +2,32 @@ import * as React from 'react'; import styles from '@patternfly/react-styles/css/components/DataToolbar/data-toolbar'; import { css, getModifier } from '@patternfly/react-styles'; -import { DataToolbarBreakpointMod, formatBreakpointMods } from './DataToolbarUtils'; +import { RefObject } from 'react'; export interface DataToolbarExpandableContentProps extends React.HTMLProps { - /** TODO */ + /** Classes added to the root element of the Data toolbar expandable content */ className?: string; - /** TODO */ - breakpointMods?: DataToolbarBreakpointMod[]; - /** TODO */ + /** Flag indicating the expandable content is expanded */ isExpanded?: boolean; - /** TODO */ - children?: React.ReactNode; + /** Expandable content reference for passing to Data toolbar children */ + expandableContentRef: RefObject; } export const DataToolbarExpandableContent: React.FunctionComponent = ({ className, - breakpointMods = [] as DataToolbarBreakpointMod[], isExpanded = false, - children, + expandableContentRef, ...props }: DataToolbarExpandableContentProps) => { return ( -
- {children} -
+
); }; diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarGroup.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarGroup.tsx index 38596fe8ed1..712e9dff3c7 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarGroup.tsx +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarGroup.tsx @@ -20,9 +20,9 @@ export interface DataToolbarGroupProps extends React.HTMLProps { className?: string; /** A type modifier which modifies spacing specifically depending on the type of group */ mod?: DataToolbarGroupMod | 'filter-group' | 'icon-button-group' | 'button-group'; - /** An array of objects representing the various modifiers to apply to the Data toolbar group at various breakpoints */ + /** Array of objects representing the various modifiers to apply to the Data toolbar group at various breakpoints */ breakpointMods?: DataToolbarBreakpointMod[]; - /** An array of objects representing the various spacers to apply to the Data toolbar group at various breakpoints */ + /** Array of objects representing the various spacers to apply to the Data toolbar group at various breakpoints */ spacers?: DataToolbarSpacer[]; /** Content to be rendered inside the Data toolbar group */ children?: React.ReactNode; @@ -38,17 +38,17 @@ export const DataToolbarGroup: React.FunctionComponent = }: DataToolbarGroupProps) => { return ( -
+
{children}
); }; - - - diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItem.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItem.tsx index e6989fcf722..7af921c8d29 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItem.tsx +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItem.tsx @@ -2,7 +2,12 @@ import * as React from 'react'; import styles from '@patternfly/react-styles/css/components/DataToolbar/data-toolbar'; import { css, getModifier } from '@patternfly/react-styles'; -import { DataToolbarBreakpointMod, DataToolbarSpacer, formatBreakpointMods, formatItemSpacers } from './DataToolbarUtils'; +import { + DataToolbarBreakpointMod, + DataToolbarSpacer, + formatBreakpointMods, + formatItemSpacers +} from './DataToolbarUtils'; export enum DataToolbarItemMod { separator = 'separator', @@ -16,7 +21,7 @@ export interface DataToolbarItemProps extends React.HTMLProps { /** Classes applied to root element of the Data toolbar item */ className?: string; /** A type modifier which modifies spacing specifically depending on the type of item */ - mod?: DataToolbarItemMod; + mod?: DataToolbarItemMod | 'separator' | 'bulk-select' | 'overflow-menu' | 'pagination' | 'search-filter'; /** An array of objects representing the various modifiers to apply to the Data toolbar item at various breakpoints */ breakpointMods?: DataToolbarBreakpointMod[]; /** An array of objects representing the various spacers to apply to the Data toolbar item at various breakpoints */ @@ -35,12 +40,15 @@ export const DataToolbarItem: React.FunctionComponent = ({ }: DataToolbarItemProps) => { return ( -
+
{children}
); diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItemWithChipGroup.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItemWithChipGroup.tsx deleted file mode 100644 index c2f25186686..00000000000 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItemWithChipGroup.tsx +++ /dev/null @@ -1,83 +0,0 @@ -import * as React from 'react'; -import { DataToolbarItem, DataToolbarItemProps } from './DataToolbarItem'; -import { ChipGroup, Chip } from '../../../components/ChipGroup'; -import { DataToolbarContext } from './DataToolbarUtils'; - -export interface DataToolbarItemWithChipGroupProps extends DataToolbarItemProps { - /** An array of strings to be displayed as chips in the expandable content */ - chips?: string[]; - /** A flag indicating the item is being displayed inside expandable content rather than a content row - * TODO: Figure out how and when to set this flag */ - isInExpandableContent?: boolean; - /** Content to be rendered inside the Data toolbar item associated with the chip group */ - children: React.ReactNode; -} - -export interface DataToolbarItemWithChipGroupState { - /** An array of strings being displayed as chips in the expandable content - * TODO: Allow the item (filter, input, etc) to somehow update this array */ - chips?: string[]; -} - -export class DataToolbarItemWithChipGroup extends React.Component { - - static defaultProps = { - isInExpandableContent: false - }; - - constructor(props: DataToolbarItemWithChipGroupProps) { - super(props); - this.state = { - chips: this.props.chips - } - } - - deleteItem = (id: string) => { - const copyOfChips = this.state.chips; - const index = copyOfChips.indexOf(id); - if (index !== -1) { - copyOfChips.splice(index, 1); - this.setState({ chips: copyOfChips }); - } - }; - - render() { - const { isInExpandableContent, children, ...props } = this.props; - const { chips } = this.state; - - - return ( - - {({ isExpanded, updateExpandableContent }) => { - - const chipGroup = - {chips.map(chip => ( - this.deleteItem(chip)}> - {chip} - - ))} - ; - - /** TODO: make sure if multiple chip groups in a DataToolbar, they are EACH displayed in the expandable content **/ - if (!isExpanded) { - updateExpandableContent([chipGroup]); - } - - return ( - - {(!isInExpandableContent || isExpanded) && - - {children} - - } - {isInExpandableContent && - {chipGroup} - - } - ); - }} - - ); - } - -}; diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarToggleGroup.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarToggleGroup.tsx index 58ca731ddbb..87380b59845 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarToggleGroup.tsx +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarToggleGroup.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; +import * as ReactDOM from 'react-dom'; import styles from '@patternfly/react-styles/css/components/DataToolbar/data-toolbar'; import { css, getModifier } from '@patternfly/react-styles'; import { DataToolbarGroupProps } from './DataToolbarGroup'; @@ -17,13 +18,9 @@ export interface DataToolbarToggleGroupProps extends DataToolbarGroupProps { toggleIcon: React.ReactNode; /** The breakpoint at which the toggle group is collapsed down */ breakpoint: 'md' | 'lg' | 'xl' | '2xl'; - /** The generated id of the expandable content TODO */ - expandableContentId?: string; } -export interface DataToolbarToggleGroupState {} - -export class DataToolbarToggleGroup extends React.Component { +export class DataToolbarToggleGroup extends React.Component { static defaultProps = { breakpointMods: [] as DataToolbarBreakpointMod[], @@ -31,33 +28,40 @@ export class DataToolbarToggleGroup extends React.Component - {({isExpanded, updateExpandableContent}) => { + {({ isExpanded, toggleIsExpanded, expandableContentRef, expandableContentId}) => { return ( -
+
- {children} + { isExpanded ? ReactDOM.createPortal(children, expandableContentRef.current): children }
); + }} ); - }; + } } diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarUtils.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarUtils.tsx index 6a6cc648c9a..605c890bb1d 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarUtils.tsx +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarUtils.tsx @@ -1,23 +1,27 @@ import { getModifier } from '@patternfly/react-styles'; import styles from '@patternfly/react-styles/css/components/DataToolbar/data-toolbar'; import * as React from 'react'; +import { RefObject } from 'react'; interface DataToolbarContextProps { isExpanded: boolean; - updateExpandableContent: (expandableContentItems: React.ReactNode) => void; + toggleIsExpanded: () => void; + expandableContentRef: RefObject; + expandableContentId: string; } export const DataToolbarContext = React.createContext>({}); export type DataToolbarBreakpointMod = { - /** TODO */ + /** The attribute to modify */ modifier: 'hidden' | 'visible' | 'align-right' | 'align-left'; - /** TODO */ + /** The breakpoint at which to apply the modifier */ breakpoint: 'md' | 'lg' | 'xl' | '2xl'; -} +}; -export const formatBreakpointMods = (breakpointMods:DataToolbarBreakpointMod[]) => { - let formattedBreakpointMods = ""; +export const formatBreakpointMods = (breakpointMods: DataToolbarBreakpointMod[]) => { + + let formattedBreakpointMods = ''; for (const breakpointMod of breakpointMods) { formattedBreakpointMods += `${getModifier(styles, `${breakpointMod.modifier}-on-${breakpointMod.breakpoint}`)} `; } @@ -25,33 +29,35 @@ export const formatBreakpointMods = (breakpointMods:DataToolbarBreakpointMod[]) }; export type DataToolbarSpacer = { - /** TODO */ + /** The size of the spacer */ spacerSize: 'none' | 'sm' | 'md' | 'lg'; - /** TODO */ + /** The breakpoint at which to apply the spacer */ breakpoint?: 'md' | 'lg' | 'xl'; -} +}; + +export const formatItemSpacers = (spacers: DataToolbarSpacer[]) => { -export const formatItemSpacers = (spacers:DataToolbarSpacer[]) => { - let formattedSpacers = ""; + let formattedSpacers = ''; for (const spacer of spacers) { - formattedSpacers += "pf-m-spacer-" + spacer.spacerSize; + formattedSpacers += 'pf-m-spacer-' + spacer.spacerSize; if (spacer.breakpoint) { - formattedSpacers += "-on-" + spacer.breakpoint + " "; + formattedSpacers += '-on-' + spacer.breakpoint + ' '; } else { - formattedSpacers += " "; + formattedSpacers += ' '; } } return formattedSpacers; }; -export const formatGroupSpacers = (spacers:DataToolbarSpacer[]) => { - let formattedSpacers = ""; +export const formatGroupSpacers = (spacers: DataToolbarSpacer[]) => { + + let formattedSpacers = ''; for (const spacer of spacers) { - formattedSpacers += "pf-m-space-items-" + spacer.spacerSize; + formattedSpacers += 'pf-m-space-items-' + spacer.spacerSize; if (spacer.breakpoint) { - formattedSpacers += "-on-" + spacer.breakpoint + " "; + formattedSpacers += '-on-' + spacer.breakpoint + ' '; } else { - formattedSpacers += " "; + formattedSpacers += ' '; } } return formattedSpacers; diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/index.ts b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/index.ts index e7dfdf5feda..13954bc8158 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/index.ts +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/index.ts @@ -3,4 +3,3 @@ export * from './DataToolbarContent'; export * from './DataToolbarGroup'; export * from './DataToolbarItem'; export * from './DataToolbarToggleGroup'; -export * from './DataToolbarItemWithChipGroup'; From 0ad8af3e032e752c7f19d7e68cda1232afae116b Mon Sep 17 00:00:00 2001 From: nicolethoen Date: Thu, 5 Sep 2019 23:16:25 -0400 Subject: [PATCH 15/22] fix pf4 docs build --- .../src/experimental/components/DataToolbar/DataToolbar.md | 4 ++-- .../components/DataToolbar/DataToolbarItemWithChipGroup.tsx | 0 2 files changed, 2 insertions(+), 2 deletions(-) create mode 100644 packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItemWithChipGroup.tsx diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.md b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.md index 683b11070d4..90ee6c08626 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.md +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.md @@ -8,7 +8,7 @@ section: 'experimental' import { DataToolbar , DataToolbarItem, DataToolbarGroup, DataToolbarContent, DataToolbarToggleGroup } from '@patternfly/react-core/dist/esm/experimental'; import { Alert, Button, InputGroup, TextInput, Select, SelectOption } from '@patternfly/react-core'; -import { EditIcon, CloneIcon, SyncIcon, SearchIcon } from '@patternfly/react-icons' +import { EditIcon, CloneIcon, SyncIcon, SearchIcon, FilterIcon } from '@patternfly/react-icons' Please don't use this component, it's only an example of what an experimental component could be @@ -263,7 +263,7 @@ class DataToolbarGroupTypes extends React.Component { ## Data toolbar toggle groups ```js import React from 'react'; -import { DataToolbar , DataToolbarItem, DataToolbarContent, DataToolbarGroup, DataToolbarToggleGroup } from '@patternfly/react-core/dist/esm/experimental'; +import { DataToolbar , DataToolbarItem, DataToolbarContent, DataToolbarToggleGroup } from '@patternfly/react-core/dist/esm/experimental'; import { Button, InputGroup, Select, SelectOption } from '@patternfly/react-core'; import { TextInput, SearchIcon, FilterIcon } from '@patternfly/react-icons' diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItemWithChipGroup.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItemWithChipGroup.tsx new file mode 100644 index 00000000000..e69de29bb2d From b112b4fdbf5585d9ab57745858c6b4e483f23be2 Mon Sep 17 00:00:00 2001 From: nicolethoen Date: Fri, 6 Sep 2019 14:46:43 -0400 Subject: [PATCH 16/22] address first PR comments --- .../components/DataToolbar/DataToolbar.md | 19 ++++++--- .../components/DataToolbar/DataToolbar.tsx | 39 +++++-------------- .../DataToolbar/DataToolbarGroup.tsx | 16 +++++--- .../DataToolbar/DataToolbarItem.tsx | 12 +++--- .../DataToolbarItemWithChipGroup.tsx | 0 .../DataToolbar/DataToolbarToggleGroup.tsx | 10 ++--- .../DataToolbar/DataToolbarUtils.tsx | 38 ++++-------------- 7 files changed, 50 insertions(+), 84 deletions(-) delete mode 100644 packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItemWithChipGroup.tsx diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.md b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.md index 90ee6c08626..0be41f85791 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.md +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.md @@ -38,7 +38,7 @@ class DataToolbarItems extends React.Component { - + ; @@ -84,7 +84,7 @@ class DataToolbarSpacers extends React.Component { - + ; @@ -250,9 +250,9 @@ class DataToolbarGroupTypes extends React.Component { ; const items = - {filterGroupItems} - {iconButtonGroupItems} - {buttonGroupItems} + {filterGroupItems} + {iconButtonGroupItems} + {buttonGroupItems} ; return {items}; @@ -271,6 +271,7 @@ class DataToolbarToggleGroupExample extends React.Component { constructor(props) { super(props); this.state = { + isExpanded: false, inputValue: "", firstIsExpanded: false, firstSelected: null, @@ -278,6 +279,12 @@ class DataToolbarToggleGroupExample extends React.Component { secondSelected: null }; + this.toggleIsExpanded = () => { + this.setState((prevState) => ({ + isExpanded: !prevState.isExpanded + })); + }; + this.firstOptions = [ { value: 'Status', disabled: false, isPlaceholder: true }, { value: 'New', disabled: false }, @@ -392,7 +399,7 @@ class DataToolbarToggleGroupExample extends React.Component { const items = } breakpoint='xl'>{toggleGroupItems}; - return {items}; + return {items}; } } diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.tsx index 3cccba1abe4..82638726219 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.tsx +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.tsx @@ -9,50 +9,29 @@ export interface DataToolbarProps extends React.HTMLProps { className?: string; /** Content to be rendered as rows in the Data toolbar */ children?: React.ReactNode; + /** Flag indicating if a Data toolbar toggle group's expandable content is expanded */ + isExpanded?: boolean; + /** A callback for setting the isExpanded flag */ + toggleIsExpanded?: () => void; /** Id of the Data toolbar */ id: string; } -export interface DataToolbarState { - /** Flag indicating the if the expandable content is expanded */ - isExpanded: boolean; -} - -export class DataToolbar extends React.Component { +export class DataToolbar extends React.Component { private expandableContentRef = React.createRef(); static defaultProps = { - + isExpanded: false, + toggleIsExpanded: () => null as any }; constructor(props: DataToolbarProps) { super(props); - - this.state = { - isExpanded: false, - }; - } - - toggleIsExpanded = () => { - this.setState((prevState) => ({ - isExpanded: !prevState.isExpanded - })); - } - - closeExpandableContent = () => { - this.setState(() => ({ - isExpanded: false - })); - } - - componentDidMount() { - window.addEventListener('resize', this.closeExpandableContent); } render() { - const { className, children, id, ...props} = this.props; - const { isExpanded } = this.state; + const { className, children, isExpanded, toggleIsExpanded, id, ...props} = this.props; const expandableContentId = `${id}-expandable-content`; @@ -61,7 +40,7 @@ export class DataToolbar extends React.Component { /** Classes applied to root element of the Data toolbar group */ className?: string; /** A type modifier which modifies spacing specifically depending on the type of group */ - mod?: DataToolbarGroupMod | 'filter-group' | 'icon-button-group' | 'button-group'; + variant?: DataToolbarGroupVariant | 'filter-group' | 'icon-button-group' | 'button-group'; /** Array of objects representing the various modifiers to apply to the Data toolbar group at various breakpoints */ breakpointMods?: DataToolbarBreakpointMod[]; /** Array of objects representing the various spacers to apply to the Data toolbar group at various breakpoints */ spacers?: DataToolbarSpacer[]; + /** Array of objects representing the spacers to apply to the items in this group at various breakpoints */ + itemSpacers?: DataToolbarSpacer[]; /** Content to be rendered inside the Data toolbar group */ children?: React.ReactNode; } @@ -31,8 +33,9 @@ export interface DataToolbarGroupProps extends React.HTMLProps { export const DataToolbarGroup: React.FunctionComponent = ({ breakpointMods = [] as DataToolbarBreakpointMod[], spacers = [] as DataToolbarSpacer[], + itemSpacers = [] as DataToolbarSpacer[], className, - mod, + variant, children, ...props }: DataToolbarGroupProps) => { @@ -41,9 +44,10 @@ export const DataToolbarGroup: React.FunctionComponent =
diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItem.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItem.tsx index 7af921c8d29..f80147855b4 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItem.tsx +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItem.tsx @@ -6,10 +6,10 @@ import { DataToolbarBreakpointMod, DataToolbarSpacer, formatBreakpointMods, - formatItemSpacers + formatSpacers } from './DataToolbarUtils'; -export enum DataToolbarItemMod { +export enum DataToolbarItemVariant { separator = 'separator', 'bulk-select' = 'bulk-select', 'overflow-menu' = 'overflow-menu', @@ -21,7 +21,7 @@ export interface DataToolbarItemProps extends React.HTMLProps { /** Classes applied to root element of the Data toolbar item */ className?: string; /** A type modifier which modifies spacing specifically depending on the type of item */ - mod?: DataToolbarItemMod | 'separator' | 'bulk-select' | 'overflow-menu' | 'pagination' | 'search-filter'; + variant?: DataToolbarItemVariant | 'separator' | 'bulk-select' | 'overflow-menu' | 'pagination' | 'search-filter'; /** An array of objects representing the various modifiers to apply to the Data toolbar item at various breakpoints */ breakpointMods?: DataToolbarBreakpointMod[]; /** An array of objects representing the various spacers to apply to the Data toolbar item at various breakpoints */ @@ -32,7 +32,7 @@ export interface DataToolbarItemProps extends React.HTMLProps { export const DataToolbarItem: React.FunctionComponent = ({ className, - mod, + variant, breakpointMods = [] as DataToolbarBreakpointMod[], spacers = [] as DataToolbarSpacer[], children, @@ -43,9 +43,9 @@ export const DataToolbarItem: React.FunctionComponent = ({
diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItemWithChipGroup.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItemWithChipGroup.tsx deleted file mode 100644 index e69de29bb2d..00000000000 diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarToggleGroup.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarToggleGroup.tsx index 87380b59845..8a6aa0f4027 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarToggleGroup.tsx +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarToggleGroup.tsx @@ -10,7 +10,7 @@ import { DataToolbarBreakpointMod, DataToolbarSpacer, formatBreakpointMods, - formatGroupSpacers + formatSpacers } from './DataToolbarUtils'; export interface DataToolbarToggleGroupProps extends DataToolbarGroupProps { @@ -28,7 +28,7 @@ export class DataToolbarToggleGroup extends React.Component @@ -37,9 +37,9 @@ export class DataToolbarToggleGroup extends React.Component
); - }} ); From a103af942d0c5aed4a10befcca631f88951f66cf Mon Sep 17 00:00:00 2001 From: nicolethoen Date: Mon, 9 Sep 2019 17:10:36 -0400 Subject: [PATCH 18/22] more fixing of my git mess --- .../components/DataToolbar/DataToolbar.md | 456 ++++++++++++++++++ .../components/DataToolbar/DataToolbar.tsx | 8 +- .../DataToolbar/DataToolbarToggleGroup.tsx | 1 - .../DataToolbar/DataToolbarUtils.tsx | 2 +- .../src/experimental/components/index.ts | 3 +- 5 files changed, 462 insertions(+), 8 deletions(-) diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.md b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.md index 0be41f85791..467bd8cc8ad 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.md +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.md @@ -260,14 +260,165 @@ class DataToolbarGroupTypes extends React.Component { } ``` + ## Data toolbar toggle groups +- The Toggle group can either have the toggle state managed by the consumer, or the component. The first Toggle group example demonstrates a component managed toggle state. +- The second Toggle group example below demonstrates a consumer managed toggle state. If the consumer would prefer to manage the expanded state of the toggle group for smaller screen widths: + + 1. Add a toggleIsExpanded callback to DataToolbar + 1. Pass in a boolean into the isExpanded prop to DataToolbar + +- Note: Although the toggle group is aware of the consumer provided breakpoint, the expandable content is not. So if the expandable content is expanded and the screen width surpasses that of the breakpoint, then the expandable content will not know that and will remain open, this case should be considered and handled by the consumer as well. + +### Data toolbar component managed toggle groups +```js +import React from 'react'; +import { DataToolbar , DataToolbarItem, DataToolbarContent, DataToolbarToggleGroup, DataToolbarGroup } from '@patternfly/react-core/dist/esm/experimental'; +import { Button, InputGroup, Select, SelectOption } from '@patternfly/react-core'; +import { TextInput, SearchIcon, FilterIcon } from '@patternfly/react-icons' + +class DataToolbarComponentMangedToggleGroup extends React.Component { + constructor(props) { + super(props); + this.state = { + inputValue: "", + statusIsExpanded: false, + statusSelected: null, + riskIsExpanded: false, + riskSelected: null + }; + + this.statusOptions = [ + { value: 'Status', disabled: false, isPlaceholder: true }, + { value: 'New', disabled: false }, + { value: 'Pending', disabled: false }, + { value: 'Running', disabled: false }, + { value: 'Cancelled', disabled: false }, + ]; + + this.riskOptions = [ + { value: 'Risk', disabled: false, isPlaceholder: true }, + { value: 'Low', disabled: false }, + { value: 'Medium', disabled: false }, + { value: 'High', disabled: false }, + ]; + + this.onInputChange = (newValue) => { + this.setState({inputValue: newValue}); + }; + + this.onStatusToggle = isExpanded => { + this.setState({ + statusIsExpanded: isExpanded + }); + }; + + this.onStatusSelect = (event, selection, isPlaceholder) => { + if (isPlaceholder) this.clearStatusSelection(); + this.setState({ + statusSelected: selection, + statusIsExpanded: false + }); + }; + + this.clearStatusSelection = () => { + this.setState({ + statusSelected: null, + statusIsExpanded: false + }); + }; + + this.onRiskToggle = isExpanded => { + this.setState({ + riskIsExpanded: isExpanded + }); + }; + + this.onRiskSelect = (event, selection, isPlaceholder) => { + if (isPlaceholder) this.clearRiskSelection(); + this.setState({ + riskSelected: selection, + riskIsExpanded: false + }); + }; + + this.clearRiskSelection = () => { + this.setState({ + riskSelected: null, + riskIsExpanded: false + }); + }; + } + + render() { + const { inputValue, statusIsExpanded, statusSelected, riskIsExpanded, riskSelected } = this.state; + + const toggleGroupItems = + + + + + + + + + + + + + + + ; + + const items = } breakpoint='xl'>{toggleGroupItems}; + + return {items}; + } +} +``` + +### Data toolbar consumer managed toggle groups ```js import React from 'react'; import { DataToolbar , DataToolbarItem, DataToolbarContent, DataToolbarToggleGroup } from '@patternfly/react-core/dist/esm/experimental'; +import { DataToolbar , DataToolbarItem, DataToolbarContent, DataToolbarToggleGroup, DataToolbarGroup } from '@patternfly/react-core/dist/esm/experimental'; import { Button, InputGroup, Select, SelectOption } from '@patternfly/react-core'; import { TextInput, SearchIcon, FilterIcon } from '@patternfly/react-icons' class DataToolbarToggleGroupExample extends React.Component { +class DataToolbarConsumerMangedToggleGroup extends React.Component { constructor(props) { super(props); this.state = { @@ -277,6 +428,10 @@ class DataToolbarToggleGroupExample extends React.Component { firstSelected: null, secondIsExpanded: false, secondSelected: null + statusIsExpanded: false, + statusSelected: null, + riskIsExpanded: false, + riskSelected: null }; this.toggleIsExpanded = () => { @@ -286,6 +441,7 @@ class DataToolbarToggleGroupExample extends React.Component { }; this.firstOptions = [ + this.statusOptions = [ { value: 'Status', disabled: false, isPlaceholder: true }, { value: 'New', disabled: false }, { value: 'Pending', disabled: false }, @@ -294,6 +450,7 @@ class DataToolbarToggleGroupExample extends React.Component { ]; this.secondOptions = [ + this.riskOptions = [ { value: 'Risk', disabled: false, isPlaceholder: true }, { value: 'Low', disabled: false }, { value: 'Medium', disabled: false }, @@ -305,50 +462,69 @@ class DataToolbarToggleGroupExample extends React.Component { }; this.onFirstToggle = isExpanded => { + this.onStatusToggle = isExpanded => { this.setState({ firstIsExpanded: isExpanded + statusIsExpanded: isExpanded }); }; this.onFirstSelect = (event, selection, isPlaceholder) => { if (isPlaceholder) this.clearFirstSelection(); + this.onStatusSelect = (event, selection, isPlaceholder) => { + if (isPlaceholder) this.clearStatusSelection(); this.setState({ firstSelected: selection, firstIsExpanded: false + statusSelected: selection, + statusIsExpanded: false }); }; this.clearFirstSelection = () => { + this.clearStatusSelection = () => { this.setState({ firstSelected: null, firstIsExpanded: false + statusSelected: null, + statusIsExpanded: false }); }; this.onSecondToggle = isExpanded => { + this.onRiskToggle = isExpanded => { this.setState({ secondIsExpanded: isExpanded + riskIsExpanded: isExpanded }); }; this.onSecondSelect = (event, selection, isPlaceholder) => { if (isPlaceholder) this.clearSecondSelection(); + this.onRiskSelect = (event, selection, isPlaceholder) => { + if (isPlaceholder) this.clearRiskSelection(); this.setState({ secondSelected: selection, secondIsExpanded: false + riskSelected: selection, + riskIsExpanded: false }); }; this.clearSecondSelection = () => { + this.clearRiskSelection = () => { this.setState({ secondSelected: null, secondIsExpanded: false + riskSelected: null, + riskIsExpanded: false }); }; } render() { const { inputValue, firstIsExpanded, firstSelected, secondIsExpanded, secondSelected } = this.state; + const { isExpanded, inputValue, statusIsExpanded, statusSelected, riskIsExpanded, riskSelected } = this.state; const toggleGroupItems = @@ -395,12 +571,292 @@ class DataToolbarToggleGroupExample extends React.Component { ))} + + + + + + + + ; const items = } breakpoint='xl'>{toggleGroupItems}; return {items}; + return {items}; } } ``` +## Data toolbar group stacked +```js +import React from 'react'; +import { DataToolbar, DataToolbarContent, DataToolbarToggleGroup, DataToolbarGroup, DataToolbarItem } from '@patternfly/react-core/dist/esm/experimental'; +import { Button, Select, SelectOption, Pagination, Dropdown, DropdownToggle, DropdownToggleCheckbox, DropdownItem } from '@patternfly/react-core'; +import { FilterIcon, CloneIcon, SyncIcon } from '@patternfly/react-icons' + +class DataToolbarStacked extends React.Component { + constructor(props) { + super(props); + + // toggle group - three option menus with labels, two icon buttons, Kebab menu - right aligned + // pagination - right aligned + this.resourceOptions = [ + { value: 'All', disabled: false }, + { value: 'Deployment', disabled: false }, + { value: 'Pod', disabled: false }, + ]; + + this.statusOptions = [ + { value: 'Running', disabled: false, }, + { value: 'New', disabled: false }, + { value: 'Pending', disabled: false }, + { value: 'Cancelled', disabled: false }, + ]; + + this.typeOptions = [ + { value: 'Any', disabled: false, isPlaceholder: true }, + { value: 'No Type', disabled: false }, + ]; + + this.state = { + resourceIsExpanded: false, + resourceSelected: null, + statusIsExpanded: false, + statusSelected: null, + typeIsExpanded: false, + typeSelected: null, + splitButtonDropdownIsOpen: false, + page: 1, + perPage: 20 + }; + + this.onResourceToggle = isExpanded => { + this.setState({ + resourceIsExpanded: isExpanded + }); + }; + + this.onResourceSelect = (event, selection) => { + this.setState({ + resourceSelected: selection, + resourceIsExpanded: false + }); + }; + + this.onStatusToggle = isExpanded => { + this.setState({ + statusIsExpanded: isExpanded + }); + }; + + this.onStatusSelect = (event, selection) => { + this.setState({ + statusSelected: selection, + statusIsExpanded: false + }); + }; + + this.onTypeToggle = isExpanded => { + this.setState({ + typeIsExpanded: isExpanded + }); + }; + + this.onTypeSelect = (event, selection) => { + this.setState({ + typeSelected: selection, + typeIsExpanded: false + }); + }; + + this.onSetPage = (_event, pageNumber) => { + this.setState({ + page: pageNumber + }); + }; + + this.onPerPageSelect = (_event, perPage) => { + this.setState({ + perPage + }); + }; + + this.onSplitButtonToggle = isOpen => { + console.log("hm"); + this.setState({ + splitButtonDropdownIsOpen: isOpen + }); + }; + + this.onSplitButtonSelect = event => { + this.setState({ + splitButtonDropdownIsOpen: !this.state.splitButtonDropdownIsOpen + }); + }; + + } + + render() { + const { resourceIsExpanded, resourceSelected, statusIsExpanded, statusSelected, typeIsExpanded, typeSelected, splitButtonDropdownIsOpen } = this.state; + + const splitButtonDropdownItems = [ + Link, + + Action + , + + Disabled Link + , + + Disabled Action + + ]; + + const toggleGroupItems = + Resource + + + + Status + + + + Type + + + + ; + + const iconButtonGroupItems = + + + ; + + + const firstRowItems = + } breakpoint='xl'>{toggleGroupItems} + {iconButtonGroupItems} + Overflow Menu + ; + + const secondRowItems = + + + ]} + onToggle={this.onSplitButtonToggle} + /> + )} + isOpen={splitButtonDropdownIsOpen} + dropdownItems={splitButtonDropdownItems} + /> + + + + + ; + + return + {firstRowItems} + {secondRowItems} + ; + } +} + +``` + diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.tsx index 85e31142d66..649a4741ebe 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.tsx +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.tsx @@ -37,25 +37,25 @@ export class DataToolbar extends React.Component { this.setState((prevState) => ({ componentManagedIsExpanded: !prevState.componentManagedIsExpanded })); - }; + } closeExpandableContent = () => { this.setState(() => ({ componentManagedIsExpanded: false })); - }; + } componentDidMount() { const { isConsumerManagedToggleGroup } = this.state; - if( !isConsumerManagedToggleGroup ) { + if ( !isConsumerManagedToggleGroup ) { window.addEventListener('resize', this.closeExpandableContent); } } diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarToggleGroup.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarToggleGroup.tsx index 9e0e82403f5..e9fa70fc0db 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarToggleGroup.tsx +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarToggleGroup.tsx @@ -29,7 +29,6 @@ export class DataToolbarToggleGroup extends React.Component diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarUtils.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarUtils.tsx index 6f3ea27c833..c551a53d132 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarUtils.tsx +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarUtils.tsx @@ -21,7 +21,7 @@ export type DataToolbarBreakpointMod = { export const formatBreakpointMods = (breakpointMods: DataToolbarBreakpointMod[]) => { return breakpointMods.reduce((acc, curr) => ( - `${acc} ${getModifier(styles, `${curr.modifier}-on-${curr.breakpoint}`)}` + `${acc} ${getModifier(styles, `${curr.modifier}${curr.breakpoint ? `-on-${curr.breakpoint}` : ''}`)}` ), ''); }; diff --git a/packages/patternfly-4/react-core/src/experimental/components/index.ts b/packages/patternfly-4/react-core/src/experimental/components/index.ts index 7519037c3ea..bece9bcf754 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/index.ts +++ b/packages/patternfly-4/react-core/src/experimental/components/index.ts @@ -1,4 +1,3 @@ -export * from './Button'; -export * from './Badge'; export * from './DataToolbar'; export * from './Drawer'; +export * from './Spinner'; From 04ffdfc64926f69f0a596370c29d4bc3e14ef80f Mon Sep 17 00:00:00 2001 From: nicolethoen Date: Mon, 9 Sep 2019 17:19:50 -0400 Subject: [PATCH 19/22] clean up example --- .../components/DataToolbar/DataToolbar.md | 66 +------------------ 1 file changed, 1 insertion(+), 65 deletions(-) diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.md b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.md index 467bd8cc8ad..7a97bf2054e 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.md +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.md @@ -412,22 +412,16 @@ class DataToolbarComponentMangedToggleGroup extends React.Component { ### Data toolbar consumer managed toggle groups ```js import React from 'react'; -import { DataToolbar , DataToolbarItem, DataToolbarContent, DataToolbarToggleGroup } from '@patternfly/react-core/dist/esm/experimental'; import { DataToolbar , DataToolbarItem, DataToolbarContent, DataToolbarToggleGroup, DataToolbarGroup } from '@patternfly/react-core/dist/esm/experimental'; import { Button, InputGroup, Select, SelectOption } from '@patternfly/react-core'; import { TextInput, SearchIcon, FilterIcon } from '@patternfly/react-icons' -class DataToolbarToggleGroupExample extends React.Component { class DataToolbarConsumerMangedToggleGroup extends React.Component { constructor(props) { super(props); this.state = { isExpanded: false, inputValue: "", - firstIsExpanded: false, - firstSelected: null, - secondIsExpanded: false, - secondSelected: null statusIsExpanded: false, statusSelected: null, riskIsExpanded: false, @@ -440,7 +434,6 @@ class DataToolbarConsumerMangedToggleGroup extends React.Component { })); }; - this.firstOptions = [ this.statusOptions = [ { value: 'Status', disabled: false, isPlaceholder: true }, { value: 'New', disabled: false }, @@ -449,7 +442,6 @@ class DataToolbarConsumerMangedToggleGroup extends React.Component { { value: 'Cancelled', disabled: false }, ]; - this.secondOptions = [ this.riskOptions = [ { value: 'Risk', disabled: false, isPlaceholder: true }, { value: 'Low', disabled: false }, @@ -461,61 +453,43 @@ class DataToolbarConsumerMangedToggleGroup extends React.Component { this.setState({inputValue: newValue}); }; - this.onFirstToggle = isExpanded => { this.onStatusToggle = isExpanded => { this.setState({ - firstIsExpanded: isExpanded statusIsExpanded: isExpanded }); }; - this.onFirstSelect = (event, selection, isPlaceholder) => { - if (isPlaceholder) this.clearFirstSelection(); this.onStatusSelect = (event, selection, isPlaceholder) => { if (isPlaceholder) this.clearStatusSelection(); this.setState({ - firstSelected: selection, - firstIsExpanded: false statusSelected: selection, statusIsExpanded: false }); }; - this.clearFirstSelection = () => { this.clearStatusSelection = () => { this.setState({ - firstSelected: null, - firstIsExpanded: false statusSelected: null, statusIsExpanded: false }); }; - this.onSecondToggle = isExpanded => { this.onRiskToggle = isExpanded => { this.setState({ - secondIsExpanded: isExpanded riskIsExpanded: isExpanded }); }; - this.onSecondSelect = (event, selection, isPlaceholder) => { - if (isPlaceholder) this.clearSecondSelection(); this.onRiskSelect = (event, selection, isPlaceholder) => { if (isPlaceholder) this.clearRiskSelection(); this.setState({ - secondSelected: selection, - secondIsExpanded: false riskSelected: selection, riskIsExpanded: false }); }; - this.clearSecondSelection = () => { this.clearRiskSelection = () => { this.setState({ - secondSelected: null, - secondIsExpanded: false riskSelected: null, riskIsExpanded: false }); @@ -523,7 +497,6 @@ class DataToolbarConsumerMangedToggleGroup extends React.Component { } render() { - const { inputValue, firstIsExpanded, firstSelected, secondIsExpanded, secondSelected } = this.state; const { isExpanded, inputValue, statusIsExpanded, statusSelected, riskIsExpanded, riskSelected } = this.state; const toggleGroupItems = @@ -535,42 +508,6 @@ class DataToolbarConsumerMangedToggleGroup extends React.Component { - - - - - - - {this.secondOptions.map((option, index) => ( + variant={SelectVariant.single} + aria-label="Select Input" + onToggle={this.onSecondToggle} + onSelect={this.onSecondSelect} + selections={secondSelected} + isExpanded={secondIsExpanded} + > + {this.secondOptions.map((option, index) => ( {this.statusOptions.map((option, index) => ( - + ))} @@ -514,11 +520,11 @@ class DataToolbarConsumerMangedToggleGroup extends React.Component { isExpanded={statusIsExpanded} > {this.statusOptions.map((option, index) => ( - + ))} @@ -533,11 +539,11 @@ class DataToolbarConsumerMangedToggleGroup extends React.Component { > {this.riskOptions.map((option, index) => ( - ))} + isDisabled={option.disabled} + key={index} + value={option.value} + /> + ))} @@ -699,21 +705,21 @@ class DataToolbarStacked extends React.Component { Status Type @@ -772,18 +778,19 @@ class DataToolbarStacked extends React.Component { + itemCount={37} + perPage={this.state.perPage} + page={this.state.page} + onSetPage={this.onSetPage} + widgetId="pagination-options-menu-top" + onPerPageSelect={this.onPerPageSelect} + /> ; return {firstRowItems} +
{secondRowItems} ; } From abe78d67a1a6070d5dae17b27f47adfefd12be1d Mon Sep 17 00:00:00 2001 From: nicolethoen Date: Tue, 10 Sep 2019 14:54:28 -0400 Subject: [PATCH 22/22] two small tweaks --- .../src/experimental/components/DataToolbar/DataToolbar.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.md b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.md index 285b900cb73..bacc94003b9 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.md +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.md @@ -84,9 +84,9 @@ class DataToolbarSpacers extends React.Component { - + + - ` ;