@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
132 lines (131 loc) • 7.36 kB
JavaScript
"use strict";
"use client";
require("core-js/modules/web.dom-collections.iterator.js");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _Visibility = _interopRequireDefault(require("../Visibility"));
var _Context = _interopRequireDefault(require("../../DataContext/Context"));
var _useSharedState = require("../../../../shared/helpers/useSharedState");
var _useMounted = _interopRequireDefault(require("../../../../shared/helpers/useMounted"));
var _setContent = _interopRequireDefault(require("./setContent"));
var _components = require("../../../../components");
var _elements = require("../../../../elements");
var _hooks = require("../../hooks");
var _MainHeading = _interopRequireDefault(require("../MainHeading"));
var _SubmitButton = _interopRequireDefault(require("../SubmitButton"));
const _excluded = ["id", "content", "success", "error", "onCancel", "className", "children"];
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
function InfoOverlay(props) {
const {
id: idProp,
formState
} = (0, _react.useContext)(_Context.default);
const {
id = idProp,
content: contentProp,
success,
error,
onCancel,
className,
children
} = props,
restProps = _objectWithoutProperties(props, _excluded);
const {
data
} = (0, _useSharedState.useSharedState)(id);
const {
content = contentProp
} = data || {};
const translations = (0, _hooks.useTranslation)();
const mountedRef = (0, _useMounted.default)();
const innerRef = (0, _react.useRef)(null);
const onAnimationEnd = (0, _react.useCallback)(state => {
if (mountedRef.current && state === 'opened') {
var _innerRef$current$foc, _innerRef$current;
(_innerRef$current$foc = (_innerRef$current = innerRef.current).focus) === null || _innerRef$current$foc === void 0 ? void 0 : _innerRef$current$foc.call(_innerRef$current);
}
}, [mountedRef]);
const currentContentRef = (0, _react.useRef)();
if (content) {
currentContentRef.current = content;
}
const onCancelHandler = (0, _react.useCallback)(() => {
if (id) {
(0, _setContent.default)(id, undefined);
}
onCancel === null || onCancel === void 0 ? void 0 : onCancel();
}, [id, onCancel]);
const childrenAreVisible = typeof content !== 'undefined' ? !(content === content) : undefined;
const statusContentIsVisible = typeof content !== 'undefined' ? content === content : false;
const status = typeof content === 'string' && !content.includes(' ') ? content : undefined;
let statusContent = content;
if (currentContentRef.current === 'success') {
const tr = translations.InfoOverlaySuccess;
const {
title,
description,
buttonText,
buttonHref,
buttonClickHandler
} = success || {};
statusContent = _react.default.createElement(_components.Section, _extends({
variant: "info",
innerSpace: {
top: 'large',
bottom: 'xx-large'
}
}, restProps), _react.default.createElement(_components.Flex.Stack, {
gap: "large"
}, _react.default.createElement(_MainHeading.default, null, title !== null && title !== void 0 ? title : tr.title), _react.default.createElement(_elements.P, null, description !== null && description !== void 0 ? description : tr.description), _react.default.createElement(_components.Button, {
href: buttonClickHandler ? undefined : buttonHref !== null && buttonHref !== void 0 ? buttonHref : '/',
on_click: buttonClickHandler
}, buttonText !== null && buttonText !== void 0 ? buttonText : tr.buttonText)));
} else if (currentContentRef.current === 'error') {
const tr = translations.InfoOverlayError;
const {
title,
description,
cancelButton,
retryButton
} = error || {};
statusContent = _react.default.createElement(_components.Section, _extends({
variant: "transparent",
innerSpace: {
top: 'large',
bottom: 'xx-large'
}
}, restProps), _react.default.createElement(_components.Flex.Stack, {
gap: "large"
}, _react.default.createElement(_MainHeading.default, null, title !== null && title !== void 0 ? title : tr.title), _react.default.createElement(_components.HeightAnimation, null, _react.default.createElement(_elements.P, null, formState === 'pending' ? tr.retryingText : description !== null && description !== void 0 ? description : tr.description)), _react.default.createElement(_components.Flex.Horizontal, null, _react.default.createElement(_components.Button, {
variant: "secondary",
onClick: onCancelHandler
}, cancelButton !== null && cancelButton !== void 0 ? cancelButton : tr.cancelButton), _react.default.createElement(_SubmitButton.default, null, retryButton !== null && retryButton !== void 0 ? retryButton : tr.retryButton))));
}
return _react.default.createElement("div", {
className: (0, _classnames.default)("dnb-forms-info-overlay dnb-no-focus", className, status && `dnb-forms-info-overlay--${status}`),
tabIndex: -1,
ref: innerRef
}, _react.default.createElement(_Visibility.default, {
visible: statusContentIsVisible,
onAnimationEnd: onAnimationEnd,
animate: true
}, statusContent), _react.default.createElement(_Visibility.default, {
visible: childrenAreVisible,
onAnimationEnd: onAnimationEnd,
animate: true,
keepInDOM: true
}, children));
}
InfoOverlay.setContent = _setContent.default;
InfoOverlay._supportsSpacingProps = true;
var _default = exports.default = InfoOverlay;
//# sourceMappingURL=InfoOverlay.js.map