@bigbinary/neetoui
Version:
neetoUI drives the experience at all neeto products
191 lines (185 loc) • 7.28 kB
JavaScript
'use strict';
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
var React = require('react');
var formik = require('formik');
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var reactRouterDom = require('react-router-dom');
require('@bigbinary/neeto-hotkeys');
require('../overlayManager.js');
require('@babel/runtime/helpers/classCallCheck');
require('@babel/runtime/helpers/createClass');
require('@bigbinary/neeto-cist');
require('qs');
require('ramda');
require('../index-D0rucYPS.js');
require('i18next');
var reactI18next = require('react-i18next');
var Button = require('../Button.js');
var Modal = require('../Modal.js');
var Typography = require('../Typography.js');
var index = require('../index-DFhZ7eXY.js');
var jsxRuntime = require('react/jsx-runtime');
require('@babel/runtime/helpers/toConsumableArray');
require('dayjs');
require('dayjs/plugin/localeData');
require('dayjs/plugin/utc');
require('dayjs/plugin/weekday');
require('dayjs/plugin/weekOfYear');
require('classnames');
require('../Spinner.js');
require('../Tooltip.js');
require('@tippyjs/react');
require('tippy.js');
require('../usePrefersReducedMotion-DIgi-Aj7.js');
require('@bigbinary/neeto-icons/Close');
require('../Portal-cLX0YU8X.js');
require('@babel/runtime/helpers/esm/extends');
require('@babel/runtime/helpers/esm/objectWithoutPropertiesLoose');
require('@babel/runtime/helpers/esm/inheritsLoose');
require('react-dom');
require('../en-BfFI1Si2.js');
var useNavPrompt = function useNavPrompt(_ref) {
var _ref$shouldBlock = _ref.shouldBlock,
shouldBlock = _ref$shouldBlock === void 0 ? true : _ref$shouldBlock;
var _useState = React.useState(false),
_useState2 = _slicedToArray(_useState, 2),
isBlocked = _useState2[0],
setIsBlocked = _useState2[1];
var history = reactRouterDom.useHistory();
var unblockRef = React.useRef();
var navRef = React.useRef();
var continueNavigation = function continueNavigation() {
if (isBlocked && unblockRef.current) {
var _unblockRef$current;
(_unblockRef$current = unblockRef.current) === null || _unblockRef$current === void 0 ? 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;
}
};
React.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 = reactI18next.useTranslation(),
t = _useTranslation.t,
i18n = _useTranslation.i18n;
var submitButtonRef = React.useRef(null);
var cancelButtonLabel = index.getLocale(i18n, t, "neetoui.blockNavigation.cancelButtonLabel");
var submitButtonLabel = index.getLocale(i18n, t, "neetoui.blockNavigation.submitButtonLabel");
return /*#__PURE__*/jsxRuntime.jsxs(Modal, {
isOpen: isOpen,
onClose: onClose,
closeButton: true,
closeOnEsc: true,
closeOnOutsideClick: true,
"data-testid": "alert-box",
initialFocusRef: submitButtonRef,
size: "medium",
children: [/*#__PURE__*/jsxRuntime.jsx(Modal.Header, {
children: /*#__PURE__*/jsxRuntime.jsx(Typography, {
"data-testid": "alert-title",
style: "h2",
children: index.getLocale(i18n, t, "neetoui.blockNavigation.alertTitle")
})
}), /*#__PURE__*/jsxRuntime.jsx(Modal.Body, {
children: /*#__PURE__*/jsxRuntime.jsx(Typography, {
"data-testid": "alert-message",
lineHeight: "normal",
style: "body2",
children: index.getLocale(i18n, t, "neetoui.blockNavigation.alertMessage")
})
}), /*#__PURE__*/jsxRuntime.jsxs(Modal.Footer, {
className: "neeto-ui-gap-2 neeto-ui-flex neeto-ui-justify-end neeto-ui-items-center",
children: [/*#__PURE__*/jsxRuntime.jsx(Button, {
"data-testid": "alert-cancel-button",
label: cancelButtonLabel,
style: "danger",
onClick: onDiscardChanges
}), /*#__PURE__*/jsxRuntime.jsx(Button, {
"data-testid": "alert-submit-button",
label: submitButtonLabel,
ref: submitButtonRef,
style: "primary",
onClick: onSubmit
})]
})]
});
};
var _excluded = ["isDirty"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var BlockNavigation = function BlockNavigation(_ref) {
var _ref$isDirty = _ref.isDirty,
isDirty = _ref$isDirty === void 0 ? false : _ref$isDirty,
otherProps = _objectWithoutProperties(_ref, _excluded);
var formikContext = formik.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__*/jsxRuntime.jsx(Alert, _objectSpread({
isOpen: isBlocked,
onClose: hidePrompt,
onDiscardChanges: handleDiscardChanges,
onSubmit: hidePrompt
}, otherProps));
};
module.exports = BlockNavigation;
//# sourceMappingURL=BlockNavigation.js.map