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

Commit b8755d8

Browse files
mydearxymmydearxym
committed
chore: merge branch 'feat/sidebar-footer' into dev
2 parents 43a703c + 427075c commit b8755d8

File tree

19 files changed

+347
-97
lines changed

19 files changed

+347
-97
lines changed

‎src/containers/Sidebar/Footer.js

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import React from 'react'
2+
// eslint-disable-next-line import/named
3+
import { ICON_CMD, ISSUE_ADDR } from '@config'
4+
5+
import Popover from '@components/Popover'
6+
import DiscussLinker from '@components/DiscussLinker'
7+
8+
import {
9+
Wrapper,
10+
InnerWrapper,
11+
SettingIcon,
12+
OptionWrapper,
13+
OptionItem,
14+
OptionDivider,
15+
} from './styles/footer'
16+
17+
import { sortBtnOnClick } from './logic'
18+
19+
const Footer = ({ pin, showFooterShadow, sortOptActive }) => (
20+
<Wrapper pin={pin} dropShadow={showFooterShadow}>
21+
<InnerWrapper pin={pin}>
22+
<SettingIcon src={`${ICON_CMD}/setting.svg`} />
23+
<OptionWrapper pin={pin}>
24+
<OptionItem active={sortOptActive} onClick={() => sortBtnOnClick()}>
25+
排序
26+
</OptionItem>
27+
<OptionDivider />
28+
<Popover
29+
placement="top"
30+
trigger="hover"
31+
content={<DiscussLinker title="分组" addr={`${ISSUE_ADDR}/597`} />}
32+
>
33+
<OptionItem>分组</OptionItem>
34+
</Popover>
35+
</OptionWrapper>
36+
</InnerWrapper>
37+
</Wrapper>
38+
)
39+
40+
export default Footer

‎src/containers/Sidebar/Header.js

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,7 @@ import {
1515
SearchIcon,
1616
SiteLogo,
1717
} from './styles/header'
18-
import {
19-
searchOnBlur,
20-
searchOnFocus,
21-
searchCommunityValueOnChange,
22-
} from './logic'
18+
import { searchOnFocus, searchCommunityValueOnChange } from './logic'
2319

2420
const Header = ({ pin, searchCommunityValue }) => (
2521
<Wrapper pin={pin}>
@@ -35,7 +31,6 @@ const Header = ({ pin, searchCommunityValue }) => (
3531
value={searchCommunityValue}
3632
onChange={e => searchCommunityValueOnChange(e)}
3733
placeholder="订阅的社区"
38-
onBlur={searchOnBlur}
3934
onFocus={searchOnFocus}
4035
/>
4136
</SearchContent>

‎src/containers/Sidebar/MenuBar.js

Lines changed: 21 additions & 3 deletions
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

Lines changed: 53 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,62 @@
11
import React from 'react'
2+
import dynamic from 'next/dynamic'
23
import R from 'ramda'
3-
import { Waypoint } from 'react-waypoint'
4-
import { SortableContainer, SortableElement } from 'react-sortable-hoc'
5-
import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'
64

75
import MenuBar from './MenuBar'
8-
import { scrollOnTop, scrollOffTop } from './logic'
9-
import { Wrapper, ScrollWrapper } from './styles/menu_list'
6+
import NormalMenuList from './NormalMenuList'
7+
// import SortableMenuList from './SortableMenuList'
108

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-
)
9+
import { Wrapper } from './styles/menu_list'
10+
import { onSortMenuEnd } from './logic'
11+
12+
const DynamicSortableMenuList = dynamic({
13+
loader: () => import('./SortableMenuList'),
14+
/* eslint-disable */
15+
loading: () => <div>..</div>,
16+
/* eslint-enable */
17+
})
2118

22-
const MenuList = SortableContainer(
23-
({ items, pin, activeRaw, forceRerender, showHomeBarShadow }) => {
24-
const homeCommunities = R.filter(R.propEq('raw', 'home'), items)
25-
const sortableCommunities = R.reject(R.propEq('raw', 'home'), items)
19+
const MenuList = ({
20+
items,
21+
pin,
22+
sortOptActive,
23+
activeRaw,
24+
forceRerender,
25+
showHeaderShadow,
26+
}) => {
27+
const pinedCommunities = R.filter(R.propEq('raw', 'home'), items)
28+
const sortableCommunities = R.reject(R.propEq('raw', 'home'), items)
2629

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={showHomeBarShadow}
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={scrollOnTop} onLeave={scrollOffTop} />
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-
</React.Fragment>
56-
</ScrollWrapper>
57-
</OverlayScrollbarsComponent>
58-
</Wrapper>
59-
)
60-
}
61-
)
30+
return (
31+
<Wrapper>
32+
{pinedCommunities.map(item => (
33+
<MenuBar
34+
key={item.raw}
35+
pin={pin}
36+
item={item}
37+
activeRaw={activeRaw}
38+
dropShadow={showHeaderShadow}
39+
/>
40+
))}
41+
{!sortOptActive ? (
42+
<NormalMenuList
43+
communities={sortableCommunities}
44+
pin={pin}
45+
activeRaw={activeRaw}
46+
forceRerender={forceRerender}
47+
/>
48+
) : (
49+
<DynamicSortableMenuList
50+
communities={sortableCommunities}
51+
sortOptActive={sortOptActive}
52+
pin={pin}
53+
activeRaw={activeRaw}
54+
forceRerender={forceRerender}
55+
onSortEnd={onSortMenuEnd}
56+
/>
57+
)}
58+
</Wrapper>
59+
)
60+
}
6261

6362
export default MenuList

‎src/containers/Sidebar/NormalMenuList.js

Lines changed: 32 additions & 0 deletions
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

Lines changed: 53 additions & 0 deletions
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

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { connectStore, buildLog } from '@utils'
1010

1111
import Header from './Header'
1212
import MenuList from './MenuList'
13+
import Footer from './Footer'
1314

1415
import { Wrapper } from './styles'
1516
import { useInit, onSortMenuEnd } from './logic'
@@ -24,7 +25,9 @@ const SidebarContainer = ({ sidebar }) => {
2425
curCommunity,
2526
pin,
2627
searchCommunityValue,
27-
showHomeBarShadow,
28+
showHeaderShadow,
29+
showFooterShadow,
30+
sortOptActive,
2831
communitiesData,
2932
forceRerender,
3033
} = sidebar
@@ -39,12 +42,18 @@ const SidebarContainer = ({ sidebar }) => {
3942
<MenuList
4043
items={communitiesData}
4144
pin={pin}
42-
showHomeBarShadow={showHomeBarShadow}
45+
sortOptActive={sortOptActive}
46+
showHeaderShadow={showHeaderShadow}
4347
forceRerender={forceRerender}
4448
activeRaw={activeRaw}
4549
onSortEnd={onSortMenuEnd}
4650
distance={5}
4751
/>
52+
<Footer
53+
pin={pin}
54+
showFooterShadow={showFooterShadow}
55+
sortOptActive={sortOptActive}
56+
/>
4857
</Wrapper>
4958
)
5059
}

0 commit comments

Comments
 (0)