diff --git a/.travis.yml b/.travis.yml index c7e68442a0a2b..b8208214c949e 100644 --- a/.travis.yml +++ b/.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: dzearing@microsoft.com diff --git a/src/components/DetailsList/DetailsList.tsx b/src/components/DetailsList/DetailsList.tsx index 7bb0159cea748..c60e249dac448 100644 --- a/src/components/DetailsList/DetailsList.tsx +++ b/src/components/DetailsList/DetailsList.tsx @@ -122,7 +122,8 @@ export class DetailsList extends React.Component(ComposedComponent: any): any { public render() { let { viewport } = this.state; + let isViewportVisible = viewport.width > 0 && viewport.height > 0; return (
- { this.state.viewport.height > 0 && ( - - )} + { isViewportVisible && ( + + ) }
); } 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) {