@dnb/eufemia/es/extensions/forms/Iterate/EditContainer/CancelButton.js

DNB Eufemia Design System UI Library

"use client";

import _extends from "@babel/runtime/helpers/esm/extends";
import React, { useCallback, useContext, useEffect, useRef } from 'react';
import classnames from 'classnames';
import { Button, Dialog } from "../../../../components/index.js";
import useTranslation from "../../hooks/useTranslation.js";
import IterateItemContext from "../IterateItemContext.js";
import ToolbarContext from "../Toolbar/ToolbarContext.js";
import FieldBoundaryContext from "../../DataContext/FieldBoundary/FieldBoundaryContext.js";
import PushContainerContext from "../PushContainer/PushContainerContext.js";
import { close } from "../../../../icons/index.js";
import RemoveButton from "../RemoveButton/index.js";
export default function CancelButton(props) {
  const {
    onClick,
    className,
    showConfirmDialog = true,
    ...rest
  } = props;
  const {
    restoreOriginalValue,
    switchContainerMode,
    containerMode,
    arrayValue,
    isNew,
    index
  } = useContext(IterateItemContext) || {};
  const {
    setShowBoundaryErrors,
    verifyFieldError,
    hasVisibleError
  } = useContext(FieldBoundaryContext) || {};
  const {
    setShowError
  } = useContext(ToolbarContext) || {};
  const pushContext = useContext(PushContainerContext);
  const translation = useTranslation();
  const {
    cancelButton,
    removeButton
  } = translation.IterateEditContainer;
  const {
    confirmCancelText
  } = translation.SectionEditContainer;
  const valueBackupRef = useRef();
  useEffect(() => {
    if (containerMode === 'edit' && !valueBackupRef.current) {
      valueBackupRef.current = arrayValue?.[index];
    }
    if (containerMode === 'view') {
      valueBackupRef.current = null;
    }
  }, [arrayValue, containerMode, index]);
  const cancelHandler = useCallback(({
    close,
    event
  }) => {
    close?.();
    restoreOriginalValue?.(valueBackupRef.current);
    requestAnimationFrame(() => {
      const isInsidePushContainer = Boolean(pushContext);
      if (!isInsidePushContainer && verifyFieldError?.()) {
        setShowBoundaryErrors?.(true);
        if (hasVisibleError) {
          setShowError(true);
        }
      } else {
        setShowError(false);
        setShowBoundaryErrors?.(false);
        switchContainerMode?.('view');
      }
      onClick?.(event);
    });
  }, [hasVisibleError, pushContext, onClick, restoreOriginalValue, setShowBoundaryErrors, setShowError, switchContainerMode, verifyFieldError]);
  const wasNew = useWasNew({
    isNew,
    containerMode
  });
  if (containerMode === 'edit' && arrayValue?.length === 0) {
    return null;
  }
  if (wasNew) {
    return React.createElement(RemoveButton, _extends({
      text: removeButton,
      onClick: onClick,
      showConfirmDialog: showConfirmDialog
    }, rest));
  }
  const triggerAttributes = {
    variant: 'tertiary',
    className: classnames('dnb-forms-iterate__cancel-button', className),
    icon: close,
    icon_position: 'left',
    text: cancelButton,
    ...rest
  };
  if (showConfirmDialog) {
    return React.createElement(Dialog, {
      variant: "confirmation",
      title: confirmCancelText,
      triggerAttributes: triggerAttributes,
      onConfirm: cancelHandler
    });
  }
  return React.createElement(Button, _extends({}, triggerAttributes, {
    on_click: cancelHandler
  }, rest));
}
export function useWasNew({
  isNew,
  containerMode
}) {
  const wasNewRef = useRef(isNew);
  useEffect(() => {
    if (containerMode === 'view') {
      wasNewRef.current = false;
    }
  }, [isNew, containerMode]);
  return wasNewRef.current;
}
//# sourceMappingURL=CancelButton.js.map