@dnb/eufemia/es/extensions/forms/Form/Section/Section.js

DNB Eufemia Design System UI Library

"use client";

import _extends from "@babel/runtime/helpers/esm/extends";
import React, { useCallback, useContext, useMemo, useRef } from 'react';
import SectionContext from "./SectionContext.js";
import DataContext from "../../DataContext/Context.js";
import Provider from "../../DataContext/Provider/Provider.js";
import FieldPropsProvider from "../../Field/Provider/index.js";
import SectionContainerProvider from "./containers/SectionContainerProvider.js";
import ViewContainer from "./ViewContainer/index.js";
import EditContainer from "./EditContainer/index.js";
import Toolbar from "./Toolbar/index.js";
import { cleanPath } from "../../hooks/usePath.js";
import { useIsomorphicLayoutEffect as useLayoutEffect } from "../../../../shared/helpers/useIsomorphicLayoutEffect.js";
function SectionComponent(props) {
  const {
    path,
    overwriteProps,
    translations,
    required,
    data,
    defaultData,
    validateInitially,
    containerMode = 'auto',
    disableEditing = false,
    onChange,
    errorPrioritization = ['contextSchema'],
    schema,
    children
  } = props;
  if (path && !path.startsWith?.('/')) {
    throw new Error(`path="${path}" must start with a slash`);
  }
  const {
    hasContext,
    addOnChangeHandler,
    registerSectionSchema
  } = useContext(DataContext);
  const {
    path: nestedPath,
    props: nestedProps
  } = useContext(SectionContext) || {};
  const isRootRelativePath = path?.startsWith('//');
  const resolvedPath = useMemo(() => {
    if (!path) {
      return path;
    }
    if (isRootRelativePath) {
      return path.substring(1) || '/';
    }
    return path;
  }, [isRootRelativePath, path]);
  const identifier = useMemo(() => {
    if (!resolvedPath) {
      return nestedPath || '';
    }
    const nestedPrefix = !isRootRelativePath && nestedPath && nestedPath !== '/' ? nestedPath : '';
    const combinedPath = cleanPath(`${nestedPrefix}${resolvedPath}`);
    return combinedPath || '/';
  }, [isRootRelativePath, nestedPath, resolvedPath]);
  const handleChange = useCallback((...args) => onChange?.(...args), [onChange]);
  addOnChangeHandler?.(handleChange);
  const resolvedSchema = useMemo(() => {
    if (!schema) {
      return;
    }
    if (typeof schema === 'function') {
      try {
        return schema(props);
      } catch (_) {
        return;
      }
    }
    return schema;
  }, [schema]);
  const sectionSchemaIdRef = useRef(Symbol('Form.Section.schema'));
  useLayoutEffect(() => {
    if (!registerSectionSchema || !resolvedSchema) {
      return;
    }
    const normalizedIdentifier = identifier || '/';
    return registerSectionSchema({
      id: sectionSchemaIdRef.current,
      path: normalizedIdentifier,
      schema: resolvedSchema
    });
  }, [identifier, registerSectionSchema, resolvedSchema]);
  const fieldProps = required ? {
    required: true
  } : undefined;
  if (!hasContext) {
    return React.createElement(Provider, {
      data: data,
      defaultData: defaultData
    }, React.createElement(SectionComponent, props));
  }
  const sectionProps = props;
  return React.createElement(SectionContext.Provider, {
    value: {
      path: identifier,
      errorPrioritization,
      props: sectionProps
    }
  }, React.createElement(SectionContainerProvider, {
    validateInitially: validateInitially,
    containerMode: containerMode,
    disableEditing: disableEditing
  }, React.createElement(FieldPropsProvider, _extends({
    overwriteProps: {
      ...overwriteProps,
      ...(resolvedPath ? nestedProps?.overwriteProps?.[resolvedPath.startsWith('/') ? resolvedPath.substring(1) : resolvedPath] : undefined)
    },
    translations: translations
  }, fieldProps), children)));
}
SectionComponent.Toolbar = Toolbar;
SectionComponent.ViewContainer = ViewContainer;
SectionComponent.EditContainer = EditContainer;
SectionComponent._supportsSpacingProps = undefined;
export default SectionComponent;
//# sourceMappingURL=Section.js.map