Refactor intersection observer article code
This commit is contained in:
parent
e49e54a5ff
commit
68f3d003d6
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Reference in New Issue