Merge pull request #578 from ivarni/372-deprecated-lifecycle-callbacks

372 deprecated lifecycle callbacks
SpareBank1 · Mar 15, 2019 · da4a7b9 · da4a7b9
2 parents 624709f + 1ef3b01
commit da4a7b9
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 39 deletions.
diff --git a/packages/ffe-datepicker-react/src/calendar/Calendar.js b/packages/ffe-datepicker-react/src/calendar/Calendar.js
@@ -38,14 +38,15 @@ export default class Calendar extends Component {
         this.renderDay = this.renderDay.bind(this);
     }
 
-    componentWillReceiveProps(nextProps) {
-        if (nextProps.selectedDate !== this.props.selectedDate) {
+    /* eslint-disable react/no-did-update-set-state */
+    componentDidUpdate(prevProps) {
+        if (prevProps.selectedDate !== this.props.selectedDate) {
             this.setState({
                 calendar: simpleCalendar(
-                    simpleDate.fromString(nextProps.selectedDate),
-                    nextProps.minDate,
-                    nextProps.maxDate,
-                    nextProps.language,
+                    simpleDate.fromString(this.props.selectedDate),
+                    this.props.minDate,
+                    this.props.maxDate,
+                    this.props.language,
                 ),
             });
         }
@@ -137,13 +138,13 @@ export default class Calendar extends Component {
     }
 
     focusHandler(evt) {
-        if(this._wrapper && this._wrapper.contains(evt.target)){
+        if (this._wrapper && this._wrapper.contains(evt.target)) {
             this.forceDateFocus = true;
         }
     }
 
-    wrapperBlurHandler(){
-            this.forceDateFocus = false;
+    wrapperBlurHandler() {
+        this.forceDateFocus = false;
     }
 
     nextMonth(evt) {
@@ -241,7 +242,7 @@ export default class Calendar extends Component {
 }
 
 Calendar.defaultProps = {
-    focusOnOpen: false
+    focusOnOpen: false,
 };
 
 Calendar.propTypes = {

diff --git a/packages/ffe-datepicker-react/src/datepicker/Datepicker.js b/packages/ffe-datepicker-react/src/datepicker/Datepicker.js
@@ -47,13 +47,14 @@ export default class Datepicker extends Component {
         this.removeGlobalEventListeners();
     }
 
-    componentWillReceiveProps(nextProps) {
+    /* eslint-disable react/no-did-update-set-state */
+    componentDidUpdate() {
         if (
-            (nextProps.minDate && nextProps.minDate !== this.state.minDate) ||
-            (nextProps.maxDate && nextProps.maxDate !== this.state.maxDate)
+            (this.props.minDate && this.props.minDate !== this.state.minDate) ||
+            (this.props.maxDate && this.props.maxDate !== this.state.maxDate)
         ) {
             this.setState(
-                { minDate: nextProps.minDate, maxDate: nextProps.maxDate },
+                { minDate: this.props.minDate, maxDate: this.props.maxDate },
                 this.validateDateIntervals,
             );
         }
@@ -369,16 +370,15 @@ export default class Datepicker extends Component {
                     )}
                 </div>
 
-                {this.state.ariaInvalid &&
-                    !hideErrors && (
-                        <div
-                            id={`date-input-validation-${this.datepickerId}`}
-                            className="ffe-body-text ffe-field-error-message"
-                            role="alert"
-                        >
-                            {this.state.errorMessage}
-                        </div>
-                    )}
+                {this.state.ariaInvalid && !hideErrors && (
+                    <div
+                        id={`date-input-validation-${this.datepickerId}`}
+                        className="ffe-body-text ffe-field-error-message"
+                        role="alert"
+                    >
+                        {this.state.errorMessage}
+                    </div>
+                )}
             </div>
         );
     }

diff --git a/packages/ffe-decorators-react/src/ease-properties/easeProperties.js b/packages/ffe-decorators-react/src/ease-properties/easeProperties.js
@@ -84,7 +84,8 @@ export default (properties = {}) => TargetComponent =>
         // When the component is mounted, we need to check if there's any properties set with an initial value. If so,
         // we need to start easing from said initial value to its target value. We do this by calling
         // requestAnimationFrame and saving its ID to state.
-        componentWillMount() {
+        /* eslint-disable react/no-did-mount-set-state */
+        componentDidMount() {
             this.setState(prevState =>
                 Object.entries(prevState)
                     .filter(
@@ -109,18 +110,25 @@ export default (properties = {}) => TargetComponent =>
         // When a property changes, and it's specified in the properties HoC argument, it's eased to its next state
         // by requesting animation frames. If an animation frame was currently being processed, it's cancelled before
         // requesting a new one.
-        componentWillReceiveProps(nextProps) {
-            this.setState((prevState, currentProps) =>
-                Object.entries(nextProps)
-                    .filter(
-                        ([propName, propValue]) =>
-                            prevState[propName] &&
-                            (propValue !== prevState[propName].currentValue ||
-                                propValue !== currentProps[propName]),
-                    )
-                    .reduce((state, [propName, propValue]) => {
+        /* eslint-disable react/no-did-update-set-state */
+        componentDidUpdate(prevProps) {
+            const changed = Object.keys(properties).filter(
+                easedProp => prevProps[easedProp] !== this.props[easedProp],
+            );
+
+            if (changed.length < 1) {
+                return;
+            }
+
+            this.setState(prevState =>
+                Object.entries(prevState)
+                    .filter(([propName]) => changed.includes(propName))
+                    .map(([propName, propValue]) => {
                         window.cancelAnimationFrame(prevState[propName].rafId);
-                        return {
+                        return [propName, propValue];
+                    })
+                    .reduce(
+                        (state, [propName]) => ({
                             ...state,
                             [propName]: {
                                 ...prevState[propName],
@@ -129,10 +137,11 @@ export default (properties = {}) => TargetComponent =>
                                 rafId: window.requestAnimationFrame(
                                     this.nextFrame.bind(this, propName),
                                 ),
-                                toValue: propValue,
+                                toValue: this.props[propName],
                             },
-                        };
-                    }, {}),
+                        }),
+                        {},
+                    ),
             );
         }