@hitachivantara/uikit-react-lab/dist/Wizard/WizardContent/WizardContent.js

Contributed React components to UI Kit by the community.

import HvWizardContext from "../WizardContext/WizardContext.js";
import { useClasses } from "./WizardContent.styles.js";
import { Children, cloneElement, useCallback, useContext, useEffect, useRef, useState } from "react";
import { HvDialogContent, HvLoadingContainer } from "@hitachivantara/uikit-react-core";
import { jsx, jsxs } from "react/jsx-runtime";
import { useElementSize } from "usehooks-ts";
//#region src/Wizard/WizardContent/WizardContent.tsx
var DRAWER_PERCENTAGE = .3;
var DRAWER_MIN_WIDTH = 280;
var HvWizardContent = ({ classes: classesProp, fixedHeight = false, loading = false, children, summaryContent }) => {
	const { classes, cx } = useClasses(classesProp);
	const { context, setContext, summary, tab } = useContext(HvWizardContext);
	const arrayChildren = Children.toArray(children);
	const summaryRef = useRef(void 0);
	const resizedRef = useRef({
		height: 0,
		width: 0
	});
	const [containerRef, sizes] = useElementSize();
	const [summaryHeight, setSummaryHeight] = useState(0);
	const [summaryWidth, setSummaryWidth] = useState(0);
	const [summaryLeft, setSummaryLeft] = useState(0);
	const updateSummaryMeasures = useCallback(({ height = 0, width = 0 }) => {
		const drawerWidth = width * DRAWER_PERCENTAGE;
		setSummaryHeight(height);
		setSummaryWidth(Math.max(drawerWidth, DRAWER_MIN_WIDTH));
		setSummaryLeft(width - Math.max(drawerWidth, DRAWER_MIN_WIDTH));
		resizedRef.current = {
			height,
			width
		};
	}, []);
	useEffect(() => {
		const pageHeight = summaryRef.current?.getBoundingClientRect?.()?.height;
		if (summary && sizes.height !== resizedRef.current.height || sizes.width !== resizedRef.current.width) updateSummaryMeasures(sizes);
		if (pageHeight && sizes.height !== pageHeight) updateSummaryMeasures({
			width: sizes.width,
			height: pageHeight
		});
	}, [
		tab,
		sizes,
		summary,
		updateSummaryMeasures
	]);
	useEffect(() => {
		setContext(arrayChildren.reduce((acc, child, index) => {
			const valid = ("mustValidate" in child.props && child.props.mustValidate === true ? false : null) ?? (index === 0 || null);
			acc[index] = {
				...child.props,
				form: {},
				valid,
				touched: index === 0
			};
			return acc;
		}, {}));
	}, []);
	useEffect(() => {
		if (tab && !context[tab]?.touched) setContext((oldContext) => Object.entries(oldContext).reduce((acc, [key, childState]) => {
			acc[Number(key)] = +key <= tab ? {
				...childState,
				touched: true,
				valid: childState?.valid ?? true
			} : childState;
			return acc;
		}, {}));
	}, [
		tab,
		context,
		setContext
	]);
	const translateX = summaryWidth ? summaryWidth + 10 : 450;
	return /* @__PURE__ */ jsxs("div", {
		className: classes.summaryRef,
		ref: (el) => {
			containerRef(el);
			if (el) summaryRef.current = el;
		},
		children: [summary !== null && /* @__PURE__ */ jsx("div", {
			className: classes.summarySticky,
			children: /* @__PURE__ */ jsx("div", {
				className: classes.summaryContainer,
				style: {
					left: summaryLeft,
					width: summaryWidth,
					height: summaryHeight,
					transform: `translate(${summary ? 0 : translateX}px, 0)`
				},
				children: summaryContent
			})
		}), /* @__PURE__ */ jsx(HvLoadingContainer, {
			hidden: !loading,
			children: /* @__PURE__ */ jsx(HvDialogContent, {
				className: cx(classes.contentContainer, { [classes.fixedHeight]: fixedHeight }),
				indentContent: true,
				children: Children.map(arrayChildren, (child, index) => {
					if (index !== tab) return null;
					return cloneElement(child, { tab });
				})
			})
		})]
	});
};
//#endregion
export { HvWizardContent };