import * as React from 'react' ; import SplitPane from 'react-split-pane' ; import { inject , observer } from 'mobx-react' ; import { LeftPanel } from './left_panel' ; import { RightPanel } from './right_panel' ; import { splitPane , content } from './component_styles' ; import { StateModel } from '../config/state' ; import { BareView } from './bare_view' ; export type ComponentProps = { state ? : Luis . State ; localStorage : Storage ; } ; export const Layout = inject ( 'state' ) ( observer ( ( { state , localStorage } ) => { if ( state . viewState . bare ) { return < BareView state = { state } />; } return ( < > { } < SplitPane className = { splitPane ( state . theme ) + ' ' + content } split = "vertical" minSize = { 100 } defaultSize = { parseInt ( localStorage . getItem ( 'luis-v-splitPos' ) || '280px' , 10 ) } onDragStarted = { ( ) => ( state . viewState . frame . style . pointerEvents = 'none' ) } onDragFinished = { ( ) => ( state . viewState . frame . style . pointerEvents = 'auto' ) } onChange = { ( size ) => localStorage . setItem ( 'luis-v-splitPos' , size ) } > < LeftPanel state = { state } /> < RightPanel state = { state } / > < /SplitPane> ) ; < />); } ) ) ; Layout . displayName = 'Layout' ;