Merge pull request #430 from CraveFood/force-popover-rerender

feat(Popover): remove content node from dom when popover is not visible

Author: alcferreira

packages/popover/src/Popover.js

@@ -4,7 +4,9 @@ import styled from "styled-components";
 import values from "object.values";
 import Tooltip, { alignments } from "@crave/farmblocks-tooltip";
 
-const Container = styled.div`display: inline-block;`;
+const Container = styled.div`
+  display: inline-block;
+`;
 
 class Popover extends React.Component {
   state = {
@@ -47,7 +49,7 @@ class Popover extends React.Component {
           zIndex={this.props.zIndex}
           padding={this.props.padding}
         >
-          {this.props.content(this.hide)}
+          {this.state.isVisible && this.props.content(this.hide)}
         </Tooltip>
       </Container>
     );

packages/popover/src/__snapshots__/Popover.story.storyshot

@@ -5,33 +5,6 @@ exports[`Storyshots Popover Button as a trigger - Right aligned 1`] = `
   position: relative;
 }
 
-.c2 {
-  -webkit-transition: visibility 0s linear 0.1s,opacity 0.1s linear;
-  transition: visibility 0s linear 0.1s,opacity 0.1s linear;
-  visibility: hidden;
-  opacity: 0;
-  position: absolute;
-  z-index: 1000;
-  top: 15px;
-  padding: 8px;
-  background-color: #ffffff;
-  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16);
-  border: solid 1px rgba(0,0,0,0.16);
-  border-radius: 4px;
-  white-space: pre;
-  color: #2f313a;
-  font-family: lato,sans-serif;
-  right: 0;
-}
-
-.c3 {
-  font-family: Lato,sans-serif;
-  font-size: 18px;
-  -webkit-font-smoothing: antialiased;
-  color: #2f313a;
-  text-align: left;
-}
-
 .c0 {
   display: inline-block;
 }
@@ -57,19 +30,7 @@ exports[`Storyshots Popover Button as a trigger - Right aligned 1`] = `
     </div>
     <div
       className="c1"
-    >
-      <div
-        className="c2"
-      >
-        <div
-          className="c3"
-          size={18}
-          type="#2f313a"
-        >
-          Popover content
-        </div>
-      </div>
-    </div>
+    />
   </div>
 </div>
 `;
@@ -79,28 +40,6 @@ exports[`Storyshots Popover Center aligned 1`] = `
   position: relative;
 }
 
-.c4 {
-  -webkit-transition: visibility 0s linear 0.1s,opacity 0.1s linear;
-  transition: visibility 0s linear 0.1s,opacity 0.1s linear;
-  visibility: hidden;
-  opacity: 0;
-  position: absolute;
-  z-index: 1000;
-  top: 15px;
-  padding: 8px;
-  background-color: #ffffff;
-  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16);
-  border: solid 1px rgba(0,0,0,0.16);
-  border-radius: 4px;
-  white-space: pre;
-  color: #2f313a;
-  font-family: lato,sans-serif;
-  left: 50%;
-  -webkit-transform: translateX(-50%);
-  -ms-transform: translateX(-50%);
-  transform: translateX(-50%);
-}
-
 .c1 {
   display: inline-block;
 }
@@ -155,14 +94,6 @@ exports[`Storyshots Popover Center aligned 1`] = `
   color: #2980b9;
 }
 
-.c5 {
-  font-family: Lato,sans-serif;
-  font-size: 18px;
-  -webkit-font-smoothing: antialiased;
-  color: #2f313a;
-  text-align: left;
-}
-
 .c0 {
   display: inline-block;
 }
@@ -205,19 +136,7 @@ exports[`Storyshots Popover Center aligned 1`] = `
     </div>
     <div
       className="c3"
-    >
-      <div
-        className="c4"
-      >
-        <div
-          className="c5"
-          size={18}
-          type="#2f313a"
-        >
-          Centered Popover
-        </div>
-      </div>
-    </div>
+    />
   </div>
 </div>
 `;
@@ -227,33 +146,6 @@ exports[`Storyshots Popover Custom padding 1`] = `
   position: relative;
 }
 
