Merge pull request #628 from Shopify/dep-lcm-el

[EventListener] Remove deprecated lifecycle method

UNRELEASED.md

@@ -6,6 +6,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 ### Enhancements
 
+- `EventListener` no longer uses `componentWillUpdate` ([#628](https://github.com/Shopify/polaris-react/pull/628))
 - Allowed `Icon` to accept a React Node as a source ([#635](https://github.com/Shopify/polaris-react/pull/635)) (thanks to [@mbriggs](https://github.com/mbriggs) for the [original issue](https://github.com/Shopify/polaris-react/issues/449))
 
 ### Bug fixes

src/components/EventListener/EventListener.tsx

@@ -4,25 +4,24 @@ import {
   removeEventListener,
 } from '@shopify/javascript-utilities/events';
 
-export interface Props {
+export interface BaseEventProps {
   event: string;
   capture?: boolean;
-  passive?: boolean;
   handler(event: Event): void;
 }
 
+export interface Props extends BaseEventProps {
+  passive?: boolean;
+}
+
 // see https://github.com/oliviertassinari/react-event-listener/
 export default class EventListener extends React.PureComponent<Props, never> {
   componentDidMount() {
     this.attachListener();
   }
 
-  // eslint-disable-next-line react/no-deprecated
-  componentWillUpdate() {
-    this.detachListener();
-  }
-
-  componentDidUpdate() {
+  componentDidUpdate({passive, ...detachProps}: Props) {
+    this.detachListener(detachProps);
     this.attachListener();
   }
 
@@ -39,8 +38,8 @@ export default class EventListener extends React.PureComponent<Props, never> {
     addEventListener(window, event, handler, {capture, passive});
   }
 
-  private detachListener() {
-    const {event, handler, capture} = this.props;
+  private detachListener(prevProps?: BaseEventProps) {
+    const {event, handler, capture} = prevProps || this.props;
     removeEventListener(window, event, handler, capture);
   }
 }

src/components/EventListener/tests/EventListener.test.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import {noop} from '@shopify/javascript-utilities/other';
 import {mountWithAppProvider} from 'test-utilities';
 import EventListener from '../EventListener';
 
@@ -17,6 +18,16 @@ describe('<EventListener />', () => {
     expect(spy).not.toHaveBeenCalled();
   });
 
+  it('removes listener on update', () => {
+    const spy = jest.fn();
+    const eventListener = mountWithAppProvider(
+      <EventListener event="resize" handler={spy} />,
+    );
+    eventListener.setProps({event: 'scroll', handler: noop});
+    window.dispatchEvent(new Event('resize'));
+    expect(spy).not.toHaveBeenCalled();
+  });
+
   it('removes listener when unmounted', () => {
     const spy = jest.fn();
     mountWithAppProvider(