react-masonry-layout - npm Package Compare versions

Comparing version 0.2.3 to 0.3.0

lib/components/InfiniteScroll.js

@@ -13,2 +13,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -80,2 +84,4 @@
       value: function render() {
+        var _this2 = this;
+
         return _react2.default.createElement(
@@ -86,3 +92,5 @@ 'div',
             'div',
-            { ref: this.props.id },
+            { ref: function ref(element) {
+                _this2.containerElement = element;
+              } },
             _react2.default.createElement(ComposedComponent, this.props)
@@ -97,5 +105,3 @@ ),
       get: function get() {
-        var id = this.props.id;
-
-        return this.props.infiniteScrollEdge === 'bottom' ? this.refs[id].getBoundingClientRect().bottom - window.innerHeight : this.refs[id].getBoundingClientRect().top * -1;
+        return this.props.infiniteScrollEdge === 'bottom' ? this.containerElement.getBoundingClientRect().bottom - window.innerHeight : this.containerElement.getBoundingClientRect().top * -1;
       }
@@ -106,13 +112,14 @@ }]);
   }(_react.Component), _class.propTypes = {
-    id: _react.PropTypes.string.isRequired,
-    infiniteScroll: _react.PropTypes.func.isRequired,
-    infiniteScrollContainer: _react.PropTypes.string,
-    infiniteScrollLoading: _react.PropTypes.bool,
-    infiniteScrollEnd: _react.PropTypes.bool,
-    infiniteScrollEdge: _react.PropTypes.oneOf(['top', 'bottom']),
-    infiniteScrollDistance: _react.PropTypes.number,
-    infiniteScrollDisabled: _react.PropTypes.bool,
-    infiniteScrollSpinner: _react.PropTypes.element,
-    infiniteScrollEndIndicator: _react.PropTypes.element
+    id: _propTypes2.default.string.isRequired,
+    infiniteScroll: _propTypes2.default.func,
+    infiniteScrollContainer: _propTypes2.default.string,
+    infiniteScrollLoading: _propTypes2.default.bool,
+    infiniteScrollEnd: _propTypes2.default.bool,
+    infiniteScrollEdge: _propTypes2.default.oneOf(['top', 'bottom']),
+    infiniteScrollDistance: _propTypes2.default.number,
+    infiniteScrollDisabled: _propTypes2.default.bool,
+    infiniteScrollSpinner: _propTypes2.default.element,
+    infiniteScrollEndIndicator: _propTypes2.default.element
   }, _class.defaultProps = {
+    infiniteScroll: function infiniteScroll() {},
     infiniteScrollContainer: 'window',
@@ -119,0 +126,0 @@ infiniteScrollLoading: false,

lib/components/MasonryLayout.js

@@ -15,2 +15,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _bricks = require('bricks.js');
@@ -56,4 +60,3 @@
 
-      /* eslint react/no-did-mount-set-state: 0 */
-      this.setState({ instance: instance });
+      this.bricksInstance = instance;
     }
@@ -65,11 +68,8 @@ }, {
 
-      var instance = this.state.instance;
-
-
       if (prevProps.children.length === 0 && this.props.children.length > 0) {
-        return instance.pack();
+        return this.bricksInstance.pack();
       }
 
       if (prevProps.children.length !== this.props.children.length) {
-        return instance.update();
+        return this.bricksInstance.update();
       }
@@ -80,3 +80,3 @@ }
     value: function componentWillUnmount() {
-      this.state.instance.resize(false);
+      this.bricksInstance.resize(false);
     }
@@ -106,15 +106,15 @@ }, {
 }(_react.Component), _class2.propTypes = {
-  id: _react.PropTypes.string.isRequired,
-  packed: _react.PropTypes.string,
-  sizes: _react.PropTypes.array,
-  style: _react.PropTypes.object,
-  className: _react.PropTypes.string,
-  children: _react.PropTypes.arrayOf(_react.PropTypes.element).isRequired
+  id: _propTypes2.default.string.isRequired,
+  packed: _propTypes2.default.string,
+  sizes: _propTypes2.default.array,
+  style: _propTypes2.default.object,
+  className: _propTypes2.default.string,
+  children: _propTypes2.default.arrayOf(_propTypes2.default.element).isRequired
 }, _class2.defaultProps = {
+  style: {},
+  className: '',
   packed: 'data-packed',
-  sizes: [{ columns: 2, gutter: 20 }, { mq: '768px', columns: 3, gutter: 20 }, { mq: '1024px', columns: 6, gutter: 20 }],
-  style: {},
-  className: ''
+  sizes: [{ columns: 2, gutter: 20 }, { mq: '768px', columns: 3, gutter: 20 }, { mq: '1024px', columns: 6, gutter: 20 }]
 }, _temp)) || _class;
 
 exports.default = MasonryLayout;

