@makeen.io/material-ui-kit/distr/molecules/RouteLeavingGuard/LeaveGuard.js

Makeen UI components kit. Based on material-ui.

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";import React from "react";
import { ExplorerConfirmationDialog } from "./..";
import { Prompt } from "react-router-dom";
export default function LeaveGuard(props) {var
    when = props.when,pathname = props.pathname,shouldBlockNavigation = props.shouldBlockNavigation,navigate = props.navigate,_props$confirmColor = props.confirmColor,confirmColor = _props$confirmColor === void 0 ? "warning" : _props$confirmColor,_props$title = props.title,title = _props$title === void 0 ? "Are you sure you want to Cancel?" : _props$title,_props$confirmText = props.confirmText,confirmText = _props$confirmText === void 0 ? "Yes, Cancel" : _props$confirmText,_props$cancelText = props.cancelText,cancelText = _props$cancelText === void 0 ? "No, Continue Editing" : _props$cancelText,_props$messageText = props.messageText,messageText = _props$messageText === void 0 ? "All the changes which you have done will be reverted." : _props$messageText,onConfirm = props.onConfirm;var _React$useState =
    React.useState(false),_React$useState2 = _slicedToArray(_React$useState, 2),modalVisible = _React$useState2[0],setModalVisible = _React$useState2[1];var _React$useState3 =
    React.useState(null),_React$useState4 = _slicedToArray(_React$useState3, 2),lastLocation = _React$useState4[0],setLastLocation = _React$useState4[1];var _React$useState5 =
    React.useState(false),_React$useState6 = _slicedToArray(_React$useState5, 2),confirmedNavigation = _React$useState6[0],setConfirmedNavigation = _React$useState6[1];
  var onConfirmHandler = React.useCallback(function () {
    if (onConfirm) {
      onConfirm.apply(void 0, arguments);
    }
  }, [onConfirm]);
  var showModal = function showModal(location) {
    setModalVisible(true);
    setLastLocation(location);
  };
  var closeModal = function closeModal(callback) {
    setModalVisible(false);
    if (callback) {
      callback();
    }
  };
  React.useEffect(function () {
    if (confirmedNavigation) {
      setConfirmedNavigation(false);
    }
  }, [when, confirmedNavigation]);
  var handleBlockedNavigation = function handleBlockedNavigation(nextLocation) {
    if (!confirmedNavigation && shouldBlockNavigation(nextLocation)) {
      showModal(nextLocation);
      return false;
    }
    return true;
  };
  var handleConfirmNavigationClick = function handleConfirmNavigationClick() {
    closeModal(function () {
      if (lastLocation) {
        setConfirmedNavigation(true);
      }
    });
  };
  React.useEffect(function () {
    if (confirmedNavigation) {
      if (pathname !== lastLocation.pathname) {
        onConfirmHandler();
        navigate(lastLocation.pathname);
      }
    }
  }, [confirmedNavigation, lastLocation, navigate, pathname, onConfirmHandler]);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/
  React.createElement(Prompt, { when: when, message: handleBlockedNavigation }), /*#__PURE__*/
  React.createElement(ExplorerConfirmationDialog, { title: title, open: modalVisible, confirmText: confirmText, cancelText: cancelText, confirmColor: confirmColor, onClose: function onClose() {return closeModal();}, onCancel: function onCancel() {return closeModal();}, onConfirm: function onConfirm() {
      handleConfirmNavigationClick();
    } }, messageText));
}
//# sourceMappingURL=LeaveGuard.js.map