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

Commit 98a6ed3

Browse files
mydearxymmydearxym
committed
chore: merge branch 'custom-scrollbar' into dev
2 parents b8755d8 + b4d3e68 commit 98a6ed3

File tree

18 files changed

+93
-100
lines changed

18 files changed

+93
-100
lines changed

‎src/components/Modal/styles/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ export const CloseBtn = styled(Img)`
4949
right: 15px;
5050
top: 15px;
5151
display: ${({ show }) => (show ? 'block' : 'none')};
52+
z-index: ${cs.zIndex.modalCloseBtn};
5253
5354
&:hover {
5455
animation: ${animate.rotate360CloseRule};

‎src/containers/Doraemon/ResultsList.js

+43-37
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import React from 'react'
22
import R from 'ramda'
33
import Highlighter from 'react-highlight-words'
4+
import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'
45

6+
// eslint-disable-next-line import/named
57
import { ICON_CMD } from '@config'
68
import { THREAD } from '@constant'
79

@@ -30,43 +32,47 @@ const HintIcon = ({ index, active, cur, length }) => {
3032
}
3133

3234
const ResultsList = ({ searchValue, searchThread, suggestions, activeRaw }) => (
33-
<Wrapper id="suggestion-scroller">
34-
<SuggestionWrapper empty={suggestions.length === 0}>
35-
{suggestions.map((suggestion, i) => (
36-
<InfoBar
37-
active={activeRaw === suggestion.raw}
38-
key={suggestion.raw}
39-
id={suggestion.raw}
40-
onMouseEnter={navToSuggestion.bind(this, suggestion)}
41-
onClick={suggestionOnSelect}
42-
>
43-
<SuggestIcon
44-
raw={suggestion.raw}
45-
suggestion={suggestion}
46-
round={R.contains(searchThread, [THREAD.POST, THREAD.USER])}
47-
searchThread={searchThread}
48-
/>
49-
<ContentWraper>
50-
<Title>
51-
<Highlighter
52-
highlightClassName="doramon-search-highlighter"
53-
searchWords={[searchValue]}
54-
autoEscape
55-
textToHighlight={suggestion.title}
56-
/>
57-
</Title>
58-
<Desc>{suggestion.desc}</Desc>
59-
</ContentWraper>
60-
<HintIcon
61-
index={i}
62-
active={activeRaw}
63-
cur={suggestion.raw}
64-
length={suggestions.length}
65-
/>
66-
</InfoBar>
67-
))}
68-
</SuggestionWrapper>
69-
</Wrapper>
35+
<OverlayScrollbarsComponent
36+
options={{ scrollbars: { autoHide: 'scroll', autoHideDelay: 200 } }}
37+
>
38+
<Wrapper>
39+
<SuggestionWrapper empty={suggestions.length === 0}>
40+
{suggestions.map((suggestion, i) => (
41+
<InfoBar
42+
active={activeRaw === suggestion.raw}
43+
key={suggestion.raw}
44+
id={suggestion.raw}
45+
onMouseEnter={navToSuggestion.bind(this, suggestion)}
46+
onClick={suggestionOnSelect}
47+
>
48+
<SuggestIcon
49+
raw={suggestion.raw}
50+
suggestion={suggestion}
51+
round={R.contains(searchThread, [THREAD.POST, THREAD.USER])}
52+
searchThread={searchThread}
53+
/>
54+
<ContentWraper>
55+
<Title>
56+
<Highlighter
57+
highlightClassName="doramon-search-highlighter"
58+
searchWords={[searchValue]}
59+
autoEscape
60+
textToHighlight={suggestion.title}
61+
/>
62+
</Title>
63+
<Desc>{suggestion.desc}</Desc>
64+
</ContentWraper>
65+
<HintIcon
66+
index={i}
67+
active={activeRaw}
68+
cur={suggestion.raw}
69+
length={suggestions.length}
70+
/>
71+
</InfoBar>
72+
))}
73+
</SuggestionWrapper>
74+
</Wrapper>
75+
</OverlayScrollbarsComponent>
7076
)
7177

7278
export default ResultsList

‎src/containers/Doraemon/index.js

+2-6
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,6 @@
77
import React from 'react'
88

99
import { connectStore, buildLog } from '@utils'
10-
import { usePlatform } from '@hooks'
11-
12-
import { PageOverlay, PanelContainer } from './styles'
1310

1411
import InputEditor from './InputEditor'
1512
import ResultsList from './ResultsList'
@@ -18,15 +15,14 @@ import ThreadSelectBar from './ThreadSelectBar'
1815
import AlertBar from './AlertBar'
1916
import UtilsBar from './UtilsBar'
2017

21-
import { useInit, useScrollbar, hidePanel } from './logic'
18+
import { PageOverlay, PanelContainer } from './styles'
19+
import { useInit, hidePanel } from './logic'
2220

2321
/* eslint-disable-next-line */
2422
const log = buildLog('C:Doraemon')
2523

2624
const DoraemonContainer = ({ doraemon }) => {
2725
useInit(doraemon)
28-
const { isMacOS } = usePlatform()
29-
useScrollbar(isMacOS)
3026

3127
const {
3228
inputValue,

‎src/containers/Doraemon/logic/index.js

+1-9
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import R from 'ramda'
22
import { useEffect } from 'react'
33
import Router from 'next/router'
44

5+
// eslint-disable-next-line import/named
56
import { ISSUE_ADDR } from '@config'
67
import { TYPE, EVENT, ERR, THREAD } from '@constant'
78
import {
@@ -496,15 +497,6 @@ const initSpecCmdResolver = () => {
496497
// ###############################
497498
// init & uninit handlers
498499
// ###############################
499-
export const useScrollbar = isMacOS => {
500-
useEffect(() => {
501-
if (isMacOS) {
502-
/* eslint-disable no-undef */
503-
OverlayScrollbars(document.getElementById('suggestion-scroller'), {})
504-
}
505-
}, [isMacOS])
506-
}
507-
508500
export const useInit = _store => {
509501
useEffect(() => {
510502
store = _store

‎src/containers/Doraemon/styles/results_list.js

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

6-
export const Wrapper = styled.div.attrs(({ id }) => ({
7-
id,
8-
}))`
6+
export const Wrapper = styled.div`
97
width: 100%;
10-
overflow: hidden;
118
max-height: 400px;
129
`
1310
export const LoadingIcon = styled(Img)`

‎src/containers/GlobalLayout/index.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,11 @@ import React from 'react'
88
import T from 'prop-types'
99
import useNetwork from 'react-use/lib/useNetwork'
1010

11-
import 'overlayscrollbars/js/OverlayScrollbars'
11+
// custom overlayscrollbars
12+
// see: https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-react
1213
import 'overlayscrollbars/css/OverlayScrollbars.css'
1314

15+
// eslint-disable-next-line import/named
1416
import { ICON_CMD } from '@config'
1517
import { connectStore } from '@utils'
1618
import { useShortcut, useMedia, usePlatform } from '@hooks'

‎src/containers/MailBox/MailsPanel.js

+9-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import React from 'react'
22
import R from 'ramda'
3+
import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'
34

45
// eslint-disable-next-line import/named
56
import { ICON_CMD } from '@config'
67
import TabSelector from '@components/TabSelector'
78

8-
import { Wrapper, SeeAllMessages } from './styles/mails_panel'
9+
import { Wrapper, ContentWrapper, SeeAllMessages } from './styles/mails_panel'
910
import MailLists from './MailLists'
1011

1112
import { selectChange, seeAll } from './logic'
@@ -48,7 +49,13 @@ const MailsPannel = ({ activeRaw, mailStatus, pagedMentions }) => {
4849
activeRaw={activeRaw}
4950
onChange={selectChange}
5051
/>
51-
<MailLists activeRaw={activeRaw} pagedMentions={pagedMentions} />
52+
<OverlayScrollbarsComponent
53+
options={{ scrollbars: { autoHide: 'scroll', autoHideDelay: 200 } }}
54+
>
55+
<ContentWrapper>
56+
<MailLists activeRaw={activeRaw} pagedMentions={pagedMentions} />
57+
</ContentWrapper>
58+
</OverlayScrollbarsComponent>
5259
<SeeAllMessages onClick={seeAll}>查看全部消息</SeeAllMessages>
5360
</Wrapper>
5461
)

‎src/containers/MailBox/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import React from 'react'
88

99
import { connectStore, buildLog } from '@utils'
1010
import Popover from '@components/Popover'
11+
1112
import MailsPanel from './MailsPanel'
1213

1314
import { Wrapper, NofityDot, HeaderMailIcon } from './styles'

‎src/containers/MailBox/styles/mails_panel.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,12 @@ import { theme } from '@utils'
55
export const Wrapper = styled.div`
66
width: 370px;
77
min-height: 300px;
8-
height: auto;
8+
height: 400px;
99
padding: 10px;
1010
`
11+
export const ContentWrapper = styled.div`
12+
height: 300px;
13+
`
1114
export const SeeAllMessages = styled.div`
1215
color: ${theme('banner.title')};
1316
text-align: center;

