Merge pull request #345 from dabapps/resize-observer

Footer and NavBar ResizeObserver

examples/app.tsx

@@ -321,6 +321,10 @@ class App extends PureComponent<{}, AppState> {
         <Footer fixed>
           <Container>
             <p>Footer</p>
+            <p>
+              This is a really long sentence that should wrap onto multiple
+              lines when the page is resized.
+            </p>
           </Container>
         </Footer>
       </AppRoot>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dabapps/roe",
-  "version": "0.12.1",
+  "version": "0.12.2",
   "description": "A collection of React components, styles, mixins, and atomic CSS classes to aid with the development of web applications.",
   "main": "dist/js/index.js",
   "types": "dist/js/index.d.ts",
@@ -16,8 +16,9 @@
     "test-dist-react-16": "npm i @types/[email protected] @types/[email protected] --no-save && tsc --project 'tsconfig.json' --noEmit && npm run dist",
     "test-dist-react-15": "npm i @types/[email protected] @types/[email protected] --no-save && tsc --project 'tsconfig.json' --noEmit && npm run dist",
     "test-dist": "npm run test-dist-react-15 && npm run test-dist-react-16",
+    "typecheck": "tsc --project tsconfig.json --noEmit",
     "tests": "jest",
-    "test": "npm run prettier-check && npm run lint && npm run tests -- --coverage --runInBand && npm run test-dist",
+    "test": "npm run prettier-check && npm run lint && npm run typecheck && npm run tests -- --coverage --runInBand && npm run test-dist",
     "budo": "budo src/less/index.less examples/index.tsx --live -- -t node-lessify -p [tsify -p tsconfig.examples.json]",
     "prepublishOnly": "./scripts/dist"
   },
@@ -47,6 +48,7 @@
   },
   "homepage": "https://github.com/dabapps/roe#readme",
   "dependencies": {
+    "@juggle/resize-observer": "^3.2.0",
     "@types/classnames": "^2.2.0",
     "@types/cookie": "^0.3.1",
     "@types/random-seed": "^0.3.2",
@@ -130,6 +132,7 @@
     },
     "testRegex": "tests/.+\\.(ts|tsx|js|jsx)$",
     "testPathIgnorePatterns": [
+      "<rootDir>/tests/__mocks__/",
       "<rootDir>/tests/helpers/"
     ],
     "moduleFileExtensions": [

src/ts/components/navigation/footer.tsx

@@ -1,3 +1,4 @@
+import { ResizeObserver } from '@juggle/resize-observer';
 import * as classNames from 'classnames';
 import * as React from 'react';
 import { HTMLProps, PureComponent } from 'react';
@@ -34,7 +35,7 @@ export class Footer extends PureComponent<FooterProps, {}> {
   }
 
   public componentWillUnmount() {
-    window.removeEventListener('resize', this.updateAppRoot);
+    this.resizeObserver.disconnect();
     this.notifyAppRoot({ sticky: false });
   }
 
@@ -79,11 +80,17 @@ export class Footer extends PureComponent<FooterProps, {}> {
     const { sticky, fixed } = props;
 
     if (sticky || fixed) {
-      window.addEventListener('resize', this.updateAppRoot);
+      const element = ReactDOM.findDOMNode(this);
+      if (element instanceof HTMLElement) {
+        this.resizeObserver.observe(element);
+      }
     } else {
-      window.removeEventListener('resize', this.updateAppRoot);
+      this.resizeObserver.disconnect();
     }
   }
+
+  // tslint:disable-next-line:member-ordering
+  private resizeObserver = new ResizeObserver(this.updateAppRoot);
 }
 
 export default Footer;

src/ts/components/navigation/nav-bar.tsx

@@ -1,3 +1,4 @@
+import { ResizeObserver } from '@juggle/resize-observer';
 import * as classNames from 'classnames';
 import * as React from 'react';
 import { HTMLProps, PureComponent } from 'react';
@@ -65,7 +66,7 @@ export class NavBar extends PureComponent<NavBarProps, NavBarState> {
   public componentWillUnmount() {
     window.removeEventListener('scroll', this.hideOrShowNavBar);
     window.removeEventListener('resize', this.hideOrShowNavBar);
-    window.removeEventListener('resize', this.updateAppRoot);
+    this.resizeObserver.disconnect();
     this.notifyAppRoot({ fixed: false });
   }
 
@@ -119,9 +120,12 @@ export class NavBar extends PureComponent<NavBarProps, NavBarState> {
     const { fixed, shy } = props;
 
     if (fixed || shy) {
-      window.addEventListener('resize', this.updateAppRoot);
+      const element = ReactDOM.findDOMNode(this);
+      if (element instanceof HTMLElement) {
+        this.resizeObserver.observe(element);
+      }
     } else {
-      window.removeEventListener('resize', this.updateAppRoot);
+      this.resizeObserver.disconnect();
     }
   }
 
@@ -168,6 +172,9 @@ export class NavBar extends PureComponent<NavBarProps, NavBarState> {
       }
     }
   };
+
+  // tslint:disable-next-line:member-ordering
+  private resizeObserver = new ResizeObserver(this.updateAppRoot);
 }
 
 export default NavBar;

tests/__mocks__/@juggle/resize-observer.ts

@@ -0,0 +1,16 @@
+export const mockConstructor = jest.fn();
+
+export const mockObserve = jest.fn();
+export const mockUnobserve = jest.fn();
+export const mockDisconnect = jest.fn();
+
+class MockResizeObserver {
+  public observe = mockObserve;
+  public unobserve = mockUnobserve;
+  public disconnect = mockDisconnect;
+  public constructor(callback: () => void) {
+    mockConstructor(callback);
+  }
+}
+
+export { MockResizeObserver as ResizeObserver };