import { useEffect , useState } from "react" ; import { useSetRecoilState } from "recoil" ; import styled from "styled-components" ; import { Tab } from "../../modules/tab" ; import { focusedTab } from "../../utils/atoms" ; import TabButton from "./TabButton" ; const TabsPanelContainer = styled . div `
  display: flex;
  flex-direction: column;
  & .tabsList {
    display: flex;
    min-height: 40px;
    overflow-x: auto;
    background: ${ ( { theme } ) => theme . elements . tab . list . background };
    &:empty {
      background: transparent;
    }
    &::-webkit-scrollbar {
      height: 6px !important;
    }
  }
  & .tabsContainer {
    display: flex;
    height: calc(100% - 40px);
    & > div {
      width: 100%;
    }
    & .cm-editor {
      height: 100%;
    }
  }
` ; interface TabPanelOptions { tabs : Tab [ ] ; col : number ; row : number ; close : ( i : number ) => void ; } export default function TabsPanel ( { tabs , col , row , close } ) { const [ selectedTabID , setSelectedTabID ] = useState < string | null > ( null ) ; const setFocusedTab = useSetRecoilState ( focusedTab ) ; const tabsStates = new Map ( ) ; tabs . forEach ( ( tab ) => tabsStates . set ( tab . id , tab . edited ) ) ; const [ states , setStates ] = useState ( tabsStates ) ; useEffect ( ( ) => { if ( tabs . length === 0 && selectedTabID != null ) { selectTab ( null ) ; } if ( tabs . length > 0 && selectedTabID == null ) { selectTab ( tabs [ 0 ] ) ; } } , [ tabs , selectedTabID ] ) ; function selectTab ( tab ) { const tabID = tab ? tab . id : null ; setSelectedTabID ( tabID ) ; setFocusedTab ( { col , row , id : tabID , tab , } ) ; } function removeTab ( tab , index ) { tab . close ( ) ; if ( selectedTabID === tab . id ) setSelectedTabID ( null ) ; close ( index ) ; } function saveTab ( tab ) { tab . save ( ) ; } return ( < TabsPanelContainer > < div className = "tabsList" > { tabs . map ( ( tab , i ) => { const isSelected = tab . id == selectedTabID ; const isEdited = states . get ( tab . id ) as boolean ; return ( < TabButton key = { tab . id } title = { tab . title } isEdited = { isEdited } isSelected = { isSelected } select = { ( ) => selectTab ( tab ) } close = { ( ) => removeTab ( tab , i ) } save = { ( ) => saveTab ( tab ) } />); } ) } < /div> < div className = "tabsContainer" > { tabs . map ( ( tab ) => { const isSelected = tab . id == selectedTabID ; const Container = tab . container ; const setEdited = ( state ) => { setStates ( ( states ) => { states . set ( tab . id , state ) ; return new Map ( states ) ; } ) ; } ; return ( isSelected && ( < div key = { tab . id } > < Container setEdited = { setEdited } /> < /div>)); } ) } < /div> < /TabsPanelContainer>); }