[gypcrete] upgrade react to v17

configs/jestSetup.js

@@ -1,5 +1,5 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import Enzyme from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 
 Enzyme.configure({ adapter: new Adapter() });

package.json

@@ -38,6 +38,7 @@
     "@babel/preset-react": "^7.0.0",
     "@babel/runtime": "^7.4.4",
     "@babel/runtime-corejs3": "^7.4.4",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
     "autoprefixer": "^9.6.1",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
@@ -50,7 +51,6 @@
     "coveralls": "^3.0.0",
     "css-loader": "^0.28.8",
     "enzyme": "^3.7.0",
-    "enzyme-adapter-react-16": "^1.6.0",
     "eslint": "7.8",
     "eslint-config-airbnb": "18.2",
     "eslint-config-ichef": "8.0",
@@ -69,9 +69,9 @@
     "node-sass": "^4.12.0",
     "postcss-loader": "^3.0.0",
     "prop-types": "^15.6.2",
-    "react": "^16.6.3",
-    "react-dom": "^16.6.3",
-    "react-test-renderer": "^16.6.3",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-test-renderer": "^17.0.2",
     "sass-loader": "^6.0.2",
     "style-loader": "^0.19.1",
     "stylelint": "^10.1.0",

packages/core/package.json

@@ -33,8 +33,8 @@
   "peerDependencies": {
     "@babel/runtime-corejs3": "^7.4.4",
     "prop-types": "^15.5.8",
-    "react": "^16.6.0",
-    "react-dom": "^16.6.0"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
   "dependencies": {
     "classnames": "^2.2.5",
@@ -49,7 +49,7 @@
   "devDependencies": {
     "@babel/cli": "^7.4.4",
     "enzyme": "^3.7.0",
-    "react-is": "^16.6.1",
+    "react-is": "^17.0.2",
     "webpack": "^3.10.0",
     "webpack-merge": "^4.1.2"
   }

packages/core/src/EditableBasicRow.js

@@ -93,8 +93,8 @@ class EditableBasicRow extends PureComponent {
       focused: false,
     };
 
-    // eslint-disable-next-line react/no-deprecated
-    componentWillReceiveProps(nextProps) {
+    // eslint-disable-next-line react/no-deprecated, camelcase
+    UNSAFE_componentWillReceiveProps(nextProps) {
       if (nextProps.value !== this.props.value) {
         this.setState({ currentValue: nextProps.value });
       }

packages/core/src/EditableTextLabel.js

@@ -63,18 +63,6 @@ class EditableTextLabel extends PureComponent {
       dblTouchTimeout: null,
     };
 
-    // eslint-disable-next-line react/no-deprecated
-    componentWillReceiveProps(nextProps) {
-      /**
-         * If the edit-state of <EditableTextLabel> is *controlled* by `inEdit` prop.
-         * If the prop is `undefined`, this component became *uncontrolled*
-         * and should run itself.
-         */
-      if (this.getEditabilityControlled(nextProps)) {
-        this.setState({ inEdit: nextProps.inEdit });
-      }
-    }
-
     getEditabilityControlled(fromProps = this.props) {
       return fromProps.inEdit !== undefined;
     }
@@ -86,6 +74,18 @@ class EditableTextLabel extends PureComponent {
       });
     }
 
+    // eslint-disable-next-line react/no-deprecated, camelcase
+    UNSAFE_componentWillReceiveProps(nextProps) {
+      /**
+       * If the edit-state of <EditableTextLabel> is *controlled* by `inEdit` prop.
+       * If the prop is `undefined`, this component became *uncontrolled*
+       * and should run itself.
+       */
+      if (this.getEditabilityControlled(nextProps)) {
+        this.setState({ inEdit: nextProps.inEdit });
+      }
+    }
+
     leaveEditModeIfNotControlled() {
       if (!this.getEditabilityControlled(this.props)) {
         this.setState({ inEdit: false });
@@ -94,9 +94,9 @@ class EditableTextLabel extends PureComponent {
 
     handleDoubleClick = (event) => {
       /**
-         * If `inEdit` isn't controlled, this component by default
-         * goes into edit mode on double click/touch.
-         */
+       * If `inEdit` isn't controlled, this component by default
+       * goes into edit mode on double click/touch.
+       */
       if (!this.getEditabilityControlled()) {
         this.setState({ inEdit: true });
       }

packages/core/src/StatusIcon.js

@@ -48,13 +48,17 @@ class StatusIcon extends PureComponent {
       hideIcon: false,
     };
 
-    // eslint-disable-next-line react/no-deprecated
-    componentWillMount() {
+    componentWillUnmount() {
+      clearTimeout(this.hideIconTimeout);
+    }
+
+    // eslint-disable-next-line react/no-deprecated, camelcase
+    UNSAFE_componentWillMount() {
       this.autoToggleStatusIcon();
     }
 
-    // eslint-disable-next-line react/no-deprecated
-    componentWillReceiveProps(nextProps) {
+    // eslint-disable-next-line react/no-deprecated, camelcase
+    UNSAFE_componentWillReceiveProps(nextProps) {
       if (nextProps.status !== this.props.status) {
         this.autoToggleStatusIcon(nextProps.status);
       }
@@ -65,10 +69,6 @@ class StatusIcon extends PureComponent {
       }
     }
 
-    componentWillUnmount() {
-      clearTimeout(this.hideIconTimeout);
-    }
-
     /**
      * Auto hides status icon after being SUCCESS for 2 secs,
      * or shows icon when component leaves SUCCESS state.

packages/core/src/mixins/__tests__/closable.test.js

@@ -125,7 +125,7 @@ describe.each`
     const handleClose = jest.fn();
     const closableOptions = { onClickInside, onClickOutside };
 
-    mount(
+    const wrapper = mount(
       <ClosableFoo closable={closableOptions} onClose={handleClose} />,
       { attachTo: rootNode },
     );
@@ -139,6 +139,8 @@ describe.each`
     keyEvent = new KeyboardEvent('keyup', { keyCode: keycode('Escape') });
     document.dispatchEvent(keyEvent);
     expect(handleClose).toHaveBeenCalledTimes(shouldBeCalled ? 1 : 0);
+
+    wrapper.unmount();
   });
 });
 

packages/core/src/mixins/closable.js

@@ -37,108 +37,108 @@ const closable = ({
   };
 
   class Closable extends PureComponent {
-        static displayName = `closable(${componentName})`;
-
-        static propTypes = {
-          onClose: PropTypes.func,
-          closable: PropTypes.shape({
-            onEscape: PropTypes.bool,
-            onClickOutside: PropTypes.bool,
-            onClickInside: PropTypes.bool,
-            stopEventPropagation: PropTypes.bool,
-            skip: PropTypes.bool,
-          }),
-        };
-
-        static defaultProps = {
-          onClose: () => {},
-          closable: mixinConfigs,
-        };
-
-        componentDidMount() {
-          if (!this.props.closable.skip) {
-            document.addEventListener('keyup', this.handleDocumentKeyup);
-          }
-        }
-
-        componentWillUnmount() {
-          if (!this.props.closable.skip) {
-            document.removeEventListener('keyup', this.handleDocumentKeyup);
-          }
-        }
-
-        getOptions() {
-          const { closable: runtimeOptions } = this.props;
-
-          /** @type {typeof mixinDefaults} */
-          const actualOptions = {
-            ...mixinConfigs,
-            ...runtimeOptions,
-          };
-
-          return actualOptions;
-        }
-
-        /**
-         * @param {KeyboardEvent} event
-         */
-        handleDocumentKeyup = (event) => {
-          const options = this.getOptions();
-
-          if (options.onEscape && event.keyCode === keycode(ESCAPE)) {
-            this.props.onClose(event);
-          }
-        }
-
-        /**
-         * @param {React.MouseEvent} event
-         */
-        handleOuterLayerClick = (event) => {
-          const options = this.getOptions();
-
-          if (options.stopEventPropagation) {
-            event.stopPropagation();
-          }
-
-          if (options.onClickOutside) {
-            this.props.onClose(event);
-          }
-        }
-
-        /**
-         * @param {React.MouseEvent} event
-         */
-        handleInsideClick = (event) => {
-          const options = this.getOptions();
-
-          if (options.onClickInside) {
-            this.props.onClose(event);
-          }
-        }
-
-        render() {
-          const {
-            onClose,
-            closable: runtimeOptions,
-            ...otherProps
-          } = this.props;
-
-          return (
-            <>
-              {!runtimeOptions.skip && (
-                <div
-                  role="presentation"
-                  className={ROOT_BEM.toString()}
-                  onClick={this.handleOuterLayerClick}
-                />
-              )}
-              <WrappedComponent
-                onInsideClick={this.handleInsideClick}
-                {...otherProps}
-              />
-            </>
-          );
-        }
+    static displayName = `closable(${componentName})`;
+
+    static propTypes = {
+      onClose: PropTypes.func,
+      closable: PropTypes.shape({
+        onEscape: PropTypes.bool,
+        onClickOutside: PropTypes.bool,
+        onClickInside: PropTypes.bool,
+        stopEventPropagation: PropTypes.bool,
+        skip: PropTypes.bool,
+      }),
+    };
+
+    static defaultProps = {
+      onClose: () => {},
+      closable: mixinConfigs,
+    };
+
+    componentDidMount() {
+      if (!this.props.closable.skip) {
+        document.addEventListener('keyup', this.handleDocumentKeyup);
+      }
+    }
+
+    componentWillUnmount() {
+      if (!this.props.closable.skip) {
+        document.removeEventListener('keyup', this.handleDocumentKeyup);
+      }
+    }
+
+    getOptions() {
+      const { closable: runtimeOptions } = this.props;
+
+      /** @type {typeof mixinDefaults} */
+      const actualOptions = {
+        ...mixinConfigs,
+        ...runtimeOptions,
+      };
+
+      return actualOptions;
+    }
+
+    /**
+     * @param {KeyboardEvent} event
+     */
+    handleDocumentKeyup = (event) => {
+      const options = this.getOptions();
+
+      if (options.onEscape && event.keyCode === keycode(ESCAPE)) {
+        this.props.onClose(event);
+      }
+    }
+
+    /**
+     * @param {React.MouseEvent} event
+     */
+    handleOuterLayerClick = (event) => {
+      const options = this.getOptions();
+
+      if (options.stopEventPropagation) {
+        event.stopPropagation();
+      }
+
+      if (options.onClickOutside) {
+        this.props.onClose(event);
+      }
+    }
+
+    /**
+     * @param {React.MouseEvent} event
+     */
+    handleInsideClick = (event) => {
+      const options = this.getOptions();
+
+      if (options.onClickInside) {
+        this.props.onClose(event);
+      }
+    }
+
+    render() {
+      const {
+        onClose,
+        closable: runtimeOptions,
+        ...otherProps
+      } = this.props;
+
+      return (
+        <>
+          {!runtimeOptions.skip && (
+            <div
+              role="presentation"
+              className={ROOT_BEM.toString()}
+              onClick={this.handleOuterLayerClick}
+            />
+          )}
+          <WrappedComponent
+            onInsideClick={this.handleInsideClick}
+            {...otherProps}
+          />
+        </>
+      );
+    }
   }
 
   return Closable;

packages/form/package.json

@@ -32,7 +32,7 @@
   "peerDependencies": {
     "@babel/runtime-corejs3": "^7.4.4",
     "prop-types": "^15.5.8",
-    "react": "^16.6.0"
+    "react": "^17.0.2"
   },
   "dependencies": {
     "@ichef/gypcrete": "^5.2.0",
@@ -45,7 +45,7 @@
   "devDependencies": {
     "@babel/cli": "^7.4.4",
     "enzyme": "^3.7.0",
-    "react-dom": "^16.6.0",
+    "react-dom": "^17.0.2",
     "webpack": "^3.10.0"
   }
 }