All files / workspace/src index.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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
 
 
 
 
1x
 
 
 
6x
6x
 
6x
2x
 
 
6x
1x
 
 
6x
 
3x
 
 
 
3x
3x
 
 
 
 
 
 
 
3x
 
 
 
 
 
6x
 
 
 
 
 
 
 
 
2x
1x
 
 
2x
2x
 
 
 
2x
 
 
 
 
 
 
2x
1x
 
 
2x
2x
 
 
 
2x
 
 
 
 
 
 
4x
 
 
 
6x
 
 
 
 
 
 
 
 
 
 
 
8x
 
 
 
import React, { useState, useCallback, useRef } from 'react';
import ReactDOM from 'react-dom';
import Horizon from '@mintuz/horizon';
 
export const useIntersect = ({
    triggerOnce = false,
    intersectionObserverConfig
}) => {
    const instanceRef = useRef(null);
    const [inView, setInView] = useState(false);
 
    const onEntry = () => {
        setInView(true);
    };
 
    const onExit = () => {
        setInView(false);
    };
 
    const ref = useCallback(
        (node) => {
            Iif (instanceRef.current) {
                instanceRef.current.unobserve();
            }
 
            Eif (node) {
                const instance = Horizon({
                    onEntry,
                    onExit,
                    triggerOnce,
                    toObserve: node,
                    intersectionObserverConfig
                });
 
                instanceRef.current = instance;
            }
        },
        [triggerOnce, intersectionObserverConfig]
    );
 
    return [inView, ref];
};
 
export default class ReactIntersect extends React.Component {
    state = {
        inView: false
    };
 
    onEntry = (entry) => {
        if (this.props.onEntry) {
            this.props.onEntry(entry);
        }
 
        this.setState((prevState) => {
            const newState = {
                inView: true
            };
 
            return this.props.stateReducer
                ? this.props.stateReducer(prevState, newState)
                : newState;
        });
    };
 
    onExit = (entry) => {
        if (this.props.onExit) {
            this.props.onExit(entry);
        }
 
        this.setState((prevState) => {
            const newState = {
                inView: false
            };
 
            return this.props.stateReducer
                ? this.props.stateReducer(prevState, newState)
                : newState;
        });
    };
 
    shouldComponentUpdate(nextProps, nextState) {
        return nextState.inView !== this.state.inView;
    }
 
    componentDidMount() {
        Horizon({
            onEntry: this.onEntry,
            onExit: this.onExit,
            triggerOnce: this.props.triggerOnce,
            toObserve: ReactDOM.findDOMNode(this),
            intersectionObserverConfig: {
                ...this.props.intersectionObserverConfig
            }
        });
    }
 
    render() {
        return this.props.render(this.state.inView);
    }
}