Refactor TabMenu

src/components/tabmenu/TabMenu.css

@@ -1,39 +1,35 @@
 /** TabMenu **/
-.ui-tabmenu {
-
-}
-
-.ui-tabmenu .ui-tabmenu-nav {
+.ui-tabmenu .ui-tabmenu-nav { 
     margin: 0;
-    padding: .25em .5em 0 .25em;
+    padding: .25em .5em 0 .25em; 
 }
 
-.ui-tabmenu .ui-tabmenu-nav .ui-tabmenuitem {
-    list-style: none;
-    float: left;
-    position: relative;
-    margin: 0 .2em 1px 0;
-    padding: 0;
+.ui-tabmenu .ui-tabmenu-nav .ui-tabmenuitem { 
+    list-style: none; 
+    float: left; 
+    position: relative; 
+    margin: 0 .2em 1px 0;  
+    padding: 0; 
     white-space: nowrap;
     display: block;
     border-bottom: 0;
-    top: 1px;
+    top: 1px; 
 }
 
-.ui-tabmenu .ui-tabmenu-nav .ui-tabmenuitem a {
-    float: left;
+.ui-tabmenu .ui-tabmenu-nav .ui-tabmenuitem a { 
+    float: left; 
     padding: 0.5em 1em;
-    text-decoration: none;
+    text-decoration: none; 
 }
 
-.ui-tabmenu .ui-tabmenu-nav a {
+.ui-tabmenu .ui-tabmenu-nav a { 
     padding: 0.5em 1em;
 }
 
-.ui-tabmenu .ui-tabmenu-nav .ui-tabmenuitem .ui-icon {
-    float: left;
+.ui-tabmenu .ui-menuitem-icon  { 
+    margin-right: .25em;
 }
 
 .ui-tabmenu .ui-tabmenu-nav .ui-tabmenuitem.ui-state-disabled a {
-    cursor: default;
+     cursor: default;
 }

src/components/tabmenu/TabMenu.js

@@ -1,70 +1,107 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import {MenuItem} from '../menu/MenuItem'
 
 export class TabMenu extends Component {
 
     static defaultProps = {
         id: null,
-        model:null,
-        activeItem:null,
-        style:null,
-        className:null,
+        model: null,
+        activeItem: null,
+        style: null,
+        className: null
     };
 
     static propTypes = {
         id: PropTypes.string,
-        model:PropTypes.array,
-        activeItem:PropTypes.any,
-        style:PropTypes.any,
-        className:PropTypes.string,
+        model: PropTypes.array,
+        activeItem: PropTypes.any,
+        style: PropTypes.any,
+        className: PropTypes.string
     };
 
-
     constructor(props) {
         super(props);
-        this.state ={activeItem:this.props.activeItem || this.props.model[0]};
+        this.state = {
+            activeItem: props.activeItem || props.model ? props.model[0] : null
+        };
+    }
+
+    static getDerivedStateFromProps(nextProps, prevState) {
+        if(nextProps.activeItem && nextProps.activeItem !== prevState.activeItem) {
+            return {
+                activeItem: nextProps.activeItem
+            };
+        }
+
+        return null;
     }
 
     itemClick(event, item) {
-        if(item.disabled) {
+        if (item.disabled) {
             event.preventDefault();
             return;
         }
 
-        if(!item.url) {
+        if (!item.url) {
             event.preventDefault();
         }
 
-        if(item.command) {
+        if (item.command) {
             item.command({
                 originalEvent: event,
                 item: item
             });
         }
 
-        this.setState({activeItem:item});
+        if(this.props.onChange) {
+            this.props.onChange({
+                originalEvent: event,
+                value: item
+            });
+        }
+
+        this.setState({activeItem: item});
     }
 
-    render() {
-        var tabMenuClass=classNames('ui-tabmenu ui-widget ui-widget-content ui-corner-all',this.props.className);
+    renderMenuItem(item, index) {
+        const className = classNames('ui-tabmenuitem ui-state-default ui-corner-top', {'ui-state-active': this.state.activeItem === item});
+        const iconClassName = classNames(item.icon, 'ui-menuitem-icon');
+        const icon = item.icon ? <span className={iconClassName}></span>: null;
 
-        var item=this.props.model && this.props.model.map((item,index)=>{
-            var listClass=classNames('ui-tabmenuitem ui-state-default ui-corner-top',{'ui-state-disabled':item.disabled},
-                {'ui-tabmenuitem-hasicon':item.icon},{'ui-state-active':this.state.activeItem===item})
-            var list=<li className={listClass} key={'tabmenuItem_' + index}>
-                <MenuItem index={index} items={item} onItemClick={event=>this.itemClick(event,item)}/>
+        return (
+            <li key={item.label + '_' + index} className={className}>
+                 <a href={item.url||'#'} className="ui-menuitem-link ui-corner-all" target={item.target} onClick={(event) => this.itemClick(event, item)}>
+                    {icon}
+                    <span className="ui-menuitem-text">{item.label}</span>
+                </a>
             </li>
-                return list;
-            })
+        );
+    }
 
+    renderItems() {
         return (
-            <div id={this.props.id} className={tabMenuClass} style={this.props.style} ref={el=>this.container=el}>
-                <ul className="ui-tabmenu-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
-                    {item}
-                </ul>
-            </div>
+            this.props.model.map((item, index) => {
+                return this.renderMenuItem(item, index);
+            })
         );
     }
+
+    render() {
+        if (this.props.model) {
+            const className = classNames('ui-tabmenu ui-widget ui-widget-content ui-corner-all', this.props.className);
+            const items = this.renderItems();
+
+            return (
+                <div id={this.props.id} className={className} style={this.props.style}>
+                    <ul className="ui-tabmenu-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
+                        {items}
+                    </ul>
+                </div>
+            );
+        }
+        else {
+            return null;
+        }
+    }
 }

src/showcase/tabmenu/TabMenuDemo.js

@@ -8,17 +8,18 @@ export class TabMenuDemo extends Component {
 
     constructor() {
         super();
-        this.state = {};
+        this.state = {
+            items: [
+                {label: 'Stats', icon: 'fa fa-fw fa-bar-chart'},
+                {label: 'Calendar', icon: 'fa fa-fw fa-calendar'},
+                {label: 'Documentation', icon: 'fa fa-fw fa-book'},
+                {label: 'Support', icon: 'fa fa-fw fa-support'},
+                {label: 'Social', icon: 'fa fa-fw fa-twitter'}
+            ]
+        };
     }
 
     render() {
-        var items=[
-            {label: 'Stats', icon: 'fa fa-fw fa-bar-chart'},
-            {label: 'Calendar', icon: 'fa fa-fw fa-calendar'},
-            {label: 'Documentation', icon: 'fa fa-fw fa-book'},
-            {label: 'Support', icon: 'fa fa-fw fa-support'},
-            {label: 'Social', icon: 'fa fa-fw fa-twitter'}
-        ];
         return (
             <div>
                 <div className="content-section introduction">
@@ -28,7 +29,7 @@ export class TabMenuDemo extends Component {
                     </div>
                 </div>
                 <div className="content-section implementation">
-                    <TabMenu model={items}/>
+                    <TabMenu model={this.state.items} onChange={(e) => this.setState({activeItem: e.value})}/>
                 </div>
 
                 <TabMenuDoc/>