‎src/containers/MailBox/styles/mention_list.js

-4
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,6 @@ export const Wrapper = styled.div`
99
`
1010
export const ListsWrapper = styled.div`
1111
width: 340px;
12-
min-height: 280px;
13-
max-height: 400px;
14-
overflow-y: scroll;
15-
overflow-x: hidden;
1612
`
1713
export const UserLabel = styled.div`
1814
${cs.flex('align-center')};

‎src/containers/Preview/Viewer.js

+6-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from 'react'
2+
import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'
23

34
import { TYPE } from '@constant'
45

@@ -85,9 +86,11 @@ const renderViewer = (type, root, attachment, attUser) => {
8586
}
8687

8788
const Viewer = ({ type, root, attachment, attUser }) => (
88-
<Wrapper id="preview-viewer-scroller">
89-
{renderViewer(type, root, attachment, attUser)}
90-
</Wrapper>
89+
<OverlayScrollbarsComponent
90+
options={{ scrollbars: { autoHide: 'scroll', autoHideDelay: 200 } }}
91+
>
92+
<Wrapper>{renderViewer(type, root, attachment, attUser)}</Wrapper>
93+
</OverlayScrollbarsComponent>
9194
)
9295

9396
export default Viewer

‎src/containers/Preview/index.js

+2-5
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,13 @@
77
import React from 'react'
88

99
import { connectStore, buildLog } from '@utils'
10-
import { useShortcut, usePlatform } from '@hooks'
10+
import { useShortcut } from '@hooks'
1111

1212
import SliderPreview from './SliderPreview'
1313
import ModalPreview from './ModalPreview'
1414
import Viewer from './Viewer'
1515

16-
import { useInit, useScrollbar, closePreview } from './logic'
16+
import { useInit, closePreview } from './logic'
1717

1818
/* eslint-disable-next-line */
1919
const log = buildLog('C:Preview')
@@ -22,9 +22,6 @@ const PreviewContainer = ({ preview }) => {
2222
useInit(preview)
2323
useShortcut('esc', closePreview)
2424

25-
const { isMacOS } = usePlatform()
26-
useScrollbar(isMacOS)
27-
2825
const {
2926
modalVisible,
3027
slideVisible,

‎src/containers/Preview/logic.js

-9
Original file line numberDiff line numberDiff line change
@@ -83,15 +83,6 @@ const DataResolver = [
8383
// ###############################
8484
// init & uninit
8585
// ###############################
86-
export const useScrollbar = isMacOS => {
87-
useEffect(() => {
88-
if (isMacOS) {
89-
/* eslint-disable no-undef */
90-
OverlayScrollbars(document.getElementById('preview-viewer-scroller'), {})
91-
}
92-
}, [isMacOS])
93-
}
94-
9586
export const useInit = _store => {
9687
useEffect(() => {
9788
store = _store

‎src/containers/Preview/styles/viewer.js

+2-4
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
import styled from 'styled-components'
22

3-
export const Wrapper = styled.div.attrs(({ id }) => ({
4-
id,
5-
}))`
6-
height: calc(100% - 10px);
3+
export const Wrapper = styled.div`
4+
height: 100vh;
75
width: 100%;
86
`
97

