/**
 * Copyright (c) 2018 Dell Inc., or its subsidiaries. All Rights Reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 */ import * as React from "react" ; import { Icon , Direction } from "../../icon" ; import { classNames } from "../../utils" ; export interface VerticalNavGroupProps { groupName : string ; iconShape ? : string ; verticalIsCollapsed ? : boolean ; openVerticalNav ? : ( ) => void ; className ? : string ; } interface VerticalNavGroupState { groupIsExpanded : boolean ; } export class VerticalNavGroup extends React . PureComponent < VerticalNavGroupProps , VerticalNavGroupState > { constructor ( props ) { super ( props ) ; this . state = { groupIsExpanded : false , } ; } private handleClick ( ) { const { groupIsExpanded } = this . state ; const { openVerticalNav , verticalIsCollapsed } = this . props ; if ( verticalIsCollapsed ) { if ( openVerticalNav ) openVerticalNav ( ) ; this . setState ( { groupIsExpanded : true } ) ; } else { this . setState ( { groupIsExpanded : ! groupIsExpanded } ) ; } } render ( ) { const { groupIsExpanded } = this . state ; const { iconShape , verticalIsCollapsed , className } = this . props ; const expandClass = groupIsExpanded ? "nav-group is-expanded" : "nav-group" ; const navGroupContentClassNames = classNames ( [ "nav-group-content" , className ] ) ; return ( < div className = { expandClass } > < div className = { navGroupContentClassNames } > < button className = "nav-group-trigger" type = "button" onClick = { this . handleClick . bind ( this ) } > { iconShape && < Icon className = "nav-icon" shape = { iconShape } / > } < div className = "nav-group-text" > { this . props . groupName } < /div> < Icon shape = "caret" className = "nav-group-trigger-icon" dir = { groupIsExpanded ? Direction . RIGHT : Direction . DOWN } / > < /button> < /div> { groupIsExpanded && verticalIsCollapsed === false && ( < div className = "nav-group-children" > { this . props . children } < /div>)} < /div>); } }