Skip to content

Commit

Permalink
Fixed #165, Fixed #166, Fixed #167
Browse files Browse the repository at this point in the history
  • Loading branch information
Çağatay Çivici committed Oct 31, 2017
1 parent b056da2 commit aaa97dd
Show file tree
Hide file tree
Showing 3 changed files with 192 additions and 87 deletions.
14 changes: 14 additions & 0 deletions src/components/tabview/TabView.d.ts
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,23 @@
import React = require("react");

interface TabPanelProps {
header?: string;
leftIcon?: string;
rightIcon?: string;
disabled?: boolean;
headerStyle?: any;
headerClassName?: string;
contentStyle?: any;
contentClassName?: string;
}

interface TabViewProps {
header?: string;
leftIcon?: string;
rightIcon?: string;
style?: any;
className?: string;
}

export class TabPanel extends React.Component<TabPanelProps,any> {}
export class TabView extends React.Component<TabViewProps,any> {}
143 changes: 93 additions & 50 deletions src/components/tabview/TabView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,89 +7,132 @@ export class TabPanel extends Component {
static defaultProps = {
header: null,
leftIcon: null,
rightIcon: null
rightIcon: null,
disabled: false,
headerStyle: null,
headerClassName: null,
contentStyle: null,
contentClassName: null
}

static propTypes = {
header: PropTypes.string,
leftIcon: PropTypes.string,
rightIcon: PropTypes.string
rightIcon: PropTypes.string,
disabled: PropTypes.boolean,
headerStyle: PropTypes.object,
headerClassName: PropTypes.string,
contentStyle: PropTypes.object,
contentClassName: PropTypes.string
};

render() {
return <div>{this.props.children}</div>;
return (
<div>{this.props.children}</div>
);
}
}

