diff --git a/src/components/panelmenu/PanelMenu.js b/src/components/panelmenu/PanelMenu.js index 7d76d30671..4cfffee698 100644 --- a/src/components/panelmenu/PanelMenu.js +++ b/src/components/panelmenu/PanelMenu.js @@ -40,17 +40,64 @@ class PanelMenuSub extends Component { } if (this.state.activeItem && this.state.activeItem === item) { + item.expanded = false; this.setState({ activeItem: null }); } else { + let activeItem = this.state.activeItem; + if (activeItem) { + activeItem.expanded = false; + } + + item.expanded = true; this.setState({ activeItem: 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; + } + } + }); + } + + return activeItem; + } + + componentDidMount() { + const activeItem = this.findActiveItem(); + if (activeItem) { + this.setState({ + activeItem + }); + } + } + renderSeparator(index) { return (
@@ -189,17 +236,64 @@ export class PanelMenu extends Component { } if (this.state.activeItem && this.state.activeItem === item) { + item.expanded = false; this.setState({ activeItem: null }); } else { + let activeItem = this.state.activeItem; + if (activeItem) { + activeItem.expanded = false; + } + + item.expanded = true; this.setState({ activeItem: 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; + } + } + }); + } + + return activeItem; + } + + componentDidMount() { + const activeItem = this.findActiveItem(); + if (activeItem) { + this.setState({ + activeItem + }); + } + } + renderPanelIcon(item) { const className = classNames('p-menuitem-icon', item.icon);