All files ViewMonitor.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
 
 
 
 
 
1x
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/* eslint-disable import/first */
/* eslint-disable import/order */
/* eslint-disable global-require */
import isBrowser from './isBrowser';
 
Eif (isBrowser) {
    require('intersection-observer');
}
 
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import Observer from '@researchgate/react-intersection-observer';
 
class ViewMonitor extends Component {
    static propTypes = {
        tag: PropTypes.node,
        children: PropTypes.func.isRequired,
    };
 
    static defaultProps = {
        tag: 'div',
    };
 
    state = {
        isVisible: false,
    };
 
    handleChange = ({isIntersecting}) => {
        const {isVisible} = this.state;
        if (!isVisible) {
            this.setState({isVisible: isIntersecting});
        }
    };
 
    render() {
        const {disableObserver, tag: Tag, children, ...rest} = this.props;
        const {isVisible} = this.state;
        if (disableObserver) {
            return (
                <Tag>
                    {children(true)}
                </Tag>
            );
        }
        if (!isBrowser) {
            return (
                <Tag>
                    {children(false)}
                </Tag>
            );
        }
        return (
            <Observer {...rest} onChange={this.handleChange}>
                <Tag>
                    {children(isVisible)}
                </Tag>
            </Observer>
        );
    }
}
 
export default ViewMonitor;