react-sticky
Advanced tools
Comparing version 2.3.1 to 2.4.0
{ | ||
"name": "react-sticky", | ||
"version": "2.3.1", | ||
"version": "2.4.0", | ||
"description": "Sticky component for React", | ||
@@ -5,0 +5,0 @@ "main": "./sticky", |
@@ -92,3 +92,3 @@ react-sticky | ||
#### className | ||
You can apecify a class name that would be applied to the resulting element: | ||
You can specify a class name that would be applied to the resulting element: | ||
@@ -102,2 +102,14 @@ app.jsx | ||
#### style | ||
You can specify a style object that would be applied to the resulting element: | ||
app.jsx | ||
```js | ||
<Sticky style={{background: 'red'}}> | ||
<header /> | ||
</Sticky> | ||
``` | ||
Note: In the event that `stickyStyle` rules conflict with `style` rules, `stickyStyle` rules take precedence ONLY while sticky state is active. | ||
#### type | ||
@@ -104,0 +116,0 @@ You can specify the type of element (`React.DOM.div` by default) that will be rendered: |
@@ -9,2 +9,3 @@ var React = require('react'); | ||
className: '', | ||
style: {}, | ||
stickyClass: 'sticky', | ||
@@ -24,4 +25,3 @@ stickyStyle: { | ||
return { | ||
events: ['load', 'scroll', 'resize', 'touchmove', 'touchend'], | ||
style: {} | ||
events: ['scroll', 'resize', 'touchmove', 'touchend'] | ||
}; | ||
@@ -31,10 +31,10 @@ }, | ||
top: function() { | ||
return this.getDOMNode().getBoundingClientRect().top; | ||
return this.domNode.getBoundingClientRect().top; | ||
}, | ||
shouldBeSticky: function() { | ||
var position = this.getDOMNode().style.position; | ||
this.getDOMNode().style.position = 'relative'; | ||
var position = this.domNode.style.position; | ||
this.domNode.style.position = 'relative'; | ||
var shouldBeSticky = this.top() <= -this.props.topOffset; | ||
this.getDOMNode().style.position = position; | ||
this.domNode.style.position = position; | ||
return shouldBeSticky; | ||
@@ -48,12 +48,3 @@ }, | ||
if (isSticky !== shouldBeSticky) { | ||
var nextState = { isSticky: shouldBeSticky }; | ||
if (shouldBeSticky) { | ||
nextState.style = this.props.stickyStyle; | ||
nextState.className = this.props.className + ' ' + this.props.stickyClass; | ||
} else { | ||
nextState.style = {}; | ||
nextState.className = this.props.className; | ||
} | ||
this.setState(nextState); | ||
this.props.onStickyStateChange(shouldBeSticky); | ||
this.nextState(shouldBeSticky); | ||
} | ||
@@ -80,4 +71,10 @@ this.hasUnhandledEvent = false; | ||
this.state.events.forEach(function(type) { | ||
window.addEventListener(type, this.handleEvent); | ||
if (window.addEventListener) { | ||
window.addEventListener(type, this.handleEvent); | ||
} else { | ||
window.attachEvent('on' + type, this.handleEvent); | ||
} | ||
}, this); | ||
this.domNode = React.findDOMNode ? React.findDOMNode(this) : this.getDOMNode(); | ||
this.hasUnhandledEvent = true; | ||
this.tick(); | ||
@@ -90,2 +87,3 @@ }, | ||
}, this); | ||
this.domNode = null; | ||
this.cancel(); | ||
@@ -108,2 +106,31 @@ }, | ||
nextStyle: function(shouldBeSticky) { | ||
if (shouldBeSticky) { | ||
var copyStyles = function(dest, source) { | ||
for (var rule in source) { | ||
dest[rule] = source[rule]; | ||
}; | ||
return dest; | ||
} | ||
return copyStyles(copyStyles({}, this.props.style), this.props.stickyStyle) | ||
} else { | ||
return this.props.style; | ||
} | ||
}, | ||
nextClassName: function(shouldBeSticky) { | ||
return [this.props.className] | ||
.concat(shouldBeSticky ? this.props.stickyClass : undefined) | ||
.join(' '); | ||
}, | ||
nextState: function(shouldBeSticky) { | ||
this.setState({ | ||
isSticky: shouldBeSticky, | ||
style: this.nextStyle(shouldBeSticky), | ||
className: this.nextClassName(shouldBeSticky) | ||
}); | ||
this.props.onStickyStateChange(shouldBeSticky); | ||
}, | ||
render: function() { | ||
@@ -110,0 +137,0 @@ return this.props.type({ |
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
120
155
9023
5