@craftercms/studio-ui
Version:
Services, components, models & utils to build CrafterCMS authoring extensions.
96 lines (94 loc) • 3.67 kB
JavaScript
/*
* Copyright (C) 2007-2022 Crafter Software Corporation. All Rights Reserved.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Lesser General Public License version 3 as published by
* the Free Software Foundation.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
/*
* Copyright (C) 2007-2022 Crafter Software Corporation. All Rights Reserved.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License version 3 as published by
* the Free Software Foundation.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import React, { useMemo } from 'react';
import { makeStyles } from 'tss-react/mui';
import { getGuestToHostBus, getHostToGuestBus } from '../../utils/subjects';
import { useActiveSiteId } from '../../hooks/useActiveSiteId';
import { usePreviewState } from '../../hooks/usePreviewState';
import { usePreviewNavigation } from '../../hooks/usePreviewNavigation';
import { useEnv } from '../../hooks/useEnv';
import HostUI from './HostUI';
const useStyles = makeStyles()((theme) => ({
hostContainer: {
flexGrow: 1,
display: 'flex',
justifyContent: 'center',
background: '#f3f3f3',
height: '100%',
maxHeight: 'calc(100% - 64px)',
overflow: 'auto',
transition: theme.transitions.create('margin', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen
})
},
shift: {
transition: theme.transitions.create('margin', {
easing: theme.transitions.easing.easeOut,
duration: theme.transitions.duration.enteringScreen
})
// width: `calc(100% - ${DRAWER_WIDTH}px)`,
// marginLeft: DRAWER_WIDTH
}
}));
export function Host() {
const { classes, cx } = useStyles();
const site = useActiveSiteId();
const { guestBase, previewLandingBase } = useEnv();
const { hostSize, showToolsPanel, toolsPanelWidth, icePanelWidth, editMode } = usePreviewState();
const { currentUrlPath } = usePreviewNavigation();
const postMessage$ = useMemo(() => getHostToGuestBus().asObservable(), []);
const onMessage = useMemo(() => {
const guestToHost$ = getGuestToHostBus();
return (action) => guestToHost$.next(action);
}, []);
return React.createElement(
'div',
{
style: {
width: `calc(100% - ${showToolsPanel ? toolsPanelWidth : 0}px - ${editMode ? icePanelWidth : 0}px)`,
marginLeft: showToolsPanel ? toolsPanelWidth : 0
},
className: cx(classes.hostContainer, { [classes.shift]: showToolsPanel })
},
React.createElement(HostUI, {
url: currentUrlPath === '' ? previewLandingBase : `${guestBase}${currentUrlPath}`,
site: site,
width: hostSize.width,
origin: guestBase,
height: hostSize.height,
onMessage: onMessage,
postMessage$: postMessage$,
onLocationChange: () => null
})
);
}
export default Host;