kwikid-components-react
Version:
KwikID's Component Library in React
187 lines (182 loc) • 10.3 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getComponents = void 0;
var _kwikidToolkit = require("kwikid-toolkit");
var _react = _interopRequireDefault(require("react"));
var _reactDom = _interopRequireDefault(require("react-dom"));
var _LabelValuePairs = _interopRequireDefault(require("../../kwikui/label-value-pairs/LabelValuePairs"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const executeValidation = (component, data, config) => {
return new Promise(resolve => {
const takeAction = async (action, object) => {
var _action$props$styles$, _action$props, _action$props$value, _action$props2, _action$props2$compon;
const source = new _kwikidToolkit.Source(object);
switch (action.key) {
// For "SET_STYLES" action
case "SET_STYLES":
if ((0, _kwikidToolkit.checkObjectPathExists)(action, "props.styles.source")) {
const sourceValue = await source.getValueFromSource(action.props.styles.source);
action = (0, _kwikidToolkit.setValueToObjectPath)(action, "props.styles.styles", sourceValue);
}
component.styles = (_action$props$styles$ = action.props.styles.styles) !== null && _action$props$styles$ !== void 0 ? _action$props$styles$ : component.style;
break;
// For "SET_HTML" action
case "SET_HTML":
if ((0, _kwikidToolkit.checkObjectPathExists)(action, "props.value.source")) {
const sourceValue = await source.getValueFromSource(action.props.value.source);
action = (0, _kwikidToolkit.setValueToObjectPath)(action, "props.value.value", sourceValue);
}
component.value = (_action$props = action.props) === null || _action$props === void 0 ? void 0 : (_action$props$value = _action$props.value) === null || _action$props$value === void 0 ? void 0 : _action$props$value.value;
break;
// For "SET_COMPONENTS" action
case "SET_COMPONENTS":
if ((0, _kwikidToolkit.checkObjectPathExists)(action, "props.components.source")) {
const sourceValue = await source.getValueFromSource(action.props.components.source);
action = (0, _kwikidToolkit.setValueToObjectPath)(action, "props.components.components", sourceValue);
}
component.components = (_action$props2 = action.props) === null || _action$props2 === void 0 ? void 0 : (_action$props2$compon = _action$props2.components) === null || _action$props2$compon === void 0 ? void 0 : _action$props2$compon.components;
break;
default:
break;
}
};
const ruleEngine = new _kwikidToolkit.RuleEngine({
COMPONENT_CONFIG: component,
DATA: data,
DYNAMIC_VIEW_CONFIG: config
}, takeAction);
(async () => {
await ruleEngine.run(component.validation);
resolve(component);
})();
});
};
const getComponent = async (component, data, config) => {
var _component3, _component3$props, _component4, _component4$props, _component9, _component9$props, _component0, _component0$props;
try {
var _component$type, _component, _component$styles, _component2;
// Execute validation if the component has a validation key
if ((0, _kwikidToolkit.checkObjectKeyExists)(component, "validation")) {
component = await executeValidation(component, data, config);
}
// Create element and assign attributes to it
const elementType = (_component$type = component.type) !== null && _component$type !== void 0 ? _component$type : "div";
let element = document.createElement(elementType);
element.setAttribute("id", ((_component = component) === null || _component === void 0 ? void 0 : _component.id) || "");
element.setAttribute("style", (_component$styles = (_component2 = component) === null || _component2 === void 0 ? void 0 : _component2.styles) !== null && _component$styles !== void 0 ? _component$styles : "");
let elementValue;
// If the element contains child components, get all its components
if ((0, _kwikidToolkit.checkObjectKeyExists)(component, "components") && Array.isArray(component.components)) {
// If the element contains a source, fetch value or innerHTML from source
element = await getComponents(element, component.components, data, config);
return element;
}
if ((0, _kwikidToolkit.checkObjectKeyExists)(component, "source")) {
const source = new _kwikidToolkit.Source({
DATA: data
});
const value = await source.getValueFromSource(component.source);
elementValue = value;
} else if ((0, _kwikidToolkit.checkObjectKeyExists)(component, "value") && (0, _kwikidToolkit.isNotEmptyString)(component.value)) {
elementValue = component.value;
} else {
elementValue = "";
}
switch (component.type) {
case "iframe":
element.src = elementValue;
element.type = ((_component3 = component) === null || _component3 === void 0 ? void 0 : (_component3$props = _component3.props) === null || _component3$props === void 0 ? void 0 : _component3$props.iframeType) || "";
break;
case "img":
element.src = elementValue;
element.alt = ((_component4 = component) === null || _component4 === void 0 ? void 0 : (_component4$props = _component4.props) === null || _component4$props === void 0 ? void 0 : _component4$props.altText) || "";
break;
case "label-value-pair":
{
try {
var _component5, _component5$props, _component6, _component6$props, _component7, _component7$props, _component8, _component8$props;
// Use props.data if present and is an array
let labelValueData = [];
if (Array.isArray((_component5 = component) === null || _component5 === void 0 ? void 0 : (_component5$props = _component5.props) === null || _component5$props === void 0 ? void 0 : _component5$props.data) && component.props.data.length > 0) {
labelValueData = component.props.data;
}
const labelValuePairConfig = (_component6 = component) === null || _component6 === void 0 ? void 0 : (_component6$props = _component6.props) === null || _component6$props === void 0 ? void 0 : _component6$props.config;
const root = document.createElement("div");
_reactDom.default.render(/*#__PURE__*/_react.default.createElement(_LabelValuePairs.default, {
data: labelValueData,
config: labelValuePairConfig,
placeholder: ((_component7 = component) === null || _component7 === void 0 ? void 0 : (_component7$props = _component7.props) === null || _component7$props === void 0 ? void 0 : _component7$props.placeholder) || "-",
customStyles: ((_component8 = component) === null || _component8 === void 0 ? void 0 : (_component8$props = _component8.props) === null || _component8$props === void 0 ? void 0 : _component8$props.customStyles) || {}
}), root);
element = root;
} catch (error) {
console.error("[LabelValuePair] Error creating label value pairs:", error);
element = document.createElement("div");
}
break;
}
case "a":
element.href = elementValue;
element.target = ((_component9 = component) === null || _component9 === void 0 ? void 0 : (_component9$props = _component9.props) === null || _component9$props === void 0 ? void 0 : _component9$props.target) || "";
element.innerText = ((_component0 = component) === null || _component0 === void 0 ? void 0 : (_component0$props = _component0.props) === null || _component0$props === void 0 ? void 0 : _component0$props.buttonText) || "Click Here";
break;
default:
element.innerHTML = elementValue;
break;
}
return element.cloneNode(true);
} catch (error) {
console.error("Error creating component:", error);
return document.createElement("div");
}
};
const getComponents = async (element, components, data, config) => {
if (Array.isArray(components)) {
for (let index = 0; index < components.length; index++) {
const layoutItem = components[index];
// If Component Type is <tr> or <row>, create a row and add row elements.
try {
if ((layoutItem === null || layoutItem === void 0 ? void 0 : layoutItem.type) === "tr" || (layoutItem === null || layoutItem === void 0 ? void 0 : layoutItem.type) === "row") {
var _layoutItem$id, _layoutItem$styles;
let row = document.createElement(layoutItem.type);
row.setAttribute("id", (_layoutItem$id = layoutItem === null || layoutItem === void 0 ? void 0 : layoutItem.id) !== null && _layoutItem$id !== void 0 ? _layoutItem$id : "row_".concat(index));
row.setAttribute("style", (_layoutItem$styles = layoutItem === null || layoutItem === void 0 ? void 0 : layoutItem.styles) !== null && _layoutItem$styles !== void 0 ? _layoutItem$styles : "");
// row.style.display = "flex";
// row.style.flexDirection = "row";
// Get all row items and append them to the row
row = await getRowItems(row, layoutItem.components, data, config);
if (row && element) {
element.appendChild(row);
}
} else {
// If Component Type is not a row, create a normal div and add it to the parent div
const component = await getComponent(layoutItem, data, config);
if (component && element) {
element.appendChild(component);
}
}
} catch (error) {
console.error("Error processing layout item:", layoutItem, error);
}
}
}
return element;
};
exports.getComponents = getComponents;
const getRowItems = async (row, components, data, config) => {
if (Array.isArray(components)) {
for (const componentItem of components) {
try {
const component = await getComponent(componentItem, data, config);
if (component instanceof Node) {
row.appendChild(component);
}
} catch (error) {
console.error("Error appending component to row:", error);
}
}
}
return row;
};