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

Contributed React components for the NEXT UI Kit.

"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const react = require("react");
const usehooksTs = require("usehooks-ts");
const uikitReactCore = require("@hitachivantara/uikit-react-core");
const WizardContent_styles = require("./WizardContent.styles.cjs");
const WizardContext = require("../WizardContext/WizardContext.cjs");
const DRAWER_PERCENTAGE = 0.3;
const DRAWER_MIN_WIDTH = 280;
const HvWizardContent = ({
  classes: classesProp,
  fixedHeight = false,
  loading = false,
  children,
  summaryContent
}) => {
  const { classes, cx } = WizardContent_styles.useClasses(classesProp);
  const { context, setContext, summary, tab } = react.useContext(WizardContext.default);
  const arrayChildren = react.Children.toArray(children);
  const summaryRef = react.useRef(void 0);
  const resizedRef = react.useRef({ height: 0, width: 0 });
  const [containerRef, sizes] = usehooksTs.useElementSize();
  const [summaryHeight, setSummaryHeight] = react.useState(0);
  const [summaryWidth, setSummaryWidth] = react.useState(0);
  const [summaryLeft, setSummaryLeft] = react.useState(0);
  const updateSummaryMeasures = react.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
    };
  }, []);
  react.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]);
  react.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);
  }, []);
  react.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__ */ jsxRuntime.jsxs(
    "div",
    {
      className: classes.summaryRef,
      ref: (el) => {
        containerRef(el);
        if (el) {
          summaryRef.current = el;
        }
      },
      children: [
        summary !== null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.summarySticky, children: /* @__PURE__ */ jsxRuntime.jsx(
          "div",
          {
            className: classes.summaryContainer,
            style: {
              left: summaryLeft,
              width: summaryWidth,
              height: summaryHeight,
              transform: `translate(${summary ? 0 : translateX}px, 0)`
            },
            children: summaryContent
          }
        ) }),
        /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvLoadingContainer, { hidden: !loading, children: /* @__PURE__ */ jsxRuntime.jsx(
          uikitReactCore.HvDialogContent,
          {
            className: cx(classes.contentContainer, {
              [classes.fixedHeight]: fixedHeight
            }),
            indentContent: true,
            children: react.Children.map(arrayChildren, (child, index) => {
              if (index !== tab) return null;
              return react.cloneElement(child, { tab });
            })
          }
        ) })
      ]
    }
  );
};
exports.wizardContentClasses = WizardContent_styles.staticClasses;
exports.HvWizardContent = HvWizardContent;