Why Gemfury? Push, build, and install  RubyGems npm packages Python packages Maven artifacts PHP packages Go Modules Debian packages RPM packages NuGet packages

Repository URL to install this package:

Details    
@skava/react-dom-observable / dist / intersection / IntersectionObserver.js
Size: Mime:
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const react_dom_1 = require("react-dom");
const observer_1 = require("./observer");
const utils_1 = require("./utils");
const observerOptions = ['root', 'rootMargin', 'threshold'];
const observerProps = ['disabled'].concat(observerOptions);
const objectProto = Object.prototype;
class IntersectionObserverComponent extends React.Component {
    constructor() {
        super(...arguments);
        this.handleChange = (event) => {
            this.props.onChange(event, this.unobserve);
            if (this.props.onlyOnce) {
                // eslint-disable-next-line no-undef
                if (process.env.NODE_ENV !== 'production') {
                    if ('isIntersecting' in event) {
                        console.error(`deprecation: onlyOnce requires isIntersecting to exists in IntersectionObserverEntry's prototype. Either your browser or your polyfill lacks support.`);
                    }
                }
                if (event.isIntersecting) {
                    this.unobserve();
                }
            }
            // eslint-disable-next-line no-undef
            if (process.env.NODE_ENV !== 'production') {
                console.warn(!this.props.hasOwnProperty('onlyOnce'), 'ReactIntersectionObserver: [deprecation] Use the second argument of onChange to unobserve a target instead of onlyOnce. This prop will be removed in the next major version.');
            }
        };
        /**
         * @todo forwardRef........ !!!
         */
        this.handleNode = (target) => {
            /**
             * Forward hijacked ref to user.
             */
            const nodeRef = this.props.children.ref;
            if (nodeRef) {
                if (typeof nodeRef === 'function') {
                    nodeRef(target);
                }
                else if (typeof nodeRef === 'object') {
                    nodeRef.current = target;
                }
            }
            /**
             * This is a bit ugly: would like to use getSnapshotBeforeUpdate(), but we do not want to depend on
             * react-lifecycles-compat to support React versions prior to 16.3 as this extra boolean gets the job done.
             */
            this.targetChanged =
                (this.renderedTarget && target) != null && this.renderedTarget !== target;
            if (this.targetChanged) {
                this.unobserve();
            }
            this.target = target;
        };
        this.observe = () => {
            this.target = (utils_1.isDOMTypeElement(this.target)
                ? this.target
                : react_dom_1.findDOMNode(this.target));
            this.observer = observer_1.createObserver(this.options);
            observer_1.observeElement(this);
        };
        this.unobserve = () => {
            if (this.target != null) {
                observer_1.unobserveElement(this);
            }
        };
    }
    get options() {
        return observerOptions.reduce((options, key) => {
            // tslint:disable:align
            if (objectProto.hasOwnProperty.call(this.props, key)) {
                const useQuery = key === 'root' &&
                    objectProto.toString.call(this.props[key]) === '[object String]';
                options[key] = useQuery
                    ? document.querySelector(this.props[key])
                    : this.props[key];
            }
            return options;
        }, {});
    }
    componentDidMount() {
        if (!this.props.disabled) {
            this.observe();
        }
    }
    componentDidUpdate(prevProps) {
        const propsChanged = observerProps.some(prop => utils_1.shallowCompare(this.props[prop], prevProps[prop]));
        if (propsChanged) {
            this.unobserve();
        }
        if (this.targetChanged || propsChanged) {
            if (!this.props.disabled) {
                this.observe();
            }
        }
    }
    componentWillUnmount() {
        this.unobserve();
    }
    render() {
        // this value is null on the first render
        this.renderedTarget = this.target;
        // @todo, not React.Children.Only?
        return React.cloneElement(React.Children.only(this.props.children), {
            ref: this.handleNode,
        });
    }
}
IntersectionObserverComponent.displayName = 'IntersectionObserver';
exports.IntersectionObserverComponent = IntersectionObserverComponent;
exports.default = IntersectionObserverComponent;
//# sourceMappingURL=IntersectionObserver.js.map