bpk-react-utils - npm Package Compare versions

Comparing version 1.3.3 to 1.4.0

package.json

 {
   "name": "bpk-react-utils",
-  "version": "1.3.3",
+  "version": "1.4.0",
   "description": "Utilities for Backpack's React components.",
@@ -5,0 +5,0 @@ "main": "index.js",

src/Portal-test.js

@@ -192,2 +192,68 @@ import React from 'react';
 
+  it('should call the onRender handler when props are updated', (done) => {
+    const onRenderSpy = jest.fn();
+
+    const portal = mount(
+      <Portal isOpen onRender={onRenderSpy}>
+        <div>My portal content</div>
+      </Portal>,
+    );
+
+    expect(onRenderSpy.mock.calls.length).toBe(1);
+
+    portal.setProps({ target: <div>target1</div> }, () => {
+      expect(onRenderSpy.mock.calls.length).toBe(2);
+      portal.setProps({ target: <div>target2</div> }, () => {
+        expect(onRenderSpy.mock.calls.length).toBe(3);
+        done();
+      });
+    });
+  });
+
+  it('should call the onRender handler before the onOpen handler handler when props are updated', () => {
+    let order = 0;
+    const onRender = () => (order = 1);
+    const onOpen = () => (order = 2);
+    const portal = mount(
+      <Portal isOpen={false} onRender={onRender} onOpen={onOpen}>
+        <div>My portal content</div>
+      </Portal>,
+    );
+    portal.setProps({ isOpen: true }, () => {
+      expect(order).toBe(2);
+    });
+  });
+
+  it('should call the onRender handler before the onOpen handler handler when component is mounted', () => {
+    let order = 0;
+    const onRender = () => (order = 1);
+    const onOpen = () => (order = 2);
+    mount(
+      <Portal isOpen onRender={onRender} onOpen={onOpen}>
+        <div>My portal content</div>
+      </Portal>,
+    );
+    expect(order).toBe(2);
+  });
+
+  it('should not call the onRender handler when isOpen is false', (done) => {
+    const onRenderSpy = jest.fn();
+
+    const portal = mount(
+      <Portal isOpen={false} onRender={onRenderSpy}>
+        <div>My portal content</div>
+      </Portal>,
+    );
+
+    expect(onRenderSpy.mock.calls.length).toBe(0);
+
+    portal.setProps({ isOpen: true }, () => {
+      expect(onRenderSpy.mock.calls.length).toBe(1);
+      portal.setProps({ isOpen: false }, () => {
+        expect(onRenderSpy.mock.calls.length).toBe(1);
+        done();
+      });
+    });
+  });
+
   describe('lifecycle methods', () => {
@@ -240,5 +306,5 @@ let portal;
     // No tests for
-    // - componentDidUpdate, as we'd have to mock react-dom render()
+    // - renderPortal, as we'd have to mock react-dom render()
     // - componentWillUnmount, as it takes forever and slows down the test suite immensely
   });
 });

src/Portal.js

@@ -30,24 +30,18 @@ import assign from 'object-assign';
 
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.isOpen) {
-      if (!this.props.isOpen) {
+  componentDidUpdate(prevProps) {
+    if (this.props.isOpen) {
+      if (!prevProps.isOpen) {
         this.open();
+        return;
       }
-
-      return;
-    }
-
-    if (this.props.isOpen) {
-      if (nextProps.beforeClose) {
-        nextProps.beforeClose(this.close);
+    } else if (prevProps.isOpen) {
+      if (this.props.beforeClose) {
+        this.props.beforeClose(this.close);
       } else {
         this.close();
       }
+      return;
     }
-  }
 
-  componentDidUpdate() {
-    if (this.portalElement) {
-      render(this.props.children, this.portalElement);
-    }
+    this.renderPortal();
   }
@@ -107,3 +101,3 @@
 
-    this.componentDidUpdate();
+    this.renderPortal();
     this.props.onOpen(this.portalElement, this.getTargetElement());
@@ -125,2 +119,12 @@ }
 
+  renderPortal() {
+    if (this.portalElement) {
+      render(this.props.children, this.portalElement, () => {
+        if (this.props.isOpen) {
+          this.props.onRender(this.portalElement, this.getTargetElement());
+        }
+      });
+    }
+  }
+
   render() {
@@ -137,2 +141,3 @@ return typeof this.props.target === 'function' ? null : this.props.target;
   onClose: PropTypes.func,
+  onRender: PropTypes.func,
   targetRef: PropTypes.func,
@@ -148,2 +153,3 @@ beforeClose: PropTypes.func, // eslint-disable-line react/no-unused-prop-types
   onClose: () => null,
+  onRender: () => null,
   targetRef: null,
@@ -150,0 +156,0 @@ beforeClose: null,

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

19042

increased by12.66%

Lines of code

439

increased by16.76%

No dependency changes