From f434d9c854d5c8c1dd6f7f186fbb47fd275a68fa Mon Sep 17 00:00:00 2001 From: jenny-s51 Date: Wed, 23 Mar 2022 15:17:19 -0400 Subject: [PATCH 1/2] convert context selector to TS --- .../examples/ContextSelector.md | 282 +----------------- .../examples/ContextSelectorBasic.tsx | 84 ++++++ .../examples/ContextSelectorPlainText.tsx | 85 ++++++ .../examples/ContextSelectorWithFooter.tsx | 91 ++++++ 4 files changed, 263 insertions(+), 279 deletions(-) create mode 100644 packages/react-core/src/components/ContextSelector/examples/ContextSelectorBasic.tsx create mode 100644 packages/react-core/src/components/ContextSelector/examples/ContextSelectorPlainText.tsx create mode 100644 packages/react-core/src/components/ContextSelector/examples/ContextSelectorWithFooter.tsx diff --git a/packages/react-core/src/components/ContextSelector/examples/ContextSelector.md b/packages/react-core/src/components/ContextSelector/examples/ContextSelector.md index 7f29405ca8c..37a0a65e433 100644 --- a/packages/react-core/src/components/ContextSelector/examples/ContextSelector.md +++ b/packages/react-core/src/components/ContextSelector/examples/ContextSelector.md @@ -10,291 +10,15 @@ ouia: true ### Basic -```js -import React from 'react'; -import { Button, ContextSelector, ContextSelectorItem, ContextSelectorFooter } from '@patternfly/react-core'; - -class SimpleContextSelector extends React.Component { - constructor(props) { - super(props); - this.items = [ - { - text: 'Link', - href: '#' - }, - 'Action', - { - text: 'Disabled link', - href: '#', - isDisabled: true - }, - { - text: 'Disabled action', - isDisabled: true - }, - 'My project', - 'OpenShift cluster', - 'Production Ansible', - 'AWS', - 'Azure', - 'My project 2', - 'OpenShift cluster ', - 'Production Ansible 2 ', - 'AWS 2', - 'Azure 2' - ]; - - this.state = { - isOpen: false, - selected: this.items[0].text || this.items[0], - searchValue: '', - filteredItems: this.items - }; - - this.onToggle = (event, isOpen) => { - this.setState({ - isOpen - }); - }; - - this.onSelect = (event, value) => { - this.setState({ - selected: value, - isOpen: !this.state.isOpen - }); - }; - - this.onSearchInputChange = value => { - this.setState({ searchValue: value }); - }; - - this.onSearchButtonClick = event => { - const filtered = - this.state.searchValue === '' - ? this.items - : this.items.filter(item => { - const str = item.text ? item.text : item; - return str.toLowerCase().indexOf(this.state.searchValue.toLowerCase()) !== -1; - }); - - this.setState({ filteredItems: filtered || [] }); - }; - } - - render() { - const { isOpen, selected, searchValue, filteredItems } = this.state; - return ( - - {filteredItems.map((item, index) => { - const { text = null, href = null, isDisabled } = item; - return ({text || item}); - })} - - ); - } -} +```ts file="./ContextSelectorBasic.tsx" ``` ### Plain with text -```ts -import React from 'react'; -import { ContextSelector, ContextSelectorItem } from '@patternfly/react-core'; - -interface Item { - text: string; - href?: string; - isDisabled?: boolean; -} - -const items = [ - { - text: 'Link', - href: '#' - }, - 'Action', - { - text: 'Disabled link', - href: '#', - isDisabled: true - }, - { - text: 'Disabled action', - isDisabled: true - }, - 'My Project', - 'OpenShift Cluster', - 'Production Ansible', - 'AWS', - 'Azure', - 'My Project 2', - 'OpenShift Cluster ', - 'Production Ansible 2 ', - 'AWS 2', - 'Azure 2' -]; - -const PlainTextContextSelector: React.FunctionComponent = () => { - const firstItemText = typeof items[0] === 'string' ? items[0] : items[0].text; - const [isOpen, setOpen] = React.useState(false); - const [selected, setSelected] = React.useState(firstItemText); - const [searchValue, setSearchValue] = React.useState(''); - const [filteredItems, setFilteredItems] = React.useState(items); - - function onToggle(event: any, isOpen: boolean) { - setOpen(isOpen); - }; - - function onSelect(event: any, value: string) { - setSelected(value); - setOpen(!isOpen); - }; - - function onSearchInputChange(value: string) { - setSearchValue(value); - }; - - function onSearchButtonClick(event: React.SyntheticEvent) { - const filtered = - searchValue === '' - ? items - : items.filter(item => { - const str = (typeof item === 'string') ? item : item.text; - return str.toLowerCase().indexOf(searchValue.toLowerCase()) !== -1; - }); - - setFilteredItems(filtered || []); - }; - return ( - - {filteredItems.map((item, index) => { - const [text, href = null, isDisabled = false] = (typeof item === 'string') - ? [item, null, false] - : [item.text, item.href, item.isDisabled]; - return {text}; - })} - - ); -}; +```ts file="./ContextSelectorPlainText.tsx" ``` ### With footer -```js -import React from 'react'; -import { Button, ContextSelector, ContextSelectorItem, ContextSelectorFooter } from '@patternfly/react-core'; - -class FooterContextSelector extends React.Component { - constructor(props) { - super(props); - this.items = [ - { - text: 'Link', - href: '#' - }, - 'Action', - { - text: 'Disabled link', - href: '#', - isDisabled: true - }, - { - text: 'Disabled action', - isDisabled: true - }, - 'My project', - 'OpenShift cluster', - 'Production Ansible', - 'AWS', - 'Azure', - 'My project 2', - 'OpenShift cluster ', - 'Production Ansible 2 ', - 'AWS 2', - 'Azure 2' - ]; - - this.state = { - isOpen: false, - selected: this.items[0].text || this.items[0], - searchValue: '', - filteredItems: this.items - }; - - this.onToggle = (event, isOpen) => { - this.setState({ - isOpen - }); - }; - - this.onSelect = (event, value) => { - this.setState({ - selected: value, - isOpen: !this.state.isOpen - }); - }; - - this.onSearchInputChange = value => { - this.setState({ searchValue: value }); - }; - - this.onSearchButtonClick = event => { - const filtered = - this.state.searchValue === '' - ? this.items - : this.items.filter(item => { - const str = item.text ? item.text : item; - return str.toLowerCase().indexOf(this.state.searchValue.toLowerCase()) !== -1; - }); - - this.setState({ filteredItems: filtered || [] }); - }; - } - - render() { - const { isOpen, selected, searchValue, filteredItems } = this.state; - return ( - - - - } - > - {filteredItems.map((item, index) => { - const { text = null, href = null, isDisabled } = item; - return ({text || item}); - })} - - ); - } -} +```ts file="./ContextSelectorWithFooter.tsx" ``` diff --git a/packages/react-core/src/components/ContextSelector/examples/ContextSelectorBasic.tsx b/packages/react-core/src/components/ContextSelector/examples/ContextSelectorBasic.tsx new file mode 100644 index 00000000000..e45c150baba --- /dev/null +++ b/packages/react-core/src/components/ContextSelector/examples/ContextSelectorBasic.tsx @@ -0,0 +1,84 @@ +import React from 'react'; +import { ContextSelector, ContextSelectorItem } from '@patternfly/react-core'; + +export const SimpleContextSelector: React.FunctionComponent = () => { + const items = [ + { + text: 'Link', + href: '#' + }, + 'Action', + { + text: 'Disabled link', + href: '#', + isDisabled: true + }, + { + text: 'Disabled action', + isDisabled: true + }, + 'My project', + 'OpenShift cluster', + 'Production Ansible', + 'AWS', + 'Azure', + 'My project 2', + 'OpenShift cluster ', + 'Production Ansible 2 ', + 'AWS 2', + 'Azure 2' + ]; + + const firstItemText = typeof items[0] === 'string' ? items[0] : items[0].text; + const [isOpen, setOpen] = React.useState(false); + const [selected, setSelected] = React.useState(firstItemText); + const [searchValue, setSearchValue] = React.useState(''); + const [filteredItems, setFilteredItems] = React.useState(items); + + const onToggle = (event: any, isOpen: boolean) => { + setOpen(isOpen); + }; + + const onSelect = (event: any, value: React.ReactNode) => { + setSelected(value as string); + setOpen(!isOpen); + }; + + const onSearchInputChange = (value: string) => { + setSearchValue(value); + }; + + const onSearchButtonClick = (_event: React.SyntheticEvent) => { + const filtered = + searchValue === '' + ? items + : items.filter(item => { + const str = typeof item === 'string' ? item : item.text; + return str.toLowerCase().indexOf(searchValue.toLowerCase()) !== -1; + }); + + setFilteredItems(filtered || []); + }; + return ( + + {filteredItems.map((item, index) => { + const [text = null, href = null, isDisabled] = + typeof item === 'string' ? [item, null, false] : [item.text, item.href, item.isDisabled]; + return ( + + {text || item} + + ); + })} + + ); +}; diff --git a/packages/react-core/src/components/ContextSelector/examples/ContextSelectorPlainText.tsx b/packages/react-core/src/components/ContextSelector/examples/ContextSelectorPlainText.tsx new file mode 100644 index 00000000000..f37db16b134 --- /dev/null +++ b/packages/react-core/src/components/ContextSelector/examples/ContextSelectorPlainText.tsx @@ -0,0 +1,85 @@ +import React from 'react'; +import { ContextSelector, ContextSelectorItem } from '@patternfly/react-core'; + +const items = [ + { + text: 'Link', + href: '#' + }, + 'Action', + { + text: 'Disabled link', + href: '#', + isDisabled: true + }, + { + text: 'Disabled action', + isDisabled: true + }, + 'My Project', + 'OpenShift Cluster', + 'Production Ansible', + 'AWS', + 'Azure', + 'My Project 2', + 'OpenShift Cluster ', + 'Production Ansible 2 ', + 'AWS 2', + 'Azure 2' +]; + +export const PlainTextContextSelector: React.FunctionComponent = () => { + const firstItemText = typeof items[0] === 'string' ? items[0] : items[0].text; + const [isOpen, setOpen] = React.useState(false); + const [selected, setSelected] = React.useState(firstItemText); + const [searchValue, setSearchValue] = React.useState(''); + const [filteredItems, setFilteredItems] = React.useState(items); + const onToggle = (event: any, isOpen: boolean) => { + setOpen(isOpen); + }; + + const onSelect = (event: any, value: React.ReactNode) => { + setSelected(value as string); + setOpen(!isOpen); + }; + + const onSearchInputChange = (value: string) => { + setSearchValue(value); + }; + + const onSearchButtonClick = (_event: React.SyntheticEvent) => { + const filtered = + searchValue === '' + ? items + : items.filter(item => { + const str = typeof item === 'string' ? item : item.text; + return str.toLowerCase().indexOf(searchValue.toLowerCase()) !== -1; + }); + + setFilteredItems(filtered || []); + }; + return ( + + {filteredItems.map((item, index) => { + const [text, href = null, isDisabled = false] = + typeof item === 'string' ? [item, null, false] : [item.text, item.href, item.isDisabled]; + return ( + + {text} + + ); + })} + + ); +}; diff --git a/packages/react-core/src/components/ContextSelector/examples/ContextSelectorWithFooter.tsx b/packages/react-core/src/components/ContextSelector/examples/ContextSelectorWithFooter.tsx new file mode 100644 index 00000000000..d647803763a --- /dev/null +++ b/packages/react-core/src/components/ContextSelector/examples/ContextSelectorWithFooter.tsx @@ -0,0 +1,91 @@ +import React from 'react'; +import { Button, ContextSelector, ContextSelectorItem, ContextSelectorFooter } from '@patternfly/react-core'; + +export const FooterContextSelector: React.FunctionComponent = () => { + const items = [ + { + text: 'Link', + href: '#' + }, + 'Action', + { + text: 'Disabled link', + href: '#', + isDisabled: true + }, + { + text: 'Disabled action', + isDisabled: true + }, + 'My project', + 'OpenShift cluster', + 'Production Ansible', + 'AWS', + 'Azure', + 'My project 2', + 'OpenShift cluster ', + 'Production Ansible 2 ', + 'AWS 2', + 'Azure 2' + ]; + const firstItemText = typeof items[0] === 'string' ? items[0] : items[0].text; + const [isOpen, setOpen] = React.useState(false); + const [selected, setSelected] = React.useState(firstItemText); + const [searchValue, setSearchValue] = React.useState(''); + const [filteredItems, setFilteredItems] = React.useState(items); + + const onToggle = (event: any, isOpen: boolean) => { + setOpen(isOpen); + }; + + const onSelect = (event: any, value: React.ReactNode) => { + setSelected(value as string); + setOpen(!isOpen); + }; + + const onSearchInputChange = (value: string) => { + setSearchValue(value); + }; + + const onSearchButtonClick = (_event: React.SyntheticEvent) => { + const filtered = + searchValue === '' + ? items + : items.filter(item => { + const str = typeof item === 'string' ? item : item.text; + return str.toLowerCase().indexOf(searchValue.toLowerCase()) !== -1; + }); + + setFilteredItems(filtered || []); + }; + + return ( + + + + } + > + {filteredItems.map((item, index) => { + const [text = null, href = null, isDisabled] = + typeof item === 'string' ? [item, null, false] : [item.text, item.href, item.isDisabled]; + return ( + + {text || item} + + ); + })} + + ); +}; From adcff23c8732ac1f3ba23779a517adfb57ac821f Mon Sep 17 00:00:00 2001 From: jenny-s51 Date: Mon, 4 Apr 2022 14:03:28 -0400 Subject: [PATCH 2/2] rename function components to match file names --- .../ContextSelector/examples/ContextSelectorBasic.tsx | 2 +- .../ContextSelector/examples/ContextSelectorPlainText.tsx | 2 +- .../ContextSelector/examples/ContextSelectorWithFooter.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-core/src/components/ContextSelector/examples/ContextSelectorBasic.tsx b/packages/react-core/src/components/ContextSelector/examples/ContextSelectorBasic.tsx index e45c150baba..8f5cc91db24 100644 --- a/packages/react-core/src/components/ContextSelector/examples/ContextSelectorBasic.tsx +++ b/packages/react-core/src/components/ContextSelector/examples/ContextSelectorBasic.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { ContextSelector, ContextSelectorItem } from '@patternfly/react-core'; -export const SimpleContextSelector: React.FunctionComponent = () => { +export const ContextSelectorBasic: React.FunctionComponent = () => { const items = [ { text: 'Link', diff --git a/packages/react-core/src/components/ContextSelector/examples/ContextSelectorPlainText.tsx b/packages/react-core/src/components/ContextSelector/examples/ContextSelectorPlainText.tsx index f37db16b134..2a626280d19 100644 --- a/packages/react-core/src/components/ContextSelector/examples/ContextSelectorPlainText.tsx +++ b/packages/react-core/src/components/ContextSelector/examples/ContextSelectorPlainText.tsx @@ -28,7 +28,7 @@ const items = [ 'Azure 2' ]; -export const PlainTextContextSelector: React.FunctionComponent = () => { +export const ContextSelectorPlainText: React.FunctionComponent = () => { const firstItemText = typeof items[0] === 'string' ? items[0] : items[0].text; const [isOpen, setOpen] = React.useState(false); const [selected, setSelected] = React.useState(firstItemText); diff --git a/packages/react-core/src/components/ContextSelector/examples/ContextSelectorWithFooter.tsx b/packages/react-core/src/components/ContextSelector/examples/ContextSelectorWithFooter.tsx index d647803763a..422f97d893d 100644 --- a/packages/react-core/src/components/ContextSelector/examples/ContextSelectorWithFooter.tsx +++ b/packages/react-core/src/components/ContextSelector/examples/ContextSelectorWithFooter.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Button, ContextSelector, ContextSelectorItem, ContextSelectorFooter } from '@patternfly/react-core'; -export const FooterContextSelector: React.FunctionComponent = () => { +export const ContextSelectorWithFooter: React.FunctionComponent = () => { const items = [ { text: 'Link',