@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
127 lines (126 loc) • 6.5 kB
JavaScript
"use strict";
"use client";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _index = _interopRequireDefault(require("../Visibility/index.js"));
var _Context = _interopRequireDefault(require("../../DataContext/Context.js"));
var _useSharedState = require("../../../../shared/helpers/useSharedState.js");
var _useMounted = _interopRequireDefault(require("../../../../shared/helpers/useMounted.js"));
var _setContent = _interopRequireDefault(require("./setContent.js"));
var _index2 = require("../../../../components/index.js");
var _index3 = require("../../../../elements/index.js");
var _index4 = require("../../hooks/index.js");
var _index5 = _interopRequireDefault(require("../MainHeading/index.js"));
var _index6 = _interopRequireDefault(require("../SubmitButton/index.js"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
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 InfoOverlay(props) {
const {
id: idProp,
formState
} = (0, _react.useContext)(_Context.default);
const {
id = idProp,
content: contentProp,
success,
error,
onCancel,
className,
children,
...restProps
} = props;
const {
data
} = (0, _useSharedState.useSharedState)(id ? (0, _useSharedState.createReferenceKey)(id, 'info-overlay') : undefined);
const {
content = contentProp
} = data || {};
const translations = (0, _index4.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 || _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 || 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(_index2.Section, _extends({
variant: "info",
innerSpace: {
top: 'large',
bottom: 'xx-large'
}
}, restProps), _react.default.createElement(_index2.Flex.Stack, {
gap: "large"
}, _react.default.createElement(_index5.default, null, title !== null && title !== void 0 ? title : tr.title), _react.default.createElement(_index3.P, null, description !== null && description !== void 0 ? description : tr.description), _react.default.createElement(_index2.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(_index2.Section, _extends({
variant: "transparent",
innerSpace: {
top: 'large',
bottom: 'xx-large'
}
}, restProps), _react.default.createElement(_index2.Flex.Stack, {
gap: "large"
}, _react.default.createElement(_index5.default, null, title !== null && title !== void 0 ? title : tr.title), _react.default.createElement(_index2.HeightAnimation, null, _react.default.createElement(_index3.P, null, formState === 'pending' ? tr.retryingText : description !== null && description !== void 0 ? description : tr.description)), _react.default.createElement(_index2.Flex.Horizontal, null, _react.default.createElement(_index2.Button, {
variant: "secondary",
onClick: onCancelHandler
}, cancelButton !== null && cancelButton !== void 0 ? cancelButton : tr.cancelButton), _react.default.createElement(_index6.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(_index.default, {
visible: statusContentIsVisible,
onAnimationEnd: onAnimationEnd,
animate: true
}, statusContent), _react.default.createElement(_index2.HeightAnimation, {
open: childrenAreVisible,
onAnimationEnd: onAnimationEnd,
animate: true,
keepInDOM: true
}, children));
}
InfoOverlay.setContent = _setContent.default;
InfoOverlay._supportsSpacingProps = true;
var _default = exports.default = InfoOverlay;
//# sourceMappingURL=InfoOverlay.js.map