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

DNB Eufemia Design System UI Library

"use client";

var _DoneButton, _CancelButton;
import React, { useCallback, useContext, useMemo, useRef } from 'react';
import clsx from 'clsx';
import { convertJsxToString } from "../../../../../shared/component-helper.js";
import { Flex } from "../../../../../components/index.js";
import { Lead } from "../../../../../elements/index.js";
import FieldBoundaryProvider from "../../../DataContext/FieldBoundary/FieldBoundaryProvider.js";
import SectionContainerContext from "../containers/SectionContainerContext.js";
import Toolbar from "../Toolbar/Toolbar.js";
import DoneButton from "./DoneButton.js";
import CancelButton from "./CancelButton.js";
import SectionContainer from "../containers/SectionContainer.js";
import withComponentMarkers from "../../../../../shared/helpers/withComponentMarkers.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function EditContainer(props) {
  const {
    children,
    className,
    title,
    onDone,
    onCancel,
    ...restProps
  } = props || {};
  const ariaLabel = useMemo(() => convertJsxToString(title), [title]);
  const {
    containerMode,
    initialContainerMode,
    validateInitially,
    switchContainerMode,
    disableEditing
  } = useContext(SectionContainerContext) || {};
  const omitFocusManagementRef = useRef(false);
  const onPathError = useCallback((path, error) => {
    if (disableEditing) {
      return;
    }
    if (initialContainerMode === 'auto' && containerMode !== 'edit' && error instanceof Error) {
      omitFocusManagementRef.current = true;
      switchContainerMode === null || switchContainerMode === void 0 || switchContainerMode('edit');
    }
  }, [containerMode, disableEditing, initialContainerMode, switchContainerMode]);
  const childArray = Array.isArray(children) ? children : [children];
  const hasToolbar = childArray.some(child => React.isValidElement(child) && child.type === Toolbar);
  return _jsx(FieldBoundaryProvider, {
    showErrors: validateInitially,
    onPathError: onPathError,
    children: _jsx(SectionContainer, {
      mode: "edit",
      ariaLabel: ariaLabel,
      omitFocusManagementRef: omitFocusManagementRef,
      className: clsx('dnb-forms-section-edit-block', className),
      ...restProps,
      children: _jsxs(Flex.Stack, {
        children: [title && _jsx(Lead, {
          size: "basis",
          children: title
        }), children, hasToolbar ? null : _jsxs(Toolbar, {
          onDone: onDone,
          onCancel: onCancel,
          children: [_DoneButton || (_DoneButton = _jsx(DoneButton, {})), _CancelButton || (_CancelButton = _jsx(CancelButton, {}))]
        })]
      })
    })
  });
}
EditContainer.DoneButton = DoneButton;
EditContainer.CancelButton = CancelButton;
withComponentMarkers(EditContainer, {
  _supportsSpacingProps: true
});
export default EditContainer;
//# sourceMappingURL=EditContainer.js.map