import React from 'react' ; import styled from 'styled-components' ; import { typography } from 'design/system' ; import TabItem from './TabItem' ; import * as Icons from 'design/Icon' ; import { Box , ButtonIcon } from 'design' ; import * as stores from 'teleport/Console/stores' ; import { useStore } from 'shared/libs/stores' ; import { useConsoleContext } from 'teleport/Console/consoleContextProvider' ; import { colors } from '../colors' ; export default function TabsContainer ( props ) { const ctx = useConsoleContext ( ) ; useStore ( ctx . storeParties ) ; return < Tabs { ... props } parties = { ctx . storeParties . state } / > ; } export function Tabs ( props ) { const { items , parties , activeTab , onSelect , onClose , onNew , disableNew , ... styledProps } = props ; const $items = items . filter ( i => i . kind !== 'blank' ) . map ( i => { const active = i . id === activeTab ; let users = [ ] ; if ( i . kind === 'terminal' ) { users = parties [ i . sid ] || [ ] ; } return ( < TabItem name = { i . title } key = { i . id } users = { users } active = { active } onClick = { ( ) => onSelect ( i ) } onClose = { ( ) => onClose ( i ) } style = { { flex : '1' , flexBasis : '0' , flexGrow : '1' , } } />); } ) ; return ( < StyledTabs as = "nav" typography = "h5" color = "text.secondary" bold { ... styledProps } > { $items } { $items . length > 0 && ( < ButtonIcon ml = "2" size = { 0 } disabled = { disableNew } title = "New Tab" onClick = { onNew } > < Icons . Add fontSize = "16px" / > < /ButtonIcon>)} < /StyledTabs>); } type Props = { items : stores . Document [ ] ; activeTab : number ; disableNew : boolean ; onNew : ( ) => void ; onSelect : ( doc : stores . Document ) => void ; [ index ] : any ; } ; const StyledTabs = styled ( Box ) `
  background: ${ colors . terminalDark };
  min-height: 32px;
  border-radius: 4px;
  display: flex;
  flex-wrap: no-wrap;
  align-items: center;
  flex-shrink: 0;
  overflow: hidden;
  ${ typography }
` ;