[AutoComplete] Use new context api

UNRELEASED-V4.md

@@ -22,6 +22,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 ### Code quality
 
+- Upgraded the `Autocomplete` component from legacy context API to use createContext ([#1403](https://github.com/Shopify/polaris-react/pull/1403))
 - Updated `AppProvider` to no longer use `componentWillReceiveProps`([#1255](https://github.com/Shopify/polaris-react/pull/1255))
 - Updated `ThemeProvider` to no longer use `componentWillReceiveProps`([#1254](https://github.com/Shopify/polaris-react/pull/1254))
 - Upgraded the `Banner`, `Card`, and `Modal` components from legacy context API to use createContext ([#786](https://github.com/Shopify/polaris-react/pull/786))

src/components/Autocomplete/components/ComboBox/ComboBox.tsx

@@ -9,9 +9,9 @@ import ActionList from '../../../ActionList';
 import Popover from '../../../Popover';
 import {PreferredPosition} from '../../../PositionedOverlay';
 import {ActionListItemDescriptor, Key} from '../../../../types';
-import {contextTypes} from '../types';
+import {ComboBoxContext} from '../types';
 import KeypressListener from '../../../KeypressListener';
-import {TextField} from './components';
+import {TextField, Provider} from './components';
 
 import styles from './ComboBox.scss';
 
@@ -58,17 +58,9 @@ export interface Props {
   onEndReached?(): void;
 }
 
-export interface Context {
-  comboBoxId: string;
-  selectedOptionId?: string;
-  subscribe(callback: () => void): void;
-  unsubscribe(callback: () => void): void;
-}
-
 export default class ComboBox extends React.PureComponent<Props, State> {
   static TextField = TextField;
   static OptionList = OptionList;
-  static childContextTypes = contextTypes;
 
   static getDerivedStateFromProps(
     {
@@ -123,17 +115,14 @@ export default class ComboBox extends React.PureComponent<Props, State> {
     popoverWasActive: false,
   };
 
-  private subscriptions: {(): void}[] = [];
   private popoverScrollContainer: React.RefObject<
     HTMLDivElement
   > = React.createRef();
 
-  getChildContext(): Context {
+  get getContext(): ComboBoxContext {
     return {
       comboBoxId: this.state.comboBoxId,
       selectedOptionId: this.selectedOptionId,
-      subscribe: this.subscribe,
-      unsubscribe: this.unsubscribe,
     };
   }
 
@@ -161,7 +150,6 @@ export default class ComboBox extends React.PureComponent<Props, State> {
   componentDidUpdate(_: Props, prevState: State) {
     const {contentBefore, contentAfter, emptyState} = this.props;
     const {navigableOptions, popoverActive, popoverWasActive} = this.state;
-    this.subscriptions.forEach((subscriberCallback) => subscriberCallback());
 
     const optionsChanged =
       navigableOptions &&
@@ -253,63 +241,58 @@ export default class ComboBox extends React.PureComponent<Props, State> {
       emptyState && <div className={styles.EmptyState}>{emptyState}</div>;
 
     return (
-      <div
-        onClick={this.handleClick}
-        role="combobox"
-        aria-expanded={this.state.popoverActive}
-        aria-owns={this.state.comboBoxId}
-        aria-controls={this.state.comboBoxId}
-        aria-haspopup
-        onFocus={this.handleFocus}
-        onBlur={this.handleBlur}
-        tabIndex={0}
-      >
-        <KeypressListener
-          keyCode={Key.DownArrow}
-          handler={this.handleDownArrow}
-        />
-        <KeypressListener keyCode={Key.UpArrow} handler={this.handleUpArrow} />
-        <KeypressListener keyCode={Key.Enter} handler={this.handleEnter} />
-        <KeypressListener
-          keyCode={Key.Escape}
-          handler={this.handlePopoverClose}
-        />
-        <Popover
-          activator={textField}
-          active={this.state.popoverActive}
-          onClose={this.handlePopoverClose}
-          preferredPosition={preferredPosition}
-          fullWidth
-          preventAutofocus
+      <Provider value={this.getContext}>
+        <div
+          onClick={this.handleClick}
+          role="combobox"
+          aria-expanded={this.state.popoverActive}
+          aria-owns={this.state.comboBoxId}
+          aria-controls={this.state.comboBoxId}
+          aria-haspopup
+          onFocus={this.handleFocus}
+          onBlur={this.handleBlur}
+          tabIndex={0}
         >
-          <div
-            id={this.state.comboBoxId}
-            role="listbox"
-            aria-multiselectable={allowMultiple}
+          <KeypressListener
+            keyCode={Key.DownArrow}
+            handler={this.handleDownArrow}
+          />
+          <KeypressListener
+            keyCode={Key.UpArrow}
+            handler={this.handleUpArrow}
+          />
+          <KeypressListener keyCode={Key.Enter} handler={this.handleEnter} />
+          <KeypressListener
+            keyCode={Key.Escape}
+            handler={this.handlePopoverClose}
+          />
+          <Popover
+            activator={textField}
+            active={this.state.popoverActive}
+            onClose={this.handlePopoverClose}
+            preferredPosition={preferredPosition}
+            fullWidth
+            preventAutofocus
           >
-            {scrollListenerMarkup}
-            {contentBefore}
-            {actionsBeforeMarkup}
-            {optionsMarkup}
-            {actionsAfterMarkup}
-            {contentAfter}
-            {emptyStateMarkup}
-          </div>
-        </Popover>
-      </div>
+            <div
+              id={this.state.comboBoxId}
+              role="listbox"
+              aria-multiselectable={allowMultiple}
+            >
+              {scrollListenerMarkup}
+              {contentBefore}
+              {actionsBeforeMarkup}
+              {optionsMarkup}
+              {actionsAfterMarkup}
+              {contentAfter}
+              {emptyStateMarkup}
+            </div>
+          </Popover>
+        </div>
+      </Provider>
     );
   }
 
-  subscribe = (callback: () => void) => {
-    this.subscriptions.push(callback);
-  };
-
-  unsubscribe = (callback: () => void) => {
-    this.subscriptions = this.subscriptions.filter(
-      (subscription) => subscription !== callback,
-    );
-  };
-
   private handleDownArrow = () => {
     const {selectedIndex, navigableOptions} = this.state;
     const {onEndReached} = this.props;

src/components/Autocomplete/components/ComboBox/components/Context/Context.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import {ComboBoxContext} from '../../../types';
+
+const {Provider, Consumer} = React.createContext<ComboBoxContext>({});
+
+export {Provider, Consumer};

src/components/Autocomplete/components/ComboBox/components/Context/index.ts

@@ -0,0 +1 @@
+export {Provider, Consumer} from './Context';

src/components/Autocomplete/components/ComboBox/components/TextField/TextField.tsx

@@ -1,34 +1,21 @@
 import * as React from 'react';
 
-import {contextTypes} from '../../../types';
+import {ComboBoxContext} from '../../../types';
 import BaseTextField, {Props as TextFieldProps} from '../../../../../TextField';
+import {Consumer} from '../Context';
 
-export default class TextField extends React.PureComponent<
-  TextFieldProps,
-  never
-> {
-  static contextTypes = contextTypes;
-
-  componentDidMount() {
-    const {subscribe} = this.context;
-    subscribe(this.handleContextUpdate);
-  }
-
-  render() {
-    const {selectedOptionId, comboBoxId} = this.context;
-
-    return (
-      <BaseTextField
-        {...this.props}
-        autoComplete={false}
-        ariaAutocomplete="list"
-        ariaActiveDescendant={selectedOptionId}
-        ariaControls={comboBoxId}
-      />
-    );
-  }
-
-  private handleContextUpdate = () => {
-    this.forceUpdate();
-  };
+export default function TextField(props: TextFieldProps) {
+  return (
+    <Consumer>
+      {({selectedOptionId, comboBoxId}: ComboBoxContext) => (
+        <BaseTextField
+          {...props}
+          autoComplete={false}
+          ariaAutocomplete="list"
+          ariaActiveDescendant={selectedOptionId}
+          ariaControls={comboBoxId}
+        />
+      )}
+    </Consumer>
+  );
 }

src/components/Autocomplete/components/ComboBox/components/index.ts

@@ -1 +1,2 @@
 export {default as TextField} from './TextField';
+export {Provider, Consumer} from './Context';

src/components/Autocomplete/components/types.ts

@@ -1,9 +1,4 @@
-import * as PropTypes from 'prop-types';
-import {ValidationMap} from 'react';
-
-export const contextTypes: ValidationMap<any> = {
-  selectedOptionId: PropTypes.string,
-  comboBoxId: PropTypes.string,
-  subscribe: PropTypes.func,
-  unsubscribe: PropTypes.func,
-};
+export interface ComboBoxContext {
+  comboBoxId?: string;
+  selectedOptionId?: string;
+}