import * as React from 'react' ; import * as PropTypes from 'prop-types' ; import Media from 'react-media' ; import { Container } from 'reakit' ; import { ActionMap } from 'constate/dist/ts/src' ; import _get from 'lodash/get' ; import { withTheme } from '../styled' ; type Actions = { openSidebar : ( ) => void ; closeSidebar : ( ) => void ; maximizeSidebar : ( ) => void ; minimizeSidebar : ( ) => void ; handleChangeCollapsed : ( isCollapsed : boolean ) => void ; } ; type State = { isCollapsed : boolean ; isMinimized : boolean ; isSidebarOpen : boolean ; } ; export type PageState = Actions & State ; export type PageContainerProps = { children : ( props : Actions & State ) => React . ReactNode ; theme ? : Object ; } ; const initialState = { isSidebarOpen : true , isCollapsed : false , isMinimized : false } ; const actions = { openSidebar : ( ) => ( ) => ( { isSidebarOpen : true } ) , closeSidebar : ( ) => ( ) => ( { isSidebarOpen : false } ) , maximizeSidebar : ( ) => ( ) => ( { isMinimized : false } ) , minimizeSidebar : ( ) => ( ) => ( { isMinimized : true } ) , handleChangeCollapsed : isCollapsed => state => ( { isCollapsed , isMinimized : isCollapsed ? false : state . isMinimized , isSidebarOpen : ! isCollapsed } ) } ; export const PageContainer = ( { children , theme } ) => { const breakpoint = _get ( theme , 'fannypack.Page.collapseBreakpoint' ) ; const breakpointPx = _get ( theme , `fannypack.layout.${ breakpoint }Breakpoint` ) ; return ( < Container context = "page" initialState = { initialState } actions = { actions } > { page => ( < React . Fragment > < Media query = { `(max-width: ${ breakpointPx }px)` } onChange = { page . handleChangeCollapsed } / > { children ( page ) } < /React.Fragment>)} < /Container>); } ; PageContainer . propTypes = { children : PropTypes . func . isRequired , theme : PropTypes . object } ; PageContainer . defaultProps = { theme : { } } ; const _PageContainer = withTheme ( PageContainer ) ; export default _PageContainer ; export const withPage = ( C ) => ( props ) => ( < _PageContainer > { ( page ) => < C page = { page } { ... props } />}</_PageContainer > ) ;