masonic - npm Package Compare versions

Comparing version 3.0.1 to 3.0.2

dist/main/index.js

@@ -82,5 +82,5 @@ 'use strict'
 }) => {
-  const didMount = useRef('0')
-  const stopIndex = useRef()
-  const startIndex = useRef(0)
+  let startIndex = 0
+  let stopIndex = void 0
+  const forceUpdate = useForceUpdate()
   const setItemRef = getRefSetter(positioner, resizeObserver)
@@ -99,12 +99,7 @@ const itemCount = items.length
   const children = []
-  const itemRole = `${role}item` // Calls the onRender callback if the rendered indices changed
-
-  useEffect(() => {
-    didMount.current = '1'
-    if (typeof onRender === 'function' && stopIndex.current !== void 0)
-      onRender(startIndex.current, stopIndex.current, items) // eslint-disable-next-line
-  }, [onRender, items, startIndex.current, stopIndex.current])
+  const itemRole = `${role}item`
   overscanBy = height * overscanBy
-  stopIndex.current = void 0
   const rangeEnd = scrollTop + overscanBy
+  const needsFreshBatch =
+    shortestColumnSize < rangeEnd && measuredCount < itemCount
   range(
@@ -142,8 +137,8 @@ // We overscan in both directions because users scroll both ways,
 
-      if (stopIndex.current === void 0) {
-        startIndex.current = index
-        stopIndex.current = index
+      if (stopIndex === void 0) {
+        startIndex = index
+        stopIndex = index
       } else {
-        startIndex.current = Math.min(startIndex.current, index)
-        stopIndex.current = Math.max(stopIndex.current, index)
+        startIndex = Math.min(startIndex, index)
+        stopIndex = Math.max(stopIndex, index)
       }
@@ -153,3 +148,3 @@ }
 
-  if (shortestColumnSize < rangeEnd && measuredCount < itemCount) {
+  if (needsFreshBatch) {
     const batchSize = Math.min(
@@ -184,3 +179,14 @@ itemCount - measuredCount,
     }
-  } // gets the container style object based upon the estimated height and whether or not
+  } // Calls the onRender callback if the rendered indices changed
+
+  useEffect(() => {
+    if (typeof onRender === 'function' && stopIndex !== void 0)
+      onRender(startIndex, stopIndex, items)
+    didEverMount = '1'
+  }, [onRender, items, startIndex, stopIndex]) // If we needed a fresh batch we should reload our components with the measured
+  // sizes
+
+  useEffect(() => {
+    if (needsFreshBatch) forceUpdate() // eslint-disable-next-line
+  }, [needsFreshBatch]) // gets the container style object based upon the estimated height and whether or not
   // the page is being scrolled
@@ -194,3 +200,3 @@
     ref: containerRef,
-    key: didMount.current,
+    key: didEverMount,
     id: id,
@@ -206,5 +212,6 @@ role: role,
   })
-}
+} // This is for triggering a remount after SSR has loaded in the client w/ hydrate()
 
 exports.useMasonry = useMasonry
+let didEverMount = '0'
 //
@@ -392,2 +399,3 @@ // Render-phase utilities
   const isScrolling = _ref_0[0]
+  const didMount = useRef('0')
 
@@ -401,4 +409,5 @@ function _ref() {
   useEffect(() => {
-    if (scrollY > 0) setIsScrolling(true)
+    if (didMount.current === '1') setIsScrolling(true)
     const to = (0, _requestTimeout.requestTimeout)(_ref, 40 + 1000 / fps)
+    didMount.current = '1'
     return () => (0, _requestTimeout.clearRequestTimeout)(to)
@@ -405,0 +414,0 @@ }, [fps, scrollY])

dist/module/index.js

@@ -46,5 +46,5 @@ import React from 'react'
 }) => {
-  const didMount = useRef('0')
-  const stopIndex = useRef()
-  const startIndex = useRef(0)
+  let startIndex = 0
+  let stopIndex = void 0
+  const forceUpdate = useForceUpdate()
   const setItemRef = getRefSetter(positioner, resizeObserver)
@@ -63,12 +63,7 @@ const itemCount = items.length
   const children = []
-  const itemRole = `${role}item` // Calls the onRender callback if the rendered indices changed
-
-  useEffect(() => {
-    didMount.current = '1'
-    if (typeof onRender === 'function' && stopIndex.current !== void 0)
-      onRender(startIndex.current, stopIndex.current, items) // eslint-disable-next-line
-  }, [onRender, items, startIndex.current, stopIndex.current])
+  const itemRole = `${role}item`
   overscanBy = height * overscanBy
-  stopIndex.current = void 0
   const rangeEnd = scrollTop + overscanBy
+  const needsFreshBatch =
+    shortestColumnSize < rangeEnd && measuredCount < itemCount
   range(
@@ -106,8 +101,8 @@ // We overscan in both directions because users scroll both ways,
 
-      if (stopIndex.current === void 0) {
-        startIndex.current = index
-        stopIndex.current = index
+      if (stopIndex === void 0) {
+        startIndex = index
+        stopIndex = index
       } else {
-        startIndex.current = Math.min(startIndex.current, index)
-        stopIndex.current = Math.max(stopIndex.current, index)
+        startIndex = Math.min(startIndex, index)
+        stopIndex = Math.max(stopIndex, index)
       }
@@ -117,3 +112,3 @@ }
 
-  if (shortestColumnSize < rangeEnd && measuredCount < itemCount) {
+  if (needsFreshBatch) {
     const batchSize = Math.min(
@@ -148,3 +143,14 @@ itemCount - measuredCount,
     }
-  } // gets the container style object based upon the estimated height and whether or not
+  } // Calls the onRender callback if the rendered indices changed
+
+  useEffect(() => {
+    if (typeof onRender === 'function' && stopIndex !== void 0)
+      onRender(startIndex, stopIndex, items)
+    didEverMount = '1'
+  }, [onRender, items, startIndex, stopIndex]) // If we needed a fresh batch we should reload our components with the measured
+  // sizes
+
+  useEffect(() => {
+    if (needsFreshBatch) forceUpdate() // eslint-disable-next-line
+  }, [needsFreshBatch]) // gets the container style object based upon the estimated height and whether or not
   // the page is being scrolled
@@ -158,3 +164,3 @@
     ref: containerRef,
-    key: didMount.current,
+    key: didEverMount,
     id: id,
@@ -170,3 +176,5 @@ role: role,
   })
-}
+} // This is for triggering a remount after SSR has loaded in the client w/ hydrate()
+
+let didEverMount = '0'
 //
@@ -348,2 +356,3 @@ // Render-phase utilities
   const isScrolling = _ref_0[0]
+  const didMount = useRef('0')
 
@@ -357,4 +366,5 @@ function _ref() {
   useEffect(() => {
-    if (scrollY > 0) setIsScrolling(true)
+    if (didMount.current === '1') setIsScrolling(true)
     const to = requestTimeout(_ref, 40 + 1000 / fps)
+    didMount.current = '1'
     return () => clearRequestTimeout(to)
@@ -361,0 +371,0 @@ }, [fps, scrollY])

package.json

 {
   "name": "masonic",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "homepage": "https://github.com/jaredLunde/masonic#readme",
@@ -5,0 +5,0 @@ "repository": "github:jaredLunde/masonic",

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

231112

increased by0.38%

Lines of code

4949

increased by0.57%

No dependency changes