import React , { FunctionComponent , SetStateAction , Dispatch } from "react" ; import { Typography , Box , IconButton , createStyles , makeStyles , } from "@material-ui/core" ; import BlockIcon from "@material-ui/icons/Block" ; import Zoom from "@material-ui/core/Zoom" ; import Tooltip , { TooltipProps } from "@material-ui/core/Tooltip" ; import { grey } from "@material-ui/core/colors" ; import { IconWeb3 } from "." ; import { TabInterface } from "../types" ; import { ConnectionManager } from "../background/ConnectionManager" ; interface TabProps { manager ? : ConnectionManager ; current ? : boolean ; tab ? : TabInterface ; setActiveTab ? : Dispatch < SetStateAction < TabInterface | undefined > > ; } const useStylesBootstrap = makeStyles ( ( theme ) => ( { arrow : { color : theme . palette . common . black , } , tooltip : { backgroundColor : theme . palette . common . black , fontSize : 14 , } , } ) ) ; const useStyles = makeStyles ( ( theme ) => createStyles ( { disableButton : { color : theme . palette . text . hint , marginLeft : theme . spacing ( ) , "&:not(:hover)" : { opacity : 0.2 , } , "& svg" : { fontSize : "0.8rem" , } , } , } ) ) ; const BootstrapTooltip = ( props ) => { const classes = useStylesBootstrap ( ) ; return < Tooltip arrow classes = { classes } { ... props } />; } ; const Tab = ( { manager , tab , current = false , setActiveTab , } ) => { const classes = useStyles ( ) ; /**
     * If Tab that initiated this function has a tabId (check for validity) then disconnectTab
     * function will be called to disconnect the tab. At the same time, in case the tan is marked as current
     * (meaning opened at the same window) - it is ensured that it will be removed from UI through passing setActiveTab
     * Dispatcher.
     **/ const onDisconnect = ( ) : void => { if ( tab && tab . tabId ) { manager ?. disconnectTab ( tab . tabId ) ; if ( setActiveTab && current ) { setActiveTab ( undefined ) ; } } } ; return ( < Box pt = { current ? 1.25 : 0.5 } pb = { current ? 1.25 : 0.5 } pr = { 1 } pl = { 1 } style = { ! tab ? { height : "10px" } : { } } > < Box display = "flex" alignItems = "center" justifyContent = "space-between" > { tab && ( < > < Typography noWrap variant = { current ? "h3" : "h4" } > { tab . url } < /Typography> < Box display = "flex" alignItems = "center" > { tab ?. uApp . networks . map ( ( n ) => ( < IconWeb3 key = { n } size = "14px" color = { tab ?. uApp . enabled ? grey [ 800 ] : grey [ 400 ] } > { n } < /IconWeb3>))} < IconButton onClick = { onDisconnect } size = "small" className = { classes . disableButton } > { } < BootstrapTooltip title = { "Disconnect this app" } TransitionComponent = { Zoom } placement = { "top" } > < BlockIcon /> < /BootstrapTooltip> < /IconButton> < /Box> < />)} < /Box> < /Box>); } ; export default Tab ;