Skip to content
This repository was archived by the owner on Nov 8, 2022. It is now read-only.

Commit 87a617f

Browse files
mydearxymmydearxym
committed
refactor(sidebar): seperate meulist as sort and noral, done beatifully
1 parent fa7b0e6 commit 87a617f

File tree

10 files changed

+238
-66
lines changed

10 files changed

+238
-66
lines changed

‎src/containers/Sidebar/Footer.js

+18-2
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-
const Footer = ({ pin, showFooterShadow }) => (
14+
import { sortBtnOnClick } from './logic'
15+
16+
const Footer = ({ pin, showFooterShadow, sortOptActive }) => (
817
<Wrapper pin={pin} dropShadow={showFooterShadow}>
918
<InnerWrapper pin={pin}>
1019
<SettingIcon src={`${ICON_CMD}/setting.svg`} />
20+
<OptionWrapper pin={pin}>
21+
<OptionItem active={sortOptActive} onClick={() => sortBtnOnClick()}>
22+
排序
23+
</OptionItem>
24+
<OptionDivider />
25+
<OptionItem>分组</OptionItem>
26+
</OptionWrapper>
1127
</InnerWrapper>
1228
</Wrapper>
1329
)

‎src/containers/Sidebar/MenuBar.js

+21-3
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
import React from 'react'
22
import R from 'ramda'
33

4+
// eslint-disable-next-line import/named
5+
import { ICON_CMD } from '@config'
46
import TrendLine from '@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-
const MenuBar = ({ pin, item, activeRaw, forceRerender, dropShadow }) => (
22+
const MenuBar = ({
23+
pin,
24+
sortOptActive,
25+
item,
26+
activeRaw,
27+
forceRerender,
28+
dropShadow,
29+
}) => (
2030
<Wrapper onClick={onCommunitySelect.bind(this, item)}>
21-
<ActiveBar pin={pin} active={activeRaw === R.toLower(item.raw)} />
31+
<ActiveBar
32+
pin={pin}
33+
active={!sortOptActive && activeRaw === R.toLower(item.raw)}
34+
/>
35+
<DragIcon src={`${ICON_CMD}/drag.svg`} show={sortOptActive} />
2236
<MenuItemBar dropShadow={dropShadow}>
23-
<MenuRow pin={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

+45-55
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,54 @@
11
import React from 'react'
22
import R from 'ramda'
3-
import { Waypoint } from 'react-waypoint'
4-
import { SortableContainer, SortableElement } from 'react-sortable-hoc'
5-
import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'
63

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

11-
const SortableMenuBar = 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-
const MenuList = SortableContainer(
23-
({ items, pin, activeRaw, forceRerender, showHeaderShadow }) => {
24-
const homeCommunities = R.filter(R.propEq('raw', 'home'), items)
25-
const sortableCommunities = R.reject(R.propEq('raw', 'home'), items)
11+
const MenuList = ({
12+
items,
13+
pin,
14+
sortOptActive,
15+
activeRaw,
16+
forceRerender,
17+
showHeaderShadow,
18+
}) => {
19+
const pinedCommunities = R.filter(R.propEq('raw', 'home'), items)
20+
const sortableCommunities = 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-
<Waypoint onEnter={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-
<Waypoint onEnter={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
export default MenuList

‎src/containers/Sidebar/NormalMenuList.js

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import React from 'react'
2+
import { Waypoint } from 'react-waypoint'
3+
import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'
4+
5+
import MenuBar from './MenuBar'
6+
import { anchorTop, anchorOffTop, anchorBottom, anchorOffBottom } from './logic'
7+
import { ScrollWrapper } from './styles/menu_list'
8+
9+
const NormalMenuList = ({ 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+
<Waypoint onEnter={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+
<Waypoint onEnter={anchorBottom} onLeave={anchorOffBottom} />
27+
</React.Fragment>
28+
</ScrollWrapper>
29+
</OverlayScrollbarsComponent>
30+
)
31+
32+
export default NormalMenuList

‎src/containers/Sidebar/SortableMenuList.js

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import React from 'react'
2+
import { Waypoint } from 'react-waypoint'
3+
import { SortableContainer, SortableElement } from 'react-sortable-hoc'
4+
import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'
5+
6+
import MenuBar from './MenuBar'
7+
import { anchorTop, anchorOffTop, anchorBottom, anchorOffBottom } from './logic'
8+
import { ScrollWrapper } from './styles/menu_list'
9+
10+
const SortableMenuBar = 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+
const SortableMenuList = 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+
<Waypoint onEnter={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+
<Waypoint onEnter={anchorBottom} onLeave={anchorOffBottom} />
46+
</React.Fragment>
47+
</ScrollWrapper>
48+
</OverlayScrollbarsComponent>
49+
)
50+
}
51+
)
52+
53+
export default SortableMenuList

‎src/containers/Sidebar/index.js

+7-1
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-
<Footer pin={pin} showFooterShadow={showFooterShadow} />
52+
<Footer
53+
pin={pin}
54+
showFooterShadow={showFooterShadow}
55+
sortOptActive={sortOptActive}
56+
/>
5157
</Wrapper>
5258
)
5359
}

‎src/containers/Sidebar/logic.js

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

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

76+
const mapIndexed = R.addIndex(R.map)
7177
export const onSortMenuEnd = ({ oldIndex, newIndex }) => {
7278
const sortedCommunities = 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) return store.authWarning()
8186

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

‎src/containers/Sidebar/store.js

+2
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

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

6+
import { Wrapper as SidebarWrapper } from './index'
7+
68
export const Wrapper = 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
export const SettingIcon = styled(Img)`
2432
fill: ${theme('sidebar.menuLink')};
2533
width: 16px;
2634
height: 16px;
35+
display: block;
36+
`
37+
38+
export const OptionWrapper = 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+
export const OptionDivider = 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+
export const OptionItem = 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)