upstream-rocketchat/apps/meteor/client/views/room/layout/RoomLayout.tsx

/* eslint-disable no-nested-ternary */
import { Box } from '@rocket.chat/fuselage';
import { useResizeObserver } from '@rocket.chat/fuselage-hooks';
import breakpointsDefinitions from '@rocket.chat/fuselage-tokens/dist/breakpoints.json';
import { LayoutContext, useLayout } from '@rocket.chat/ui-contexts';
import type { ComponentProps, ReactNode } from 'react';
import { Suspense, useMemo } from 'react';

import HeaderSkeleton from '../Header/HeaderSkeleton';

export type RoomLayoutProps = {
	classificationBanner?: ReactNode;
	header?: ReactNode;
	body?: ReactNode;
	footer?: ReactNode;
	aside?: ReactNode;
} & ComponentProps<typeof Box>;

const useBreakpointsElement = () => {
	const { ref, borderBoxSize } = useResizeObserver<HTMLElement>({
		debounceDelay: 30,
	});

	const breakpoints = useMemo(
		() =>
			Object.entries(breakpointsDefinitions)
				.filter(([, { minViewportWidth }]) => minViewportWidth && borderBoxSize.inlineSize && borderBoxSize.inlineSize >= minViewportWidth)
				.map(([name]) => name),
		[borderBoxSize],
	);

	return {
		ref,
		breakpoints,
	};
};

const RoomLayout = ({ classificationBanner, header, body, footer, aside, ...props }: RoomLayoutProps) => {
	const { ref, breakpoints } = useBreakpointsElement();

	const contextualbarPosition = breakpoints.includes('md') ? 'relative' : 'absolute';
	const contextualbarSize = breakpoints.includes('sm') ? (breakpoints.includes('xl') ? '38%' : '380px') : '100%';
	const hideBody = aside && contextualbarSize === '100%';

	const layout = useLayout();

	return (
		<LayoutContext.Provider
			value={useMemo(
				() => ({
					...layout,
					contextualBarPosition: contextualbarPosition,
					size: {
						...layout.size,
						contextualBar: contextualbarSize,
					},
				}),
				[layout, contextualbarPosition, contextualbarSize],
			)}
		>
			<Box height='full' width='full' display='flex' flexDirection='column' backgroundColor='room' {...props} ref={ref}>
				{classificationBanner}
				<Suspense fallback={<HeaderSkeleton />}>{header}</Suspense>
				<Box display='flex' flexGrow={1} overflow='hidden' height='full' position='relative'>
					<Box display={hideBody ? 'none' : 'flex'} flexDirection='column' flexGrow={1} minWidth={0}>
						<Box is='div' display='flex' flexDirection='column' flexGrow={1} maxHeight='100%'>
							<Suspense fallback={null}>{body}</Suspense>
						</Box>
						{footer && <Suspense fallback={null}>{footer}</Suspense>}
					</Box>
					{aside && <Suspense fallback={null}>{aside}</Suspense>}
				</Box>
			</Box>
		</LayoutContext.Provider>
	);
};

export default RoomLayout;