/**
 * Copyright (c) 2020 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 { Dropdown , DropdownMenu , DropdownItem , MenuItemType } from "../forms/dropdown" ; param { tabs } List param { id } string param { tabOrientation } orientation param { onTabClick } callback param { overflowTabsFrom } name param { dataqa } quality type TabsProp = { tabs : TabDetails [ ] ; id : string ; tabOrientation : TabOrientation ; onTabClick : ( evt : React . MouseEvent < HTMLElement > , clickedTab : TabDetails , updatedTabDetails : TabDetails [ ] ) => void ; overflowTabsFrom ? : number ; dataqa ? : string ; } ; param { isOverflowTabSelected } if type TabsState = { isOverflowTabSelected : boolean ; } ; param { name } name param { id } id param { component } React param { isSelected } true param { isDisabled } true export type TabDetails = { name : any ; id : string ; component : React . ReactElement ; isSelected ? : boolean ; isDisabled ? : boolean ; tabType ? : TabType ; } ; param { VERTICAL } vertical param { HORIZONTAL } Horizontal export enum TabOrientation { VERTICAL = "vertical" , HORIZONTAL = "horizontal" } param { STATIC } tabs param { SIMPLE } simple export enum TabType { STATIC = "static" , SIMPLE = "simple" } /**
 * Tabs Component : Use to divide content into separate views which users navigate between.
 */ export class Tabs extends React . PureComponent < TabsProp , TabsState > { constructor ( props ) { super ( props ) ; this . state = { isOverflowTabSelected : false , } ; } tabClicked = ( evt , clickedTab , isOverflowTab = false ) => { const { tabs , onTabClick } = this . props ; let lastActiveTabIndex ; let activeLastTab = false ; tabs . map ( ( tab , index ) => { if ( tab . isSelected ) { lastActiveTabIndex = index ; } if ( clickedTab . id === tab . id ) { if ( clickedTab . tabType && clickedTab . tabType === TabType . STATIC ) { tab . isSelected = false ; activeLastTab = true ; } else { tab . isSelected = true ; } } else { tab . isSelected = false ; } } ) ; if ( activeLastTab && lastActiveTabIndex !== undefined ) { tabs [ lastActiveTabIndex ] . isSelected = true ; } this . setState ( { isOverflowTabSelected : isOverflowTab , } , ( ) => onTabClick && onTabClick ( evt , clickedTab , tabs ) ) ; } ; private renderTabLink = ( tab , index ) => { const className = tab . isSelected ? 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 . tabClicked ( evt , tab ) } > { tab . name } < /Button> < /li>); } ; private renderTabLinks = ( ) => { const { id , tabOrientation , overflowTabsFrom , tabs } = this . props ; let isOverflowRendered = false ; return ( < ul className = { ClassNames . TABMAIN } role = "tablist" id = { id } > { tabs . map ( ( tab , index ) => { if ( tabOrientation === TabOrientation . HORIZONTAL && index === overflowTabsFrom ) { isOverflowRendered = true ; return this . renderOverflowTab ( tabs . slice ( index , tabs . length ) , index ) ; } if ( ! isOverflowRendered ) { return this . renderTabLink ( tab , index ) ; } } ) } < /ul>); } ; private renderTabPanels = ( ) => { const { tabs } = this . props ; return ( < React . Fragment > { tabs . map ( ( tab , index ) => { return ( < section key = { index } id = { `panel-${ tab . id }` } role = "tabpanel" className = { ClassNames . TAB_PANEL } aria - labelledby = { `tab-${ tab . id }` } aria - hidden = { tab . isSelected ? "false" : "true" } > { tab . component } < /section>); } ) } < /React.Fragment>); } ; private renderOverflowTab = ( overflowTabs , index ) => { const { isOverflowTabSelected } = this . state ; const className = isOverflowTabSelected ? ClassNames . TABACTIVE : ClassNames . TABINACTIVE ; return ( < li className = { ClassNames . TABITEM } key = { index } > < Dropdown showCaret = { false } button = { { icon : { shape : "ellipsis-horizontal" } , link : true , className : className , } } > < DropdownMenu > { overflowTabs . map ( ( tab , index ) => { return ( < DropdownItem key = { index . toString ( ) } menuItemType = { MenuItemType . ITEM } isHeaderChild = { true } label = { tab . name } onClick = { evt => this . tabClicked ( evt , tab , true ) } isDisabled = { tab . isDisabled } / > ) ; } ) } < /DropdownMenu> < /Dropdown> < /li>); } ; render ( ) { const { tabOrientation , dataqa } = this . props ; return ( < div className = { tabOrientation === TabOrientation . VERTICAL ? ClassNames . VERTICALTAB : undefined } data - qa = { dataqa } > { this . renderTabLinks ( ) } { this . renderTabPanels ( ) } < /div>); } }