@focuson/form_components
Version:
Components that can be used by @focuson/forms
57 lines (56 loc) • 6.05 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Layout = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const pages_1 = require("@focuson/pages");
const utils_1 = require("@focuson/utils");
function getLayoutAsArray(details) {
try {
return JSON.parse(details);
}
catch (e) {
return undefined;
}
}
function Layout({ state, details, children, title, titleClassName, rightHandTitle, rightHandClassName, defaultProps, displayAsCards, scrollAfter, divRef, buttons, allButtons }) {
let elemIndex = 0;
const maxHeightString = scrollAfter ? { maxHeight: scrollAfter, overflowY: 'scroll', scrollbarWidth: 'thin', overflowX: 'hidden' } : undefined;
const parsedDetails = getLayoutAsArray(details);
if (parsedDetails === undefined)
return (0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: 'validity-false' }, { children: ["Cannot parse layout ", details] })), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("span", { children: "It should be an array of arrays.Most often like this [[1,1],[3],[5]] " })] });
const defaultPropsL = defaultProps && JSON.parse(defaultProps);
let numbersOnly = parsedDetails.map((d, i) => d.map((item) => typeof (item) === "object" ? item.count : item));
let elemArr = numbersOnly.flat().map((val, i, arr) => arr[i] += arr[i - 1] ? arr[i - 1] : 0);
const elementsRenderedCount = elemArr[elemArr.length - 1];
const totalElementsToRenderCount = Array.isArray(children) ? children.length : 0;
const hrBetweenRows = true;
const buttonFor = (allButtons) => (name) => {
const button = allButtons[name];
return (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'button-span' }, { children: button ? button : `Button ${name} not in ${Object.keys(allButtons)}` }), name);
};
const buttonsForTheCard = (initialValue) => {
var colIndex = initialValue;
return () => {
if (buttons === undefined || allButtons === undefined)
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
const names = (0, utils_1.safeArray)(buttons[colIndex++]);
const displayButtons = names.map(buttonFor(allButtons));
if (displayButtons.length === 0)
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
return (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'buttons-in-card' }, { children: displayButtons }));
};
};
const realButtonsForCard = buttonsForTheCard(0);
return (0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: divRef, style: maxHeightString }, { children: [(title || rightHandTitle) && (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "layout-title-holder" }, { children: [title && (0, jsx_runtime_1.jsx)("div", { className: titleClassName ? titleClassName : 'layout-title', dangerouslySetInnerHTML: { __html: (0, pages_1.replaceTextUsingPath)(state, (0, utils_1.safeString)(title)) } }), rightHandTitle && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: rightHandClassName ? rightHandClassName : 'layout-right-title' }, { children: (0, pages_1.replaceTextUsingPath)(state, (0, utils_1.safeString)(rightHandTitle)) }))] })), parsedDetails.map((row, rowIndex) => (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "row" }, { children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: row.map((col, colIndex) => (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: displayAsCards ? "card" : "" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: displayAsCards ? "card-body" : "" }, { children: react_1.Children.map(Array.isArray(children) ? children.slice((elemIndex > 0 ? elemArr[elemIndex - 1] : 0), elemArr[elemIndex++]) : children, child => {
const labelWidthPct = (typeof (parsedDetails[rowIndex][colIndex]) === 'object' ? parsedDetails[rowIndex][colIndex].labelWidth : '');
const inputWidthPct = typeof (parsedDetails[rowIndex][colIndex]) === 'object' ? parsedDetails[rowIndex][colIndex].valueWidth : '';
const initialLabelWidthPct = 100;
const initialInputWidthPct = row.length === 1 ? 49 : 100; // 49 and not 50 due to padding
return (labelWidthPct || inputWidthPct)
? (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `${labelWidthPct ? `labelWidth${labelWidthPct}` : ''} ${inputWidthPct ? `inputWidth${inputWidthPct}` : ''}` }, { children: child }))
: defaultPropsL ? (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `${defaultPropsL.labelWidth ? `labelWidth${defaultPropsL.labelWidth}` : ''} ${defaultPropsL.valueWidth ? `inputWidth${defaultPropsL.valueWidth}` : ''}` }, { children: child })) : (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `labelWidth${initialLabelWidthPct} inputWidth${initialInputWidthPct}` }, { children: child }));
}) })), realButtonsForCard()] })) }), elemIndex)) }) }), rowIndex)), (totalElementsToRenderCount - elementsRenderedCount) > 0 &&
Array.isArray(children) && children.slice(elementsRenderedCount, totalElementsToRenderCount).map((child, childIndex) => defaultPropsL ? (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `${defaultPropsL.labelWidth ? `labelWidth${defaultPropsL.labelWidth}` : ''} ${defaultPropsL.valueWidth ? `inputWidth${defaultPropsL.valueWidth}` : ''}` }, { children: child }), childIndex) : (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "labelWidth100 inputWidth49" }, { children: child }), childIndex))] }));
}
exports.Layout = Layout;