1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 | exports.useDetectCollision = undefined;
|
7 |
|
8 | var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
|
9 |
|
10 | var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
|
11 |
|
12 | var _extends2 = require('babel-runtime/helpers/extends');
|
13 |
|
14 | var _extends3 = _interopRequireDefault(_extends2);
|
15 |
|
16 | var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');
|
17 |
|
18 | var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);
|
19 |
|
20 | var _react = require('react');
|
21 |
|
22 | var _react2 = _interopRequireDefault(_react);
|
23 |
|
24 | var _propTypes = require('prop-types');
|
25 |
|
26 | var _propTypes2 = _interopRequireDefault(_propTypes);
|
27 |
|
28 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
29 |
|
30 | var element = void 0;
|
31 |
|
32 | var useDetectCollision = function useDetectCollision(props) {
|
33 | var debugOn = props.debugOn,
|
34 | containerRef = props.containerRef,
|
35 | containerElement = props.containerElement,
|
36 | _props$onEntered = props.onEntered,
|
37 | onEntered = _props$onEntered === undefined ? function () {
|
38 | return null;
|
39 | } : _props$onEntered,
|
40 | _props$onExited = props.onExited,
|
41 | onExited = _props$onExited === undefined ? function () {
|
42 | return null;
|
43 | } : _props$onExited,
|
44 | _props$isLocked = props.isLocked,
|
45 | isLocked = _props$isLocked === undefined ? false : _props$isLocked,
|
46 | _props$leeway = props.leeway,
|
47 | leeway = _props$leeway === undefined ? 200 : _props$leeway;
|
48 |
|
49 | var _useReducer = (0, _react.useReducer)(function (state, newState) {
|
50 | return (0, _extends3.default)({}, state, newState);
|
51 | }, {
|
52 | hasHitBottom: false
|
53 | }),
|
54 | _useReducer2 = (0, _slicedToArray3.default)(_useReducer, 2),
|
55 | state = _useReducer2[0],
|
56 | setState = _useReducer2[1];
|
57 |
|
58 | var hasHitBottom = state.hasHitBottom;
|
59 |
|
60 | var prevHasHitBottom = (0, _react.useRef)();
|
61 | (0, _react.useEffect)(function () {
|
62 | prevHasHitBottom.current = hasHitBottom;
|
63 | });
|
64 |
|
65 | var handleScroll = function handleScroll() {
|
66 | if (!element) {
|
67 | element = containerRef ? containerRef.current : containerElement;
|
68 | }
|
69 | var scrollHeight = document.body.scrollHeight;
|
70 |
|
71 | var _element$getBoundingC = element.getBoundingClientRect(),
|
72 | rectTop = _element$getBoundingC.top,
|
73 | rectHeight = _element$getBoundingC.height;
|
74 |
|
75 | debugOn && console.log(props, state, prevHasHitBottom.current, 'scrollHeight: ' + scrollHeight, 'rectTop: ' + rectTop, 'rectHeight: ' + rectHeight, 'window.scrollY: ' + window.scrollY, 'leeway: ' + leeway, 'isLocked: ' + isLocked, 'sum: ' + (rectTop + rectHeight + window.scrollY));
|
76 |
|
77 | if (!isLocked) {
|
78 | if (scrollHeight >= rectTop + window.scrollY + rectHeight + leeway) {
|
79 | prevHasHitBottom.current === true && onExited && onExited();
|
80 | setState({ hasHitBottom: false });
|
81 | } else {
|
82 | setState({ hasHitBottom: true });
|
83 | prevHasHitBottom.current === false && onEntered && onEntered();
|
84 | }
|
85 | }
|
86 | };
|
87 | (0, _react.useEffect)(function () {
|
88 | typeof window !== 'undefined' && window.addEventListener('scroll', handleScroll);
|
89 |
|
90 | return function () {
|
91 | window.removeEventListener('scroll', handleScroll);
|
92 | };
|
93 | }, []);
|
94 |
|
95 | return state;
|
96 | };
|
97 |
|
98 | var DetectCollision = function DetectCollision(_ref) {
|
99 | var children = _ref.children,
|
100 | props = (0, _objectWithoutProperties3.default)(_ref, ['children']);
|
101 | return children(useDetectCollision(props));
|
102 | };
|
103 |
|
104 | DetectCollision.propTypes = {
|
105 | debugOn: _propTypes2.default.bool,
|
106 | onEntered: _propTypes2.default.func,
|
107 | onExited: _propTypes2.default.func,
|
108 | isLocked: _propTypes2.default.bool,
|
109 | leeway: _propTypes2.default.number
|
110 | };
|
111 |
|
112 | exports.useDetectCollision = useDetectCollision;
|
113 | exports.default = DetectCollision; |
\ | No newline at end of file |