Skip to content

Commit 3d80a8f

Browse files
kebabmasterkebabmaster
committed
Popup Styling - implemented; Example Page - updated with custom colouring examples
1 parent a3228cf commit 3d80a8f

File tree

7 files changed

+260
-175
lines changed

7 files changed

+260
-175
lines changed

‎example/src/index.js

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -220,6 +220,39 @@ class Test extends React.Component {
220220
</div>
221221
</pre>
222222
</div>
223+
224+
225+
<div className="section">
226+
<h4 className='title'>Custom colors</h4>
227+
<p className="sub-title"></p>
228+
<div className="example-jsx">
229+
<div className="side">
230+
<a data-for='custom-color-no-arrow' data-tip='Lovely colors!'>ㅇㅅㅇ</a>
231+
<ReactTooltip id='custom-color-no-arrow' className='custom-color-no-arrow' delayHide={1000} textColor='#5F4B8BFF' backgroundColor='#E69A8DFF' effect='solid'/>
232+
</div>
233+
<div className="side">
234+
<a data-for='custom-color' data-tip='That is one weird arrow!'>V(^-^)V</a>
235+
<ReactTooltip id='custom-color' className='custom-color' place='right' textColor='#5F4B8BFF' backgroundColor='#E69A8DFF' arrowColor='red'/>
236+
</div>
237+
</div>
238+
<br />
239+
<pre className='example-pre'>
240+
<div>
241+
<p>{"<a data-for='custom-color-no-arrow' data-tip='Lovely colors!'>ㅇㅅㅇ</a>\n" +
242+
"<ReactTooltip id='custom-color-no-arrow' className='custom-color-no-arrow' delayHide={1000}\n" +
243+
"textColor='#5F4B8BFF' backgroundColor='#E69A8DFF' effect='solid'/>"}
244+
</p>
245+
</div>
246+
<div>
247+
<p>{"<a data-for='custom-color' data-tip='That is one weird arrow!'>V(^-^)V</a>\n" +
248+
"<ReactTooltip id='custom-color' className='custom-color' place='right'\n" +
249+
"textColor='#5F4B8BFF' backgroundColor='#E69A8DFF' arrowColor='red'/>"}
250+
</p>
251+
</div>
252+
</pre>
253+
</div>
254+
255+
223256
<div className="section">
224257
<h4 className='title'>Update tip content over time</h4>
225258
<p className="sub-title"></p>

‎package.json

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,6 @@
2525
"standalone/",
2626
"src/style.js",
2727
"src/style.css",
28-
"src/components",
29-
"src/index.js",
30-
"src/decorators/styler.js",
3128
"example/"
3229
]
3330
},

‎src/decorators/defaultStyles.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,12 @@
22
* Default pop-up style values (text color, background color).
33
*/
44
const defaultColors = {
5-
'info': {'textColor': '#fff', 'backgroundColor': '#337AB7', 'arrowColor': '#337AB7'} // TODO: cover all classes
5+
'dark': {'textColor': '#fff', 'backgroundColor': '#222', 'arrowColor': '#222'},
6+
'success': {'textColor': '#fff', 'backgroundColor': '#8DC572', 'arrowColor': '#8DC572'},
7+
'warning': {'textColor': '#fff', 'backgroundColor': '#F0AD4E', 'arrowColor': '#F0AD4E'},
8+
'error': {'textColor': '#fff', 'backgroundColor': '#BE6464', 'arrowColor': '#BE6464'},
9+
'info': {'textColor': '#fff', 'backgroundColor': '#337AB7', 'arrowColor': '#337AB7'},
10+
'light': {'textColor': '#222', 'backgroundColor': '#fff', 'arrowColor': '#fff'}
611
}
712

