diff --git a/UNRELEASED.md b/UNRELEASED.md index 81d5042d080..b30ecb4d5ec 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -32,6 +32,7 @@ ### Code quality +- Converted `MenuGroup` into a functional component ([#2536](https://github.com/Shopify/polaris-react/pull/2536)) - Converted `Layout` into a functional component ([#2538](https://github.com/Shopify/polaris-react/pull/2538)) - Converted `FormLayout` into a functional component ([#2539](https://github.com/Shopify/polaris-react/pull/2539)) - Converted `Stack` into a functional component ([#2534](https://github.com/Shopify/polaris-react/pull/2534)) diff --git a/src/components/ActionMenu/components/MenuGroup/MenuGroup.tsx b/src/components/ActionMenu/components/MenuGroup/MenuGroup.tsx index 698bb7a01fa..d984a2ceb9e 100644 --- a/src/components/ActionMenu/components/MenuGroup/MenuGroup.tsx +++ b/src/components/ActionMenu/components/MenuGroup/MenuGroup.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {useCallback} from 'react'; import {MenuGroupDescriptor} from '../../../../types'; @@ -19,51 +19,47 @@ export interface MenuGroupProps extends MenuGroupDescriptor { onClose(title: string): void; } -export class MenuGroup extends React.Component { - render() { - const { - accessibilityLabel, - active, - actions, - details, - title, - icon, - } = this.props; - - if (!actions.length) { - return null; - } +export function MenuGroup({ + accessibilityLabel, + active, + actions, + details, + title, + icon, + onClose, + onOpen, +}: MenuGroupProps) { + const handleClose = useCallback(() => { + onClose(title); + }, [onClose, title]); - const popoverActivator = ( - - ); + const handleOpen = useCallback(() => { + onOpen(title); + }, [onOpen, title]); - return ( - - - {details &&
{details}
} -
- ); + if (!actions.length) { + return null; } - private handleClose = () => { - const {title, onClose} = this.props; - onClose(title); - }; + const popoverActivator = ( + + ); - private handleOpen = () => { - const {title, onOpen} = this.props; - onOpen(title); - }; + return ( + + + {details &&
{details}
} +
+ ); }