import React , { useMemo , useEffect , useState , Fragment } from 'react' ; import { IPaneComponent } from '../../utilities/interfaces' ; import { getPaneElementSelector } from '../../shared/screenStore/paneElementStore/paneElement.selectors' ; import { getHeaderSelector } from '../../shared/screenStore/headerStore/header.selector' ; import { IHeaderState } from '../../shared/screenStore/headerStore/header.interface' ; import { IPaneElementState } from '../../shared/screenStore/paneElementStore/paneElement.interface' ; import PaneRenderer from '../paneRenderer/PaneRenderer' ; import { getScreenKeyState } from '../../shared/screenStore/keyStore/key.selector' ; import { IUtilityStoreState } from '../../shared/utilityStore/utilityStore.interfaces' ; import { getUtilityStore } from '../../shared/utilityStore/utilityStore.selectors' ; const TwoPaneHub = ( ) => { const utilityState = getUtilityStore ( ) ; const twoPaneElementState = getPaneElementSelector ( ) ; const headerState = getHeaderSelector ( ) ; const keyState = getScreenKeyState ( ) ; const screenStack = useMemo ( ( ) => { return keyState . keys . map ( ( val , index ) => { return { key : val . key , paneElement : twoPaneElementState . PaneElements [ val . key ] , header : headerState . headers [ val . key ] , pane : val . screen , extensionOptions : val . extensionOptions } ; } ) ; } , [ keyState , twoPaneElementState , headerState ] ) ; return ( < Fragment > { utilityState . paneRects . length > 0 && < PaneRenderer paneComponents = { screenStack } paneRects = { utilityState . paneRects } orientation = { utilityState . orientation } / > } < /Fragment>); } ; export default TwoPaneHub ;