From b8a46054beaf37671deada4fc6a462cd7cedba09 Mon Sep 17 00:00:00 2001 From: Jeff Puzzo Date: Wed, 19 Jan 2022 13:32:17 -0500 Subject: [PATCH 1/3] chore(ApplicationLauncher): Convert examples to typescript --- packages/react-core/index.d.ts | 4 + .../examples/ApplicationLauncher.md | 588 +----------------- .../examples/ApplicationLauncherBasic.tsx | 23 + .../ApplicationLauncherCustomIcon.tsx | 32 + .../examples/ApplicationLauncherDisabled.tsx | 25 + .../ApplicationLauncherFavoritesAndSearch.tsx | 108 ++++ .../examples/ApplicationLauncherMenu.tsx | 31 + .../ApplicationLauncherRightAlign.tsx | 32 + .../ApplicationLauncherRouterLink.tsx | 50 ++ .../ApplicationLauncherSectionsAndIcons.tsx | 47 ++ .../examples/ApplicationLauncherTooltip.tsx | 35 ++ .../examples/ApplicationLauncherTopAlign.tsx | 31 + 12 files changed, 429 insertions(+), 577 deletions(-) create mode 100644 packages/react-core/index.d.ts create mode 100644 packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherBasic.tsx create mode 100644 packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherCustomIcon.tsx create mode 100644 packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherDisabled.tsx create mode 100644 packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherFavoritesAndSearch.tsx create mode 100644 packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherMenu.tsx create mode 100644 packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherRightAlign.tsx create mode 100644 packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherRouterLink.tsx create mode 100644 packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherSectionsAndIcons.tsx create mode 100644 packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherTooltip.tsx create mode 100644 packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherTopAlign.tsx diff --git a/packages/react-core/index.d.ts b/packages/react-core/index.d.ts new file mode 100644 index 00000000000..cdb2b1a9a23 --- /dev/null +++ b/packages/react-core/index.d.ts @@ -0,0 +1,4 @@ +declare module '*.svg' { + const content: string; + export default content; +} diff --git a/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncher.md b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncher.md index a008f00bf58..cfe09d504c5 100644 --- a/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncher.md +++ b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncher.md @@ -8,7 +8,7 @@ ouia: true import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon'; import { Link } from '@reach/router'; -import pfIcon from './pf-logo-small.svg'; +import pfLogoSm from './pf-logo-small.svg'; Note: Application launcher is built on Dropdown, for extended API go to [Dropdown](/documentation/react/components/dropdown) documentation. To add a tooltip, use the `tooltip` prop and optionally add more tooltip props by using `tooltipProps`. For more tooltip information go to [Tooltip](/documentation/react/components/tooltip). @@ -17,616 +17,50 @@ To add a tooltip, use the `tooltip` prop and optionally add more tooltip props b ### Basic -```js -import React from 'react'; -import { ApplicationLauncher, ApplicationLauncherItem } from '@patternfly/react-core'; - -class SimpleApplicationLauncher extends React.Component { - constructor(props) { - super(props); - this.state = { - isOpen: false - }; - this.onToggle = isOpen => { - this.setState({ - isOpen - }); - }; - this.onSelect = event => { - this.setState({ - isOpen: !this.state.isOpen - }); - }; - } - - render() { - const { isOpen } = this.state; - const appLauncherItems = [ - - Application 1 (anchor link) - , - alert('Clicked item 2')}> - Application 2 (button with onClick) - , - - Unavailable application - - ]; - return ( - - ); - } -} +```ts file="./ApplicationLauncherBasic.tsx" ``` ### Router link -```js -import React from 'react'; -import { Link } from '@reach/router'; -import { ApplicationLauncher, ApplicationLauncherItem, ApplicationLauncherContent, Text } from '@patternfly/react-core'; - -class SimpleApplicationLauncher extends React.Component { - constructor(props) { - super(props); - this.state = { - isOpen: false - }; - this.onToggle = isOpen => { - this.setState({ - isOpen - }); - }; - this.onSelect = event => { - this.setState({ - isOpen: !this.state.isOpen - }); - }; - } - - render() { - const { isOpen } = this.state; - const icon = ; - const exampleStyle = { - color: 'var(--pf-c-app-launcher__menu-item--Color)', - textDecoration: 'none' - }; - const appLauncherItems = [ - - @reach/router Link - - } - />, - - @reach/router Link with icon - - } - />, - - Application 1 (anchor link) - , - alert('Clicked item 2')}> - Application 2 (button with onClick) - , - - Unavailable application - - ]; - return ( - - ); - } -} +```ts file="./ApplicationLauncherRouterLink.tsx" ``` ### Disabled -```js -import React from 'react'; -import { ApplicationLauncher, ApplicationLauncherItem } from '@patternfly/react-core'; - -class SimpleApplicationLauncher extends React.Component { - constructor(props) { - super(props); - this.state = { - isOpen: false - }; - this.onToggle = isOpen => { - this.setState({ - isOpen - }); - }; - this.onSelect = event => { - this.setState({ - isOpen: !this.state.isOpen - }); - }; - } - - render() { - const { isOpen } = this.state; - const appLauncherItems = [ - - Application 1 (anchor link) - , - alert('Clicked item 2')}> - Application 2 (button with onClick) - , - - Unavailable application - - ]; - return ( - - ); - } -} +```ts file="./ApplicationLauncherDisabled.tsx" ``` ### Aligned right -```js -import React from 'react'; -import { ApplicationLauncher, ApplicationLauncherItem } from '@patternfly/react-core'; -import { DropdownPosition } from '../Dropdown'; - -class SimpleApplicationLauncher extends React.Component { - constructor(props) { - super(props); - this.state = { - isOpen: false - }; - this.onToggle = isOpen => { - this.setState({ - isOpen - }); - }; - this.onSelect = event => { - this.setState({ - isOpen: !this.state.isOpen - }); - }; - } - - render() { - const { isOpen } = this.state; - const appLauncherItems = [ - - Application 1 (anchor link) - , - alert('Clicked item 2')}> - Application 2 (button with onClick) - , - - Unavailable application - - ]; - const style = { marginLeft: 'calc(100% - 46px)' }; - return ( - - ); - } -} +```ts file="./ApplicationLauncherRightAlign.tsx" ``` ### Aligned top -```js -import React from 'react'; -import { ApplicationLauncher, ApplicationLauncherItem } from '@patternfly/react-core'; -import { DropdownDirection } from '../Dropdown'; - -class SimpleApplicationLauncher extends React.Component { - constructor(props) { - super(props); - this.state = { - isOpen: false - }; - this.onToggle = isOpen => { - this.setState({ - isOpen - }); - }; - this.onSelect = event => { - this.setState({ - isOpen: !this.state.isOpen - }); - }; - } - - render() { - const { isOpen } = this.state; - const appLauncherItems = [ - - Application 1 (anchor link) - , - alert('Clicked item 2')}> - Application 2 (button with onClick) - , - - Unavailable application - - ]; - return ( - - ); - } -} +```ts file="./ApplicationLauncherTopAlign.tsx" ``` ### With tooltip -```js -import React from 'react'; -import { ApplicationLauncher, ApplicationLauncherItem } from '@patternfly/react-core'; - -class TooltipApplicationLauncher extends React.Component { - constructor(props) { - super(props); - this.state = { - isOpen: false - }; - this.onToggle = isOpen => { - this.setState({ - isOpen - }); - }; - this.onSelect = event => { - this.setState({ - isOpen: !this.state.isOpen - }); - }; - } - - render() { - const { isOpen } = this.state; - const appLauncherItems = [ - Launch Application 1}> - Application 1 (anchor link) - , - Launch Application 2} - tooltipProps={{ position: 'right' }} - onClick={() => alert('Clicked item 2')} - > - Application 2 (onClick) - , - Launch Application 3} - tooltipProps={{ position: 'bottom' }} - onClick={() => alert('Clicked item 3')} - > - Application 3 (onClick) - - ]; - return ( - - ); - } -} +```ts file="./ApplicationLauncherTooltip.tsx" ``` ### With sections and icons -```js -import React from 'react'; -import { - ApplicationLauncher, - ApplicationLauncherItem, - ApplicationLauncherGroup, - ApplicationLauncherSeparator -} from '@patternfly/react-core'; -import pfIcon from './examples/pf-logo-small.svg'; - -class ApplicationLauncherSections extends React.Component { - constructor(props) { - super(props); - this.state = { - isOpen: false - }; - this.onToggle = isOpen => { - this.setState({ - isOpen - }); - }; - this.onSelect = event => { - this.setState({ - isOpen: !this.state.isOpen - }); - }; - } - - render() { - const { isOpen } = this.state; - const icon = ; - const appLauncherItems = [ - - - Item without group title - - - , - - - Group 2 button - - - Group 2 anchor link - - - , - - - Group 3 button - - - Group 3 anchor link - - - ]; - return ( - - ); - } -} +```ts file="./ApplicationLauncherSectionsAndIcons.tsx" ``` ### With favorites and search -```js -import React from 'react'; -import { - ApplicationLauncher, - ApplicationLauncherItem, - ApplicationLauncherGroup, - ApplicationLauncherSeparator -} from '@patternfly/react-core'; -import pfIcon from './examples/pf-logo-small.svg'; - -class ApplicationLauncherFavorites extends React.Component { - constructor(props) { - super(props); - this.state = { - isOpen: false, - favorites: [], - filteredItems: null - }; - - const icon = ; - this.appLauncherItems = [ - - - Item without group title - - - , - - - Group 2 button - - - Group 2 anchor link - - - , - - - Group 3 button - - - Group 3 anchor link - - - ]; - - this.onToggle = isOpen => { - this.setState({ - isOpen - }); - }; - this.onSelect = event => { - this.setState({ - isOpen: !this.state.isOpen - }); - }; - this.onFavorite = (itemId, isFavorite) => { - if (isFavorite) { - this.setState({ - favorites: this.state.favorites.filter(id => id !== itemId) - }); - } else - this.setState({ - favorites: [...this.state.favorites, itemId] - }); - }; - this.onSearch = textInput => { - if (textInput === '') { - this.setState({ - filteredItems: null - }); - } else { - let filteredGroups = this.appLauncherItems - .map(group => { - let filteredGroup = React.cloneElement(group, { - children: group.props.children.filter(item => { - if (item.type === ApplicationLauncherSeparator) return item; - return item.props.children.toLowerCase().includes(textInput.toLowerCase()); - }) - }); - if ( - filteredGroup.props.children.length > 0 && - filteredGroup.props.children[0].type !== ApplicationLauncherSeparator - ) - return filteredGroup; - }) - .filter(newGroup => newGroup); - - if (filteredGroups.length > 0) { - let lastGroup = filteredGroups.pop(); - lastGroup = React.cloneElement(lastGroup, { - children: lastGroup.props.children.filter(item => item.type !== ApplicationLauncherSeparator) - }); - filteredGroups.push(lastGroup); - } - - this.setState({ - filteredItems: filteredGroups - }); - } - }; - } - - render() { - const { isOpen, favorites, filteredItems } = this.state; - return ( - - ); - } -} +```ts file="./ApplicationLauncherFavoritesAndSearch.tsx" ``` ### With custom icon -```js -import React from 'react'; -import { ApplicationLauncher, ApplicationLauncherItem } from '@patternfly/react-core'; -import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon'; - -class ApplicationLauncheIcon extends React.Component { - constructor(props) { - super(props); - this.state = { - isOpen: false - }; - this.onToggle = isOpen => { - this.setState({ - isOpen - }); - }; - this.onSelect = event => { - this.setState({ - isOpen: !this.state.isOpen - }); - }; - } - - render() { - const { isOpen } = this.state; - const appLauncherItems = [ - - Application 1 (anchor link) - , - alert('Clicked item 2')}> - Application 2 (button with onClick) - , - - Unavailable application - - ]; - return ( - } - /> - ); - } -} +```ts file="./ApplicationLauncherCustomIcon.tsx" ``` ### Basic with menu appended to document body -```js -import React from 'react'; -import { ApplicationLauncher, ApplicationLauncherItem } from '@patternfly/react-core'; - -class ApplicationLauncherDocumentBody extends React.Component { - constructor(props) { - super(props); - this.state = { - isOpen: false - }; - this.onToggle = isOpen => { - this.setState({ - isOpen - }); - }; - this.onSelect = event => { - this.setState({ - isOpen: !this.state.isOpen - }); - }; - } - - render() { - const { isOpen } = this.state; - const appLauncherItems = [ - - Application 1 (anchor link) - , - alert('Clicked item 2')}> - Application 2 (button with onClick) - , - - Unavailable application - - ]; - return ( - document.body} - onSelect={this.onSelect} - onToggle={this.onToggle} - isOpen={isOpen} - items={appLauncherItems} - /> - ); - } -} +```ts file="./ApplicationLauncherMenu.tsx" ``` diff --git a/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherBasic.tsx b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherBasic.tsx new file mode 100644 index 00000000000..40a11268ed4 --- /dev/null +++ b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherBasic.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import { ApplicationLauncher, ApplicationLauncherItem } from '@patternfly/react-core'; + +const appLauncherItems: React.ReactElement[] = [ + + Application 1 (anchor link) + , + alert('Clicked item 2')}> + Application 2 (button with onClick) + , + + Unavailable application + +]; + +export const ApplicationLauncherBasic: React.FunctionComponent = () => { + const [isOpen, setIsOpen] = React.useState(false); + + const onToggle = React.useCallback((isOpen: boolean) => setIsOpen(isOpen), []); + const onSelect = React.useCallback((_event: any) => setIsOpen(prevIsOpen => !prevIsOpen), []); + + return ; +}; diff --git a/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherCustomIcon.tsx b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherCustomIcon.tsx new file mode 100644 index 00000000000..279c7180a9e --- /dev/null +++ b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherCustomIcon.tsx @@ -0,0 +1,32 @@ +import React from 'react'; +import { ApplicationLauncher, ApplicationLauncherItem } from '@patternfly/react-core'; +import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon'; + +const appLauncherItems: React.ReactElement[] = [ + + Application 1 (anchor link) + , + alert('Clicked item 2')}> + Application 2 (button with onClick) + , + + Unavailable application + +]; + +export const ApplicationLauncherCustomIcon: React.FunctionComponent = () => { + const [isOpen, setIsOpen] = React.useState(false); + + const onToggle = React.useCallback((isOpen: boolean) => setIsOpen(isOpen), []); + const onSelect = React.useCallback((_event: any) => setIsOpen(prevIsOpen => !prevIsOpen), []); + + return ( + } + /> + ); +}; diff --git a/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherDisabled.tsx b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherDisabled.tsx new file mode 100644 index 00000000000..e75b2a5c213 --- /dev/null +++ b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherDisabled.tsx @@ -0,0 +1,25 @@ +import React from 'react'; +import { ApplicationLauncher, ApplicationLauncherItem } from '@patternfly/react-core'; + +const appLauncherItems: React.ReactElement[] = [ + + Application 1 (anchor link) + , + alert('Clicked item 2')}> + Application 2 (button with onClick) + , + + Unavailable application + +]; + +export const ApplicationLauncherDisabled: React.FunctionComponent = () => { + const [isOpen, setIsOpen] = React.useState(false); + + const onToggle = React.useCallback((isOpen: boolean) => setIsOpen(isOpen), []); + const onSelect = React.useCallback((_event: any) => setIsOpen(prevIsOpen => !prevIsOpen), []); + + return ( + + ); +}; diff --git a/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherFavoritesAndSearch.tsx b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherFavoritesAndSearch.tsx new file mode 100644 index 00000000000..07a94e5180e --- /dev/null +++ b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherFavoritesAndSearch.tsx @@ -0,0 +1,108 @@ +import React from 'react'; +import { + ApplicationLauncher, + ApplicationLauncherItem, + ApplicationLauncherGroup, + ApplicationLauncherSeparator +} from '@patternfly/react-core'; +import pfLogoSm from './pf-logo-small.svg'; + +const icon: JSX.Element = ; + +const appLauncherItems: React.ReactElement[] = [ + + + Item without group title + + + , + + + Group 2 button + + + Group 2 anchor link + + + , + + + Group 3 button + + + Group 3 anchor link + + +]; + +export const ApplicationLauncherFavoritesAndSearch: React.FunctionComponent = () => { + const [isOpen, setIsOpen] = React.useState(false); + const [favorites, setFavorites] = React.useState([]); + const [filteredItems, setFilteredItems] = React.useState(null); + + const onToggle = React.useCallback((isOpen: boolean) => setIsOpen(isOpen), []); + + const onFavorite = React.useCallback( + (itemId: string, isFavorite: boolean) => { + let updatedFavorites: string[] = [...favorites, itemId]; + + if (isFavorite) { + updatedFavorites = favorites.filter(id => id !== itemId); + } + + setFavorites(updatedFavorites); + }, + [favorites] + ); + + const onSearch = React.useCallback((textInput: string) => { + if (textInput === '') { + setFilteredItems(null); + } else { + const filteredGroups = appLauncherItems + .map((group: React.ReactElement) => { + const filteredGroup = React.cloneElement(group, { + children: group.props.children.filter((item: React.ReactElement) => { + if (item.type === ApplicationLauncherSeparator) { + return item; + } + + return item.props.children.toLowerCase().includes(textInput.toLowerCase()); + }) + }); + + if ( + filteredGroup.props.children.length > 0 && + filteredGroup.props.children[0].type !== ApplicationLauncherSeparator + ) { + return filteredGroup; + } + }) + .filter(newGroup => newGroup); + + if (filteredGroups.length > 0) { + let lastGroup = filteredGroups.pop(); + + lastGroup = React.cloneElement(lastGroup, { + children: lastGroup.props.children.filter(item => item.type !== ApplicationLauncherSeparator) + }); + + filteredGroups.push(lastGroup); + } + + setFilteredItems(filteredGroups); + } + }, []); + + return ( + + ); +}; diff --git a/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherMenu.tsx b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherMenu.tsx new file mode 100644 index 00000000000..e781ef6edec --- /dev/null +++ b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherMenu.tsx @@ -0,0 +1,31 @@ +import React from 'react'; +import { ApplicationLauncher, ApplicationLauncherItem } from '@patternfly/react-core'; + +const appLauncherItems: React.ReactElement[] = [ + + Application 1 (anchor link) + , + alert('Clicked item 2')}> + Application 2 (button with onClick) + , + + Unavailable application + +]; + +export const ApplicationLauncherMenu: React.FunctionComponent = () => { + const [isOpen, setIsOpen] = React.useState(false); + + const onToggle = React.useCallback((isOpen: boolean) => setIsOpen(isOpen), []); + const onSelect = React.useCallback((_event: any) => setIsOpen(prevIsOpen => !prevIsOpen), []); + + return ( + document.body} + onSelect={onSelect} + onToggle={onToggle} + isOpen={isOpen} + items={appLauncherItems} + /> + ); +}; diff --git a/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherRightAlign.tsx b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherRightAlign.tsx new file mode 100644 index 00000000000..aa5e14b8358 --- /dev/null +++ b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherRightAlign.tsx @@ -0,0 +1,32 @@ +import React from 'react'; +import { ApplicationLauncher, ApplicationLauncherItem, DropdownPosition } from '@patternfly/react-core'; + +const appLauncherItems: React.ReactElement[] = [ + + Application 1 (anchor link) + , + alert('Clicked item 2')}> + Application 2 (button with onClick) + , + + Unavailable application + +]; + +export const ApplicationLauncherRightAlign: React.FunctionComponent = () => { + const [isOpen, setIsOpen] = React.useState(false); + + const onToggle = React.useCallback((isOpen: boolean) => setIsOpen(isOpen), []); + const onSelect = React.useCallback((_event: any) => setIsOpen(prevIsOpen => !prevIsOpen), []); + + return ( + + ); +}; diff --git a/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherRouterLink.tsx b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherRouterLink.tsx new file mode 100644 index 00000000000..fa8c478d868 --- /dev/null +++ b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherRouterLink.tsx @@ -0,0 +1,50 @@ +import React from 'react'; +import { Link } from '@reach/router'; +import { ApplicationLauncher, ApplicationLauncherItem, ApplicationLauncherContent } from '@patternfly/react-core'; +import pfLogoSm from './pf-logo-small.svg'; + +const icon: JSX.Element = ; + +const linkStyle: React.CSSProperties = { + color: 'var(--pf-c-app-launcher__menu-item--Color)', + textDecoration: 'none' +}; + +const appLauncherItems: React.ReactElement[] = [ + + @reach/router Link + + } + />, + + @reach/router Link with icon + + } + />, + + Application 1 (anchor link) + , + alert('Clicked item 2')}> + Application 2 (button with onClick) + , + + Unavailable application + +]; + +export const ApplicationLauncherRouterLink: React.FunctionComponent = () => { + const [isOpen, setIsOpen] = React.useState(false); + + const onToggle = React.useCallback((isOpen: boolean) => setIsOpen(isOpen), []); + const onSelect = React.useCallback((_event: any) => setIsOpen(prevIsOpen => !prevIsOpen), []); + + return ; +}; diff --git a/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherSectionsAndIcons.tsx b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherSectionsAndIcons.tsx new file mode 100644 index 00000000000..682bc4d5edc --- /dev/null +++ b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherSectionsAndIcons.tsx @@ -0,0 +1,47 @@ +import React from 'react'; +import { + ApplicationLauncher, + ApplicationLauncherItem, + ApplicationLauncherGroup, + ApplicationLauncherSeparator +} from '@patternfly/react-core'; +import pfLogoSm from './pf-logo-small.svg'; + +const icon = ; + +const appLauncherItems: React.ReactElement[] = [ + + + Item without group title + + + , + + + Group 2 button + + + Group 2 anchor link + + + , + + + Group 3 button + + + Group 3 anchor link + + +]; + +export const ApplicationLauncherSectionsAndIcons: React.FunctionComponent = () => { + const [isOpen, setIsOpen] = React.useState(false); + + const onToggle = React.useCallback((isOpen: boolean) => setIsOpen(isOpen), []); + const onSelect = React.useCallback((_event: any) => setIsOpen(prevIsOpen => !prevIsOpen), []); + + return ( + + ); +}; diff --git a/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherTooltip.tsx b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherTooltip.tsx new file mode 100644 index 00000000000..c2da26419e5 --- /dev/null +++ b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherTooltip.tsx @@ -0,0 +1,35 @@ +import React from 'react'; +import { ApplicationLauncher, ApplicationLauncherItem } from '@patternfly/react-core'; + +const appLauncherItems: React.ReactElement[] = [ + Launch Application 1}> + Application 1 (anchor link) + , + Launch Application 2} + tooltipProps={{ position: 'right' }} + onClick={() => alert('Clicked item 2')} + > + Application 2 (onClick) + , + Launch Application 3} + tooltipProps={{ position: 'bottom' }} + onClick={() => alert('Clicked item 3')} + > + Application 3 (onClick) + +]; + +export const ApplicationLauncherTooltip: React.FunctionComponent = () => { + const [isOpen, setIsOpen] = React.useState(false); + + const onToggle = React.useCallback((isOpen: boolean) => setIsOpen(isOpen), []); + const onSelect = React.useCallback((_event: any) => setIsOpen(prevIsOpen => !prevIsOpen), []); + + return ; +}; diff --git a/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherTopAlign.tsx b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherTopAlign.tsx new file mode 100644 index 00000000000..50a34ee3da8 --- /dev/null +++ b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherTopAlign.tsx @@ -0,0 +1,31 @@ +import React from 'react'; +import { ApplicationLauncher, ApplicationLauncherItem, DropdownDirection } from '@patternfly/react-core'; + +const appLauncherItems: React.ReactElement[] = [ + + Application 1 (anchor link) + , + alert('Clicked item 2')}> + Application 2 (button with onClick) + , + + Unavailable application + +]; + +export const ApplicationLauncherTopAlign: React.FunctionComponent = () => { + const [isOpen, setIsOpen] = React.useState(false); + + const onToggle = React.useCallback((isOpen: boolean) => setIsOpen(isOpen), []); + const onSelect = React.useCallback((_event: any) => setIsOpen(prevIsOpen => !prevIsOpen), []); + + return ( + + ); +}; From 68813581bd3a3d47cef89339b89fb665365c9a76 Mon Sep 17 00:00:00 2001 From: Jeff Puzzo Date: Thu, 20 Jan 2022 14:33:38 -0500 Subject: [PATCH 2/3] remove unnecessary memoizations/types --- .../Alert/examples/AlertAsyncLiveRegion.tsx | 2 +- .../examples/ApplicationLauncherBasic.tsx | 6 ++--- .../ApplicationLauncherCustomIcon.tsx | 6 ++--- .../examples/ApplicationLauncherDisabled.tsx | 6 ++--- .../ApplicationLauncherFavoritesAndSearch.tsx | 23 ++++++++----------- .../examples/ApplicationLauncherMenu.tsx | 6 ++--- .../ApplicationLauncherRightAlign.tsx | 6 ++--- .../ApplicationLauncherRouterLink.tsx | 6 ++--- .../ApplicationLauncherSectionsAndIcons.tsx | 6 ++--- .../examples/ApplicationLauncherTooltip.tsx | 6 ++--- .../examples/ApplicationLauncherTopAlign.tsx | 6 ++--- 11 files changed, 38 insertions(+), 41 deletions(-) diff --git a/packages/react-core/src/components/Alert/examples/AlertAsyncLiveRegion.tsx b/packages/react-core/src/components/Alert/examples/AlertAsyncLiveRegion.tsx index 39517dc90f6..c29cb0b7819 100644 --- a/packages/react-core/src/components/Alert/examples/AlertAsyncLiveRegion.tsx +++ b/packages/react-core/src/components/Alert/examples/AlertAsyncLiveRegion.tsx @@ -9,7 +9,7 @@ interface AlertInfo { export const AsyncLiveRegionAlert: React.FunctionComponent = () => { const [alerts, setAlerts] = React.useState([]); - const [isActive, setIsActive] = React.useState(false); + const [isActive, setIsActive] = React.useState(false); const getUniqueId: () => number = () => new Date().getTime(); const addAlert = (alertInfo: AlertInfo) => { diff --git a/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherBasic.tsx b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherBasic.tsx index 40a11268ed4..ca4f6cc4422 100644 --- a/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherBasic.tsx +++ b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherBasic.tsx @@ -14,10 +14,10 @@ const appLauncherItems: React.ReactElement[] = [ ]; export const ApplicationLauncherBasic: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); + const [isOpen, setIsOpen] = React.useState(false); - const onToggle = React.useCallback((isOpen: boolean) => setIsOpen(isOpen), []); - const onSelect = React.useCallback((_event: any) => setIsOpen(prevIsOpen => !prevIsOpen), []); + const onToggle = (isOpen: boolean) => setIsOpen(isOpen); + const onSelect = (_event: any) => setIsOpen(prevIsOpen => !prevIsOpen); return ; }; diff --git a/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherCustomIcon.tsx b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherCustomIcon.tsx index 279c7180a9e..a240888c483 100644 --- a/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherCustomIcon.tsx +++ b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherCustomIcon.tsx @@ -15,10 +15,10 @@ const appLauncherItems: React.ReactElement[] = [ ]; export const ApplicationLauncherCustomIcon: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); + const [isOpen, setIsOpen] = React.useState(false); - const onToggle = React.useCallback((isOpen: boolean) => setIsOpen(isOpen), []); - const onSelect = React.useCallback((_event: any) => setIsOpen(prevIsOpen => !prevIsOpen), []); + const onToggle = (isOpen: boolean) => setIsOpen(isOpen); + const onSelect = (_event: any) => setIsOpen(prevIsOpen => !prevIsOpen); return ( { - const [isOpen, setIsOpen] = React.useState(false); + const [isOpen, setIsOpen] = React.useState(false); - const onToggle = React.useCallback((isOpen: boolean) => setIsOpen(isOpen), []); - const onSelect = React.useCallback((_event: any) => setIsOpen(prevIsOpen => !prevIsOpen), []); + const onToggle = (isOpen: boolean) => setIsOpen(isOpen); + const onSelect = (_event: any) => setIsOpen(prevIsOpen => !prevIsOpen); return ( diff --git a/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherFavoritesAndSearch.tsx b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherFavoritesAndSearch.tsx index 07a94e5180e..b8c255369fe 100644 --- a/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherFavoritesAndSearch.tsx +++ b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherFavoritesAndSearch.tsx @@ -40,22 +40,19 @@ export const ApplicationLauncherFavoritesAndSearch: React.FunctionComponent = () const [favorites, setFavorites] = React.useState([]); const [filteredItems, setFilteredItems] = React.useState(null); - const onToggle = React.useCallback((isOpen: boolean) => setIsOpen(isOpen), []); + const onToggle = (isOpen: boolean) => setIsOpen(isOpen); - const onFavorite = React.useCallback( - (itemId: string, isFavorite: boolean) => { - let updatedFavorites: string[] = [...favorites, itemId]; + const onFavorite = (itemId: string, isFavorite: boolean) => { + let updatedFavorites: string[] = [...favorites, itemId]; - if (isFavorite) { - updatedFavorites = favorites.filter(id => id !== itemId); - } + if (isFavorite) { + updatedFavorites = favorites.filter(id => id !== itemId); + } - setFavorites(updatedFavorites); - }, - [favorites] - ); + setFavorites(updatedFavorites); + }; - const onSearch = React.useCallback((textInput: string) => { + const onSearch = (textInput: string) => { if (textInput === '') { setFilteredItems(null); } else { @@ -92,7 +89,7 @@ export const ApplicationLauncherFavoritesAndSearch: React.FunctionComponent = () setFilteredItems(filteredGroups); } - }, []); + }; return ( { - const [isOpen, setIsOpen] = React.useState(false); + const [isOpen, setIsOpen] = React.useState(false); - const onToggle = React.useCallback((isOpen: boolean) => setIsOpen(isOpen), []); - const onSelect = React.useCallback((_event: any) => setIsOpen(prevIsOpen => !prevIsOpen), []); + const onToggle = (isOpen: boolean) => setIsOpen(isOpen); + const onSelect = (_event: any) => setIsOpen(prevIsOpen => !prevIsOpen); return ( { - const [isOpen, setIsOpen] = React.useState(false); + const [isOpen, setIsOpen] = React.useState(false); - const onToggle = React.useCallback((isOpen: boolean) => setIsOpen(isOpen), []); - const onSelect = React.useCallback((_event: any) => setIsOpen(prevIsOpen => !prevIsOpen), []); + const onToggle = (isOpen: boolean) => setIsOpen(isOpen); + const onSelect = (_event: any) => setIsOpen(prevIsOpen => !prevIsOpen); return ( { - const [isOpen, setIsOpen] = React.useState(false); + const [isOpen, setIsOpen] = React.useState(false); - const onToggle = React.useCallback((isOpen: boolean) => setIsOpen(isOpen), []); - const onSelect = React.useCallback((_event: any) => setIsOpen(prevIsOpen => !prevIsOpen), []); + const onToggle = (isOpen: boolean) => setIsOpen(isOpen); + const onSelect = (_event: any) => setIsOpen(prevIsOpen => !prevIsOpen); return ; }; diff --git a/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherSectionsAndIcons.tsx b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherSectionsAndIcons.tsx index 682bc4d5edc..1e08c340dd1 100644 --- a/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherSectionsAndIcons.tsx +++ b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherSectionsAndIcons.tsx @@ -36,10 +36,10 @@ const appLauncherItems: React.ReactElement[] = [ ]; export const ApplicationLauncherSectionsAndIcons: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); + const [isOpen, setIsOpen] = React.useState(false); - const onToggle = React.useCallback((isOpen: boolean) => setIsOpen(isOpen), []); - const onSelect = React.useCallback((_event: any) => setIsOpen(prevIsOpen => !prevIsOpen), []); + const onToggle = (isOpen: boolean) => setIsOpen(isOpen); + const onSelect = (_event: any) => setIsOpen(prevIsOpen => !prevIsOpen); return ( diff --git a/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherTooltip.tsx b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherTooltip.tsx index c2da26419e5..77b188c7d62 100644 --- a/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherTooltip.tsx +++ b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherTooltip.tsx @@ -26,10 +26,10 @@ const appLauncherItems: React.ReactElement[] = [ ]; export const ApplicationLauncherTooltip: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); + const [isOpen, setIsOpen] = React.useState(false); - const onToggle = React.useCallback((isOpen: boolean) => setIsOpen(isOpen), []); - const onSelect = React.useCallback((_event: any) => setIsOpen(prevIsOpen => !prevIsOpen), []); + const onToggle = (isOpen: boolean) => setIsOpen(isOpen); + const onSelect = (_event: any) => setIsOpen(prevIsOpen => !prevIsOpen); return ; }; diff --git a/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherTopAlign.tsx b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherTopAlign.tsx index 50a34ee3da8..24eaa1bd7e1 100644 --- a/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherTopAlign.tsx +++ b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherTopAlign.tsx @@ -14,10 +14,10 @@ const appLauncherItems: React.ReactElement[] = [ ]; export const ApplicationLauncherTopAlign: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); + const [isOpen, setIsOpen] = React.useState(false); - const onToggle = React.useCallback((isOpen: boolean) => setIsOpen(isOpen), []); - const onSelect = React.useCallback((_event: any) => setIsOpen(prevIsOpen => !prevIsOpen), []); + const onToggle = (isOpen: boolean) => setIsOpen(isOpen); + const onSelect = (_event: any) => setIsOpen(prevIsOpen => !prevIsOpen); return ( Date: Thu, 20 Jan 2022 17:28:34 -0500 Subject: [PATCH 3/3] more renaming --- .../ApplicationLauncher/examples/ApplicationLauncher.md | 6 +++--- ...cherRightAlign.tsx => ApplicationLauncherAlignRight.tsx} | 2 +- ...LauncherTopAlign.tsx => ApplicationLauncherAlignTop.tsx} | 2 +- ...LauncherMenu.tsx => ApplicationLauncherDocumentBody.tsx} | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) rename packages/react-core/src/components/ApplicationLauncher/examples/{ApplicationLauncherRightAlign.tsx => ApplicationLauncherAlignRight.tsx} (94%) rename packages/react-core/src/components/ApplicationLauncher/examples/{ApplicationLauncherTopAlign.tsx => ApplicationLauncherAlignTop.tsx} (94%) rename packages/react-core/src/components/ApplicationLauncher/examples/{ApplicationLauncherMenu.tsx => ApplicationLauncherDocumentBody.tsx} (92%) diff --git a/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncher.md b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncher.md index cfe09d504c5..db5d30e9e52 100644 --- a/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncher.md +++ b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncher.md @@ -32,12 +32,12 @@ To add a tooltip, use the `tooltip` prop and optionally add more tooltip props b ### Aligned right -```ts file="./ApplicationLauncherRightAlign.tsx" +```ts file="./ApplicationLauncherAlignRight.tsx" ``` ### Aligned top -```ts file="./ApplicationLauncherTopAlign.tsx" +```ts file="./ApplicationLauncherAlignTop.tsx" ``` ### With tooltip @@ -62,5 +62,5 @@ To add a tooltip, use the `tooltip` prop and optionally add more tooltip props b ### Basic with menu appended to document body -```ts file="./ApplicationLauncherMenu.tsx" +```ts file="./ApplicationLauncherDocumentBody.tsx" ``` diff --git a/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherRightAlign.tsx b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherAlignRight.tsx similarity index 94% rename from packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherRightAlign.tsx rename to packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherAlignRight.tsx index 5afecd226b4..ecac04ea546 100644 --- a/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherRightAlign.tsx +++ b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherAlignRight.tsx @@ -13,7 +13,7 @@ const appLauncherItems: React.ReactElement[] = [ ]; -export const ApplicationLauncherRightAlign: React.FunctionComponent = () => { +export const ApplicationLauncherAlignRight: React.FunctionComponent = () => { const [isOpen, setIsOpen] = React.useState(false); const onToggle = (isOpen: boolean) => setIsOpen(isOpen); diff --git a/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherTopAlign.tsx b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherAlignTop.tsx similarity index 94% rename from packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherTopAlign.tsx rename to packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherAlignTop.tsx index 24eaa1bd7e1..5bf16cca2c6 100644 --- a/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherTopAlign.tsx +++ b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherAlignTop.tsx @@ -13,7 +13,7 @@ const appLauncherItems: React.ReactElement[] = [ ]; -export const ApplicationLauncherTopAlign: React.FunctionComponent = () => { +export const ApplicationLauncherAlignTop: React.FunctionComponent = () => { const [isOpen, setIsOpen] = React.useState(false); const onToggle = (isOpen: boolean) => setIsOpen(isOpen); diff --git a/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherMenu.tsx b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherDocumentBody.tsx similarity index 92% rename from packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherMenu.tsx rename to packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherDocumentBody.tsx index 6b05fb6bee6..8c86d7bd4f4 100644 --- a/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherMenu.tsx +++ b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherDocumentBody.tsx @@ -13,7 +13,7 @@ const appLauncherItems: React.ReactElement[] = [ ]; -export const ApplicationLauncherMenu: React.FunctionComponent = () => { +export const ApplicationLauncherDocumentBody: React.FunctionComponent = () => { const [isOpen, setIsOpen] = React.useState(false); const onToggle = (isOpen: boolean) => setIsOpen(isOpen);