@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
155 lines (154 loc) • 6.72 kB
JavaScript
;
"use client";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
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"));
var _withComponentMarkers = _interopRequireDefault(require("../../../../shared/helpers/withComponentMarkers.js"));
var _jsxRuntime = require("react/jsx-runtime");
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 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 overlayRef = (0, _react.useRef)(null);
const onAnimationEnd = (0, _react.useCallback)(state => {
if (mountedRef.current && state === 'opened') {
var _overlayRef$current$f, _overlayRef$current;
(_overlayRef$current$f = (_overlayRef$current = overlayRef.current).focus) === null || _overlayRef$current$f === void 0 || _overlayRef$current$f.call(_overlayRef$current);
}
}, [mountedRef]);
const currentContentRef = (0, _react.useRef)(undefined);
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 = (0, _jsxRuntime.jsx)(_index2.Section, {
variant: "information",
innerSpace: {
top: 'large',
bottom: 'xx-large'
},
...restProps,
children: (0, _jsxRuntime.jsxs)(_index2.Flex.Stack, {
gap: "large",
children: [(0, _jsxRuntime.jsx)(_index5.default, {
children: title !== null && title !== void 0 ? title : tr.title
}), (0, _jsxRuntime.jsx)(_index3.P, {
children: description !== null && description !== void 0 ? description : tr.description
}), (0, _jsxRuntime.jsx)(_index2.Button, {
href: buttonClickHandler ? undefined : buttonHref !== null && buttonHref !== void 0 ? buttonHref : '/',
onClick: buttonClickHandler,
children: buttonText !== null && buttonText !== void 0 ? buttonText : tr.buttonText
})]
})
});
} else if (currentContentRef.current === 'error') {
const tr = translations.InfoOverlayError;
const {
title,
description,
cancelButton,
retryButton
} = error || {};
statusContent = (0, _jsxRuntime.jsx)(_index2.Section, {
variant: "transparent",
innerSpace: {
top: 'large',
bottom: 'xx-large'
},
...restProps,
children: (0, _jsxRuntime.jsxs)(_index2.Flex.Stack, {
gap: "large",
children: [(0, _jsxRuntime.jsx)(_index5.default, {
children: title !== null && title !== void 0 ? title : tr.title
}), (0, _jsxRuntime.jsx)(_index2.HeightAnimation, {
children: (0, _jsxRuntime.jsx)(_index3.P, {
children: formState === 'pending' ? tr.retryingText : description !== null && description !== void 0 ? description : tr.description
})
}), (0, _jsxRuntime.jsxs)(_index2.Flex.Horizontal, {
children: [(0, _jsxRuntime.jsx)(_index2.Button, {
variant: "secondary",
onClick: onCancelHandler,
children: cancelButton !== null && cancelButton !== void 0 ? cancelButton : tr.cancelButton
}), (0, _jsxRuntime.jsx)(_index6.default, {
children: retryButton !== null && retryButton !== void 0 ? retryButton : tr.retryButton
})]
})]
})
});
}
return (0, _jsxRuntime.jsxs)("div", {
className: (0, _clsx.default)("dnb-forms-info-overlay dnb-no-focus", className, status && `dnb-forms-info-overlay--${status}`),
tabIndex: -1,
ref: overlayRef,
children: [(0, _jsxRuntime.jsx)(_index.default, {
visible: statusContentIsVisible,
onAnimationEnd: onAnimationEnd,
animate: true,
children: statusContent
}), (0, _jsxRuntime.jsx)(_index2.HeightAnimation, {
open: childrenAreVisible,
onAnimationEnd: onAnimationEnd,
animate: true,
keepInDOM: true,
children: children
})]
});
}
InfoOverlay.setContent = _setContent.default;
(0, _withComponentMarkers.default)(InfoOverlay, {
_supportsSpacingProps: true
});
var _default = exports.default = InfoOverlay;
//# sourceMappingURL=InfoOverlay.js.map