diff --git a/.eslintrc b/.eslintrc index e66aa3fb..10bb5da5 100644 --- a/.eslintrc +++ b/.eslintrc @@ -47,6 +47,7 @@ "comma-dangle": ["error", "never"], "semi": ["error", "always"], "object-curly-spacing": ["error", "always"], - "quote-props": ["error", "consistent"] + "quote-props": ["error", "consistent"], + "no-var": ["error"] } } diff --git a/package-lock.json b/package-lock.json index 801ce0e6..b96a5a12 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2278,16 +2278,6 @@ "integrity": "sha1-rglCYAspkS8NKxTsYMRejzMLYRA=", "dev": true }, - "aphrodite-jss": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/aphrodite-jss/-/aphrodite-jss-2.1.0.tgz", - "integrity": "sha512-25gINvLunuuVbegcnkLTXcCGKN/xeuVSW+Gl5elV5DhUeT+ueIpTghdyjaXmpiklzrQjXKZGSWbic+33DM+Q0A==", - "requires": { - "jss": "^8.1.0", - "jss-preset-default": "^3.0.0", - "murmurhash-js": "^1.0.0" - } - }, "application-config": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/application-config/-/application-config-0.1.2.tgz", @@ -5480,14 +5470,6 @@ } } }, - "css-vendor": { - "version": "0.3.8", - "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-0.3.8.tgz", - "integrity": "sha1-ZCHP0wNM5mT+dnOXL9ARn8KJQfo=", - "requires": { - "is-in-browser": "^1.0.2" - } - }, "css-what": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.2.1.tgz", @@ -6323,6 +6305,14 @@ "object.values": "^1.0.4", "prop-types": "^15.5.10", "uuid": "^3.0.1" + }, + "dependencies": { + "uuid": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz", + "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==", + "dev": true + } } }, "enzyme-adapter-react-16": { @@ -8250,15 +8240,6 @@ } } }, - "formatio": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/formatio/-/formatio-1.1.1.tgz", - "integrity": "sha1-XtPM1jZVEJc4NGXZlhmRAOhhYek=", - "dev": true, - "requires": { - "samsam": "~1.1" - } - }, "fragment-cache": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz", @@ -10467,11 +10448,6 @@ "integrity": "sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==", "dev": true }, - "is-in-browser": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz", - "integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU=" - }, "is-integer": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/is-integer/-/is-integer-1.0.7.tgz", @@ -11335,6 +11311,14 @@ "tough-cookie": "~2.5.0", "tunnel-agent": "^0.6.0", "uuid": "^3.3.2" + }, + "dependencies": { + "uuid": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz", + "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==", + "dev": true + } } }, "source-map": { @@ -12017,6 +12001,14 @@ "tough-cookie": "~2.5.0", "tunnel-agent": "^0.6.0", "uuid": "^3.3.2" + }, + "dependencies": { + "uuid": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz", + "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==", + "dev": true + } } }, "source-map": { @@ -12144,88 +12136,6 @@ } } }, - "jss": { - "version": "8.1.0", - "resolved": "https://registry.npmjs.org/jss/-/jss-8.1.0.tgz", - "integrity": "sha512-NZ4CNAoPaPlM2rqHxPG5uGQbQEFZ9n1PITn0+wGIdAk2ZtA/F6el0SphLHf8So1Sx6N34hnVFFIuc32/hdsEzw==", - "requires": { - "is-in-browser": "^1.0.2", - "warning": "^3.0.0" - } - }, - "jss-camel-case": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/jss-camel-case/-/jss-camel-case-5.0.0.tgz", - "integrity": "sha512-vz11ip5EIlGuevtlUo9xIgiuD+it4Ebbb0+Y4o0A4oA8eOWY4aY7ihi/L7WvkQ54xnGOjUvLZ6nm2VYch2ufYg==" - }, - "jss-compose": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/jss-compose/-/jss-compose-4.0.0.tgz", - "integrity": "sha512-VnsEziD2Lwrfwp10wx39FNybRLW5+RX/E2qQAXPAMbS+nHc0Jf2dC6ZiCfn5FaBGrpzLfIZ9MalTJDx4CQoMAQ==", - "requires": { - "warning": "^3.0.0" - } - }, - "jss-default-unit": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/jss-default-unit/-/jss-default-unit-7.0.0.tgz", - "integrity": "sha512-U1Oi1h45vFRuISr+g1DQ3Oua7CkNKNs47fTdiT/lHkuBMc6BBDUbPv9IbPPhk9gsEaX45Iy9TX8CAuaHLPCfEA==" - }, - "jss-expand": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/jss-expand/-/jss-expand-4.0.1.tgz", - "integrity": "sha512-LRIMXXChAOgnhwSqYLJg8MS6dI98bf/sg52pAg04pbjOAtjfzyS0JTnQAiyk3PxqR3nKFR/Yv44ahpIpkdcxVA==" - }, - "jss-extend": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/jss-extend/-/jss-extend-5.0.0.tgz", - "integrity": "sha512-fUp+9KipbdmzSfTxNHoT3mrFnE7fYn7EyHg3LTUexfpWrwj5Afkwb3iCfYV7GYCpg9OKDsqc18atwjHvSPWWKg==", - "requires": { - "warning": "^3.0.0" - } - }, - "jss-global": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/jss-global/-/jss-global-2.0.0.tgz", - "integrity": "sha512-/FSOMp4lF/vg47T/w8kKvL9tu7ka9am8N4izS63W81Qlay9hAq6xe9RxrPxygLpnn4KEb8LNbkKRoUv4SJfQsQ==" - }, - "jss-nested": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/jss-nested/-/jss-nested-5.0.0.tgz", - "integrity": "sha512-9Molau+XVpSc6QEco3EC5yXmzeGMc5ZVII8+qy6jD6bvu6Y9mpfGoJ00LalR/n7xr/LC7Cxgs44UQQlLzumMBg==", - "requires": { - "warning": "^3.0.0" - } - }, - "jss-preset-default": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/jss-preset-default/-/jss-preset-default-3.0.0.tgz", - "integrity": "sha512-5wRsHsV89XjnQlUVN5jQfo6gcfcirDJmsMJL52HmWoQlV9SA+jhUtt1w3LjcJHe4e3tX4u/To/x3Btmhi+LZtQ==", - "requires": { - "jss-camel-case": "^5.0.0", - "jss-compose": "^4.0.0", - "jss-default-unit": "^7.0.0", - "jss-expand": "^4.0.0", - "jss-extend": "^5.0.0", - "jss-global": "^2.0.0", - "jss-nested": "^5.0.0", - "jss-props-sort": "^5.0.0", - "jss-vendor-prefixer": "^6.0.0" - } - }, - "jss-props-sort": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/jss-props-sort/-/jss-props-sort-5.0.0.tgz", - "integrity": "sha512-xtoVE7BlcPaMN/dzypHPYJn+QiphLPB1skypAOp9zLkOozPbR/x0JVAFdZnd7zqmmjvg+Ma/txjSg0HN/eZsGA==" - }, - "jss-vendor-prefixer": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/jss-vendor-prefixer/-/jss-vendor-prefixer-6.0.0.tgz", - "integrity": "sha512-leqW7B2QLXYsUNR3jsUZP3CkuOYcWXyfF8TSJc4XNxhVCNH7ztK5dcnF8nLoMnxT0w/ajloeJKcch2ty/viCAA==", - "requires": { - "css-vendor": "^0.3.8" - } - }, "jsx-ast-utils": { "version": "2.2.3", "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-2.2.3.tgz", @@ -12782,12 +12692,6 @@ "chalk": "^2.4.2" } }, - "lolex": { - "version": "1.3.2", - "resolved": "https://registry.npmjs.org/lolex/-/lolex-1.3.2.tgz", - "integrity": "sha1-fD2mL/yzDw9agKJWbKJORdigHzE=", - "dev": true - }, "longest": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz", @@ -13612,6 +13516,14 @@ "tough-cookie": "~2.5.0", "tunnel-agent": "^0.6.0", "uuid": "^3.3.2" + }, + "dependencies": { + "uuid": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz", + "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==", + "dev": true + } } }, "source-map": { @@ -13732,11 +13644,6 @@ "strip-indent": "^1.0.0" } }, - "murmurhash-js": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/murmurhash-js/-/murmurhash-js-1.0.0.tgz", - "integrity": "sha1-sGJ44h/Gw3+lMTcysEEry2rhX1E=" - }, "mute-stream": { "version": "0.0.6", "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.6.tgz", @@ -13926,6 +13833,14 @@ "tough-cookie": "~2.5.0", "tunnel-agent": "^0.6.0", "uuid": "^3.3.2" + }, + "dependencies": { + "uuid": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz", + "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==", + "dev": true + } } }, "rimraf": { @@ -14153,6 +14068,14 @@ "tough-cookie": "~2.5.0", "tunnel-agent": "^0.6.0", "uuid": "^3.3.2" + }, + "dependencies": { + "uuid": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz", + "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==", + "dev": true + } } }, "supports-color": { @@ -17360,12 +17283,6 @@ "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "dev": true }, - "samsam": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/samsam/-/samsam-1.1.2.tgz", - "integrity": "sha1-vsEf3IOp/aBjQBIQ5AF2wwJNFWc=", - "dev": true - }, "sane": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/sane/-/sane-4.1.0.tgz", @@ -18112,18 +18029,6 @@ } } }, - "sinon": { - "version": "1.17.7", - "resolved": "https://registry.npmjs.org/sinon/-/sinon-1.17.7.tgz", - "integrity": "sha1-RUKk9JugxFwF6y6d2dID4rjv4L8=", - "dev": true, - "requires": { - "formatio": "1.1.1", - "lolex": "1.3.2", - "samsam": "1.1.2", - "util": ">=0.10.3 <1" - } - }, "sisteransi": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.4.tgz", @@ -20728,12 +20633,6 @@ "object.getownpropertydescriptors": "^2.1.0" } }, - "uuid": { - "version": "3.4.0", - "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz", - "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==", - "dev": true - }, "v8-compile-cache": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.1.0.tgz", @@ -20835,14 +20734,6 @@ "makeerror": "1.0.x" } }, - "warning": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz", - "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=", - "requires": { - "loose-envify": "^1.0.0" - } - }, "watchify": { "version": "3.11.1", "resolved": "https://registry.npmjs.org/watchify/-/watchify-3.11.1.tgz", diff --git a/package.json b/package.json index 26b80d0d..7f9cfe55 100755 --- a/package.json +++ b/package.json @@ -52,7 +52,6 @@ "react-dom": ">=16.0.0" }, "dependencies": { - "aphrodite-jss": "^2.1.0", "prop-types": "^15.7.2" }, "devDependencies": { @@ -118,7 +117,6 @@ "rollup-plugin-eslint": "7.0.0", "rollup-plugin-stylelint": "1.0.0", "semantic-release": "15.1.5", - "sinon": "^1.17.7", "snazzy": "^2.0.1", "standard": "^5.2.2", "uglifyjs": "^2.4.10", diff --git a/src/decorators/styler.js b/src/decorators/styler.js index 7e78ac5a..3a734e67 100755 --- a/src/decorators/styler.js +++ b/src/decorators/styler.js @@ -1,94 +1,99 @@ -import { StyleSheet } from "aphrodite-jss"; import { getDefaultPopupColors } from "./defaultStyles"; /** - * Generates the tooltip style based on the element-specified "data-type" property. +* Generates the specific tooltip style for use on render. +*/ +export function generateTooltipStyle(uuid, customColors, type, hasBorder) { + return generateStyle(uuid, getPopupColors(customColors, type, hasBorder)); +} + +/** + * Generates the tooltip style rules based on the element-specified "data-type" property. */ -export function getTooltipStyle(colors) { +function generateStyle(uuid, colors) { 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, + return ` + .${uuid} { + color: ${textColor}; + background: ${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", - "bottom": "-6px", - "left": "50%", - "margin-left": "-8px", - "border-top-color": arrowColor, - "border-top-style": "solid", - "border-top-width": "6px" - }, + .${uuid}.place-top { + margin-top: -10px; + } + .${uuid}.place-top::before { + border-top: 8px solid ${borderColor}; + } + .${uuid}.place-top::after { + border-left: 8px solid transparent; + border-right: 8px solid transparent; + bottom: -6px; + left: 50%; + margin-left: -8px; + border-top-color: ${arrowColor}; + border-top-style: solid; + border-top-width: 6px; + } - "&.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", - "top": "-6px", - "left": "50%", - "margin-left": "-8px", - "border-bottom-color": arrowColor, - "border-bottom-style": "solid", - "border-bottom-width": "6px" - }, + .${uuid}.place-bottom { + margin-top: 10px; + } + .${uuid}.place-bottom::before { + border-bottom: 8px solid ${borderColor}; + } + .${uuid}.place-bottom::after { + border-left: 8px solid transparent; + border-right: 8px solid transparent; + top: -6px; + left: 50%; + margin-left: -8px; + border-bottom-color: ${arrowColor}; + border-bottom-style: solid; + border-bottom-width: 6px; + } - "&.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", - "right": "-6px", - "top": "50%", - "margin-top": "-4px", - "border-left-color": arrowColor, - "border-left-style": "solid", - "border-left-width": "6px" - }, + .${uuid}.place-left { + margin-left: -10px; + } + .${uuid}.place-left::before { + border-left: 8px solid ${borderColor}; + } + .${uuid}.place-left::after { + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; + right: -6px; + top: 50%; + margin-top: -4px; + border-left-color: ${arrowColor}; + border-left-style: solid; + border-left-width: 6px; + } - "&.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", - "left": "-6px", - "top": "50%", - "margin-top": "-4px", - "border-right-color": arrowColor, - "border-right-style": "solid", - "border-right-width": "6px" - } + .${uuid}.place-right { + margin-left: 10px; + } + .${uuid}.place-right::before { + border-right: 8px solid ${borderColor}; + } + .${uuid}.place-right::after { + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; + left: -6px; + top: 50%; + margin-top: -4px; + border-right-color: ${arrowColor}; + border-right-style: solid; + border-right-width: 6px; } - }); + `; } -// Get popup colors -export function getPopupColors(customColors, type, hasBorder) { +function getPopupColors(customColors, type, hasBorder) { const textColor = customColors.text; const backgroundColor = customColors.background; const borderColor = customColors.border; diff --git a/src/index.js b/src/index.js index 46d38183..2e6be87c 100755 --- a/src/index.js +++ b/src/index.js @@ -16,11 +16,11 @@ import getPosition from "./utils/getPosition"; import getTipContent from "./utils/getTipContent"; import { parseAria } from "./utils/aria"; import nodeListToArray from "./utils/nodeListToArray"; +import { generateUUID } from "./utils/uuid"; /* CSS */ import "./index.scss"; -import { css } from "aphrodite-jss"; -import { getTooltipStyle, getPopupColors } from "./decorators/styler"; +import { generateTooltipStyle } from "./decorators/styler"; @staticMethods @windowListener @@ -32,6 +32,7 @@ import { getTooltipStyle, getPopupColors } from "./decorators/styler"; class ReactTooltip extends React.Component { static get propTypes() { return { + uuid: PropTypes.string, children: PropTypes.any, place: PropTypes.string, type: PropTypes.string, @@ -86,6 +87,7 @@ class ReactTooltip extends React.Component { super(props); this.state = { + uuid: generateUUID(), place: props.place || "top", // Direction of tooltip desiredPlace: props.place || "top", type: "dark", // Color theme of tooltip @@ -393,13 +395,13 @@ class ReactTooltip extends React.Component { // To prevent previously created timers from triggering this.clearTimer(); - var target = e.currentTarget; + const target = e.currentTarget; - var reshowDelay = this.state.show ? (target.getAttribute("data-delay-update") || this.props.delayUpdate) : 0; + const reshowDelay = this.state.show ? (target.getAttribute("data-delay-update") || this.props.delayUpdate) : 0; - var self = this; + const self = this; - var updateState = function updateState() { + const updateState = function updateState() { self.setState({ originTooltip: originTooltip, isMultiline: isMultiline, @@ -670,11 +672,13 @@ class ReactTooltip extends React.Component { render() { const { extraClass, html, ariaProps, disable } = this.state; - const placeholder = this.getTooltipContent(); - const isEmptyTip = this.isEmptyTip(placeholder); + const content = this.getTooltipContent(); + const isEmptyTip = this.isEmptyTip(content); + const style = generateTooltipStyle(this.state.uuid, this.state.customColors, this.state.type, this.state.border); const tooltipClass = "__react_component_tooltip" + + ` ${this.state.uuid}` + (this.state.show && !disable && !isEmptyTip ? " show" : "") + (this.state.border ? " border" : "") + ` place-${this.state.place}` + // top, bottom, left, right @@ -682,8 +686,6 @@ class ReactTooltip extends React.Component { (this.props.delayUpdate ? " allow_hover" : "") + (this.props.clickable ? " allow_click" : ""); - const tooltipStyle = getTooltipStyle(getPopupColors(this.state.customColors, this.state.type, this.state.border)); - let Wrapper = this.props.wrapper; if (ReactTooltip.supportedWrappers.indexOf(Wrapper) < 0) { @@ -693,26 +695,29 @@ class ReactTooltip extends React.Component { const wrapperClassName = [tooltipClass, extraClass].filter(Boolean).join(" "); if (html) { + const htmlContent = `${content}\n`; + return ( (this.tooltipRef = ref)} {...ariaProps} data-id="tooltip" - dangerouslySetInnerHTML={{ __html: placeholder }} + dangerouslySetInnerHTML={{ __html: htmlContent }} /> ); } else { return ( (this.tooltipRef = ref)} data-id="tooltip" > - {placeholder} +