scrollmonitor-react
Advanced tools
Comparing version 2.0.3 to 2.1.0
@@ -74,3 +74,5 @@ 'use strict'; | ||
var Watch = exports.Watch = function Watch(Component) { | ||
return function (_React$Component2) { | ||
var _class, _temp; | ||
return _temp = _class = function (_React$Component2) { | ||
_inherits(WatchedComponent, _React$Component2); | ||
@@ -91,2 +93,14 @@ | ||
_this2.startWatcher = function () { | ||
if (!_this2.watcher) { | ||
_this2.createWatcher(_this2.props); | ||
} | ||
}; | ||
_this2.stopWatcher = function () { | ||
if (_this2.watcher) { | ||
_this2.watcher.destroy(); | ||
} | ||
}; | ||
_this2.state = { | ||
@@ -136,15 +150,18 @@ isInViewport: false, | ||
value: function componentDidMount() { | ||
this.createWatcher(this.props); | ||
if (this.props.autoStart) { | ||
this.createWatcher(this.props); | ||
} | ||
} | ||
}, { | ||
key: 'componentWillReceiveProps', | ||
value: function componentWillReceiveProps(props) { | ||
value: function componentWillReceiveProps(nextProps) { | ||
var _this4 = this; | ||
if (this.props.scrollContainer !== props.scrollContainer) { | ||
if (this.props.scrollContainer !== nextProps.scrollContainer) { | ||
this.watcher.destroy(); | ||
this.createWatcher(props); | ||
this.createWatcher(nextProps); | ||
} | ||
_scrollmonitor2.default.eventTypes.forEach(function (type) { | ||
if (props[type] && !_this4.props[type]) { | ||
if (nextProps[type] && !_this4.props[type]) { | ||
_this4.listeners[type] = function () { | ||
@@ -154,3 +171,3 @@ return _this4.props[type](_this4.watcher); | ||
_this4.watcher.on(type, _this4.listeners[type]); | ||
} else if (!props[type] && _this4.props[type]) { | ||
} else if (!nextProps[type] && _this4.props[type]) { | ||
_this4.watcher.off(type, _this4.listeners[type]); | ||
@@ -176,3 +193,5 @@ } | ||
lockWatcher: this.lockWatcher, | ||
unlockWatcher: this.unlockWatcher | ||
unlockWatcher: this.unlockWatcher, | ||
startWatcher: this.initWatcher, | ||
stopWatcher: this.destroyWatcher | ||
}), | ||
@@ -185,4 +204,8 @@ this.props.children | ||
return WatchedComponent; | ||
}(_react2.default.Component); | ||
}(_react2.default.Component), _class.propTypes = { | ||
autoStart: _react2.default.PropTypes.bool | ||
}, _class.defaultProps = { | ||
autoStart: true | ||
}, _temp; | ||
}; | ||
//# sourceMappingURL=index.js.map |
40
index.js
@@ -34,3 +34,10 @@ import React from 'react'; | ||
export const Watch = (Component) => class WatchedComponent extends React.Component { | ||
static propTypes = { | ||
autoStart: React.PropTypes.bool, | ||
}; | ||
static defaultProps = { | ||
autoStart: true, | ||
}; | ||
constructor () { | ||
@@ -75,15 +82,18 @@ super(); | ||
componentDidMount () { | ||
this.createWatcher(this.props); | ||
if (this.props.autoStart) { | ||
this.createWatcher(this.props); | ||
} | ||
} | ||
componentWillReceiveProps (props) { | ||
if (this.props.scrollContainer !== props.scrollContainer) { | ||
componentWillReceiveProps (nextProps) { | ||
if (this.props.scrollContainer !== nextProps.scrollContainer) { | ||
this.watcher.destroy(); | ||
this.createWatcher(props); | ||
this.createWatcher(nextProps); | ||
} | ||
scrollMonitor.eventTypes.forEach(type => { | ||
if (props[type] && !this.props[type]) { | ||
if (nextProps[type] && !this.props[type]) { | ||
this.listeners[type] = () => this.props[type](this.watcher); | ||
this.watcher.on(type, this.listeners[type]); | ||
} else if (!props[type] && this.props[type]) { | ||
} else if (!nextProps[type] && this.props[type]) { | ||
this.watcher.off(type, this.listeners[type]); | ||
@@ -100,8 +110,20 @@ } | ||
this.watcher.lock(); | ||
} | ||
}; | ||
unlockWatcher = () => { | ||
this.watcher.unlock(); | ||
} | ||
}; | ||
startWatcher = () => { | ||
if (!this.watcher) { | ||
this.createWatcher(this.props); | ||
} | ||
}; | ||
stopWatcher = () => { | ||
if (this.watcher) { | ||
this.watcher.destroy(); | ||
} | ||
}; | ||
render () { | ||
@@ -117,2 +139,4 @@ return (<Component | ||
unlockWatcher={this.unlockWatcher} | ||
startWatcher={this.initWatcher} | ||
stopWatcher={this.destroyWatcher} | ||
> | ||
@@ -119,0 +143,0 @@ {this.props.children} |
{ | ||
"name": "scrollmonitor-react", | ||
"version": "2.0.3", | ||
"version": "2.1.0", | ||
"description": "React HOC for the scrollMonitor", | ||
@@ -27,4 +27,2 @@ "main": "dist/index.js", | ||
"dependencies": { | ||
"react": "^15.3.2", | ||
"react-dom": "^15.3.2", | ||
"scrollmonitor": "^1.1.1" | ||
@@ -40,2 +38,6 @@ }, | ||
}, | ||
"peerDependencies": { | ||
"react": "^15.3.2", | ||
"react-dom": "^15.3.2" | ||
}, | ||
"babel": { | ||
@@ -42,0 +44,0 @@ "presets": [ |
@@ -7,3 +7,3 @@ # ScrollMonitor-React | ||
Scrollmonitor-react is two higher order components. They're functions that your pass an original component and receive a new component that adds functionality to the original. | ||
Scrollmonitor-react is two higher order components. They're functions that you pass an original component and receive a new component that adds functionality to the original. | ||
@@ -44,3 +44,3 @@ ## Basic Usage | ||
export default MyParentComponent extends React.Component { | ||
receiveStateChange (watcher) { | ||
@@ -56,2 +56,6 @@ console.log('state changed!', watcher) | ||
### Avoid starting the watcher automatically | ||
By default the watcher is started on every enhanced component, but there can be situations where you want to start the watcher later so you can set the prop `autoStart` to `false` to avoid starting the watcher automatically. | ||
## API | ||
@@ -67,9 +71,12 @@ | ||
* `this.props.unlockWatcher()` - unlocks the watcher. | ||
* `this.props.startWatcher()` - starts the watcher if it's not running | ||
* `this.props.stopWatcher()` - stops the watcher if it's running | ||
_1. If the element is larger than the viewport `isFullyInViewport` is true when the element spans the entire viewport._ | ||
### Propeties you provide to the component | ||
### Properties you provide to the component | ||
```javascript | ||
<MyWatchedComponent | ||
autoStart={true|false} // Decide if watcher should start when component is mounted. Default: true | ||
stateChange={() => {}} // Called when any part of the state changes. | ||
@@ -86,3 +93,3 @@ visibilityChange={() => {}} // when the element partially enters or fully exits the viewport. | ||
_1. If the element is larger than the viewport `fullyEnterViewport` will be triggered when the element spans the entire viewport._ | ||
_1. If the element is larger than the viewport `fullyEnterViewport` will be triggered when the element spans the entire viewport._ | ||
_2. If the element is larger than the viewport `partiallyExitViewport` will be triggered when the element no longer spans the entire viewport._ | ||
@@ -89,0 +96,0 @@ |
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
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
98131
13
391
116
- Removedreact@^15.3.2
- Removedreact-dom@^15.3.2