Skip to content

Commit

Permalink
Fixed #1846 - Add multiple property to PanelMenu
Browse files Browse the repository at this point in the history
  • Loading branch information
@mertsincan
mertsincan committed Mar 5, 2021
1 parent de73505 commit 0d22783
Showing 1 changed file with 70 additions and 76 deletions.
146 changes: 70 additions & 76 deletions src/components/panelmenu/PanelMenu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,13 @@ import ObjectUtils from '../utils/ObjectUtils';
class PanelMenuSub extends Component {

static defaultProps = {
model: null
model: null,
multiple: false
};

static propTypes = {
model: PropTypes.any
model: PropTypes.any,
multiple: PropTypes.bool
};

constructor(props) {
Expand Down Expand Up @@ -40,60 +42,56 @@ class PanelMenuSub extends Component {
});
}

if (this.state.activeItem && this.state.activeItem === item) {
let activeItem = this.state.activeItem;
let active = this.isItemActive(item);

if (active) {
item.expanded = false;
this.setState({
activeItem: null
activeItem: this.props.multiple ? activeItem.filter(a_item => a_item !== item) : null
});
}
else {
let activeItem = this.state.activeItem;
if (activeItem) {
if (!this.props.multiple && activeItem) {
activeItem.expanded = false;
}

item.expanded = true;
this.setState({
activeItem: item
activeItem: this.props.multiple ? [...(activeItem||[]), item] : item
});
}
}

updateActiveItemState(item, isActive) {
let activeItem = this.state.activeItem;
if (activeItem) {
activeItem.expanded = isActive;
}

item.expanded = !isActive;
this.setState({
activeItem: !isActive ? item : null
});
}

findActiveItem() {
let activeItem = null;

if (this.props.model) {
this.props.model.forEach(item => {
if (item.expanded) {
if (!activeItem) {
activeItem = item;
}
else {
item.expanded = false;
if (this.props.multiple) {
return this.props.model.filter(item => item.expanded);
}
else {
let activeItem = null;
this.props.model.forEach(item => {
if (item.expanded) {
if (!activeItem)
activeItem = item;
else
item.expanded = false;
}
}
});
});

return activeItem;
}
}

return activeItem;
return null;
}

isItemActive(item) {
return this.state.activeItem && (this.props.multiple ? this.state.activeItem.indexOf(item) > -1: this.state.activeItem === item);
}

renderSeparator(index) {
return (
<li key={'separator_' + index} className="p-menu-separator"></li>
);
return <li key={'separator_' + index} className="p-menu-separator"></li>;
}

renderSubmenu(item, active) {
Expand All @@ -104,7 +102,7 @@ class PanelMenuSub extends Component {
return (
<CSSTransition nodeRef={submenuContentRef} classNames="p-toggleable-content" timeout={{ enter: 1000, exit: 450 }} in={active} unmountOnExit>
<div ref={submenuContentRef} className={submenuWrapperClassName}>
<PanelMenuSub model={item.items} />
<PanelMenuSub model={item.items} multiple={this.props.multiple} />
</div>
</CSSTransition>
);
Expand All @@ -114,7 +112,7 @@ class PanelMenuSub extends Component {
}

renderMenuitem(item, index) {
const active = this.state.activeItem === item;
const active = this.isItemActive(item);
const className = classNames('p-menuitem', item.className);
const linkClassName = classNames('p-menuitem-link', { 'p-disabled': item.disabled });
const iconClassName = classNames('p-menuitem-icon', item.icon);
Expand Down Expand Up @@ -191,14 +189,16 @@ export class PanelMenu extends Component {
id: null,
model: null,
style: null,
className: null
className: null,
multiple: false
};

static propTypes = {
id: PropTypes.string,
model: PropTypes.array,
style: PropTypes.object,
className: PropTypes.string
className: PropTypes.string,
multiple: PropTypes.bool
};

constructor(props) {
Expand Down Expand Up @@ -228,63 +228,59 @@ export class PanelMenu extends Component {
});
}

if (this.state.activeItem && this.state.activeItem === item) {
let activeItem = this.state.activeItem;
let active = this.isItemActive(item);

if (active) {
item.expanded = false;
this.setState({
activeItem: null
activeItem: this.props.multiple ? activeItem.filter(a_item => a_item !== item) : null
});
}
else {
let activeItem = this.state.activeItem;
if (activeItem) {
if (!this.props.multiple && activeItem) {
activeItem.expanded = false;
}

item.expanded = true;
this.setState({
activeItem: item
activeItem: this.props.multiple ? [...(activeItem||[]), item] : item
});
}
}

updateActiveItemState(item, isActive) {
let activeItem = this.state.activeItem;
if (activeItem) {
activeItem.expanded = isActive;
}

item.expanded = !isActive;
this.setState({
activeItem: !isActive ? item : null
});
}

findActiveItem() {
let activeItem = null;

if (this.props.model) {
this.props.model.forEach(item => {
if (item.expanded) {
if (!activeItem) {
activeItem = item;
}
else {
item.expanded = false;
if (this.props.multiple) {
return this.props.model.filter(item => item.expanded);
}
else {
let activeItem = null;
this.props.model.forEach(item => {
if (item.expanded) {
if (!activeItem)
activeItem = item;
else
item.expanded = false;
}
}
});
});

return activeItem;
}
}

return activeItem;
return null;
}

isItemActive(item) {
return this.state.activeItem && (this.props.multiple ? this.state.activeItem.indexOf(item) > -1: this.state.activeItem === item);
}

renderPanelIcon(item) {
const className = classNames('p-menuitem-icon', item.icon);

if (item.icon) {
return (
<span className={className}></span>
);
return <span className={className}></span>
}

return null;
Expand All @@ -294,16 +290,14 @@ export class PanelMenu extends Component {
const className = classNames('p-panelmenu-icon pi', { 'pi-chevron-right': !active, ' pi-chevron-down': active });

if (item.items) {
return (
<span className={className}></span>
);
return <span className={className}></span>;
}

return null;
}

renderPanel(item, index) {
const active = this.state.activeItem === item;
const active = this.isItemActive(item);
const className = classNames('p-panelmenu-panel', item.className);
const headerClassName = classNames('p-component p-panelmenu-header', { 'p-highlight': active, 'p-disabled': item.disabled });
const toggleIcon = this.renderPanelToggleIcon(item, active);
Expand All @@ -314,7 +308,7 @@ export class PanelMenu extends Component {
return (
<div key={item.label + '_' + index} className={className} style={item.style}>
<div className={headerClassName} style={item.style}>
<a href={item.url || '#'} className="p-panelmenu-header-link" onClick={(e) => this.onItemClick(e, item)} aria-expanded={this.state.activeItem === item}
<a href={item.url || '#'} className="p-panelmenu-header-link" onClick={(e) => this.onItemClick(e, item)} aria-expanded={active}
id={this.id + '_header'} aria-controls={this.id + 'content'}>
{toggleIcon}
{itemIcon}
Expand All @@ -324,7 +318,7 @@ export class PanelMenu extends Component {
<CSSTransition nodeRef={menuContentRef} classNames="p-toggleable-content" timeout={{ enter: 1000, exit: 450 }} in={active} unmountOnExit>
<div ref={menuContentRef} className={contentWrapperClassName} role="region" id={this.id + '_content'} aria-labelledby={this.id + '_header'}>
<div className="p-panelmenu-content">
<PanelMenuSub model={item.items} className="p-panelmenu-root-submenu" />
<PanelMenuSub model={item.items} className="p-panelmenu-root-submenu" multiple={this.props.multiple} />
</div>
</div>
</CSSTransition>
Expand Down

0 comments on commit 0d22783

Please sign in to comment.