@focuson/form_components
Version:
Components that can be used by @focuson/forms
55 lines (54 loc) • 3.84 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Messages = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const utils_1 = require("@focuson/utils");
const state_1 = require("@focuson/state");
const canDisplayInThisWindow = (pageTime, nextPageTime) => (message) => {
const time = new Date(message.time).getTime();
if (time >= pageTime)
if (nextPageTime === undefined || time < nextPageTime)
return true;
return false;
};
const getMessage = (message) => {
const size = 300;
return message.length > size ? message.slice(0, size) + " ..." : message;
};
const OneMessage = (removeMessage, cssClasses) => (message, index) => (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: cssClasses(message.level) }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ id: `messages[${index}].msg`, role: (0, utils_1.ariaRoleForMessageLevel)(message.level), title: message.msg }, { children: [" ", getMessage(message.msg), " "] })), (0, jsx_runtime_1.jsx)("a", Object.assign({ id: `messages[${index}].close`, className: "close-button", onClick: () => removeMessage(index) }, { children: "\u00D7" }))] }), index);
const OneNewMessage = (removeMessage, cssClasses) => (message, index) => (0, jsx_runtime_1.jsx)("div", Object.assign({ role: "alert" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `page-notification-wrapper ${message.level}`, role: (0, utils_1.ariaRoleForMessageLevel)(message.level), title: message.msg }, { children: [(0, jsx_runtime_1.jsx)("div", { className: "notification-icon" }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "" }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "notification-msg-noheader" }, { children: message.msg })) })), (0, jsx_runtime_1.jsx)("a", Object.assign({ id: `messages[${index}].close`, className: "close-button", onClick: () => removeMessage(index) }, { children: "\u00D7" }))] })) }), index);
// <div key={index} className={cssClasses ( message.level )}>
// <span id={`messages[${index}].msg`} role={ariaRoleForMessageLevel ( message.level )} title={message.msg}> {getMessage ( message.msg )} </span>
// <a id={`messages[${index}].close`} className="close-button" onClick={() => removeMessage ( index )}>×</a>
// </div>;
function Messages({ state, pageDisplayTime, nextPageDisplayTime }) {
const pageTime = new Date(pageDisplayTime).getTime();
const nextPageTime = nextPageDisplayTime ? new Date(nextPageDisplayTime).getTime() : undefined;
const simpleMessages = state.optJsonOr([]);
const actualMessages = (0, utils_1.unique)(simpleMessages.filter(canDisplayInThisWindow(pageTime, nextPageTime)), sm => `${sm.level}-${sm.msg}`);
if (actualMessages.length === 0)
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
const removeMessage = (index) => {
const messagesArray = [...simpleMessages];
messagesArray.splice(index, 1);
state.setJson(messagesArray, (0, state_1.reasonFor)('Messages', 'onClick', `messages[${index}].close`, 'Remove message'));
};
const cssClasses = (messageType) => {
if (!messageType)
return;
const classes = ['alert-dismissable'];
const alertTypeClass = {
success: 'alert alert-success',
error: 'alert alert-danger',
info: 'alert alert-info',
warning: 'alert alert-warning'
};
classes.push(alertTypeClass[messageType]);
return classes.join(' ');
};
// TO DO parse message
if (!simpleMessages.length)
return null;
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "m-3 messages" }, { children: actualMessages.map(OneNewMessage(removeMessage, cssClasses)) })));
}
exports.Messages = Messages;