diff options
author | beatrix <beatrix.bitrot@gmail.com> | 2017-12-06 17:44:07 -0500 |
---|---|---|
committer | GitHub <noreply@github.com> | 2017-12-06 17:44:07 -0500 |
commit | 81b01457598459c42a7b14d9aa14f91ba60dcae1 (patch) | |
tree | 7d3e6dadb75f3be95e5a5ed8b7ecfe90e7711831 /app/javascript/themes/glitch/components/intersection_observer_article.js | |
parent | f1cbea77a4a52929244198dcbde26d63d837489a (diff) | |
parent | 017fc81caf8f265e5c5543186877437485625795 (diff) |
Merge pull request #229 from glitch-soc/glitch-theme
Advanced Next-Level Flavours And Skins For Mastodon™
Diffstat (limited to 'app/javascript/themes/glitch/components/intersection_observer_article.js')
-rw-r--r-- | app/javascript/themes/glitch/components/intersection_observer_article.js | 130 |
1 files changed, 0 insertions, 130 deletions
diff --git a/app/javascript/themes/glitch/components/intersection_observer_article.js b/app/javascript/themes/glitch/components/intersection_observer_article.js deleted file mode 100644 index f0139ac75..000000000 --- a/app/javascript/themes/glitch/components/intersection_observer_article.js +++ /dev/null @@ -1,130 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import scheduleIdleTask from 'themes/glitch/util/schedule_idle_task'; -import getRectFromEntry from 'themes/glitch/util/get_rect_from_entry'; -import { is } from 'immutable'; - -// Diff these props in the "rendered" state -const updateOnPropsForRendered = ['id', 'index', 'listLength']; -// Diff these props in the "unrendered" state -const updateOnPropsForUnrendered = ['id', 'index', 'listLength', 'cachedHeight']; - -export default class IntersectionObserverArticle extends React.Component { - - static propTypes = { - intersectionObserverWrapper: PropTypes.object.isRequired, - id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - index: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - listLength: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - saveHeightKey: PropTypes.string, - cachedHeight: PropTypes.number, - onHeightChange: PropTypes.func, - children: PropTypes.node, - }; - - state = { - isHidden: false, // set to true in requestIdleCallback to trigger un-render - } - - shouldComponentUpdate (nextProps, nextState) { - const isUnrendered = !this.state.isIntersecting && (this.state.isHidden || this.props.cachedHeight); - const willBeUnrendered = !nextState.isIntersecting && (nextState.isHidden || nextProps.cachedHeight); - if (!!isUnrendered !== !!willBeUnrendered) { - // If we're going from rendered to unrendered (or vice versa) then update - return true; - } - // Otherwise, diff based on props - const propsToDiff = isUnrendered ? updateOnPropsForUnrendered : updateOnPropsForRendered; - return !propsToDiff.every(prop => is(nextProps[prop], this.props[prop])); - } - - componentDidMount () { - const { intersectionObserverWrapper, id } = this.props; - - intersectionObserverWrapper.observe( - id, - this.node, - this.handleIntersection - ); - - this.componentMounted = true; - } - - componentWillUnmount () { - const { intersectionObserverWrapper, id } = this.props; - intersectionObserverWrapper.unobserve(id, this.node); - - this.componentMounted = false; - } - - handleIntersection = (entry) => { - this.entry = entry; - - scheduleIdleTask(this.calculateHeight); - this.setState(this.updateStateAfterIntersection); - } - - updateStateAfterIntersection = (prevState) => { - if (prevState.isIntersecting && !this.entry.isIntersecting) { - scheduleIdleTask(this.hideIfNotIntersecting); - } - return { - isIntersecting: this.entry.isIntersecting, - isHidden: false, - }; - } - - calculateHeight = () => { - const { onHeightChange, saveHeightKey, id } = this.props; - // save the height of the fully-rendered element (this is expensive - // on Chrome, where we need to fall back to getBoundingClientRect) - this.height = getRectFromEntry(this.entry).height; - - if (onHeightChange && saveHeightKey) { - onHeightChange(saveHeightKey, id, this.height); - } - } - - hideIfNotIntersecting = () => { - if (!this.componentMounted) { - return; - } - - // When the browser gets a chance, test if we're still not intersecting, - // and if so, set our isHidden to true to trigger an unrender. The point of - // this is to save DOM nodes and avoid using up too much memory. - // See: https://github.com/tootsuite/mastodon/issues/2900 - this.setState((prevState) => ({ isHidden: !prevState.isIntersecting })); - } - - handleRef = (node) => { - this.node = node; - } - - render () { - const { children, id, index, listLength, cachedHeight } = this.props; - const { isIntersecting, isHidden } = this.state; - - if (!isIntersecting && (isHidden || cachedHeight)) { - return ( - <article - ref={this.handleRef} - aria-posinset={index} - aria-setsize={listLength} - style={{ height: `${this.height || cachedHeight}px`, opacity: 0, overflow: 'hidden' }} - data-id={id} - tabIndex='0' - > - {children && React.cloneElement(children, { hidden: true })} - </article> - ); - } - - return ( - <article ref={this.handleRef} aria-posinset={index} aria-setsize={listLength} data-id={id} tabIndex='0'> - {children && React.cloneElement(children, { hidden: false })} - </article> - ); - } - -} |