Border Colour, Refactoring, Tests, Makefile

Author: kebabmaster

Makefile

@@ -5,7 +5,6 @@ STANDALONE   = standalone
 SRC          = src
 DIST         = dist
 TEST         = test/*.spec.js
-MOCHA_OPTS   = --compilers js:babel-core/register --require test/setup.js -b --timeout 20000 --reporter spec
 
 lint:
 	@echo Linting...
@@ -51,11 +50,11 @@ deployJS:
 
 unitTest:
 	@echo Unit testing..
-	@$(NODE_BIN)/mocha --require @babel/register 'test/*.spec.js'	
+	@$(NODE_BIN)/mocha --require @babel/register $(TEST)	
 
 deploy: lint
 	@echo Deploy...
-	@make unitTest
+	@make unitTest 
 	@rm -rf dist && mkdir dist
 	@rm -rf $(EXAMPLE_DIST) && mkdir -p $(EXAMPLE_DIST)
 	@make deployJS
@@ -64,5 +63,5 @@ deploy: lint
 	@make genStand
 	@echo success!
 
-.PHONY: lint convertCSS genStand devJS devCSS devServer dev deployExample deployJS deployCSS deploy
+.PHONY: lint convertCSS genStand devJS devCSS devServer dev unitTest deployExample deployJS deployCSS deploy
 

README.md

@@ -70,8 +70,9 @@ className	|   data-class  |  String  |   | extra custom class, can use !importan
  delayUpdate	|   data-delay-update |  Number  |   | `<p data-tip="tooltip" data-delay-update='1000'></p>` or `<ReactTooltip delayUpdate={1000} />` Sets a delay in calling getContent if the tooltip is already shown and you mouse over another target  
  insecure | null | Bool | true, false | Whether to inject the style header into the page dynamically (violates CSP style-src but is a convenient default)
  border  |   data-border  |  Bool  |  true, false | Add one pixel white border
- textColor | data-text-color | String | e.g. red | Popup text color - required with the `backgroundColor` value
- backgroundColor | data-background-color | String | e.g. yellow | Popup background color - required with the `textColor` value
+ textColor | data-text-color | String | e.g. red | Popup text color
+ backgroundColor | data-background-color | String | e.g. yellow | Popup background color
+ borderColor | data-border-color | String | e.g. green | Popup border color - enabled by the `border` value
  arrowColor | data-arrow-color | String | e.g. #fff | Popup arrow color - if not specified, will use the `backgroundColor` value
  getContent | null | Func or Array | (dataTip) => {}, [(dataTip) => {}, Interval] | Generate the tip content dynamically
  afterShow | null | Func | (evt) => {} | Function that will be called after tooltip show, with event that triggered show

package-lock.json

@@ -3,8 +3,8 @@
   "version": "0.0.0-semantic-release",
   "description": "react tooltip component",
   "main": "dist/index.js",
-  "module": "dist/index.es.js",
-  "jsnext:main": "dist/index.es.js",
+  "module": "dist/index.js",
+  "jsnext:main": "dist/index.ex.js",
   "engines": {
     "node": ">=8",
     "npm": ">=5"
@@ -66,6 +66,7 @@
   "dependencies": {
     "aphrodite-jss": "^2.1.0",
     "classnames": "^2.2.6",
+    "lodash": "^4.17.15",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {

package.json

@@ -1,15 +1,17 @@
+import _ from 'lodash'
+
 /**
  * Default pop-up style values (text color, background color).
  */
 const defaultColors = {
-  'dark': {'textColor': '#fff', 'backgroundColor': '#222', 'arrowColor': '#222'},
-  'success': {'textColor': '#fff', 'backgroundColor': '#8DC572', 'arrowColor': '#8DC572'},
-  'warning': {'textColor': '#fff', 'backgroundColor': '#F0AD4E', 'arrowColor': '#F0AD4E'},
-  'error': {'textColor': '#fff', 'backgroundColor': '#BE6464', 'arrowColor': '#BE6464'},
-  'info': {'textColor': '#fff', 'backgroundColor': '#337AB7', 'arrowColor': '#337AB7'},
-  'light': {'textColor': '#222', 'backgroundColor': '#fff', 'arrowColor': '#fff'}
+  'dark': {'text': '#fff', 'background': '#222', 'border': 'transparent', 'arrow': '#222'},
+  'success': {'text': '#fff', 'background': '#8DC572', 'border': 'transparent', 'arrow': '#8DC572'},
+  'warning': {'text': '#fff', 'background': '#F0AD4E', 'border': 'transparent', 'arrow': '#F0AD4E'},
+  'error': {'text': '#fff', 'background': '#BE6464', 'border': 'transparent', 'arrow': '#BE6464'},
+  'info': {'text': '#fff', 'background': '#337AB7', 'border': 'transparent', 'arrow': '#337AB7'},
+  'light': {'text': '#222', 'background': '#fff', 'border': 'transparent', 'arrow': '#fff'}
 }
 
