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.

Commitb8755d8

Browse files
committed
chore: merge branch 'feat/sidebar-footer' into dev
2 parents43a703c +427075c commitb8755d8

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+
importReactfrom'react'
2+
// eslint-disable-next-line import/named
3+
import{ICON_CMD,ISSUE_ADDR}from'@config'
4+
5+
importPopoverfrom'@components/Popover'
6+
importDiscussLinkerfrom'@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+
constFooter=({ pin, showFooterShadow, sortOptActive})=>(
20+
<Wrapperpin={pin}dropShadow={showFooterShadow}>
21+
<InnerWrapperpin={pin}>
22+
<SettingIconsrc={`${ICON_CMD}/setting.svg`}/>
23+
<OptionWrapperpin={pin}>
24+
<OptionItemactive={sortOptActive}onClick={()=>sortBtnOnClick()}>
25+
排序
26+
</OptionItem>
27+
<OptionDivider/>
28+
<Popover
29+
placement="top"
30+
trigger="hover"
31+
content={<DiscussLinkertitle="分组"addr={`${ISSUE_ADDR}/597`}/>}
32+
>
33+
<OptionItem>分组</OptionItem>
34+
</Popover>
35+
</OptionWrapper>
36+
</InnerWrapper>
37+
</Wrapper>
38+
)
39+
40+
exportdefaultFooter

‎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
constHeader=({ pin, searchCommunityValue})=>(
2521
<Wrapperpin={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
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: 53 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,62 @@
11
importReactfrom'react'
2+
importdynamicfrom'next/dynamic'
23
importRfrom'ramda'
3-
import{Waypoint}from'react-waypoint'
4-
import{SortableContainer,SortableElement}from'react-sortable-hoc'
5-
import{OverlayScrollbarsComponent}from'overlayscrollbars-react'
64

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

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

22-
constMenuList=SortableContainer(
23-
({ items, pin, activeRaw, forceRerender, showHomeBarShadow})=>{
24-
consthomeCommunities=R.filter(R.propEq('raw','home'),items)
25-
constsortableCommunities=R.reject(R.propEq('raw','home'),items)
19+
constMenuList=({
20+
items,
21+
pin,
22+
sortOptActive,
23+
activeRaw,
24+
forceRerender,
25+
showHeaderShadow,
26+
})=>{
27+
constpinedCommunities=R.filter(R.propEq('raw','home'),items)
28+
constsortableCommunities=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-
<WaypointonEnter={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
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: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { connectStore, buildLog } from '@utils'
1010

1111
importHeaderfrom'./Header'
1212
importMenuListfrom'./MenuList'
13+
importFooterfrom'./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)
[8]ページ先頭
©2009-2025 Movatter.jp