Skip to content

Commit f0f3464

Browse files
author
liyuan-meng
committed
[Tooltip]feat-ui2.1代码迁移
1 parent 8ee7a3f commit f0f3464

5 files changed

Lines changed: 198 additions & 59 deletions

File tree

‎src/components/tooltip/demos/showArrow.md‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
---
2+
title: 箭头显隐
3+
desc: 可配置箭头的显示与否
4+
---
5+
6+
```jsx
7+
8+
/**
9+
* title: 箭头显隐
10+
* desc: 可配置箭头的显示与否。
11+
*/
12+
import React from 'react';
13+
import { Button, Tooltip } from 'cloud-react';
14+
15+
class ToolTipDemo extends React.Component {
16+
constructor(props) {
17+
super(props);
18+
this.state = {
19+
content: 'config arrow toolTip',
20+
showArrow: true,
21+
show: true
22+
};
23+
}
24+
25+
onChangeStatus = () => {
26+
this.setState({ showArrow: !this.state.showArrow });
27+
};
28+
29+
render() {
30+
const { content, showArrow, show } = this.state;
31+
const style = { marginRight: '10px' };
32+
return (
33+
<div id="wrap" className="wrapClass">
34+
<Button style={style} onClick={this.onChangeStatus}>
35+
config {showArrow ? 'no arrow' : 'has arrow'} tooltip
36+
</Button>
37+
<Tooltip content={content} placement="top" visible={show} showArrow={showArrow} alwaysShow>
38+
<span>Click button to config {showArrow ? 'has' : 'no'} arrow toolTip.</span>
39+
</Tooltip>
40+
</div>
41+
);
42+
}
43+
}
44+
export default ToolTipDemo;
45+
```

‎src/components/tooltip/index.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -82,11 +82,9 @@ class Tooltip extends Component {
8282
)
8383
|| this.props.closeTooltipExec(path)
8484
) {
85-
if (this.state.visible) {
86-
this.setState({ visible: false }, () => {
87-
this.props.onVisibleChange(this.state.visible);
88-
});
89-
}
85+
this.setState({ visible: false }, () => {
86+
this.props.onVisibleChange(this.state.visible);
87+
});
9088
}
9189
};
9290

@@ -217,6 +215,7 @@ Tooltip.propTypes = {
217215
onVisibleChange: PropTypes.func,
218216
alwaysShow: PropTypes.bool,
219217
containerEle: PropTypes.any,
218+
showArrow: PropTypes.bool
220219
};
221220

