Skip to content

Commit

Permalink
Fixed #459
Browse files Browse the repository at this point in the history
  • Loading branch information
Çağatay Çivici authored and Çağatay Çivici committed Jun 26, 2018
1 parent 460de95 commit 77089ae
Show file tree
Hide file tree
Showing 3 changed files with 105 additions and 96 deletions.
5 changes: 3 additions & 2 deletions src/components/tabmenu/TabMenu.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,11 @@ import React = require("react");

interface TabMenuProps {
id?: string;
model?: Array<any>;
activeItem?: any;
model: Array<any>;
activeItem: any;
style?: any;
className?: string;
onTabChange(e: { originalEvent: Event, value: any}): void;
}

export class TabMenu extends React.Component<TabMenuProps,any> {}
41 changes: 11 additions & 30 deletions src/components/tabmenu/TabMenu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,34 +9,19 @@ export class TabMenu extends Component {
model: null,
activeItem: null,
style: null,
className: null
className: null,
onTabChange: null
};

static propTypes = {
id: PropTypes.string,
model: PropTypes.array,
activeItem: PropTypes.any,
model: PropTypes.array.isRequired,
activeItem: PropTypes.any.isRequired,
style: PropTypes.any,
className: PropTypes.string
className: PropTypes.string,
onTabChange: PropTypes.func.isRequired
};

constructor(props) {
super(props);
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) {
event.preventDefault();
Expand All @@ -54,18 +39,14 @@ export class TabMenu extends Component {
});
}

if(this.props.onChange) {
this.props.onChange({
originalEvent: event,
value: item
});
}

this.setState({activeItem: item});
this.props.onTabChange({
originalEvent: event,
value: item
});
}

renderMenuItem(item, index) {
const className = classNames('ui-tabmenuitem ui-state-default ui-corner-top', {'ui-state-active': this.state.activeItem === item});
const className = classNames('ui-tabmenuitem ui-state-default ui-corner-top', {'ui-state-active': this.props.activeItem ? this.props.activeItem === item : index === 0});
const iconClassName = classNames(item.icon, 'ui-menuitem-icon');
const icon = item.icon ? <span className={iconClassName}></span>: null;

Expand Down
155 changes: 91 additions & 64 deletions src/showcase/tabmenu/TabMenuDemo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@ export class TabMenuDemo extends Component {
{label: 'Documentation', icon: 'fa fa-fw fa-book'},
{label: 'Support', icon: 'fa fa-fw fa-support'},
{label: 'Social', icon: 'fa fa-fw fa-twitter'}
]
],
activeItem: null
};
}

Expand All @@ -28,12 +29,12 @@ export class TabMenuDemo extends Component {
<p>Menu is a navigation/command component that displays items as tab headers.</p>
</div>
</div>

<div className="content-section implementation">
<TabMenu model={this.state.items} onChange={(e) => this.setState({activeItem: e.value})}/>
<TabMenu model={this.state.items} activeItem={this.state.activeItem} onTabChange={(e) => this.setState({activeItem: e.value})} />
</div>

<TabMenuDoc/>

</div>
);
}
Expand All @@ -60,30 +61,30 @@ import {TabMenu} from 'primereact/tabmenu';
<p>TabMenu uses the common menumodel api to define its items, visit <Link to="/menumodel"> MenuModel </Link> for details.</p>

<h3>Getting Started</h3>
<p>TabMenu requires a collection of menuitems as its model.</p>
<CodeHighlight className="language-jsx">
{`
<TabMenu model={items}/>
<p>TabMenu is used as a controlled component and requires a collection of menuitems as its model.</p>

`}
</CodeHighlight>
<CodeHighlight className="language-jsx">
<CodeHighlight className="language-javascript">
{`
var items=[
constructor() {
super();
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'}
];
],
activeItem: null
};
}
`}
</CodeHighlight>
<h3>ActiveItem</h3>
<p>By default, first item is activated, use activeItem property to choose the initial active item.</p>

<CodeHighlight className="language-jsx">
{`
<TabMenu model={items} activeItem={items[2]}/>
<TabMenu model={this.state.items} activeItem={this.state.activeItem} onTabChange={(e) => this.setState({activeItem: e.value})}/>
`}
</CodeHighlight>
Expand All @@ -92,47 +93,69 @@ var items=[
<div className="doc-tablewrapper">
<table className="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>id</td>
<td>string</td>
<td>null</td>
<td>Unique identifier of the element.</td>
</tr>
<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>className</td>
<td>string</td>
<td>null</td>
<td>Style class of the component.</td>
</tr>
<tr>
<td>id</td>
<td>string</td>
<td>null</td>
<td>Unique identifier of the element.</td>
</tr>
<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>className</td>
<td>string</td>
<td>null</td>
<td>Style class of the component.</td>
</tr>
</tbody>
</table>
</div>

<h3>Events</h3>
<div className="doc-tablewrapper">
<table className="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>onTabChange</td>
<td>event.originalEvent: Browser event <br />
event.value: Selected menuitem </td>
<td>Callback to invoke when active tab changes.</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">
Expand Down Expand Up @@ -183,35 +206,39 @@ var items=[
</a>
<CodeHighlight className="language-javascript">
{`
import React, {Component} from 'react';
import {Link} from 'react-router-dom';
import {TabMenu} from 'primereact/TabMenu';
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'}
],
activeItem: null
};
}
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">
<div className="content-section introduction">
<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}/>
<TabMenu model={this.state.items} activeItem={this.state.activeItem} onTabChange={(e) => this.setState({activeItem: e.value})} />
</div>
<TabMenuDoc/>
</div>
);
}
Expand Down

0 comments on commit 77089ae

Please sign in to comment.