waypoint.js

'use strict';

var React           = require('react');
var P               = React.PropTypes;
var PureRenderMixin = require('react/lib/ReactComponentWithPureRenderMixin');
var Waypoints;

if (typeof window !== 'undefined') {
    Waypoints        = require('waypoints/lib/noframework.waypoints');
    Waypoints.Inview = require('waypoints/lib/shortcuts/inview');
}

var Waypoint = React.createClass({
    mixins:    [PureRenderMixin],
    propTypes: {
        children:   P.node.isRequired,
        continuous: P.bool.isRequired,
        group:      P.string.isRequired,
        onEnter:    P.func,
        onEntered:  P.func,
        onExit:     P.func,
        onExited:   P.func
    },
    getDefaultProps () {
        return {
            continuous: true,
            group:      'default'
        };
    },
    render () {
        return React.Children.only(this.props.children);
    },
    componentDidMount () {
        var { group, onEnter, onEntered, onExit, onExited } = this.props;
        var options = {
            continuous: continuous,
            element:    React.findDOMNode(this),
            group:      group
        };
        if (onEnter != null) {
            options.enter = onEnter;
        }
        if (onEntered != null) {
            options.entered = onEntered;
        }
        if (onExit != null) {
            options.exit = onExit;
        }
        if (onExited != null) {
            options.exited = onExited;
        }
        this.waypoint = new Waypoints.Inview(options);
    },
    componentWillUnmount () {
        this.waypoint.destroy();
        this.waypoint = null;
    },
    waypoint:  null
});

module.exports = Waypoint;