Skip to content

Commit

Permalink
Fixed #53
Browse files Browse the repository at this point in the history
  • Loading branch information
@Merve7
Merve7 committed Jul 14, 2017
1 parent 579dd56 commit e6e644c
Show file tree
Hide file tree
Showing 6 changed files with 326 additions and 1 deletion.
1 change: 1 addition & 0 deletions src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -224,6 +224,7 @@ class AppMenu extends Component {
</a>
<div className={classNames({ 'submenu-hidden': this.state.activeMenu !== 6, 'submenu-visible': this.state.activeMenu === 6 })}>
<Link to="/menu">&#9679; Menu</Link>
<Link to="/tabmenu">&#9679; TabMenu</Link>
</div>

<a href="#" onClick={(event) => this.openMenu(event, 7)} className={classNames({ 'active-menuitem': this.state.activeMenu === 7 })}>
Expand Down
2 changes: 1 addition & 1 deletion src/components/menu/Menu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export class MenuItem extends Component{
}
else{
return (
<a className={styleClass} target={this.item.target} onClick={event=>this.menu.itemClick(event,this.item)}>
<a className={styleClass} href="#" target={this.item.target} onClick={event=>this.menu.itemClick(event,this.item)}>
{this.item.icon?<span className={iconClass}></span>:null}
<span className="ui-menuitem-text">{this.item.label}</span>
</a>
Expand Down
39 changes: 39 additions & 0 deletions src/components/tabmenu/TabMenu.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
/** TabMenu **/
.ui-tabmenu {

}

.ui-tabmenu .ui-tabmenu-nav {
margin: 0;
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;
white-space: nowrap;
display: block;
border-bottom: 0;
top: 1px;
}

.ui-tabmenu .ui-tabmenu-nav .ui-tabmenuitem a {
float: left;
padding: 0.5em 1em;
text-decoration: none;
}

.ui-tabmenu .ui-tabmenu-nav a {
padding: 0.5em 1em;
}

.ui-tabmenu .ui-tabmenu-nav .ui-tabmenuitem .ui-icon {
float: left;
}

.ui-tabmenu .ui-tabmenu-nav .ui-tabmenuitem.ui-state-disabled a {
cursor: default;
}
68 changes: 68 additions & 0 deletions src/components/tabmenu/TabMenu.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import {MenuItem} from '../menu/Menu';

export class TabMenu extends Component {

static defaultProps = {
model:null,
activeItem:null,
style:null,
styleClass:null,
};

static propTypes = {
model:PropTypes.array,
activeItem:PropTypes.any,
style:PropTypes.any,
styleClass:PropTypes.string,
};


constructor(props) {
super(props);
this.state ={activeItem:this.props.activeItem || this.props.model[0]};
}

itemClick(event, item) {
if(item.disabled) {
event.preventDefault();
return;
}

if(!item.url) {
event.preventDefault();
}

if(item.command) {
item.command({
originalEvent: event,
item: item
});
}

this.setState({activeItem:item});
}

render() {
var tabMenuClass=classNames('ui-tabmenu ui-widget ui-widget-content ui-corner-all',this.props.styleClass);

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} menu={this}/>
</li>
return list;
})

return (
<div 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>
);
}
}
2 changes: 2 additions & 0 deletions src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ import {DataScrollerInlineDemo} from './showcase/datascroller/DataScrollerInline
import {DataScrollerLoaderDemo} from './showcase/datascroller/DataScrollerLoaderDemo';
import {DataScrollerInfiniteDemo} from './showcase/datascroller/DataScrollerInfiniteDemo';
import {MenuDemo} from './showcase/menu/MenuDemo';
import {TabMenuDemo} from './showcase/tabmenu/TabMenuDemo';
import {Router,Route,hashHistory} from 'react-router';