-.c2 {
-  -webkit-transition: visibility 0s linear 0.1s,opacity 0.1s linear;
-  transition: visibility 0s linear 0.1s,opacity 0.1s linear;
-  visibility: hidden;
-  opacity: 0;
-  position: absolute;
-  z-index: 1000;
-  top: 15px;
-  padding: 50px;
-  background-color: #ffffff;
-  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16);
-  border: solid 1px rgba(0,0,0,0.16);
-  border-radius: 4px;
-  white-space: pre;
-  color: #2f313a;
-  font-family: lato,sans-serif;
-  left: 0;
-}
-
-.c3 {
-  font-family: Lato,sans-serif;
-  font-size: 18px;
-  -webkit-font-smoothing: antialiased;
-  color: #2f313a;
-  text-align: left;
-}
-
 .c0 {
   display: inline-block;
 }
@@ -271,26 +163,7 @@ exports[`Storyshots Popover Custom padding 1`] = `
   </div>
   <div
     className="c1"
-  >
-    <div
-      className="c2"
-    >
-      <div>
-        <div
-          className="c3"
-          size={18}
-          type="#2f313a"
-        >
-          Popover content
-        </div>
-        <button
-          onClick={[Function]}
-        >
-          Dismiss
-        </button>
-      </div>
-    </div>
-  </div>
+  />
 </div>
 `;
 
@@ -299,25 +172,6 @@ exports[`Storyshots Popover Default - Link as a trigger 1`] = `
   position: relative;
 }
 
-.c4 {
-  -webkit-transition: visibility 0s linear 0.1s,opacity 0.1s linear;
-  transition: visibility 0s linear 0.1s,opacity 0.1s linear;
-  visibility: hidden;
-  opacity: 0;
-  position: absolute;
-  z-index: 1000;
-  top: 15px;
-  padding: 8px;
-  background-color: #ffffff;
-  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16);
-  border: solid 1px rgba(0,0,0,0.16);
-  border-radius: 4px;
-  white-space: pre;
-  color: #2f313a;
-  font-family: lato,sans-serif;
-  left: 0;
-}
-
 .c1 {
   display: inline-block;
 }
@@ -372,14 +226,6 @@ exports[`Storyshots Popover Default - Link as a trigger 1`] = `
   color: #2980b9;
 }
 
-.c5 {
-  font-family: Lato,sans-serif;
-  font-size: 18px;
-  -webkit-font-smoothing: antialiased;
-  color: #2f313a;
-  text-align: left;
-}
-
 .c0 {
   display: inline-block;
 }
@@ -414,19 +260,7 @@ exports[`Storyshots Popover Default - Link as a trigger 1`] = `
   </div>
   <div
     className="c3"
-  >
-    <div
-      className="c4"
-    >
-      <div
-        className="c5"
-        size={18}
-        type="#2f313a"
-      >
-        Popover content
-      </div>
-    </div>
-  </div>
+  />
 </div>
 `;
 
@@ -435,25 +269,6 @@ exports[`Storyshots Popover Dismissable 1`] = `
   position: relative;
 }
 
-.c4 {
-  -webkit-transition: visibility 0s linear 0.1s,opacity 0.1s linear;
-  transition: visibility 0s linear 0.1s,opacity 0.1s linear;
-  visibility: hidden;
-  opacity: 0;
-  position: absolute;
-  z-index: 1000;
-  top: 15px;
-  padding: 8px;
-  background-color: #ffffff;
-  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16);
-  border: solid 1px rgba(0,0,0,0.16);
-  border-radius: 4px;
-  white-space: pre;
-  color: #2f313a;
-  font-family: lato,sans-serif;
-  left: 0;
-}
-
 .c1 {
   display: inline-block;
 }
@@ -508,14 +323,6 @@ exports[`Storyshots Popover Dismissable 1`] = `
   color: #2980b9;
 }
 
-.c5 {
-  font-family: Lato,sans-serif;
-  font-size: 18px;
-  -webkit-font-smoothing: antialiased;
-  color: #2f313a;
-  text-align: left;
-}
-
 .c0 {
   display: inline-block;
 }
@@ -550,25 +357,6 @@ exports[`Storyshots Popover Dismissable 1`] = `
   </div>
   <div
     className="c3"
-  >
-    <div
-      className="c4"
-    >
-      <div>
-        <div
-          className="c5"
-          size={18}
-          type="#2f313a"
-        >
-          Popover content
-        </div>
-        <button
-          onClick={[Function]}
-        >
-          Dismiss
-        </button>
-      </div>
-    </div>
-  </div>
+  />
 </div>
 `;