@dnb/eufemia/extensions/forms/Form/Isolation/IsolationResetButton.js

DNB Eufemia Design System UI Library

"use client";

import React, { useCallback, useContext } from 'react';
import clsx from 'clsx';
import { Button, Dialog } from "../../../../components/index.js";
import useTranslation from "../../hooks/useTranslation.js";
import FieldBoundaryContext from "../../DataContext/FieldBoundary/FieldBoundaryContext.js";
import { reset } from "../../../../icons/index.js";
import useHasContentChanged from "./useHasContentChanged.js";
import { omitDataValueReadWriteProps } from "../../types.js";
import useDataContextSnapshot from "./useDataContextSnapshot.js";
import useHandleStatus from "./useHandleStatus.js";
import { isolationError } from "./IsolatedContainer.js";
import IsolationContext from "./IsolationContext.js";
import { jsx as _jsx } from "react/jsx-runtime";
export default function IsolationResetButton(props) {
  const {
    text,
    children,
    onClick,
    className,
    hidden,
    showConfirmDialog = true,
    showWhen,
    ...restProps
  } = props;
  const {
    outerContext,
    preventUncommittedChanges
  } = useContext(IsolationContext);
  const {
    setShowBoundaryErrors
  } = useContext(FieldBoundaryContext) || {};
  const {
    handleReset
  } = useDataContextSnapshot({
    enabled: true
  });
  const {
    hasContentChanged
  } = useHasContentChanged();
  const {
    showStatus: showCommitStatus
  } = useHandleStatus({
    outerContext,
    preventUncommittedChanges,
    error: isolationError,
    name: 'isolation-reset-button'
  });
  const buttonProps = omitDataValueReadWriteProps(restProps);
  const {
    resetButton
  } = useTranslation().IterateEditContainer;
  const {
    confirmResetText
  } = useTranslation().IterateEditContainer;
  const textContent = text || children || resetButton;
  const buttonWrapperRef = React.useRef(null);
  const handleClick = useCallback(({
    close,
    event
  }) => {
    var _buttonWrapperRef$cur;
    close === null || close === void 0 || close();
    onClick === null || onClick === void 0 || onClick(event);
    handleReset();
    setShowBoundaryErrors === null || setShowBoundaryErrors === void 0 || setShowBoundaryErrors(false);
    (_buttonWrapperRef$cur = buttonWrapperRef.current) === null || _buttonWrapperRef$cur === void 0 || _buttonWrapperRef$cur.focus();
  }, [onClick, handleReset, setShowBoundaryErrors]);
  if (hidden) {
    return null;
  }
  const triggerAttributes = {
    className: clsx('dnb-forms-isolate__reset-button', className),
    text: textContent,
    variant: textContent ? 'tertiary' : 'secondary',
    icon: reset,
    iconPosition: 'left',
    disabled: typeof hasContentChanged === 'boolean' ? !hasContentChanged : false,
    ...buttonProps
  };
  return _jsx("span", {
    tabIndex: -1,
    ref: buttonWrapperRef,
    className: "dnb-no-focus",
    hidden: !(showWhen === 'uncommittedChangeDetected' ? Boolean(showCommitStatus) : true),
    children: showConfirmDialog ? _jsx(Dialog, {
      variant: "confirmation",
      title: confirmResetText,
      triggerAttributes: triggerAttributes,
      onConfirm: handleClick
    }) : _jsx(Button, {
      ...triggerAttributes,
      onClick: args => handleClick(args),
      ...buttonProps,
      children: resetButton
    })
  });
}
//# sourceMappingURL=IsolationResetButton.js.map