From 460de9574b1c1552988730f005ed7eb8c69a2b00 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87a=C4=9Fatay=20=C3=87ivici?= Date: Tue, 26 Jun 2018 16:25:09 +0300 Subject: [PATCH] Refactor TabMenu --- src/components/tabmenu/TabMenu.css | 36 +++++------ src/components/tabmenu/TabMenu.js | 95 ++++++++++++++++++++--------- src/showcase/tabmenu/TabMenuDemo.js | 19 +++--- 3 files changed, 92 insertions(+), 58 deletions(-) diff --git a/src/components/tabmenu/TabMenu.css b/src/components/tabmenu/TabMenu.css index 5a2c2b4587..99dfd57403 100644 --- a/src/components/tabmenu/TabMenu.css +++ b/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; } \ No newline at end of file diff --git a/src/components/tabmenu/TabMenu.js b/src/components/tabmenu/TabMenu.js index c01cd64727..62d2208e6f 100644 --- a/src/components/tabmenu/TabMenu.js +++ b/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 ? : 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=
  • - this.itemClick(event,item)}/> + return ( +
  • + this.itemClick(event, item)}> + {icon} + {item.label} +
    • - return list; - }) + ); + } + renderItems() { return ( -
    this.container=el}> - -
    + 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 ( +
    + +
    + ); + } + else { + return null; + } + } } \ No newline at end of file diff --git a/src/showcase/tabmenu/TabMenuDemo.js b/src/showcase/tabmenu/TabMenuDemo.js index 9b391d02b7..d974af9ffa 100644 --- a/src/showcase/tabmenu/TabMenuDemo.js +++ b/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 (
    @@ -28,7 +29,7 @@ export class TabMenuDemo extends Component {
    - + this.setState({activeItem: e.value})}/>