@dnb/eufemia/cjs/extensions/forms/Form/SubmitConfirmation/SubmitConfirmation.js

DNB Eufemia Design System UI Library

"use strict";
"use client";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _Context = _interopRequireDefault(require("../../DataContext/Context.js"));
var _useEventListener = _interopRequireDefault(require("../../DataContext/Provider/useEventListener.js"));
var _Provider = _interopRequireDefault(require("../../../../shared/Provider.js"));
var _index = require("../../../../components/index.js");
var _componentHelper = require("../../../../shared/component-helper.js");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function SubmitConfirmation(props) {
  const [, forceUpdate] = (0, _react.useReducer)(() => ({}), {});
  const {
    preventSubmitWhen,
    onStateChange,
    onSubmitResult,
    renderWithState,
    children
  } = props;
  const {
    setFormState,
    handleSubmit: handleFinalSubmit,
    submitState,
    formElementRef,
    internalDataRef
  } = (0, _react.useContext)(_Context.default);
  const confirmationStateRef = (0, _react.useRef)('idle');
  const submitStateRef = (0, _react.useRef)();
  const preventSubmitRef = (0, _react.useRef)(undefined);
  const validatePreventSubmit = (0, _react.useCallback)(() => {
    return preventSubmitRef.current = preventSubmitWhen === null || preventSubmitWhen === void 0 ? void 0 : preventSubmitWhen(getParamsRef.current());
  }, [preventSubmitWhen]);
  const setConfirmationState = (0, _react.useCallback)(async state => {
    confirmationStateRef.current = state;
    await (onStateChange === null || onStateChange === void 0 ? void 0 : onStateChange(getParamsRef.current()));
    const setBuffered = (target, keepPending) => {
      if (target === 'complete') {
        if (typeof window !== 'undefined') {
          window.requestAnimationFrame(() => setFormState(target, {
            keepPending
          }));
          return;
        }
      }
      setFormState(target, {
        keepPending
      });
    };
    switch (state) {
      case 'idle':
        setBuffered('complete', false);
        break;
      case 'readyToBeSubmitted':
        setBuffered('pending', true);
        break;
      case 'submitInProgress':
        setBuffered('pending', true);
        break;
      case 'submissionComplete':
        setBuffered('complete', false);
        break;
      default:
        forceUpdate();
    }
  }, [onStateChange, setFormState]);
  const getParamsRef = (0, _react.useRef)(() => {
    const confirmationState = confirmationStateRef.current;
    const connectWithDialog = {
      openState: confirmationState === 'readyToBeSubmitted',
      onConfirm: submitHandler,
      onDecline: cancelHandler,
      onClose: ({
        triggeredBy
      }) => {
        if (triggeredBy === 'keyboard') {
          cancelHandler();
        }
      }
    };
    return {
      data: internalDataRef === null || internalDataRef === void 0 ? void 0 : internalDataRef.current,
      confirmationState,
      setConfirmationState,
      submitHandler,
      cancelHandler,
      connectWithDialog,
      submitState: submitStateRef.current
    };
  });
  (0, _react.useMemo)(() => {
    if (Object.keys((0, _componentHelper.removeUndefinedProps)(submitState) || {}).length > 0) {
      submitStateRef.current = {
        ...submitState
      };
      onSubmitResult === null || onSubmitResult === void 0 || onSubmitResult(getParamsRef.current());
    }
  }, [submitState, onSubmitResult]);
  const setFocusOnButton = (0, _react.useCallback)(() => {
    try {
      const form = formElementRef.current;
      const element = form.querySelector('.dnb-forms-submit-button') || form;
      element.focus();
    } catch (e) {}
  }, [formElementRef]);
  const cancelHandler = (0, _react.useCallback)(async () => {
    await setConfirmationState('idle');
    setFocusOnButton();
  }, [setFocusOnButton, setConfirmationState]);
  const handleSubmit = (0, _react.useCallback)(async ({
    preventSubmit
  }) => {
    if (confirmationStateRef.current === 'submitInProgress') {
      return;
    }
    if (validatePreventSubmit() !== true) {
      await setConfirmationState('submitInProgress');
      return;
    }
    submitStateRef.current = undefined;
    preventSubmit();
    await setConfirmationState('readyToBeSubmitted');
  }, [setConfirmationState, validatePreventSubmit]);
  const {
    removeEvent
  } = (0, _useEventListener.default)('onSubmit', handleSubmit);
  const submitHandler = (0, _react.useCallback)(async () => {
    removeEvent();
    await setConfirmationState('submitInProgress');
    await handleFinalSubmit();
    await setConfirmationState('submissionComplete');
    setFocusOnButton();
  }, [removeEvent, setConfirmationState, handleFinalSubmit, setFocusOnButton]);
  const sharedProviderParams = {
    formElement: {
      disabled: false
    }
  };
  return _react.default.createElement(_react.default.Fragment, null, children, _react.default.createElement(_Provider.default, sharedProviderParams, _react.default.createElement(_index.HeightAnimation, null, renderWithState === null || renderWithState === void 0 ? void 0 : renderWithState(getParamsRef.current()))));
}
SubmitConfirmation._supportsSpacingProps = 'children';
var _default = exports.default = SubmitConfirmation;
//# sourceMappingURL=SubmitConfirmation.js.map