From a696c2d4a1ff5c2d3cc4cfc26040856c79bd0f82 Mon Sep 17 00:00:00 2001 From: Kellie O Donovan <120460002@umail.ucc.ie> Date: Tue, 9 May 2023 11:24:08 +0100 Subject: [PATCH 01/11] feat(Datalist): implement full page Basic demo to match HTML #9048 --- packages/react-core/src/demos/DataListDemo.md | 904 ++++++++++++++++++ 1 file changed, 904 insertions(+) diff --git a/packages/react-core/src/demos/DataListDemo.md b/packages/react-core/src/demos/DataListDemo.md index 09e68551ff5..0f591cbaee7 100644 --- a/packages/react-core/src/demos/DataListDemo.md +++ b/packages/react-core/src/demos/DataListDemo.md @@ -9,6 +9,14 @@ import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-i import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; import { css } from '@patternfly/react-styles'; +import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon'; +import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; +import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon'; +import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; +import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon'; +import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon'; +import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon'; + ## Demos ### Expandable control in toolbar @@ -421,3 +429,899 @@ class ExpandableDataList extends React.Component { } } ``` +### Card view + +```js isFullscreen +import React from 'react'; +import { + Badge, + Button, + DataList, + DataListItem, + DataListCell, + DataListItemRow, + DataListItemCells, + Dropdown, + DropdownItem, + DropdownList, + Flex, + FlexItem, + MenuToggle, + OverflowMenu, + OverflowMenuControl, + OverflowMenuItem, + PageSection, + PageSectionVariants, + Pagination, + TextContent, + Text, + TextContent, + TextVariants, + Toolbar, + ToolbarItem, + ToolbarFilter, + ToolbarContent, + Select, + SelectList, +} from '@patternfly/react-core'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; +import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper'; + +import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon'; +import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon'; +import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; +import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon'; +import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; +import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon'; + +class DataListViewBasic extends React.Component { + constructor(props) { + super(props); + + this.state = { + filters: { + products: [] + }, + res: [], + isChecked: false, + selectedItems: [], + areAllSelected: false, + isUpperToolbarDropdownOpen: false, + isUpperToolbarKebabDropdownOpen: false, + isLowerToolbarDropdownOpen: false, + isLowerToolbarKebabDropdownOpen: false, + isCardKebabDropdownOpen: false, + activeItem: 0, + splitButtonDropdownIsOpen: false, + page: 1, + perPage: 10, + totalItemCount: 10 + }; + + this.checkAllSelected = (selected, total) => { + if (selected && selected < total) { + return null; + } + return selected === total; + }; + + this.onToolbarDropdownToggle = () => { + this.setState((prevState) => ({ + isLowerToolbarDropdownOpen: !prevState.isLowerToolbarDropdownOpen + })); + }; + + this.onToolbarKebabDropdownToggle = () => { + this.setState({ + isOpen: !this.state.isLowerToolbarKebabDropdownOpen + }); + }; + + this.onToolbarKebabDropdownSelect = (event) => { + this.setState({ + isLowerToolbarKebabDropdownOpen: !this.state.isLowerToolbarKebabDropdownOpen + }); + }; + + this.onCardKebabDropdownToggle = (key) => { + this.setState((prevState) => ({ + [key]: !prevState[key] + })); + }; + + this.onCardKebabDropdownSelect = (key, event) => { + this.setState({ + [key]: !this.state[key] + }); + }; + + this.deleteItem = (item) => (event) => { + const filter = (getter) => (val) => getter(val) !== item.id; + this.setState({ + res: this.state.res.filter(filter(({ id }) => id)), + selectedItems: this.state.selectedItems.filter(filter((id) => id)) + }); + }; + + this.onSetPage = (_event, pageNumber) => { + this.setState({ + page: pageNumber + }); + }; + + this.onPerPageSelect = (_event, perPage) => { + this.setState({ + perPage + }); + }; + + this.onSplitButtonToggle = () => { + this.setState((prevState) => ({ + splitButtonDropdownIsOpen: !prevState.splitButtonDropdownIsOpen + })); + }; + + this.onSplitButtonSelect = () => { + this.setState({ + splitButtonDropdownIsOpen: false + }); + }; + + this.onNameSelect = (event, selection) => { + const checked = event.target.checked; + this.setState((prevState) => { + const prevSelections = prevState.filters['products']; + return { + filters: { + ...prevState.filters, + ['products']: checked + ? [...prevSelections, selection] + : prevSelections.filter((value) => value !== selection) + } + }; + }); + }; + + this.onDelete = (type = '', id = '') => { + if (type) { + this.setState((prevState) => { + prevState.filters[type.toLowerCase()] = prevState.filters[type.toLowerCase()].filter((s) => s !== id); + return { + filters: prevState.filters + }; + }); + } else { + this.setState({ + filters: { + products: [] + } + }); + } + }; + + this.onKeyDown = (event, productId) => { + if (event.target !== event.currentTarget) { + return; + } + if ([' ', 'Enter'].includes(event.key)) { + event.preventDefault(); + this.setState((prevState) => { + return prevState.selectedItems.includes(productId * 1) + ? { + selectedItems: [...prevState.selectedItems.filter((id) => productId * 1 != id)], + areAllSelected: this.checkAllSelected(prevState.selectedItems.length - 1, prevState.totalItemCount) + } + : { + selectedItems: [...prevState.selectedItems, productId * 1], + areAllSelected: this.checkAllSelected(prevState.selectedItems.length + 1, prevState.totalItemCount) + }; + }); + } + }; + + this.onClick = (productId) => { + this.setState((prevState) => { + return prevState.selectedItems.includes(productId * 1) + ? { + selectedItems: [...prevState.selectedItems.filter((id) => productId * 1 != id)], + areAllSelected: this.checkAllSelected(prevState.selectedItems.length - 1, prevState.totalItemCount) + } + : { + selectedItems: [...prevState.selectedItems, productId * 1], + areAllSelected: this.checkAllSelected(prevState.selectedItems.length + 1, prevState.totalItemCount) + }; + }); + }; + } + + selectedItems(e) { + const { value, checked } = e.target; + let { selectedItems } = this.state; + + if (checked) { + selectedItems = [...selectedItems, value]; + } else { + selectedItems = selectedItems.filter((el) => el !== value); + if (this.state.areAllSelected) { + this.setState({ + areAllSelected: !this.state.areAllSelected + }); + } + } + this.setState({ selectedItems }); + } + + splitCheckboxSelectAll(e) { + const { checked } = e.target; + const { isChecked, res } = this.state; + let collection = []; + + if (checked) { + for (var i = 0; i <= 9; i++) collection = [...collection, i]; + } + + this.setState( + { + selectedItems: collection, + isChecked: isChecked, + areAllSelected: checked + }, + this.updateSelected + ); + } + + selectPage(e) { + const { checked } = e.target; + const { isChecked, totalItemCount, perPage } = this.state; + let collection = []; + + collection = this.getAllItems(); + + this.setState( + { + selectedItems: collection, + isChecked: checked, + areAllSelected: totalItemCount === perPage ? true : false + }, + this.updateSelected + ); + } + + selectAll(e) { + const { checked } = e.target; + const { isChecked } = this.state; + + let collection = []; + for (var i = 0; i <= 9; i++) collection = [...collection, i]; + + this.setState( + { + selectedItems: collection, + isChecked: true, + areAllSelected: true + }, + this.updateSelected + ); + } + + selectNone(e) { + const { checked } = e.target; + const { isChecked, selectedItems } = this.state; + this.setState( + { + selectedItems: [], + isChecked: false, + areAllSelected: false + }, + this.updateSelected + ); + } + + getAllItems() { + const { res } = this.state; + const collection = []; + for (const items of res) { + collection.push(items.id); + } + + return collection; + } + + updateSelected() { + const { res, selectedItems } = this.state; + let rows = res.map((post) => { + post.selected = selectedItems.includes(post.id); + return post; + }); + + this.setState({ + res: rows + }); + } + + fetch(page, perPage) { + fetch(`https://my-json-server.typicode.com/jenny-s51/cardviewdata/posts?_page=${page}&_limit=${perPage}`) + .then((resp) => resp.json()) + .then((resp) => this.setState({ res: resp, perPage, page })) + .then(() => this.updateSelected()) + .catch((err) => this.setState({ error: err })); + } + + componentDidMount() { + this.fetch(this.state.page, this.state.perPage); + } + + renderPagination() { + const { page, perPage, totalItemCount } = this.state; + + const defaultPerPageOptions = [ + { + title: '1', + value: 1 + }, + { + title: '5', + value: 5 + }, + { + title: '10', + value: 10 + } + ]; + + return ( + { + this.fetch(value, perPage); + }} + onPerPageSelect={(_evt, value) => { + this.fetch(1, value); + }} + variant="top" + isCompact + /> + ); + } + + buildSelectDropdown() { + const { splitButtonDropdownIsOpen, selectedItems, areAllSelected } = this.state; + const numSelected = selectedItems.length; + const allSelected = areAllSelected; + const anySelected = numSelected > 0; + const someChecked = anySelected ? null : false; + const isChecked = allSelected ? true : someChecked; + const splitButtonDropdownItems = ( + <> + + Select none (0 items) + + + Select page ({this.state.perPage} items) + + + Select all ({this.state.totalItemCount} items) + + + ); + return ( + this.setState({ splitButtonDropdownIsOpen: isOpen })} + toggle={(toggleRef) => ( + + {numSelected !== 0 && `${numSelected} selected`} + + ] + }} + > + )} + > + {splitButtonDropdownItems} + + ); + } + + buildFilterDropdown() { + const { isLowerToolbarDropdownOpen, filters } = this.state; + + const filterDropdownItems = ( + + PatternFly + ActiveMQ + Apache Spark + Avro + Azure Services + Crypto + DropBox + JBoss Data Grid + REST + SWAGGER + + ); + + return ( + + + + ); + } + + render() { + const { + isUpperToolbarDropdownOpen, + isLowerToolbarDropdownOpen, + isUpperToolbarKebabDropdownOpen, + isLowerToolbarKebabDropdownOpen, + isCardKebabDropdownOpen, + splitButtonDropdownIsOpen, + activeItem, + filters, + res, + checked, + selectedItems, + areAllSelected, + isChecked, + page, + perPage + } = this.state; + + const toolbarKebabDropdownItems = [ + + Link + , + + Action + , + + Disabled Link + , + + Disabled Action + , + , + + Separated Link + , + + Separated Action + + ]; + + const toolbarItems = ( + + {this.buildSelectDropdown()} + {this.buildFilterDropdown()} + + + + + + + ( + + + + )} + isOpen={isLowerToolbarKebabDropdownOpen} + onOpenChange={(isOpen) => this.setState({ isLowerToolbarKebabDropdownOpen: isOpen })} + > + {toolbarKebabDropdownItems} + + + + + + {this.renderPagination()} + + + ); + + const filtered = + filters.products.length > 0 + ? res.filter((card) => { + return filters.products.length === 0 || filters.products.includes(card.name); + }) + : res; + + const icons = { + pfIcon, + activeMQIcon, + sparkIcon, + avroIcon, + azureIcon, + saxonIcon, + dropBoxIcon, + infinispanIcon, + restIcon, + swaggerIcon + }; + + + return ( + + + + ); + } + + render() { + const { + isLowerToolbarKebabDropdownOpen, + + page + } = this.state; + + const toolbarKebabDropdownItems = []; + + const toolbarItems = ( + + {this.buildSelectDropdown()} + {this.buildFilterDropdown()} + + + + + + + ( + + + + )} + isOpen={isLowerToolbarKebabDropdownOpen} + > + {toolbarKebabDropdownItems} + + + + + + {this.renderPagination()} + + + ); + + return ( + + + + + Projects + This is a demo that showcases PatternFly DataList. + + + + + {toolbarItems} + + + + + + + + patternfly + + + + Working repo for PatternFly 4{' '} + + + + + + + \xa0 10 + + + \xa0 \xa0 4 + + + \xa0 \xa0 5 + + \xa0 \xa0 Updated 2 days ago + + + + , + + + + + + + + + + + ]} + /> + + + + + + + + patternfly-elements + + + PatternFly elements + + + + + \xa0 5 + + + \xa0 \xa0 9 + + + \xa0 \xa0 2 + + + \xa0 + \xa0 11 + + + \xa0 \xa0 4 + + + \xa0 + \xa0 1 + + \xa0 \xa0 Updated 2 days ago + + + + , + + + + + + + + + + + ]} + /> + + + + + + + + patternfly-unified-design-kit + + + , + + + + + + + + + + + ]} + /> + + + + + + + + patternfly + + + + Working repo for PatternFly 4{' '} + + + + + + + + \xa0 10 + + + \xa0 \xa0 4 + + + \xa0 \xa0 5 + + \xa0 \xa0 Updated 2 days ago + + + + , + + + + + + + + + + + ]} + /> + + + + + + + + patternfly-elements + + + PatternFly elements + + + + + \xa0 5 + + + \xa0 \xa0 9 + + + \xa0 \xa0 2 + + + \xa0 + \xa0 11 + + + \xa0 \xa0 4 + + + \xa0 \xa0 1 + + \xa0 \xa0 Updated 2 days ago + + + + , + + + + + + + + + + + ]} + /> + + + + + + + + + + ); + } +} +``` \ No newline at end of file From a2963453648c25122dbe75cd30e021ca294edce6 Mon Sep 17 00:00:00 2001 From: Kellie O Donovan <120460002@umail.ucc.ie> Date: Tue, 9 May 2023 14:44:39 +0100 Subject: [PATCH 02/11] fix syntax error --- packages/react-core/src/demos/DataListDemo.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/react-core/src/demos/DataListDemo.md b/packages/react-core/src/demos/DataListDemo.md index 0f591cbaee7..0d1ba0de1ed 100644 --- a/packages/react-core/src/demos/DataListDemo.md +++ b/packages/react-core/src/demos/DataListDemo.md @@ -14,8 +14,6 @@ import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon'; import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon'; -import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon'; -import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon'; ## Demos From a35d88ae00f075fc11a3ac7bf5fc2b3b0db07cb6 Mon Sep 17 00:00:00 2001 From: Kellie O Donovan <120460002@umail.ucc.ie> Date: Thu, 11 May 2023 14:49:52 +0100 Subject: [PATCH 03/11] comments applied --- packages/react-core/src/demos/DataListDemo.md | 264 ++---------------- 1 file changed, 18 insertions(+), 246 deletions(-) diff --git a/packages/react-core/src/demos/DataListDemo.md b/packages/react-core/src/demos/DataListDemo.md index 0d1ba0de1ed..bcc29cc4f4e 100644 --- a/packages/react-core/src/demos/DataListDemo.md +++ b/packages/react-core/src/demos/DataListDemo.md @@ -3,6 +3,8 @@ id: Data list section: components --- +import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper'; + import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon'; import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon'; import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon'; @@ -427,7 +429,8 @@ class ExpandableDataList extends React.Component { } } ``` -### Card view + +### Data List view ```js isFullscreen import React from 'react'; @@ -441,17 +444,16 @@ import { DataListItemCells, Dropdown, DropdownItem, - DropdownList, Flex, FlexItem, MenuToggle, + MenuToggleCheckbox, OverflowMenu, OverflowMenuControl, OverflowMenuItem, PageSection, PageSectionVariants, Pagination, - TextContent, Text, TextContent, TextVariants, @@ -459,8 +461,7 @@ import { ToolbarItem, ToolbarFilter, ToolbarContent, - Select, - SelectList, + Select } from '@patternfly/react-core'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper'; @@ -492,8 +493,8 @@ class DataListViewBasic extends React.Component { activeItem: 0, splitButtonDropdownIsOpen: false, page: 1, - perPage: 10, - totalItemCount: 10 + perPage: 5, + totalItemCount: 5 }; this.checkAllSelected = (selected, total) => { @@ -649,28 +650,9 @@ class DataListViewBasic extends React.Component { this.setState({ selectedItems }); } - splitCheckboxSelectAll(e) { - const { checked } = e.target; - const { isChecked, res } = this.state; - let collection = []; - - if (checked) { - for (var i = 0; i <= 9; i++) collection = [...collection, i]; - } - - this.setState( - { - selectedItems: collection, - isChecked: isChecked, - areAllSelected: checked - }, - this.updateSelected - ); - } - selectPage(e) { const { checked } = e.target; - const { isChecked, totalItemCount, perPage } = this.state; + const { totalItemCount, perPage } = this.state; let collection = []; collection = this.getAllItems(); @@ -686,9 +668,6 @@ class DataListViewBasic extends React.Component { } selectAll(e) { - const { checked } = e.target; - const { isChecked } = this.state; - let collection = []; for (var i = 0; i <= 9; i++) collection = [...collection, i]; @@ -703,8 +682,6 @@ class DataListViewBasic extends React.Component { } selectNone(e) { - const { checked } = e.target; - const { isChecked, selectedItems } = this.state; this.setState( { selectedItems: [], @@ -752,37 +729,7 @@ class DataListViewBasic extends React.Component { renderPagination() { const { page, perPage, totalItemCount } = this.state; - const defaultPerPageOptions = [ - { - title: '1', - value: 1 - }, - { - title: '5', - value: 5 - }, - { - title: '10', - value: 10 - } - ]; - - return ( - { - this.fetch(value, perPage); - }} - onPerPageSelect={(_evt, value) => { - this.fetch(1, value); - }} - variant="top" - isCompact - /> - ); + return ; } buildSelectDropdown() { @@ -791,20 +738,7 @@ class DataListViewBasic extends React.Component { const allSelected = areAllSelected; const anySelected = numSelected > 0; const someChecked = anySelected ? null : false; - const isChecked = allSelected ? true : someChecked; - const splitButtonDropdownItems = ( - <> - - Select none (0 items) - - - Select page ({this.state.perPage} items) - - - Select all ({this.state.totalItemCount} items) - - - ); + return ( {numSelected !== 0 && `${numSelected} selected`} @@ -832,7 +765,7 @@ class DataListViewBasic extends React.Component { > )} > - {splitButtonDropdownItems} + {/*Stand in for a functioning select/dropdown*/} ); } @@ -840,150 +773,6 @@ class DataListViewBasic extends React.Component { buildFilterDropdown() { const { isLowerToolbarDropdownOpen, filters } = this.state; - const filterDropdownItems = ( - - PatternFly - ActiveMQ - Apache Spark - Avro - Azure Services - Crypto - DropBox - JBoss Data Grid - REST - SWAGGER - - ); - - return ( - - - - ); - } - - render() { - const { - isUpperToolbarDropdownOpen, - isLowerToolbarDropdownOpen, - isUpperToolbarKebabDropdownOpen, - isLowerToolbarKebabDropdownOpen, - isCardKebabDropdownOpen, - splitButtonDropdownIsOpen, - activeItem, - filters, - res, - checked, - selectedItems, - areAllSelected, - isChecked, - page, - perPage - } = this.state; - - const toolbarKebabDropdownItems = [ - - Link - , - - Action - , - - Disabled Link - , - - Disabled Action - , - , - - Separated Link - , - - Separated Action - - ]; - - const toolbarItems = ( - - {this.buildSelectDropdown()} - {this.buildFilterDropdown()} - - - - - - - ( - - - - )} - isOpen={isLowerToolbarKebabDropdownOpen} - onOpenChange={(isOpen) => this.setState({ isLowerToolbarKebabDropdownOpen: isOpen })} - > - {toolbarKebabDropdownItems} - - - - - - {this.renderPagination()} - - - ); - - const filtered = - filters.products.length > 0 - ? res.filter((card) => { - return filters.products.length === 0 || filters.products.includes(card.name); - }) - : res; - - const icons = { - pfIcon, - activeMQIcon, - sparkIcon, - avroIcon, - azureIcon, - saxonIcon, - dropBoxIcon, - infinispanIcon, - restIcon, - swaggerIcon - }; - - return ( ); } render() { - const { - isLowerToolbarKebabDropdownOpen, - - page - } = this.state; - - const toolbarKebabDropdownItems = []; + const { isLowerToolbarKebabDropdownOpen, page } = this.state; const toolbarItems = ( @@ -1044,7 +827,7 @@ class DataListViewBasic extends React.Component { )} isOpen={isLowerToolbarKebabDropdownOpen} > - {toolbarKebabDropdownItems} + {/*Stand in for a functioning select/dropdown*/} @@ -1061,7 +844,7 @@ class DataListViewBasic extends React.Component { Projects - This is a demo that showcases PatternFly DataList. + This is a demo that showcases PatternFly DataList @@ -1306,20 +1089,9 @@ class DataListViewBasic extends React.Component { - - - ); } } -``` \ No newline at end of file +``` From 2ed77be2c3b8d45d737a1330cbe492e986b161cd Mon Sep 17 00:00:00 2001 From: Kellie O Donovan <120460002@umail.ucc.ie> Date: Thu, 11 May 2023 14:52:53 +0100 Subject: [PATCH 04/11] comments applied --- packages/react-core/src/demos/DataListDemo.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-core/src/demos/DataListDemo.md b/packages/react-core/src/demos/DataListDemo.md index bcc29cc4f4e..06f73370095 100644 --- a/packages/react-core/src/demos/DataListDemo.md +++ b/packages/react-core/src/demos/DataListDemo.md @@ -844,7 +844,7 @@ class DataListViewBasic extends React.Component { Projects - This is a demo that showcases PatternFly DataList + This is a demo that showcases PatternFly Data List From 7641b55f7f1b89b1837e1f09416bb6e611ba34fe Mon Sep 17 00:00:00 2001 From: Kellie O Donovan <120460002@umail.ucc.ie> Date: Wed, 17 May 2023 15:50:43 +0100 Subject: [PATCH 05/11] comments applied --- packages/react-core/src/demos/DataListDemo.md | 342 +----------------- 1 file changed, 13 insertions(+), 329 deletions(-) diff --git a/packages/react-core/src/demos/DataListDemo.md b/packages/react-core/src/demos/DataListDemo.md index 06f73370095..053e103af6f 100644 --- a/packages/react-core/src/demos/DataListDemo.md +++ b/packages/react-core/src/demos/DataListDemo.md @@ -478,252 +478,10 @@ class DataListViewBasic extends React.Component { super(props); this.state = { - filters: { - products: [] - }, - res: [], - isChecked: false, - selectedItems: [], - areAllSelected: false, - isUpperToolbarDropdownOpen: false, - isUpperToolbarKebabDropdownOpen: false, - isLowerToolbarDropdownOpen: false, - isLowerToolbarKebabDropdownOpen: false, - isCardKebabDropdownOpen: false, - activeItem: 0, - splitButtonDropdownIsOpen: false, page: 1, perPage: 5, totalItemCount: 5 }; - - this.checkAllSelected = (selected, total) => { - if (selected && selected < total) { - return null; - } - return selected === total; - }; - - this.onToolbarDropdownToggle = () => { - this.setState((prevState) => ({ - isLowerToolbarDropdownOpen: !prevState.isLowerToolbarDropdownOpen - })); - }; - - this.onToolbarKebabDropdownToggle = () => { - this.setState({ - isOpen: !this.state.isLowerToolbarKebabDropdownOpen - }); - }; - - this.onToolbarKebabDropdownSelect = (event) => { - this.setState({ - isLowerToolbarKebabDropdownOpen: !this.state.isLowerToolbarKebabDropdownOpen - }); - }; - - this.onCardKebabDropdownToggle = (key) => { - this.setState((prevState) => ({ - [key]: !prevState[key] - })); - }; - - this.onCardKebabDropdownSelect = (key, event) => { - this.setState({ - [key]: !this.state[key] - }); - }; - - this.deleteItem = (item) => (event) => { - const filter = (getter) => (val) => getter(val) !== item.id; - this.setState({ - res: this.state.res.filter(filter(({ id }) => id)), - selectedItems: this.state.selectedItems.filter(filter((id) => id)) - }); - }; - - this.onSetPage = (_event, pageNumber) => { - this.setState({ - page: pageNumber - }); - }; - - this.onPerPageSelect = (_event, perPage) => { - this.setState({ - perPage - }); - }; - - this.onSplitButtonToggle = () => { - this.setState((prevState) => ({ - splitButtonDropdownIsOpen: !prevState.splitButtonDropdownIsOpen - })); - }; - - this.onSplitButtonSelect = () => { - this.setState({ - splitButtonDropdownIsOpen: false - }); - }; - - this.onNameSelect = (event, selection) => { - const checked = event.target.checked; - this.setState((prevState) => { - const prevSelections = prevState.filters['products']; - return { - filters: { - ...prevState.filters, - ['products']: checked - ? [...prevSelections, selection] - : prevSelections.filter((value) => value !== selection) - } - }; - }); - }; - - this.onDelete = (type = '', id = '') => { - if (type) { - this.setState((prevState) => { - prevState.filters[type.toLowerCase()] = prevState.filters[type.toLowerCase()].filter((s) => s !== id); - return { - filters: prevState.filters - }; - }); - } else { - this.setState({ - filters: { - products: [] - } - }); - } - }; - - this.onKeyDown = (event, productId) => { - if (event.target !== event.currentTarget) { - return; - } - if ([' ', 'Enter'].includes(event.key)) { - event.preventDefault(); - this.setState((prevState) => { - return prevState.selectedItems.includes(productId * 1) - ? { - selectedItems: [...prevState.selectedItems.filter((id) => productId * 1 != id)], - areAllSelected: this.checkAllSelected(prevState.selectedItems.length - 1, prevState.totalItemCount) - } - : { - selectedItems: [...prevState.selectedItems, productId * 1], - areAllSelected: this.checkAllSelected(prevState.selectedItems.length + 1, prevState.totalItemCount) - }; - }); - } - }; - - this.onClick = (productId) => { - this.setState((prevState) => { - return prevState.selectedItems.includes(productId * 1) - ? { - selectedItems: [...prevState.selectedItems.filter((id) => productId * 1 != id)], - areAllSelected: this.checkAllSelected(prevState.selectedItems.length - 1, prevState.totalItemCount) - } - : { - selectedItems: [...prevState.selectedItems, productId * 1], - areAllSelected: this.checkAllSelected(prevState.selectedItems.length + 1, prevState.totalItemCount) - }; - }); - }; - } - - selectedItems(e) { - const { value, checked } = e.target; - let { selectedItems } = this.state; - - if (checked) { - selectedItems = [...selectedItems, value]; - } else { - selectedItems = selectedItems.filter((el) => el !== value); - if (this.state.areAllSelected) { - this.setState({ - areAllSelected: !this.state.areAllSelected - }); - } - } - this.setState({ selectedItems }); - } - - selectPage(e) { - const { checked } = e.target; - const { totalItemCount, perPage } = this.state; - let collection = []; - - collection = this.getAllItems(); - - this.setState( - { - selectedItems: collection, - isChecked: checked, - areAllSelected: totalItemCount === perPage ? true : false - }, - this.updateSelected - ); - } - - selectAll(e) { - let collection = []; - for (var i = 0; i <= 9; i++) collection = [...collection, i]; - - this.setState( - { - selectedItems: collection, - isChecked: true, - areAllSelected: true - }, - this.updateSelected - ); - } - - selectNone(e) { - this.setState( - { - selectedItems: [], - isChecked: false, - areAllSelected: false - }, - this.updateSelected - ); - } - - getAllItems() { - const { res } = this.state; - const collection = []; - for (const items of res) { - collection.push(items.id); - } - - return collection; - } - - updateSelected() { - const { res, selectedItems } = this.state; - let rows = res.map((post) => { - post.selected = selectedItems.includes(post.id); - return post; - }); - - this.setState({ - res: rows - }); - } - - fetch(page, perPage) { - fetch(`https://my-json-server.typicode.com/jenny-s51/cardviewdata/posts?_page=${page}&_limit=${perPage}`) - .then((resp) => resp.json()) - .then((resp) => this.setState({ res: resp, perPage, page })) - .then(() => this.updateSelected()) - .catch((err) => this.setState({ error: err })); - } - - componentDidMount() { - this.fetch(this.state.page, this.state.perPage); } renderPagination() { @@ -732,103 +490,29 @@ class DataListViewBasic extends React.Component { return ; } - buildSelectDropdown() { - const { splitButtonDropdownIsOpen, selectedItems, areAllSelected } = this.state; - const numSelected = selectedItems.length; - const allSelected = areAllSelected; - const anySelected = numSelected > 0; - const someChecked = anySelected ? null : false; - - return ( - this.setState({ splitButtonDropdownIsOpen: isOpen })} - toggle={(toggleRef) => ( + render() { + const toolbarItems = ( + + - {numSelected !== 0 && `${numSelected} selected`} - - ] + items: [] }} > - )} - > - {/*Stand in for a functioning select/dropdown*/} - - ); - } - - buildFilterDropdown() { - const { isLowerToolbarDropdownOpen, filters } = this.state; - - return ( - - - - ); - } - - render() { - const { isLowerToolbarKebabDropdownOpen, page } = this.state; - - const toolbarItems = ( - - {this.buildSelectDropdown()} - {this.buildFilterDropdown()} + + + Filter by creator name + - ( - - - - )} - isOpen={isLowerToolbarKebabDropdownOpen} - > - {/*Stand in for a functioning select/dropdown*/} - + + + @@ -848,7 +532,7 @@ class DataListViewBasic extends React.Component { - + {toolbarItems} From 154f6a0eecb39d5b6c2e8a816d777a030544203a Mon Sep 17 00:00:00 2001 From: Kellie O Donovan <120460002@umail.ucc.ie> Date: Thu, 18 May 2023 08:39:58 +0100 Subject: [PATCH 06/11] comments applied --- package.json | 4 +++- packages/react-core/src/demos/DataListDemo.md | 13 ++++--------- 2 files changed, 7 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index 45f13ae3a79..65a2b9de284 100644 --- a/package.json +++ b/package.json @@ -113,5 +113,7 @@ "packages/**" ] }, - "dependencies": {} + "dependencies": { + "@patternfly/react-icons": "5.0.0-alpha.15" + } } diff --git a/packages/react-core/src/demos/DataListDemo.md b/packages/react-core/src/demos/DataListDemo.md index 053e103af6f..7edb61bfb5b 100644 --- a/packages/react-core/src/demos/DataListDemo.md +++ b/packages/react-core/src/demos/DataListDemo.md @@ -430,20 +430,17 @@ class ExpandableDataList extends React.Component { } ``` -### Data List view +### Basic ```js isFullscreen import React from 'react'; import { - Badge, Button, DataList, DataListItem, DataListCell, DataListItemRow, DataListItemCells, - Dropdown, - DropdownItem, Flex, FlexItem, MenuToggle, @@ -459,9 +456,7 @@ import { TextVariants, Toolbar, ToolbarItem, - ToolbarFilter, - ToolbarContent, - Select + ToolbarContent } from '@patternfly/react-core'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper'; @@ -479,13 +474,12 @@ class DataListViewBasic extends React.Component { this.state = { page: 1, - perPage: 5, totalItemCount: 5 }; } renderPagination() { - const { page, perPage, totalItemCount } = this.state; + const { page, totalItemCount } = this.state; return ; } @@ -499,6 +493,7 @@ class DataListViewBasic extends React.Component { splitButtonOptions={{ items: [] }} + key="split-dropdown-checkbox" > From f37a83a5fa643bad86e9d07a8d80d3ab0b10d046 Mon Sep 17 00:00:00 2001 From: Kellie O Donovan <120460002@umail.ucc.ie> Date: Thu, 18 May 2023 14:14:21 +0100 Subject: [PATCH 07/11] \xa0 comments applied --- packages/react-core/src/demos/DataListDemo.md | 56 +++++++++---------- 1 file changed, 27 insertions(+), 29 deletions(-) diff --git a/packages/react-core/src/demos/DataListDemo.md b/packages/react-core/src/demos/DataListDemo.md index 7edb61bfb5b..09108f23fbf 100644 --- a/packages/react-core/src/demos/DataListDemo.md +++ b/packages/react-core/src/demos/DataListDemo.md @@ -549,17 +549,17 @@ class DataListViewBasic extends React.Component { - + - \xa0 10 + 10 - \xa0 \xa0 4 + 4 - \xa0 \xa0 5 + 5 - \xa0 \xa0 Updated 2 days ago + Updated 2 days ago @@ -593,28 +593,27 @@ class DataListViewBasic extends React.Component { PatternFly elements - + - \xa0 5 + 5 - \xa0 \xa0 9 + 9 - \xa0 \xa0 2 + 2 - \xa0 - \xa0 11 + + 11 - \xa0 \xa0 4 + 4 - \xa0 - \xa0 1 + 1 - \xa0 \xa0 Updated 2 days ago + Updated 2 days ago @@ -680,18 +679,18 @@ class DataListViewBasic extends React.Component { - + - \xa0 10 + 10 - \xa0 \xa0 4 + 4 - \xa0 \xa0 5 + 5 - \xa0 \xa0 Updated 2 days ago + Updated 2 days ago @@ -725,27 +724,26 @@ class DataListViewBasic extends React.Component { PatternFly elements - + - \xa0 5 + 5 - \xa0 \xa0 9 + 9 - \xa0 \xa0 2 + 2 - \xa0 - \xa0 11 + 11 - \xa0 \xa0 4 + 4 - \xa0 \xa0 1 + 1 - \xa0 \xa0 Updated 2 days ago + Updated 2 days ago From 6a3f7e3c56badef9a093d5d6e9ce446f54e58fc7 Mon Sep 17 00:00:00 2001 From: nicolethoen Date: Mon, 17 Jul 2023 08:34:56 -0400 Subject: [PATCH 08/11] move key per review comments --- packages/react-core/src/demos/DataListDemo.md | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/react-core/src/demos/DataListDemo.md b/packages/react-core/src/demos/DataListDemo.md index 09108f23fbf..22b242ba1d9 100644 --- a/packages/react-core/src/demos/DataListDemo.md +++ b/packages/react-core/src/demos/DataListDemo.md @@ -491,9 +491,13 @@ class DataListViewBasic extends React.Component { ] + items: [ + + ] }} - key="split-dropdown-checkbox" > From b96da3679b57468f43c8b5b7e8abd662c5944195 Mon Sep 17 00:00:00 2001 From: nicolethoen Date: Thu, 31 Aug 2023 22:44:53 -0400 Subject: [PATCH 09/11] address PR comments --- package.json | 3 -- packages/react-core/src/demos/DataListDemo.md | 42 +++++++------------ 2 files changed, 16 insertions(+), 29 deletions(-) diff --git a/package.json b/package.json index 65a2b9de284..fc3d06d1e70 100644 --- a/package.json +++ b/package.json @@ -112,8 +112,5 @@ "packages": [ "packages/**" ] - }, - "dependencies": { - "@patternfly/react-icons": "5.0.0-alpha.15" } } diff --git a/packages/react-core/src/demos/DataListDemo.md b/packages/react-core/src/demos/DataListDemo.md index 22b242ba1d9..b5735dd8283 100644 --- a/packages/react-core/src/demos/DataListDemo.md +++ b/packages/react-core/src/demos/DataListDemo.md @@ -542,14 +542,14 @@ class DataListViewBasic extends React.Component { - patternfly + patternfly - Working repo for PatternFly 4{' '} - + Working repo for + + PatternFly + @@ -574,9 +574,7 @@ class DataListViewBasic extends React.Component { - + Link @@ -628,9 +626,7 @@ class DataListViewBasic extends React.Component { - + Link @@ -655,9 +651,7 @@ class DataListViewBasic extends React.Component { - + Link @@ -676,10 +670,10 @@ class DataListViewBasic extends React.Component { - Working repo for PatternFly 4{' '} - + Working repo for + + PatternFly + @@ -705,9 +699,7 @@ class DataListViewBasic extends React.Component { - + Link @@ -730,10 +722,10 @@ class DataListViewBasic extends React.Component { - 5 + 5 - 9 + 9 2 @@ -758,9 +750,7 @@ class DataListViewBasic extends React.Component { - + Link From af40d2b49a35908ce8234b69ebbfa4e4af3cc55e Mon Sep 17 00:00:00 2001 From: nicolethoen Date: Thu, 31 Aug 2023 22:51:59 -0400 Subject: [PATCH 10/11] revert change to package.json --- package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index fc3d06d1e70..45f13ae3a79 100644 --- a/package.json +++ b/package.json @@ -112,5 +112,6 @@ "packages": [ "packages/**" ] - } + }, + "dependencies": {} } From 5e47d055c899ccc660935cd00ca36f779ad187f8 Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Mon, 30 Oct 2023 14:13:49 -0400 Subject: [PATCH 11/11] Converted basic demo to TS --- .../demos/DataList/examples/DataListBasic.tsx | 314 ++++++++++++++++ packages/react-core/src/demos/DataListDemo.md | 345 +----------------- 2 files changed, 320 insertions(+), 339 deletions(-) create mode 100644 packages/react-core/src/demos/DataList/examples/DataListBasic.tsx diff --git a/packages/react-core/src/demos/DataList/examples/DataListBasic.tsx b/packages/react-core/src/demos/DataList/examples/DataListBasic.tsx new file mode 100644 index 00000000000..24b0b15c152 --- /dev/null +++ b/packages/react-core/src/demos/DataList/examples/DataListBasic.tsx @@ -0,0 +1,314 @@ +import React from 'react'; +import { + Button, + DataList, + DataListItem, + DataListCell, + DataListItemRow, + DataListItemCells, + Flex, + FlexItem, + MenuToggle, + MenuToggleCheckbox, + OverflowMenu, + OverflowMenuControl, + OverflowMenuItem, + PageSection, + PageSectionVariants, + Pagination, + Text, + TextContent, + TextVariants, + Toolbar, + ToolbarItem, + ToolbarContent +} from '@patternfly/react-core'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; +import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper'; + +import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon'; +import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon'; +import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; +import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon'; +import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; +import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon'; + +export const DataListBasic: React.FunctionComponent = () => { + const renderPagination = () => ; + + const toolbarItems = ( + + + + ] + }} + > + + + Filter by creator name + + + + + + + + + + + + + + + {renderPagination()} + + + ); + + return ( + + + + + Projects + This is a demo that showcases PatternFly Data List + + + + + {toolbarItems} + + + + + + + + patternfly + + + + Working repo for + PatternFly + + + + + + 10 + + + 4 + + + 5 + + Updated 2 days ago + + + + , + + + + + + + Link + + + + ]} + /> + + + + + + + + patternfly-elements + + + PatternFly elements + + + + + 5 + + + 9 + + + 2 + + + + 11 + + + 4 + + + 1 + + Updated 2 days ago + + + + , + + + + + + + Link + + + + ]} + /> + + + + + + + + patternfly-unified-design-kit + + + , + + + + + + + Link + + + + ]} + /> + + + + + + + + patternfly + + + + Working repo for + PatternFly + + + + + + + 10 + + + 4 + + + 5 + + Updated 2 days ago + + + + , + + + + + + + Link + + + + ]} + /> + + + + + + + + patternfly-elements + + + PatternFly elements + + + + + 5 + + + 9 + + + 2 + + + 11 + + + 4 + + + 1 + + Updated 2 days ago + + + + , + + + + + + + Link + + + + ]} + /> + + + + + + + ); +}; diff --git a/packages/react-core/src/demos/DataListDemo.md b/packages/react-core/src/demos/DataListDemo.md index b5735dd8283..6f72a9c083e 100644 --- a/packages/react-core/src/demos/DataListDemo.md +++ b/packages/react-core/src/demos/DataListDemo.md @@ -3,8 +3,6 @@ id: Data list section: components --- -import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper'; - import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon'; import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon'; import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon'; @@ -19,6 +17,12 @@ import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle ## Demos +### Basic + +```js file="./DataList/examples/DataListBasic.tsx" isFullscreen + +``` + ### Expandable control in toolbar ```js @@ -429,340 +433,3 @@ class ExpandableDataList extends React.Component { } } ``` - -### Basic - -```js isFullscreen -import React from 'react'; -import { - Button, - DataList, - DataListItem, - DataListCell, - DataListItemRow, - DataListItemCells, - Flex, - FlexItem, - MenuToggle, - MenuToggleCheckbox, - OverflowMenu, - OverflowMenuControl, - OverflowMenuItem, - PageSection, - PageSectionVariants, - Pagination, - Text, - TextContent, - TextVariants, - Toolbar, - ToolbarItem, - ToolbarContent -} from '@patternfly/react-core'; -import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; -import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper'; - -import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon'; -import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon'; -import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; -import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon'; -import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; -import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon'; - -class DataListViewBasic extends React.Component { - constructor(props) { - super(props); - - this.state = { - page: 1, - totalItemCount: 5 - }; - } - - renderPagination() { - const { page, totalItemCount } = this.state; - - return ; - } - - render() { - const toolbarItems = ( - - - - ] - }} - > - - - Filter by creator name - - - - - - - - - - - - - - - {this.renderPagination()} - - - ); - - return ( - - - - - Projects - This is a demo that showcases PatternFly Data List - - - - - {toolbarItems} - - - - - - - - patternfly - - - - Working repo for - - PatternFly - - - - - - - 10 - - - 4 - - - 5 - - Updated 2 days ago - - - - , - - - - - - - Link - - - - ]} - /> - - - - - - - - patternfly-elements - - - PatternFly elements - - - - - 5 - - - 9 - - - 2 - - - - 11 - - - 4 - - - 1 - - Updated 2 days ago - - - - , - - - - - - - Link - - - - ]} - /> - - - - - - - - patternfly-unified-design-kit - - - , - - - - - - - Link - - - - ]} - /> - - - - - - - - patternfly - - - - Working repo for - - PatternFly - - - - - - - - 10 - - - 4 - - - 5 - - Updated 2 days ago - - - - , - - - - - - - Link - - - - ]} - /> - - - - - - - - patternfly-elements - - - PatternFly elements - - - - - 5 - - - 9 - - - 2 - - - 11 - - - 4 - - - 1 - - Updated 2 days ago - - - - , - - - - - - - Link - - - - ]} - /> - - - - - - - ); - } -} -```