All files / helpers shadowDOM.js

100% Statements 15/15
75% Branches 3/4
100% Functions 5/5
100% Lines 14/14
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 361x 1x       12x 8x   2x           2x 2x 1x 1x   1x     2x 2x 2x     2x                
import React from 'react'
import ShadowDOM from 'react-shadow'
 
export default (element) => {
 
  return class ShadowDOMHelper extends React.PureComponent {
    constructor(props) {
      super(props)
      this.state = {
        stylesheet: false
      }
    }
 
    applyStylesheet = (classNameID) => {
      const style = document.querySelector(`[data-styled-components*=${classNameID}]`);
      if (!style) return;
      try {
        this.styleTag.innerHTML = '';
      } catch(e) {}
      this.styleTag.appendChild(style.cloneNode(true));
    }
 
    render() {
      const { stylesheet } = this.state
      return (
        <ShadowDOM>
          <span>
            <span ref={(n) => this.styleTag = n} />
            {React.createElement(element, {...this.props, generatedClassName: this.applyStylesheet})}
          </span>
        </ShadowDOM>
      )
    }
  }
}