813
export function getDefaultPopupColors (type) { // TODO: gotta have a switch there looking at the classes originally provided by the plugin

‎src/decorators/styler.js

Lines changed: 62 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -2,72 +2,71 @@ import { StyleSheet } from 'aphrodite-jss'
22
/**
33
* Generates the tooltip style based on the element-specified "data-type" property.
44
*/
5-
export function getTooltipStyle(colors) {
6-
const textColor = colors.textColor
7-
const backgroundColor = colors.backgroundColor
8-
const arrowColor = colors.arrowColor
5+
export function getTooltipStyle (colors) {
6+
const textColor = colors.textColor
7+
const backgroundColor = colors.backgroundColor
8+
const arrowColor = colors.arrowColor
99

10-
return StyleSheet.create({
11-
'__react_component_tooltip': {
12-
'color': textColor,
13-
'backgroundColor': backgroundColor,
10+
return StyleSheet.create({
11+
'__react_component_tooltip': {
12+
'color': textColor,
13+
'backgroundColor': backgroundColor,
1414

15-
'&.place-top' : {
16-
'margin-top': '-10px'
17-
},
18-
'&.place-top:after' : {
19-
'border-left' : '8px solid transparent',
20-
'border-right' : '8px solid transparent',
21-
'bottom' : '-6px',
22-
'left' : '50%',
23-
'margin-left' : '-8px',
24-
'border-top-color' : arrowColor,
25-
'border-top-style' : 'solid',
26-
'border-top-width' : '6px'
27-
},
15+
'&.place-top': {
16+
'margin-top': '-10px'
17+
},
18+
'&.place-top:after': {
19+
'border-left': '8px solid transparent',
20+
'border-right': '8px solid transparent',
21+
'bottom': '-6px',
22+
'left': '50%',
23+
'margin-left': '-8px',
24+
'border-top-color': arrowColor,
25+
'border-top-style': 'solid',
26+
'border-top-width': '6px'
27+
},
2828

29-
'&.place-bottom' : {
30-
'margin-top': '10px'
31-
},
32-
'&.place-bottom:after' : {
33-
'border-left' : '8px solid transparent',
34-
'border-right' : '8px solid transparent',
35-
'top' : '-6px',
36-
'left' : '50%',
37-
'margin-left' : '-8px',
38-
'border-bottom-color' : arrowColor,
39-
'border-bottom-style' : 'solid',
40-
'border-bottom-width' : '6px'
41-
},
29+
'&.place-bottom': {
30+
'margin-top': '10px'
31+
},
32+
'&.place-bottom:after': {
33+
'border-left': '8px solid transparent',
34+
'border-right': '8px solid transparent',
35+
'top': '-6px',
36+
'left': '50%',
37+
'margin-left': '-8px',
38+
'border-bottom-color': arrowColor,
39+
'border-bottom-style': 'solid',
40+
'border-bottom-width': '6px'
41+
},
4242

43-
'&.place-left' : {
44-
'margin-left': '-10px'
45-
},
46-
'&.place-left:after' : {
47-
'border-top' : '5px solid transparent',
48-
'border-bottom' : '5px solid transparent',
49-
'right' : '-6px',
50-
'top' : '50%',
51-
'margin-top' : '-4px',
52-
'border-left-color' : arrowColor,
53-
'border-left-style' : 'solid',
54-
'border-left-width' : '6px'
55-
},
43+
'&.place-left': {
44+
'margin-left': '-10px'
45+
},
46+
'&.place-left:after': {
47+
'border-top': '5px solid transparent',
48+
'border-bottom': '5px solid transparent',
49+
'right': '-6px',
50+
'top': '50%',
51+
'margin-top': '-4px',
52+
'border-left-color': arrowColor,
53+
'border-left-style': 'solid',
54+
'border-left-width': '6px'
55+
},
5656

57-
'&.place-right' : {
58-
'margin-left': '10px'
59-
},
60-
'&.place-right:after' : {
61-
'border-top' : '5px solid transparent',
62-
'border-bottom' : '5px solid transparent',
63-
'left' : '-6px',
64-
'top' : '50%',
65-
'margin-top' : '-4px',
66-
'border-right-color' : arrowColor,
67-
'border-right-style' : 'solid',
68-
'border-right-width' : '6px'
69-
}
70-
}
71-
72-
})
57+
'&.place-right': {
58+
'margin-left': '10px'
59+
},
60+
'&.place-right:after': {
61+
'border-top': '5px solid transparent',
62+
'border-bottom': '5px solid transparent',
63+
'left': '-6px',
64+
'top': '50%',
65+
'margin-top': '-4px',
66+
'border-right-color': arrowColor,
67+
'border-right-style': 'solid',
68+
'border-right-width': '6px'
69+
}
70+
}
71+
})
7372
}

‎src/index.js

Lines changed: 23 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,9 @@ class ReactTooltip extends React.Component {
4040
offset: PropTypes.object,
4141
multiline: PropTypes.bool,
4242
border: PropTypes.bool,
43+
textColor: PropTypes.string,
44+
backgroundColor: PropTypes.string,
45+
arrowColor: PropTypes.string,
4346
insecure: PropTypes.bool,
4447
class: PropTypes.string,
4548
className: PropTypes.string,
@@ -517,6 +520,25 @@ class ReactTooltip extends React.Component {
517520
node.style.top = result.position.top + 'px'
518521
}
519522

523+
/**
524+
* Determine popup colors
525+
*/
526+
setPopupColors () {
527+
let colors
528+
529+
let textColor = this.props.textColor
530+
let backgroundColor = this.props.backgroundColor
531+
let arrowColor = this.props.arrowColor ? this.props.arrowColor : this.props.backgroundColor
532+
533+
if (textColor && backgroundColor) {
534+
colors = {'textColor': textColor, 'backgroundColor': backgroundColor, 'arrowColor': arrowColor}
535+
} else {
536+
colors = getDefaultPopupColors(this.state.type)
537+
}
538+
539+
return colors
540+
}
541+
520542
/**
521543
* Set style tag in header
522544
* in this way we can insert default css
@@ -547,7 +569,6 @@ class ReactTooltip extends React.Component {
547569
}
548570

549571
render () {
550-
551572
const {extraClass, html, ariaProps, disable} = this.state
552573
const placeholder = this.getTooltipContent()
553574
const isEmptyTip = this.isEmptyTip(placeholder)
@@ -565,12 +586,7 @@ class ReactTooltip extends React.Component {
565586
{'allow_click': this.props.clickable}
566587
)
567588

568-
let colors = getDefaultPopupColors(this.state.type) // TODO: accept custom values too
569-
570-
if (!colors) {
571-
colors = {'textColor': this.props.color, 'borderColor': this.props.border, 'arrowColor': this.props.arrow} // TODO: check if works
572-
}
573-
589+
const colors = this.setPopupColors()
574590
let tooltipStyle = getTooltipStyle(colors)
575591

576592
let Wrapper = this.props.wrapper

0 commit comments

Comments
 (0)