Skip to content

Commit

Permalink
fix(styles): add styles for shadow dom
Browse files Browse the repository at this point in the history
fix #597
  • Loading branch information
Шляпкин Григорий Владимирович authored and roggervalf committed Nov 22, 2020
1 parent c11841c commit 00d1539
Show file tree
Hide file tree
Showing 2 changed files with 31 additions and 2 deletions.
2 changes: 1 addition & 1 deletion rollup.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export default {
plugins: [simplevars(), nested()],
modules: true
}),
sass({ insert: true }),
sass({ insert: false }),
url(),
svgr(),
babel({
Expand Down
31 changes: 30 additions & 1 deletion src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import nodeListToArray from './utils/nodeListToArray';
import { generateUUID } from './utils/uuid';

/* CSS */
import './index.scss';
import baseCss from './index.scss';
import { generateTooltipStyle } from './decorators/styler';

@staticMethods
Expand Down Expand Up @@ -146,6 +146,7 @@ class ReactTooltip extends React.Component {

this.bindListener(); // Bind listener for tooltip
this.bindWindowEvents(resizeHide); // Bind global event for static method
this.injectStyles(); // Inject styles for each DOM root having tooltip.
}

static getDerivedStateFromProps(nextProps, prevState) {
Expand Down Expand Up @@ -173,6 +174,34 @@ class ReactTooltip extends React.Component {
this.unbindWindowEvents();
}

/* Look for the closest DOM root having tooltip and inject styles. */
injectStyles() {
const { id } = this.props;
const targetArray = this.getTargetArray(id);
const domRoots = [];
targetArray.forEach(target => {
let parentNode = target.parentNode;
while (parentNode.parentNode && !parentNode.host) {
parentNode = parentNode.parentNode;
}
const head = parentNode.querySelector('head');
domRoots.push(head || parentNode);
});
if (domRoots.length) {
const style = document.createElement('style');
style.textContent = baseCss;
style.setAttribute('data-react-tooltip', 'true');
domRoots
.filter((item, idx, src) => src.indexOf(item) === idx)
.forEach(domRoot => {
// Prevent styles duplication.
if (!domRoot.querySelector('style[data-react-tooltip]')) {
domRoot.appendChild(style);
}
});
}
}

/**
* Return if the mouse is on the tooltip.
* @returns {boolean} true - mouse is on the tooltip
Expand Down

0 comments on commit 00d1539

Please sign in to comment.