Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings
This repository was archived by the owner on Nov 8, 2022. It is now read-only.

Commit2924915

Browse files
authored
refactor(follow-button): UI/UX adjust (#1119)
1 parenta623deb commit2924915

File tree

16 files changed

+234
-190
lines changed

16 files changed

+234
-190
lines changed

‎src/components/Buttons/FollowButton/FollowedBtn.js‎

Lines changed: 0 additions & 30 deletions
This file was deleted.
Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import{FC,memo}from'react'
2+
3+
import{TSIZE_TSM}from'@/spec'
4+
import{LavaLampLoading}from'@/components/Loading'
5+
6+
import{BtnWrapper,FollowedButton}from'../styles/follow_button'
7+
8+
typeTProps={
9+
size:TSIZE_TSM
10+
loading:boolean
11+
text:string
12+
onClick:()=>void
13+
}
14+
15+
constFollowBtn:FC<TProps>=({ size, loading, text, onClick})=>{
16+
return(
17+
<>
18+
{loading ?(
19+
<LavaLampLoadingsize="small"/>
20+
) :(
21+
<FollowedButtonsize={size}type="primary"onClick={onClick}ghost>
22+
<BtnWrapper>{text}</BtnWrapper>
23+
</FollowedButton>
24+
)}
25+
</>
26+
)
27+
}
28+
29+
exportdefaultmemo(FollowBtn)

‎src/components/Buttons/FollowButton/FollowingBtn.js‎

Lines changed: 0 additions & 49 deletions
This file was deleted.
Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import{FC,memo}from'react'
2+
3+
import{TSIZE_TSM}from'@/spec'
4+
import{ICON}from'@/config'
5+
6+
import{LavaLampLoading}from'@/components/Loading'
7+
importTooltipfrom'@/components/Tooltip'
8+
9+
import{
10+
BtnWrapper,
11+
Popinfo,
12+
CheckedIcon,
13+
FollowingButton,
14+
}from'../styles/follow_button'
15+
16+
typeTProps={
17+
size:TSIZE_TSM
18+
loading:boolean
19+
text:string
20+
onClick:()=>void
21+
}
22+
23+
constFollowingBtn:FC<TProps>=({ size, loading, text, onClick})=>{
24+
return(
25+
<>
26+
{loading ?(
27+
<LavaLampLoadingsize="small"/>
28+
) :(
29+
<Tooltip
30+
placement="bottom"
31+
delay={800}
32+
content={<Popinfo>点击取消关注</Popinfo>}
33+
noPadding
34+
>
35+
<FollowingButton
36+
size={size}
37+
type="primary"
38+
ghost
39+
onClick={onClick}
40+
noBorder
41+
>
42+
<BtnWrapper>
43+
<CheckedIconsrc={`${ICON}/shape/checked.svg`}/>
44+
{text}
45+
</BtnWrapper>
46+
</FollowingButton>
47+
</Tooltip>
48+
)}
49+
</>
50+
)
51+
}
52+
53+
exportdefaultmemo(FollowingBtn)

‎src/components/Buttons/FollowButton/index.js‎

Lines changed: 0 additions & 86 deletions
This file was deleted.
Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
/*
2+
* FollowButton
3+
*/
4+
5+
import{FC,memo,useState,useCallback}from'react'
6+
7+
import{TID,TSIZE_TSM}from'@/spec'
8+
import{buildLog}from'@/utils'
9+
import{SIZE}from'@/constant'
10+
11+
importFollowingBtnfrom'./FollowingBtn'
12+
importFollowedBtnfrom'./FollowedBtn'
13+
14+
/* eslint-disable-next-line */
15+
constlog=buildLog('c:FollowButton:index')
16+
17+
typeTProps={
18+
hasFollowed?:boolean
19+
userId?:TID
20+
size?:TSIZE_TSM
21+
loading?:boolean
22+
fakeLoading?:boolean
23+
followText?:string
24+
followingText?:string
25+
onFollow?:(userId:TID)=>void
26+
onUndoFollow?:(userId:TID)=>void
27+
}
28+
29+
constFollowButton:FC<TProps>=({
30+
userId,
31+
size=SIZE.SMALL,
32+
fakeLoading=false,
33+
loading=false,
34+
hasFollowed=false,
35+
followText='关 注',
36+
followingText='已关注',
37+
onFollow=log,
38+
onUndoFollow=log,
39+
})=>{
40+
const[simuLoading,setSimuLoading]=useState(false)
41+
constisLoading=fakeLoading ?simuLoading :loading
42+
43+
consthandleFollow=useCallback(()=>{
44+
if(fakeLoading){
45+
setSimuLoading(true)
46+
setTimeout(()=>setSimuLoading(false),1500)
47+
}
48+
onFollow(userId)
49+
},[fakeLoading,onFollow,userId])
50+
51+
consthandleUndoFollow=useCallback(()=>{
52+
if(fakeLoading){
53+
setSimuLoading(true)
54+
setTimeout(()=>setSimuLoading(false),1500)
55+
}
56+
onUndoFollow(userId)
57+
},[fakeLoading,onUndoFollow,userId])
58+
59+
return(
60+
<>
61+
{hasFollowed ?(
62+
<FollowingBtn
63+
size={size}
64+
loading={isLoading}
65+
text={followingText}
66+
onClick={handleUndoFollow}
67+
/>
68+
) :(
69+
<FollowedBtn
70+
size={size}
71+
loading={isLoading}
72+
text={followText}
73+
onClick={handleFollow}
74+
/>
75+
)}
76+
</>
77+
)
78+
}
79+
80+
exportdefaultmemo(FollowButton)

‎src/components/Buttons/styles/follow_button/index.ts‎

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
importstyledfrom'styled-components'
22

33
import{theme,animate,css}from'@/utils'
4+
importButtonfrom'@/components/Buttons/Button'
45
importImgfrom'@/Img'
56

67
exportconstBtnWrapper=styled.div`
78
${css.flex('align-center')};
9+
padding: 2px 5px;
810
`
911
constBtnIcon=styled(Img)`
10-
height: 12px;
11-
width: 12px;
12-
display: block;
13-
margin-right: 3px;
12+
${css.size(14)};
13+
margin-right: 2px;
1414
`
1515
exportconstWatchIcon=styled(BtnIcon)`
1616
fill:${theme('button.fg')};
@@ -30,3 +30,23 @@ export const LoadingIcon = styled(BtnIcon)<{ light: boolean }>`
3030
${css.size(15)};
3131
animation:${animate.rotate360} 1s linear infinite;
3232
`
33+
exportconstCheckedIcon=styled(BtnIcon)`
34+
fill:${theme('baseColor.green')};
35+
`
36+
exportconstFollowedButton=styled(Button)`
37+
border-radius: 10px;
38+
`
39+
exportconstFollowingButton=styled(Button)`
40+
color:${theme('thread.articleTitle')};
41+
/* color:${theme('baseColor.green')}; */
42+
border: none;
43+
border-radius: 10px;
44+
background: #003745;
45+
padding-top: 2px;
46+
padding-bottom: 2px;
47+
48+
&:hover {
49+
background: #003745;
50+
/* border: 1px solid; */
51+
}
52+
`

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp