diff --git a/src/components/fieldset/Fieldset.d.ts b/src/components/fieldset/Fieldset.d.ts index c49c1ced87..1f735ca8f1 100644 --- a/src/components/fieldset/Fieldset.d.ts +++ b/src/components/fieldset/Fieldset.d.ts @@ -7,8 +7,9 @@ interface FieldsetProps { style?: object; toggleable?: boolean; collapsed?: boolean; - onExpand?(): void; + onExpand?(event: Event): void; onCollapse?(event: Event): void; + onToggle?(e:{event: originalEvent, value: boolean}): void; } export class Fieldset extends React.Component {} \ No newline at end of file diff --git a/src/components/fieldset/Fieldset.js b/src/components/fieldset/Fieldset.js index 8e0d3d44ee..7b06efb377 100644 --- a/src/components/fieldset/Fieldset.js +++ b/src/components/fieldset/Fieldset.js @@ -14,7 +14,8 @@ export class Fieldset extends Component { toggleable: null, collapsed: null, onExpand: null, - onCollapse: null + onCollapse: null, + onToggle: null }; static propTypes = { @@ -25,19 +26,26 @@ export class Fieldset extends Component { toggleable: PropTypes.bool, 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}; - this.toggle = this.toggle.bind(this); + 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-fieldset-content-wrapper-expanding'); setTimeout(() => { @@ -47,51 +55,57 @@ export class Fieldset 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); } } 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); } } - renderContent() { - let className = classNames('ui-fieldset-content-wrapper', { - 'ui-fieldset-content-wrapper-collapsed': (this.state.collapsed && this.props.toggleable), - 'ui-fieldset-content-wrapper-expanded': (!this.state.collapsed && this.props.toggleable) + renderContent(collapsed) { + const className = classNames('ui-fieldset-content-wrapper', { + 'ui-fieldset-content-wrapper-collapsed': (this.props.toggleable && collapsed), + 'ui-fieldset-content-wrapper-expanded': (this.props.toggleable && !collapsed) }); - let id = this.id + '_content'; + const id = this.id + '_content'; return ( -
this.contentWrapper = el} className={className} id={id} aria-hidden={this.state.collapsed} role="region"> +
this.contentWrapper = el} className={className} id={id} aria-hidden={collapsed} role="region">
{this.props.children}
@@ -99,9 +113,9 @@ export class Fieldset extends Component { ); } - renderToggleIcon() { - if(this.props.toggleable) { - let className = classNames('ui-fieldset-toggler pi ', { 'pi-plus': this.state.collapsed, 'pi-minus': !this.state.collapsed }); + renderToggleIcon(collapsed) { + if (this.props.toggleable) { + const className = classNames('ui-fieldset-toggler pi', {'pi-plus': collapsed, 'pi-minus': !collapsed}); return ( @@ -112,20 +126,44 @@ export class Fieldset extends Component { } } + renderLegendContent(collapsed) { + if (this.props.toggleable) { + const toggleIcon = this.renderToggleIcon(collapsed); + const ariaControls = this.id + '_content'; + + return ( + + {toggleIcon} + {this.props.legend} + + ); + } + else { + return ( + {this.props.legend} + ); + } + } + + renderLegend(collapsed) { + const legendContent = this.renderLegendContent(collapsed); + + return ( + + {legendContent} + + ); + } + render() { - let content = this.renderContent(); - let className = classNames('ui-fieldset ui-widget ui-widget-content ui-corner-all', this.props.className, {'ui-fieldset-toggleable': this.props.toggleable}); - let toggleIcon = this.renderToggleIcon(); - let ariaControls = this.id + '_content'; + const className = classNames('ui-fieldset ui-widget ui-widget-content ui-corner-all', this.props.className, {'ui-fieldset-toggleable': this.props.toggleable}); + const collapsed = this.props.toggleable ? (this.props.onToggle ? this.props.collapsed : this.state.collapsed) : false; + const legend = this.renderLegend(collapsed); + const content = this.renderContent(collapsed); return (
- - - {toggleIcon} - {this.props.legend} - - + {legend} {content}
); diff --git a/src/sass/App.scss b/src/sass/App.scss index 4205b4bba3..0eb9801ad5 100644 --- a/src/sass/App.scss +++ b/src/sass/App.scss @@ -474,6 +474,11 @@ body { } } + i { + background-color: #e5f9fc; + font-style: normal; + } + /* Demo Tabs Source */ .ui-tabview { background: none; diff --git a/src/showcase/fieldset/FieldsetDemo.js b/src/showcase/fieldset/FieldsetDemo.js index 625330759c..f9b18ff8a5 100644 --- a/src/showcase/fieldset/FieldsetDemo.js +++ b/src/showcase/fieldset/FieldsetDemo.js @@ -59,7 +59,7 @@ import {Fieldset} from 'primereact/fieldset';

Getting Started

-

Fieldset is defined with Fieldset element.

+

Panel is a container component that accepts content as its children.

{`
@@ -72,11 +72,30 @@ import {Fieldset} from 'primereact/fieldset'; `} +

Instead of simple strings, legend propery also can be used to provide custom content as JSX.

+

Toggleable

-

Content of the fieldset can be expanded and collapsed using toggleable option, default state is defined with collapsed option.

+

Content of the fieldset can be expanded and collapsed using toggleable option. A toggleable fieldset can either be used as a Controlled or Uncontrolled component.

+ +

In controlled mode, collapsed and onToggle properties needs to be defined to control the collapsed state.

{` -
+
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. +
+ +`} + + +

In uncontrolled mode, only toggleable property needs to be enabled. Initial state can be still be provided using the collapsed 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.

+ + +{` +
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, @@ -118,7 +137,7 @@ import {Fieldset} from 'primereact/fieldset'; style - string + object null Inline style of the element. @@ -142,24 +161,29 @@ import {Fieldset} from 'primereact/fieldset';
- - - - - + + + + + + + + + + - + - - + - +
NameParametersDescription
NameParametersDescription
onCollapseevent.originalEvent: browser event Callback to invoke when an active tab is collapsed by clicking on the header.
onExpandevent.originalEvent: browser event - event.originalEvent: browser event Callback to invoke when a tab gets expanded.
onCollapseevent.originalEvent: browser event + onToggleevent.originalEvent: browser event
+ event.value: collapsed state as a boolean 		Callback to invoke when an active tab is collapsed by clicking on the header.Callback to invoke when a tab gets expanded.
@@ -208,12 +232,15 @@ import {Fieldset} from 'primereact/fieldset'; {` +import React, {Component} from 'react'; +import {Fieldset} from 'primereact/fieldset'; + export class FieldsetDemo extends Component { render() { return (
-
+

Fieldset

Fieldset is a grouping component with a content toggle feature.