@platformatic/ui-components 0.2.19 → 0.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/index-BJ-rQoWR.css +1 -0
- package/dist/assets/index-CEKWpFeX.js +40 -0
- package/dist/index.html +2 -2
- package/index.js +2 -2
- package/package.json +1 -1
- package/src/components/Common.module.css +27 -1
- package/src/components/CopyAndPaste.jsx +36 -11
- package/src/components/PlatformaticIcon.jsx +0 -8
- package/src/components/Tooltip.jsx +94 -28
- package/src/components/Tooltip.module.css +57 -21
- package/src/components/TooltipAbsolute.jsx +124 -0
- package/src/components/TooltipAbsolute.module.css +88 -0
- package/src/components/constants.js +10 -4
- package/src/components/forms/Select.jsx +7 -6
- package/src/components/forms/Select.module.css +1 -4
- package/src/components/forms/SelectWithInput.module.css +1 -1
- package/src/stories/CopyAndPaste.stories.jsx +4 -2
- package/src/stories/Tooltip.stories.jsx +85 -0
- package/dist/assets/index-C-rgNKxt.css +0 -1
- package/dist/assets/index-DBEXX1ja.js +0 -40
- package/src/components/TooltipV2.jsx +0 -71
- package/src/components/TooltipV2.module.css +0 -31
package/dist/index.html
CHANGED
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
<meta charset="UTF-8" />
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
6
|
<title>Platformatic UI Components</title>
|
|
7
|
-
<script type="module" crossorigin src="/assets/index-
|
|
8
|
-
<link rel="stylesheet" crossorigin href="/assets/index-
|
|
7
|
+
<script type="module" crossorigin src="/assets/index-CEKWpFeX.js"></script>
|
|
8
|
+
<link rel="stylesheet" crossorigin href="/assets/index-BJ-rQoWR.css">
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
|
11
11
|
<div id="root"></div>
|
package/index.js
CHANGED
|
@@ -37,7 +37,7 @@ import SearchBarV2 from './src/components/SearchBarV2'
|
|
|
37
37
|
import SimpleMetric from './src/components/SimpleMetric'
|
|
38
38
|
import Status from './src/components/Status'
|
|
39
39
|
import Tooltip from './src/components/Tooltip'
|
|
40
|
-
import
|
|
40
|
+
import TooltipAbsolute from './src/components/TooltipAbsolute'
|
|
41
41
|
import TabbedWindow from './src/components/TabbedWindow'
|
|
42
42
|
import TabbedWindowV2 from './src/components/TabbedWindowV2'
|
|
43
43
|
import Tag from './src/components/Tag'
|
|
@@ -88,7 +88,7 @@ export {
|
|
|
88
88
|
Tag,
|
|
89
89
|
TextWithLabel,
|
|
90
90
|
Tooltip,
|
|
91
|
-
|
|
91
|
+
TooltipAbsolute,
|
|
92
92
|
TwoColumnsLayout,
|
|
93
93
|
Versions,
|
|
94
94
|
VerticalSeparator
|
package/package.json
CHANGED
|
@@ -133,28 +133,54 @@
|
|
|
133
133
|
.padded {
|
|
134
134
|
@apply px-2 py-2.5;
|
|
135
135
|
}
|
|
136
|
-
|
|
137
136
|
.text--error-red {
|
|
138
137
|
@apply text-error-red
|
|
139
138
|
}
|
|
139
|
+
.text--error-red-70 {
|
|
140
|
+
@apply text-error-red/70
|
|
141
|
+
}
|
|
140
142
|
.text--white {
|
|
141
143
|
@apply text-white
|
|
142
144
|
}
|
|
145
|
+
.text--white-70 {
|
|
146
|
+
@apply text-white/70;
|
|
147
|
+
}
|
|
143
148
|
.text--dark-green {
|
|
144
149
|
@apply text-dark-green;
|
|
145
150
|
}
|
|
151
|
+
.text--dark-green-70 {
|
|
152
|
+
@apply text-dark-green/70;
|
|
153
|
+
}
|
|
146
154
|
.text--main-green {
|
|
147
155
|
@apply text-main-green;
|
|
148
156
|
}
|
|
157
|
+
.text--main-green-70 {
|
|
158
|
+
@apply text-main-green/70;
|
|
159
|
+
}
|
|
149
160
|
.text--light-green {
|
|
150
161
|
@apply text-light-green;
|
|
151
162
|
}
|
|
163
|
+
.text--light-green-70 {
|
|
164
|
+
@apply text-light-green/70;
|
|
165
|
+
}
|
|
152
166
|
.text--main-dark-blue {
|
|
153
167
|
@apply text-main-dark-blue;
|
|
154
168
|
}
|
|
169
|
+
.text--main-dark-blue-70 {
|
|
170
|
+
@apply text-main-dark-blue/70;
|
|
171
|
+
}
|
|
155
172
|
.text--light-blue {
|
|
156
173
|
@apply text-light-blue;
|
|
157
174
|
}
|
|
175
|
+
.text--light-blue-70 {
|
|
176
|
+
@apply text-light-blue/70;
|
|
177
|
+
}
|
|
178
|
+
.text--rich-black {
|
|
179
|
+
@apply text-rich-black;
|
|
180
|
+
}
|
|
181
|
+
.text--rich-black-70 {
|
|
182
|
+
@apply text-rich-black/70;
|
|
183
|
+
}
|
|
158
184
|
|
|
159
185
|
.text--base {
|
|
160
186
|
@apply text-base
|
|
@@ -1,11 +1,20 @@
|
|
|
1
1
|
'use strict'
|
|
2
2
|
import React, { useState } from 'react'
|
|
3
3
|
import PropTypes from 'prop-types'
|
|
4
|
-
import { COLORS_ICON, MEDIUM, SIZES } from './constants'
|
|
4
|
+
import { COLORS_ICON, DIRECTION_TOP, MEDIUM, SIZES, POSITIONS, POSITION_CENTER } from './constants'
|
|
5
5
|
import PlatformaticIcon from './PlatformaticIcon'
|
|
6
|
-
import
|
|
6
|
+
import TooltipAbsolute from './TooltipAbsolute'
|
|
7
7
|
|
|
8
|
-
function CopyAndPaste ({
|
|
8
|
+
function CopyAndPaste ({
|
|
9
|
+
value,
|
|
10
|
+
tooltipLabel,
|
|
11
|
+
color,
|
|
12
|
+
timeout,
|
|
13
|
+
size,
|
|
14
|
+
tooltipClassName,
|
|
15
|
+
position
|
|
16
|
+
|
|
17
|
+
}) {
|
|
9
18
|
const [copied, setCopied] = useState(false)
|
|
10
19
|
|
|
11
20
|
function copy () {
|
|
@@ -19,12 +28,18 @@ function CopyAndPaste ({ value, tooltipLabel, color, timeout, size }) {
|
|
|
19
28
|
return !copied
|
|
20
29
|
? (<PlatformaticIcon size={size} iconName='CopyPasteIcon' color={color} onClick={() => copy()} />)
|
|
21
30
|
: (
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
31
|
+
<TooltipAbsolute
|
|
32
|
+
tooltipClassName={tooltipClassName}
|
|
33
|
+
content={(<span>{tooltipLabel}</span>)}
|
|
34
|
+
delay={100}
|
|
35
|
+
direction={DIRECTION_TOP}
|
|
36
|
+
offset={44}
|
|
37
|
+
activeDependsOnVisible
|
|
38
|
+
visible={copied}
|
|
39
|
+
position={position}
|
|
40
|
+
>
|
|
41
|
+
<PlatformaticIcon size={size} iconName='CircleCheckMarkIcon' color={color} onClick={null} />
|
|
42
|
+
</TooltipAbsolute>
|
|
28
43
|
)
|
|
29
44
|
}
|
|
30
45
|
|
|
@@ -48,7 +63,15 @@ CopyAndPaste.propTypes = {
|
|
|
48
63
|
/**
|
|
49
64
|
* timeout
|
|
50
65
|
*/
|
|
51
|
-
timeout: PropTypes.number
|
|
66
|
+
timeout: PropTypes.number,
|
|
67
|
+
/**
|
|
68
|
+
* timeout
|
|
69
|
+
*/
|
|
70
|
+
tooltipClassName: PropTypes.string,
|
|
71
|
+
/**
|
|
72
|
+
* position
|
|
73
|
+
*/
|
|
74
|
+
position: PropTypes.oneOf(POSITIONS)
|
|
52
75
|
}
|
|
53
76
|
|
|
54
77
|
CopyAndPaste.defaultProps = {
|
|
@@ -56,7 +79,9 @@ CopyAndPaste.defaultProps = {
|
|
|
56
79
|
tooltipLabel: 'Create your app now',
|
|
57
80
|
color: 'main-dark-blue',
|
|
58
81
|
timeout: 1500,
|
|
59
|
-
size: MEDIUM
|
|
82
|
+
size: MEDIUM,
|
|
83
|
+
tooltipClassName: '',
|
|
84
|
+
position: POSITION_CENTER
|
|
60
85
|
}
|
|
61
86
|
|
|
62
87
|
export default CopyAndPaste
|
|
@@ -4,7 +4,6 @@ import PropTypes from 'prop-types'
|
|
|
4
4
|
import Icons from './icons'
|
|
5
5
|
import styles from './PlatformaticIcon.module.css'
|
|
6
6
|
import { COLORS_ICON, MAIN_GREEN, SIZES, SMALL } from './constants'
|
|
7
|
-
import Tooltip from './Tooltip'
|
|
8
7
|
|
|
9
8
|
function PlatformaticIcon ({
|
|
10
9
|
iconName,
|
|
@@ -13,7 +12,6 @@ function PlatformaticIcon ({
|
|
|
13
12
|
size,
|
|
14
13
|
classes,
|
|
15
14
|
tip,
|
|
16
|
-
tipClassName,
|
|
17
15
|
disabled,
|
|
18
16
|
inactive,
|
|
19
17
|
internalOverHandling,
|
|
@@ -41,7 +39,6 @@ function PlatformaticIcon ({
|
|
|
41
39
|
onMouseLeave={() => internalOverHandling && !disabled ? setHover(false) : {}}
|
|
42
40
|
>
|
|
43
41
|
{icon}
|
|
44
|
-
{tip && <Tooltip tooltipClassName={tipClassName} text={tip} visible={hover} />}
|
|
45
42
|
</div>
|
|
46
43
|
)
|
|
47
44
|
}
|
|
@@ -79,10 +76,6 @@ PlatformaticIcon.propTypes = {
|
|
|
79
76
|
* tip
|
|
80
77
|
*/
|
|
81
78
|
tip: PropTypes.string,
|
|
82
|
-
/**
|
|
83
|
-
* tip
|
|
84
|
-
*/
|
|
85
|
-
tipClassName: PropTypes.string,
|
|
86
79
|
/**
|
|
87
80
|
* disabled
|
|
88
81
|
*/
|
|
@@ -104,7 +97,6 @@ PlatformaticIcon.defaultProps = {
|
|
|
104
97
|
onClick: () => {},
|
|
105
98
|
classes: '',
|
|
106
99
|
tip: '',
|
|
107
|
-
tipClassName: '',
|
|
108
100
|
disabled: false,
|
|
109
101
|
inactive: false,
|
|
110
102
|
internalOverHandling: false
|
|
@@ -2,64 +2,130 @@
|
|
|
2
2
|
import PropTypes from 'prop-types'
|
|
3
3
|
import styles from './Tooltip.module.css'
|
|
4
4
|
import { useEffect, useRef, useState } from 'react'
|
|
5
|
-
import {
|
|
5
|
+
import { DIRECTIONS, DIRECTION_BOTTOM, DIRECTION_LEFT, DIRECTION_RIGHT, DIRECTION_TOP } from './constants'
|
|
6
6
|
|
|
7
|
-
function Tooltip ({
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
7
|
+
function Tooltip ({
|
|
8
|
+
direction,
|
|
9
|
+
visible,
|
|
10
|
+
activeDependsOnVisible,
|
|
11
|
+
content,
|
|
12
|
+
delay,
|
|
13
|
+
children,
|
|
14
|
+
tooltipClassName,
|
|
15
|
+
offset
|
|
16
|
+
}) {
|
|
17
|
+
let timeout
|
|
18
|
+
const [active, setActive] = useState(activeDependsOnVisible ? visible : false)
|
|
19
|
+
// const [active, setActive] = useState(true)
|
|
20
|
+
let componentClassName = tooltipClassName || styles.tooltipTipBaseClass
|
|
21
|
+
componentClassName += ` ${styles.tooltipTip} ` + styles[`${direction}`]
|
|
22
|
+
const fixedStyle = { top: '0px', left: '0px' }
|
|
23
|
+
const wrapperRef = useRef()
|
|
11
24
|
|
|
12
25
|
useEffect(() => {
|
|
13
|
-
if (
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
26
|
+
if (activeDependsOnVisible) {
|
|
27
|
+
setActive(visible)
|
|
28
|
+
}
|
|
29
|
+
}, [activeDependsOnVisible, visible])
|
|
30
|
+
|
|
31
|
+
if (wrapperRef.current) {
|
|
32
|
+
const referenceBoundingClientRect = wrapperRef.current.getBoundingClientRect()
|
|
33
|
+
if (referenceBoundingClientRect) {
|
|
34
|
+
let topPosition
|
|
35
|
+
let leftPosition
|
|
36
|
+
|
|
37
|
+
switch (direction) {
|
|
38
|
+
case DIRECTION_BOTTOM:
|
|
39
|
+
topPosition = referenceBoundingClientRect.y - (referenceBoundingClientRect.height) - offset
|
|
40
|
+
fixedStyle.top = `${topPosition}px`
|
|
41
|
+
// fixedStyle.bottom = `calc(${offset}px *-1)`
|
|
42
|
+
break
|
|
43
|
+
case DIRECTION_RIGHT:
|
|
44
|
+
case DIRECTION_LEFT:
|
|
45
|
+
leftPosition = referenceBoundingClientRect.x + referenceBoundingClientRect.width + offset
|
|
46
|
+
fixedStyle.left = `${leftPosition}px`
|
|
47
|
+
break
|
|
48
|
+
default:
|
|
49
|
+
fixedStyle.top = `${referenceBoundingClientRect.y - referenceBoundingClientRect.height - offset}px`
|
|
50
|
+
fixedStyle.left = `${referenceBoundingClientRect.x + (referenceBoundingClientRect.width / 2)}px`
|
|
51
|
+
fixedStyle.transform = 'translateX(-50%)'
|
|
52
|
+
break
|
|
22
53
|
}
|
|
23
|
-
} else {
|
|
24
|
-
setClassName(normalClassName())
|
|
25
54
|
}
|
|
26
|
-
}
|
|
55
|
+
}
|
|
27
56
|
|
|
28
|
-
|
|
29
|
-
|
|
57
|
+
const showTip = () => {
|
|
58
|
+
timeout = setTimeout(() => {
|
|
59
|
+
setActive(true)
|
|
60
|
+
}, delay)
|
|
30
61
|
}
|
|
31
62
|
|
|
32
|
-
|
|
33
|
-
|
|
63
|
+
const hideTip = () => {
|
|
64
|
+
clearInterval(timeout)
|
|
65
|
+
setActive(false)
|
|
34
66
|
}
|
|
35
67
|
|
|
36
|
-
return
|
|
68
|
+
return (
|
|
69
|
+
<div
|
|
70
|
+
className={styles.tooltipWrapper}
|
|
71
|
+
onMouseEnter={!activeDependsOnVisible ? showTip : () => {}}
|
|
72
|
+
onMouseLeave={!activeDependsOnVisible ? hideTip : () => {}}
|
|
73
|
+
ref={el => { wrapperRef.current = el }}
|
|
74
|
+
>
|
|
75
|
+
{children}
|
|
76
|
+
{active && (
|
|
77
|
+
<div className={componentClassName} style={{ ...fixedStyle }}>
|
|
78
|
+
{content}
|
|
79
|
+
</div>
|
|
80
|
+
)}
|
|
81
|
+
</div>
|
|
82
|
+
)
|
|
37
83
|
}
|
|
38
84
|
|
|
39
85
|
Tooltip.propTypes = {
|
|
40
86
|
/**
|
|
41
|
-
*
|
|
87
|
+
* direction
|
|
88
|
+
*/
|
|
89
|
+
direction: PropTypes.oneOf(DIRECTIONS),
|
|
90
|
+
/**
|
|
91
|
+
* content
|
|
42
92
|
*/
|
|
43
|
-
|
|
93
|
+
content: PropTypes.node,
|
|
94
|
+
/**
|
|
95
|
+
* children
|
|
96
|
+
*/
|
|
97
|
+
children: PropTypes.node,
|
|
44
98
|
/**
|
|
45
99
|
* tooltipClassName
|
|
46
100
|
*/
|
|
47
101
|
tooltipClassName: PropTypes.string,
|
|
102
|
+
/**
|
|
103
|
+
* delay
|
|
104
|
+
*/
|
|
105
|
+
delay: PropTypes.number,
|
|
48
106
|
/**
|
|
49
107
|
* visible
|
|
50
108
|
*/
|
|
51
109
|
visible: PropTypes.bool,
|
|
52
110
|
/**
|
|
53
|
-
*
|
|
111
|
+
* activeDependsOnVisible
|
|
112
|
+
*/
|
|
113
|
+
activeDependsOnVisible: PropTypes.bool,
|
|
114
|
+
/**
|
|
115
|
+
* offset
|
|
54
116
|
*/
|
|
55
|
-
|
|
117
|
+
offset: PropTypes.number
|
|
56
118
|
}
|
|
57
119
|
|
|
58
120
|
Tooltip.defaultProps = {
|
|
59
|
-
|
|
121
|
+
direction: DIRECTION_TOP,
|
|
60
122
|
tooltipClassName: '',
|
|
123
|
+
delay: 0,
|
|
124
|
+
activeDependsOnVisible: false,
|
|
61
125
|
visible: false,
|
|
62
|
-
|
|
126
|
+
children: null,
|
|
127
|
+
content: null,
|
|
128
|
+
offset: 0
|
|
63
129
|
}
|
|
64
130
|
|
|
65
131
|
export default Tooltip
|
|
@@ -1,31 +1,67 @@
|
|
|
1
|
+
/* Wrapping */
|
|
2
|
+
.tooltipWrapper {
|
|
3
|
+
display: inline-block;
|
|
4
|
+
position: relative;
|
|
5
|
+
}
|
|
1
6
|
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
margin-top: -65px;
|
|
5
|
-
z-index: 20;
|
|
7
|
+
/* Fixed positioning */
|
|
8
|
+
.tooltipTip {
|
|
6
9
|
position: fixed;
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
10
|
+
border-radius: 4px;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.tooltipTipBaseClass {
|
|
14
|
+
@apply text-rich-black bg-white p-2 font-sans text-sm z-20 rounded;
|
|
15
|
+
white-space: nowrap;
|
|
12
16
|
}
|
|
13
17
|
|
|
14
|
-
|
|
15
|
-
|
|
18
|
+
/* CSS border triangles */
|
|
19
|
+
.tooltipTip::before {
|
|
20
|
+
content: " ";
|
|
21
|
+
left: 50%;
|
|
22
|
+
border: solid transparent;
|
|
23
|
+
height: 0;
|
|
24
|
+
width: 0;
|
|
16
25
|
position: absolute;
|
|
26
|
+
pointer-events: none;
|
|
27
|
+
border-width: 6px;
|
|
28
|
+
margin-left: calc(6px * -1);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
/* CSS border triangles */
|
|
32
|
+
.top::before {
|
|
33
|
+
@apply border-t-white;
|
|
17
34
|
top: 100%;
|
|
18
|
-
border-width: 5px;
|
|
19
|
-
border-style: solid;
|
|
20
|
-
border-color: white transparent transparent transparent;
|
|
21
35
|
}
|
|
22
36
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
37
|
+
/* Absolute positioning */
|
|
38
|
+
.right {
|
|
39
|
+
top: 50%;
|
|
40
|
+
transform: translateX(0) translateY(-50%);
|
|
41
|
+
}
|
|
42
|
+
/* CSS border triangles */
|
|
43
|
+
.right::before {
|
|
44
|
+
@apply border-r-white;
|
|
45
|
+
left: calc(6px * -1);
|
|
46
|
+
top: 50%;
|
|
47
|
+
transform: translateX(0) translateY(-50%);
|
|
48
|
+
}
|
|
49
|
+
/* CSS border triangles */
|
|
50
|
+
.bottom::before {
|
|
51
|
+
@apply border-b-white;
|
|
52
|
+
bottom: 100%;
|
|
26
53
|
}
|
|
27
54
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
55
|
+
/* Absolute positioning */
|
|
56
|
+
.left {
|
|
57
|
+
left: auto;
|
|
58
|
+
top: 50%;
|
|
59
|
+
transform: translateX(0) translateY(-50%);
|
|
60
|
+
}
|
|
61
|
+
/* CSS border triangles */
|
|
62
|
+
.left::before {
|
|
63
|
+
left: auto;
|
|
64
|
+
right: calc(6px * -2);
|
|
65
|
+
top: 50%;
|
|
66
|
+
transform: translateX(0) translateY(-50%);
|
|
67
|
+
}
|
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
'use strict'
|
|
2
|
+
import PropTypes from 'prop-types'
|
|
3
|
+
import styles from './TooltipAbsolute.module.css'
|
|
4
|
+
import { useEffect, useState } from 'react'
|
|
5
|
+
import { DIRECTIONS, DIRECTION_LEFT, DIRECTION_BOTTOM, DIRECTION_TOP, DIRECTION_RIGHT } from './constants'
|
|
6
|
+
|
|
7
|
+
const TooltipAbsolute = ({
|
|
8
|
+
direction,
|
|
9
|
+
content,
|
|
10
|
+
delay,
|
|
11
|
+
children,
|
|
12
|
+
tooltipClassName,
|
|
13
|
+
offset,
|
|
14
|
+
position,
|
|
15
|
+
visible,
|
|
16
|
+
activeDependsOnVisible
|
|
17
|
+
}) => {
|
|
18
|
+
let timeout
|
|
19
|
+
const [active, setActive] = useState(activeDependsOnVisible ? visible : false)
|
|
20
|
+
let componentClassName = tooltipClassName || styles.tooltipTipBaseClass
|
|
21
|
+
componentClassName += ` ${styles.tooltipTip} ` + styles[`${position}`] + ' ' + styles[`${direction}`]
|
|
22
|
+
|
|
23
|
+
const absoluteStyle = {}
|
|
24
|
+
|
|
25
|
+
switch (direction) {
|
|
26
|
+
case DIRECTION_BOTTOM:
|
|
27
|
+
absoluteStyle.bottom = `calc(${offset}px * -1)`
|
|
28
|
+
break
|
|
29
|
+
case DIRECTION_RIGHT:
|
|
30
|
+
absoluteStyle.left = `calc(100% + ${offset}px)`
|
|
31
|
+
break
|
|
32
|
+
case DIRECTION_LEFT:
|
|
33
|
+
absoluteStyle.right = `calc(100% + ${offset}px)`
|
|
34
|
+
break
|
|
35
|
+
default:
|
|
36
|
+
absoluteStyle.top = `calc(${offset}px * -1)`
|
|
37
|
+
break
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
useEffect(() => {
|
|
41
|
+
if (activeDependsOnVisible) {
|
|
42
|
+
setActive(visible)
|
|
43
|
+
}
|
|
44
|
+
}, [activeDependsOnVisible, visible])
|
|
45
|
+
|
|
46
|
+
const showTip = () => {
|
|
47
|
+
timeout = setTimeout(() => {
|
|
48
|
+
setActive(true)
|
|
49
|
+
}, delay)
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
const hideTip = () => {
|
|
53
|
+
clearInterval(timeout)
|
|
54
|
+
setActive(false)
|
|
55
|
+
}
|
|
56
|
+
return (
|
|
57
|
+
<div
|
|
58
|
+
className={styles.tooltipWrapper}
|
|
59
|
+
onMouseEnter={showTip}
|
|
60
|
+
onMouseLeave={hideTip}
|
|
61
|
+
>
|
|
62
|
+
|
|
63
|
+
{children}
|
|
64
|
+
{active && (
|
|
65
|
+
<div className={componentClassName} style={{ ...absoluteStyle }}>
|
|
66
|
+
{content}
|
|
67
|
+
</div>
|
|
68
|
+
)}
|
|
69
|
+
</div>
|
|
70
|
+
)
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
TooltipAbsolute.propTypes = {
|
|
74
|
+
/**
|
|
75
|
+
* direction
|
|
76
|
+
*/
|
|
77
|
+
direction: PropTypes.oneOf(DIRECTIONS),
|
|
78
|
+
/**
|
|
79
|
+
* content
|
|
80
|
+
*/
|
|
81
|
+
content: PropTypes.node,
|
|
82
|
+
/**
|
|
83
|
+
* children
|
|
84
|
+
*/
|
|
85
|
+
children: PropTypes.node,
|
|
86
|
+
/**
|
|
87
|
+
* tooltipClassName
|
|
88
|
+
*/
|
|
89
|
+
tooltipClassName: PropTypes.string,
|
|
90
|
+
/**
|
|
91
|
+
* delay
|
|
92
|
+
*/
|
|
93
|
+
delay: PropTypes.number,
|
|
94
|
+
/**
|
|
95
|
+
* offset
|
|
96
|
+
*/
|
|
97
|
+
offset: PropTypes.number,
|
|
98
|
+
/**
|
|
99
|
+
* position
|
|
100
|
+
*/
|
|
101
|
+
position: PropTypes.string,
|
|
102
|
+
/**
|
|
103
|
+
* visible
|
|
104
|
+
*/
|
|
105
|
+
visible: PropTypes.bool,
|
|
106
|
+
/**
|
|
107
|
+
* activeDependsOnVisible
|
|
108
|
+
*/
|
|
109
|
+
activeDependsOnVisible: PropTypes.bool
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
TooltipAbsolute.defaultProps = {
|
|
113
|
+
direction: DIRECTION_TOP,
|
|
114
|
+
tooltipClassName: '',
|
|
115
|
+
delay: 0,
|
|
116
|
+
children: null,
|
|
117
|
+
content: null,
|
|
118
|
+
offset: 0,
|
|
119
|
+
position: 'start',
|
|
120
|
+
activeDependsOnVisible: false,
|
|
121
|
+
visible: false
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
export default TooltipAbsolute
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
/* Wrapping */
|
|
2
|
+
.tooltipWrapper {
|
|
3
|
+
display: inline-block;
|
|
4
|
+
position: relative;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
/* Absolute positioning */
|
|
8
|
+
.tooltipTip {
|
|
9
|
+
position: absolute;
|
|
10
|
+
border-radius: 4px;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.tooltipTipBaseClass {
|
|
14
|
+
@apply text-rich-black bg-white p-2 font-sans text-sm z-20 rounded;
|
|
15
|
+
white-space: nowrap;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
/* CSS border triangles */
|
|
19
|
+
.tooltipTip::before {
|
|
20
|
+
content: " ";
|
|
21
|
+
border: solid transparent;
|
|
22
|
+
height: 0;
|
|
23
|
+
width: 0;
|
|
24
|
+
position: absolute;
|
|
25
|
+
pointer-events: none;
|
|
26
|
+
border-width: 6px;
|
|
27
|
+
margin-left: calc(6px * -1);
|
|
28
|
+
}
|
|
29
|
+
.start {
|
|
30
|
+
left: 0%;
|
|
31
|
+
}
|
|
32
|
+
.start::before {
|
|
33
|
+
left: 12px;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.center {
|
|
37
|
+
left: 50%;
|
|
38
|
+
transform: translateX(-50%);
|
|
39
|
+
}
|
|
40
|
+
.end {
|
|
41
|
+
left: 100%;
|
|
42
|
+
transform: translateX(-100%);
|
|
43
|
+
}
|
|
44
|
+
.end::before {
|
|
45
|
+
right: 4px;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
/* CSS border triangles */
|
|
50
|
+
.top::before {
|
|
51
|
+
top: 100%;
|
|
52
|
+
border-top-color: white;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
/* Absolute positioning */
|
|
56
|
+
.right {
|
|
57
|
+
top: 50%;
|
|
58
|
+
transform: translateX(0) translateY(-50%);
|
|
59
|
+
}
|
|
60
|
+
/* CSS border triangles */
|
|
61
|
+
.right::before {
|
|
62
|
+
left: calc(6px * -1);
|
|
63
|
+
top: 50%;
|
|
64
|
+
transform: translateX(0) translateY(-50%);
|
|
65
|
+
border-right-color: white;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
/* CSS border triangles */
|
|
69
|
+
.bottom::before {
|
|
70
|
+
bottom: 100%;
|
|
71
|
+
border-bottom-color: white;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
/* Absolute positioning */
|
|
75
|
+
.left {
|
|
76
|
+
left: auto;
|
|
77
|
+
top: 50%;
|
|
78
|
+
transform: translateX(0) translateY(-50%);
|
|
79
|
+
}
|
|
80
|
+
/* CSS border triangles */
|
|
81
|
+
.left::before {
|
|
82
|
+
left: auto;
|
|
83
|
+
right: calc(6px * -2);
|
|
84
|
+
top: 50%;
|
|
85
|
+
transform: translateX(0) translateY(-50%);
|
|
86
|
+
border-left-color: white;
|
|
87
|
+
border-right-color: transparent;
|
|
88
|
+
}
|
|
@@ -70,7 +70,13 @@ export const OPACITY_30 = 30
|
|
|
70
70
|
export const OPACITY_60 = 60
|
|
71
71
|
export const OPACITY_100 = 100
|
|
72
72
|
|
|
73
|
-
export const
|
|
74
|
-
export const
|
|
75
|
-
export const
|
|
76
|
-
export const
|
|
73
|
+
export const DIRECTION_BOTTOM = 'bottom'
|
|
74
|
+
export const DIRECTION_LEFT = 'left'
|
|
75
|
+
export const DIRECTION_RIGHT = 'right'
|
|
76
|
+
export const DIRECTION_TOP = 'top'
|
|
77
|
+
export const DIRECTIONS = [DIRECTION_BOTTOM, DIRECTION_LEFT, DIRECTION_RIGHT, DIRECTION_TOP]
|
|
78
|
+
|
|
79
|
+
export const POSITION_START = 'start'
|
|
80
|
+
export const POSITION_END = 'end'
|
|
81
|
+
export const POSITION_CENTER = 'center'
|
|
82
|
+
export const POSITIONS = [POSITION_START, POSITION_END, POSITION_CENTER]
|