Merge pull request #2557 from Shopify/funcify-option

[Option] Converted to a functional component

Author: AndrewMusgrave

UNRELEASED.md

@@ -28,5 +28,6 @@
 - 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))
 - Converted `Tooltip` into a functional component ([#2543](https://github.com/Shopify/polaris-react/pull/2543))
+- Converted `Option` into a functional component ([#2541](https://github.com/Shopify/polaris-react/pull/2541))
 
 ### Deprecations

src/components/OptionList/components/Option/Option.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, {useCallback} from 'react';
 
+import {useToggle} from '../../../../utilities/use-toggle';
 import {classNames} from '../../../../utilities/css';
 import {IconProps} from '../../../../types';
 import {ThumbnailProps} from '../../../Thumbnail';
@@ -24,106 +25,92 @@ export interface OptionProps {
   onClick(section: number, option: number): void;
 }
 
-interface State {
-  focused: boolean;
-}
-
-export class Option extends React.Component<OptionProps, State> {
-  state: State = {
-    focused: false,
-  };
-
-  render() {
-    const {
-      label,
-      value,
-      id,
-      select,
-      active,
-      allowMultiple,
-      disabled,
-      role,
-      media,
-    } = this.props;
-    const {focused} = this.state;
-
-    const mediaMarkup = media ? (
-      <div className={styles.Media}>{media}</div>
-    ) : null;
-
-    const singleSelectClassName = classNames(
-      styles.SingleSelectOption,
-      focused && styles.focused,
-      disabled && styles.disabled,
-      select && styles.select,
-      active && styles.active,
-    );
-
-    const multiSelectClassName = classNames(
-      styles.Label,
-      active && styles.active,
-    );
-
-    const checkBoxRole = role === 'option' ? 'presentation' : undefined;
-
-    const optionMarkup = allowMultiple ? (
-      <label htmlFor={id} className={multiSelectClassName}>
-        <div className={styles.Checkbox}>
-          <Checkbox
-            id={id}
-            value={value}
-            checked={select}
-            active={active}
-            disabled={disabled}
-            onChange={this.handleClick}
-            role={checkBoxRole}
-          />
-        </div>
-        {mediaMarkup}
-        {label}
-      </label>
-    ) : (
-      <button
-        id={id}
-        type="button"
-        className={singleSelectClassName}
-        onClick={this.handleClick}
-        disabled={disabled}
-        onFocus={this.toggleFocus}
-        onBlur={this.toggleFocus}
-      >
-        {mediaMarkup}
-        {label}
-      </button>
-    );
-
-    const scrollMarkup = active ? <Scrollable.ScrollTo /> : null;
-
-    return (
-      <li
-        key={id}
-        className={styles.Option}
-        tabIndex={-1}
-        aria-selected={active}
-        role={role}
-      >
-        {scrollMarkup}
-        {optionMarkup}
-      </li>
-    );
-  }
-
-  private handleClick = () => {
-    const {onClick, section, index, disabled} = this.props;
-
+export function Option({
+  label,
+  value,
+  id,
+  select,
+  active,
+  allowMultiple,
+  disabled,
+  role,
+  media,
+  onClick,
+  section,
+  index,
+}: OptionProps) {
+  const {value: focused, toggle: toggleFocused} = useToggle(false);
+
+  const handleClick = useCallback(() => {
     if (disabled) {
       return;
     }
 
     onClick(section, index);
-  };
-
-  private toggleFocus = () => {
-    this.setState((prevState) => ({focused: !prevState.focused}));
-  };
+  }, [disabled, index, onClick, section]);
+
+  const mediaMarkup = media ? (
+    <div className={styles.Media}>{media}</div>
+  ) : null;
+
+  const singleSelectClassName = classNames(
+    styles.SingleSelectOption,
+    focused && styles.focused,
+    disabled && styles.disabled,
+    select && styles.select,
+    active && styles.active,
+  );
+
+  const multiSelectClassName = classNames(
+    styles.Label,
+    active && styles.active,
+  );
+
+  const checkBoxRole = role === 'option' ? 'presentation' : undefined;
+
+  const optionMarkup = allowMultiple ? (
+    <label htmlFor={id} className={multiSelectClassName}>
+      <div className={styles.Checkbox}>
+        <Checkbox
+          id={id}
+          value={value}
+          checked={select}
+          active={active}
+          disabled={disabled}
+          onChange={handleClick}
+          role={checkBoxRole}
+        />
+      </div>
+      {mediaMarkup}
+      {label}
+    </label>
+  ) : (
+    <button
+      id={id}
+      type="button"
+      className={singleSelectClassName}
+      onClick={handleClick}
+      disabled={disabled}
+      onFocus={toggleFocused}
+      onBlur={toggleFocused}
+    >
+      {mediaMarkup}
+      {label}
+    </button>
+  );
+
+  const scrollMarkup = active ? <Scrollable.ScrollTo /> : null;
+
+  return (
+    <li
+      key={id}
+      className={styles.Option}
+      tabIndex={-1}
+      aria-selected={active}
+      role={role}
+    >
+      {scrollMarkup}
+      {optionMarkup}
+    </li>
+  );
 }

src/components/OptionList/components/Option/tests/Option.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 // eslint-disable-next-line no-restricted-imports
 import {mountWithAppProvider} from 'test-utilities/legacy';
+import {mountWithApp} from 'test-utilities';
 import {Checkbox} from '../../Checkbox';
 import {Option, OptionProps} from '../Option';
 
@@ -87,6 +88,15 @@ describe('<Option />', () => {
     expect(checkbox.prop('checked')).toBe(select);
     expect(checkbox.prop('disabled')).toBe(disabled);
   });
+
+  it('renders media content when provided', () => {
+    const id = 'media';
+    const option = mountWithApp(
+      <Option {...defaultProps} media={<div id={id} />} />,
+    );
+
+    expect(option).toContainReactComponent('div', {id});
+  });
 });
 
 function noop() {}