Skip to content
This repository was archived by the owner on Jun 3, 2024. It is now read-only.

Commit 870cde9

Browse files
author
xhlulu
committed
Move files from #940, correct generation issue
Removed default props that were not typed
1 parent f639230 commit 870cde9

File tree

2 files changed

+251
-2
lines changed

2 files changed

+251
-2
lines changed

‎src/components/ToolTip.react.js

Lines changed: 247 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,247 @@
1+
import React, {Component} from 'react';
2+
import PropTypes from 'prop-types';
3+
import {omit} from 'ramda';
4+
5+
/**
6+
* A basic HTML textarea for entering multiline text.
7+
*/
8+
export default class ToolTip extends Component {
9+
render() {
10+
const {loading_state, value, children, direction, colors} = this.props;
11+
12+
return (
13+
<span
14+
data-dash-is-loading={
15+
(loading_state && loading_state.is_loading) || undefined
16+
}
17+
className={`hover hover-${direction}`}
18+
{...omit([], this.props)}
19+
>
20+
<span className="hover-content">
21+
{children}
22+
</span>
23+
<style jsx>{`
24+
.hover,
25+
.hover-right {
26+
/* Offset so that the triangle caret lands directly on what's hovered */
27+
transform: translate(5px, 0);
28+
29+
position: absolute;
30+
}
31+
32+
.hover-left {
33+
transform: translate(-5px, 0);
34+
}
35+
36+
.hover-bottom {
37+
transform: translate(0, 6px);
38+
}
39+
40+
.hover-top {
41+
transform: translate(0, -5px);
42+
}
43+
44+
.hover-content {
45+
position: absolute;
46+
border: 1px solid ${colors.border};
47+
border-radius: 2px;
48+
padding: 5px 10px;
49+
background: ${colors.background};
50+
white-space: nowrap;
51+
}
52+
53+
.hover .hover-content,
54+
.hover-right .hover-content {
55+
transform: translate(0, -50%);
56+
}
57+
58+
.hover-left .hover-content {
59+
transform: translate(-100%, -50%);
60+
}
61+
62+
.hover-top .hover-content {
63+
transform: translate(-50%, -100%);
64+
}
65+
66+
.hover-bottom .hover-content {
67+
transform: translate(-50%, 0);
68+
}
69+
70+
/* Add a small triangle on the left side of the box */
71+
.hover:before,
72+
.hover:after {
73+
content: '';
74+
width: 0;
75+
height: 0;
76+
position: absolute;
77+
border-style: solid;
78+
top: -6px;
79+
}
80+
81+
.hover:before,
82+
.hover:after,
83+
.hover-right:before,
84+
.hover-right:after {
85+
border-width: 6px 6px 6px 0;
86+
}
87+
88+
.hover-top:before,
89+
.hover-top:after {
90+
border-width: 6px 6px 0 6px;
91+
}
92+
93+
.hover-bottom:before,
94+
.hover-bottom:after {
95+
border-width: 0 6px 6px 6px;
96+
}
97+
98+
.hover-left:before,
99+
.hover-left:after {
100+
border-width: 6px 0 6px 6px;
101+
}
102+
103+
.hover:before,
104+
.hover-right:before {
105+
border-color: transparent ${colors.border} transparent transparent;
106+
left: -5px;
107+
z-index: 2;
108+
}
109+
110+
.hover:after,
111+
.hover-right:after {
112+
border-color: transparent ${colors.background} transparent transparent;
113+
left: -4px;
114+
z-index: 3;
115+
}
116+
117+
.hover-left:before {
118+
border-color: transparent transparent transparent ${colors.border};
119+
left: -1px;
120+
}
121+
122+
.hover-left:after {
123+
border-color: transparent transparent transparent ${colors.background};
124+
left: -2px;
125+
}
126+
127+
.hover-top:before,
128+
.hover-top:after,
129+
.hover-bottom:before,
130+
.hover-bottom:after {
131+
left: -6px;
132+
}
133+
134+
.hover-bottom:before {
135+
border-color: transparent transparent ${colors.border} transparent;
136+
}
137+
138+
.hover-bottom:after {
139+
border-color: transparent transparent ${colors.background} transparent;
140+
top: -5px;
141+
}
142+
143+
.hover-top:before {
144+
border-color: ${colors.border} transparent transparent transparent;
145+
top: -1px;
146+
}
147+
148+
.hover-top:after {
149+
border-color: ${colors.background} transparent transparent transparent;
150+
top: -2px;
151+
}
152+
`}</style>
153+
<style jsx global>{`
154+
/* By default, hide the loader */
155+
.hover-loader {
156+
display: none;
157+
}
158+
159+
/* Don't display hovers while server-side computation is taking place */
160+
[data-dash-is-loading=true] .hover {
161+
display: none;
162+
}
163+
164+
/* Show a loader when the hover immediately preceeding it is loading */
165+
[data-dash-is-loading=true] + .hover-loader {
166+
display: block;
167+
}
168+
`}</style>
169+
</span>
170+
);
171+
}
172+
}
173+
174+
ToolTip.defaultProps = {
175+
// persisted_props: ['value'],
176+
// persistence_type: 'local',
177+
direction: 'right',
178+
colors: {
179+
border: '#d6d6d6',
180+
background: 'white',
181+
},
182+
};
183+
184+
ToolTip.propTypes = {
185+
/**
186+
* The ID of this component, used to identify dash components
187+
* in callbacks. The ID needs to be unique across all of the
188+
* components in an app.
189+
*/
190+
id: PropTypes.string,
191+
192+
/**
193+
* Often used with CSS to style elements with common properties.
194+
*/
195+
className: PropTypes.string,
196+
197+
/**
198+
* Defines the direction in which the hover opens.
199+
*/
200+
direction: PropTypes.oneOf([
201+
'top',
202+
'right',
203+
'bottom',
204+
'left'
205+
]),
206+
207+
/**
208+
* Holds the colors used by the ToolTip component. If you set these, you should specify colors for all properties, so:
209+
* colors: {
210+
* border: '#d6d6d6',
211+
* primary: '#1975FA',
212+
* background: '#f9f9f9'
213+
* }
214+
*/
215+
colors: PropTypes.exact({
216+
border: PropTypes.string,
217+
background: PropTypes.string,
218+
}),
219+
220+
/**
221+
* Prevents rendering of given element, while keeping child elements, e.g. script elements, active.
222+
*/
223+
hidden: PropTypes.string,
224+
225+
/**
226+
* Defines CSS styles which will override styles previously set.
227+
*/
228+
style: PropTypes.object,
229+
230+
/**
231+
* Object that holds the loading state object coming from dash-renderer
232+
*/
233+
loading_state: PropTypes.shape({
234+
/**
235+
* Determines if the component is loading or not
236+
*/
237+
is_loading: PropTypes.bool,
238+
/**
239+
* Holds which property is loading
240+
*/
241+
prop_name: PropTypes.string,
242+
/**
243+
* Holds the name of the component that is loading
244+
*/
245+
component_name: PropTypes.string,
246+
}),
247+
};

‎src/index.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,8 @@ import Tabs from './components/Tabs.react';
2222
import Tab from './components/Tab.react';
2323
import Store from './components/Store.react';
2424
import LogoutButton from './components/LogoutButton.react';
25-
import Clipboard from './components/Clipboard.react';
25+
import Clipboard from './components/Clipboard.react';;
26+
import ToolTip from './components/ToolTip.react';
2627

2728
import 'react-dates/lib/css/_datepicker.css';
2829
import './components/css/[email protected]';
@@ -51,5 +52,6 @@ export {
5152
Store,
5253
LogoutButton,
5354
Download,
54-
Clipboard
55+
Clipboard,
56+
ToolTip
5557
};

0 commit comments

Comments
 (0)