‎src/containers/UserLister/index.js

+14-9
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
*/
66

77
import React from 'react'
8+
import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'
89

910
import { TYPE } from '@constant'
1011
import { connectStore, buildLog } from '@utils'
@@ -64,16 +65,20 @@ const UserListerContainer = ({ userLister }) => {
6465

6566
return (
6667
<Modal width="700px" show={show} showCloseBtn onClose={onClose}>
67-
<Wrapper id="userlist-scroller">
68-
<HeaderInfo
69-
type={type}
70-
brief={brief}
71-
totalCount={pagedUsersData.totalCount}
72-
curCommunity={curCommunity}
73-
/>
68+
<OverlayScrollbarsComponent
69+
options={{ scrollbars: { autoHide: 'scroll', autoHideDelay: 200 } }}
70+
>
71+
<Wrapper>
72+
<HeaderInfo
73+
type={type}
74+
brief={brief}
75+
totalCount={pagedUsersData.totalCount}
76+
curCommunity={curCommunity}
77+
/>
7478

75-
{renderContent(curView, pagedUsersData, accountInfo)}
76-
</Wrapper>
79+
{renderContent(curView, pagedUsersData, accountInfo)}
80+
</Wrapper>
81+
</OverlayScrollbarsComponent>
7782
</Modal>
7883
)
7984
}

‎src/containers/UserLister/logic.js

+1-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import R from 'ramda'
22
import { useEffect } from 'react'
33

4+
// eslint-disable-next-line import/named
45
import { PAGE_SIZE } from '@config'
56
import { TYPE, EVENT, ERR } from '@constant'
67
import { asyncSuit, buildLog, holdPage, unholdPage, errRescue } from '@utils'
@@ -167,9 +168,6 @@ export const useInit = _store => {
167168
// log('effect init')
168169
sub$ = sr71$.data().subscribe($solver(DataSolver, ErrSolver))
169170

170-
/* eslint-disable no-undef */
171-
// OverlayScrollbars(document.getElementById('userlist-scroller'), {})
172-
173171
return () => {
174172
// log('effect uninit')
175173
sr71$.stop()

‎src/containers/UserLister/styles/index.js

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

6-
export const Wrapper = styled.div.attrs(({ id }) => ({
7-
id,
8-
}))`
6+
export const Wrapper = styled.div`
7+
height: 600px;
98
padding: 20px;
109
`
1110
export const MsgWrapper = styled.div`

‎utils/common_styles.js

+1
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,7 @@ const zIndex = {
8989
preview: 2001,
9090
doraemonOverlay: 2600,
9191
doraemon: 2601,
92+
modalCloseBtn: 2000,
9293

9394
//
9495
sidebar: 1999,

0 commit comments

Comments
 (0)