refactor(follow-button): UI/UX adjust (#1119)

Author: mydearxym

src/components/Buttons/FollowButton/FollowedBtn.js

@@ -0,0 +1,29 @@
+import { FC, memo } from 'react'
+
+import { TSIZE_TSM } from '@/spec'
+import { LavaLampLoading } from '@/components/Loading'
+
+import { BtnWrapper, FollowedButton } from '../styles/follow_button'
+
+type TProps = {
+  size: TSIZE_TSM
+  loading: boolean
+  text: string
+  onClick: () => void
+}
+
+const FollowBtn: FC<TProps> = ({ size, loading, text, onClick }) => {
+  return (
+    <>
+      {loading ? (
+        <LavaLampLoading size="small" />
+      ) : (
+        <FollowedButton size={size} type="primary" onClick={onClick} ghost>
+          <BtnWrapper>{text}</BtnWrapper>
+        </FollowedButton>
+      )}
+    </>
+  )
+}
+
+export default memo(FollowBtn)

src/components/Buttons/FollowButton/FollowedBtn.tsx

@@ -0,0 +1,53 @@
+import { FC, memo } from 'react'
+
+import { TSIZE_TSM } from '@/spec'
+import { ICON } from '@/config'
+
+import { LavaLampLoading } from '@/components/Loading'
+import Tooltip from '@/components/Tooltip'
+
+import {
+  BtnWrapper,
+  Popinfo,
+  CheckedIcon,
+  FollowingButton,
+} from '../styles/follow_button'
+
+type TProps = {
+  size: TSIZE_TSM
+  loading: boolean
+  text: string
+  onClick: () => void
+}
+
+const FollowingBtn: FC<TProps> = ({ size, loading, text, onClick }) => {
+  return (
+    <>
+      {loading ? (
+        <LavaLampLoading size="small" />
+      ) : (
+        <Tooltip
+          placement="bottom"
+          delay={800}
+          content={<Popinfo>点击取消关注</Popinfo>}
+          noPadding
+        >
+          <FollowingButton
+            size={size}
+            type="primary"
+            ghost
+            onClick={onClick}
+            noBorder
+          >
+            <BtnWrapper>
+              <CheckedIcon src={`${ICON}/shape/checked.svg`} />
+              {text}
+            </BtnWrapper>
+          </FollowingButton>
+        </Tooltip>
+      )}
+    </>
+  )
+}
+
+export default memo(FollowingBtn)

src/components/Buttons/FollowButton/FollowingBtn.js

@@ -0,0 +1,80 @@
+/*
+ * FollowButton
+ */
+
+import { FC, memo, useState, useCallback } from 'react'
+
+import { TID, TSIZE_TSM } from '@/spec'
+import { buildLog } from '@/utils'
+import { SIZE } from '@/constant'
+
+import FollowingBtn from './FollowingBtn'
+import FollowedBtn from './FollowedBtn'
+
+/* eslint-disable-next-line */
+const log = buildLog('c:FollowButton:index')
+
+type TProps = {
+  hasFollowed?: boolean
+  userId?: TID
+  size?: TSIZE_TSM
+  loading?: boolean
+  fakeLoading?: boolean
+  followText?: string
+  followingText?: string
+  onFollow?: (userId: TID) => void
+  onUndoFollow?: (userId: TID) => void
+}
+
+const FollowButton: FC<TProps> = ({
+  userId,
+  size = SIZE.SMALL,
+  fakeLoading = false,
+  loading = false,
+  hasFollowed = false,
+  followText = '关 注',
+  followingText = '已关注',
+  onFollow = log,
+  onUndoFollow = log,
+}) => {
+  const [simuLoading, setSimuLoading] = useState(false)
+  const isLoading = fakeLoading ? simuLoading : loading
+
+  const handleFollow = useCallback(() => {
+    if (fakeLoading) {
+      setSimuLoading(true)
+      setTimeout(() => setSimuLoading(false), 1500)
+    }
+    onFollow(userId)
+  }, [fakeLoading, onFollow, userId])
+
+  const handleUndoFollow = useCallback(() => {
+    if (fakeLoading) {
+      setSimuLoading(true)
+      setTimeout(() => setSimuLoading(false), 1500)
+    }
+    onUndoFollow(userId)
+  }, [fakeLoading, onUndoFollow, userId])
+
+  return (
+    <>
+      {hasFollowed ? (
+        <FollowingBtn
+          size={size}
+          loading={isLoading}
+          text={followingText}
+          onClick={handleUndoFollow}
+        />
+      ) : (
+        <FollowedBtn
+          size={size}
+          loading={isLoading}
+          text={followText}
+          onClick={handleFollow}
+        />
+      )}
+    </>
+  )
+}
+
+export default memo(FollowButton)

src/components/Buttons/FollowButton/FollowingBtn.tsx

@@ -1,16 +1,16 @@
 import styled from 'styled-components'
 
 import { theme, animate, css } from '@/utils'
+import Button from '@/components/Buttons/Button'
 import Img from '@/Img'
 
 export const BtnWrapper = styled.div`
   ${css.flex('align-center')};
+  padding: 2px 5px;
 `
 const BtnIcon = styled(Img)`
-  height: 12px;
-  width: 12px;
-  display: block;
-  margin-right: 3px;
+  ${css.size(14)};
+  margin-right: 2px;
 `
 export const WatchIcon = styled(BtnIcon)`
   fill: ${theme('button.fg')};
@@ -30,3 +30,23 @@ export const LoadingIcon = styled(BtnIcon)<{ light: boolean }>`
   ${css.size(15)};
   animation: ${animate.rotate360} 1s linear infinite;
 `
+export const CheckedIcon = styled(BtnIcon)`
+  fill: ${theme('baseColor.green')};
+`
+export const FollowedButton = styled(Button)`
+  border-radius: 10px;
+`
+export const FollowingButton = styled(Button)`
+  color: ${theme('thread.articleTitle')};
+  /* color: ${theme('baseColor.green')}; */
+  border: none;
+  border-radius: 10px;
+  background: #003745;
+  padding-top: 2px;
+  padding-bottom: 2px;
+
+  &:hover {
+    background: #003745;
+    /* border: 1px solid; */
+  }
+`