feat: 💄 make tooltip to appear according to its placement; add scale …

…to its animation
kitos · Jan 16, 2019 · 613bf61 · 613bf61
1 parent 1142b0f
commit 613bf61
Showing 1 changed file with 41 additions and 32 deletions.
diff --git a/src/components/tooltip/tooltip.js b/src/components/tooltip/tooltip.js
@@ -48,39 +48,48 @@ let Arrow = styled.div`
 `
 
 let Tooltip = ({ isOpen, className, children }) => (
-  <Transition
-    items={isOpen}
-    from={{ transform: 'translateY(20px)', opacity: 0 }}
-    enter={{ transform: 'translateY(0)', opacity: 1 }}
-    leave={{ transform: 'translateY(20px)', opacity: 0 }}
-  >
-    {transitionIsOpen =>
-      transitionIsOpen &&
-      (transitionStyle => (
-        <Popper>
-          {({ ref, style, placement, arrowProps }) => (
-            <div
-              ref={ref}
-              style={style}
-              data-placement={placement}
-              className={className}
-            >
-              <Popover style={transitionStyle}>{children}</Popover>
+  <Popper>
+    {({ ref, style, placement, arrowProps }) => {
+      let translateSign = placement === 'bottom' ? '-' : ''
 
-              <Arrow
-                {...arrowProps}
-                style={{
-                  ...arrowProps.style,
-                  opacity: transitionStyle.opacity,
-                }}
-                placement={placement}
-              />
-            </div>
-          )}
-        </Popper>
-      ))
-    }
-  </Transition>
+      return (
+        <Transition
+          items={isOpen}
+          from={{
+            transform: `translateY(${translateSign}30px) scale(0.9)`,
+            opacity: 0,
+          }}
+          enter={{ transform: `translateY(0) scale(1)`, opacity: 1 }}
+          leave={{
+            transform: `translateY(${translateSign}30px) scale(0.9)`,
+            opacity: 0,
+          }}
+        >
+          {transitionIsOpen =>
+            transitionIsOpen &&
+            (transitionStyle => (
+              <div
+                ref={ref}
+                style={style}
+                data-placement={placement}
+                className={className}
+              >
+                <Popover style={transitionStyle}>{children}</Popover>
+
+                <Arrow
+                  {...{ ...arrowProps, placement }}
+                  style={{
+                    ...arrowProps.style,
+                    opacity: transitionStyle.opacity,
+                  }}
+                />
+              </div>
+            ))
+          }
+        </Transition>
+      )
+    }}
+  </Popper>
 )
 
 export default Tooltip