222221
Tooltip.defaultProps = {
@@ -233,6 +232,7 @@ Tooltip.defaultProps = {
233232
onVisibleChange: () => {},
234233
alwaysShow: false,
235234
containerEle: null,
235+
showArrow: true,
236236
};
237237

238238
export default Tooltip;

‎src/components/tooltip/index.less‎

Lines changed: 129 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,148 +1,239 @@
11
@import '../style/index';
22

33
@tooltip-prefix-cls: ~'@{prefix}-tooltip';
4-
@left-space-size: 5px;
5-
@top-space-size: 5px;
6-
@offset-size: -10px;
4+
@left-space-size: 11px;
5+
@top-space-size: 11px;
6+
@offset-size: -4px;
77
@light-offset-size: -3px;
88

9-
.theme-style(@backColor, @color) {
9+
@angleColor: rgb(38 38 38);
10+
11+
.theme-style(@backColor, @color, @angleColor) {
1012
background-color: @backColor;
1113
color: @color;
12-
&:after {
13-
border-top-color: @backColor;
14+
&:after {
15+
background: @backColor;
16+
}
17+
&:before {
18+
background: @angleColor;
1419
}
1520
}
1621

22+
.top-before-style() {
23+
width: calc(100% - 8px);
24+
height: 10px;
25+
bottom: 0;
26+
left: 4px;
27+
}
28+
29+
.right-before-style() {
30+
width: 10px;
31+
height: calc(100% - 8px);
32+
left: 0;
33+
top: 4px;
34+
}
35+
36+
.left-before-style() {
37+
width: 10px;
38+
height: calc(100% - 8px);
39+
right: 0;
40+
top: 4px;
41+
}
42+
43+
.bottom-before-style() {
44+
width: calc(100% - 8px);
45+
height: 10px;
46+
top: 0;
47+
left: 4px;
48+
}
49+
1750
.@{tooltip-prefix-cls} {
1851
position: absolute;
1952
font-size: 12px;
2053
min-height: 26px;
2154
max-width: 320px;
2255
min-width: 72px;
23-
line-height: 1.5;
56+
line-height: 18px;
2457
padding: 8px 12px;
25-
border-radius: 2px;
58+
border-radius: 3px;
2659
box-sizing: border-box;
2760
z-index: @z-index-tooltip;
2861
word-break: break-all;
2962
top: 0;
3063
left: 0;
3164
opacity: 0;
65+
transition: opacity 0.25s ease-in;
66+
67+
&.no-arrow:after {
68+
display: none !important;
69+
}
3270

3371
&.show {
3472
opacity: 1;
3573
}
3674

37-
3875
&:after {
3976
content: '';
4077
position: absolute;
41-
width: 0;
42-
height: 0;
43-
border: 5px solid transparent;
44-
border-top-width: 5px;
78+
width: 10px;
79+
height: 10px;
80+
box-shadow: @border-shadow-4;
81+
transform: rotate(45deg);
82+
}
83+
84+
&:before {
85+
content: '';
86+
position: absolute;
87+
z-index: 1;
4588
}
4689

4790
&.is-dark {
48-
.theme-style(@gray-9, @color-white)
91+
.theme-style(@gray-9, @color-white, @angleColor);
4992
}
5093

5194
&.is-light {
52-
.theme-style(@color-white, @gray-9);
53-
box-shadow: @border-shadow-2;
54-
95+
.theme-style(@color-white, @gray-9, @color-white);
96+
box-shadow: @border-shadow-4;
5597
}
5698

5799
&.is-error {
58-
.theme-style(@color-red1, @color-gray1);
100+
.theme-style(@color-red1, @color-gray1, @color-red1);
101+
box-shadow: @border-shadow-4;
59102
}
60103

61104
&.is-remind {
62-
.theme-style(@blue-4, @color-white);
105+
.theme-style(@blue-4, @color-white, @blue-4);
63106
}
64107

65-
&.top-left:after {
108+
&.top-left {
109+
&:after {
66110
bottom: @offset-size;
67111
left: @left-space-size;
68-
transform: rotate(0);
112+
transform: rotate(45deg);
113+
}
114+
&:before {
115+
.top-before-style();
116+
}
69117
}
70118

71-
&.top-center:after {
119+
&.top-center {
120+
&:after {
72121
bottom: @offset-size;
73122
left: 50%;
74-
transform: translate(-50%) rotate(0);
123+
transform: translate(-50%) rotate(45deg);
124+
}
125+
&:before {
126+
.top-before-style();
127+
}
75128
}
76129

77-
&.top-right:after {
130+
&.top-right {
131+
&:after {
78132
bottom: @offset-size;
79133
left: calc(100% - @left-space-size + @offset-size);
80-
transform: rotate(0);
134+
transform: rotate(45deg);
135+
}
136+
&:before {
137+
.top-before-style();
138+
}
81139
}
82140

83-
&.right-top:after {
141+
&.right-top {
142+
&:after {
84143
left: @offset-size;
85144
top: @top-space-size;
86-
transform: rotate(90deg);
145+
transform: rotate(45deg);
146+
}
147+
&:before {
148+
.right-before-style()
149+
}
87150
}
88151

89-
&.right-center:after {
152+
&.right-center {
153+
&:after {
90154
left: @offset-size;
91155
top: 50%;
92-
transform: translate(0, -50%) rotate(90deg);
156+
transform: translate(0, -50%) rotate(45deg);
157+
}
158+
&:before {
159+
.right-before-style()
160+
}
93161
}
94162

95-
&.right-bottom:after {
163+
&.right-bottom {
164+
&:after {
96165
left: @offset-size;
97166
top: calc(100% - @top-space-size + @offset-size);
98-
transform: rotate(90deg);
167+
transform: rotate(45deg);
168+
}
169+
&:before {
170+
.right-before-style()
171+
}
99172
}
100173

101174
&.left-top {
102175
&:after {
103176
right: @offset-size;
104-
top:@top-space-size;
105-
transform: rotate(270deg);
177+
top: @top-space-size;
178+
transform: rotate(45deg);
179+
}
180+
&:before {
181+
.left-before-style();
106182
}
107183
}
108184

109185
&.left-center {
110186
&:after {
111187
right: @offset-size;
112188
top: 50%;
113-
transform: translate(0, -50%) rotate(270deg);
189+
transform: translate(0, -50%) rotate(45deg);
190+
}
191+
&:before {
192+
.left-before-style();
114193
}
115194
}
116195

117196
&.left-bottom {
118197
&:after {
119198
right: @offset-size;
120199
top: calc(100% - @top-space-size + @offset-size);
121-
transform: rotate(270deg);
200+
transform: rotate(45deg);
201+
}
202+
&:before {
203+
.left-before-style();
122204
}
123205
}
124206

125207
&.bottom-left {
126208
&:after {
127209
top: @offset-size;
128210
left: @left-space-size;
129-
transform: rotate(180deg);
211+
transform: rotate(45deg);
212+
}
213+
&:before {
214+
.bottom-before-style();
130215
}
131216
}
132217

133218
&.bottom-center {
134219
&:after {
135220
top: @offset-size;
136221
left: 50%;
137-
transform: translate(-50%) rotate(180deg);
222+
transform: translate(-50%) rotate(45deg);
223+
}
224+
&:before {
225+
.bottom-before-style();
138226
}
139227
}
140228

141229
&.bottom-right {
142230
&:after {
143231
top: @offset-size;
144232
left: calc(100% - @left-space-size + @offset-size);
145-
transform: rotate(180deg);
233+
transform: rotate(45deg);
234+
}
235+
&:before {
236+
.bottom-before-style();
146237
}
147238
}
148239
}

‎src/components/tooltip/index.md‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -17,20 +17,21 @@ group:
1717

1818
### API
1919

20-
| 参数 | 说明 | 类型 | 默认值 |
21-
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------- |
22-
| content | 内容（可以为任意一段 html 内容） | string | |
23-
| theme | 主题, 可选 `dark` `light` `error` | string | dark |
24-
| trigger | 触发方式 `hover` `click` | string | hover |
25-
| visible | 用于手动控制浮层显隐 | boolean | undefined |
26-
| onVisibleChange | 显示隐藏的回调 | (visible: boolean) => void | () => {} |
27-
| container | <del>渲染节点，默认渲染到 body 上(如果指定容器，将会给指定容器添加 position:relative)，<b style="color: red">已废弃</b></del> | function | document.body |
28-
| mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：毫秒 | number | 1 |
29-
| mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip，单位：毫秒 | number | 1 |
20+
| 参数 | 说明 | 类型 | 默认值 |
21+
|-----------------|-------------------------------------------------------------------------------------------------------------------------------------------------------| -------- | ------------- |
22+
| content | 内容（可以为任意一段 html 内容） | string | |
23+
| theme | 主题, 可选 `dark` `light` `error` | string | dark |
24+
| trigger | 触发方式 `hover` `click` | string | hover |
25+
| visible | 用于手动控制浮层显隐 | boolean | undefined |
26+
| onVisibleChange | 显示隐藏的回调 | (visible: boolean) => void | () => {} |
27+
| container | <del>渲染节点，默认渲染到 body 上(如果指定容器，将会给指定容器添加 position:relative)，<b style="color: red">已废弃</b></del> | function | document.body |
28+
| mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：毫秒 | number | 1 |
29+
| mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip，单位：毫秒 | number | 1 |
3030
| placement | 气泡框位置，可选 `auto` `top` `left` `right` `bottom` `top-left` `top-right` `bottom-left` `bottom-right` `left-top` `left-bottom` `right-top` `right-bottom` | string | auto |
31-
| className | 设置类样式 | string | '' |
32-
| overlayStyle | 自定义卡片样式 | object | {} |
33-
| alwaysShow | 设置 visible 为 true 后，点击其他位置，tooltip 不消失 | bool | false |
31+
| className | 设置类样式 | string | '' |
32+
| overlayStyle | 自定义卡片样式 | object | {} |
33+
| alwaysShow | 设置 visible 为 true 后，点击其他位置，tooltip 不消失 | bool | false |
34+
| showArrow | 配置箭头的显隐，默认为true | bool | false |
3435

3536
### 代码演示
3637

@@ -40,4 +41,6 @@ group:
4041

4142
<embed src="@components/tooltip/demos/theme.md" />
4243

43-
<embed src="@components/tooltip/demos/tigger.md" />
44+
<embed src="@components/tooltip/demos/tigger.md" />
45+
46+
<embed src="@components/tooltip/demos/showArrow.md" />

0 commit comments

Comments
 (0)