react-resize-detector - npm Package Compare versions

Comparing version 0.1.6 to 0.2.0

example/containers/App.js

@@ -1,2 +0,2 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import ResizeDetector from 'react-resize-detector';
@@ -7,7 +7,7 @@
     display: 'flex',
-    height: '100%'
+    height: '100%',
   },
   leftColumn: {
     flexBasis: '200px',
-    backgroundColor: '#EAEAEA'
+    backgroundColor: '#EAEAEA',
 
@@ -23,36 +23,42 @@ },
     fontSize: '30px',
-    textAlign: 'center'
+    textAlign: 'center',
   },
   toggleLeftColumnBtn: {
     alignSelf: 'baseline',
-    fontSize: '14px'
+    fontSize: '14px',
   },
   text: {
-    flexGrow: 1
-  }
-}
+    flexGrow: 1,
+  },
+};
 
 class App extends Component {
   constructor(props) {
-    super();
+    super(props);
 
     this.state = {
       leftPanel: true,
-      count: 0
+      count: 0,
     };
+
+    this._hideLeftPanel = this._hideLeftPanel.bind(this);
+    this._onResize = this._onResize.bind(this);
   }
 
+  _onResize() {
+    this.setState({ count: this.state.count + 1 });
+  }
+
+  _hideLeftPanel() {
+    this.setState({ leftPanel: !this.state.leftPanel });
+  }
+
   render() {
     return (
       <div style={s.wrapper}>
-        {(() => {
-          if (this.state.leftPanel) {
-            return <div style={s.leftColumn}></div>
-          }
-        })()}
-
+        {this.state.leftPanel && <div style={s.leftColumn}></div>}
         <div style={s.rightColumn}>
           <div style={s.toggleLeftColumnBtn}>
-            <button onClick={this._hideLeftPanel.bind(this)}>Toggle left panel</button>
-            <br/>or resize window
+            <button onClick={this._hideLeftPanel}>Toggle left panel</button>
+            <br />or resize window
           </div>
@@ -62,3 +68,3 @@
 
-          <ResizeDetector handleWidth handleHeight onResize={this._onResize.bind(this)} />
+          <ResizeDetector handleWidth handleHeight onResize={this._onResize} />
         </div>
@@ -69,16 +75,4 @@
   }
-
-  _onResize() {
-    this.setState({
-      count: this.state.count + 1
-    });
-  }
-
-  _hideLeftPanel() {
-    this.setState({
-      leftPanel: !this.state.leftPanel
-    });
-  }
 }
 
 export default App;

example/index.js

 import React from 'react';
-import {render} from 'react-dom';
+import { render } from 'react-dom';
 import App from './containers/App';
 
-render(
-  <App />,
-  document.getElementById('root')
-)
+render(<App />, document.getElementById('root'));

example/package.json

@@ -7,3 +7,5 @@ {
     "start": "node server.js",
-    "deploy": "BABEL_ENV=production webpack --config webpack.config.js --progress --profile --colors"
+    "test": "cross-env NODE_ENV=test mocha --recursive --compilers js:babel-register",
+    "test:watch": "npm test -- --watch",
+    "lint": "eslint -c .eslintrc containers"
   },
@@ -18,18 +20,21 @@ "repository": {
   },
+  "homepage": "https://github.com/maslianok/react-resize-detector",
   "dependencies": {
-    "react": "^0.14.0",
-    "react-dom": "^0.14.0"
+    "react": "^0.14.7",
+    "react-dom": "^0.14.7"
   },
   "devDependencies": {
-    "babel-core": "^5",
-    "babel-loader": "^5",
-    "babel-plugin-react-transform": "^1.1.0",
-    "expect": "^1.8",
+    "babel": "^6.3.15",
+    "babel-loader": "^6.2.0",
+    "babel-preset-es2015": "^6.3.13",
+    "babel-preset-react": "^6.3.13",
+    "eslint": "2.2.0",
+    "eslint-config-airbnb": "^6.0.2",
+    "eslint-plugin-import": "^1.0.3",
+    "eslint-plugin-react": "^4.1.0",
     "express": "^4.13.3",
-    "node-libs-browser": "^0.5.2",
-    "react-transform-hmr": "^1.0.0",
     "webpack": "^1.9.11",
     "webpack-dev-middleware": "^1.2.0",
-    "webpack-hot-middleware": "^2.2.0"
+    "webpack-hot-middleware": "^2.9.1"
   }
 }

example/server.js

