feat: Initial clean release of CHM

packages/app-desktop/gui/ResizableLayout/LayoutItemContainer.tsx

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { Resizable, ResizeCallback, ResizeStartCallback, Size } from 're-resizable';
+import { LayoutItem, LayoutItemDirection } from './utils/types';
+import { EdgeFlags, itemMinHeight, itemMinWidth, itemSize, LayoutItemSizes } from './utils/useLayoutItemSizes';
+
+interface Props {
+	item: LayoutItem;
+	parent: LayoutItem|null;
+	sizes: LayoutItemSizes;
+	resizedItemMaxSize: Size|null;
+	onResizeStart: ResizeStartCallback;
+	onResize: ResizeCallback;
+	onResizeStop: ResizeCallback;
+	children: React.ReactNode;
+	isLastChild: boolean;
+	visible: boolean;
+	edges: EdgeFlags;
+}
+
+const LayoutItemContainer: React.FC<Props> = ({
+	item, visible, parent, sizes, resizedItemMaxSize, onResize, onResizeStart, onResizeStop, children, isLastChild, edges,
+}) => {
+	const style: React.CSSProperties = {
+		display: visible ? 'flex' : 'none',
+		flexDirection: item.direction,
+	};
+
+	const size: Size = itemSize(item, parent, sizes, true, edges);
+
+	// Drag rules follow the runtime "last visible in render" flag so hidden
+	// panels shown by moveMode still get proper dividers.
+	const parentDir = parent?.direction;
+	const canResizeRight = parentDir === LayoutItemDirection.Row && !isLastChild;
+	const canResizeBottom = parentDir === LayoutItemDirection.Column && !isLastChild;
+
+	const className = `resizableLayoutItem rli-${item.key}`;
+	const enable = {
+		top: false,
+		right: canResizeRight,
+		bottom: canResizeBottom,
+		left: false,
+		topRight: false,
+		bottomRight: false,
+		bottomLeft: false,
+		topLeft: false,
+	};
+
+	return (
+		<Resizable
+			key={item.key}
+			className={className}
+			style={style}
+			size={size}
+			onResizeStart={onResizeStart}
+			onResize={onResize}
+			onResizeStop={onResizeStop}
+			enable={enable}
+			minWidth={'minWidth' in item ? item.minWidth : itemMinWidth}
+			minHeight={'minHeight' in item ? item.minHeight : itemMinHeight}
+			maxWidth={resizedItemMaxSize?.width}
+			maxHeight={resizedItemMaxSize?.height}
+		>
+			{children}
+		</Resizable>
+	);
+};
+
+export default LayoutItemContainer;