overleaf/services/web/frontend/js/shared/context/layout-context.js
Alf Eaton 7c97f8ab6e Switch to new JSX runtime (#4225)
* Use new JSX runtime and update Babel Node target
* Update .eslintrc
* Remove React imports

GitOrigin-RevId: 559de0267f8f2934c56a860ea8701bb522aa861a
2021-06-24 02:06:59 +00:00

86 lines
2.2 KiB
JavaScript

import { createContext, useContext, useCallback, useMemo } from 'react'
import PropTypes from 'prop-types'
import useScopeValue from './util/scope-value-hook'
import { useIdeContext } from './ide-context'
export const LayoutContext = createContext()
LayoutContext.Provider.propTypes = {
value: PropTypes.shape({
view: PropTypes.string,
setView: PropTypes.func.isRequired,
chatIsOpen: PropTypes.bool,
setChatIsOpen: PropTypes.func.isRequired,
reviewPanelOpen: PropTypes.bool,
setReviewPanelOpen: PropTypes.func.isRequired,
leftMenuShown: PropTypes.bool,
setLeftMenuShown: PropTypes.func.isRequired,
pdfLayout: PropTypes.oneOf(['sideBySide', 'flat', 'split']).isRequired,
}).isRequired,
}
export function LayoutProvider({ children }) {
const { $scope } = useIdeContext()
const [view, _setView] = useScopeValue('ui.view')
const setView = useCallback(
value => {
_setView(oldValue => {
// ensure that the "history:toggle" event is broadcast when switching in or out of history view
if (value === 'history' || oldValue === 'history') {
$scope.toggleHistory()
}
return value
})
},
[$scope, _setView]
)
const [chatIsOpen, setChatIsOpen] = useScopeValue('ui.chatOpen')
const [reviewPanelOpen, setReviewPanelOpen] = useScopeValue(
'ui.reviewPanelOpen'
)
const [leftMenuShown, setLeftMenuShown] = useScopeValue('ui.leftMenuShown')
const [pdfLayout] = useScopeValue('ui.pdfLayout', $scope)
const value = useMemo(
() => ({
view,
setView,
chatIsOpen,
setChatIsOpen,
reviewPanelOpen,
setReviewPanelOpen,
leftMenuShown,
setLeftMenuShown,
pdfLayout,
}),
[
chatIsOpen,
leftMenuShown,
pdfLayout,
reviewPanelOpen,
setChatIsOpen,
setLeftMenuShown,
setReviewPanelOpen,
setView,
view,
]
)
return (
<LayoutContext.Provider value={value}>{children}</LayoutContext.Provider>
)
}
LayoutProvider.propTypes = {
children: PropTypes.any,
}
export function useLayoutContext(propTypes) {
const data = useContext(LayoutContext)
PropTypes.checkPropTypes(propTypes, data, 'data', 'LayoutContext.Provider')
return data
}