refactor(Tooltip): extract the awesome component

Author: mydearxym

components/AvatarsRow/index.js

@@ -7,11 +7,13 @@
 import React from 'react'
 import T from 'prop-types'
 import R from 'ramda'
-import { Tooltip } from 'antd'
+// import { Tooltip } from 'antd'
 
 import { ATATARS_LIST_LENGTH } from '@config/general'
-
 import { buildLog, prettyNum } from '@utils'
+
+import Tooltip from '@components/Tooltip'
+
 import {
   Wrapper,
   AvatarsItem,
@@ -50,15 +52,15 @@ const AvatarsRow = ({
         <span />
       ) : (
         <MoreItem onClick={onTotalSelect.bind(this, { users, total })}>
-          <Tooltip title={`所有评论共 ${total} 条`}>
+          <Tooltip content={`所有评论共 ${total} 条`}>
             <AvatarsMore total={total}>{prettyNum(total)}</AvatarsMore>
           </Tooltip>
         </MoreItem>
       )}
 
       {R.slice(0, limit, sortedUsers).map(user => (
         <AvatarsItem key={user.id} onClick={onUserSelect.bind(this, user)}>
-          <Tooltip title={user.nickname}>
+          <Tooltip content={user.nickname} delay={200}>
             <AvatarsImg src={user.avatar} />
           </Tooltip>
         </AvatarsItem>

components/Tooltip/index.js

@@ -0,0 +1,52 @@
+/*
+ *
+ * Tooltip
+ *
+ */
+
+import React from 'react'
+import T from 'prop-types'
+
+import { Wrapper } from './styles'
+import { buildLog } from '@utils'
+
+/* eslint-disable-next-line */
+const log = buildLog('c:Tooltip:index')
+
+const Tooltip = ({ children, content, animation, arrow, delay, duration }) => (
+  <Wrapper
+    content={content}
+    animation={animation}
+    arrow={arrow}
+    delay={[delay, 20]}
+    duration={duration}
+  >
+    {children}
+  </Wrapper>
+)
+
+Tooltip.propTypes = {
+  children: T.node.isRequired,
+  content: T.oneOfType([T.string, T.node]).isRequired,
+  // options
+  animation: T.oneOf([
+    'shift-away',
+    'shift-toward',
+    'fade',
+    'scale',
+    'perspective',
+  ]),
+  arrow: T.bool,
+  delay: T.number,
+  duration: T.number,
+  // more options see: https://atomiks.github.io/tippyjs/all-options/
+}
+
+Tooltip.defaultProps = {
+  animation: 'fade',
+  arrow: true,
+  delay: 0,
+  duration: 100,
+}
+
+export default React.memo(Tooltip)

components/Tooltip/styles/index.js

@@ -0,0 +1,18 @@
+import styled from 'styled-components'
+import Tippy from '@tippy.js/react'
+
+// import Img from '@Img'
+// import { theme } from '@utils'
+
+export const Wrapper = styled(Tippy)`
+  background: tomato;
+
+  /* Styling the arrow for different placements */
+  &[x-placement^='top'] {
+    .tippy-arrow {
+      border-top-color: tomato;
+    }
+  }
+`
+
+export const Title = styled.div``

components/Tooltip/tests/index.test.js

@@ -0,0 +1,10 @@
+// import React from 'react'
+// import { shallow } from 'enzyme'
+
+// import Tooltip from '../index'
+
+describe('TODO <Tooltip />', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(true)
+  })
+})