/**
 * Copyright (c) 2021 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 { Button } from "../forms/button" ; import { ClassNames } from "./ClassNames" ; import * as utils from "../utils" ; import { Dropdown , DropdownMenu , DropdownItem , MenuItemType } from "../forms/dropdown" ; import { TabPane } from "./TabPane" ; param { tabs } List param { id } string param { tabOrientation } orientation param { onTabClick } callback param { overflowTabsfrom } name param { dataqa } quality type TabsV2Prop = { tabs : TabV2Details [ ] ; id : string ; tabOrientation : TabV2Orientation ; onTabClick ? : ( evt : React . MouseEvent < HTMLElement > , clickedTab : TabV2Details ) => void ; overflowTabsFrom ? : number ; dataqa ? : string ; } ; param { isOverflowTabSelected } if param { selectedTabId } Id type TabsV2State = { isOverflowTabSelected : boolean ; selectedTabId : string ; } ; param { name } name param { id } id param { isSelected } true param { isDisabled } true param { tabType } Type export type TabV2Details = { name : any ; id : string ; isSelected ? : boolean ; isDisabled ? : boolean ; tabType ? : TabV2Type ; } ; param { VERTICAL } vertical param { HORIZONTAL } Horizontal export enum TabV2Orientation { VERTICAL = "vertical" , HORIZONTAL = "horizontal" } param { STATIC } tabs param { SIMPLE } simple export enum TabV2Type { STATIC = "static" , SIMPLE = "simple" } const getSelectedTabId = ( tabs ) : string => { const selectedTab = tabs . find ( tab => tab . isSelected ) ; if ( selectedTab ) { return selectedTab . id ; } else { return tabs [ 0 ] . id ; } } ; /**
 * TabsV2 Component: Use to divide content into separate views which users navigate between.
 */ export class TabsV2 extends React . PureComponent < TabsV2Prop , TabsV2State > { constructor ( props ) { super ( props ) ; const { tabs } = props ; const selectedTabID = tabs && tabs . length > 0 ? getSelectedTabId ( tabs ) : tabs [ 0 ] . id ; this . state = { isOverflowTabSelected : false , selectedTabId : selectedTabID , } ; } onTabClicked = ( evt , clickedTab , isOverflowedTabClicked ) => { const { onTabClick } = this . props ; this . setState ( { isOverflowTabSelected : isOverflowedTabClicked , selectedTabId : clickedTab . id , } , ( ) => onTabClick && onTabClick ( evt , clickedTab ) ) ; } ; private renderTab = ( tab , index ) => { const { selectedTabId } = this . state ; const className = tab . id === selectedTabId ? ClassNames . TABACTIVE : ClassNames . TABINACTIVE ; return ( < li key = { index } role = "presentation" className = { ClassNames . TABITEM } > < Button id = { `tab-${ tab . id }` } aria - controls = { `panel-${ tab . id }` } aria - selected = { tab . isSelected } className = { className } disabled = { tab . isDisabled } onClick = { evt => this . onTabClicked ( evt , tab , false ) } > { tab . name } < /Button> < /li>); } ; private renderTabsBar = ( ) => { const { id , tabOrientation , overflowTabsFrom } = this . props ; const { tabs } = this . props ; let isOverflowRendered = false ; return ( < ul className = { ClassNames . TABMAIN } role = "tablist" id = { id } > { tabs . map ( ( tab , index ) => { tabs ; if ( tabOrientation === TabV2Orientation . HORIZONTAL && index === overflowTabsFrom ) { isOverflowRendered = true ; return this . renderOverflowTab ( tabs . slice ( index , tabs . length ) , index ) ; } if ( ! isOverflowRendered ) { return this . renderTab ( tab , index ) ; } } ) } < /ul>); } ; private renderOverflowTab = ( overflowTabs , index ) => { const { tabs } = this . props ; const { isOverflowTabSelected , selectedTabId } = this . state ; const selectedOverflowTab = tabs . filter ( tab => { return tab . id === selectedTabId ; } ) [ 0 ] ; return ( < li className = { ClassNames . TABITEM } key = { index } > < Dropdown showCaret = { true } label = { isOverflowTabSelected && selectedOverflowTab && selectedOverflowTab . name } button = { { link : true , className : ClassNames . TABINACTIVE , } } > < DropdownMenu > { overflowTabs . map ( ( tab , index ) => { return ( < DropdownItem key = { index . toString ( ) } menuItemType = { MenuItemType . ITEM } isHeaderChild = { true } label = { tab . name } onClick = { evt => this . onTabClicked ( evt , tab , true ) } isDisabled = { tab . isDisabled } / > ) ; } ) } < /DropdownMenu> < /Dropdown> < /li>); } ; private renderTabPane ( children , selectedTabId ) { return React . Children . map ( children , child => { const childEl = child as React . ReactElement ; if ( childEl . type === TabPane && childEl . props . id === selectedTabId ) { return childEl ; } } ) ; } render ( ) { const { tabOrientation , children , dataqa } = this . props ; const { selectedTabId } = this . state ; return ( < div className = { tabOrientation === TabV2Orientation . VERTICAL ? ClassNames . VERTICALTAB : undefined } data - qa = { dataqa } > { this . renderTabsBar ( ) } { this . renderTabPane ( children , selectedTabId ) } < /div>); } }