@@ -10,37 +10,66 @@ import PropTypes from 'prop-types'
10
10
import { ICON_CMD } from '../../config'
11
11
12
12
import Popover from '../Popover'
13
- import { Label , LabelIcon , LabelText } from './styles'
13
+ import {
14
+ Wrapper ,
15
+ Label ,
16
+ BoxedLabel ,
17
+ LabelIcon ,
18
+ LabelText ,
19
+ LabelCount ,
20
+ } from './styles'
14
21
import Panel from './Panel'
15
22
16
23
import { makeDebugger , THREAD , Trans } from '../../utils'
17
24
/* eslint-disable no-unused-vars */
18
25
const debug = makeDebugger ( 'c:ThreadSelector:index' )
19
26
/* eslint-enable no-unused-vars */
20
27
21
- const ThreadSelector = ( { options, active, onSelect} ) => (
22
- < Popover
23
- placement = "bottom"
24
- trigger = "hover"
25
- content = { < Panel options = { options } active = { active } onSelect = { onSelect } /> }
26
- >
27
- < Label >
28
- < LabelText > { Trans ( active ) } </ LabelText >
29
- < LabelIcon src = { `${ ICON_CMD } /thread_more.svg` } />
30
- </ Label >
31
- </ Popover >
28
+ const ThreadSelector = ( {
29
+ options,
30
+ active,
31
+ onSelect,
32
+ totalCount,
33
+ lookLike,
34
+ } ) => (
35
+ < Wrapper >
36
+ < Popover
37
+ placement = "right"
38
+ trigger = "hover"
39
+ content = { < Panel options = { options } active = { active } onSelect = { onSelect } /> }
40
+ >
41
+ < div >
42
+ { lookLike === 'text' ?(
43
+ < Label >
44
+ < LabelText > { Trans ( active ) } </ LabelText >
45
+ < LabelIcon src = { `${ ICON_CMD } /thread_more.svg` } />
46
+ </ Label >
47
+ ) :(
48
+ < BoxedLabel >
49
+ < LabelText > { Trans ( active ) } </ LabelText >
50
+ < LabelIcon src = { `${ ICON_CMD } /thread_more.svg` } />
51
+ </ BoxedLabel >
52
+ ) }
53
+ </ div >
54
+ </ Popover >
55
+ { totalCount !== 0 ?< LabelCount > 结果{ totalCount } 条</ LabelCount > :null }
56
+ </ Wrapper >
32
57
)
33
58
34
59
ThreadSelector . propTypes = {
35
60
options :PropTypes . arrayOf ( PropTypes . string ) ,
36
61
active :PropTypes . string ,
37
62
onSelect :PropTypes . func ,
63
+ totalCount :PropTypes . number ,
64
+ lookLike :PropTypes . oneOf ( [ 'text' , 'box' ] ) ,
38
65
}
39
66
40
67
ThreadSelector . defaultProps = {
41
68
options :[ THREAD . POST , THREAD . VIDEO , THREAD . REPO , THREAD . JOB ] ,
42
69
active :THREAD . POST ,
43
70
onSelect :debug ,
71
+ totalCount :0 ,
72
+ lookLike :'text' ,
44
73
}
45
74
46
75
export default ThreadSelector