refactor(clean up): rm antd tooltip in communities page

Author: mydearxym

components/AvatarsRow/index.js

@@ -7,7 +7,6 @@
 import React from 'react'
 import T from 'prop-types'
 import R from 'ramda'
-// import { Tooltip } from 'antd'
 
 import { ATATARS_LIST_LENGTH } from '@config/general'
 import { buildLog, prettyNum } from '@utils'

containers/CommunitiesContent/Hinter.js

@@ -0,0 +1,13 @@
+import React from 'react'
+
+// import { ICON_CMD } from 'config'
+import { Wrapper, Title, Desc } from './styles/hinter'
+
+const Hinter = ({ title, desc }) => (
+  <Wrapper>
+    <Title>【{title}】</Title>
+    <Desc>{desc}</Desc>
+  </Wrapper>
+)
+
+export default Hinter

containers/CommunitiesContent/SubscribeBtn.js

@@ -1,25 +1,41 @@
 import React from 'react'
-import { Button, Tooltip } from 'antd'
+import { Button } from 'antd'
 
 import { ICON_CMD } from '@config'
 
+import Tooltip from '@components/Tooltip'
+import Hinter from './Hinter'
+
 import { SubscribedBox, BtnWrapper, PrefixIcon } from './styles'
 import { subscribe, unSubscribe } from './logic'
 
 const AlreadySubedBtn = ({ community }) => (
-  <Tooltip title="取消关注" mouseEnterDelay={1} placement="bottom">
+  <React.Fragment>
     {community.raw !== 'home' ? (
-      <Button
-        size="small"
-        type="primary"
-        ghost
-        onClick={unSubscribe.bind(this, community.id)}
+      <Tooltip
+        content={
+          <Hinter
+            title="取消关注"
+            desc="之后该社区将不会出现在左侧订阅列表中"
+          />
+        }
+        animation="perspective"
+        delay={1000}
       >
-        <BtnWrapper>
-          <PrefixIcon src={`${ICON_CMD}/check2.svg`} primary />
-          <div>已关注</div>
-        </BtnWrapper>
-      </Button>
+        <div>
+          <Button
+            size="small"
+            type="primary"
+            ghost
+            onClick={unSubscribe.bind(this, community.id)}
+          >
+            <BtnWrapper>
+              <PrefixIcon src={`${ICON_CMD}/check2.svg`} primary />
+              <div>已关注</div>
+            </BtnWrapper>
+          </Button>
+        </div>
+      </Tooltip>
     ) : (
       <SubscribedBox>
         <BtnWrapper>
@@ -28,7 +44,7 @@ const AlreadySubedBtn = ({ community }) => (
         </BtnWrapper>
       </SubscribedBox>
     )}
-  </Tooltip>
+  </React.Fragment>
 )
 
 const SubscribeBtn = ({
@@ -43,22 +59,32 @@ const SubscribeBtn = ({
     )
   }
   return (
-    <div>
+    <React.Fragment>
       {community.viewerHasSubscribed ? (
         <AlreadySubedBtn community={community} />
       ) : (
-        <Button
-          size="small"
-          type="primary"
-          onClick={subscribe.bind(this, community.id)}
+        <Tooltip
+          content={
+            <Hinter title="关注" desc="之后该社区将会出现在左侧订阅列表中" />
+          }
+          animation="perspective"
+          delay={1000}
         >
-          <BtnWrapper>
-            <PrefixIcon src={`${ICON_CMD}/plus.svg`} />
-            <div>关注</div>
-          </BtnWrapper>
-        </Button>
+          <div>
+            <Button
+              size="small"
+              type="primary"
+              onClick={subscribe.bind(this, community.id)}
+            >
+              <BtnWrapper>
+                <PrefixIcon src={`${ICON_CMD}/plus.svg`} />
+                <div>关注</div>
+              </BtnWrapper>
+            </Button>
+          </div>
+        </Tooltip>
       )}
-    </div>
+    </React.Fragment>
   )
 }
 

containers/CommunitiesContent/styles/hinter.js

@@ -0,0 +1,20 @@
+import styled from 'styled-components'
+
+// import Img from 'components/Img'
+import { cs, theme } from 'utils'
+
+export const Wrapper = styled.div`
+  ${cs.flexColumn('align-start')};
+`
+export const Title = styled.div`
+  color: ${theme('tooltip.text')};
+  font-weight: bold;
+  font-size: 1rem;
+`
+export const Desc = styled.div`
+  color: ${theme('tooltip.text')};
+  margin-top: 10px;
+  margin-left: 7px;
+  font-size: 0.9rem;
+  opacity: 0.8;
+`