@skyscanner/backpack-web 38.9.1 → 38.10.0

package/bpk-animate-height/src/AnimateHeight.js

@@ -44,47 +44,49 @@ class AnimateHeight extends Component {
       this.contentElement.style.display = 'none';
     }
   }
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  componentDidUpdate(prevProps, prevState) {
     const {
-      height
+      duration,
+      height,
+      transitionOverflow
     } = this.props;
 
     // Check if 'height' prop has changed
-    if (this.contentElement && nextProps.height !== height) {
+    if (this.contentElement && height !== prevProps.height) {
       // Cache content height
       this.contentElement.style.display = '';
-      this.contentElement.style.overflow = this.props.transitionOverflow;
+      this.contentElement.style.overflow = transitionOverflow;
       const contentHeight = this.contentElement.offsetHeight;
       this.contentElement.style.overflow = '';
       let newHeight = null;
       let shouldSetTimeout = false;
       let timeoutHeight = null;
-      let timeoutOverflow = this.props.transitionOverflow;
-      let timeoutDuration = nextProps.duration;
+      let timeoutOverflow = transitionOverflow;
+      let timeoutDuration = duration;
       clearTimeout(this.timeoutID);
-      if (isNumber(nextProps.height)) {
+      if (isNumber(height)) {
         // If new height is a number
-        newHeight = nextProps.height < 0 ? 0 : nextProps.height;
+        newHeight = height < 0 ? 0 : height;
       } else {
-        // If not, animate to content height
-        // and then reset to auto
+        // If not, animate to content height and then reset to auto
         newHeight = contentHeight;
         shouldSetTimeout = true;
         timeoutHeight = 'auto';
         timeoutOverflow = 'visible';
       }
-      if (this.state.height === 'auto') {
-        // If previous height was 'auto'
-        // set it explicitly to be able to use transition
+
+      // If previous height was 'auto'
+      // set it explicitly to be able to use transition
+      if (prevState.height === 'auto') {
         shouldSetTimeout = true;
         timeoutHeight = newHeight;
         newHeight = contentHeight;
         timeoutDuration = 50;
       }
-      this.setState((state, props) => ({
+      this.setState({
         height: newHeight,
-        overflow: props.transitionOverflow
-      }));
+        overflow: transitionOverflow
+      });
       if (shouldSetTimeout) {
         this.timeoutID = setTimeout(() => {
           this.setState({

package/bpk-component-image/src/BpkBackgroundImage.d.ts

@@ -25,7 +25,6 @@ declare class BpkBackgroundImage extends Component<BpkBackgroundImageProps> {
     };
     constructor(props: BpkBackgroundImageProps);
     componentDidMount(): void;
-    UNSAFE_componentWillReceiveProps(newProps: BpkBackgroundImageProps): void;
     componentDidUpdate(prevProps: BpkBackgroundImageProps): void;
     onBackgroundImageError: () => void;
     onBackgroundImageLoad: () => void;

package/bpk-component-image/src/BpkBackgroundImage.js

@@ -43,13 +43,12 @@ class BpkBackgroundImage extends Component {
       this.startImageLoad();
     }
   }
-  UNSAFE_componentWillReceiveProps(newProps) {
-    if (!this.props.inView && newProps.inView) {
-      this.startImageLoad();
-    }
-  }
   componentDidUpdate(prevProps) {
-    if (prevProps.src !== this.props.src) {
+    const {
+      inView,
+      src
+    } = this.props;
+    if (prevProps.src !== src || inView && !prevProps.inView) {
       this.startImageLoad();
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "38.9.1",
+  "version": "38.10.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",