react-virtualized-image-measurer - npm Package Compare versions

Comparing version 0.3.0 to 0.4.0

lib/index.js

@@ -58,4 +58,3 @@ import _objectWithoutProperties from "babel-runtime/helpers/objectWithoutProperties";
         }, _this.timeouts = {}, _this.state = {
-            sizes: {},
-            itemsWithSizes: _this.makeItemsWithSizes(_this.props.items, {})
+            sizes: {}
         }, _this.onLoad = function (src, ref) {
@@ -74,8 +73,3 @@
 
-            var itemsWithSizes = _this.makeItemsWithSizes(_this.props.items, sizes);
-
-            _this.setState({
-                sizes: sizes,
-                itemsWithSizes: itemsWithSizes
-            });
+            _this.setState({ sizes: sizes });
         }, _this.onLoadError = function (event, item, src) {
@@ -133,3 +127,3 @@ _this.onLoad(src, _this.props.onError(event, item, src) || _this.getDefaultSize());
                 image = _props2.image,
-                keyGetter = _props2.keyGetter,
+                keyMapper = _props2.keyMapper,
                 children = _props2.children,
@@ -140,4 +134,9 @@ defaultWidth = _props2.defaultWidth,
                 timeout = _props2.timeout,
-                props = _objectWithoutProperties(_props2, ["items", "image", "keyGetter", "children", "defaultWidth", "defaultHeight", "onError", "timeout"]);
+                props = _objectWithoutProperties(_props2, ["items", "image", "keyMapper", "children", "defaultWidth", "defaultHeight", "onError", "timeout"]);
 
+            var sizes = this.state.sizes;
+
+
+            var itemsWithSizes = this.makeItemsWithSizes(items, sizes);
+
             return React.createElement(
@@ -148,3 +147,3 @@ "div",
                         fileName: _jsxFileName,
-                        lineNumber: 138
+                        lineNumber: 135
                     }
@@ -156,3 +155,3 @@ }),
                             fileName: _jsxFileName,
-                            lineNumber: 140
+                            lineNumber: 137
                         }
@@ -167,3 +166,3 @@ },
                         return React.createElement("img", {
-                            key: keyGetter(item, index) || index,
+                            key: keyMapper(item, index) || index,
                             src: src,
@@ -179,3 +178,3 @@ alt: src,
                                 fileName: _jsxFileName,
-                                lineNumber: 148
+                                lineNumber: 145
                             }
@@ -185,3 +184,3 @@ });
                 ),
-                children(this.state)
+                children({ itemsWithSizes: itemsWithSizes, sizes: sizes })
             );
@@ -198,3 +197,3 @@ }
     timeout: PropTypes.number,
-    keyGetter: PropTypes.func,
+    keyMapper: PropTypes.func,
     image: PropTypes.func.isRequired,
@@ -210,3 +209,3 @@ children: PropTypes.func.isRequired,
     timeout: 5000,
-    keyGetter: function keyGetter() {
+    keyMapper: function keyMapper() {
         return null;
@@ -213,0 +212,0 @@ }

package.json

 {
   "name": "react-virtualized-image-measurer",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Image Preloader for React & React Virtualized",
@@ -5,0 +5,0 @@ "author": "Kirill Konshin",

README.md

@@ -59,2 +59,23 @@ # Image Preloader for React & React Virtualized
 
+## Filtering of original array
+
+You should not do anything extra if you simply add items to the end of original array. But if you filter items, change
+their order or insert items in the middle (basically anything that affect old items positioning), you have to manually
+reset `Masonry` caches due to it's optimizations.
+
+To do that you will have to save `Masonry`'s `ref` somewhere:
+
+```js
+const setRef = (node) => masonryRef = node;
+<Masonry ref={setRef}/>
+```
+
+And using this `ref` call following methods:
+
+```js
+cellMeasurerCache.clearAll();
+cellPositioner.reset(cellPositionerConfig);
+masonryRef.clearCellPositions();
+```
+
 ## Keys
@@ -67,5 +88,5 @@
     <ImageMeasurer
-        keyGetter={(item, index) => item.id}
+        keyMapper={(item, index) => item.id}
     >...</ImageMeasurer>
 );
 ```

src/index.js

@@ -21,3 +21,3 @@ import React, {PureComponent} from "react";
         timeout: PropTypes.number,
-        keyGetter: PropTypes.func,
+        keyMapper: PropTypes.func,
         image: PropTypes.func.isRequired,
@@ -32,3 +32,3 @@ children: PropTypes.func.isRequired,
         timeout: 5000,
-        keyGetter: () => null
+        keyMapper: () => null
     };
@@ -60,4 +60,3 @@
     state = {
-        sizes: {},
-        itemsWithSizes: this.makeItemsWithSizes(this.props.items, {})
+        sizes: {}
     };
@@ -81,9 +80,4 @@
 
-        const itemsWithSizes = this.makeItemsWithSizes(this.props.items, sizes);
+        this.setState({sizes});
 
-        this.setState({
-            sizes,
-            itemsWithSizes
-        });
-
     };
@@ -139,4 +133,7 @@
 
-        const {items, image, keyGetter, children, defaultWidth, defaultHeight, onError, timeout, ...props} = this.props;
+        const {items, image, keyMapper, children, defaultWidth, defaultHeight, onError, timeout, ...props} = this.props;
+        const {sizes} = this.state;
 
+        const itemsWithSizes = this.makeItemsWithSizes(items, sizes);
+
         return (
@@ -154,3 +151,3 @@ <div {...props}>
                             <img
-                                key={keyGetter(item, index) || index}
+                                key={keyMapper(item, index) || index}
                                 src={src}
@@ -166,3 +163,3 @@ alt={src}
 
-                {children(this.state)}
+                {children({itemsWithSizes, sizes})}
 
@@ -169,0 +166,0 @@ </div>

No alert changes

Improved metrics

Total package byte prevSize

22014

1.57%

Number of lines in readme file

91

30%

Worsened metrics

Lines of code

284

-2.07%

No dependency changes