introduce resetAttributes

Author: ngryman

src/ElementPortal.js

@@ -17,6 +17,19 @@ const toNodesArray = (x) => (
         : null
 );
 
+const removeNodeAttributes = (node, attrs) => {
+  if (attrs === true) {
+    while (node.attributes.length > 0) {
+      node.removeAttribute(node.attributes[0].name);
+    }
+  }
+  else {
+    attrs.forEach(attr => {
+      node.removeAttribute(attr);
+    });
+  }
+};
+
 const ElementPortal = createReactClass({
   propTypes: {
     selector: PropTypes.string,
@@ -27,7 +40,10 @@ const ElementPortal = createReactClass({
     ]),
     component: PropTypes.func,
     mapNodeToProps: PropTypes.func,
-    resetStyle: PropTypes.bool
+    resetAttributes: PropTypes.oneOfType([
+      PropTypes.bool,
+      PropTypes.arrayOf(PropTypes.string)
+    ])
   },
 
   componentDidMount() {
@@ -53,9 +69,8 @@ const ElementPortal = createReactClass({
   renderNode(node) {
     const mapNodeToProps = this.props.mapNodeToProps || noop;
 
-    if (this.props.resetStyle) {
-      node.removeAttribute('class');
-      node.removeAttribute('style');
+    if (this.props.resetAttributes) {
+      removeNodeAttributes(node, this.props.resetAttributes);
     }
 
     const children = this.props.component

test/ElementPortal.js

@@ -228,7 +228,7 @@ test('erases classes and styles', t => {
   const Greeting = () => (<div>Hello</div>);
   render(
     <div>
-      <ElementPortal selector={`#${headerId}`} resetStyle>
+      <ElementPortal selector={`#${headerId}`} resetAttributes={['class', 'style']}>
         <Greeting/>
       </ElementPortal>
     </div>,
@@ -239,6 +239,36 @@ test('erases classes and styles', t => {
   t.is(document.getElementById(headerId).getAttribute('style'), null);
 });
 
+test('erases all attributes', t => {
+  const node = document.createElement('div');
+  document.body.appendChild(node);
+  const headerId = uniqueId();
+  const appId = uniqueId();
+  node.innerHTML = `
+    <div id="${headerId}" class="foo" data-bar="baz" qux>
+    </div>
+    <div id="${appId}">
+    </div>
+  `;
+  const headerElement = document.getElementById(headerId);
+  t.is(headerElement.classList.length, 1);
+  t.is(headerElement.getAttribute('data-bar'), 'baz');
+  t.is(headerElement.getAttribute('quz'), null);
+  const Greeting = () => (<div>Hello</div>);
+  render(
+    <div>
+      <ElementPortal selector={`#${headerId}`} resetAttributes={true}>
+        <Greeting/>
+      </ElementPortal>
+    </div>,
+    document.getElementById(appId)
+  );
+  t.is(headerElement.textContent, 'Hello');
+  t.is(headerElement.classList.length, 0);
+  t.is(headerElement.getAttribute('data-bar'), null);
+  t.is(headerElement.getAttribute('qux'), null);
+});
+
 test('transfers context to the portal', t => {
   const store = createStore((state = 0, action) => {
     if (action && action.type === 'INC') {