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

Contributed React components for the NEXT UI Kit.

import { jsxs, jsx } from "react/jsx-runtime";
import { useContext, Children, useRef, useState, useCallback, useEffect, cloneElement } from "react";
import { useElementSize } from "usehooks-ts";
import { HvLoadingContainer, HvDialogContent } from "@hitachivantara/uikit-react-core";
import { useClasses } from "./WizardContent.styles.js";
import { staticClasses } from "./WizardContent.styles.js";
import HvWizardContext from "../WizardContext/WizardContext.js";
const DRAWER_PERCENTAGE = 0.3;
const DRAWER_MIN_WIDTH = 280;
const 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(() => {
    const initialContext = arrayChildren.reduce(
      (acc, child, index) => {
        const invalid = "mustValidate" in child.props && child.props.mustValidate === true ? false : null;
        const valid = invalid ?? (index === 0 || null);
        acc[index] = { ...child.props, form: {}, valid, touched: index === 0 };
        return acc;
      },
      {}
    );
    setContext(initialContext);
  }, []);
  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 });
            })
          }
        ) })
      ]
    }
  );
};
export {
  HvWizardContent,
  staticClasses as wizardContentClasses
};