Skip to content

Commit

Permalink
Fixed #479, Fixed #481
Browse files Browse the repository at this point in the history
  • Loading branch information
Çağatay Çivici authored and Çağatay Çivici committed Jul 2, 2018
1 parent 6daaf5a commit 510b5a7
Show file tree
Hide file tree
Showing 5 changed files with 112 additions and 66 deletions.
6 changes: 0 additions & 6 deletions public/resources/themes/omega/theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -324,12 +324,6 @@ $inputGroupTextColor: #222222;
.ui-panel-titlebar {
border-width: 0 0 1px 0;
}

.ui-panel-titlebar-icon span {
position: relative;
top: 1px;
}

}

/* TreeTable */
Expand Down
10 changes: 7 additions & 3 deletions src/components/panel/Panel.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,15 @@
.ui-panel .ui-panel-titlebar-icon {
float: right;
cursor: pointer;
height: 1.25em;
width: 1.25em;
line-height: 1.25em;
text-align: center;
}

.ui-panel .ui-panel-titlebar-icon {
margin-left: 0.2em;
margin-top: -0.1em;
.ui-panel .ui-panel-titlebar-icon span {
line-height: inherit;
margin-top: -1px;
}

.ui-panel .ui-panel-content {
Expand Down
1 change: 1 addition & 0 deletions src/components/panel/Panel.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ interface PanelProps {
collapsed?: boolean;
onExpand?(event: Event): void;
onCollapse?(event: Event): void;
onToggle?(e:{event: originalEvent, value: boolean}): void;
}

export class Panel extends React.Component<PanelProps,any> {}
114 changes: 67 additions & 47 deletions src/components/panel/Panel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@ export class Panel extends Component {
className: null,
collapsed: null,
onExpand: null,
onCollapse: null
onCollapse: null,
onToggle: null
}

static propTypes = {
Expand All @@ -25,21 +26,26 @@ export class Panel extends Component {
className: PropTypes.string,
collapsed: PropTypes.bool,
onExpand: PropTypes.func,
onCollapse: PropTypes.func
onCollapse: PropTypes.func,
onToggle: PropTypes.func
};

constructor(props) {
super(props);
this.state = {
collapsed: this.props.collapsed
};
if (!this.props.onToggle) {
this.state = {
collapsed: this.props.collapsed
};
}

this.toggle = this.toggle.bind(this);

this.id = this.props.id || UniqueComponentId();
}

componentDidUpdate() {
if(this.props.toggleable && !this.state.collapsed && this.expanding) {
const collapsed = this.props.onToggle ? this.props.collapsed : this.state.collapsed;

if (this.props.toggleable && !collapsed && this.expanding) {
DomHandler.addClass(this.contentWrapper, 'ui-panel-content-wrapper-expanding');

setTimeout(() => {
Expand All @@ -49,51 +55,64 @@ export class Panel extends Component {
}
}

static getDerivedStateFromProps(nextProps, prevState) {
if(nextProps.collapsed != null && nextProps.collapsed !== prevState.collapsed) {
return {
collapsed: nextProps.collapsed
};
}
toggle(event) {
if (this.props.toggleable) {
const collapsed = this.props.onToggle ? this.props.collapsed : this.state.collapsed;

return null;
}

toggle(e) {
if(this.props.toggleable) {
if(this.state.collapsed)
this.expand(e);
if(collapsed)
this.expand(event);
else
this.collapse(e);
this.collapse(event);

if (this.props.onToggle) {
this.props.onToggle({
originalEvent: event,
value: !collapsed
});
}
}

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

expand(event) {
this.setState({collapsed: false});
if (!this.props.onToggle) {
this.setState({collapsed: false});
}

this.expanding = true;
if(this.props.onCollapse) {
this.props.onCollapse(event);

if (this.props.onExpand) {
this.props.onExpand(event);
}

if (this.props.onToggle) {
this.props.onToggle({
originalEvent: event,
value: false
});
}
}

collapse(event) {
this.setState({collapsed: true});
if(this.props.onCollapse) {
if (!this.props.onToggle) {
this.setState({collapsed: true});
}

if (this.props.onCollapse) {
this.props.onCollapse(event);
}
}

renderToggleIcon() {
if(this.props.toggleable) {
let id = this.id + '_label';
let ariaControls = this.id + '_content';
renderToggleIcon(collapsed) {
if (this.props.toggleable) {
const id = this.id + '_label';
const ariaControls = this.id + '_content';

return (
<a href={'#' + ariaControls} className="ui-panel-titlebar-icon ui-panel-titlebar-toggler ui-corner-all ui-state-default" onClick={this.toggle}
id={id} aria-controls={ariaControls} aria-expanded={!this.state.collapsed} role="tab">
<span className={classNames('pi', {'pi-plus': this.state.collapsed, 'pi-minus': !this.state.collapsed})}></span>
id={id} aria-controls={ariaControls} aria-expanded={!collapsed} role="tab">
<span className={classNames('pi', {'pi-plus': collapsed, 'pi-minus': !collapsed})}></span>
</a>
);
}
Expand All @@ -102,9 +121,9 @@ export class Panel extends Component {
}
}

renderHeader() {
if(this.props.header || this.props.toggleable) {
let toggleIcon = this.renderToggleIcon();
renderHeader(collapsed) {
if (this.props.header || this.props.toggleable) {
const toggleIcon = this.renderToggleIcon(collapsed);

return (
<div className="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all">
Expand All @@ -118,16 +137,16 @@ export class Panel extends Component {
}
}

renderContent() {
let className = classNames('ui-panel-content-wrapper', {
'ui-panel-content-wrapper-collapsed': (this.state.collapsed && this.props.toggleable),
'ui-panel-content-wrapper-expanded': (!this.state.collapsed && this.props.toggleable)
renderContent(collapsed) {
const className = classNames('ui-panel-content-wrapper', {
'ui-panel-content-wrapper-collapsed': collapsed,
'ui-panel-content-wrapper-expanded': !collapsed
});
let id = this.id + '_content';
let ariaLabelledBy = this.id + '_label';
const id = this.id + '_content';
const ariaLabelledBy = this.id + '_label';

return (
<div ref={(el) => this.contentWrapper = el} className={className} id={id} aria-labelledby={ariaLabelledBy} aria-hidden={this.state.collapsed}>
<div ref={(el) => this.contentWrapper = el} className={className} id={id} aria-labelledby={ariaLabelledBy} aria-hidden={collapsed}>
<div className="ui-panel-content ui-widget-content">
{this.props.children}
</div>
Expand All @@ -136,10 +155,11 @@ export class Panel extends Component {
}

render() {
let className = classNames('ui-panel ui-widget ui-widget-content ui-corner-all', this.props.className);
let header = this.renderHeader();
let content = this.renderContent();

const className = classNames('ui-panel ui-widget ui-widget-content ui-corner-all', this.props.className);
const collapsed = this.props.toggleable ? (this.props.onToggle ? this.props.collapsed : this.state.collapsed) : false;
const header = this.renderHeader(collapsed);
const content = this.renderContent(collapsed);

return (
<div id={this.props.id} className={className} style={this.props.style}>
{header}
Expand Down
47 changes: 37 additions & 10 deletions src/showcase/panel/PanelDemo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ import {Panel} from 'primereact/panel';
</CodeHighlight>

<h3>Getting Started</h3>
<p>Panel is defined with Panel element.</p>
<p>Panel is a container component that accepts content as its children.</p>
<CodeHighlight className="language-jsx">
{`
<Panel header="Godfather I">
Expand All @@ -70,10 +70,30 @@ import {Panel} from 'primereact/panel';
`}
</CodeHighlight>

<h3>Toggleable</h3>
<p>Content of the panel can be expanded and collapsed using toggleable option, default state is defined with collapsed option.</p>
<p>Instead of simple strings, header propery also can be used to provide custom content as JSX.</p>

<h3>Toggleable</h3>
<p>Content of the panel can be expanded and collapsed using toggleable option. A toggleable panel can either be used as a Controlled or Uncontrolled component.</p>

<p>In controlled mode, <i>collapsed</i> and <i>onToggle</i> properties needs to be defined to control the collapsed state.</p>

<CodeHighlight className="language-jsx">
{`
<Panel header="Godfather I" style={{marginTop:'2em'}} toggleable={true} collasped={this.state.panelCollapsed} onToggle={(e) => this.setState({panelCollapsed: e.value})}>
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
Through Michael's 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.
</Panel>
`}
</CodeHighlight>

<p>In uncontrolled mode, only <i>toggleable</i> property needs to be enabled. Initial state can be still be provided using the <i>collapsed</i> property in uncontrolled mode however
it is evaluated at initial rendering and ignored in further updates. If you programmatically need to update the collapsed state, prefer to use the component as controlled.</p>

<CodeHighlight className="language-jsx">
{`
<Panel header="Godfather I" style={{marginTop:'2em'}} toggleable={true}>
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
Expand All @@ -88,12 +108,12 @@ import {Panel} from 'primereact/panel';
<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>
Expand All @@ -116,7 +136,7 @@ import {Panel} from 'primereact/panel';
</tr>
<tr>
<td>style</td>
<td>string</td>
<td>object</td>
<td>null</td>
<td>Inline style of the element.</td>
</tr>
Expand Down Expand Up @@ -157,6 +177,13 @@ import {Panel} from 'primereact/panel';
<td>event.originalEvent: browser event </td>
<td>Callback to invoke when a tab gets expanded.</td>
</tr>
<tr>
<td>onToggle</td>
<td>event.originalEvent: browser event <br />
event.value: collapsed state as a boolean
</td>
<td>Callback to invoke when a tab gets expanded.</td>
</tr>
</tbody>
</table>
</div>
Expand Down

0 comments on commit 510b5a7

Please sign in to comment.