diff --git a/CHANGELOG.md b/CHANGELOG.md index 8d81c53..84105a9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,5 @@ ## master (unreleased) +- Rename `scrollableParent` prop to `scrollableAncestor` ## 1.2.1 - Make bundled waypoint.js easier to import diff --git a/README.md b/README.md index 90cff89..016a8a7 100644 --- a/README.md +++ b/README.md @@ -95,14 +95,14 @@ can then use a `key` prop to control when a waypoint is reused vs. re-created. threshold: PropTypes.number, /** - * Scrollable Parent - A custom parent to determine if the + * Scrollable Ancestor - A custom ancestor to determine if the * target is visible in it. This is useful in cases where * you do not want the immediate scrollable ancestor to be * the container. For example, when your target is in a div * that has overflow auto but you are detecting onEnter based * on the window. */ - scrollableParent: PropTypes.any, + scrollableAncestor: PropTypes.any, /** * FireOnRapidScroll - if the onEnter/onLeave events are to be fired diff --git a/spec/waypoint_spec.js b/spec/waypoint_spec.js index f271c98..8d63a8c 100644 --- a/spec/waypoint_spec.js +++ b/spec/waypoint_spec.js @@ -487,4 +487,14 @@ describe('', function() { }); }); }); + + describe('when using the legacy `scrollableParent` prop', () => { + beforeEach(() => { + this.props.scrollableParent = window; + }); + + it('throws a helpful error', () => { + expect(this.subject).toThrowError(/changed name to `scrollableAncestor`/); + }); + }); }); diff --git a/src/waypoint.jsx b/src/waypoint.jsx index 43538df..5994b73 100644 --- a/src/waypoint.jsx +++ b/src/waypoint.jsx @@ -14,7 +14,7 @@ const propTypes = { onEnter: PropTypes.func, onLeave: PropTypes.func, fireOnRapidScroll: PropTypes.bool, - scrollableParent: PropTypes.any, + scrollableAncestor: PropTypes.any, }; const defaultProps = { @@ -28,6 +28,13 @@ const defaultProps = { * Calls a function when you scroll to the element. */ export default class Waypoint extends React.Component { + componentWillMount() { + if (this.props.scrollableParent) { // eslint-disable-line react/prop-types + throw new Error('The `scrollableParent` prop has changed name ' + + 'to `scrollableAncestor`.'); + } + } + componentDidMount() { if (!Waypoint.getWindow()) { return; @@ -73,8 +80,8 @@ export default class Waypoint extends React.Component { * as a fallback. */ _findScrollableAncestor() { - if (this.props.scrollableParent) { - return this.props.scrollableParent; + if (this.props.scrollableAncestor) { + return this.props.scrollableAncestor; } let node = ReactDOM.findDOMNode(this); @@ -133,7 +140,8 @@ export default class Waypoint extends React.Component { currentPosition === POSITIONS.above; const isRapidScrollUp = previousPosition === POSITIONS.above && currentPosition === POSITIONS.below; - if (this.props.fireOnRapidScroll && (isRapidScrollDown || isRapidScrollUp)) { + if (this.props.fireOnRapidScroll && + (isRapidScrollDown || isRapidScrollUp)) { // If the scroll event isn't fired often enough to occur while the // waypoint was visible, we trigger both callbacks anyway. this.props.onEnter.call(this, event, previousPosition);