Skip to content

Commit

Permalink
Fixed #168, Fixed #169
Browse files Browse the repository at this point in the history
  • Loading branch information
Çağatay Çivici committed Oct 31, 2017
1 parent aaa97dd commit d571f3c
Show file tree
Hide file tree
Showing 4 changed files with 182 additions and 97 deletions.
5 changes: 5 additions & 0 deletions src/components/accordion/Accordion.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,11 @@ import React = require("react");

interface AccordionTabProps {
header?: string;
disabled?: boolean;
headerStyle?: any;
headerClassName?: string;
contentStyle?: any;
contentClassName?: string;
}

export class AccordionTab extends React.Component<AccordionTabProps,any> {}
Expand Down
143 changes: 84 additions & 59 deletions src/components/accordion/Accordion.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,21 @@ import classNames from 'classnames';
export class AccordionTab extends Component {

static defaultProps = {
header: null
header: null,
disabled: false,
headerStyle: null,
headerClassName: null,
contentStyle: null,
contentClassName: null
}

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

Expand Down Expand Up @@ -37,79 +47,94 @@ export class Accordion extends Component {

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

onTabClick(e, i) {
var selected = this.isSelected(i);
componentWillReceiveProps(nextProps) {
this.setState({
activeIndex: nextProps.activeIndex
});
}

onTabClick(event, tab, i) {
if(!tab.props.disabled) {
let selected = this.isSelected(i);

if(this.props.multiple) {
var indexes = this.state.activeIndex||[];
if(selected)
indexes = indexes.filter(index => index !== i);
else
indexes = [...indexes,i];
if(this.props.multiple) {
var indexes = this.state.activeIndex||[];
if(selected)
indexes = indexes.filter(index => index !== i);
else
indexes = [...indexes,i];

this.setState({activeIndex: indexes});
}
else {
if(selected)
this.setState({activeIndex: null});
else
this.setState({activeIndex: i});
}
this.setState({activeIndex: indexes});
}
else {
if(selected)
this.setState({activeIndex: null});
else
this.setState({activeIndex: i});
}

var callback = selected ? this.props.onTabOpen : this.props.onTabClose;
if(callback) {
callback({originalEvent: e, index: i});
let callback = selected ? this.props.onTabOpen : this.props.onTabClose;
if(callback) {
callback({originalEvent: event, index: i});
}
}

e.preventDefault();
event.preventDefault();
}

isSelected(i) {
return this.props.multiple ? this.state.activeIndex && this.state.activeIndex.includes(i) : this.state.activeIndex === i;
return this.props.multiple ? (this.state.activeIndex && this.state.activeIndex.indexOf(i) !== -1) : this.state.activeIndex === i;
}

componentWillReceiveProps(nextProps) {
this.setState({activeIndex: nextProps.activeIndex});

renderTabHeader(tab, selected, index) {
let tabHeaderClass = classNames(tab.props.headerClassName, 'ui-accordion-header ui-state-default ui-corner-all', {'ui-state-active': selected, 'ui-state-disabled': tab.props.disabled});

return (
<div className={tabHeaderClass} style={tab.props.headerStyle} onClick={(event) => this.onTabClick(event, tab, index)}>
<span className={classNames('fa fa-fw', {'fa-caret-right': !selected, 'fa-caret-down': selected})}></span>
<a href="#">{tab.props.header}</a>
</div>
);
}

renderTabContent(tab, selected) {
let tabContentWrapperClass = classNames(tab.props.contentClassName, 'ui-accordion-content-wrapper', {'ui-helper-hidden': !selected});

return (
<div className={tabContentWrapperClass} style={tab.props.contentStyle}>
<div className="ui-accordion-content ui-widget-content">
{tab.props.children}
</div>
</div>
);
}

renderTab(tab, index) {
let selected = this.isSelected(index);
let tabHeader = this.renderTabHeader(tab, selected, index);
let tabContent = this.renderTabContent(tab, selected);

return (
<div key={tab.props.header} className="ui-accordion-tab">
{tabHeader}
{tabContent}
</div>
);
}

render() {
var tabs = null;

if(this.props.children)
tabs = this.props.children.map((tab,i) => {
let selected = this.isSelected(i);
let tabHeaderClass = classNames('ui-accordion-header ui-state-default ui-corner-all', {
'ui-state-active': selected
});

let tabHeader = <div className={tabHeaderClass} key={tab.props.header} onClick={(e) => this.onTabClick(e, i)}>
<span className={classNames('fa fa-fw', {'fa-caret-right': !selected, 'fa-caret-down': selected})}></span>
<a href="#">{tab.props.header}</a>
</div>;

let tabContentWrapperClass = classNames('ui-accordion-content-wrapper', {
'ui-helper-hidden': !selected
});

let tabContent = <div className={tabContentWrapperClass}>
<div className="ui-accordion-content ui-widget-content">
{tab.props.children}
</div>
</div>;
let tabs = React.Children.map(this.props.children, (tab, index) => {
return this.renderTab(tab, index);
});
let className = classNames('ui-accordion ui-widget ui-helper-reset', this.props.className);

return (
<div key={tab.props.header} className="ui-accordion-tab">
{tabHeader}
{tabContent}
</div>
);
})

return (
<div id={this.props.id} className={classNames('ui-accordion ui-widget ui-helper-reset', this.props.className)} style={this.props.style}>
<div id={this.props.id} className={className} style={this.props.style}>
{tabs}
</div>
);
Expand Down
57 changes: 56 additions & 1 deletion src/showcase/accordion/AccordionDemo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,8 +61,10 @@ export class AccordionDemo 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.
</AccordionTab>
<AccordionTab header="Godfather IV" disabled={true}></AccordionTab>
</Accordion>
</div>

<AccordionDoc></AccordionDoc>
</div>
)
Expand Down Expand Up @@ -146,7 +148,59 @@ import {Accordion,AccordionTab} from 'primereact/components/accordion/Accordion'
`}
</CodeHighlight>

<h3>Attributes</h3>
<h3>Properties For AccordionTab</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>header</td>
<td>string</td>
<td>null</td>
<td>Orientation of tab headers.</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>
</div>

<h3>Properties</h3>
<div className="doc-tablewrapper">
<table className="doc-table">
<thead>
Expand Down Expand Up @@ -321,6 +375,7 @@ export class AccordionDemo 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.
</AccordionTab>
<AccordionTab header="Godfather IV" disabled={true}></AccordionTab>
</Accordion>
</div>
<AccordionDoc></AccordionDoc>
Expand Down
74 changes: 37 additions & 37 deletions src/showcase/tabview/TabViewDemo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,46 +157,46 @@ import {TabView,TabPanel} from 'primereact/components/tabview/TabView';
</tr>
</tbody>
</table>
</div>

<h3>Properties For TabView</h3>
<div className="doc-tablewrapper">
<table className="doc-table">
<thead>
<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>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
<td>id</td>
<td>string</td>
<td>null</td>
<td>Unique identifier of the element.</td>
</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>
<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>

<h3>Events</h3>
Expand Down

0 comments on commit d571f3c

Please sign in to comment.