Refactor to React 16.3+ lifecycle methods

package.json

@@ -40,6 +40,7 @@
     "@types/mocha": "5.2.7",
     "@types/prop-types": "15.7.1",
     "@types/react": "16.8.23",
+    "@types/react-lifecycles-compat": "^3.0.1",
     "@types/react-dom": "16.8.5",
     "@types/react-transition-group": "4.2.0",
     "@types/sinon": "7.0.13",

packages/core/karma.conf.js

@@ -13,6 +13,7 @@ module.exports = function (config) {
             // not worth full coverage
             "src/accessibility/*",
             "src/common/abstractComponent*",
+            "src/common/abstractPureComponent*",
         ],
     });
     config.set(baseConfig);

packages/core/package.json

@@ -46,6 +46,7 @@
     "dom4": "^2.1.5",
     "normalize.css": "^8.0.1",
     "popper.js": "^1.15.0",
+    "react-lifecycles-compat": "^3.0.4",
     "react-popper": "^1.3.3",
     "react-transition-group": "^2.9.0",
     "resize-observer-polyfill": "^1.5.1",

packages/core/src/common/abstractComponent.ts

@@ -20,6 +20,7 @@ import { isNodeEnv } from "./utils";
 /**
  * An abstract component that Blueprint components can extend
  * in order to add some common functionality like runtime props validation.
+ * @deprecated componentWillReceiveProps is deprecated in React 16.9; use AbstractComponent2 instead
  */
 export abstract class AbstractComponent<P, S> extends React.Component<P, S> {
     /** Component displayName should be `public static`. This property exists to prevent incorrect usage. */

packages/core/src/common/abstractComponent2.ts

@@ -0,0 +1,83 @@
+/*
+ * Copyright 2019 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from "react";
+import { isNodeEnv } from "./utils";
+
+/**
+ * An abstract component that Blueprint components can extend
+ * in order to add some common functionality like runtime props validation.
+ */
+export abstract class AbstractComponent2<P, S = {}, SS = {}> extends React.Component<P, S, SS> {
+    /** Component displayName should be `public static`. This property exists to prevent incorrect usage. */
+    protected displayName: never;
+
+    // Not bothering to remove entries when their timeouts finish because clearing invalid ID is a no-op
+    private timeoutIds: number[] = [];
+
+    constructor(props?: P, context?: any) {
+        super(props, context);
+        if (!isNodeEnv("production")) {
+            this.validateProps(this.props);
+        }
+    }
+
+    public componentDidUpdate(_prevProps: P, _prevState: S, _snapshot?: SS) {
+        if (!isNodeEnv("production")) {
+            this.validateProps(this.props);
+        }
+    }
+
+    public componentWillUnmount() {
+        this.clearTimeouts();
+    }
+
+    /**
+     * Set a timeout and remember its ID.
+     * All stored timeouts will be cleared when component unmounts.
+     * @returns a "cancel" function that will clear timeout when invoked.
+     */
+    public setTimeout(callback: () => void, timeout?: number) {
+        const handle = window.setTimeout(callback, timeout);
+        this.timeoutIds.push(handle);
+        return () => window.clearTimeout(handle);
+    }
+
+    /**
+     * Clear all known timeouts.
+     */
+    public clearTimeouts = () => {
+        if (this.timeoutIds.length > 0) {
+            for (const timeoutId of this.timeoutIds) {
+                window.clearTimeout(timeoutId);
+            }
+            this.timeoutIds = [];
+        }
+    };
+
+    /**
+     * Ensures that the props specified for a component are valid.
+     * Implementations should check that props are valid and usually throw an Error if they are not.
+     * Implementations should not duplicate checks that the type system already guarantees.
+     *
+     * This method should be used instead of React's
+     * [propTypes](https://facebook.github.io/react/docs/reusable-components.html#prop-validation) feature.
+     * Like propTypes, these runtime checks run only in development mode.
+     */
+    protected validateProps(_props: P) {
+        // implement in subclass
+    }
+}

packages/core/src/common/abstractPureComponent.ts

@@ -20,6 +20,7 @@ import { isNodeEnv } from "./utils";
 /**
  * An abstract component that Blueprint components can extend
  * in order to add some common functionality like runtime props validation.
+ * @deprecated componentWillReceiveProps is deprecated in React 16.9; use AbstractPureComponent2 instead
  */
 export abstract class AbstractPureComponent<P, S = {}> extends React.PureComponent<P, S> {
     /** Component displayName should be `public static`. This property exists to prevent incorrect usage. */
@@ -77,7 +78,7 @@ export abstract class AbstractPureComponent<P, S = {}> extends React.PureCompone
      * [propTypes](https://facebook.github.io/react/docs/reusable-components.html#prop-validation) feature.
      * Like propTypes, these runtime checks run only in development mode.
      */
-    protected validateProps(_: P & { children?: React.ReactNode }) {
+    protected validateProps(_props: P & { children?: React.ReactNode }) {
         // implement in subclass
     }
 }

packages/core/src/common/abstractPureComponent2.ts

@@ -0,0 +1,86 @@
+/*
+ * Copyright 2019 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from "react";
+import { isNodeEnv } from "./utils";
+
+/**
+ * An abstract component that Blueprint components can extend
+ * in order to add some common functionality like runtime props validation.
+ */
+export abstract class AbstractPureComponent2<P, S = {}, SS = {}> extends React.PureComponent<P, S, SS> {
+    // unsafe lifecycle method
+    public componentWillReceiveProps: never;
+
+    /** Component displayName should be `public static`. This property exists to prevent incorrect usage. */
+    protected displayName: never;
+
+    // Not bothering to remove entries when their timeouts finish because clearing invalid ID is a no-op
+    private timeoutIds: number[] = [];
+
+    constructor(props?: P, context?: any) {
+        super(props, context);
+        if (!isNodeEnv("production")) {
+            this.validateProps(this.props);
+        }
+    }
+
+    public componentDidUpdate(_prevProps: P, _prevState: S, _snapshot?: SS) {
+        if (!isNodeEnv("production")) {
+            this.validateProps(this.props);
+        }
+    }
+
+    public componentWillUnmount() {
+        this.clearTimeouts();
+    }
+
+    /**
+     * Set a timeout and remember its ID.
+     * All stored timeouts will be cleared when component unmounts.
+     * @returns a "cancel" function that will clear timeout when invoked.
+     */
+    public setTimeout(callback: () => void, timeout?: number) {
+        const handle = window.setTimeout(callback, timeout);
+        this.timeoutIds.push(handle);
+        return () => window.clearTimeout(handle);
+    }
+
+    /**
+     * Clear all known timeouts.
+     */
+    public clearTimeouts = () => {
+        if (this.timeoutIds.length > 0) {
+            for (const timeoutId of this.timeoutIds) {
+                window.clearTimeout(timeoutId);
+            }
+            this.timeoutIds = [];
+        }
+    };
+
+    /**
+     * Ensures that the props specified for a component are valid.
+     * Implementations should check that props are valid and usually throw an Error if they are not.
+     * Implementations should not duplicate checks that the type system already guarantees.
+     *
+     * This method should be used instead of React's
+     * [propTypes](https://facebook.github.io/react/docs/reusable-components.html#prop-validation) feature.
+     * Like propTypes, these runtime checks run only in development mode.
+     */
+    protected validateProps(_props: P) {
+        // implement in subclass
+    }
+}

packages/core/src/common/index.ts

@@ -15,7 +15,9 @@
  */
 
 export * from "./abstractComponent";
+export * from "./abstractComponent2";
 export * from "./abstractPureComponent";
+export * from "./abstractPureComponent2";
 export * from "./alignment";
 export * from "./boundary";
 export * from "./colors";

packages/core/src/components/alert/alert.tsx

@@ -16,8 +16,9 @@
 
 import classNames from "classnames";
 import * as React from "react";
+import { polyfill } from "react-lifecycles-compat";
 
-import { AbstractPureComponent, Classes, DISPLAYNAME_PREFIX, Intent, IProps, MaybeElement } from "../../common";
+import { AbstractPureComponent2, Classes, DISPLAYNAME_PREFIX, Intent, IProps, MaybeElement } from "../../common";
 import {
     ALERT_WARN_CANCEL_ESCAPE_KEY,
     ALERT_WARN_CANCEL_OUTSIDE_CLICK,
@@ -117,7 +118,8 @@ export interface IAlertProps extends IOverlayLifecycleProps, IProps {
     onClose?(confirmed: boolean, evt?: React.SyntheticEvent<HTMLElement>): void;
 }
 
-export class Alert extends AbstractPureComponent<IAlertProps, {}> {
+@polyfill
+export class Alert extends AbstractPureComponent2<IAlertProps, {}> {
     public static defaultProps: IAlertProps = {
         canEscapeKeyCancel: false,
         canOutsideClickCancel: false,

packages/core/src/components/breadcrumbs/breadcrumbs.tsx

@@ -16,11 +16,9 @@
 
 import classNames from "classnames";
 import * as React from "react";
+import { polyfill } from "react-lifecycles-compat";
 
-import { Boundary } from "../../common/boundary";
-import * as Classes from "../../common/classes";
-import { Position } from "../../common/position";
-import { IProps } from "../../common/props";
+import { AbstractPureComponent2, Boundary, Classes, IProps, Position } from "../../common";
 import { Menu } from "../menu/menu";
 import { MenuItem } from "../menu/menuItem";
 import { IOverflowListProps, OverflowList } from "../overflow-list/overflowList";
@@ -76,7 +74,8 @@ export interface IBreadcrumbsProps extends IProps {
     popoverProps?: IPopoverProps;
 }
 
-export class Breadcrumbs extends React.PureComponent<IBreadcrumbsProps> {
+@polyfill
+export class Breadcrumbs extends AbstractPureComponent2<IBreadcrumbsProps> {
     public static defaultProps: Partial<IBreadcrumbsProps> = {
         collapseFrom: Boundary.START,
     };

packages/core/src/components/button/abstractButton.tsx

@@ -17,11 +17,7 @@
 import classNames from "classnames";
 import * as React from "react";
 
-import { Alignment } from "../../common/alignment";
-import * as Classes from "../../common/classes";
-import * as Keys from "../../common/keys";
-import { IActionProps, MaybeElement } from "../../common/props";
-import { isReactNodeEmpty, safeInvoke } from "../../common/utils";
+import { AbstractPureComponent2, Alignment, Classes, IActionProps, Keys, MaybeElement, Utils } from "../../common";
 import { Icon, IconName } from "../icon/icon";
 import { Spinner } from "../spinner/spinner";
 
@@ -79,7 +75,7 @@ export interface IButtonState {
     isActive: boolean;
 }
 
-export abstract class AbstractButton<H extends React.HTMLAttributes<any>> extends React.PureComponent<
+export abstract class AbstractButton<H extends React.HTMLAttributes<any>> extends AbstractPureComponent2<
     IButtonProps & H,
     IButtonState
 > {
@@ -91,7 +87,7 @@ export abstract class AbstractButton<H extends React.HTMLAttributes<any>> extend
     protected refHandlers = {
         button: (ref: HTMLElement) => {
             this.buttonRef = ref;
-            safeInvoke(this.props.elementRef, ref);
+            Utils.safeInvoke(this.props.elementRef, ref);
         },
     };
 
@@ -142,7 +138,7 @@ export abstract class AbstractButton<H extends React.HTMLAttributes<any>> extend
             }
         }
         this.currentKeyDown = e.which;
-        safeInvoke(this.props.onKeyDown, e);
+        Utils.safeInvoke(this.props.onKeyDown, e);
     };
 
     protected handleKeyUp = (e: React.KeyboardEvent<any>) => {
@@ -151,15 +147,15 @@ export abstract class AbstractButton<H extends React.HTMLAttributes<any>> extend
             this.buttonRef.click();
         }
         this.currentKeyDown = null;
-        safeInvoke(this.props.onKeyUp, e);
+        Utils.safeInvoke(this.props.onKeyUp, e);
     };
 
     protected renderChildren(): React.ReactNode {
         const { children, icon, loading, rightIcon, text } = this.props;
         return [
             loading && <Spinner key="loading" className={Classes.BUTTON_SPINNER} size={Icon.SIZE_LARGE} />,
             <Icon key="leftIcon" icon={icon} />,
-            (!isReactNodeEmpty(text) || !isReactNodeEmpty(children)) && (
+            (!Utils.isReactNodeEmpty(text) || !Utils.isReactNodeEmpty(children)) && (
                 <span key="text" className={Classes.BUTTON_TEXT}>
                     {text}
                     {children}

packages/core/src/components/button/buttonGroup.tsx

@@ -16,8 +16,9 @@
 
 import classNames from "classnames";
 import * as React from "react";
-import { Alignment } from "../../common/alignment";
-import * as Classes from "../../common/classes";
+import { polyfill } from "react-lifecycles-compat";
+
+import { AbstractPureComponent2, Alignment, Classes } from "../../common";
 import { DISPLAYNAME_PREFIX, HTMLDivProps, IProps } from "../../common/props";
 
 export interface IButtonGroupProps extends IProps, HTMLDivProps {
@@ -56,7 +57,8 @@ export interface IButtonGroupProps extends IProps, HTMLDivProps {
 
 // this component is simple enough that tests would be purely tautological.
 /* istanbul ignore next */
-export class ButtonGroup extends React.PureComponent<IButtonGroupProps, {}> {
+@polyfill
+export class ButtonGroup extends AbstractPureComponent2<IButtonGroupProps> {
     public static displayName = `${DISPLAYNAME_PREFIX}.ButtonGroup`;
 
     public render() {

packages/core/src/components/callout/callout.tsx

@@ -16,11 +16,20 @@
 
 import classNames from "classnames";
 import * as React from "react";
+import { polyfill } from "react-lifecycles-compat";
 
-import { Classes, DISPLAYNAME_PREFIX, HTMLDivProps, IIntentProps, Intent, IProps, MaybeElement } from "../../common";
-import { Icon } from "../../index";
+import {
+    AbstractPureComponent2,
+    Classes,
+    DISPLAYNAME_PREFIX,
+    HTMLDivProps,
+    IIntentProps,
+    Intent,
+    IProps,
+    MaybeElement,
+} from "../../common";
 import { H4 } from "../html/html";
-import { IconName } from "../icon/icon";
+import { Icon, IconName } from "../icon/icon";
 
 /** This component also supports the full range of HTML `<div>` props. */
 export interface ICalloutProps extends IIntentProps, IProps, HTMLDivProps {
@@ -50,7 +59,8 @@ export interface ICalloutProps extends IIntentProps, IProps, HTMLDivProps {
     title?: string;
 }
 
-export class Callout extends React.PureComponent<ICalloutProps, {}> {
+@polyfill
+export class Callout extends AbstractPureComponent2<ICalloutProps> {
     public static displayName = `${DISPLAYNAME_PREFIX}.Callout`;
 
     public render() {