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

Commit 73a752f

Browse files
mydearxymmydearxym
committed
chore: Merge branch 'replace-tooltip' into dev
2 parents 1d1c487 + de59761 commit 73a752f

File tree

24 files changed

+372
-332
lines changed

24 files changed

+372
-332
lines changed

‎components/AvatarsRow/index.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,12 @@
77
import React from 'react'
88
import T from 'prop-types'
99
import R from 'ramda'
10-
import { Tooltip } from 'antd'
1110

1211
import { ATATARS_LIST_LENGTH } from '@config/general'
13-
1412
import { buildLog, prettyNum } from '@utils'
13+
14+
import Tooltip from '@components/Tooltip'
15+
1516
import {
1617
Wrapper,
1718
AvatarsItem,
@@ -50,15 +51,15 @@ const AvatarsRow = ({
5051
<span />
5152
) : (
5253
<MoreItem onClick={onTotalSelect.bind(this, { users, total })}>
53-
<Tooltip title={`所有评论共 ${total} 条`}>
54+
<Tooltip content={`所有评论共 ${total} 条`}>
5455
<AvatarsMore total={total}>{prettyNum(total)}</AvatarsMore>
5556
</Tooltip>
5657
</MoreItem>
5758
)}
5859

5960
{R.slice(0, limit, sortedUsers).map(user => (
6061
<AvatarsItem key={user.id} onClick={onUserSelect.bind(this, user)}>
61-
<Tooltip title={user.nickname}>
62+
<Tooltip content={user.nickname} delay={200}>
6263
<AvatarsImg src={user.avatar} />
6364
</Tooltip>
6465
</AvatarsItem>

‎components/Tooltip/index.js‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
/*
2+
*
3+
* Tooltip
4+
*
5+
*/
6+
7+
import React from 'react'
8+
import T from 'prop-types'
9+
10+
import { Wrapper } from './styles'
11+
import { buildLog } from '@utils'
12+
13+
/* eslint-disable-next-line */
14+
const log = buildLog('c:Tooltip:index')
15+
16+
const Tooltip = ({
17+
children,
18+
content,
19+
animation,
20+
arrow,
21+
delay,
22+
duration,
23+
placement,
24+
onTrigger,
25+
}) => (
26+
<Wrapper
27+
content={content}
28+
animation={animation}
29+
arrow={arrow}
30+
delay={[delay, 20]}
31+
duration={duration}
32+
placement={placement}
33+
onTrigger={onTrigger}
34+
>
35+
{children}
36+
</Wrapper>
37+
)
38+
39+
Tooltip.propTypes = {
40+
children: T.node.isRequired,
41+
content: T.oneOfType([T.string, T.node]).isRequired,
42+
// options
43+
animation: T.oneOf([
44+
'shift-away',
45+
'shift-toward',
46+
'fade',
47+
'scale',
48+
'perspective',
49+
]),
50+
arrow: T.bool,
51+
delay: T.number,
52+
duration: T.number,
53+
placement: T.oneOf([
54+
'top',
55+
'top-start',
56+
'top-end',
57+
'bottom',
58+
'bottom-start',
59+
'bottom-end',
60+
'left',
61+
'left-start',
62+
'left-end',
63+
'right',
64+
'right-start',
65+
'right-end',
66+
]),
67+
// hooks
68+
onTrigger: T.func,
69+
// more options see: https://atomiks.github.io/tippyjs/all-options/
70+
}
71+
72+
Tooltip.defaultProps = {
73+
animation: 'fade',
74+
arrow: true,
75+
delay: 0,
76+
duration: 100,
77+
placement: 'top',
78+
// hooks
79+
onTrigger: log,
80+
}
81+
82+
export default React.memo(Tooltip)

‎components/Tooltip/styles/index.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import styled from 'styled-components'
2+
import Tippy from '@tippy.js/react'
3+
4+
// import Img from '@Img'
5+
import { theme } from '@utils'
6+
7+
export const Wrapper = styled(Tippy)`
8+
background: ${theme('tooltip.bg')};
9+
color: ${theme('tooltip.text')};
10+
11+
/* Styling the arrow for different placements */
12+
&[x-placement^='top'] {
13+
.tippy-arrow {
14+
border-top-color: ${theme('tooltip.bg')};
15+
}
16+
}
17+
&[x-placement^='bottom'] {
18+
.tippy-arrow {
19+
border-top-color: ${theme('tooltip.bg')};
20+
}
21+
}
22+
&[x-placement^='left'] {
23+
.tippy-arrow {
24+
border-top-color: ${theme('tooltip.bg')};
25+
}
26+
}
27+
&[x-placement^='right'] {
28+
.tippy-arrow {
29+
border-top-color: ${theme('tooltip.bg')};
30+
}
31+
}
32+
`
33+
34+
export const Title = styled.div``

‎components/Tooltip/tests/index.test.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
// import React from 'react'
2+
// import { shallow } from 'enzyme'
3+
4+
// import Tooltip from '../index'
5+
6+
describe('TODO <Tooltip />', () => {
7+
it('Expect to have unit tests specified', () => {
8+
expect(true).toEqual(true)
9+
})
10+
})

‎components/index.bak.js‎

Lines changed: 0 additions & 91 deletions
This file was deleted.

‎containers/AccountViewer/ContributeMap.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ const log = buildLog('C:Comments')
2626

2727
const customTooltipDataAttrs = value => ({
2828
'data-tip': value.date === null ? '' : `${value.count} 次 (${value.date})`,
29-
'data-for': 'user_comtribute_map',
29+
'data-for': 'user_contribute_map',
3030
'data-offset': JSON.stringify({ right: 7 }),
3131
})
3232

@@ -103,7 +103,7 @@ const ContributeMap = ({ data }) => {
103103
type="error"
104104
effect="solid"
105105
place="top"
106-
id="user_comtribute_map"
106+
id="user_contribute_map"
107107
/>
108108
<DotWrapper>
109109
<DotList>

‎containers/CommunitiesContent/Hinter.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from 'react'
2+
3+
// import { ICON_CMD } from 'config'
4+
import { Wrapper, Title, Desc } from './styles/hinter'
5+
6+
const Hinter = ({ title, desc }) => (
7+
<Wrapper>
8+
<Title>【{title}】</Title>
9+
<Desc>{desc}</Desc>
10+
</Wrapper>
11+
)
12+
13+
export default Hinter

‎containers/CommunitiesContent/SubscribeBtn.js‎

Lines changed: 50 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,41 @@
11
import React from 'react'
2-
import { Button, Tooltip } from 'antd'
2+
import { Button } from 'antd'
33

44
import { ICON_CMD } from '@config'
55

6+
import Tooltip from '@components/Tooltip'
7+
import Hinter from './Hinter'
8+
69
import { SubscribedBox, BtnWrapper, PrefixIcon } from './styles'
710
import { subscribe, unSubscribe } from './logic'
811

912
const AlreadySubedBtn = ({ community }) => (
10-
<Tooltip title="取消关注" mouseEnterDelay={1} placement="bottom">
13+
<React.Fragment>
1114
{community.raw !== 'home' ? (
12-
<Button
13-
size="small"
14-
type="primary"
15-
ghost
16-
onClick={unSubscribe.bind(this, community.id)}
15+
<Tooltip
16+
content={
17+
<Hinter
18+
title="取消关注"
19+
desc="之后该社区将不会出现在左侧订阅列表中"
20+
/>
21+
}
22+
animation="perspective"
23+
delay={1000}
1724
>
18-
<BtnWrapper>
19-
<PrefixIcon src={`${ICON_CMD}/check2.svg`} primary />
20-
<div>已关注</div>
21-
</BtnWrapper>
22-
</Button>
25+
<div>
26+
<Button
27+
size="small"
28+
type="primary"
29+
ghost
30+
onClick={unSubscribe.bind(this, community.id)}
31+
>
32+
<BtnWrapper>
33+
<PrefixIcon src={`${ICON_CMD}/check2.svg`} primary />
34+
<div>已关注</div>
35+
</BtnWrapper>
36+
</Button>
37+
</div>
38+
</Tooltip>
2339
) : (
2440
<SubscribedBox>
2541
<BtnWrapper>
@@ -28,7 +44,7 @@ const AlreadySubedBtn = ({ community }) => (
2844
</BtnWrapper>
2945
</SubscribedBox>
3046
)}
31-
</Tooltip>
47+
</React.Fragment>
3248
)
3349

3450
const SubscribeBtn = ({
@@ -43,22 +59,32 @@ const SubscribeBtn = ({
4359
)
4460
}
4561
return (
46-
<div>
62+
<React.Fragment>
4763
{community.viewerHasSubscribed ? (
4864
<AlreadySubedBtn community={community} />
4965
) : (
50-
<Button
51-
size="small"
52-
type="primary"
53-
onClick={subscribe.bind(this, community.id)}
66+
<Tooltip
67+
content={
68+
<Hinter title="关注" desc="之后该社区将会出现在左侧订阅列表中" />
69+
}
70+
animation="perspective"
71+
delay={1000}
5472
>
55-
<BtnWrapper>
56-
<PrefixIcon src={`${ICON_CMD}/plus.svg`} />
57-
<div>关注</div>
58-
</BtnWrapper>
59-
</Button>
73+
<div>
74+
<Button
75+
size="small"
76+
type="primary"
77+
onClick={subscribe.bind(this, community.id)}
78+
>
79+
<BtnWrapper>
80+
<PrefixIcon src={`${ICON_CMD}/plus.svg`} />
81+
<div>关注</div>
82+
</BtnWrapper>
83+
</Button>
84+
</div>
85+
</Tooltip>
6086
)}
61-
</div>
87+
</React.Fragment>
6288
)
6389
}
6490

0 commit comments

Comments
 (0)