about summary refs log tree commit diff
diff options
context:
space:
mode:
authorThibaut Girka <thib@sitedethib.com>2019-02-06 20:04:39 +0100
committerThibG <thib@sitedethib.com>2019-02-10 22:54:25 +0100
commit68f3d003d6e841c864330fd5e7bcecadcc9b9178 (patch)
tree5cf6efc94d3f41939dc9e2e908a0833e242dcca2
parente49e54a5ffb3c5304a42c12be9dba6cc47384250 (diff)
Refactor intersection observer article code
-rw-r--r--app/javascript/flavours/glitch/components/intersection_observer_article.js27
1 files changed, 13 insertions, 14 deletions
diff --git a/app/javascript/flavours/glitch/components/intersection_observer_article.js b/app/javascript/flavours/glitch/components/intersection_observer_article.js
index 03d8f17c6..900c98638 100644
--- a/app/javascript/flavours/glitch/components/intersection_observer_article.js
+++ b/app/javascript/flavours/glitch/components/intersection_observer_article.js
@@ -103,24 +103,23 @@ export default class IntersectionObserverArticle extends ImmutablePureComponent
     const { children, id, index, listLength, cachedHeight } = this.props;
     const { isIntersecting, isHidden } = this.state;
 
+    const style = {};
+
     if (!isIntersecting && (isHidden || cachedHeight)) {
-      return (
-        <article
-          ref={this.handleRef}
-          aria-posinset={index + 1}
-          aria-setsize={listLength}
-          style={{ height: `${this.height || cachedHeight || 150}px`, opacity: 0, overflow: 'hidden' }}
-          data-id={id}
-          tabIndex='0'
-        >
-          {children && React.cloneElement(children, { hidden: true })}
-        </article>
-      );
+      style.height = `${this.height || cachedHeight || 150}px`;
+      style.opacity = 0;
+      style.overflow = 'hidden';
     }
 
     return (
-      <article ref={this.handleRef} aria-posinset={index + 1} aria-setsize={listLength} data-id={id} tabIndex='0'>
-        {children && React.cloneElement(children, { hidden: false })}
+      <article
+        ref={this.handleRef}
+        aria-posinset={index + 1}
+        aria-setsize={listLength}
+        data-id={id}
+        tabIndex='0'
+        style={style}>
+          {children && React.cloneElement(children, { hidden: !isIntersecting && (isHidden || cachedHeight) })}
       </article>
     );
   }