| 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
+102
+103
+104
+105
+106
+107
+108
+109
+110
+111
+112
+113
+114
+115
+116
+117
+118
+119
+120
+121
+122
+123
+124
+125
+126
+127
+128
+129
+130
+131
+132
+133
+134
+135
+136
+137
+138
+139
+140
+141
+142
+143
+144
+145
+146
+147
+148
+149
+150
+151
+152
+153
+154
+155
+156
+157
+158
+159
+160
+161
+162
+163
+164
+165
+166
+167
+168
+169
+170
+171
+172
+173
+174
+175
+176
+177
+178
+179
+180
+181
+182
+183
+184
+185
+186
+187
+188
+189
+190
+191
+192
+193
+194
+195
+196
+197
+198
+199
+200
+201
+202
+203
+204
+205
+206
+207
+208
+209
+210
+211
+212
+213
+214
+215
+216
+217
+218
+219
+220
+221
+222
+223
+224 |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+86x
+86x
+6x
+
+
+
+80x
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+35x
+35x
+35x
+
+
+35x
+
+
+
+
+35x
+
+
+
+35x
+35x
+
+
+
+18x
+
+
+
+
+
+2x
+
+
+
+
+1x
+
+
+
+35x
+35x
+
+
+
+9x
+9x
+
+
+
+73x
+73x
+684x
+22x
+
+
+73x
+
+
+
+
+
+
+
+37x
+
+37x
+18x
+
+
+19x
+19x
+19x
+19x
+
+19x
+
+
+
+
+
+
+
+
+
+
+
+37x
+
+37x
+
+37x
+37x
+37x
+37x
+37x
+
+37x
+
+
+
+
+
+37x
+8x
+
+
+37x
+1x
+
+
+37x
+
+
+
+36x
+
+
+53x
+35x
+
+
+
+
+
+18x
+2x
+
+
+
+
+
+
+
+53x
+53x
+
+
+
+
+53x
+
+
+
+
+
+
+ | /* global window, document */
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import throttle from 'lodash.throttle';
+import shallowequal from 'shallowequal';
+
+export default class TrackVisibility extends PureComponent {
+ static propTypes = {
+ /**
+ * Define if the visibility need to be tracked once
+ */
+ once: PropTypes.bool,
+
+ /**
+ * Tweak the throttle interval
+ * Check https://css-tricks.com/debouncing-throttling-explained-examples/ for more details
+ */
+ throttleInterval(props, propName, component) {
+ const currentProp = props[propName];
+ if (!Number.isInteger(currentProp) || currentProp < 0) {
+ return new Error(
+ `The ${propName} prop you provided to ${component} is not a valid integer >= 0.`
+ );
+ }
+ return null;
+ },
+
+ /**
+ * Pass one or more children to track
+ */
+ children: PropTypes.oneOfType([
+ PropTypes.func,
+ PropTypes.element,
+ PropTypes.arrayOf(PropTypes.element)
+ ]),
+
+ /**
+ * Additional style to apply
+ */
+ style: PropTypes.object,
+
+ /**
+ * Additional className to apply
+ */
+ className: PropTypes.string,
+
+ /**
+ * Define an offset. Can be useful for lazy loading
+ */
+ offset: PropTypes.number,
+
+ /**
+ * Update the visibility state as soon as a part of the tracked component is visible
+ */
+ partialVisibility: PropTypes.bool,
+
+ /**
+ * Exposed for testing but allows node other than internal wrapping <div /> to be tracked
+ * for visibility
+ */
+ nodeRef: PropTypes.object,
+
+ /**
+ * Define a custom tag
+ */
+ tag: PropTypes.string,
+ /**
+ * Add a callback function
+ */
+ callback: PropTypes.func
+ };
+
+ static defaultProps = {
+ once: false,
+ throttleInterval: 150,
+ offset: 0,
+ partialVisibility: false,
+ tag: 'div',
+ callback: null
+ };
+
+ constructor(props) {
+ super(props);
+ this.ownProps = Object.keys(TrackVisibility.propTypes);
+ this.state = {
+ isVisible: false
+ };
+ this.throttleCb = throttle(
+ this.isComponentVisible,
+ this.props.throttleInterval
+ );
+
+ props.nodeRef && this.setNodeRef(props.nodeRef);
+ }
+
+ componentDidMount() {
+ this.attachListener();
+ this.isComponentVisible();
+ }
+
+ componentDidUpdate(prevProps) {
+ if (
+ !shallowequal(
+ this.getChildProps(this.props),
+ this.getChildProps(prevProps)
+ )
+ ) {
+ this.isComponentVisible();
+ }
+ }
+
+ componentWillUnmount() {
+ this.removeListener();
+ }
+
+ attachListener() {
+ window.addEventListener('scroll', this.throttleCb);
+ window.addEventListener('resize', this.throttleCb);
+ }
+
+ removeListener() {
+ window.removeEventListener('scroll', this.throttleCb);
+ window.removeEventListener('resize', this.throttleCb);
+ }
+
+ getChildProps(props = this.props) {
+ const childProps = {};
+ Object.keys(props).forEach(key => {
+ if (this.ownProps.indexOf(key) === -1) {
+ childProps[key] = props[key];
+ }
+ });
+ return childProps;
+ }
+
+ isVisible = (
+ { top, left, bottom, right, width, height },
+ windowWidth,
+ windowHeight
+ ) => {
+ const { offset, partialVisibility } = this.props;
+
+ if (top + right + bottom + left === 0) {
+ return false;
+ }
+
+ const topThreshold = 0 - offset;
+ const leftThreshold = 0 - offset;
+ const widthCheck = windowWidth + offset;
+ const heightCheck = windowHeight + offset;
+
+ return partialVisibility
+ ? top + height >= topThreshold &&
+ left + width >= leftThreshold &&
+ bottom - height <= heightCheck &&
+ right - width <= widthCheck
+ : top >= topThreshold &&
+ left >= leftThreshold &&
+ bottom <= heightCheck &&
+ right <= widthCheck;
+ };
+
+ isComponentVisible = () => {
+ setTimeout(() => {
+ // isComponentVisible might be called from componentDidMount, before component ref is assigned
+ Iif (!this.nodeRef || !this.nodeRef.getBoundingClientRect) return;
+
+ const html = document.documentElement;
+ const { once, callback } = this.props;
+ const boundingClientRect = this.nodeRef.getBoundingClientRect();
+ const windowWidth = window.innerWidth || html.clientWidth;
+ const windowHeight = window.innerHeight || html.clientHeight;
+
+ const isVisible = this.isVisible(
+ boundingClientRect,
+ windowWidth,
+ windowHeight
+ );
+
+ if (isVisible && once) {
+ this.removeListener();
+ }
+
+ if (callback) {
+ callback(isVisible);
+ }
+
+ this.setState({ isVisible });
+ }, 0);
+ };
+
+ setNodeRef = ref => (this.nodeRef = ref);
+
+ getChildren() {
+ if (typeof this.props.children === 'function') {
+ return this.props.children({
+ ...this.getChildProps(),
+ isVisible: this.state.isVisible
+ });
+ }
+
+ return React.Children.map(this.props.children, child =>
+ React.cloneElement(child, {
+ ...this.getChildProps(),
+ isVisible: this.state.isVisible
+ })
+ );
+ }
+
+ render() {
+ const { className, style, nodeRef, tag: Tag } = this.props;
+ const props = {
+ ...(className && { className }),
+ ...(style && { style })
+ };
+
+ return (
+ <Tag ref={!nodeRef && this.setNodeRef} {...props}>
+ {this.getChildren()}
+ </Tag>
+ );
+ }
+}
+ |
+