refactor: rename legacy lifecycle with UNSAFE prefix and fix lint error

iCHEF · Jun 2, 2023 · 0990121 · 0990121
1 parent b57ae00
commit 0990121
Show file tree

Hide file tree

Showing 7 changed files with 76 additions and 76 deletions.
diff --git a/packages/core/src/EditableBasicRow.js b/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 });
       }

diff --git a/packages/core/src/EditableTextLabel.js b/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 });

diff --git a/packages/core/src/StatusIcon.js b/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.

diff --git a/packages/form/src/SelectList.js b/packages/form/src/SelectList.js
@@ -72,25 +72,6 @@ class SelectList extends PureComponent {
       ),
     };
 
-    // eslint-disable-next-line react/no-deprecated
-    componentWillReceiveProps(nextProps) {
-      warning(
-        this.getIsControlled(this.props) === this.getIsControlled(nextProps),
-        '<SelectList> should not switch from controlled to uncontrolled (or vice versa).'
-      );
-
-      if (this.getIsControlled(nextProps)) {
-        this.setState({
-          checkedState: getInitialCheckedState(nextProps.value, nextProps.multiple),
-        });
-      } else if (this.props.multiple !== nextProps.multiple) {
-        warning(false, '<SelectList>: you should not change `multiple` prop while it is uncontrolled. Its value will be reset now.');
-        this.setState({
-          checkedState: getInitialCheckedState([]),
-        });
-      }
-    }
-
     getInitialValue() {
       const { value, defaultValue, multiple } = this.props;
 
@@ -129,6 +110,25 @@ class SelectList extends PureComponent {
         .map(option => option.value);
     }
 
+    // eslint-disable-next-line react/no-deprecated, camelcase
+    UNSAFE_componentWillReceiveProps(nextProps) {
+      warning(
+        this.getIsControlled(this.props) === this.getIsControlled(nextProps),
+        '<SelectList> should not switch from controlled to uncontrolled (or vice versa).'
+      );
+
+      if (this.getIsControlled(nextProps)) {
+        this.setState({
+          checkedState: getInitialCheckedState(nextProps.value, nextProps.multiple),
+        });
+      } else if (this.props.multiple !== nextProps.multiple) {
+        warning(false, '<SelectList>: you should not change `multiple` prop while it is uncontrolled. Its value will be reset now.');
+        this.setState({
+          checkedState: getInitialCheckedState([]),
+        });
+      }
+    }
+
     handleChange(nextCheckedState) {
       const { onChange, multiple } = this.props;
       const nextValues = this.getValues(nextCheckedState);

diff --git a/packages/form/src/SelectRow.js b/packages/form/src/SelectRow.js
@@ -100,25 +100,6 @@ class SelectRow extends PureComponent {
       cachedValue: this.getInitialValue(),
     };
 
-    // eslint-disable-next-line react/no-deprecated
-    componentWillReceiveProps(nextProps) {
-      this.setState({
-        valueLabelMap: getValueToLabelAvatarMap(nextProps.children),
-      });
-
-      warning(
-        this.getIsControlled(this.props) === this.getIsControlled(nextProps),
-        '<SelectRow> should not switch from controlled to uncontrolled (or vice versa).'
-      );
-
-      if (this.getIsControlled(nextProps)) {
-        this.setState({ cachedValue: nextProps.value });
-      } else if (this.props.multiple !== nextProps.multiple) {
-        warning(false, '<SelectRow>: you should not change `multiple` prop while it is uncontrolled. Its value will be reset now.');
-        this.setState({ cachedValue: (nextProps.multiple) ? [] : null });
-      }
-    }
-
     getInitialValue() {
       const { value, defaultValue, multiple } = this.props;
 
@@ -143,6 +124,25 @@ class SelectRow extends PureComponent {
       return (multiple) ? cachedValue : [cachedValue].filter(val => val !== undefined);
     }
 
+    // eslint-disable-next-line react/no-deprecated, camelcase
+    UNSAFE_componentWillReceiveProps(nextProps) {
+      this.setState({
+        valueLabelMap: getValueToLabelAvatarMap(nextProps.children),
+      });
+
+      warning(
+        this.getIsControlled(this.props) === this.getIsControlled(nextProps),
+        '<SelectRow> should not switch from controlled to uncontrolled (or vice versa).'
+      );
+
+      if (this.getIsControlled(nextProps)) {
+        this.setState({ cachedValue: nextProps.value });
+      } else if (this.props.multiple !== nextProps.multiple) {
+        warning(false, '<SelectRow>: you should not change `multiple` prop while it is uncontrolled. Its value will be reset now.');
+        this.setState({ cachedValue: (nextProps.multiple) ? [] : null });
+      }
+    }
+
     handleButtonClick = () => {
       this.setState({ isPopoverOpen: true });
     }

diff --git a/packages/form/src/SwitchRow.js b/packages/form/src/SwitchRow.js
@@ -46,11 +46,6 @@ class SwitchRow extends PureComponent {
       checked: this.props.defaultChecked || this.props.checked,
     };
 
-    // eslint-disable-next-line react/no-deprecated
-    componentWillReceiveProps(nextProps) {
-      this.setState({ checked: nextProps.checked });
-    }
-
     getIsControlled() {
       const isControlled = this.props.checked !== undefined
             && this.props.checked !== null;
@@ -64,6 +59,11 @@ class SwitchRow extends PureComponent {
       return this.state.checked ? asideOn : asideOff;
     }
 
+    // eslint-disable-next-line react/no-deprecated, camelcase
+    UNSAFE_componentWillReceiveProps(nextProps) {
+      this.setState({ checked: nextProps.checked });
+    }
+
     handleSwitchButtonChange = (event) => {
       if (!this.getIsControlled()) {
         this.setState({ checked: event.target.checked });

diff --git a/packages/imageeditor/src/ImageEditor.js b/packages/imageeditor/src/ImageEditor.js
@@ -102,17 +102,6 @@ class ImageEditor extends PureComponent {
 
     editorRef = React.createRef();
 
-    // eslint-disable-next-line react/no-deprecated
-    componentWillReceiveProps(nextProps) {
-      // Consider current `scale`, `position` and `initCropRect` outdated when image changes
-      if (nextProps.image !== this.props.image) {
-        this.setState({
-          scale: DEFAULT_SCALE,
-          position: DEFAULT_POSITION,
-        });
-      }
-    }
-
     getImageCanvas = ({ originalSize = false } = {}) => {
       if (originalSize) {
         return this.editorRef.current.getImage();
@@ -128,6 +117,17 @@ class ImageEditor extends PureComponent {
       return this.editorRef.current.getCroppingRect();
     }
 
+    // eslint-disable-next-line react/no-deprecated, camelcase
+    UNSAFE_componentWillReceiveProps(nextProps) {
+      // Consider current `scale`, `position` and `initCropRect` outdated when image changes
+      if (nextProps.image !== this.props.image) {
+        this.setState({
+          scale: DEFAULT_SCALE,
+          position: DEFAULT_POSITION,
+        });
+      }
+    }
+
     handleSliderChange = (event) => {
       const newScale = Number(event.target.value);