/**
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
 */ import * as React from 'react' ; export interface PerfPage { id : number ; shouldRemove ? : boolean ; name ? : string ; html ? : string ; } export interface PerfHudProps { } export interface PerfHudState { pages : PerfPage [ ] ; minimized : boolean ; currentPage : PerfPage ; visible : boolean ; } class PerfHud extends React . Component < PerfHudProps , PerfHudState > { public name : string = 'perfhud' ; constructor ( props ) { super ( props ) ; this . state = { pages : [ ] , minimized : true , currentPage : null , visible : true , } ; } public closeWindow ( ) { game . sendSlashCommand ( 'showPerfHUD 0' ) ; } public componentDidMount ( ) { game . onPerfHUDUpdate ( this . updatePages ) ; } public minMaxWindow = ( ) => { this . setState ( { pages : this . state . pages , minimized : ! this . state . minimized , currentPage : null , } ) ; } ; public updatePages = ( json ) => { if ( json === '' ) { this . setState ( { visible : false , } ) ; return ; } const updates = JSON . parse ( json ) ; const pages = this . state . pages . filter ( ( t ) => updates . filter ( ( ut ) => ut . id === t . id ) == [ ] ) . concat ( updates ) as PerfPage [ ] ; let current = null ; if ( this . state . currentPage == null ) { current = pages [ 0 ] ; } else { current = pages . filter ( ( p ) => p . id === this . state . currentPage . id ) [ 0 ] ; if ( typeof current === 'undefined' ) { current = pages [ 0 ] ; } } this . setState ( { pages , minimized : this . state . minimized , currentPage : current , visible : true , } ) ; } ; public onSelectedPageChanged = ( page ) => { this . setState ( { pages : this . state . pages , minimized : this . state . minimized , currentPage : page , } ) ; } ; public changePage = ( id ) => { const current = this . state . pages [ id ] ; this . changePerfPage ( current ) ; } ; public changePerfPage = ( page ) => { this . setState ( { pages : this . state . pages , minimized : false , currentPage : page , } ) ; } ; public setMinimized = ( mini ) => { this . setState ( { pages : this . state . pages , minimized : mini , currentPage : this . state . currentPage , } ) ; } ; public createPerfSelect = ( page , index ) => { const currentPage = this . state . currentPage ; return ( < span key = { index } className = { `${ ( page . id === currentPage . id ) ? 'selected' : '' } perfhud-select-item` } onClick = { this . changePage . bind ( this , page . id ) } > { page . name } < /span>); } ; public createPerfMinimize = ( min ) => { if ( min ) { return ( < span className = 'perfhud-minimize' onClick = { this . setMinimized . bind ( this , false ) } > & lt ; & lt ; < /span>); } else { return ( < span className = 'perfhud-minimize' onClick = { this . setMinimized . bind ( this , true ) } > & gt ; & gt ; < /span>); } } ; public createPerfContent = ( min ) => { if ( min ) { return ( < span />); } else { return ( < div className = 'perfhud-content' dangerouslySetInnerHTML = { { __html : this . state . currentPage . html } } />); } } ; public createPerfClose = ( ) => { return ( < a onMouseDown = { this . closeWindow . bind ( this ) } className = 'cu-window-close' > < /a>); } ; public render ( ) { if ( this . state . pages . length === 0 ) { return ( < div id = { this . name } className = { `${ this . name } cu-window` } > < p > No pages provided to PerfHud < /p> < /div>); } const mini = this . state . minimized ; return this . state . visible ? ( < div className = { `${ this . name } cu-window` } style = { { maxWidth : '500px' , right : '0' , position : 'fixed' } } data - input - group = 'block' > < div className = 'perfhud-select' > { this . createPerfMinimize ( mini ) } { this . state . pages . map ( ( page , index ) => this . createPerfSelect ( page , index ) ) } { this . createPerfClose ( ) } < /div> { this . createPerfContent ( mini ) } < /div>) : null; } } export default PerfHud ;