@focuson/form_components
Version:
Components that can be used by @focuson/forms
72 lines (71 loc) • 4.99 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.MyCombined = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const pages_1 = require("@focuson/pages");
const state_1 = require("@focuson/state");
const messages_1 = require("./messages");
const debugState_1 = require("./debugState");
const common_1 = require("./common");
const react_1 = require("react");
//export type CloseOnePage<S, C> = ( errorPrefix: string, s: S, optionalForPath: Optional<S, any>|undefined, context: C, change: ModalChangeCommands[] ) => Transform<S, any>[]
const popupJSX = (p, i, messagesJSX) => {
const id = `page${i}`;
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ id: id, onClick: e => {
if (p.shouldModalPageCloseOnClickAway)
p.state.massTransform((0, state_1.reasonFor)('popupJSX - modal', 'onClick', id))((0, pages_1.popPage)(p.state));
}, className: "modalPopup show-modal focus-page" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "modalPopup-content", onClick: e => e.stopPropagation() }, { children: [messagesJSX, p.element] })) }), i));
};
const arbitaryJSX = (p, i, messagesJSX) => {
const id = `page${i}`;
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ id: id, className: "modalPopup show-modal focus-page", onClick: e => {
if (p.shouldModalPageCloseOnClickAway)
p.state.massTransform((0, state_1.reasonFor)('popupJSX - arbitrary', 'onClick', id))((0, pages_1.popPage)(p.state));
} }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ onClick: e => e.stopPropagation() }, { children: [messagesJSX, p.element] })) }), i));
};
const modalPageJSX = (p, i, messagesJSX) => {
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ id: `page${i}`, className: pages_1.focusPageClassName }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ id: 'contentWrapper' }, { children: [messagesJSX, p.element] })) }), i));
};
const mainPageJSX = (p, i, messagesJSX) => {
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ id: `page${i}`, className: pages_1.focusPageClassName }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ id: 'contentWrapper' }, { children: [messagesJSX, p.element] })) }), i));
};
function MyCombined(state, pages) {
var _a;
if (pages_1.firstTimeHappened) {
(0, react_1.useEffect)(() => {
// console.log ( 'First time happened' )
(0, pages_1.resetFirstTimeHappened)();
const thisPage = (0, pages_1.findThisPageElement)(pages_1.focusPageClassName);
const inputs = thisPage.getElementsByTagName('input');
if (inputs.length > 0) {
const item = inputs.item(0);
if (item) {
item.focus({ preventScroll: false });
item.select();
}
}
});
}
const lastIndexOfMainOrModalPage = (0, common_1.lastIndexOf)(pages, p => p.pageType === 'MainPage' || p.pageType === 'ModalPage');
const clippedPages = pages.slice(lastIndexOfMainOrModalPage);
const pagesToShow = clippedPages.length === 0 ? pages : clippedPages; // this occurs when we have a mainpop at the beginning
const showDebug = ((_a = state.main.environment) === null || _a === void 0 ? void 0 : _a.showDebugButton) !== false;
// console.log ( 'My Combined', 'State', state.main, 'showDebug', showDebug )
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ id: 'container', className: 'combine' }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'glassPane' }, { children: pagesToShow.map((p, i) => {
var _a;
const nextPageTime = (_a = pagesToShow[i + 1]) === null || _a === void 0 ? void 0 : _a.pageDisplayedTime;
const messagesJSX = (0, jsx_runtime_1.jsx)(messages_1.Messages, { state: state.focusOn('messages'), pageDisplayTime: p.pageDisplayedTime, nextPageDisplayTime: nextPageTime });
if (p.pageType === 'MainPopup')
return popupJSX(p, i, messagesJSX);
if (p.pageType === 'ModalPopup')
return popupJSX(p, i, messagesJSX);
if (p.pageType === 'ModalPage')
return modalPageJSX(p, i, messagesJSX);
if (p.pageType === 'MainPage')
return mainPageJSX(p, i, messagesJSX);
if (p.pageType === 'Arbitrary')
return arbitaryJSX(p, i, messagesJSX);
throw new Error(`Don't know how to process page type ${p.pageType}\n${JSON.stringify(p)}`);
}) })), showDebug && (0, jsx_runtime_1.jsx)(debugState_1.DebugState, { state: state })] })) });
}
exports.MyCombined = MyCombined;