feat(StickyPlaceholder): resize on height updates

garthenweb · garthenweb · commit b466e6ec13d3 · 2018-10-21T22:49:24.000+02:00
Issue: #18
diff --git a/lib/StickyPlaceholder.tsx b/lib/StickyPlaceholder.tsx
@@ -44,8 +44,8 @@ class StickyPlaceholder extends React.Component<IProps, IState> {
   }
 
   static getDerivedStateFromProps(props: IProps, state: IState): IState | null {
-    const { width, clientWidth } = props.dimensions;
-    const nextClientSize = `width:${width},clientWidth:${clientWidth}`;
+    const { width, height, clientWidth, clientHeight } = props.dimensions;
+    const nextClientSize = `width:${width},clientWidth:${clientWidth},height:${height},clientHeight:${clientHeight}`;
     if (state.isRecalculating) {
       const stickyRect = props.stickyRef.current.getBoundingClientRect();
       return {
@@ -96,6 +96,7 @@ class StickyPlaceholder extends React.Component<IProps, IState> {
   }
 }
 
-export default connectViewport({ omit: ['scroll'] })<IOwnProps>(
-  StickyPlaceholder,
-);
+export default connectViewport({
+  omit: ['scroll'],
+  deferUpdateUntilIdle: true,
+})<IOwnProps>(StickyPlaceholder);
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -48,7 +48,7 @@
     "typescript": "^3.1.3"
   },
   "dependencies": {
-    "react-viewport-utils": "^1.4.0",
+    "react-viewport-utils": "^1.5.0",
     "recompose": "^0.30.0"
   },
   "peerDependencies": {

Original file line number	Diff line number	Diff line change
`@@ -44,8 +44,8 @@ class StickyPlaceholder extends React.Component<IProps, IState> {`
`44`	`44`	`}`
`45`	`45`
`46`	`46`	`static getDerivedStateFromProps(props: IProps, state: IState): IState \| null {`
`47`		`- const { width, clientWidth } = props.dimensions;`
`48`		- const nextClientSize = `width:${width},clientWidth:${clientWidth}`;
	`47`	`+ const { width, height, clientWidth, clientHeight } = props.dimensions;`
	`48`	+ const nextClientSize = `width:${width},clientWidth:${clientWidth},height:${height},clientHeight:${clientHeight}`;
`49`	`49`	`if (state.isRecalculating) {`
`50`	`50`	`const stickyRect = props.stickyRef.current.getBoundingClientRect();`
`51`	`51`	`return {`
`@@ -96,6 +96,7 @@ class StickyPlaceholder extends React.Component<IProps, IState> {`
`96`	`96`	`}`
`97`	`97`	`}`
`98`	`98`
`99`		`-export default connectViewport({ omit: ['scroll'] })<IOwnProps>(`
`100`		`- StickyPlaceholder,`
`101`		`-);`
	`99`	`+export default connectViewport({`
	`100`	`+ omit: ['scroll'],`
	`101`	`+ deferUpdateUntilIdle: true,`
	`102`	`+})<IOwnProps>(StickyPlaceholder);`