@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 = 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");
var _withComponentMarkers = _interopRequireDefault(require("../../../../shared/helpers/withComponentMarkers.js"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
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)(undefined);
  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 = {
      open: 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 (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [children, (0, _jsxRuntime.jsx)(_Provider.default, {
      ...sharedProviderParams,
      children: (0, _jsxRuntime.jsx)(_index.HeightAnimation, {
        children: renderWithState === null || renderWithState === void 0 ? void 0 : renderWithState(getParamsRef.current())
      })
    })]
  });
}
(0, _withComponentMarkers.default)(SubmitConfirmation, {
  _supportsSpacingProps: 'children'
});
var _default = exports.default = SubmitConfirmation;
//# sourceMappingURL=SubmitConfirmation.js.map