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.

Commitac51ebf

Browse files
authored
feat: User list with setter, UI/UX (#1139)
* feat(user-list): basic UI* refactor(user-list): ui wip* refactor(user-list): basic search view UX* refactor(user-list): basic list UX* refactor(user-list): basic list UX* refactor(user-list): basic list UX
1 parentd54f5ad commitac51ebf

File tree

28 files changed

+745
-16
lines changed

28 files changed

+745
-16
lines changed
Lines changed: 1 addition & 0 deletions
Loading
Lines changed: 1 addition & 0 deletions
Loading
Lines changed: 1 addition & 0 deletions
Loading

‎public/icons/static/shape/ear.svg‎

Lines changed: 1 addition & 0 deletions
Loading
Lines changed: 1 addition & 0 deletions
Loading
Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
/*
2+
*
3+
* UserList
4+
*
5+
*/
6+
7+
import{FC,memo}from'react'
8+
9+
importtype{TUser}from'@/spec'
10+
import{ICON}from'@/config'
11+
import{buildLog}from'@/utils/logger'
12+
13+
// import Setter from './Setter'
14+
import{
15+
Wrapper,
16+
Avatar,
17+
SettingWrapper,
18+
SettingIcon,
19+
}from'../styles/list/create_works_layout'
20+
21+
/* eslint-disable-next-line */
22+
constlog=buildLog('c:UserList:index')
23+
24+
typeTProps={
25+
users:TUser[]
26+
withSetter?:boolean
27+
onSetting:()=>void
28+
}
29+
30+
constCreateWorksLayout:FC<TProps>=({
31+
users,
32+
withSetter=false,
33+
onSetting,
34+
})=>{
35+
return(
36+
<Wrapper>
37+
{users.map((user)=>(
38+
<Avatarkey={user.id}src={user.avatar}/>
39+
))}
40+
{withSetter&&(
41+
<SettingWrapperonClick={onSetting}>
42+
<SettingIconsrc={`${ICON}/shape/settings.svg`}/>
43+
</SettingWrapper>
44+
)}
45+
</Wrapper>
46+
)
47+
}
48+
49+
exportdefaultmemo(CreateWorksLayout)
Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
/*
2+
*
3+
* UserList
4+
*
5+
*/
6+
7+
import{FC,memo}from'react'
8+
9+
importtype{TUser}from'@/spec'
10+
import{ICON}from'@/config'
11+
import{buildLog}from'@/utils/logger'
12+
13+
importButtonfrom'@/components/Buttons/Button'
14+
importUserItemfrom'../UserItem'
15+
16+
import{
17+
Wrapper,
18+
SettingWrapper,
19+
SettingIcon,
20+
}from'../styles/list/works_layout'
21+
22+
/* eslint-disable-next-line */
23+
constlog=buildLog('c:UserList:index')
24+
25+
typeTProps={
26+
users:TUser[]
27+
withSetter?:boolean
28+
onSetting:()=>void
29+
}
30+
31+
constWorksLayout:FC<TProps>=({ users, withSetter=false, onSetting})=>{
32+
return(
33+
<Wrapper>
34+
{users.map((user)=>(
35+
<UserItemkey={user.id}user={user}/>
36+
))}
37+
{withSetter&&(
38+
<SettingWrapperonClick={onSetting}>
39+
<Buttonsize="small"ghostnoBorder>
40+
管理
41+
<SettingIconsrc={`${ICON}/shape/settings.svg`}/>
42+
</Button>
43+
</SettingWrapper>
44+
)}
45+
</Wrapper>
46+
)
47+
}
48+
49+
exportdefaultmemo(WorksLayout)
Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import{FC}from'react'
2+
3+
importtype{TUser}from'@/spec'
4+
importtype{TLayout}from'../spec'
5+
6+
importCreateWorksLayoutfrom'./CreateWorksLayout'
7+
importWorksLayoutfrom'./WorksLayout'
8+
// create-works, works, guide-contribute
9+
10+
typeTProps={
11+
layout:TLayout
12+
users:TUser[]
13+
withSetter?:boolean
14+
onSetting:()=>void
15+
}
16+
17+
constLayout:FC<TProps>=({ layout, users, withSetter, onSetting})=>{
18+
switch(layout){
19+
case'works':{
20+
return(
21+
<WorksLayout
22+
users={users}
23+
withSetter={withSetter}
24+
onSetting={onSetting}
25+
/>
26+
)
27+
}
28+
29+
default:{
30+
return(
31+
<CreateWorksLayout
32+
users={users}
33+
withSetter={withSetter}
34+
onSetting={onSetting}
35+
/>
36+
)
37+
}
38+
}
39+
}
40+
41+
exportdefaultLayout
Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import{FC,Fragment,memo}from'react'
2+
3+
import{ICON}from'@/config'
4+
5+
import{Wrapper,BackWrapper,PlusIcon}from'../styles/setter/header'
6+
importButtonfrom'@/components/Buttons/Button'
7+
importArrowButtonfrom'@/components/Buttons/ArrowButton'
8+
importLavaLampLoadingfrom'@/components/Loading/LavaLampLoading'
9+
10+
importtype{TView}from'../spec'
11+
12+
typeTProps={
13+
view:TView
14+
goBack:()=>void
15+
goSearch:()=>void
16+
}
17+
18+
constHeader:FC<TProps>=({ view, goBack, goSearch})=>{
19+
return(
20+
<Wrapper>
21+
{view==='list'&&(
22+
<Fragment>
23+
<div>管理团队成员</div>
24+
<Buttonsize="small"onClick={goSearch}ghostnoBorder>
25+
<PlusIconsrc={`${ICON}/shape/plus.svg`}/>
26+
添加新成员
27+
</Button>
28+
</Fragment>
29+
)}
30+
31+
{view==='search'&&(
32+
<BackWrapper>
33+
<Buttonsize="small"onClick={goBack}ghostnoBorder>
34+
<ArrowButtonsize="medium"direction="left"arrowStyle="simple">
35+
返回
36+
</ArrowButton>
37+
</Button>
38+
39+
<LavaLampLoadingsize="small"/>
40+
</BackWrapper>
41+
)}
42+
</Wrapper>
43+
)
44+
}
45+
46+
exportdefaultmemo(Header)
Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import{FC,memo}from'react'
2+
3+
importtype{TUser}from'@/spec'
4+
5+
import{ICON}from'@/config'
6+
import{SpaceGrow}from'@/components/Common'
7+
importTooltipfrom'@/components/Tooltip'
8+
importCheckerfrom'@/components/Checker'
9+
10+
import{
11+
Wrapper,
12+
UserWrapper,
13+
Avatar,
14+
Intro,
15+
Name,
16+
Bio,
17+
CheckWrapper,
18+
RemoveIcon,
19+
}from'../styles/setter/list'
20+
21+
typeTProps={
22+
users:TUser[]
23+
withDelete:boolean
24+
withSelect:boolean
25+
}
26+
27+
constList:FC<TProps>=({
28+
users,
29+
withDelete=false,
30+
withSelect=false,
31+
})=>{
32+
return(
33+
<Wrapper>
34+
{users.map((user)=>(
35+
<UserWrapperkey={user.id}>
36+
<Avatarsrc={user.avatar}/>
37+
<Intro>
38+
<Name>
39+
{user.nickname}
40+
<SpaceGrow/>
41+
{withSelect&&(
42+
<CheckWrapper>
43+
<Checkersize="small"/>
44+
</CheckWrapper>
45+
)}
46+
47+
{withDelete&&(
48+
<Tooltip
49+
trigger="click"
50+
content="请确认是否继续？"
51+
placement="left"
52+
behavior="delete-confirm"
53+
>
54+
<RemoveIconsrc={`${ICON}/shape/delete-solid.svg`}/>
55+
</Tooltip>
56+
)}
57+
</Name>
58+
<Bio>{user.bio}</Bio>
59+
</Intro>
60+
</UserWrapper>
61+
))}
62+
</Wrapper>
63+
)
64+
}
65+
66+
exportdefaultmemo(List)

0 commit comments

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