refactoring tabs and tab components

luisvinicius167 · Dec 16, 2016 · 083c552 · 083c552
1 parent 5c19bfe
commit 083c552
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 42 deletions.
diff --git a/lib/index.js b/lib/index.js
@@ -769,6 +769,16 @@ var Tabs = function (_Component) {
   return Tabs;
 }(preact.Component);
 
+function renderTabMuiChildren(props) {
+  var div = document.createElement('div');
+  div.classList.add('mui-tabs__pane');
+  div.id = props.value;
+  if (props.selected === true) {
+    div.classList.add('mui--is-active');
+  }
+  div.appendChild(preact.render(props.children[0]));
+  return div;
+}
 /**
  * @name Tab
  */
@@ -781,14 +791,13 @@ var Tab = function (_Component) {
     return possibleConstructorReturn(this, _Component.apply(this, arguments));
   }
 
+  Tab.prototype.componentDidUpdate = function componentDidUpdate() {
+    var div = renderTabMuiChildren(this.props);
+    this.base.parentElement.insertAdjacentElement('afterend', div);
+  };
+
   Tab.prototype.componentDidMount = function componentDidMount() {
-    var div = document.createElement('div');
-    div.classList.add('mui-tabs__pane');
-    div.id = this.props.value;
-    if (this.props.selected === true) {
-      div.classList.add('mui--is-active');
-    }
-    div.appendChild(preact.render(this.props.children[0]));
+    var div = renderTabMuiChildren(this.props);
     this.base.parentElement.insertAdjacentElement('afterend', div);
   };
 

diff --git a/lib/tab.js b/lib/tab.js
@@ -146,6 +146,16 @@ var set = function set(object, property, value, receiver) {
  * @module preact/tab
  */
 
+function renderTabMuiChildren(props) {
+  var div = document.createElement('div');
+  div.classList.add('mui-tabs__pane');
+  div.id = props.value;
+  if (props.selected === true) {
+    div.classList.add('mui--is-active');
+  }
+  div.appendChild(preact.render(props.children[0]));
+  return div;
+}
 /**
  * @name Tab
  */
@@ -159,20 +169,20 @@ var Tab = function (_Component) {
   }
 
   createClass(Tab, [{
+    key: 'componentDidUpdate',
+    value: function componentDidUpdate() {
+      var div = renderTabMuiChildren(this.props);
+      this.base.parentElement.insertAdjacentElement('afterend', div);
+    }
+  }, {
     key: 'componentDidMount',
     value: function componentDidMount() {
-      var div = document.createElement('div');
-      div.classList.add('mui-tabs__pane');
-      div.id = this.props.value;
-      if (this.props.selected === true) {
-        div.classList.add('mui--is-active');
-      }
-      div.appendChild(preact.render(this.props.children[0]));
+      var div = renderTabMuiChildren(this.props);
       this.base.parentElement.insertAdjacentElement('afterend', div);
     }
   }, {
     key: 'render',
-    value: function preact.render(_ref) {
+    value: function render(_ref) {
       var value = _ref.value,
           selected = _ref.selected,
           label = _ref.label,

diff --git a/src/components/tab/index.js b/src/components/tab/index.js
@@ -1,30 +1,40 @@
-/**
- * MUI Preact Tab Module
- * @module preact/tab
- */
+  /**
+   * MUI Preact Tab Module
+   * @module preact/tab
+   */
 
-'use strict';
+  'use strict';
 
-import {h, Component, render} from 'preact';
-/**
- * @name Tab
- */ 
-export default class Tab extends Component {
-  componentDidMount(){
-      let div = document.createElement('div');
-      div.classList.add('mui-tabs__pane');
-      div.id = this.props.value;
-      if ( this.props.selected === true ) {
-        div.classList.add('mui--is-active');
-      }
-      div.appendChild(render(this.props.children[0]))
-      this.base.parentElement.insertAdjacentElement('afterend', div);
+  import {h, Component} from 'preact';
+  import {render as renderer} from 'preact';
+
+  function renderTabMuiChildren(props){
+    let div = document.createElement('div');
+        div.classList.add('mui-tabs__pane');
+        div.id = props.value;
+        if ( props.selected === true ) {
+          div.classList.add('mui--is-active');
+        }
+        div.appendChild(renderer(props.children[0]))
+        return div;
   }
- render({value, selected, label, ...props}) {
-   return (
-      <li {...props} class={selected ? 'mui--is-active' : null}>
-        <a data-mui-toggle="tab" data-mui-controls={value}> {label} </a>
-      </li>
-   )
- }
-}
+  /**
+   * @name Tab
+   */ 
+  export default class Tab extends Component {
+    componentDidUpdate(){
+        let div = renderTabMuiChildren(this.props);
+        this.base.parentElement.insertAdjacentElement('afterend', div);
+    }    
+    componentDidMount(){
+        let div = renderTabMuiChildren(this.props);
+        this.base.parentElement.insertAdjacentElement('afterend', div);
+    }
+  render({value, selected, label, ...props}) {
+    return (
+        <li {...props} class={selected ? 'mui--is-active' : null}>
+          <a data-mui-toggle="tab" data-mui-controls={value}> {label} </a>
+        </li>
+    )
+  }
+  }