@@ -1,24 +0,23 @@
-/*eslint no-var: 0*/
-var webpack = require('webpack');
-var webpackDevMiddleware = require('webpack-dev-middleware');
-var webpackHotMiddleware = require('webpack-hot-middleware');
-var config = require('./webpack.config');
+var webpack = require('webpack')
+var webpackDevMiddleware = require('webpack-dev-middleware')
+var webpackHotMiddleware = require('webpack-hot-middleware')
+var config = require('./webpack.config')
 
-var app = new (require('express'))();
-var port = 3000;
+var app = new (require('express'))()
+var port = 3000
 
-var compiler = webpack(config);
-app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath }));
-app.use(webpackHotMiddleware(compiler));
+var compiler = webpack(config)
+app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath }))
+app.use(webpackHotMiddleware(compiler))
 
-app.get('/', function(req, res) {
-  res.sendFile(__dirname + '/index.html');
-});
+app.get("/", function(req, res) {
+  res.sendFile(__dirname + '/index.html')
+})
 
 app.listen(port, function(error) {
   if (error) {
-    console.error(error);
+    console.error(error)
   } else {
-    console.info('==> 🌎  Listening on port %s. Open up http://localhost:%s/ in your browser.', port, port);
+    console.info("==> 🌎  Listening on port %s. Open up http://localhost:%s/ in your browser.", port, port)
   }
-});
+})

example/webpack.config.js

@@ -11,3 +11,3 @@ var path = require('path')
   output: {
-    path: path.join(__dirname, 'static'),
+    path: path.join(__dirname, 'dist'),
     filename: 'bundle.js',
@@ -18,38 +18,18 @@ publicPath: '/static/'
     new webpack.optimize.OccurenceOrderPlugin(),
-    new webpack.HotModuleReplacementPlugin(),
-    new webpack.NoErrorsPlugin()
+    new webpack.HotModuleReplacementPlugin()
   ],
   resolve: { 
-    alias: {'react-resize-detector': path.join(__dirname, '..', 'src', 'index.js')},
+    alias: {'react-resize-detector': path.join(__dirname, '..', 'lib', 'index.js')},
     root: path.join(__dirname, 'node_modules')
   },
   module: {
-    loaders: [{
-      test: /\.js$/,
-      loaders: ['babel'],
-      exclude: /node_modules/,
-    }]
+    loaders: [
+      {
+        test: /\.js$/,
+        loaders: [ 'babel' ],
+        exclude: /node_modules/,
+        include: __dirname
+      }
+    ]
   }
 }
-
-
-// When inside repo, prefer src to compiled version.
-// You can safely delete these lines in your project.
-// var src = path.join(__dirname, '..', 'src')
-// var fs = require('fs')
-// if (fs.existsSync(src)) {
-//   // Resolve to source
-//   module.exports.resolve = { alias: { 'react-responsive-tabs': src } }
-//   // Compile from source
-//   // module.exports.module.loaders.push({
-//   //   test: /\.js$/,
-//   //   loaders: ['babel'],
-//   //   include: src
-//   // })
-// }
-
-
-
-
-
-

lib/components/ResizeDetector.js

 'use strict';
 
