sccoreui
Version:
ui-sccore
87 lines (86 loc) • 10.7 kB
JavaScript
"use strict";
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 inputnumber_1 = require("primereact/inputnumber");
const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
const menu_1 = require("primereact/menu");
// import { InputText } from "primereact/inputtext";
const Tagify_1 = tslib_1.__importDefault(require("./Tagify"));
const ExpressionRender_1 = tslib_1.__importDefault(require("./ExpressionRender"));
const FormulaComponent = (props) => {
const priceConditioRef = (0, react_1.useRef)(null);
const [fieldOptions, setFieldOptions] = (0, react_1.useState)(props === null || props === void 0 ? void 0 : props.fieldOptions);
const [isMenuVisible, setIsMenuVisible] = (0, react_1.useState)(false);
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);
(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 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 calculation." })] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "help-circle", size: 16 }) }))] }))), isMenuVisible && ((0, jsx_runtime_1.jsx)(Tagify_1.default, { formulaOperators: props.formulaOperators, fieldOptions: fieldOptions, formulaValue: props === null || props === void 0 ? void 0 : props.formulaValue, priceConditioRef: priceConditioRef, onChange: (e) => {
(props === null || props === void 0 ? void 0 : props.onSaveFormula) && (props === null || props === void 0 ? void 0 : props.onSaveFormula(e));
} }))] }), "formula__dev"));
},
},
];
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;
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, { onValueChange: (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: 100, 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) => {
const value = e.value > 100 ? 100 : e.value;
e.originalEvent.target.value = value
? value === null || value === void 0 ? void 0 : value.toFixed(2)
: 0;
}, onValueChange: (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, { onValueChange: (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 inputValue = `[[{"id": "660ab8748140c009b0af99a2","value": "Test1","code": "34sdf","price": 46}]] + 8 + [[{"id": "660abaee8140c009b0afa3ef","value": "Test2","code": "t34sdf","price": 4}]] + 86 + 7647`;
// const ids: any = props?.formulaValue.match(pattern);
// let text: string = props?.formulaValue;
// for (let i = 0; i < ids?.length; i++) {
// let id = ids[i];
// let name = fieldOptions.find(
// (item: any) => item.id === id
// )?.name;
// text = text.replaceAll(id, name);
// }
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "w-6 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" }, { children: (props === null || props === void 0 ? void 0 : props.formulaValue) ? ((0, jsx_runtime_1.jsx)(ExpressionRender_1.default, { inputValue: props === null || props === void 0 ? void 0 : props.formulaValue })) : ("Select") })) })));
// }else{
// return 'Select'
// }
}
default: {
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
}
}
})() }), (0, jsx_runtime_1.jsx)(menu_1.Menu, { onShow: () => setIsMenuVisible(true), onHide: () => setIsMenuVisible(false), popup: true, popupAlignment: "left", className: `w-28rem p-0 ${props === null || props === void 0 ? void 0 : props.menuClassName}`, model: menuContent, ref: priceConditioRef, id: "condition_menu_popup" })] }), "asadssadsasdsdadasd"));
};
exports.default = FormulaComponent;