|
| 1 | +/* |
| 2 | +This is a slimmed down copy of https://github.com/civiccc/react-waypoint |
| 3 | +The MIT License (MIT) |
| 4 | +Copyright (c) 2015 Brigade |
| 5 | + */ |
| 6 | + |
| 7 | +import React, {createRef, ReactNode} from 'react'; |
| 8 | + |
| 9 | +type ScrollContainer = Window | HTMLElement; |
| 10 | + |
| 11 | +function addEventListener( |
| 12 | + element: ScrollContainer, |
| 13 | + type: 'scroll' | 'resize', |
| 14 | + listener: () => void, |
| 15 | + options: AddEventListenerOptions, |
| 16 | +) { |
| 17 | + element.addEventListener(type, listener, options); |
| 18 | + return () => element.removeEventListener(type, listener, options); |
| 19 | +} |
| 20 | + |
| 21 | +type Position = 'above' | 'inside' | 'below' | 'invisible'; |
| 22 | + |
| 23 | +type Props = { |
| 24 | + topOffset: number; |
| 25 | + bottomOffset: number; |
| 26 | + onEnter: () => void; |
| 27 | + onLeave: () => void; |
| 28 | + children: ReactNode; |
| 29 | +}; |
| 30 | + |
| 31 | +export function Waypoint(props: Props) { |
| 32 | + return typeof window !== 'undefined' ? ( |
| 33 | + <WaypointClient {...props}>{props.children}</WaypointClient> |
| 34 | + ) : ( |
| 35 | + props.children |
| 36 | + ); |
| 37 | +} |
| 38 | + |
| 39 | +// TODO maybe replace this with IntersectionObserver later? |
| 40 | +// IntersectionObserver doesn't support the "fast scroll" thing |
| 41 | +// but it's probably not a big deal |
| 42 | +class WaypointClient extends React.Component<Props> { |
| 43 | + static defaultProps = { |
| 44 | + topOffset: 0, |
| 45 | + bottomOffset: 0, |
| 46 | + onEnter() {}, |
| 47 | + onLeave() {}, |
| 48 | + }; |
| 49 | + |
| 50 | + scrollableAncestor?: ScrollContainer; |
| 51 | + previousPosition: Position | null = null; |
| 52 | + unsubscribe?: () => void; |
| 53 | + |
| 54 | + innerRef = createRef<HTMLElement>(); |
| 55 | + |
| 56 | + override componentDidMount() { |
| 57 | + this.scrollableAncestor = findScrollableAncestor(this.innerRef.current!); |
| 58 | + |
| 59 | + const unsubscribeScroll = addEventListener( |
| 60 | + this.scrollableAncestor!, |
| 61 | + 'scroll', |
| 62 | + this._handleScroll, |
| 63 | + {passive: true}, |
| 64 | + ); |
| 65 | + |
| 66 | + const unsubscribeResize = addEventListener( |
| 67 | + window, |
| 68 | + 'resize', |
| 69 | + this._handleScroll, |
| 70 | + {passive: true}, |
| 71 | + ); |
| 72 | + |
| 73 | + this.unsubscribe = () => { |
| 74 | + unsubscribeScroll(); |
| 75 | + unsubscribeResize(); |
| 76 | + }; |
| 77 | + |
| 78 | + this._handleScroll(); |
| 79 | + } |
| 80 | + |
| 81 | + override componentDidUpdate() { |
| 82 | + this._handleScroll(); |
| 83 | + } |
| 84 | + |
| 85 | + override componentWillUnmount() { |
| 86 | + this.unsubscribe?.(); |
| 87 | + } |
| 88 | + |
| 89 | + _handleScroll = () => { |
| 90 | + const node = this.innerRef.current; |
| 91 | + const {topOffset, bottomOffset, onEnter, onLeave} = this.props; |
| 92 | + |
| 93 | + const bounds = getBounds({ |
| 94 | + node: node!, |
| 95 | + scrollableAncestor: this.scrollableAncestor!, |
| 96 | + topOffset, |
| 97 | + bottomOffset, |
| 98 | + }); |
| 99 | + |
| 100 | + const currentPosition = getCurrentPosition(bounds); |
| 101 | + const previousPosition = this.previousPosition; |
| 102 | + this.previousPosition = currentPosition; |
| 103 | + |
| 104 | + if (previousPosition === currentPosition) { |
| 105 | + return; |
| 106 | + } |
| 107 | + |
| 108 | + if (currentPosition === 'inside') { |
| 109 | + onEnter(); |
| 110 | + } else if (previousPosition === 'inside') { |
| 111 | + onLeave(); |
| 112 | + } |
| 113 | + |
| 114 | + const isRapidScrollDown = |
| 115 | + previousPosition === 'below' && currentPosition === 'above'; |
| 116 | + const isRapidScrollUp = |
| 117 | + previousPosition === 'above' && currentPosition === 'below'; |
| 118 | + if (isRapidScrollDown || isRapidScrollUp) { |
| 119 | + onEnter(); |
| 120 | + onLeave(); |
| 121 | + } |
| 122 | + }; |
| 123 | + |
| 124 | + override render() { |
| 125 | + // @ts-expect-error: fix this implicit API |
| 126 | + return React.cloneElement(this.props.children, {innerRef: this.innerRef}); |
| 127 | + } |
| 128 | +} |
| 129 | + |
| 130 | +/** |
| 131 | + * Traverses up the DOM to find an ancestor container which has an overflow |
| 132 | + * style that allows for scrolling. |
| 133 | + * |
| 134 | + * @return {Object} the closest ancestor element with an overflow style that |
| 135 | + * allows for scrolling. If none is found, the `window` object is returned |
| 136 | + * as a fallback. |
| 137 | + */ |
| 138 | +function findScrollableAncestor(inputNode: HTMLElement): ScrollContainer { |
| 139 | + let node: HTMLElement = inputNode; |
| 140 | + |
| 141 | + while (node.parentNode) { |
| 142 | + // @ts-expect-error: it's fine |
| 143 | + node = node.parentNode!; |
| 144 | + |
| 145 | + if (node === document.body) { |
| 146 | + // We've reached all the way to the root node. |
| 147 | + return window; |
| 148 | + } |
| 149 | + |
| 150 | + const style = window.getComputedStyle(node); |
| 151 | + const overflow = |
| 152 | + style.getPropertyValue('overflow-y') || |
| 153 | + style.getPropertyValue('overflow'); |
| 154 | + |
| 155 | + if ( |
| 156 | + overflow === 'auto' || |
| 157 | + overflow === 'scroll' || |
| 158 | + overflow === 'overlay' |
| 159 | + ) { |
| 160 | + return node; |
| 161 | + } |
| 162 | + } |
| 163 | + |
| 164 | + // A scrollable ancestor element was not found, which means that we need to |
| 165 | + // do stuff on window. |
| 166 | + return window; |
| 167 | +} |
| 168 | + |
| 169 | +type Bounds = { |
| 170 | + top: number; |
| 171 | + bottom: number; |
| 172 | + viewportTop: number; |
| 173 | + viewportBottom: number; |
| 174 | +}; |
| 175 | + |
| 176 | +function getBounds({ |
| 177 | + node, |
| 178 | + scrollableAncestor, |
| 179 | + topOffset, |
| 180 | + bottomOffset, |
| 181 | +}: { |
| 182 | + node: Element; |
| 183 | + scrollableAncestor: ScrollContainer; |
| 184 | + topOffset: number; |
| 185 | + bottomOffset: number; |
| 186 | +}): Bounds { |
| 187 | + const {top, bottom} = node.getBoundingClientRect(); |
| 188 | + |
| 189 | + let contextHeight; |
| 190 | + let contextScrollTop; |
| 191 | + if (scrollableAncestor === window) { |
| 192 | + contextHeight = window.innerHeight; |
| 193 | + contextScrollTop = 0; |
| 194 | + } else { |
| 195 | + const ancestorElement = scrollableAncestor as HTMLElement; |
| 196 | + contextHeight = ancestorElement.offsetHeight; |
| 197 | + contextScrollTop = ancestorElement.getBoundingClientRect().top; |
| 198 | + } |
| 199 | + |
| 200 | + const contextBottom = contextScrollTop + contextHeight; |
| 201 | + |
| 202 | + return { |
| 203 | + top, |
| 204 | + bottom, |
| 205 | + viewportTop: contextScrollTop + topOffset, |
| 206 | + viewportBottom: contextBottom - bottomOffset, |
| 207 | + }; |
| 208 | +} |
| 209 | + |
| 210 | +function getCurrentPosition(bounds: Bounds): Position { |
| 211 | + if (bounds.viewportBottom - bounds.viewportTop === 0) { |
| 212 | + return 'invisible'; |
| 213 | + } |
| 214 | + // top is within the viewport |
| 215 | + if (bounds.viewportTop <= bounds.top && bounds.top <= bounds.viewportBottom) { |
| 216 | + return 'inside'; |
| 217 | + } |
| 218 | + // bottom is within the viewport |
| 219 | + if ( |
| 220 | + bounds.viewportTop <= bounds.bottom && |
| 221 | + bounds.bottom <= bounds.viewportBottom |
| 222 | + ) { |
| 223 | + return 'inside'; |
| 224 | + } |
| 225 | + // top is above the viewport and bottom is below the viewport |
| 226 | + if ( |
| 227 | + bounds.top <= bounds.viewportTop && |
| 228 | + bounds.viewportBottom <= bounds.bottom |
| 229 | + ) { |
| 230 | + return 'inside'; |
| 231 | + } |
| 232 | + if (bounds.viewportBottom < bounds.top) { |
| 233 | + return 'below'; |
| 234 | + } |
| 235 | + if (bounds.top < bounds.viewportTop) { |
| 236 | + return 'above'; |
| 237 | + } |
| 238 | + return 'invisible'; |
| 239 | +} |
0 commit comments