@bigbinary/neetoui/dist/formik/BlockNavigation.js

neetoUI drives the experience at all neeto products

import _extends from '@babel/runtime/helpers/extends';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import React__default, { useState, useRef, useEffect } from 'react';
import { useFormikContext } from 'formik';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import { useHistory } from 'react-router-dom';
import '@bigbinary/neeto-hotkeys';
import '../overlayManager.js';
import '@babel/runtime/helpers/defineProperty';
import '@babel/runtime/helpers/classCallCheck';
import '@babel/runtime/helpers/createClass';
import '@bigbinary/neeto-cist';
import 'qs';
import 'ramda';
import { g as getLocale } from '../index-Dxaw6gl9.js';
import { useTranslation } from 'react-i18next';
import Button from '../Button.js';
import Modal from '../Modal.js';
import Typography from '../Typography.js';
import '../en-CIkXIYyl.js';
import '@babel/runtime/helpers/toConsumableArray';
import 'dayjs';
import 'dayjs/plugin/localeData';
import 'dayjs/plugin/utc';
import 'dayjs/plugin/weekday';
import 'dayjs/plugin/weekOfYear';
import 'classnames';
import '../Spinner.js';
import '../Tooltip.js';
import '@tippyjs/react';
import 'tippy.js';
import '@bigbinary/neeto-icons';
import '../useOverlayManager-AZIGhUYS.js';
import '@babel/runtime/helpers/esm/extends';
import '@babel/runtime/helpers/esm/objectWithoutPropertiesLoose';
import '@babel/runtime/helpers/esm/inheritsLoose';
import 'react-dom';

var useNavPrompt = function useNavPrompt(_ref) {
  var _ref$shouldBlock = _ref.shouldBlock,
    shouldBlock = _ref$shouldBlock === void 0 ? true : _ref$shouldBlock;
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    isBlocked = _useState2[0],
    setIsBlocked = _useState2[1];
  var history = useHistory();
  var unblockRef = useRef();
  var navRef = useRef();
  var continueNavigation = function continueNavigation() {
    if (isBlocked && unblockRef.current) {
      var _unblockRef$current;
      (_unblockRef$current = unblockRef.current) === null || _unblockRef$current === void 0 || _unblockRef$current.call(unblockRef);
      setIsBlocked(false);
      if (navRef.current) {
        var _navRef$current = navRef.current,
          action = _navRef$current.action,
          transition = _navRef$current.transition;
        handleNavigation(action, transition);
      }
    }
  };
  var hidePrompt = function hidePrompt() {
    return setIsBlocked(false);
  };
  var handleNavigation = function handleNavigation(action, transition) {
    switch (action) {
      case "PUSH":
        history.push(transition);
        break;
      case "REPLACE":
        history.replace(transition);
        break;
      case "POP":
        history.goBack();
        break;
    }
  };
  useEffect(function () {
    if (shouldBlock) {
      unblockRef.current = history.block(function (transition, action) {
        setIsBlocked(true);
        navRef.current = {
          transition: transition,
          action: action
        };
        return false;
      });
      return function () {
        if (unblockRef.current) {
          unblockRef.current();
        }
      };
    }
    return undefined;
  }, [shouldBlock]);
  return {
    isBlocked: isBlocked,
    continueNavigation: continueNavigation,
    hidePrompt: hidePrompt
  };
};

/* eslint-disable @bigbinary/neeto/file-name-and-export-name-standards */
var Alert = function Alert(_ref) {
  var _ref$isOpen = _ref.isOpen,
    isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
    onClose = _ref.onClose,
    onSubmit = _ref.onSubmit,
    onDiscardChanges = _ref.onDiscardChanges;
  var _useTranslation = useTranslation(),
    t = _useTranslation.t,
    i18n = _useTranslation.i18n;
  var submitButtonRef = useRef(null);
  var cancelButtonLabel = getLocale(i18n, t, "neetoui.blockNavigation.cancelButtonLabel");
  var submitButtonLabel = getLocale(i18n, t, "neetoui.blockNavigation.submitButtonLabel");
  return /*#__PURE__*/React__default.createElement(Modal, {
    isOpen: isOpen,
    onClose: onClose,
    closeButton: true,
    closeOnEsc: true,
    closeOnOutsideClick: true,
    "data-cy": "alert-box",
    initialFocusRef: submitButtonRef,
    size: "medium"
  }, /*#__PURE__*/React__default.createElement(Modal.Header, null, /*#__PURE__*/React__default.createElement(Typography, {
    "data-cy": "alert-title",
    style: "h2"
  }, getLocale(i18n, t, "neetoui.blockNavigation.alertTitle"))), /*#__PURE__*/React__default.createElement(Modal.Body, null, /*#__PURE__*/React__default.createElement(Typography, {
    "data-cy": "alert-message",
    lineHeight: "normal",
    style: "body2"
  }, getLocale(i18n, t, "neetoui.blockNavigation.alertMessage"))), /*#__PURE__*/React__default.createElement(Modal.Footer, {
    className: "neeto-ui-gap-2 neeto-ui-flex neeto-ui-justify-end neeto-ui-items-center"
  }, /*#__PURE__*/React__default.createElement(Button, {
    "data-cy": "alert-cancel-button",
    label: cancelButtonLabel,
    style: "danger",
    onClick: onDiscardChanges
  }), /*#__PURE__*/React__default.createElement(Button, {
    "data-cy": "alert-submit-button",
    label: submitButtonLabel,
    ref: submitButtonRef,
    style: "primary",
    onClick: onSubmit
  })));
};

var _excluded = ["isDirty"];
var BlockNavigation = function BlockNavigation(_ref) {
  var _ref$isDirty = _ref.isDirty,
    isDirty = _ref$isDirty === void 0 ? false : _ref$isDirty,
    otherProps = _objectWithoutProperties(_ref, _excluded);
  var formikContext = useFormikContext();
  var shouldBlock = isDirty || Boolean(formikContext) && Boolean(formikContext.dirty);
  var _useNavPrompt = useNavPrompt({
      shouldBlock: shouldBlock
    }),
    isBlocked = _useNavPrompt.isBlocked,
    continueNavigation = _useNavPrompt.continueNavigation,
    hidePrompt = _useNavPrompt.hidePrompt;
  var handleDiscardChanges = function handleDiscardChanges() {
    if (formikContext) formikContext.resetForm();
    hidePrompt();
    continueNavigation();
  };
  return /*#__PURE__*/React__default.createElement(Alert, _extends({
    isOpen: isBlocked,
    onClose: hidePrompt,
    onDiscardChanges: handleDiscardChanges,
    onSubmit: hidePrompt
  }, otherProps));
};

export { BlockNavigation as default };
//# sourceMappingURL=BlockNavigation.js.map