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.

Commit87a617f

Browse files
committed
refactor(sidebar): seperate meulist as sort and noral, done beatifully
1 parentfa7b0e6 commit87a617f

File tree

10 files changed

+238
-66
lines changed

10 files changed

+238
-66
lines changed

‎src/containers/Sidebar/Footer.js‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,28 @@ import React from 'react'
22
// eslint-disable-next-line import/named
33
import{ICON_CMD}from'@config'
44

5-
import{Wrapper,InnerWrapper,SettingIcon}from'./styles/footer'
5+
import{
6+
Wrapper,
7+
InnerWrapper,
8+
SettingIcon,
9+
OptionWrapper,
10+
OptionItem,
11+
OptionDivider,
12+
}from'./styles/footer'
613

7-
constFooter=({ pin, showFooterShadow})=>(
14+
import{sortBtnOnClick}from'./logic'
15+
16+
constFooter=({ pin, showFooterShadow, sortOptActive})=>(
817
<Wrapperpin={pin}dropShadow={showFooterShadow}>
918
<InnerWrapperpin={pin}>
1019
<SettingIconsrc={`${ICON_CMD}/setting.svg`}/>
20+
<OptionWrapperpin={pin}>
21+
<OptionItemactive={sortOptActive}onClick={()=>sortBtnOnClick()}>
22+
排序
23+
</OptionItem>
24+
<OptionDivider/>
25+
<OptionItem>分组</OptionItem>
26+
</OptionWrapper>
1127
</InnerWrapper>
1228
</Wrapper>
1329
)

‎src/containers/Sidebar/MenuBar.js‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
importReactfrom'react'
22
importRfrom'ramda'
33

4+
// eslint-disable-next-line import/named
5+
import{ICON_CMD}from'@config'
46
importTrendLinefrom'@components/TrendLine'
57
import{uid}from'@utils'
68

79
import{
810
Wrapper,
911
ActiveBar,
12+
DragIcon,
1013
MenuRow,
1114
MenuItemBar,
1215
MenuItemIcon,
@@ -16,11 +19,26 @@ import {
1619

1720
import{onCommunitySelect}from'./logic'
1821

19-
constMenuBar=({ pin, item, activeRaw, forceRerender, dropShadow})=>(
22+
constMenuBar=({
23+
pin,
24+
sortOptActive,
25+
item,
26+
activeRaw,
27+
forceRerender,
28+
dropShadow,
29+
})=>(
2030
<WrapperonClick={onCommunitySelect.bind(this,item)}>
21-
<ActiveBarpin={pin}active={activeRaw===R.toLower(item.raw)}/>
31+
<ActiveBar
32+
pin={pin}
33+
active={!sortOptActive&&activeRaw===R.toLower(item.raw)}
34+
/>
35+
<DragIconsrc={`${ICON_CMD}/drag.svg`}show={sortOptActive}/>
2236
<MenuItemBardropShadow={dropShadow}>
23-
<MenuRowpin={pin}active={activeRaw===R.toLower(item.raw)}>
37+
<MenuRow
38+
pin={pin}
39+
sortOptActive={sortOptActive}
40+
active={!sortOptActive&&activeRaw===R.toLower(item.raw)}
41+
>
2442
<MenuItemIcon
2543
key={uid.gen()}
2644
active={activeRaw===R.toLower(item.raw)}

‎src/containers/Sidebar/MenuList.js‎

Lines changed: 45 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,54 @@
11
importReactfrom'react'
22
importRfrom'ramda'
3-
import{Waypoint}from'react-waypoint'
4-
import{SortableContainer,SortableElement}from'react-sortable-hoc'
5-
import{OverlayScrollbarsComponent}from'overlayscrollbars-react'
63

74
importMenuBarfrom'./MenuBar'
8-
import{anchorTop,anchorOffTop,anchorBottom,anchorOffBottom}from'./logic'
9-
import{Wrapper,ScrollWrapper}from'./styles/menu_list'
5+
importNormalMenuListfrom'./NormalMenuList'
6+
importSortableMenuListfrom'./SortableMenuList'
107

11-
constSortableMenuBar=SortableElement(
12-
({ pin, item, activeRaw, forceRerender})=>(
13-
<MenuBar
14-
pin={pin}
15-
item={item}
16-
activeRaw={activeRaw}
17-
forceRerender={forceRerender}
18-
/>
19-
)
20-
)
8+
import{Wrapper}from'./styles/menu_list'
9+
import{onSortMenuEnd}from'./logic'
2110

22-
constMenuList=SortableContainer(
23-
({ items, pin, activeRaw, forceRerender, showHeaderShadow})=>{
24-
consthomeCommunities=R.filter(R.propEq('raw','home'),items)
25-
constsortableCommunities=R.reject(R.propEq('raw','home'),items)
11+
constMenuList=({
12+
items,
13+
pin,
14+
sortOptActive,
15+
activeRaw,
16+
forceRerender,
17+
showHeaderShadow,
18+
})=>{
19+
constpinedCommunities=R.filter(R.propEq('raw','home'),items)
20+
constsortableCommunities=R.reject(R.propEq('raw','home'),items)
2621

27-
return(
28-
<Wrapper>
29-
{homeCommunities.map(item=>(
30-
<MenuBar
31-
key={item.raw}
32-
pin={pin}
33-
item={item}
34-
activeRaw={activeRaw}
35-
dropShadow={showHeaderShadow}
36-
/>
37-
))}
38-
<OverlayScrollbarsComponent
39-
options={{scrollbars:{autoHide:'scroll',autoHideDelay:200}}}
40-
className="os-theme-light"
41-
>
42-
<ScrollWrapper>
43-
<React.Fragment>
44-
<WaypointonEnter={anchorTop}onLeave={anchorOffTop}/>
45-
{sortableCommunities.map((item,index)=>(
46-
<SortableMenuBar
47-
index={index}
48-
key={item.raw}
49-
pin={pin}
50-
item={item}
51-
activeRaw={activeRaw}
52-
forceRerender={forceRerender}
53-
/>
54-
))}
55-
<WaypointonEnter={anchorBottom}onLeave={anchorOffBottom}/>
56-
</React.Fragment>
57-
</ScrollWrapper>
58-
</OverlayScrollbarsComponent>
59-
</Wrapper>
60-
)
61-
}
62-
)
22+
return(
23+
<Wrapper>
24+
{pinedCommunities.map(item=>(
25+
<MenuBar
26+
key={item.raw}
27+
pin={pin}
28+
item={item}
29+
activeRaw={activeRaw}
30+
dropShadow={showHeaderShadow}
31+
/>
32+
))}
33+
{!sortOptActive ?(
34+
<NormalMenuList
35+
communities={sortableCommunities}
36+
pin={pin}
37+
activeRaw={activeRaw}
38+
forceRerender={forceRerender}
39+
/>
40+
) :(
41+
<SortableMenuList
42+
communities={sortableCommunities}
43+
sortOptActive={sortOptActive}
44+
pin={pin}
45+
activeRaw={activeRaw}
46+
forceRerender={forceRerender}
47+
onSortEnd={onSortMenuEnd}
48+
/>
49+
)}
50+
</Wrapper>
51+
)
52+
}
6353

6454
exportdefaultMenuList
Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
importReactfrom'react'
2+
import{Waypoint}from'react-waypoint'
3+
import{OverlayScrollbarsComponent}from'overlayscrollbars-react'
4+
5+
importMenuBarfrom'./MenuBar'
6+
import{anchorTop,anchorOffTop,anchorBottom,anchorOffBottom}from'./logic'
7+
import{ScrollWrapper}from'./styles/menu_list'
8+
9+
constNormalMenuList=({ communities, pin, activeRaw, forceRerender})=>(
10+
<OverlayScrollbarsComponent
11+
options={{scrollbars:{autoHide:'scroll',autoHideDelay:200}}}
12+
className="os-theme-light"
13+
>
14+
<ScrollWrapper>
15+
<React.Fragment>
16+
<WaypointonEnter={anchorTop}onLeave={anchorOffTop}/>
17+
{communities.map(item=>(
18+
<MenuBar
19+
key={item.raw}
20+
pin={pin}
21+
item={item}
22+
activeRaw={activeRaw}
23+
forceRerender={forceRerender}
24+
/>
25+
))}
26+
<WaypointonEnter={anchorBottom}onLeave={anchorOffBottom}/>
27+
</React.Fragment>
28+
</ScrollWrapper>
29+
</OverlayScrollbarsComponent>
30+
)
31+
32+
exportdefaultNormalMenuList
Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
importReactfrom'react'
2+
import{Waypoint}from'react-waypoint'
3+
import{SortableContainer,SortableElement}from'react-sortable-hoc'
4+
import{OverlayScrollbarsComponent}from'overlayscrollbars-react'
5+
6+
importMenuBarfrom'./MenuBar'
7+
import{anchorTop,anchorOffTop,anchorBottom,anchorOffBottom}from'./logic'
8+
import{ScrollWrapper}from'./styles/menu_list'
9+
10+
constSortableMenuBar=SortableElement(
11+
({ pin, sortOptActive, item, activeRaw, forceRerender})=>(
12+
<MenuBar
13+
pin={pin}
14+
sortOptActive={sortOptActive}
15+
item={item}
16+
activeRaw={activeRaw}
17+
forceRerender={forceRerender}
18+
/>
19+
)
20+
)
21+
22+
constSortableMenuList=SortableContainer(
23+
({ communities, pin, sortOptActive, activeRaw, forceRerender})=>{
24+
console.log(' sortOptActive --> ',sortOptActive)
25+
26+
return(
27+
<OverlayScrollbarsComponent
28+
options={{scrollbars:{autoHide:'scroll',autoHideDelay:200}}}
29+
className="os-theme-light"
30+
>
31+
<ScrollWrapper>
32+
<React.Fragment>
33+
<WaypointonEnter={anchorTop}onLeave={anchorOffTop}/>
34+
{communities.map((item,index)=>(
35+
<SortableMenuBar
36+
index={index}
37+
key={item.raw}
38+
pin={pin}
39+
sortOptActive={sortOptActive}
40+
item={item}
41+
activeRaw={activeRaw}
42+
forceRerender={forceRerender}
43+
/>
44+
))}
45+
<WaypointonEnter={anchorBottom}onLeave={anchorOffBottom}/>
46+
</React.Fragment>
47+
</ScrollWrapper>
48+
</OverlayScrollbarsComponent>
49+
)
50+
}
51+
)
52+
53+
exportdefaultSortableMenuList

‎src/containers/Sidebar/index.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ const SidebarContainer = ({ sidebar }) => {
2727
searchCommunityValue,
2828
showHeaderShadow,
2929
showFooterShadow,
30+
sortOptActive,
3031
communitiesData,
3132
forceRerender,
3233
}=sidebar
@@ -41,13 +42,18 @@ const SidebarContainer = ({ sidebar }) => {
4142
<MenuList
4243
items={communitiesData}
4344
pin={pin}
45+
sortOptActive={sortOptActive}
4446
showHeaderShadow={showHeaderShadow}
4547
forceRerender={forceRerender}
4648
activeRaw={activeRaw}
4749
onSortEnd={onSortMenuEnd}
4850
distance={5}
4951
/>
50-
<Footerpin={pin}showFooterShadow={showFooterShadow}/>
52+
<Footer
53+
pin={pin}
54+
showFooterShadow={showFooterShadow}
55+
sortOptActive={sortOptActive}
56+
/>
5157
</Wrapper>
5258
)
5359
}

‎src/containers/Sidebar/logic.js‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -66,11 +66,16 @@ export const onCommunitySelect = community => {
6666
send(EVENT.COMMUNITY_CHANGE)
6767
}
6868

69-
constmapIndexed=R.addIndex(R.map)
69+
exportconstsortBtnOnClick=()=>{
70+
if(!store.sortOptActive){
71+
store.mark({pin:true})
72+
}
73+
store.mark({sortOptActive:!store.sortOptActive})
74+
}
7075

76+
constmapIndexed=R.addIndex(R.map)
7177
exportconstonSortMenuEnd=({ oldIndex, newIndex})=>{
7278
constsortedCommunities=arrayMove(store.communitiesData,oldIndex,newIndex)
73-
// TODO: sync to server
7479
setC11N(sortedCommunities)
7580
store.onSortCommunities(sortedCommunities)
7681
}
@@ -79,7 +84,6 @@ const setC11N = sortedCommunities => {
7984
const{ isLogin}=store
8085
if(!isLogin)returnstore.authWarning()
8186

82-
// TODO: check login
8387
sortedCommunities=R.reject(R.propEq('raw','home'),sortedCommunities)
8488
constsidebarCommunitiesIndex=mapIndexed(
8589
(c,index)=>({community:c.raw, index}),

‎src/containers/Sidebar/store.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@ const SidebarStore = t
1919
// add shadow effect to footer when user scroll the communities list
2020
showFooterShadow:t.optional(t.boolean,false),
2121
searchCommunityValue:t.optional(t.string,''),
22+
// after user click custom sort option in footer
23+
sortOptActive:t.optional(t.boolean,false),
2224

2325
/*
2426
this is a fix for wired svg icon in sidebar

‎src/containers/Sidebar/styles/footer.js‎

Lines changed: 40 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,9 @@ import styled from 'styled-components'
33
import{theme,cs}from'@utils'
44
importImgfrom'@Img'
55

6+
import{WrapperasSidebarWrapper}from'./index'
7+
68
exportconstWrapper=styled.div`
7-
// margin-bottom:${({ pin})=>(pin ?'0' :'20px')};
89
margin-top: -20px;
910
background:${theme('sidebar.bg')};
1011
@@ -19,9 +20,47 @@ export const InnerWrapper = styled.div`
1920
height: 5vh;
2021
color: wheat;
2122
${cs.flex('align-both')};
23+
justify-content:${({ pin})=>(pin ?'flex-start' :'center')};
24+
padding:${({ pin})=>(pin ?'0 17px' :'')};
25+
26+
${SidebarWrapper}:hover & {
27+
justify-content: flex-start;
28+
padding: 0 17px;
29+
}
2230
`
2331
exportconstSettingIcon=styled(Img)`
2432
fill:${theme('sidebar.menuLink')};
2533
width: 16px;
2634
height: 16px;
35+
display: block;
36+
`
37+
38+
exportconstOptionWrapper=styled.div`
39+
display:${({ pin})=>(pin ?'flex' :'none')};
40+
justify-content:${({ pin})=>(pin ?'center' :'')};
41+
width: 100%;
42+
margin-left: -8px;
43+
44+
${SidebarWrapper}:hover & {
45+
display: flex;
46+
justify-content: center;
47+
}
48+
`
49+
exportconstOptionDivider=styled.div`
50+
border-right: 1px solid;
51+
margin-left: 10px;
52+
margin-right: 10px;
53+
border-right-color:${theme('sidebar.menuLink')};
54+
opacity: 0.4;
55+
`
56+
57+
exportconstOptionItem=styled.div`
58+
color:${({ active})=>
59+
active ?theme('sidebar.pinActive') :theme('sidebar.menuLink')};
60+
61+
font-weight:${({ active})=>(active ?'bold' :'normal')};
62+
63+
&:hover {
64+
cursor: pointer;
65+
}
2766
`

0 commit comments

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