-var _reactTransformHmr2 = require('react-transform-hmr');
-
-var _reactTransformHmr3 = _interopRequireDefault(_reactTransformHmr2);
-
-var _react = require('react');
-
-Object.defineProperty(exports, '__esModule', {
+Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
-var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
+var _react = require('react');
 
-var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
 var _react2 = _interopRequireDefault(_react);
 
-var _reactDom = require('react-dom');
+var _resizeDetectorStyles = require('../helpers/resizeDetectorStyles');
 
-var _helpersResizeDetectorStyles = require('../helpers/resizeDetectorStyles');
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _components = {
-  _$ResizeDetector: {
-    displayName: 'ResizeDetector'
-  }
-};
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-var _reactComponentWrapper = (0, _reactTransformHmr3['default'])({
-  filename: 'src/components/ResizeDetector.js',
-  components: _components,
-  locals: [module],
-  imports: [_react]
-});
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 
-function _wrapComponent(uniqueId) {
-  return function (ReactClass) {
-    return _reactComponentWrapper(ReactClass, uniqueId);
-  };
-}
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
-
-var ResizeDetector = (function (_Component) {
+var ResizeDetector = function (_Component) {
   _inherits(ResizeDetector, _Component);
 
-  function ResizeDetector(props) {
-    _classCallCheck(this, _ResizeDetector);
+  function ResizeDetector() {
+    _classCallCheck(this, ResizeDetector);
 
-    _get(Object.getPrototypeOf(_ResizeDetector.prototype), 'constructor', this).call(this);
+    var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(ResizeDetector).call(this));
 
-    this.state = {
+    _this.state = {
       expandChildHeight: 0,
@@ -69,12 +42,8 @@ expandChildWidth: 0,
 
-    this.reset = this.reset.bind(this);
-    this.handleScroll = this.handleScroll.bind(this);
+    _this.reset = _this.reset.bind(_this);
+    _this.handleScroll = _this.handleScroll.bind(_this);
+    return _this;
   }
 
   _createClass(ResizeDetector, [{
-    key: 'shouldComponentUpdate',
-    value: function shouldComponentUpdate(nextProps, nextState) {
-      return this.props != nextProps;
-    }
-  }, {
     key: 'componentDidMount',
@@ -85,7 +54,14 @@ value: function componentDidMount() {
   }, {
+    key: 'shouldComponentUpdate',
+    value: function shouldComponentUpdate(nextProps) {
+      return this.props !== nextProps;
+    }
+  }, {
     key: 'componentDidUpdate',
     value: function componentDidUpdate() {
-      var expand = this.expand;
-      var shrink = this.shrink;
+      var _refs = this.refs;
+      var expand = _refs.expand;
+      var shrink = _refs.shrink;
 
+
       expand.scrollLeft = expand.scrollWidth;
@@ -100,4 +76,5 @@ expand.scrollTop = expand.scrollHeight;
     value: function reset() {
-      var expand = this.expand;
-      var container = this.container;
+      var _refs2 = this.refs;
+      var expand = _refs2.expand;
+      var container = _refs2.container;
       var props = this.props;
@@ -107,3 +84,3 @@
 
-      if (getComputedStyle(parent).position == 'static') {
+      if (getComputedStyle(parent).position === 'static') {
         parent.style.position = 'relative';
@@ -121,8 +98,9 @@ }
     key: 'handleScroll',
-    value: function handleScroll(evt) {
-      var container = this.container;
+    value: function handleScroll() {
+      var container = this.refs.container;
       var state = this.state;
       var props = this.props;
 
-      if (props.handleWidth && container.parentElement.offsetWidth != state.lastWidth || props.handleHeight && container.parentElement.offsetHeight != state.lastHeight) {
+
+      if (props.handleWidth && container.parentElement.offsetWidth !== state.lastWidth || props.handleHeight && container.parentElement.offsetHeight !== state.lastHeight) {
         this.props.onResize();
@@ -136,7 +114,6 @@ }
     value: function render() {
-      var _this = this;
-
       var state = this.state;
 
-      var expandStyle = _extends({}, _helpersResizeDetectorStyles.expandChildStyle, {
+
+      var expandStyle = Object.assign({}, _resizeDetectorStyles.expandChildStyle, {
         width: state.expandChildWidth,
@@ -146,20 +123,14 @@ height: state.expandChildHeight
 
-      return _react2['default'].createElement(
+      return _react2.default.createElement(
         'div',
-        { style: _helpersResizeDetectorStyles.parentStyle, ref: function (ref) {
-            _this.container = (0, _reactDom.findDOMNode)(ref);
-          } },
-        _react2['default'].createElement(
+        { style: _resizeDetectorStyles.parentStyle, ref: 'container' },
+        _react2.default.createElement(
           'div',
-          { style: _helpersResizeDetectorStyles.parentStyle, onScroll: this.handleScroll, ref: function (ref) {
-              _this.expand = (0, _reactDom.findDOMNode)(ref);
-            } },
-          _react2['default'].createElement('div', { style: expandStyle })
+          { style: _resizeDetectorStyles.parentStyle, onScroll: this.handleScroll, ref: 'expand' },
+          _react2.default.createElement('div', { style: expandStyle })
         ),
-        _react2['default'].createElement(
+        _react2.default.createElement(
           'div',
-          { style: _helpersResizeDetectorStyles.parentStyle, onScroll: this.handleScroll, ref: function (ref) {
-              _this.shrink = (0, _reactDom.findDOMNode)(ref);
-            } },
-          _react2['default'].createElement('div', { style: _helpersResizeDetectorStyles.shrinkChildStyle })
+          { style: _resizeDetectorStyles.parentStyle, onScroll: this.handleScroll, ref: 'shrink' },
+          _react2.default.createElement('div', { style: _resizeDetectorStyles.shrinkChildStyle })
         )
@@ -170,13 +141,12 @@ );
 
-  var _ResizeDetector = ResizeDetector;
-  ResizeDetector = _wrapComponent('_$ResizeDetector')(ResizeDetector) || ResizeDetector;
   return ResizeDetector;
-})(_react.Component);
+}(_react.Component);
 
-exports['default'] = ResizeDetector;
+exports.default = ResizeDetector;
 
+
 ResizeDetector.propTypes = {
   handleWidth: _react.PropTypes.bool,
   handleHeight: _react.PropTypes.bool,
-  onResize: _react.PropTypes.func.isRequired
+  onResize: _react.PropTypes.func
 };
@@ -187,6 +157,5 @@
   handleHeight: false,
-  onResize: function onResize() {
-    return console.error('ResizeDetector:onResize');
+  onResize: function onResize(e) {
+    return e;
   }
-};
-module.exports = exports['default'];
+};

lib/helpers/resizeDetectorStyles.js

 'use strict';
 
-Object.defineProperty(exports, '__esModule', {
+Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports['default'] = {
-  parentStyle: {
-    position: 'absolute',
-    left: 0,
-    top: 0,
-    right: 0,
-    bottom: 0,
-    overflow: 'scroll',
-    zIndex: -1,
-    visibility: 'hidden'
-  },
-  shrinkChildStyle: {
-    position: 'absolute',
-    left: 0,
-    top: 0,
-    width: '200%',
-    height: '200%'
-  },
-  expandChildStyle: {
-    position: 'absolute',
-    left: 0,
-    top: 0,
-    width: '100%',
-    height: '100%'
-  }
+var parentStyle = exports.parentStyle = {
+  position: 'absolute',
+  left: 0,
+  top: 0,
+  right: 0,
+  bottom: 0,
+  overflow: 'scroll',
+  zIndex: -1,
+  visibility: 'hidden'
 };
-module.exports = exports['default'];
+
+var shrinkChildStyle = exports.shrinkChildStyle = {
+  position: 'absolute',
+  left: 0,
+  top: 0,
+  width: '200%',
+  height: '200%'
+};
+
+var expandChildStyle = exports.expandChildStyle = {
+  position: 'absolute',
+  left: 0,
+  top: 0,
+  width: '100%',
+  height: '100%'
+};

lib/index.js

 'use strict';
 
-Object.defineProperty(exports, '__esModule', {
+Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+var _ResizeDetector = require('./components/ResizeDetector');
 
-var _componentsResizeDetector = require('./components/ResizeDetector');
+var _ResizeDetector2 = _interopRequireDefault(_ResizeDetector);
 
-var _componentsResizeDetector2 = _interopRequireDefault(_componentsResizeDetector);
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-exports['default'] = _componentsResizeDetector2['default'];
-module.exports = exports['default'];
+exports.default = _ResizeDetector2.default;

package.json

@@ -7,9 +7,14 @@ {
   "description": "React resize detector",
+  "peerDependencies": {
+    "react": "^0.14.7"
+  },
   "devDependencies": {
-    "babel": "^5",
-    "babel-core": "^5",
-    "babel-eslint": "^4.1.4",
-    "babel-loader": "^5",
-    "eslint": "^1.9",
-    "eslint-plugin-react": "^3.7.0",
+    "babel-cli": "^6.5.1",
+    "babel-eslint": "^5.0.0-beta10",
+    "babel-preset-es2015": "^6.6.0",
+    "babel-preset-react": "^6.3.13",
+    "eslint": "2.2.0",
+    "eslint-config-airbnb": "^6.0.2",
+    "eslint-plugin-import": "^1.0.3",
+    "eslint-plugin-react": "^4.1.0",
     "rimraf": "^2.3.4"
@@ -37,5 +42,5 @@ },
   "scripts": {
-    "build": "babel src --out-dir lib",
+    "build": "babel --presets=react,es2015 src --out-dir lib",
     "clean": "rimraf lib",
-    "lint": "eslint example src",
+    "lint": "eslint -c .eslintrc src",
     "prepublish": "npm run lint && npm run clean && npm run build",
@@ -45,4 +50,4 @@ "test:cov": "babel-node ./node_modules/.bin/isparta cover ./node_modules/.bin/_mocha -- --recursive",
   },
-  "version": "0.1.6",
+  "version": "0.2.0",
   "dependencies": {}
 }

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

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

Worsened metrics

Total package byte prevSize

14495

decreased by-99.21%

Dependency count

1

increased byInfinity%

Dev dependency count

9

increased by28.57%

Lines of code

271

decreased by-96.61%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes