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

DNB Eufemia Design System UI Library

"use client";

var _Hr;
import React, { useContext, useEffect, useState } from 'react';
import clsx from 'clsx';
import { useTranslation } from "../../../hooks/index.js";
import ToolbarContext from "./ToolbarContext.js";
import FieldBoundaryContext from "../../../DataContext/FieldBoundary/FieldBoundaryContext.js";
import { Hr } from "../../../../../elements/index.js";
import { Flex, FormStatus } from "../../../../../components/index.js";
import Space from "../../../../../components/Space.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default function Toolbar(props) {
  const {
    errorInSection
  } = useTranslation().SectionEditContainer;
  const {
    children,
    className,
    onEdit,
    onDone,
    onCancel,
    ...rest
  } = props;
  const {
    hasError,
    hasVisibleError
  } = useContext(FieldBoundaryContext) || {};
  const [showError, setShowError] = useState(false);
  useEffect(() => {
    if (showError && !hasError) {
      setShowError(false);
    }
  }, [hasError, showError]);
  return _jsxs(Space, {
    className: clsx('dnb-forms-section-toolbar', className),
    ...rest,
    children: [_Hr || (_Hr = _jsx(Hr, {
      space: 0
    })), _jsx(ToolbarContext, {
      value: {
        setShowError,
        onEdit,
        onDone,
        onCancel
      },
      children: _jsx(Flex.Horizontal, {
        top: "x-small",
        gap: "large",
        children: children
      })
    }), _jsx(FormStatus, {
      show: showError && hasVisibleError,
      shellSpace: {
        top: 'x-small'
      },
      noAnimation: false,
      children: errorInSection
    })]
  });
}
//# sourceMappingURL=Toolbar.js.map