sccoreui
Version:
ui-sccore
523 lines (522 loc) • 39.6 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const dropdown_1 = require("primereact/dropdown");
const inputtext_1 = require("primereact/inputtext");
const inputnumber_1 = require("primereact/inputnumber");
const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
const menu_1 = require("primereact/menu");
const FormulaComponent = (props) => {
const priceConditioRef = (0, react_1.useRef)(null);
const [isValid, setIsValid] = (0, react_1.useState)(false);
const [selectedItem, setSelectedItem] = (0, react_1.useState)();
const [fieldOptions, setFieldOptions] = (0, react_1.useState)(props === null || props === void 0 ? void 0 : props.fieldOptions);
const contentEditableDivRef = (0, react_1.useRef)(null);
const [content, setContent] = (0, react_1.useState)(`<span class='formulaSpanElm'></span>`);
const [contentEditableCursorIndex, setContentEditableCursorIndex] = (0, react_1.useState)(null);
const [conditionValue, setConditionValue] = (0, react_1.useState)((props === null || props === void 0 ? void 0 : props.conditionValue) ? props === null || props === void 0 ? void 0 : props.conditionValue : 1);
const [formulaPlaceholder, setFormulaPlaceholder] = (0, react_1.useState)(true);
const operators = {
addition: "+",
subtraction: "-",
multiplication: "*",
division: "/",
percentile: "%",
openBracket: "(",
closeBracket: ")",
};
(0, react_1.useEffect)(() => {
setConditionValue(props.conditionValue);
}, [props.conditionValue]);
(0, react_1.useEffect)(() => {
if (props === null || props === void 0 ? void 0 : props.fieldOptions)
setFieldOptions(props === null || props === void 0 ? void 0 : props.fieldOptions);
}, [props === null || props === void 0 ? void 0 : props.fieldOptions]);
const onSelecteItem = (item) => {
var _a, _b, _c, _d, _e;
if (selectedItem) {
if (selectedItem.find((id) => id === item.id))
setSelectedItem(selectedItem.filter((id) => id !== item.id));
else
setSelectedItem([item.id, ...selectedItem]);
}
else {
setSelectedItem([item.id]);
}
let chipElm = `<div class="formulaChipElm max-w-8rem w-max chip-h-25 overflow-hidden text-overflow-ellipsis white-space-nowrap bg-primary-25 border-primary-200 border-1 text-gray-600 border-round-sm p-1 ${props.formulaChipClassName}" contentEditable=${false} itemid="${item === null || item === void 0 ? void 0 : item.id}" title=${item === null || item === void 0 ? void 0 : item.name}>${item === null || item === void 0 ? void 0 : item.name}</div>`;
let currentText = contentEditableDivRef.current.innerHTML ===
'<span class="formulaSpanElm"></span>'
? '<span class="formulaSpanElm"></span>'
: contentEditableDivRef.current.innerHTML.replaceAll("<br>", "");
const index = contentEditableDivRef.current.innerHTML.indexOf((_a = document.querySelector(".formulaSpanElm.activeSpanElm")) === null || _a === void 0 ? void 0 : _a.outerHTML);
if (index === -1 &&
(contentEditableCursorIndex === null || contentEditableCursorIndex === 0)) {
let str = currentText +
chipElm +
`<span class='formulaSpanElm activeSpanElm'></span>`;
setContent(str);
// setContentEditableCursorIndex(str.length)
}
else {
if (((_b = document.querySelector(".formulaSpanElm.activeSpanElm")) === null || _b === void 0 ? void 0 : _b.innerHTML.length) === contentEditableCursorIndex) {
let sliptText = currentText.split(document.querySelector(".formulaSpanElm.activeSpanElm").outerHTML);
let str = sliptText[0] +
document.querySelector(".formulaSpanElm.activeSpanElm").outerHTML +
chipElm +
`<span class='formulaSpanElm'></span>` +
sliptText[1];
setContent(str);
// setContentEditableCursorIndex(str.length)
}
else {
// const index = contentEditableDivRef.current.innerHTML.indexOf(document.querySelector('.formulaSpanElm.activeSpanElm')?.outerHTML)
const firstContent = contentEditableDivRef.current.innerHTML.slice(0, index === -1 ? 0 : index) +
`<span class="formulaSpanElm activeSpanElm">${(_c = document
.querySelector(".formulaSpanElm.activeSpanElm")) === null || _c === void 0 ? void 0 : _c.innerHTML.substring(0, contentEditableCursorIndex)}</span>`;
const secondContent = `<span class="formulaSpanElm">${(_d = document
.querySelector(".formulaSpanElm.activeSpanElm")) === null || _d === void 0 ? void 0 : _d.innerHTML.substring(contentEditableCursorIndex)}</span>` +
contentEditableDivRef.current.innerHTML
.slice(index)
.split((_e = document.querySelector(".formulaSpanElm.activeSpanElm")) === null || _e === void 0 ? void 0 : _e.outerHTML)[1];
const str = firstContent + chipElm + secondContent;
setContent(str);
}
}
setTimeout(() => {
onChangeCondition();
addEventListenerForSpan();
}, 500);
};
const onChangeCondition = () => {
// Here we are validating a formula for its end result.
// The end result should be a number, whether negative or positive.
if ((contentEditableDivRef === null || contentEditableDivRef === void 0 ? void 0 : contentEditableDivRef.current) === null) {
return;
}
let elements = contentEditableDivRef === null || contentEditableDivRef === void 0 ? void 0 : contentEditableDivRef.current.children;
let formulaText = "";
let spanElms = Array.from(document.querySelectorAll(".formulaSpanElm"));
if (spanElms.length > 1) {
let spanInnerText = spanElms === null || spanElms === void 0 ? void 0 : spanElms.map((x) => x === null || x === void 0 ? void 0 : x.innerHTML);
// remove first and last span
const specialCharacters = /[/*\-+%(]/;
if (spanInnerText[0] !== "" &&
!specialCharacters.test(spanInnerText[0].charAt(spanInnerText[0].length - 1))) {
setIsValid(false);
return;
}
else if (specialCharacters.test(spanInnerText[0].charAt(spanInnerText[0].length - 1)) ||
spanInnerText[0] === "") {
spanInnerText.shift();
}
if (spanInnerText[spanInnerText.length - 1] === "" ||
specialCharacters.test(spanInnerText[spanInnerText.length - 1].charAt(0))) {
spanInnerText.pop();
}
// spanInnerText = spanInnerText.slice(0, 1)
// spanInnerText = spanInnerText.slice(0, spanElms.length - 1)
// const specialCharacters = /[/*\-+%(]/;
let findText = spanInnerText.find((x) => !specialCharacters.test(x.charAt(0)) ||
!specialCharacters.test(x.charAt(x.length - 1)));
if (findText)
findText = findText.replaceAll("<br>", "");
if (findText) {
setIsValid(false);
return;
}
else {
let finalSanInnerText = spanInnerText.filter((x) => x === "");
if (finalSanInnerText.length !== 0) {
setIsValid(false);
return;
}
}
}
for (let i = 0; i < elements.length; i++) {
const element = elements[i];
if (element.classList.contains("formulaChipElm")) {
let id = element.getAttribute("itemid");
let findObj = fieldOptions.find((x) => x.id === id);
formulaText = formulaText + (findObj === null || findObj === void 0 ? void 0 : findObj.price);
}
else {
let spanText = element.innerHTML ? element.innerHTML : "";
formulaText = formulaText + spanText;
}
}
formulaText = formulaText.replaceAll("<br>", "");
// If the formula ends with any operator without ending with numbers, then the formula is not correct
const regex = /^(?!0+$)(?=.*[+\-*/%])(?!.*(?:\s|\+\+|--|%%|\*\*|\+\-|\+\*|\+\%|\-\-|\-\*|\-\%|\*\-|\*\+|\*\%|\%\+|\%\-|\%\/|\%\*|\/\+|\/\-|\/\*|\/\%))(?:(?:\([+\-*/%]*\)|[-+*/%])*)$/;
if (!regex.test(formulaText) && formulaText !== "0" && formulaText !== "") {
try {
// For example, if textContent (formula) value is like "<chip> + <chip> - 456 + 778 * 464 / 645 % 4736"
// That will be converted here like "0 + 0 - 0 + 0 * 0 / 0 % 0". If the total equals 0 or -0, it means the formula is correct.
// The eval() JavaScript method will give us a result from the string.
// If the eval() result is NOT A NUMBER it will go to the error block.
// const str = formula.replaceAll(' ', '')
let value = eval(formulaText);
console.log(value);
setIsValid(true);
}
catch (error) {
setIsValid(false);
}
}
else {
setIsValid(false);
}
};
function getCursorPosition(contentEditableElm) {
var _a;
const selection = window.getSelection();
if (selection.anchorNode) {
const range = selection.getRangeAt(0);
const clonedRange = range.cloneRange();
clonedRange.selectNodeContents(contentEditableElm);
clonedRange.setEnd(range.endContainer, range.endOffset);
setContentEditableCursorIndex((_a = clonedRange === null || clonedRange === void 0 ? void 0 : clonedRange.toString()) === null || _a === void 0 ? void 0 : _a.length);
}
}
const onConditionKeyDown = (event) => {
const content = event.target.textContent.trim();
const lastChar = content.charAt(content.length - 1);
const operators = ["%", "*", "-", "+", "/"];
let selection = window.getSelection();
let actElm = document.querySelector(".formulaSpanElm.activeSpanElm");
if (actElm && actElm.innerHTML.indexOf("<br>") !== -1)
actElm.innerHTML = actElm.textContent;
if (event.keyCode === 37 ||
event.keyCode === 39 ||
event.keyCode === 38 ||
event.keyCode === 40) {
let actElm = document.querySelector(".formulaSpanElm.activeSpanElm");
let spanElms = Array.from(document.querySelectorAll(".formulaSpanElm"));
const range = document.createRange();
// range.setStart(selection.focusNode, selection.focusOffset);
let activeIndex;
spanElms.filter((elmt, index) => {
if (elmt.classList.contains("activeSpanElm")) {
activeIndex = index;
}
});
if (actElm) {
if (event.keyCode === 37 /* ArrowLeft */ ||
event.keyCode === 38 /* ArrowUp */) {
if (selection.getRangeAt(0).endOffset !== 0 &&
actElm.innerText.length !== 0) {
getCursorPosition(actElm);
return;
}
if (activeIndex !== 0) {
// activeIndex = activeIndex + 1
activeIndex = activeIndex - 1;
}
}
else if (event.keyCode === 39 /* ArrowRight */ ||
event.keyCode === 40 /* ArrowDown */) {
//&& selection.focusOffset === selection.focusNode.textContent.length
if (actElm.innerText.length === selection.getRangeAt(0).endOffset &&
activeIndex < spanElms.length - 1) {
activeIndex = activeIndex + 1;
}
}
if (activeIndex !== -1 && spanElms.indexOf(actElm) !== activeIndex)
actElm.classList.remove("activeSpanElm");
}
if (activeIndex !== null &&
activeIndex !== -1 &&
spanElms.length > activeIndex &&
spanElms.indexOf(actElm) !== activeIndex) {
if (event.keyCode === 37 /* ArrowLeft */ ||
event.keyCode === 38 /* ArrowUp */)
range.selectNodeContents(spanElms[activeIndex]);
else if (event.keyCode === 39 /* ArrowRight */ || event.keyCode === 40)
range.setStart(spanElms[activeIndex], 0);
if (!range.startContainer.parentElement.getAttribute("id")) {
range.startContainer.parentElement.classList.add("activeSpanElm");
}
else {
let eml = range.startContainer;
eml === null || eml === void 0 ? void 0 : eml.classList.add("activeSpanElm");
}
}
let CurrentActElm = document.querySelector(".formulaSpanElm.activeSpanElm");
if (CurrentActElm)
getCursorPosition(CurrentActElm);
}
// Allow numbers, *, -, +, %, /, (, ), and single space
if (!((event.keyCode >= "0" && event.keyCode <= "9") ||
event.keyCode === "*" ||
event.keyCode === "-" ||
event.keyCode === "+" ||
event.keyCode === "%" ||
event.keyCode === "/" ||
event.keyCode === "(" ||
event.keyCode === ")" ||
(event.keyCode !== " " &&
event.target.textContent.trim().slice(-1) === " "))) {
event.preventDefault();
}
// Prevent new lines (enter keypress)
if (event.keyCode === "Enter") {
event.preventDefault();
}
getCursorPosition(event.target);
// Prevent entering operators continuously after each other
if (operators.includes(event.keyCode) &&
operators.includes(lastChar) &&
operators.includes(content[contentEditableCursorIndex - 2])) {
event.preventDefault();
}
};
const onFilter = (e) => {
if (e.target.value) {
let opts = props === null || props === void 0 ? void 0 : props.fieldOptions.filter((x) => {
var _a, _b, _c, _d;
return (_b = (_a = x === null || x === void 0 ? void 0 : x[props === null || props === void 0 ? void 0 : props.fieldFilterOption]) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.includes((_d = (_c = e === null || e === void 0 ? void 0 : e.target) === null || _c === void 0 ? void 0 : _c.value) === null || _d === void 0 ? void 0 : _d.toLowerCase());
});
setFieldOptions(opts);
}
else {
setFieldOptions(props === null || props === void 0 ? void 0 : props.fieldOptions);
}
};
const onClickContentEditable = (e) => {
var _a, _b, _c;
let spanElms = Array.from(document.querySelectorAll(".formulaSpanElm"));
if (!e.target.classList.contains("formulaSpanElm") &&
spanElms.length !== 0) {
// let contentEditableElement = e.target
// contentEditableElement.focus(); // Set focus to the content editable element
const range = document.createRange(); // Create a new range
range.selectNodeContents(spanElms[spanElms.length - 1]); // Select the entire content of the element
range.collapse(false); // Collapse the range to the end
const selection = window.getSelection(); // Get the selection object
selection.removeAllRanges(); // Remove any existing ranges from the selection
selection.addRange(range);
(_a = document
.querySelector(".activeSpanElm")) === null || _a === void 0 ? void 0 : _a.classList.remove("activeSpanElm");
let elms = document.querySelectorAll(".formulaSpanElm");
(_c = (_b = elms[elms.length - 1]) === null || _b === void 0 ? void 0 : _b.classList) === null || _c === void 0 ? void 0 : _c.add("activeSpanElm");
e.preventDefault();
}
else {
console.log(e);
}
};
const onAddOperator = (event, operator) => {
let elm = document.querySelector(".activeSpanElm");
console.log(event);
// const operators = ['%', '*', '-', '+', '/'];
// const lastChar = elm.innerHTML?.charAt(elm.innerHTML?.length - 1);
// // Prevent entering operators coonChangeCondition(str);ntinuously after each other
// if (lastChar && operators.includes(lastChar) && operators.includes(operator)) {
// event.preventDefault();
// return;
// }
if (contentEditableDivRef.current.innerHTML !==
`<span class='formulaSpanElm'></span>`) {
elm.innerHTML = elm.innerHTML + operator;
}
onChangeCondition();
};
const onSave = (event) => {
let elements = contentEditableDivRef.current.children;
let formula = "";
for (let i = 0; i < elements.length; i++) {
const element = elements[i];
if (element.classList.contains("formulaChipElm"))
formula = formula + element.getAttribute("itemid");
else
formula = formula + element.innerHTML;
}
// setContent(contentEditableDivRef.current.innerHTML)
priceConditioRef.current.toggle(event);
formula = formula.replaceAll("<br>", "");
props.onSaveFormula(formula);
};
const onKeyDownHandler = (event) => {
var _a;
if (event.keyCode === 8 || event.keyCode === 46) {
// let elm = document.querySelector('.activeSpanElm') as HTMLElement
let spanElms = Array.from(document.querySelectorAll(".formulaSpanElm"));
let activeIndex = spanElms.findIndex((x) => x.classList.contains("activeSpanElm"));
if (activeIndex && ((_a = spanElms[activeIndex]) === null || _a === void 0 ? void 0 : _a.innerHTML) === "") {
spanElms[activeIndex].previousElementSibling.remove();
let index = event.keyCode === 8 ? activeIndex - 1 : activeIndex;
spanElms[index].classList.add("activeSpanElm");
const range = document.createRange(); // Create a new range
spanElms[activeIndex].remove();
range.selectNodeContents(spanElms[index]); // Select the entire content of the element
range.collapse(false); // Collapse the range to the end
const selection = window.getSelection(); // Get the selection object
selection.removeAllRanges(); // Remove any existing ranges from the selection
selection.addRange(range);
event.preventDefault();
}
}
};
const menuContent = [
{
template: () => {
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full" }, { children: [(props === null || props === void 0 ? void 0 : props.headerTemplate) ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props === null || props === void 0 ? void 0 : props.headerTemplate })) : ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `condition_section_header flex align-items-center justify-content-between p-4 w-full ${props === null || props === void 0 ? void 0 : props.headerTemplateClassName}` }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "text-xl font-bold" }, { children: (props === null || props === void 0 ? void 0 : props.headerLabel)
? props === null || props === void 0 ? void 0 : props.headerLabel
: "Configure Value" })), (0, jsx_runtime_1.jsx)("span", { children: (props === null || props === void 0 ? void 0 : props.headerDescription)
? props === null || props === void 0 ? void 0 : props.headerDescription
: "Select price attribute and perform calculater." })] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "help-circle", size: 16 }) }))] }))), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "condition_section flex border-top-1 border-bottom-1 border-gray-200" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-6 border-right-1 border-gray-200" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-gray-50 w-full h-auto border-bottom-1 border-gray-200 p-2 pt-0" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "p-2 flex align-items-center" }, { children: (0, jsx_runtime_1.jsxs)("span", { children: [(props === null || props === void 0 ? void 0 : props.fieldOptionTemplateTitle) + " (0)", " "] }) })), (props === null || props === void 0 ? void 0 : props.fieldFilter) && (
// <div className="px-4 py-2 border-top-1 border-gray-200">
// <div className="relative flex aling-items-center w-full">
// <div className="h-full flex align-items-cente justify-content-center w-2rem absolute left-0">
// <SvgComponent icon="search-md" />
// </div>
// <InputText onInput={(e: any) => onFilter(e)} className="pl-8 w-full" placeholder={props.fieldOptionFilterPlaceholder} />
// </div>
// </div>
(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-input-icon-left p-input-icon-right w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-prefix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "search-md", size: 18 }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "x-close", size: 18 }) })), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { onInput: (e) => onFilter(e), className: "pl-8 w-full", placeholder: props.fieldOptionFilterPlaceholder })] })))] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `condition_itemibute_list_sect overflow-auto flex flex-column row-gap-2 px-4 py-2` }, { children: fieldOptions.length > 0 ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "grid gap-2 p-2 py-4" }, { children: fieldOptions === null || fieldOptions === void 0 ? void 0 : fieldOptions.map((item, index) => {
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: `max-w-8rem overflow-hidden text-overflow-ellipsis white-space-nowrap border-1 px-2 chip-h-25 border-gray-300 text-gray-600 cursor-pointer item_chip border-round-sm hover:bg-primary-25 hover:border-primary-200 ${props === null || props === void 0 ? void 0 : props.fieldOptionClassName}`, onClick: () => onSelecteItem(item), title: item === null || item === void 0 ? void 0 : item.name }, { children: item === null || item === void 0 ? void 0 : item.name }), "formula__option__" + index));
}) }))) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "text-gray-700 fobt-bold text-lg text-center" }, { children: (props === null || props === void 0 ? void 0 : props.fieldFilterEmptyMessage)
? props === null || props === void 0 ? void 0 : props.fieldFilterEmptyMessage
: "No Results Found!" }))) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-6" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "h-2rem px-4 border-bottom-1 flex column-gap-2 align-items-center border-gray-200" }, { children: props.formulaOperators.map((operator, index) => {
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "condition_operator flex align-items-center justify-content-center text-lg w-2 sc_icon_hover cursor-pointer hover:bg-primary-50 border-round-sm", onClick: (e) => onAddOperator(e, operators[operator]) }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "text-lg font-bold" }, { children: operators[operator] })) }), "formula__operator_" + index), (0, jsx_runtime_1.jsx)("span", { className: "operator_divider" })] }));
}) })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "relative h-17rem w-full" }, { children: [(0, jsx_runtime_1.jsx)("div", { onClick: (e) => onClickContentEditable(e), ref: contentEditableDivRef, dangerouslySetInnerHTML: { __html: content }, onKeyDown: (e) => onKeyDownHandler(e), onKeyUp: (e) => onConditionKeyDown(e), onInput: () => onChangeCondition(), onFocus: () => setFormulaPlaceholder(false), className: `condition_configure px-4 py-3 h-17rem overflow-auto w-full absolute top-0 left-0 z-5`, id: "condition_configure_elm", contentEditable: true }), content === `<span class='formulaSpanElm'></span>` &&
formulaPlaceholder && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: " px-4 py-2 top-0 text-lg left-0 absolute z-3" }, { children: (props === null || props === void 0 ? void 0 : props.formulaElemectPlaceholder)
? props === null || props === void 0 ? void 0 : props.formulaElemectPlaceholder
: "Please Enter Formula" })))] }))] }))] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `condition_footer_section flex align-items-center p-2 ${props === null || props === void 0 ? void 0 : props.footerTemplateClassName}` }, { children: (props === null || props === void 0 ? void 0 : props.footerTemplate) ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props === null || props === void 0 ? void 0 : props.footerTemplate })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "w-6 px-4 py-2 hover:bg-primary-50 cursor-pointer sc_icon_hover", onClick: (e) => {
setContent(props === null || props === void 0 ? void 0 : props.formulaValue);
priceConditioRef.current.toggle(e);
} }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "x-close", size: 20 }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ onClick: (e) => onSave(e), className: `w-6 px-4 py-2 hover:bg-primary-50 cursor-pointer sc_icon_hover ${!isValid && "p-disabled"}` }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "check", size: 20 }) }))] })) }))] }), "formula__dev"));
},
},
];
const addEventListenerForSpan = () => {
var _a;
// Select all div elements with the specified class name
const spanElements = document.querySelectorAll(".formulaSpanElm");
(_a = document.querySelector(".activeSpanElm")) === null || _a === void 0 ? void 0 : _a.classList.remove("activeSpanElm");
// Loop through each div element
spanElements.forEach((spanElement) => {
// Add an event listener for the 'click' event to each div element
spanElement.addEventListener("click", function (e) {
var _a;
(_a = document
.querySelector(".activeSpanElm")) === null || _a === void 0 ? void 0 : _a.classList.remove("activeSpanElm");
e.target.classList.add("activeSpanElm");
getCursorPosition(e.target);
// Your event handler code here
});
});
if (spanElements.length !== 0) {
spanElements[spanElements.length - 1].classList.add("activeSpanElm");
getCursorPosition(spanElements[spanElements.length - 1]);
}
};
const onShowMenu = () => {
if (props === null || props === void 0 ? void 0 : props.formulaValue) {
let formulatText = "";
const pattern = /(?:[a-f0-9]{24}|msrp|map|costprice)/g;
// const ids = props?.formulaValue.match(pattern);
// console.log(ids)
const splitPattern = /(?=[+\-*/%])/g;
// Split the text using the splitPattern
const splitText = props === null || props === void 0 ? void 0 : props.formulaValue.split(splitPattern);
for (let i = 0; i < splitText.length; i++) {
// let chipElm: string = '';
// let text = splitText[i];
const id = splitText[i].match(pattern);
let chipElm = "";
if (id) {
let item = fieldOptions.find((x) => x.id === id[0]);
chipElm = `<div class="formulaChipElm max-w-8rem w-max overflow-hidden text-overflow-ellipsis white-space-nowrap bg-primary-25 border-1 border-primary-200 text-gray-600 border-round-sm px-2 py-1" contentEditable=${false} itemid="${item === null || item === void 0 ? void 0 : item.id}" title="${item === null || item === void 0 ? void 0 : item.name}">${item === null || item === void 0 ? void 0 : item.name}</div>`;
}
// chipElm = text.replace(text, t)
const placeholderText = splitText[i].replace(pattern, "|");
const textParts = placeholderText
.split("|")
.filter((part) => part !== "");
if (textParts.length > 0) {
for (let z = 0; z < textParts.length; z++) {
if (z === 0 && splitText.length - 1 === i && chipElm)
formulatText = textParts[z]
? formulatText +
`<span class='formulaSpanElm'>${textParts[z]}</span>` +
chipElm +
`<span class='formulaSpanElm'></span>`
: `<span class='formulaSpanElm'></span>`;
else if (z === 0 && chipElm && id) {
// let lastSpanIndex = formulatText.lastIndexOf('</span>');
formulatText = textParts[z]
? formulatText +
`<span class='formulaSpanElm'>${textParts[z]}</span>` +
chipElm
: `<span class='formulaSpanElm'></span>`;
}
else
formulatText = textParts[z]
? formulatText +
`<span class='formulaSpanElm'>${textParts[z]}</span>`
: `<span class='formulaSpanElm'></span>`;
}
}
else {
if (splitText.length - 1 === i)
formulatText =
`<span class='formulaSpanElm'></span>` +
chipElm +
`<span class='formulaSpanElm'></span>`;
else
formulatText = `<span class='formulaSpanElm'></span>` + chipElm;
}
}
setContent(formulatText);
}
else {
setFormulaPlaceholder(true);
}
setTimeout(() => {
addEventListenerForSpan();
setIsValid(false);
}, 1000);
};
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `condition_column border-1 flex border-gray-300 border-round-lg overflow-hidden w-full ${props === null || props === void 0 ? void 0 : props.className}` }, { children: [(0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { optionLabel: props === null || props === void 0 ? void 0 : props.optionLabel, panelClassName: "formula_panel_dropdown", "data-pr-classname": "block", placeholder: (props === null || props === void 0 ? void 0 : props.dropdownPlaceholder) ? props === null || props === void 0 ? void 0 : props.dropdownPlaceholder : "Select", value: conditionValue, onChange: (e) => {
if (props === null || props === void 0 ? void 0 : props.onConditionChange)
props === null || props === void 0 ? void 0 : props.onConditionChange(e);
setConditionValue(e.value);
}, className: `sc_animate w-6 overflow-hidden text-overflow-ellipsis white-space-nowrap formula_condition_dropdown border-right-1 border-gray-300 border-none border-noround`, options: props === null || props === void 0 ? void 0 : props.options }), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (() => {
var _a, _b;
let optiontype = (_a = props === null || props === void 0 ? void 0 : props.options.find((x) => x.value === conditionValue)) === null || _a === void 0 ? void 0 : _a.optionType;
switch (optiontype) {
case "INCREASE_BY_VALUE":
case "DECREASE_BY_VALUE": {
return ((0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, Object.assign({ useGrouping: false, min: 0, minFractionDigits: 2, maxFractionDigits: 2, maxLength: (props === null || props === void 0 ? void 0 : props.maxLength) || Infinity }, props === null || props === void 0 ? void 0 : props.field, { onChange: (e) => (props === null || props === void 0 ? void 0 : props.onChange) && (props === null || props === void 0 ? void 0 : props.onChange(e)), placeholder: "Enter Number", value: props === null || props === void 0 ? void 0 : props.inputValue, className: "border-none w-6", inputClassName: "border-none focus:shadow-none" })));
}
case "INCREASE_BY_PERCENTAGE":
case "DECREASE_BY_PERCENTAGE": {
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-6 relative" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "absolute left-0 h-full flex align-items-center px-2" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "percent-01", size: 16, color: "#344054" }) })), (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, Object.assign({ useGrouping: false, min: 0, max: 99, minFractionDigits: 2, maxFractionDigits: 2, maxLength: (props === null || props === void 0 ? void 0 : props.maxLength) || Infinity }, props === null || props === void 0 ? void 0 : props.field, { onChange: (e) => (props === null || props === void 0 ? void 0 : props.onChange) && (props === null || props === void 0 ? void 0 : props.onChange(e)), placeholder: "Enter Number", value: props === null || props === void 0 ? void 0 : props.inputValue, className: "border-none w-full", inputClassName: "border-none pl-8 focus:shadow-none" }))] })));
}
case "MANUAL": {
return ((0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, Object.assign({ useGrouping: false, min: 0, minFractionDigits: 2, maxFractionDigits: 2, maxLength: (props === null || props === void 0 ? void 0 : props.maxLength) || Infinity }, props === null || props === void 0 ? void 0 : props.field, { onChange: (e) => (props === null || props === void 0 ? void 0 : props.onChange) && (props === null || props === void 0 ? void 0 : props.onChange(e)), placeholder: "Enter Number", value: props === null || props === void 0 ? void 0 : props.inputValue, className: "border-none w-6", inputClassName: "border-none focus:shadow-none" })));
}
case "CALCULATION": {
const pattern = /(?:[a-f0-9]{24}|msrp|map|costprice)/g;
// if(props?.formulaValue){
const ids = props === null || props === void 0 ? void 0 : props.formulaValue.match(pattern);
let text = props === null || props === void 0 ? void 0 : props.formulaValue;
for (let i = 0; i < (ids === null || ids === void 0 ? void 0 : ids.length); i++) {
let id = ids[i];
let name = (_b = fieldOptions.find((item) => item.id === id)) === null || _b === void 0 ? void 0 : _b.name;
text = text.replaceAll(id, name);
}
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "w-8 h-auto cursor-pointer flex align-items-center px-4", onClick: (e) => { var _a; return (_a = priceConditioRef.current) === null || _a === void 0 ? void 0 : _a.toggle(e); } }, { children: (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-700 overflow-hidden text-overflow-ellipsis white-space-nowrap w-full", title: text ? text : "" }, { children: (props === null || props === void 0 ? void 0 : props.formulaValue) ? text : "Select" })) })));
// }else{
// return 'Select'
// }
}
default: {
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
}
}
})() }), (0, jsx_runtime_1.jsx)(menu_1.Menu, { onShow: onShowMenu, popup: true, popupAlignment: "left", className: `condition_menu p-0 ${props === null || props === void 0 ? void 0 : props.menuClassName}`, model: menuContent, ref: priceConditioRef, id: "condition_menu_popup" })] }), "asadssadsasdsdadasd"));
};
exports.default = FormulaComponent;