-export function getDefaultPopupColors (type) { // TODO: gotta have a switch there looking at the classes originally provided by the plugin
-  return defaultColors[type]
+export function getDefaultPopupColors (type) {
+  return _.cloneDeep(defaultColors[type])
 }

src/decorators/defaultStyles.js

@@ -1,20 +1,27 @@
 import { StyleSheet } from 'aphrodite-jss'
+import { getDefaultPopupColors } from './defaultStyles'
+
 /**
  * Generates the tooltip style based on the element-specified "data-type" property.
  */
 export function getTooltipStyle (colors) {
-  const textColor = colors.textColor
-  const backgroundColor = colors.backgroundColor
-  const arrowColor = colors.arrowColor
+  const textColor = colors.text
+  const backgroundColor = colors.background
+  const borderColor = colors.border
+  const arrowColor = colors.arrow
 
   return StyleSheet.create({
     '__react_component_tooltip': {
       'color': textColor,
       'backgroundColor': backgroundColor,
+      'border': '1px solid ' + borderColor,
 
       '&.place-top': {
         'margin-top': '-10px'
       },
+      '&.place-top:before': {
+        'border-top': '8px solid ' + borderColor
+      },
       '&.place-top:after': {
         'border-left': '8px solid transparent',
         'border-right': '8px solid transparent',
@@ -29,6 +36,9 @@ export function getTooltipStyle (colors) {
       '&.place-bottom': {
         'margin-top': '10px'
       },
+      '&.place-bottom:before': {
+        'border-bottom': '8px solid ' + borderColor
+      },
       '&.place-bottom:after': {
         'border-left': '8px solid transparent',
         'border-right': '8px solid transparent',
@@ -43,6 +53,9 @@ export function getTooltipStyle (colors) {
       '&.place-left': {
         'margin-left': '-10px'
       },
+      '&.place-left:before': {
+        'border-left': '8px solid ' + borderColor
+      },
       '&.place-left:after': {
         'border-top': '5px solid transparent',
         'border-bottom': '5px solid transparent',
@@ -57,6 +70,9 @@ export function getTooltipStyle (colors) {
       '&.place-right': {
         'margin-left': '10px'
       },
+      '&.place-right:before': {
+        'border-right': '8px solid ' + borderColor
+      },
       '&.place-right:after': {
         'border-top': '5px solid transparent',
         'border-bottom': '5px solid transparent',
@@ -70,3 +86,39 @@ export function getTooltipStyle (colors) {
     }
   })
 }
+
+/**
+* Get popup colors
+*/
+export function getPopupColors (customColors, type, hasBorder) {
+  let colors
+
+  const textColor = customColors.text
+  const backgroundColor = customColors.background
+  const borderColor = customColors.border
+  const arrowColor = customColors.arrow ? customColors.arrow : customColors.background
+
+  colors = getDefaultPopupColors(type)
+
+  if (textColor) {
+    colors.text = textColor
+  }
+
+  if (backgroundColor) {
+    colors.background = backgroundColor
+  }
+
+  if (hasBorder) {
+    if (borderColor) {
+      colors.border = borderColor
+    } else {
+      colors.border = 'white'
+    }
+  }
+
+  if (arrowColor) {
+    colors.arrow = arrowColor
+  }
+
+  return colors
+}

src/decorators/styler.js

@@ -1,6 +1,3 @@
-/* eslint no-unused-vars: 0 */  // --> OFF
-/* eslint no-undef: 0 */  // --> OFF
-
 'use strict'
 
 import React from 'react'
@@ -24,8 +21,7 @@ import nodeListToArray from './utils/nodeListToArray'
 /* CSS */
 import cssStyle from './style'
 import { css } from 'aphrodite-jss'
-import { getTooltipStyle } from './decorators/styler'
-import { getDefaultPopupColors } from './decorators/defaultStyles'
+import { getTooltipStyle, getPopupColors } from './decorators/styler'
 
 @staticMethods
 @windowListener
@@ -45,6 +41,7 @@ class ReactTooltip extends React.Component {
     border: PropTypes.bool,
     textColor: PropTypes.string,
     backgroundColor: PropTypes.string,
+    borderColor: PropTypes.string,
     arrowColor: PropTypes.string,
     insecure: PropTypes.bool,
     class: PropTypes.string,
@@ -83,13 +80,15 @@ class ReactTooltip extends React.Component {
 
   constructor (props) {
     super(props)
+
     this.state = {
       place: props.place || 'top', // Direction of tooltip
       desiredPlace: props.place || 'top',
       type: 'dark', // Color theme of tooltip
       effect: 'float', // float or fixed
       show: false,
       border: false,
+      customColors: {},
       offset: {},
       extraClass: '',
       html: false,
@@ -196,12 +195,14 @@ class ReactTooltip extends React.Component {
    */
   getTargetArray (id) {
     let targetArray
+
     if (!id) {
       targetArray = document.querySelectorAll('[data-tip]:not([data-for])')
     } else {
       const escaped = id.replace(/\\/g, '\\\\').replace(/"/g, '\\"')
       targetArray = document.querySelectorAll(`[data-tip][data-for="${escaped}"]`)
     }
+
     // targetArray is a NodeList, convert it to a real array
     return nodeListToArray(targetArray)
   }
@@ -345,6 +346,12 @@ class ReactTooltip extends React.Component {
         desiredPlace: desiredPlace,
         place: place,
         type: target.getAttribute('data-type') || self.props.type || 'dark',
+        customColors: {
+          text: target.getAttribute('data-text-color') || self.props.textColor || null,
+          background: target.getAttribute('data-background-color') || self.props.backgroundColor || null,
+          border: target.getAttribute('data-border-color') || self.props.borderColor || null,
+          arrow: target.getAttribute('data-arrow-color') || self.props.arrowColor || null
+        },
         effect: effect,
         offset: offset,
         html: target.getAttribute('data-html') ? target.getAttribute('data-html') === 'true' : self.props.html || false,
@@ -356,7 +363,9 @@ class ReactTooltip extends React.Component {
         disable: target.getAttribute('data-tip-disable') ? target.getAttribute('data-tip-disable') === 'true' : self.props.disable || false,
         currentTarget: target
       }, () => {
-        if (scrollHide) self.addScrollListener(self.state.currentTarget)
+        if (scrollHide) {
+          self.addScrollListener(self.state.currentTarget)
+        }
         self.updateTooltip(e)
 
         if (getContent && Array.isArray(getContent)) {
@@ -408,7 +417,9 @@ class ReactTooltip extends React.Component {
           show: true
         }, () => {
           this.updatePosition()
-          if (isInvisible && afterShow) afterShow(e)
+          if (isInvisible && afterShow) {
+            afterShow(e)
+          }
         })
       }
     }
@@ -471,7 +482,9 @@ class ReactTooltip extends React.Component {
         show: false
       }, () => {
         this.removeScrollListener()
-        if (isVisible && afterHide) afterHide(e)
+        if (isVisible && afterHide) {
+          afterHide(e)
+        }
       })
     }
 
@@ -518,30 +531,12 @@ class ReactTooltip extends React.Component {
         this.updatePosition()
       })
     }
+
     // Set tooltip position
     node.style.left = result.position.left + 'px'
     node.style.top = result.position.top + 'px'
   }
 
-  /**
-  * Determine popup colors
-  */
-  setPopupColors () {
-    let colors
-
-    let textColor = this.props.textColor
-    let backgroundColor = this.props.backgroundColor
-    let arrowColor = this.props.arrowColor ? this.props.arrowColor : this.props.backgroundColor
-
-    if (textColor && backgroundColor) {
-      colors = {'textColor': textColor, 'backgroundColor': backgroundColor, 'arrowColor': arrowColor}
-    } else {
-      colors = getDefaultPopupColors(this.state.type)
-    }
-
-    return colors
-  }
-
   /**
    * Set style tag in header
    * in this way we can insert default css
@@ -571,6 +566,11 @@ class ReactTooltip extends React.Component {
     clearInterval(this.intervalUpdateContent)
   }
 
+  hasCustomColors () {
+    return Boolean((Object.keys(this.state.customColors).find(color => color !== 'border' && this.state.customColors[color]) ||
+      (this.state.border && this.state.customColors['border'])))
+  }
+
   render () {
     const {extraClass, html, ariaProps, disable} = this.state
     const placeholder = this.getTooltipContent()
@@ -584,13 +584,12 @@ class ReactTooltip extends React.Component {
       {'place-bottom': this.state.place === 'bottom'},
       {'place-left': this.state.place === 'left'},
       {'place-right': this.state.place === 'right'},
-      {['type-' + (this.props.textColor && this.props.backgroundColor ? 'custom' : this.state.type)]: this.state.type},
+      {['type-' + (this.hasCustomColors() ? 'custom' : this.state.type)]: this.state.type},
       {'allow_hover': this.props.delayUpdate},
       {'allow_click': this.props.clickable}
     )
 
-    const colors = this.setPopupColors()
-    const tooltipStyle = getTooltipStyle(colors)
+    const tooltipStyle = getTooltipStyle(getPopupColors(this.state.customColors, this.state.type, this.state.border))
 
     let Wrapper = this.props.wrapper
     if (ReactTooltip.supportedWrappers.indexOf(Wrapper) < 0) {