treehouse
/
mastodon
21
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

Refactor intersection observer article code

lolsob-rspec
Thibaut Girka 2019-02-06 20:04:39 +01:00 committed by ThibG
parent 18a540da9f
commit b05cda87f8
1 changed files with 13 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
app/javascript/flavours/glitch/components/intersection_observer_article.js
View File

@ -103,24 +103,23 @@ export default class IntersectionObserverArticle extends ImmutablePureComponent
const { children, id, index, listLength, cachedHeight } = this.props; const { children, id, index, listLength, cachedHeight } = this.props;
const { isIntersecting, isHidden } = this.state; const { isIntersecting, isHidden } = this.state;
const style = {};
if (!isIntersecting && (isHidden || cachedHeight)) { if (!isIntersecting && (isHidden || cachedHeight)) {
style.height = `${this.height || cachedHeight || 150}px`;
style.opacity = 0;
style.overflow = 'hidden';
}
return ( return (
<article <article
ref={this.handleRef} ref={this.handleRef}
aria-posinset={index + 1} aria-posinset={index + 1}
aria-setsize={listLength} aria-setsize={listLength}
style={{ height: `${this.height || cachedHeight || 150}px`, opacity: 0, overflow: 'hidden' }}
data-id={id} data-id={id}
tabIndex='0' tabIndex='0'
> style={style}>
{children && React.cloneElement(children, { hidden: true })} {children && React.cloneElement(children, { hidden: !isIntersecting && (isHidden || cachedHeight) })}
</article>
);
}
return (
<article ref={this.handleRef} aria-posinset={index + 1} aria-setsize={listLength} data-id={id} tabIndex='0'>
{children && React.cloneElement(children, { hidden: false })}
</article> </article>
); );
} }