react-resize-detector
Advanced tools
Comparing version 1.1.0 to 2.0.0
@@ -7,6 +7,2 @@ 'use strict'; | ||
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 _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }(); | ||
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; }; }(); | ||
@@ -22,4 +18,6 @@ | ||
var _resizeDetectorStyles = require('../helpers/resizeDetectorStyles'); | ||
var _resizeObserverPolyfill = require('resize-observer-polyfill'); | ||
var _resizeObserverPolyfill2 = _interopRequireDefault(_resizeObserverPolyfill); | ||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
@@ -33,23 +31,39 @@ | ||
var ResizeDetector = function (_Component) { | ||
_inherits(ResizeDetector, _Component); | ||
var styles = { | ||
position: 'absolute', | ||
width: 0, | ||
height: 0, | ||
visibility: 'hidden', | ||
display: 'none' | ||
}; | ||
function ResizeDetector() { | ||
var ResizeDetector = function (_PureComponent) { | ||
_inherits(ResizeDetector, _PureComponent); | ||
function ResizeDetector(props) { | ||
_classCallCheck(this, ResizeDetector); | ||
var _this = _possibleConstructorReturn(this, (ResizeDetector.__proto__ || Object.getPrototypeOf(ResizeDetector)).call(this)); | ||
var _this = _possibleConstructorReturn(this, (ResizeDetector.__proto__ || Object.getPrototypeOf(ResizeDetector)).call(this, props)); | ||
_this.state = { | ||
expandChildHeight: 0, | ||
expandChildWidth: 0, | ||
expandScrollLeft: 0, | ||
expandScrollTop: 0, | ||
shrinkScrollTop: 0, | ||
shrinkScrollLeft: 0, | ||
lastWidth: 0, | ||
lastHeight: 0 | ||
}; | ||
_this.width = undefined; | ||
_this.height = undefined; | ||
_this.skipOnMount = props.skipOnMount; | ||
_this.reset = _this.reset.bind(_this); | ||
_this.handleScroll = _this.handleScroll.bind(_this); | ||
_this.ro = new _resizeObserverPolyfill2.default(function (entries) { | ||
entries.forEach(function (entry) { | ||
var _entry$contentRect = entry.contentRect, | ||
width = _entry$contentRect.width, | ||
height = _entry$contentRect.height; | ||
var notifyWidth = _this.props.handleWidth && _this.width !== width; | ||
var notifyHeight = _this.props.handleHeight && _this.height !== height; | ||
if (!_this.skipOnMount && (notifyWidth || notifyHeight)) { | ||
_this.props.onResize(width, height); | ||
} | ||
_this.width = width; | ||
_this.height = height; | ||
_this.skipOnMount = false; | ||
}); | ||
}); | ||
return _this; | ||
@@ -59,86 +73,7 @@ } | ||
_createClass(ResizeDetector, [{ | ||
key: 'componentWillMount', | ||
value: function componentWillMount() { | ||
this.forceUpdate(); | ||
} | ||
}, { | ||
key: 'componentDidMount', | ||
value: function componentDidMount() { | ||
var _containerSize = this.containerSize(), | ||
_containerSize2 = _slicedToArray(_containerSize, 2), | ||
width = _containerSize2[0], | ||
height = _containerSize2[1]; | ||
this.reset(width, height); | ||
this.props.onResize(width, height); | ||
this.ro.observe(this.el.parentElement); | ||
} | ||
}, { | ||
key: 'shouldComponentUpdate', | ||
value: function shouldComponentUpdate(nextProps, nextState) { | ||
return this.props !== nextProps || this.state !== nextState; | ||
} | ||
}, { | ||
key: 'componentDidUpdate', | ||
value: function componentDidUpdate() { | ||
this.expand.scrollLeft = this.expand.scrollWidth; | ||
this.expand.scrollTop = this.expand.scrollHeight; | ||
this.shrink.scrollLeft = this.shrink.scrollWidth; | ||
this.shrink.scrollTop = this.shrink.scrollHeight; | ||
} | ||
}, { | ||
key: 'containerSize', | ||
value: function containerSize() { | ||
return [this.props.handleWidth && this.container.parentElement.offsetWidth, this.props.handleHeight && this.container.parentElement.offsetHeight]; | ||
} | ||
}, { | ||
key: 'reset', | ||
value: function reset(containerWidth, containerHeight) { | ||
if (typeof window === 'undefined') { | ||
return; | ||
} | ||
var parent = this.container.parentElement; | ||
var position = 'static'; | ||
if (parent.currentStyle) { | ||
position = parent.currentStyle.position; | ||
} else if (window.getComputedStyle) { | ||
position = window.getComputedStyle(parent).position; | ||
} | ||
if (position === 'static') { | ||
parent.style.position = 'relative'; | ||
} | ||
this.setState({ | ||
expandChildHeight: this.expand.offsetHeight + 10, | ||
expandChildWidth: this.expand.offsetWidth + 10, | ||
lastWidth: containerWidth, | ||
lastHeight: containerHeight | ||
}); | ||
} | ||
}, { | ||
key: 'handleScroll', | ||
value: function handleScroll(e) { | ||
if (typeof window === 'undefined') { | ||
return; | ||
} | ||
e.preventDefault(); | ||
e.stopPropagation(); | ||
var state = this.state; | ||
var _containerSize3 = this.containerSize(), | ||
_containerSize4 = _slicedToArray(_containerSize3, 2), | ||
width = _containerSize4[0], | ||
height = _containerSize4[1]; | ||
if (width !== state.lastWidth || height !== state.lastHeight) { | ||
this.props.onResize(width, height); | ||
} | ||
this.reset(width, height); | ||
} | ||
}, { | ||
key: 'render', | ||
@@ -148,30 +83,8 @@ value: function render() { | ||
var state = this.state; | ||
var expandStyle = _extends({}, _resizeDetectorStyles.expandChildStyle, { | ||
width: state.expandChildWidth, | ||
height: state.expandChildHeight | ||
return _react2.default.createElement('div', { | ||
style: styles, | ||
ref: function ref(el) { | ||
_this2.el = el; | ||
} | ||
}); | ||
return _react2.default.createElement( | ||
'div', | ||
{ style: _resizeDetectorStyles.parentStyle, ref: function ref(e) { | ||
_this2.container = e; | ||
} }, | ||
_react2.default.createElement( | ||
'div', | ||
{ style: _resizeDetectorStyles.parentStyle, onScroll: this.handleScroll, ref: function ref(e) { | ||
_this2.expand = e; | ||
} }, | ||
_react2.default.createElement('div', { style: expandStyle }) | ||
), | ||
_react2.default.createElement( | ||
'div', | ||
{ style: _resizeDetectorStyles.parentStyle, onScroll: this.handleScroll, ref: function ref(e) { | ||
_this2.shrink = e; | ||
} }, | ||
_react2.default.createElement('div', { style: _resizeDetectorStyles.shrinkChildStyle }) | ||
) | ||
); | ||
} | ||
@@ -181,3 +94,3 @@ }]); | ||
return ResizeDetector; | ||
}(_react.Component); | ||
}(_react.PureComponent); | ||
@@ -190,2 +103,3 @@ exports.default = ResizeDetector; | ||
handleHeight: _propTypes2.default.bool, | ||
skipOnMount: _propTypes2.default.bool, | ||
onResize: _propTypes2.default.func | ||
@@ -197,2 +111,3 @@ }; | ||
handleHeight: false, | ||
skipOnMount: false, | ||
onResize: function onResize(e) { | ||
@@ -199,0 +114,0 @@ return e; |
{ | ||
"author": "Vitalii Maslianok <maslianok@gmail.com> (https://github.com/maslianok)", | ||
"version": "1.1.0", | ||
"version": "2.0.0", | ||
"bugs": { | ||
@@ -13,3 +13,3 @@ "url": "https://github.com/maslianok/react-resize-detector/issues" | ||
"babel-cli": "^6.26.0", | ||
"babel-eslint": "^7.2.3", | ||
"babel-eslint": "^8.2.2", | ||
"babel-plugin-transform-class-properties": "6.24.1", | ||
@@ -19,15 +19,10 @@ "babel-plugin-transform-object-assign": "^6.5.0", | ||
"babel-preset-react": "^6.24.1", | ||
"chai": "4.1.2", | ||
"chai-spies": "0.7.1", | ||
"eslint": "^4.5.0", | ||
"eslint-config-airbnb": "^15.1.0", | ||
"eslint-plugin-import": "^2.7.0", | ||
"eslint-plugin-jsx-a11y": "^5.0.3", | ||
"eslint-plugin-react": "^7.3.0", | ||
"isparta": "4.0.0", | ||
"jsdom": "11.3.0", | ||
"mocha": "4.0.0", | ||
"react": "^16.0.0", | ||
"react-dom": "^16.0.0", | ||
"rimraf": "^2.6.1" | ||
"eslint": "^4.18.1", | ||
"eslint-config-airbnb": "^16.1.0", | ||
"eslint-plugin-import": "^2.9.0", | ||
"eslint-plugin-jsx-a11y": "^6.0.3", | ||
"eslint-plugin-react": "^7.7.0", | ||
"react": "^16.2.0", | ||
"react-dom": "^16.2.0", | ||
"rimraf": "^2.6.2" | ||
}, | ||
@@ -38,7 +33,15 @@ "directories": { | ||
"homepage": "https://github.com/maslianok/react-resize-detector", | ||
"keywords": ["react", "resize", "detector"], | ||
"keywords": [ | ||
"react", | ||
"resize", | ||
"detector" | ||
], | ||
"license": "MIT", | ||
"main": "lib/index.js", | ||
"maintainers": ["maslianok <maslianok@gmail.com>"], | ||
"contributors": ["James J. Womack (@james_womack)"], | ||
"maintainers": [ | ||
"maslianok <maslianok@gmail.com>" | ||
], | ||
"contributors": [ | ||
"James J. Womack (@james_womack)" | ||
], | ||
"name": "react-resize-detector", | ||
@@ -50,14 +53,11 @@ "repository": { | ||
"scripts": { | ||
"build": | ||
"babel --presets=react,es2015 --plugins=transform-object-assign,transform-class-properties src --out-dir lib", | ||
"build": "babel --presets=react,es2015 --plugins=transform-object-assign,transform-class-properties src --out-dir lib", | ||
"clean": "rimraf lib", | ||
"lint": "eslint -c .eslintrc src", | ||
"prepublishOnly": "npm run lint && npm run clean && npm run build", | ||
"test": "npm run test:cov", | ||
"test:cov": "babel-node ./node_modules/.bin/isparta cover ./node_modules/.bin/_mocha -- --recursive", | ||
"test:watch": "NODE_ENV=test mocha --compilers js:babel/register --recursive --watch" | ||
"prepublishOnly": "npm run lint && npm run clean && npm run build" | ||
}, | ||
"dependencies": { | ||
"prop-types": "^15.5.10" | ||
"prop-types": "^15.6.0", | ||
"resize-observer-polyfill": "^1.5.0" | ||
} | ||
} |
@@ -1,17 +0,15 @@ | ||
# React resize detector | ||
# Handle element resizes like it's 2018! | ||
### Your feedback is highly appreciated! | ||
Nowadays browsers start supporting element resize handling natively using [ResizeObserver](https://wicg.github.io/ResizeObserver/). And we use this feature (with [polyfill](resize-observer-polyfill)) to help you handle element resizes in React. | ||
Please, file an issue if something went wrong or let me know via Twitter @maslianok | ||
#### ⚠️ This change intriduced in v.2.0.0 | ||
--- | ||
For older implementations please checkout this branch [v.1.1.0](https://github.com/maslianok/react-resize-detector/tree/4fef26243ae4b3aeb386cca8bd829d3299a4a494) | ||
## Event-based Element Resize Detection | ||
This implementation does NOT use an internal timer to detect size changes (as most implementations do). It uses scroll events. | ||
Inspired by this article [Cross-Browser, Event-based, Element Resize Detection](http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/) written by [Back Alley Coder](http://www.backalleycoder.com/) | ||
## Demo | ||
## Demo | ||
#### [Live demo](http://maslianok.github.io/react-resize-detector/) | ||
Local demo: | ||
``` | ||
@@ -24,14 +22,17 @@ git clone https://github.com/maslianok/react-resize-detector.git | ||
## Installation | ||
`npm i react-resize-detector` | ||
## Running the tests | ||
`npm t` | ||
``` | ||
npm i react-resize-detector | ||
// OR | ||
yarn add react-resize-detector | ||
``` | ||
## Example | ||
```javascript | ||
import React, {Component} from 'react'; | ||
import {render} from 'react-dom'; | ||
import React, { PureComponent } from 'react'; | ||
import { render } from 'react-dom'; | ||
import ReactResizeDetector from 'react-resize-detector'; | ||
class App extends Component { | ||
class App extends PureComponent { | ||
render() { | ||
@@ -41,3 +42,3 @@ return ( | ||
... | ||
<ReactResizeDetector handleWidth handleHeight onResize={this._onResize} /> | ||
<ReactResizeDetector handleWidth handleHeight onResize={this.onResize} /> | ||
</div> | ||
@@ -47,3 +48,3 @@ ); | ||
_onResize = () => { | ||
onResize = () => { | ||
... | ||
@@ -54,16 +55,24 @@ } | ||
render(<App />, document.getElementById('root')); | ||
``` | ||
## API | ||
#### onResize | ||
(Func) Function that will be invoked with `width` and `height` arguments. | ||
#### handleWidth | ||
(Bool) Trigger `onResize` on width change | ||
(Bool) Trigger `onResize` on width change. Default: `false`. | ||
#### handleHeight | ||
(Bool) Trigger `onResize` on height change | ||
#### onResize | ||
(Func) Function that will be invoked with `width` and `height` arguments. When handling only one of dimensions, other argument will be `undefined`. | ||
(Bool) Trigger `onResize` on height change. Default: `false`. | ||
#### skipOnMount | ||
(Bool) Do not trigger onResize when a component mounts. Default: `false`. | ||
## License | ||
MIT |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis 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 riskPackage 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
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
14
75
112070
3
89
1
+ Addedresize-observer-polyfill@1.5.1(transitive)
Updatedprop-types@^15.6.0