package.json

 {
   "name": "react-masonry-layout",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "description": "",
@@ -9,3 +9,3 @@ "main": "lib/index.js",
     "build": "babel src -d lib",
-    "prepublish": "npm run clean && npm run build",
+    "prepare": "npm run clean && npm run build",
     "lint": "eslint src",
@@ -31,9 +31,11 @@ "test": "echo \"Error: no test specified\" && exit 1"
   "peerDependencies": {
-    "react": ">= 0.14.0",
-    "react-dom": ">= 0.14.0"
+    "react": ">= 15.5.0"
   },
   "dependencies": {
-    "bricks.js": "^1.1.2"
+    "bricks.js": "^1.8.0",
+    "prop-types": "^15.6.0",
+    "react": "^16.2.0"
   },
   "devDependencies": {
+    "babel-cli": "^6.26.0",
     "babel-core": "^6.7.6",
@@ -47,6 +49,4 @@ "babel-eslint": "^6.0.2",
     "eslint-plugin-react": "^4.3.0",
-    "react": ">= 0.14.0",
-    "react-dom": ">= 0.14.0",
     "rimraf": "^2.5.2"
   }
 }

README.md

@@ -21,53 +21,43 @@ React Masonry Layout
 
-  static defaultProps = {
-    maxCount: 5,
-    perPage: 20
-  }
-
   state = {
-    count: 0,
-    isLoading: false,
+    perPage: 10,
     items: Array(20).fill()
   }
 
-
-  getItems() {
-    if (this.state.count >= this.props.maxCount) return
-    this.setState(Object.assign(
-      {},
-      this.state,
-      { isLoading: true }
-    ), () => {
-      setTimeout(() => {
-        this.setState(Object.assign(
-          {},
-          this.state,
-          {
-            isLoading: false,
-            items: this.state.items.concat(
-              Array(perPage).fill()
-            )
-          }
-        ))
-      })
-    })
+  loadItems = () => {
+      this.setState({
+        items: this.state.items.concat(Array(this.state.perPage).fill())
+      });
   }
 
   render() {
-    <MasonryLayout
-      id="items"
-      infiniteScroll={::this.getItems}
-      infiniteScrollLoading={this.state.isLoading} >
+    return (
+      <div className="App">
 
-      {this.state.items.map((v, i) => <div
-        key={i}
-        style={{
-          width: '236px',
-          height: `${i % 2 === 0 ? 4 * 50 : 50 }px`,
-          display: 'block',
-          background: 'rgba(0,0,0,0.7)'
-        }}
-        />)}
+        <MasonryLayout
+          id="masonry-layout"
+          infiniteScroll={this.loadItems}>
 
-    </MasonryLayout>
+          {this.state.items.map((v, i) => {
+            let height = i % 2 === 0 ? 200 : 100;
+            return (
+              <div
+                key={i}
+                style={{
+                  width: '100px',
+                  height: `${height}px`,
+                  lineHeight: `${height}px`,
+                  color: 'white',
+                  fontSize: '32px',
+                  display: 'block',
+                  background: 'rgba(0,0,0,0.7)'
+                }}>
+                {i}
+              </div>
+            )}
+          )}
+
+        </MasonryLayout>
+      </div>
+    );
   }
@@ -83,3 +73,3 @@ }
 |      packed        |       string      |    `data-packed`   | optional, see [Bricks.js](https://github.com/callmecavs/bricks.js) |
-|       size         |       array       |    `[ { columns: 2, gutter: 20 }, { mq: '768px', columns: 3, gutter: 20 }, { mq: '1024px', columns: 6, gutter: 20 } ]` | optional, see [Bricks.js](https://github.com/callmecavs/bricks.js) |
+|       sizes        |       array       |    `[ { columns: 2, gutter: 20 }, { mq: '768px', columns: 3, gutter: 20 }, { mq: '1024px', columns: 6, gutter: 20 } ]` | optional, see [Bricks.js](https://github.com/callmecavs/bricks.js) |
 |     className      |       string      |         `''`       | optional, the css classname you want to use |
@@ -99,2 +89,2 @@ |       style        |       object      |         `{}`       | optional, the inline style you want to use |
 
-GPL-3.0 (Because bricks.js use GPL-3.0)
+MIT.

src/components/InfiniteScroll.jsx

@@ -1,2 +0,3 @@
-import React, { PropTypes, Component } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types';
 
@@ -7,3 +8,3 @@ export default (ComposedComponent) => class I extends Component {
     id: PropTypes.string.isRequired,
-    infiniteScroll: PropTypes.func.isRequired,
+    infiniteScroll: PropTypes.func,
     infiniteScrollContainer: PropTypes.string,
@@ -20,2 +21,3 @@ infiniteScrollLoading: PropTypes.bool,
   static defaultProps = {
+    infiniteScroll: () => {},
     infiniteScrollContainer: 'window',
@@ -68,3 +70,2 @@ infiniteScrollLoading: false,
 
-
   handleScroll() {
@@ -80,6 +81,5 @@ const { infiniteScroll, infiniteScrollLoading, infiniteScrollEnd } = this.props
   get edgeDistance() {
-    const { id } = this.props
     return this.props.infiniteScrollEdge === 'bottom'
-      ? this.refs[id].getBoundingClientRect().bottom - window.innerHeight
-      : this.refs[id].getBoundingClientRect().top * (-1)
+      ? this.containerElement.getBoundingClientRect().bottom - window.innerHeight
+      : this.containerElement.getBoundingClientRect().top * (-1)
   }
@@ -90,3 +90,3 @@
       <div>
-        <div ref={this.props.id} >
+        <div ref={(element) => { this.containerElement = element; }} >
           <ComposedComponent {...this.props} />
@@ -93,0 +93,0 @@ </div>

src/components/MasonryLayout.jsx

@@ -1,2 +0,3 @@
-import React, { PropTypes, Component } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types';
 import Bricks from 'bricks.js'
@@ -17,2 +18,4 @@ import InfiniteScroll from './InfiniteScroll'
   static defaultProps = {
+    style: {},
+    className: '',
     packed: 'data-packed',
@@ -23,5 +26,3 @@ sizes: [
       { mq: '1024px', columns: 6, gutter: 20 }
-    ],
-    style: {},
-    className: ''
+    ]
   }
@@ -42,4 +43,3 @@
 
-    /* eslint react/no-did-mount-set-state: 0 */
-    this.setState({ instance });
+    this.bricksInstance = instance;
   }
@@ -51,10 +51,8 @@
 
-    const { instance } = this.state
-
     if (prevProps.children.length === 0 && this.props.children.length > 0) {
-      return instance.pack()
+      return this.bricksInstance.pack()
     }
 
     if (prevProps.children.length !== this.props.children.length) {
-      return instance.update()
+      return this.bricksInstance.update()
     }
@@ -64,3 +62,3 @@ }
   componentWillUnmount() {
-    this.state.instance.resize(false)
+    this.bricksInstance.resize(false)
   }
@@ -67,0 +65,0 @@

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 12 instances in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 2 instances 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

435988

increased by2044.77%

Dev dependency count

10

decreased by-9.09%

Number of package files

35

increased by191.67%

Lines of code

1635

increased by367.14%

Worsened metrics

Dependency count

4

increased by33.33%

Number of lines in readme file

88

decreased by-10.2%

Number of low supply chain risk alerts

36

increased byInfinity%

Number of medium supply chain risk alerts

2

increased byInfinity%

Dependency changes

• + Addedprop-types@^15.6.0

• + Addedreact@^16.2.0

• + Addedobject-assign@4.1.1(transitive)

• + Addedprop-types@15.8.1(transitive)

• + Addedreact@16.14.0(transitive)

• + Addedreact-is@16.13.1(transitive)

• - Removedreact@18.3.1(transitive)

• - Removedreact-dom@18.3.1(transitive)

• - Removedscheduler@0.23.2(transitive)

• Updatedbricks.js@^1.8.0