Skip to content

Commit a3228cf

Browse files
kebabmasterkebabmaster
committed
Popup Styling - default (type) & custom working
1 parent 2e4a64f commit a3228cf

File tree

3 files changed

+74
-72
lines changed

3 files changed

+74
-72
lines changed

‎src/decorators/defaultStyles.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/**
2+
* Default pop-up style values (text color, background color).
3+
*/
4+
const defaultColors = {
5+
'info': {'textColor': '#fff', 'backgroundColor': '#337AB7', 'arrowColor': '#337AB7'} // TODO: cover all classes
6+
}
7+
8+
export function getDefaultPopupColors (type) { // TODO: gotta have a switch there looking at the classes originally provided by the plugin
9+
return defaultColors[type]
10+
}

‎src/decorators/styler.js

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

710
return StyleSheet.create({
8-
911
'__react_component_tooltip': {
1012
'color': textColor,
1113
'backgroundColor': backgroundColor,
12-
'border': '6px solid ' + borderColor,
13-
1414

15-
// TODO: JUST TEST WORKING EXAMPLE - REMOVE WHEN DONE
16-
// '&.place-top' : {
17-
// 'width' : '5000px !important'
18-
// },
19-
// '&.place-top' : {
20-
// 'width' : '6000px !important'
21-
// },
22-
// // TODO: JUST TEST
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+
},
2328

24-
'&.place-top': {
25-
'marginTop': '-10px',
26-
'backgroundColor': backgroundColor,
27-
'border': '1px solid' + borderColor,
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+
},
2842

29-
'&:before': {
30-
'borderLeft': '10px solid transparent',
31-
'borderRight': '10px solid transparent',
32-
'bottom': '-8px',
33-
'left': '50%',
34-
'marginLeft': '-10px'
35-
},
36-
'&:after': {
37-
'borderLeft': '8px solid transparent',
38-
'borderRight': '8px solid transparent',
39-
'bottom': '-6px',
40-
'left': '50%',
41-
'marginLeft': '-8px'
42-
},
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'
4355
},
4456

45-
// TODO: WHERE DOES IT GO??? GOTTA BE SOMEWHERE! - check the existing example: https://react-tooltip.netlify.com/
46-
':after': {
47-
'textAlign': 'right !important', // TODO: DEL DEBUG
48-
'borderTop': '6px solid violet !important', //'6px solid ' + backgroundColor, // TODO: REVERT TO SET COLOUR WHEN DONE DEV
49-
'fontWeight': 'bold' // TODO: DEL DEBUG
57+
'&.place-right' : {
58+
'margin-left': '10px'
5059
},
51-
':before': {
52-
'textAlign': 'right !important', // TODO: DEL DEBUG
53-
'borderTop': '8px solid violet !important', //'8px solid ' + borderColor, // TODO: REVERT TO SET COLOUR WHEN DONE DEV
54-
'fontWeight': 'bold' // TODO: DEL DEBUG
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'
5569
}
56-
57-
// '.place-bottom': {
58-
// 'backgroundColor': backgroundColor,
59-
// 'border': '1px solid' + borderColor,
60-
// ':after': {
61-
// 'borderBottom': '6px solid ' + backgroundColor
62-
// },
63-
// ':before': {
64-
// 'borderBottom': '8px solid ' + borderColor
65-
// }
66-
// },
67-
// '.place-left': {
68-
// 'backgroundColor': backgroundColor,
69-
// 'border': '1px solid' + borderColor,
70-
// ':after': {
71-
// 'borderLeft': '6px solid ' + backgroundColor
72-
// },
73-
// ':before': {
74-
// 'borderLeft': '8px solid ' + borderColor
75-
// }
76-
// },
77-
// '.place-right': {
78-
// 'backgroundColor': backgroundColor,
79-
// 'border': '1px solid' + borderColor,
80-
// ':after': {
81-
// 'borderRight': '6px solid ' + backgroundColor
82-
// },
83-
// ':before': {
84-
// 'borderRight': '8px solid ' + borderColor
85-
// }
86-
// }
8770
}
8871

8972
})
90-
}
73+
}

‎src/index.js

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import nodeListToArray from './utils/nodeListToArray'
2222
import cssStyle from './style'
2323
import { css } from 'aphrodite-jss'
2424
import { getTooltipStyle } from './decorators/styler'
25+
import { getDefaultPopupColors } from './decorators/defaultStyles'
2526

2627
@staticMethods
2728
@windowListener
@@ -546,9 +547,11 @@ class ReactTooltip extends React.Component {
546547
}
547548

548549
render () {
550+
549551
const {extraClass, html, ariaProps, disable} = this.state
550552
const placeholder = this.getTooltipContent()
551553
const isEmptyTip = this.isEmptyTip(placeholder)
554+
552555
let tooltipClass = classname(
553556
'__react_component_tooltip',
554557
{'show': this.state.show && !disable && !isEmptyTip},
@@ -562,7 +565,13 @@ class ReactTooltip extends React.Component {
562565
{'allow_click': this.props.clickable}
563566
)
564567

565-
let tooltipStyle = getTooltipStyle('white', 'black', 'red')
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+
574+
let tooltipStyle = getTooltipStyle(colors)
566575

567576
let Wrapper = this.props.wrapper
568577
if (ReactTooltip.supportedWrappers.indexOf(Wrapper) < 0) {

0 commit comments

Comments
 (0)