Merge pull request #2536 from Shopify/funcify-menugroup

[MenuGroup] Converted to a functional component
Shopify · Jan 10, 2020 · 512a9a5 · 512a9a5
2 parents 5223276 + afe03a7
commit 512a9a5
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 43 deletions.
diff --git 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
@@ -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<MenuGroupProps, never> {
-  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 = (
-      <MenuAction
-        disclosure
-        content={title}
-        icon={icon}
-        accessibilityLabel={accessibilityLabel}
-        onAction={this.handleOpen}
-      />
-    );
+  const handleOpen = useCallback(() => {
+    onOpen(title);
+  }, [onOpen, title]);
 
-    return (
-      <Popover
-        active={Boolean(active)}
-        activator={popoverActivator}
-        preferredAlignment="left"
-        onClose={this.handleClose}
-      >
-        <ActionList items={actions} onActionAnyItem={this.handleClose} />
-        {details && <div className={styles.Details}>{details}</div>}
-      </Popover>
-    );
+  if (!actions.length) {
+    return null;
   }
 
-  private handleClose = () => {
-    const {title, onClose} = this.props;
-    onClose(title);
-  };
+  const popoverActivator = (
+    <MenuAction
+      disclosure
+      content={title}
+      icon={icon}
+      accessibilityLabel={accessibilityLabel}
+      onAction={handleOpen}
+    />
+  );
 
-  private handleOpen = () => {
-    const {title, onOpen} = this.props;
-    onOpen(title);
-  };
+  return (
+    <Popover
+      active={Boolean(active)}
+      activator={popoverActivator}
+      preferredAlignment="left"
+      onClose={handleClose}
+    >
+      <ActionList items={actions} onActionAnyItem={handleClose} />
+      {details && <div className={styles.Details}>{details}</div>}
+    </Popover>
+  );
 }