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‎

Lines changed: 1 addition & 0 deletions
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‎

Lines changed: 43 additions & 37 deletions
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‎

Lines changed: 2 additions & 6 deletions
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‎

Lines changed: 1 addition & 9 deletions
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‎

Lines changed: 1 addition & 4 deletions
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‎

Lines changed: 3 additions & 1 deletion
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‎

Lines changed: 9 additions & 2 deletions
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‎

Lines changed: 1 addition & 0 deletions
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‎

Lines changed: 4 additions & 1 deletion
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‎

Lines changed: 0 additions & 4 deletions
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')};

0 commit comments

Comments
 (0)