export class TabView extends Component {

static defaultProps = {
id: null,
activeIndex: null
activeIndex: null,
style: null,
className: null
}

static propTypes = {
id: PropTypes.string,
activeIndex: PropTypes.number
activeIndex: PropTypes.number,
style: null,
className: PropTypes.string
};

constructor() {
super();
this.state = {activeIndex:0};
this.getTabHeaderClass = this.getTabHeaderClass.bind(this);
constructor(props) {
super(props);
this.state = {
activeIndex: 0
};
}

onTabClick(e, i) {
this.setState({activeIndex:i});
if(this.props.onTabChange) {
this.props.onTabChange({originalEvent: e, index: i});
onTabHeaderClick(event, tab, index) {
if(!tab.props.disabled) {
this.setState({
activeIndex: index
});

if(this.props.onTabChange) {
this.props.onTabChange({originalEvent: event, index: index});
}
}
e.preventDefault();

event.preventDefault();
}

getTabHeaderClass(index) {
var className = 'ui-state-default ui-corner-top';
if(index === this.state.activeIndex) {
className += ' ui-tabview-selected ui-state-active';

componentWillReceiveProps(nextProps) {
if(nextProps.activeIndex !== this.props.activeIndex) {
this.setState({
activeIndex: nextProps.activeIndex
});
}
return className;
}

componentWillMount() {
if (this.props.activeIndex) {
this.setState({activeIndex: this.props.activeIndex});
}
renderTabHeader(tab, index) {
let selected = this.state.activeIndex === index;
let className = classNames(tab.props.headerClassName, 'ui-state-default ui-corner-top', {'ui-tabview-selected ui-state-active': selected, 'ui-state-disabled': tab.props.disabled});

return (
<li className={className} role="tab" style={tab.props.headerStyle}>
<a href="#" onClick={(e) => this.onTabHeaderClick(e, tab, index)}>
{tab.props.leftIcon && <span className={classNames('ui-tabview-left-icon fa', tab.props.leftIcon)}></span>}
<span className="ui-tabview-title">{tab.props.header}</span>
{tab.props.rightIcon && <span className={classNames('ui-tabview-right-icon fa', tab.props.rightIcon)}></span>}
</a>
</li>
);
}

componentWillReceiveProps(nextProps) {
if (nextProps.activeIndex !== this.props.activeIndex) {
this.setState({activeIndex: nextProps.activeIndex});
}

renderNavigator() {
let headers = React.Children.map(this.props.children, (tab, index) => {
return this.renderTabHeader(tab, index);
});

return (
<ul className="ui-tabview-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
{headers}
</ul>
);
}

renderContent() {
let contents = React.Children.map(this.props.children, (tab, index) => {
let selected = this.state.activeIndex === index;
let className = classNames(tab.props.contentClassName, 'ui-tabview-panel ui-widget-content', {'ui-helper-hidden': !selected});

return (
<div className={className} style={tab.props.contentStyle}>
{tab}
</div>
);
})

return (
<div className="ui-tabview-panels">
{contents}
</div>
);
}

render() {
let className = classNames('ui-tabview ui-widget ui-widget-content ui-corner-all ui-tabview-top', this.props.className)
let navigator = this.renderNavigator();
let content = this.renderContent();

return (
<div id={this.props.id} className="ui-tabview ui-widget ui-widget-content ui-corner-all ui-tabview-top">
<ul className="ui-tabview-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
{React.Children.map(this.props.children, (tab,i) => {
return <li className={this.getTabHeaderClass(i)} role="tab">
<a href="#" onClick={(e) => this.onTabClick(e,i)}>
{tab.props.leftIcon && <span className={classNames('ui-tabview-left-icon fa ', tab.props.leftIcon)}></span>}
<span className="ui-tabview-title">{tab.props.header}</span>
{tab.props.rightIcon && <span className={classNames('ui-tabview-right-icon fa ', tab.props.rightIcon)}></span>}
</a>
</li>
})
}
</ul>
<div className="ui-tabview-panels">
{React.Children.map(this.props.children, (tab,i) => {
return <div className="ui-tabview-panel ui-widget-content" style={this.state.activeIndex === i ? {display:'block'} : {display:'none'}}>
{tab}
</div>
})
}
</div>
<div id={this.props.id} className={className} style={this.props.style}>
{navigator}
{content}
</div>
);
}
Expand Down
122 changes: 85 additions & 37 deletions src/showcase/tabview/TabViewDemo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,25 +17,28 @@ export class TabViewDemo extends Component {

<div className="content-section implementation">
<TabView>
<TabPanel header="Godfather I" leftIcon="fa-calendar">
<TabPanel header="Godfather I" leftIcon="fa-calendar">
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughters wedding.
His beloved son Michael has just come home from the war, but does not intend to become part of his fathers business.
Through Michaels life the nature of the family business becomes clear. The business of the family is just like the head
of the family, kind and benevolent to those who give respect,
but given to ruthless violence whenever anything stands against the good of the family.
</TabPanel>
<TabPanel header="Godfather II" rightIcon="fa-print">
<TabPanel header="Godfather II" rightIcon="fa-print">
Francis Ford Coppolas legendary continuation and sequel to his landmark 1972 film, The_Godfather parallels the young
Vito Corleone's rise with his son Michael's spiritual fall, deepening The_Godfathers depiction of the dark side of
the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills his family.
Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy, killing the local Black Hand
Fanucci after he demands his customary cut of the tyro's business. With Fanucci gone, Vito's communal stature grows.
</TabPanel>
<TabPanel header="Godfather III" leftIcon="fa-bell-o" rightIcon="fa-bookmark-o">
<TabPanel header="Godfather III" leftIcon="fa-bell-o" rightIcon="fa-bookmark-o">
After a break of more than 15 years, director Francis Ford Coppola and writer Mario Puzo returned to the well for this
third and final story of the fictional Corleone crime family. Two decades have passed, and crime kingpin Michael Corleone,
now divorced from his wife Kay has nearly succeeded in keeping his promise that his family would one day be completely legitimate.
</TabPanel>
<TabPanel header="Godfather IV" disabled={true}>

</TabPanel>
</TabView>
</div>
<TabViewDoc></TabViewDoc>
Expand Down Expand Up @@ -91,45 +94,17 @@ import {TabView,TabPanel} from 'primereact/components/tabview/TabView';
`}
</CodeHighlight>

<h3>Attributes For TabView</h3>
<h3>Properties For TabPanel</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>id</td>
<td>string</td>
<td>null</td>
<td>Unique identifier of the element.</td>
</tr>
<tr>
<td>activeIndex</td>
<td>number</td>
<td>null</td>
<td>Active index of the TabView.</td>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</tbody>
</table>
</div>

<h3>Attributes For TabPanel</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>
Expand All @@ -150,8 +125,78 @@ import {TabView,TabPanel} from 'primereact/components/tabview/TabView';
<td>null</td>
<td>Icons can be placed at right of a header.</td>
</tr>
<tr>
<td>disabled</td>
<td>boolean</td>
<td>false</td>
<td>Whether the tab is disabled.</td>
</tr>
<tr>
<td>headerStyle</td>
<td>object</td>
<td>null</td>
<td>Inline style of the tab header.</td>
</tr>
<tr>
<td>headerClassName</td>
<td>string</td>
<td>null</td>
<td>Style class of the tab header.</td>
</tr>
<tr>
<td>contentStyle</td>
<td>object</td>
<td>null</td>
<td>Inline style of the tab content.</td>
</tr>
<tr>
<td>contentClassName</td>
<td>string</td>
<td>null</td>
<td>Style class of the tab content.</td>
</tr>
</tbody>
</table>

<h3>Properties For TabView</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>id</td>
<td>string</td>
<td>null</td>
<td>Unique identifier of the element.</td>
</tr>
<tr>
<td>activeIndex</td>
<td>number</td>
<td>null</td>
<td>Active index of the TabView.</td>
</tr>
<tr>
<td>style</td>
<td>object</td>
<td>null</td>
<td>Inline style of the tabview.</td>
</tr>
<tr>
<td>className</td>
<td>string</td>
<td>null</td>
<td>Style class of the tabview.</td>
</tr>
</tbody>
</table>
</div>
</div>

<h3>Events</h3>
Expand Down Expand Up @@ -257,6 +302,9 @@ export class TabViewDemo extends Component {
third and final story of the fictional Corleone crime family. Two decades have passed, and crime kingpin Michael Corleone,
now divorced from his wife Kay has nearly succeeded in keeping his promise that his family would one day be completely legitimate.
</TabPanel>
<TabPanel header="Godfather IV" disabled={true}>
</TabPanel>
</TabView>
</TabView>
</div>
Expand Down

0 comments on commit aaa97dd

Please sign in to comment.