@ -21,12 +21,19 @@ export interface TabsUIApi {
export const TabsUI = ( props : TabsUIProps ) = > { export const TabsUI = ( props : TabsUIProps ) = > {
const [ selectedIndex , setSelectedIndex ] = useState ( - 1 ) const [ selectedIndex , setSelectedIndex ] = useState ( - 1 )
const currentIndexRef = useRef ( - 1 ) const currentIndexRef = useRef ( - 1 )
const tabsRef = useRef ( { } )
useEffect ( ( ) = > {
if ( props . tabs [ selectedIndex ] ) {
tabsRef . current [ selectedIndex ] . scrollIntoView ( { behavior : 'smooth' , block : 'center' } )
}
} , [ selectedIndex ] )
const renderTab = ( tab , index ) = > { const renderTab = ( tab , index ) = > {
const classNameImg = 'my-1 mr-1 text-dark ' + tab . iconClass const classNameImg = 'my-1 mr-1 text-dark ' + tab . iconClass
const classNameTab = 'nav-item nav-link tab' + ( index === selectedIndex ? ' active' : '' ) const classNameTab = 'nav-item nav-link tab' + ( index === selectedIndex ? ' active' : '' )
return ( return (
< div className = { classNameTab } title = { tab . tooltip } > < div ref = { el = > { tabsRef . current [ index ] = el } } className = { classNameTab } title = { tab . tooltip } >
{ tab . icon ? ( < img className = "my-1 mr-1 iconImage" src = { tab . icon } / > ) : ( < i className = { classNameImg } > < / i > ) } { tab . icon ? ( < img className = "my-1 mr-1 iconImage" src = { tab . icon } / > ) : ( < i className = { classNameImg } > < / i > ) }
< span className = "title-tabs" > { tab . title } < / span > < span className = "title-tabs" > { tab . title } < / span >
< span className = "close-tabs" onClick = { ( ) = > props . onClose ( index ) } > < span className = "close-tabs" onClick = { ( ) = > props . onClose ( index ) } >
@ -53,12 +60,12 @@ export const TabsUI = (props: TabsUIProps) => {
return ( return (
< div className = "remix-ui-tabs header nav nav-tabs" > < div className = "remix-ui-tabs header nav nav-tabs" >
< div className = "d-flex flex-row justify-content-center align-items-center editor-zoom" title = "Zoom in/out" > < div className = "d-flex flex-row justify-content-center align-items-center left-icon" >
< span data - id = "tabProxyZoomOut" className = "btn btn-sm px-1 fas fa-search-minus text-dark" onClick = { ( ) = > props . onZoomOut ( ) } > < / span > < span data - id = "tabProxyZoomOut" className = "btn btn-sm px-1 fas fa-search-minus text-dark" title = "Zoom out" onClick = { ( ) = > props . onZoomOut ( ) } > < / span >
< span data - id = "tabProxyZoomIn" className = "btn btn-sm px-1 fas fa-search-plus text-dark" onClick = { ( ) = > props . onZoomIn ( ) } > < / span > < span data - id = "tabProxyZoomIn" className = "btn btn-sm px-1 fas fa-search-plus text-dark" title = "Zoom in" onClick = { ( ) = > props . onZoomIn ( ) } > < / span >
< i className = "d-flex flex-row justify-content-center align-items-center far fa-sliders-v px-1" title = "press F1 when focusing the editor to show advanced configuration settings" > < / i >
< / div > < / div >
< i className = "d-flex flex-row justify-content-center align-items-center far fa-sliders-v px-1 editor-f1" title = "press F1 when focusing the editor to show advanced configuration settings" > < / i > < Tabs className = "tab-scroll" selectedIndex = { selectedIndex } onSelect = { index = > { props . onSelect ( index ) ; setSelectedIndex ( index ) ; currentIndexRef . current = index } } >
< Tabs selectedIndex = { selectedIndex } onSelect = { index = > { props . onSelect ( index ) ; setSelectedIndex ( index ) ; currentIndexRef . current = index } } >
< TabList > { props . tabs . map ( ( tab , i ) = > < Tab key = { tab . name } > { renderTab ( tab , i ) } < / Tab > ) } < / TabList > < TabList > { props . tabs . map ( ( tab , i ) = > < Tab key = { tab . name } > { renderTab ( tab , i ) } < / Tab > ) } < / TabList >
{ props . tabs . map ( ( tab ) = > < TabPanel key = { tab . name } > < / TabPanel > ) } { props . tabs . map ( ( tab ) = > < TabPanel key = { tab . name } > < / TabPanel > ) }
< / Tabs > < / Tabs >
yann300
3 years ago