refactor(Tooltip): add more option && theme support

Author: mydearxym

components/Tooltip/index.js

@@ -13,13 +13,24 @@ import { buildLog } from '@utils'
 /* eslint-disable-next-line */
 const log = buildLog('c:Tooltip:index')
 
-const Tooltip = ({ children, content, animation, arrow, delay, duration }) => (
+const Tooltip = ({
+  children,
+  content,
+  animation,
+  arrow,
+  delay,
+  duration,
+  placement,
+  onTrigger,
+}) => (
   <Wrapper
     content={content}
     animation={animation}
     arrow={arrow}
     delay={[delay, 20]}
     duration={duration}
+    placement={placement}
+    onTrigger={onTrigger}
   >
     {children}
   </Wrapper>
@@ -39,6 +50,22 @@ Tooltip.propTypes = {
   arrow: T.bool,
   delay: T.number,
   duration: T.number,
+  placement: T.oneOf([
+    'top',
+    'top-start',
+    'top-end',
+    'bottom',
+    'bottom-start',
+    'bottom-end',
+    'left',
+    'left-start',
+    'left-end',
+    'right',
+    'right-start',
+    'right-end',
+  ]),
+  // hooks
+  onTrigger: T.func,
   // more options see: https://atomiks.github.io/tippyjs/all-options/
 }
 
@@ -47,6 +74,9 @@ Tooltip.defaultProps = {
   arrow: true,
   delay: 0,
   duration: 100,
+  placement: 'top',
+  // hooks
+  onTrigger: log,
 }
 
 export default React.memo(Tooltip)

components/Tooltip/styles/index.js

@@ -2,15 +2,31 @@ import styled from 'styled-components'
 import Tippy from '@tippy.js/react'
 
 // import Img from '@Img'
-// import { theme } from '@utils'
+import { theme } from '@utils'
 
 export const Wrapper = styled(Tippy)`
-  background: tomato;
+  background: ${theme('tooltip.bg')};
+  color: ${theme('tooltip.text')};
 
   /* Styling the arrow for different placements */
   &[x-placement^='top'] {
     .tippy-arrow {
-      border-top-color: tomato;
+      border-top-color: ${theme('tooltip.bg')};
+    }
+  }
+  &[x-placement^='bottom'] {
+    .tippy-arrow {
+      border-top-color: ${theme('tooltip.bg')};
+    }
+  }
+  &[x-placement^='left'] {
+    .tippy-arrow {
+      border-top-color: ${theme('tooltip.bg')};
+    }
+  }
+  &[x-placement^='right'] {
+    .tippy-arrow {
+      border-top-color: ${theme('tooltip.bg')};
     }
   }
 `

utils/themes/skins/cyan.js

@@ -319,6 +319,10 @@ const cyan = {
     doramonFg: '#F6DE38',
     doramonBg: 'transparent',
   },
+  tooltip: {
+    text: '#F8FBFC',
+    bg: '#54A1AA',
+  },
 }
 
 export default cyan

utils/themes/skins/github.js

@@ -320,6 +320,10 @@ const github = {
     doramonFg: 'orange',
     doramonBg: 'transparent',
   },
+  tooltip: {
+    text: '#F0F6FA',
+    bg: '#2B2B2B',
+  },
 }
 
 export default github

utils/themes/skins/green.js

@@ -310,6 +310,10 @@ const green = {
     doramonFg: 'orange',
     doramonBg: 'transparent',
   },
+  tooltip: {
+    text: '#F0F6FA',
+    bg: '#2B2B2B',
+  },
 }
 
 export default green

utils/themes/skins/iron_green.js

@@ -313,6 +313,10 @@ const iconGreen = {
     doramonFg: 'orange',
     doramonBg: 'transparent',
   },
+  tooltip: {
+    text: '#F0F6FA',
+    bg: '#2B2B2B',
+  },
 }
 
 export default iconGreen

utils/themes/skins/monokai.js

@@ -314,6 +314,10 @@ const monokai = {
     doramonFg: 'orange',
     doramonBg: 'transparent',
   },
+  tooltip: {
+    text: '#B0AFB0',
+    bg: '#676464',
+  },
 }
 
 export default monokai

utils/themes/skins/purple.js

@@ -318,6 +318,10 @@ const purple = {
     doramonFg: 'orange',
     doramonBg: 'transparent',
   },
+  tooltip: {
+    text: '#B7B1C1',
+    bg: '#56526E',
+  },
 }
 
 export default purple

utils/themes/skins/solarized_dark.js

@@ -319,6 +319,10 @@ const solarizedDark = {
     doramonFg: 'orange',
     doramonBg: 'transparent',
   },
+  tooltip: {
+    text: '#95C1DD',
+    bg: '#075575',
+  },
 }
 
 export default solarizedDark

utils/themes/skins/yellow.js

@@ -317,6 +317,10 @@ const yellow = {
     doramonFg: 'orange',
     doramonBg: 'transparent',
   },
+  tooltip: {
+    text: '#F0F6FA',
+    bg: '#2B2B2B',
+  },
 }
 
 export default yellow