Minor fix for viewport decorator to avoid rendering content in 0 space.

.travis.yml

@@ -3,7 +3,7 @@ node_js:
 - '4.2'
 before_script:
 - npm install -g gulp
-script: gulp
+script: gulp --production
 deploy:
   provider: npm
   email: [email protected]

src/components/DetailsList/DetailsList.tsx

@@ -122,7 +122,8 @@ export class DetailsList extends React.Component<IDetailsListProps, IDetailsList
       items,
       setKey,
       selectionMode,
-      columns
+      columns,
+      viewport
     } = this.props;
     let { layoutMode } = this.state;
     let shouldResetSelection = (newProps.setKey !== setKey) || newProps.setKey === undefined;
@@ -138,7 +139,10 @@ export class DetailsList extends React.Component<IDetailsListProps, IDetailsList
       this._selection.setItems(newProps.items, shouldResetSelection);
     }
 
-    if (newProps.columns !== columns) {
+    if (
+      newProps.columns !== columns ||
+      newProps.viewport.width !== viewport.width
+    ) {
       shouldForceUpdates = true;
     }
 

src/components/DetailsList/DetailsRowFields.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { IColumn } from './DetailsList.Props';
 import { css } from '../../utilities/css';
-import { shallowCompare } from '../../utilities/object';
 
 export interface IDetailsRowFieldsProps {
   item: any;
@@ -21,10 +20,6 @@ export class DetailsRowFields extends React.Component<IDetailsRowFieldsProps, ID
     this.state = this._getState(props);
   }
 
-  public shouldComponentUpdate(newProps: IDetailsRowFieldsProps) {
-    return !shallowCompare(this.props, newProps);
-  }
-
   public componentWillReceiveProps(newProps: IDetailsRowFieldsProps) {
     this.setState(this._getState(newProps));
   }

src/utilities/decorators/withViewport.tsx

@@ -50,37 +50,50 @@ export function withViewport<P, S>(ComposedComponent: any): any {
 
     public render() {
       let { viewport } = this.state;
+      let isViewportVisible = viewport.width > 0 && viewport.height > 0;
 
       return (
         <div className='ms-Viewport' ref='root' style={ { minWidth: 1, minHeight: 1 } }>
-          { this.state.viewport.height > 0 && (
-          <ComposedComponent ref='component' viewport={ viewport } { ...this.props } />
-          )}
+          { isViewportVisible && (
+            <ComposedComponent ref='component' viewport={ viewport } { ...this.props } />
+          ) }
         </div>
       );
     }
 
     public forceUpdate() {
-      this.refs.component.forceUpdate();
+      this._updateViewport(true);
     }
 
     private _onAsyncResize() {
       this._updateViewport();
     }
 
-    private _updateViewport() {
+    private _updateViewport(withForceUpdate?: boolean) {
+      let { viewport } = this.state;
       let viewportElement = (this.refs as any).root;
       let scrollElement = this._findScrollableElement(viewportElement);
-
       let clientRect = viewportElement.getBoundingClientRect();
       let scrollRect = scrollElement.getBoundingClientRect();
-
-      this.setState({
-        viewport: {
-          width: clientRect.width,
-          height: scrollRect.height
-        }
-      });
+      let updateComponent = () => {
+          if (withForceUpdate && this.refs.component) {
+            this.refs.component.forceUpdate();
+          }
+      };
+      let isSizeChanged = (
+        clientRect.width !== viewport.width ||
+        scrollRect.height !== viewport.height);
+
+      if (isSizeChanged) {
+        this.setState({
+          viewport: {
+            width: clientRect.width,
+            height: scrollRect.height
+          }
+        }, updateComponent);
+      } else {
+        updateComponent();
+      }
     }
 
     private _findScrollableElement(rootElement: HTMLElement) {