@conductionnl/nl-design-system
Version:
NL design system components created by Conduction
93 lines (92 loc) • 3.88 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.closeModal = exports.deleteElementFunction = exports.addElement = exports.createElement = void 0;
/**
* This components handles element creations.
* @returns JSX of the generated form.
*/
var createElement = function (tagName, className, attributes, value, innerText, onclick) {
if (attributes === void 0) { attributes = {}; }
if (value === void 0) { value = ""; }
if (innerText === void 0) { innerText = ""; }
if (onclick === void 0) { onclick = null; }
// create element
var element = document.createElement(tagName);
// set element value
element.value = value;
// set element inner text
element.innerText = innerText;
// add attributes to element
Object.keys(attributes).forEach(function (key, value) {
element.setAttribute(key, value);
});
// add classes to attribute
for (var i = 0; i < className.length; i++) {
element.classList.add(className[i]);
}
if (onclick !== null) {
element.addEventListener("click", onclick, false);
}
return element;
};
exports.createElement = createElement;
var addElement = function (container, newKey, newValue, inputName, onClickFunction, label) {
if (label === void 0) { label = true; }
var key = document.getElementById(newKey);
var value = document.getElementById(newValue);
var form = document.getElementById(container);
if (key.value.length === 0 || value.value.length === 0) {
return;
}
//create row
var formGroupRow = (0, exports.createElement)("div", ["row", key.value.replaceAll(" ", "-")]);
//set classNames for elements
// create input value
var formGroupColValue = (0, exports.createElement)("div", ["col-5"]);
var formGroupValue = (0, exports.createElement)("div", ["from-group"]);
var inputLabel = null;
if (label) {
inputLabel = (0, exports.createElement)("label", ["utrecht-form-label"], { for: value.value }, "", "".concat(key.value));
}
var inputValue = (0, exports.createElement)("input", ["utrecht-textbox", "utrecht-textbox--html-input", "mb-2"], {
type: "text",
id: value.value,
name: "".concat(inputName, "[").concat(key.value.replaceAll(" ", "-"), "]"),
}, "".concat(value.value));
//create delete button
var formGroupButton = (0, exports.createElement)("div", ["col-2", "d-flex", "mt-auto", "mb-3"]);
var deleteButton = (0, exports.createElement)("button", ["utrecht-button", "utrecht-button-sm", "btn-sm", "btn-danger"], { type: "button" }, "".concat(key.value), "Delete", onClickFunction);
// adds the inputs in the div form-group
if (inputLabel !== null) {
formGroupValue.appendChild(inputLabel);
}
formGroupValue.appendChild(inputValue);
// adds the elements in in the col
formGroupColValue.appendChild(formGroupValue);
formGroupButton.appendChild(deleteButton);
// adds the elements in the row
formGroupRow.appendChild(formGroupColValue);
formGroupRow.appendChild(formGroupButton);
// adds the row to the newInputs div
form.appendChild(formGroupRow);
key.value = "";
value.value = "";
};
exports.addElement = addElement;
var deleteElementFunction = function (event) {
var elements = document.getElementsByClassName(event.target.value);
for (var i = 0; i < elements.length; i++) {
elements[i].remove();
}
};
exports.deleteElementFunction = deleteElementFunction;
var closeModal = function (id) {
var element = document.createElement("button");
var modal = document.getElementById("modalFooter" + id);
element.setAttribute("data-bs-dismiss", "modal");
element.style.display = "none";
modal.appendChild(element);
element.click();
modal.removeChild(element);
};
exports.closeModal = closeModal;