import * as React from "react" ; import { Component , PureComponent , ReactElement , ReactNode , MouseEvent , WheelEvent , } from "react" ; import { clamp } from "../../util" ; export interface TabsProps { onDoubleClick ? : Function ; commands ? : JSX . Element | JSX . Element [ ] ; } export interface TabsState { scrollLeft : number ; } export class Tabs extends Component < TabsProps , TabsState > { static defaultProps : TabsProps = { onDoubleClick : ( ) => { } , } ; container : HTMLDivElement ; state = { scrollLeft : 0 , } ; componentDidUpdate ( ) { this . container . scrollLeft = this . state . scrollLeft ; } onWheel = ( e ) => { const delta = clamp ( e . deltaY , - 16 , 16 ) ; let { scrollLeft } = this . state ; scrollLeft += delta ; scrollLeft = clamp ( scrollLeft , 0 , this . container . clientWidth ) ; this . setState ( { scrollLeft } ) ; e . preventDefault ( ) ; } ; onDoubleClick = ( e ) => { this . props . onDoubleClick ( ) ; } ; setContainerRef = ( ref ) => { this . container = ref ; } ; render ( ) { const { onDoubleClick , children , commands } = this . props ; return ( < div className = "tabs-container" > < div ref = { this . setContainerRef } className = "tabs-tab-container" onWheel = { this . onWheel } onDoubleClick = { this . onDoubleClick } > { children } < /div> < div className = "tabs-command-container" > { commands } < /div> < /div>); } } export interface TabProps { label ? : string ; value ? : any ; isActive ? : boolean ; isItalic ? : boolean ; onClick ? : Function ; onDoubleClick ? : Function ; onClose ? : Function ; icon ? : string ; isMarked ? : boolean ; } export class Tab extends PureComponent < TabProps , { } > { static defaultProps : TabProps = { onClick : ( ) => { } , onDoubleClick : ( ) => { } , onClose : ( ) => { } , } ; onMouseHandle = ( e , handler ) => { e . stopPropagation ( ) ; handler ( this . props . value ) ; } ; onClick = ( e ) => { this . onMouseHandle ( e , this . props . onClick ) ; } ; onDoubleClick = ( e ) => { this . onMouseHandle ( e , this . props . onDoubleClick ) ; } ; onClose = ( e ) => { this . onMouseHandle ( e , this . props . onClose ) ; } ; render ( ) { const { label , icon , isActive , isMarked , isItalic , } = this . props ; let className = "tab" ; if ( isActive ) { className += " active" ; } if ( isMarked ) { className += " marked" ; } if ( isItalic ) { className += " italic" ; } return ( < div className = { className } onClick = { this . onClick } onDoubleClick = { this . onDoubleClick } > < div className = { "monaco-icon-label file-icon " + icon } /> < div className = "label" > { label } < /div> < div className = "close" onClick = { this . onClose } / > < /div>); } }