Merge pull request #2542 from Shopify/funcify-bulkactionbutton

[BulkActionButton] Converted to a functional component

UNRELEASED.md

@@ -24,6 +24,7 @@
 
 ### Code quality
 
+- Converted `BulkActionButton` into a functional component ([#2542](https://github.com/Shopify/polaris-react/pull/2542))
 - Converted `Focus` into a functional component ([#2540](https://github.com/Shopify/polaris-react/pull/2540))
 
 ### Deprecations

src/components/ResourceList/components/BulkActions/components/BulkActionButton/BulkActionButton.tsx

@@ -1,51 +1,46 @@
-import React, {createRef} from 'react';
+import React, {useRef} from 'react';
 import {DisableableAction} from '../../../../../../types';
 import {Button} from '../../../../../Button';
+import {useComponentDidMount} from '../../../../../../utilities/use-component-did-mount';
+
 import styles from '../../BulkActions.scss';
 
 export type BulkActionButtonProps = {
   disclosure?: boolean;
   handleMeasurement?(width: number): void;
 } & DisableableAction;
 
-export class BulkActionButton extends React.PureComponent<
-  BulkActionButtonProps,
-  never
-> {
-  private bulkActionButton = createRef<HTMLDivElement>();
+export function BulkActionButton({
+  handleMeasurement,
+  url,
+  external,
+  onAction,
+  content,
+  disclosure,
+  accessibilityLabel,
+  disabled,
+}: BulkActionButtonProps) {
+  const bulkActionButton = useRef<HTMLDivElement>(null);
 
-  componentDidMount() {
-    const {handleMeasurement} = this.props;
-    if (handleMeasurement && this.bulkActionButton.current) {
-      const width = this.bulkActionButton.current.getBoundingClientRect().width;
+  useComponentDidMount(() => {
+    if (handleMeasurement && bulkActionButton.current) {
+      const width = bulkActionButton.current.getBoundingClientRect().width;
       handleMeasurement(width);
     }
-  }
-
-  render() {
-    const {
-      url,
-      external,
-      onAction,
-      content,
-      disclosure,
-      accessibilityLabel,
-      disabled,
-    } = this.props;
+  });
 
-    return (
-      <div className={styles.BulkActionButton} ref={this.bulkActionButton}>
-        <Button
-          external={external}
-          url={url}
-          aria-label={accessibilityLabel}
-          onClick={onAction}
-          disabled={disabled}
-          disclosure={disclosure}
-        >
-          {content}
-        </Button>
-      </div>
-    );
-  }
+  return (
+    <div className={styles.BulkActionButton} ref={bulkActionButton}>
+      <Button
+        external={external}
+        url={url}
+        aria-label={accessibilityLabel}
+        onClick={onAction}
+        disabled={disabled}
+        disclosure={disclosure}
+      >
+        {content}
+      </Button>
+    </div>
+  );
 }