import React from 'react' ; import { space } from '@workday/canvas-kit-react/tokens' ; import { Tabs , useTabsModel , TabsModel } from '@workday/canvas-kit-react/tabs' ; import { SelectionModel } from '../../lib/selection' ; type Tab = { tab : string ; id : string ; } ; export const DynamicTabs = ( ) => { const [ tabs , setTabs ] = React . useState < Tab [ ] > ( [ { tab : 'Tab 1' , id : 'tab-1' } , { tab : 'Tab 2' , id : 'tab-2' } , { tab : 'Tab 3' , id : 'tab-3' } , { tab : 'Add Tab' , id : 'add' } , ] ) ; const addedRef = React . useRef ( tabs . length - 1 ) ; const model = useTabsModel ( { items : tabs , shouldSelect : ( { data } ) => data . id !== 'add' , } ) ; const modelRef = React . useRef ( model ) ; modelRef . current = model ; param id const removeItem = < T extends unknown > ( id , model ) => { const index = model . state . items . findIndex ( item => model . getId ( item ) === model . state . cursorId ) ; console . log ( 'index' , index , id , model . state . cursorId , model . state . items ) ; const nextIndex = index === model . state . items . length - 1 ? index - 1 : index + 1 ; const nextId = model . getId ( model . state . items [ nextIndex ] ) ; if ( model . state . selectedIds [ 0 ] === id ) { model . events . select ( { id : nextId } ) ; } if ( model . state . cursorId === id ) { model . events . goTo ( { id : nextId } ) ; requestAnimationFrame ( ( ) => { document . querySelector < HTMLElement > ( `#${ model . state . id }-${ nextId }` ) ?. focus ( ) ; } ) ; } } ; const onKeyDown = ( id ) => ( e ) => { if ( e . key === 'Delete' && id !== 'add' ) { setTabs ( tabs . filter ( item => item . id !== id ) ) ; const model = modelRef . current ; removeItem ( id , model ) ; } } ; const onClick = ( id ) => ( e ) => { if ( id === 'add' ) { addedRef . current += 1 ; setTabs ( tabs => { const newTabs = tabs . slice ( 0 , tabs . length - 1 ) ; const addTab = tabs . slice ( - 1 ) ; return newTabs . concat ( { tab : `Tab ${ addedRef . current }` , id : `tab-${ addedRef . current }` } , addTab ) ; } ) ; model . events . goTo ( { id : 'add' } ) ; } } ; return ( < Tabs model = { model } > < Tabs . List overflowButton = { < Tabs . OverflowButton > More < /Tabs.OverflowButton>}> { ( item ) => ( < Tabs . Item name = { item . id } onKeyDown = { onKeyDown ( item . id ) } onClick = { onClick ( item . id ) } > { item . tab } < /Tabs.Item>)} < /Tabs.List> < Tabs . Menu . Popper > < Tabs . Menu . Card maxWidth = { 300 } maxHeight = { 200 } > < Tabs . Menu . List > { ( item ) => < Tabs . Menu . Item name = { item . id } > { item . tab } < /Tabs.Menu.Item>} < /Tabs.Menu.List> < /Tabs.Menu.Card> < /Tabs.Menu.Popper> < Tabs . Panels > { ( item ) => ( < Tabs . Panel marginTop = "m" name = { item . id } > Contents of { item . tab } < /Tabs.Panel>)} < /Tabs.Panels> < /Tabs>); } ;