import { BaseComponent , setRef } from './vdom-util' ; import { ComponentChildren , Ref , createElement } from './vdom' ; import { CssDimValue } from './scrollgrid/util' ; export interface ViewContainerProps { labeledById : string ; liquid ? : boolean ; height ? : CssDimValue ; aspectRatio ? : number ; elRef ? : Ref < HTMLDivElement > ; children ? : ComponentChildren ; } interface ViewContainerState { availableWidth : number | null ; } export class ViewContainer extends BaseComponent < ViewContainerProps , ViewContainerState > { el : HTMLElement ; state : ViewContainerState = { availableWidth : null , } ; render ( ) { let { props , state } = this ; let { aspectRatio } = props ; let classNames = [ 'fc-view-harness' , ( aspectRatio || props . liquid || props . height ) ? 'fc-view-harness-active' : 'fc-view-harness-passive' , ] ; let height = '' ; let paddingBottom = '' ; if ( aspectRatio ) { if ( state . availableWidth !== null ) { height = state . availableWidth / aspectRatio ; } else { paddingBottom = `${ ( 1 / aspectRatio ) * 100 }%` ; } } else { height = props . height || '' ; } return ( < div aria - labelledby = { props . labeledById } ref = { this . handleEl } className = { classNames . join ( ' ' ) } style = { { height , paddingBottom } } > { props . children } < /div>); } componentDidMount ( ) { this . context . addResizeHandler ( this . handleResize ) ; } componentWillUnmount ( ) { this . context . removeResizeHandler ( this . handleResize ) ; } handleEl = ( el ) => { this . el = el ; setRef ( this . props . elRef , el ) ; this . updateAvailableWidth ( ) ; } ; handleResize = ( ) => { this . updateAvailableWidth ( ) ; } ; updateAvailableWidth ( ) { if ( this . el && this . props . aspectRatio ) { this . setState ( { availableWidth : this . el . offsetWidth } ) ; } } }