react-virtuallist - npm Package Compare versions

Comparing version 0.0.0 to 0.0.1

js/virtuallist.js

 /** @jsx React.DOM */
 
-if (require && !React)
-  var React = require('react');
+module.exports = function(React) {
+  var List = React.createClass({displayName: 'List',
+    setDimensions: function(props) {
+      this.containerStyle.width = props.width;
+      this.containerStyle.height = props.height;
 
-var List = React.createClass({displayName: 'List',
-  setDimensions: function(props) {
-    this.containerStyle.width = props.width;
-    this.containerStyle.height = props.height;
-
-    this.scrollStyle[props.horizontal ? 'width' : 'height'] = props.items.length * props.itemLength;
-    this.scrollStyle[props.horizontal ? 'height' : 'width'] = 1;
-  },
-  setContainerLength: function() {
-    this.setState({
-      viewLength: this.refs.list.getDOMNode()[this.props.horizontal ? 'clientWidth' : 'clientHeight']
-    });
-  },
-  getDefaultProps: function() {
-    this.setDimensions(this.props);
-  },
-  componentWillReceiveProps: function(props) {
-    if (this.props.width !== props.width ||
-        this.props.height !== props.height ||
-        this.props.items.length !== props.items.length ||
-        this.props.itemLength !== props.itemLength) {
-      this.setDimensions(props);
+      this.scrollStyle[props.horizontal ? 'width' : 'height'] = props.items.length * props.itemLength;
+      this.scrollStyle[props.horizontal ? 'height' : 'width'] = 1;
+    },
+    setContainerLength: function() {
+      this.setState({
+        viewLength: this.refs.list.getDOMNode()[this.props.horizontal ? 'clientWidth' : 'clientHeight']
+      });
+    },
+    getDefaultProps: function() {
+      this.setDimensions(this.props);
+    },
+    componentWillReceiveProps: function(props) {
+      if (this.props.width !== props.width ||
+          this.props.height !== props.height ||
+          this.props.items.length !== props.items.length ||
+          this.props.itemLength !== props.itemLength) {
+        this.setDimensions(props);
+        this.setContainerLength();
+      }
+    },
+    componentDidMount: function() {
       this.setContainerLength();
+    },
+    containerStyle: {
+      position: 'relative',
+      overflow: 'auto'
+    },
+    scrollStyle: {
+      position: 'absolute'
+    },
+    getInitialState: function() {
+      var isNumber = typeof this.props[this.props.horizontal ? 'width' : 'height'] === 'number';
+      return {
+        scrolled: 0,
+        viewLength: isNumber ? this.props.horizontal ? this.props.width : this.props.height : 1000 
+      }
+    },
+    handleScroll: function(evt) {
+      var currentScroll = this.refs.list.getDOMNode()[this.props.horizontal ? 'scrollLeft' : 'scrollTop'];
+      if (Math.abs(currentScroll - this.state.scrolled) >= this.state.viewLength * this.props.marginFactor)
+        this.setState({scrolled: currentScroll});
+    },
+    render: function() {
+      var first = Math.max(Math.floor((this.state.scrolled - this.state.viewLength * this.props.marginFactor) / this.props.itemLength), 0)
+      var last = Math.min(Math.ceil((this.state.scrolled + this.state.viewLength * (this.props.marginFactor + 1)) / this.props.itemLength), this.props.items.length);
+      var items = [];
+      for (var i = first, l = last; i < l; i++) {
+        items.push(this.props.itemContainer({
+          data: this.props.items[i],
+          style: {
+            position: 'absolute',
+            top: this.props.horizontal ? 0 : i * this.props.itemLength,
+            left: this.props.horizontal ? i * this.props.itemLength : 0
+          }
+        }));
+      }
+      return (
+        React.DOM.div( {ref:"list", style:this.containerStyle, onScroll:this.handleScroll}, 
+          React.DOM.div( {style:this.scrollStyle}),
+          items
+        )
+      );
     }
-  },
-  componentDidMount: function() {
-    this.setContainerLength();
-  },
-  containerStyle: {
-    position: 'relative',
-    overflow: 'auto'
-  },
-  scrollStyle: {
-    position: 'absolute'
-  },
-  getInitialState: function() {
-    var isNumber = typeof this.props[this.props.horizontal ? 'width' : 'height'] === 'number';
-    return {
-      scrolled: 0,
-      viewLength: isNumber ? this.props.horizontal ? this.props.width : this.props.height : 1000 
-    }
-  },
-  handleScroll: function(evt) {
-    var currentScroll = this.refs.list.getDOMNode()[this.props.horizontal ? 'scrollLeft' : 'scrollTop'];
-    if (Math.abs(currentScroll - this.state.scrolled) >= this.state.viewLength * this.props.marginFactor)
-      this.setState({scrolled: currentScroll});
-  },
-  render: function() {
-    var first = Math.max(Math.floor((this.state.scrolled - this.state.viewLength * this.props.marginFactor) / this.props.itemLength), 0)
-    var last = Math.min(Math.ceil((this.state.scrolled + this.state.viewLength * (this.props.marginFactor + 1)) / this.props.itemLength), this.props.items.length);
-    var items = [];
-    for (var i = first, l = last; i < l; i++) {
-      items.push(this.props.itemContainer({
-        data: this.props.items[i],
-        style: {
-          position: 'absolute',
-          top: this.props.horizontal ? 0 : i * this.props.itemLength,
-          left: this.props.horizontal ? i * this.props.itemLength : 0
-        }
-      }));
-    }
-    return (
-      React.DOM.div( {ref:"list", style:this.containerStyle, onScroll:this.handleScroll}, 
-        React.DOM.div( {style:this.scrollStyle}),
-        items
-      )
-    );
-  }
-});
-
-if (module && module.exports)
-  module.exports = List;
+  });
+};

jsx/virtuallist.js

 /** @jsx React.DOM */
 
-if (require && !React)
-  var React = require('react');
+module.exports = function(React) {
+  var List = React.createClass({
+    setDimensions: function(props) {
+      this.containerStyle.width = props.width;
+      this.containerStyle.height = props.height;
 
-var List = React.createClass({
-  setDimensions: function(props) {
-    this.containerStyle.width = props.width;
-    this.containerStyle.height = props.height;
-
-    this.scrollStyle[props.horizontal ? 'width' : 'height'] = props.items.length * props.itemLength;
-    this.scrollStyle[props.horizontal ? 'height' : 'width'] = 1;
-  },
-  setContainerLength: function() {
-    this.setState({
-      viewLength: this.refs.list.getDOMNode()[this.props.horizontal ? 'clientWidth' : 'clientHeight']
-    });
-  },
-  getDefaultProps: function() {
-    this.setDimensions(this.props);
-  },
-  componentWillReceiveProps: function(props) {
-    if (this.props.width !== props.width ||
-        this.props.height !== props.height ||
-        this.props.items.length !== props.items.length ||
-        this.props.itemLength !== props.itemLength) {
-      this.setDimensions(props);
+      this.scrollStyle[props.horizontal ? 'width' : 'height'] = props.items.length * props.itemLength;
+      this.scrollStyle[props.horizontal ? 'height' : 'width'] = 1;
+    },
+    setContainerLength: function() {
+      this.setState({
+        viewLength: this.refs.list.getDOMNode()[this.props.horizontal ? 'clientWidth' : 'clientHeight']
+      });
+    },
+    getDefaultProps: function() {
+      this.setDimensions(this.props);
+    },
+    componentWillReceiveProps: function(props) {
+      if (this.props.width !== props.width ||
+          this.props.height !== props.height ||
+          this.props.items.length !== props.items.length ||
+          this.props.itemLength !== props.itemLength) {
+        this.setDimensions(props);
+        this.setContainerLength();
+      }
+    },
+    componentDidMount: function() {
       this.setContainerLength();
+    },
+    containerStyle: {
+      position: 'relative',
+      overflow: 'auto'
+    },
+    scrollStyle: {
+      position: 'absolute'
+    },
+    getInitialState: function() {
+      var isNumber = typeof this.props[this.props.horizontal ? 'width' : 'height'] === 'number';
+      return {
+        scrolled: 0,
+        viewLength: isNumber ? this.props.horizontal ? this.props.width : this.props.height : 1000 
+      }
+    },
+    handleScroll: function(evt) {
+      var currentScroll = this.refs.list.getDOMNode()[this.props.horizontal ? 'scrollLeft' : 'scrollTop'];
+      if (Math.abs(currentScroll - this.state.scrolled) >= this.state.viewLength * this.props.marginFactor)
+        this.setState({scrolled: currentScroll});
+    },
+    render: function() {
+      var first = Math.max(Math.floor((this.state.scrolled - this.state.viewLength * this.props.marginFactor) / this.props.itemLength), 0)
+      var last = Math.min(Math.ceil((this.state.scrolled + this.state.viewLength * (this.props.marginFactor + 1)) / this.props.itemLength), this.props.items.length);
+      var items = [];
+      for (var i = first, l = last; i < l; i++) {
+        items.push(this.props.itemContainer({
+          data: this.props.items[i],
+          style: {
+            position: 'absolute',
+            top: this.props.horizontal ? 0 : i * this.props.itemLength,
+            left: this.props.horizontal ? i * this.props.itemLength : 0
+          }
+        }));
+      }
+      return (
+        <div ref='list' style={this.containerStyle} onScroll={this.handleScroll}>
+          <div style={this.scrollStyle}></div>
+          {items}
+        </div>
+      );
     }
-  },
-  componentDidMount: function() {
-    this.setContainerLength();
-  },
-  containerStyle: {
-    position: 'relative',
-    overflow: 'auto'
-  },
-  scrollStyle: {
-    position: 'absolute'
-  },
-  getInitialState: function() {
-    var isNumber = typeof this.props[this.props.horizontal ? 'width' : 'height'] === 'number';
-    return {
-      scrolled: 0,
-      viewLength: isNumber ? this.props.horizontal ? this.props.width : this.props.height : 1000 
-    }
-  },
-  handleScroll: function(evt) {
-    var currentScroll = this.refs.list.getDOMNode()[this.props.horizontal ? 'scrollLeft' : 'scrollTop'];
-    if (Math.abs(currentScroll - this.state.scrolled) >= this.state.viewLength * this.props.marginFactor)
-      this.setState({scrolled: currentScroll});
-  },
-  render: function() {
-    var first = Math.max(Math.floor((this.state.scrolled - this.state.viewLength * this.props.marginFactor) / this.props.itemLength), 0)
-    var last = Math.min(Math.ceil((this.state.scrolled + this.state.viewLength * (this.props.marginFactor + 1)) / this.props.itemLength), this.props.items.length);
-    var items = [];
-    for (var i = first, l = last; i < l; i++) {
-      items.push(this.props.itemContainer({
-        data: this.props.items[i],
-        style: {
-          position: 'absolute',
-          top: this.props.horizontal ? 0 : i * this.props.itemLength,
-          left: this.props.horizontal ? i * this.props.itemLength : 0
-        }
-      }));
-    }
-    return (
-      <div ref='list' style={this.containerStyle} onScroll={this.handleScroll}>
-        <div style={this.scrollStyle}></div>
-        {items}
-      </div>
-    );
-  }
-});
-
-if (module && module.exports)
-  module.exports = List;
+  });
+};

package.json

 {
   "name": "react-virtuallist",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "description": "React component for rendering virtual lists",
@@ -5,0 +5,0 @@ "main": "js/virtuallist.js",

README.md

@@ -1,7 +0,8 @@
-===Virtual list component for React===
+# Virtual list component for React
 
-    npm install react-virtuallist;
+<pre><code>npm install react-virtuallist</code></pre>
 
-    var List = require('react-virtuallist');
+    var React = require('react');
+    var List = require('react-virtuallist')(react);
 
 TODO: write docs.

No alert changes

Improved metrics

Total package byte prevSize

583096

increased by0.5%

Number of package files

12

increased by20%

Lines of code

15954

increased by0.43%

Number of lines in readme file

9

increased by12.5%

Number of low supply chain risk alerts

182

decreased by-0.55%

No dependency changes