ReactDOM.render(
Expand Down Expand Up @@ -119,6 +120,7 @@ ReactDOM.render(
<Route path="/datascroller/loader" component={DataScrollerLoaderDemo} />
<Route path="/datascroller/infinite" component={DataScrollerInfiniteDemo} />
<Route path="/menu" component={MenuDemo} />
<Route path="/tabmenu" component={TabMenuDemo} />
<Route path="/setup" component={SetupPage} />
</Route>
</Router>,
Expand Down
215 changes: 215 additions & 0 deletions src/showcase/tabmenu/TabMenuDemo.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,215 @@
import React, {Component} from 'react';
import {Link} from 'react-router';
import {TabMenu} from '../../components/tabmenu/TabMenu';
import {TabView,TabPanel} from '../../components/tabview/TabView';
import {CodeHighlight} from '../../components/codehighlight/CodeHighlight';

export class TabMenuDemo extends Component {

constructor() {
super();
this.state = {};
}

render() {
var items=[
{label: 'Stats', icon: 'fa-bar-chart'},
{label: 'Calendar', icon: 'fa-calendar'},
{label: 'Documentation', icon: 'fa-book'},
{label: 'Support', icon: 'fa-support'},
{label: 'Social', icon: 'fa-twitter'}
];
return (
<div>
<div className="content-section">
<div className="feature-intro">
<h1>TabMenu</h1>
<p>Menu is a navigation/command component that displays items as tab headers.</p>
</div>
</div>
<div className="content-section implementation">
<TabMenu model={items}/>
</div>

<TabMenuDoc/>

</div>
);
}
}

class TabMenuDoc extends Component {
render() {
return (
<div className="content-section source">
<TabView effect="fade">
<TabPanel header="Documentation">
<h3>Import</h3>
<CodeHighlight className="language-javascript">
{`
import {TabMenu} from 'primereact/components/tabmenu/TabMenu';
`}</CodeHighlight>
<h3>MenuModel API</h3>
<p>TabMenu uses the common menumodel api to define its items, visit <Link to="/menu"> Menu </Link> for details.</p>

<h3>Getting Started</h3>
<p>TabMenu requires a collection of menuitems as its model.</p>
<CodeHighlight className="language-markup">
{`
<TabMenu model={items}/>
`}
</CodeHighlight>
<CodeHighlight className="language-markup">
{`
var items=[
{label: 'Stats', icon: 'fa-bar-chart'},
{label: 'Calendar', icon: 'fa-calendar'},
{label: 'Documentation', icon: 'fa-book'},
{label: 'Support', icon: 'fa-support'},
{label: 'Social', icon: 'fa-twitter'}
];
`}
</CodeHighlight>
<h3>ActiveItem</h3>
<p>By default, first item is activated, use activeItem property to choose the initial active item.</p>
<CodeHighlight className="language-markup">
{`
<TabMenu model={items} activeItem={items[2]}/>
`}
</CodeHighlight>

<h3>Attributes</h3>
<div className="doc-tablewrapper">
<table className="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>model</td>
<td>array</td>
<td>null</td>
<td>An array of menuitems.</td>
</tr>
<tr>
<td>activeItem</td>
<td>MenuItem</td>
<td>null</td>
<td>Defines the default active menuitem</td>
</tr>
<tr>
<td>style</td>
<td>string</td>
<td>null</td>
<td>Inline style of the component.</td>
</tr>
<tr>
<td>styleClass</td>
<td>string</td>
<td>null</td>
<td>Style class of the component.</td>
</tr>
</tbody>
</table>
</div>
<h3>Styling</h3>
<p>Following is the list of structural style classes, for theming classes visit <Link to="/theming"> theming</Link> page.</p>
<div className="doc-tablewrapper">
<table className="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>ui-tabmenu</td>
<td>Container element.</td>
</tr>
<tr>
<td>ui-tabmenu-nav</td>
<td>List element of headers.</td>
</tr>
<tr>
<td>ui-tabmenuitem</td>
<td>Menuitem element.</td>
</tr>
<tr>
<td>ui-menuitem-link</td>
<td>Link inside a menuitem.</td>
</tr>
<tr>
<td>ui-menuitem-text</td>
<td>Label of a menuitem.</td>
</tr>
<tr>
<td>ui-menuitem-icon</td>
<td>Icon of a menuitem.</td>
</tr>
</tbody>
</table>
</div>

<h3>Dependencies</h3>
<p>None.</p>
</TabPanel>

<TabPanel header="Source">
<a href="https://github.com/primefaces/primereact/tree/master/src/showcase/tabmenu" className="btn-viewsource" target="_blank">
<i className="fa fa-github"></i>
<span>View on GitHub</span>
</a>
<CodeHighlight className="language-javascript">
{`
export class TabMenuDemo extends Component {
constructor() {
super();
this.state = {};
}
render() {
var items=[
{label: 'Stats', icon: 'fa-bar-chart'},
{label: 'Calendar', icon: 'fa-calendar'},
{label: 'Documentation', icon: 'fa-book'},
{label: 'Support', icon: 'fa-support'},
{label: 'Social', icon: 'fa-twitter'}
];
return (
<div>
<div className="content-section">
<div className="feature-intro">
<h1>TabMenu</h1>aaaaa
<p>Menu is a navigation/command component that displays items as tab headers.</p>
</div>
</div>
<div className="content-section implementation">
<TabMenu model={items}/>
</div>
<TabMenuDoc/>
</div>
);
}
}
`}
</CodeHighlight>
</TabPanel>
</TabView>
</div>
)
}

}

0 comments on commit e6e644c

Please sign in to comment.