sccoreui 5.9.78 → 5.9.80
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/App.scss
CHANGED
|
@@ -951,19 +951,38 @@ button[aria-expanded="true"] {
|
|
|
951
951
|
.formulaChipElm {
|
|
952
952
|
line-height: 24px;
|
|
953
953
|
letter-spacing: 0px;
|
|
954
|
-
margin: 2px;
|
|
955
|
-
float: left;
|
|
956
954
|
}
|
|
957
955
|
|
|
956
|
+
.chip-h-25 {
|
|
957
|
+
height: 25px;
|
|
958
|
+
display: flex;
|
|
959
|
+
align-items: center;
|
|
960
|
+
justify-content: center;
|
|
961
|
+
|
|
962
|
+
}
|
|
963
|
+
|
|
964
|
+
|
|
958
965
|
.formulaSpanElm {
|
|
959
966
|
font-size: 16px;
|
|
960
967
|
margin: 2px 0;
|
|
961
968
|
float: left;
|
|
962
969
|
min-width: 6px;
|
|
963
970
|
height: 32px;
|
|
971
|
+
position: relative;
|
|
972
|
+
top: -4px;
|
|
973
|
+
&:first-child {
|
|
974
|
+
display: none;
|
|
975
|
+
}
|
|
964
976
|
}
|
|
965
977
|
}
|
|
966
978
|
|
|
979
|
+
.operator_divider {
|
|
980
|
+
width: 1px;
|
|
981
|
+
height: 15px;
|
|
982
|
+
display: inline-block;
|
|
983
|
+
background-color: var(--gray-300);
|
|
984
|
+
}
|
|
985
|
+
|
|
967
986
|
.formula_condition_dropdown {
|
|
968
987
|
box-shadow: none !important;
|
|
969
988
|
|
package/dist/assets/sccoreui.css
CHANGED
|
@@ -19,13 +19,13 @@ const FormulaComponent = (props) => {
|
|
|
19
19
|
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);
|
|
20
20
|
const [formulaPlaceholder, setFormulaPlaceholder] = (0, react_1.useState)(true);
|
|
21
21
|
const operators = {
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
22
|
+
addition: "+",
|
|
23
|
+
subtraction: "-",
|
|
24
|
+
multiplication: "*",
|
|
25
|
+
division: "/",
|
|
26
|
+
percentile: "%",
|
|
27
|
+
openBracket: "(",
|
|
28
|
+
closeBracket: ")",
|
|
29
29
|
};
|
|
30
30
|
(0, react_1.useEffect)(() => {
|
|
31
31
|
setConditionValue(props.conditionValue);
|
|
@@ -45,25 +45,41 @@ const FormulaComponent = (props) => {
|
|
|
45
45
|
else {
|
|
46
46
|
setSelectedItem([item.id]);
|
|
47
47
|
}
|
|
48
|
-
let chipElm = `<div class="formulaChipElm max-w-8rem w-max h-
|
|
49
|
-
let currentText = contentEditableDivRef.current.innerHTML ===
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
48
|
+
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>`;
|
|
49
|
+
let currentText = contentEditableDivRef.current.innerHTML ===
|
|
50
|
+
'<span class="formulaSpanElm"></span>'
|
|
51
|
+
? '<span class="formulaSpanElm"></span>'
|
|
52
|
+
: contentEditableDivRef.current.innerHTML.replaceAll("<br>", "");
|
|
53
|
+
const index = contentEditableDivRef.current.innerHTML.indexOf((_a = document.querySelector(".formulaSpanElm.activeSpanElm")) === null || _a === void 0 ? void 0 : _a.outerHTML);
|
|
54
|
+
if (index === -1 &&
|
|
55
|
+
(contentEditableCursorIndex === null || contentEditableCursorIndex === 0)) {
|
|
56
|
+
let str = currentText +
|
|
57
|
+
chipElm +
|
|
58
|
+
`<span class='formulaSpanElm activeSpanElm'></span>`;
|
|
53
59
|
setContent(str);
|
|
54
60
|
// setContentEditableCursorIndex(str.length)
|
|
55
61
|
}
|
|
56
62
|
else {
|
|
57
|
-
if (((_b = document.querySelector(
|
|
58
|
-
let sliptText = currentText.split(document.querySelector(
|
|
59
|
-
let str = sliptText[0] +
|
|
63
|
+
if (((_b = document.querySelector(".formulaSpanElm.activeSpanElm")) === null || _b === void 0 ? void 0 : _b.innerHTML.length) === contentEditableCursorIndex) {
|
|
64
|
+
let sliptText = currentText.split(document.querySelector(".formulaSpanElm.activeSpanElm").outerHTML);
|
|
65
|
+
let str = sliptText[0] +
|
|
66
|
+
document.querySelector(".formulaSpanElm.activeSpanElm").outerHTML +
|
|
67
|
+
chipElm +
|
|
68
|
+
`<span class='formulaSpanElm'></span>` +
|
|
69
|
+
sliptText[1];
|
|
60
70
|
setContent(str);
|
|
61
71
|
// setContentEditableCursorIndex(str.length)
|
|
62
72
|
}
|
|
63
73
|
else {
|
|
64
74
|
// const index = contentEditableDivRef.current.innerHTML.indexOf(document.querySelector('.formulaSpanElm.activeSpanElm')?.outerHTML)
|
|
65
|
-
const firstContent = contentEditableDivRef.current.innerHTML.slice(0, index === -1 ? 0 : index) +
|
|
66
|
-
|
|
75
|
+
const firstContent = contentEditableDivRef.current.innerHTML.slice(0, index === -1 ? 0 : index) +
|
|
76
|
+
`<span class="formulaSpanElm activeSpanElm">${(_c = document
|
|
77
|
+
.querySelector(".formulaSpanElm.activeSpanElm")) === null || _c === void 0 ? void 0 : _c.innerHTML.substring(0, contentEditableCursorIndex)}</span>`;
|
|
78
|
+
const secondContent = `<span class="formulaSpanElm">${(_d = document
|
|
79
|
+
.querySelector(".formulaSpanElm.activeSpanElm")) === null || _d === void 0 ? void 0 : _d.innerHTML.substring(contentEditableCursorIndex)}</span>` +
|
|
80
|
+
contentEditableDivRef.current.innerHTML
|
|
81
|
+
.slice(index)
|
|
82
|
+
.split((_e = document.querySelector(".formulaSpanElm.activeSpanElm")) === null || _e === void 0 ? void 0 : _e.outerHTML)[1];
|
|
67
83
|
const str = firstContent + chipElm + secondContent;
|
|
68
84
|
setContent(str);
|
|
69
85
|
}
|
|
@@ -74,34 +90,38 @@ const FormulaComponent = (props) => {
|
|
|
74
90
|
}, 500);
|
|
75
91
|
};
|
|
76
92
|
const onChangeCondition = () => {
|
|
77
|
-
// Here we are validating a formula for its end result.
|
|
93
|
+
// Here we are validating a formula for its end result.
|
|
78
94
|
// The end result should be a number, whether negative or positive.
|
|
79
95
|
if ((contentEditableDivRef === null || contentEditableDivRef === void 0 ? void 0 : contentEditableDivRef.current) === null) {
|
|
80
96
|
return;
|
|
81
97
|
}
|
|
82
98
|
let elements = contentEditableDivRef === null || contentEditableDivRef === void 0 ? void 0 : contentEditableDivRef.current.children;
|
|
83
|
-
let formulaText =
|
|
84
|
-
let spanElms = Array.from(document.querySelectorAll(
|
|
99
|
+
let formulaText = "";
|
|
100
|
+
let spanElms = Array.from(document.querySelectorAll(".formulaSpanElm"));
|
|
85
101
|
if (spanElms.length > 1) {
|
|
86
102
|
let spanInnerText = spanElms === null || spanElms === void 0 ? void 0 : spanElms.map((x) => x === null || x === void 0 ? void 0 : x.innerHTML);
|
|
87
103
|
// remove first and last span
|
|
88
104
|
const specialCharacters = /[/*\-+%(]/;
|
|
89
|
-
if (spanInnerText[0] !== "" &&
|
|
105
|
+
if (spanInnerText[0] !== "" &&
|
|
106
|
+
!specialCharacters.test(spanInnerText[0].charAt(spanInnerText[0].length - 1))) {
|
|
90
107
|
setIsValid(false);
|
|
91
108
|
return;
|
|
92
109
|
}
|
|
93
|
-
else if (specialCharacters.test(spanInnerText[0].charAt(spanInnerText[0].length - 1)) ||
|
|
110
|
+
else if (specialCharacters.test(spanInnerText[0].charAt(spanInnerText[0].length - 1)) ||
|
|
111
|
+
spanInnerText[0] === "") {
|
|
94
112
|
spanInnerText.shift();
|
|
95
113
|
}
|
|
96
|
-
if (spanInnerText[spanInnerText.length - 1] === "" ||
|
|
114
|
+
if (spanInnerText[spanInnerText.length - 1] === "" ||
|
|
115
|
+
specialCharacters.test(spanInnerText[spanInnerText.length - 1].charAt(0))) {
|
|
97
116
|
spanInnerText.pop();
|
|
98
117
|
}
|
|
99
118
|
// spanInnerText = spanInnerText.slice(0, 1)
|
|
100
119
|
// spanInnerText = spanInnerText.slice(0, spanElms.length - 1)
|
|
101
120
|
// const specialCharacters = /[/*\-+%(]/;
|
|
102
|
-
let findText = spanInnerText.find((x) => !specialCharacters.test(x.charAt(0)) ||
|
|
121
|
+
let findText = spanInnerText.find((x) => !specialCharacters.test(x.charAt(0)) ||
|
|
122
|
+
!specialCharacters.test(x.charAt(x.length - 1)));
|
|
103
123
|
if (findText)
|
|
104
|
-
findText = findText.replaceAll(
|
|
124
|
+
findText = findText.replaceAll("<br>", "");
|
|
105
125
|
if (findText) {
|
|
106
126
|
setIsValid(false);
|
|
107
127
|
return;
|
|
@@ -116,8 +136,8 @@ const FormulaComponent = (props) => {
|
|
|
116
136
|
}
|
|
117
137
|
for (let i = 0; i < elements.length; i++) {
|
|
118
138
|
const element = elements[i];
|
|
119
|
-
if (element.classList.contains(
|
|
120
|
-
let id = element.getAttribute(
|
|
139
|
+
if (element.classList.contains("formulaChipElm")) {
|
|
140
|
+
let id = element.getAttribute("itemid");
|
|
121
141
|
let findObj = fieldOptions.find((x) => x.id === id);
|
|
122
142
|
formulaText = formulaText + (findObj === null || findObj === void 0 ? void 0 : findObj.price);
|
|
123
143
|
}
|
|
@@ -126,10 +146,10 @@ const FormulaComponent = (props) => {
|
|
|
126
146
|
formulaText = formulaText + spanText;
|
|
127
147
|
}
|
|
128
148
|
}
|
|
129
|
-
formulaText = formulaText.replaceAll(
|
|
149
|
+
formulaText = formulaText.replaceAll("<br>", "");
|
|
130
150
|
// If the formula ends with any operator without ending with numbers, then the formula is not correct
|
|
131
151
|
const regex = /^(?!0+$)(?=.*[+\-*/%])(?!.*(?:\s|\+\+|--|%%|\*\*|\+\-|\+\*|\+\%|\-\-|\-\*|\-\%|\*\-|\*\+|\*\%|\%\+|\%\-|\%\/|\%\*|\/\+|\/\-|\/\*|\/\%))(?:(?:\([+\-*/%]*\)|[-+*/%])*)$/;
|
|
132
|
-
if (!regex.test(formulaText) && formulaText !==
|
|
152
|
+
if (!regex.test(formulaText) && formulaText !== "0" && formulaText !== "") {
|
|
133
153
|
try {
|
|
134
154
|
// For example, if textContent (formula) value is like "<chip> + <chip> - 456 + 778 * 464 / 645 % 4736"
|
|
135
155
|
// 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.
|
|
@@ -162,25 +182,30 @@ const FormulaComponent = (props) => {
|
|
|
162
182
|
const onConditionKeyDown = (event) => {
|
|
163
183
|
const content = event.target.textContent.trim();
|
|
164
184
|
const lastChar = content.charAt(content.length - 1);
|
|
165
|
-
const operators = [
|
|
185
|
+
const operators = ["%", "*", "-", "+", "/"];
|
|
166
186
|
let selection = window.getSelection();
|
|
167
|
-
let actElm = document.querySelector(
|
|
168
|
-
if (actElm && actElm.innerHTML.indexOf(
|
|
187
|
+
let actElm = document.querySelector(".formulaSpanElm.activeSpanElm");
|
|
188
|
+
if (actElm && actElm.innerHTML.indexOf("<br>") !== -1)
|
|
169
189
|
actElm.innerHTML = actElm.textContent;
|
|
170
|
-
if (event.keyCode === 37 ||
|
|
171
|
-
|
|
172
|
-
|
|
190
|
+
if (event.keyCode === 37 ||
|
|
191
|
+
event.keyCode === 39 ||
|
|
192
|
+
event.keyCode === 38 ||
|
|
193
|
+
event.keyCode === 40) {
|
|
194
|
+
let actElm = document.querySelector(".formulaSpanElm.activeSpanElm");
|
|
195
|
+
let spanElms = Array.from(document.querySelectorAll(".formulaSpanElm"));
|
|
173
196
|
const range = document.createRange();
|
|
174
197
|
// range.setStart(selection.focusNode, selection.focusOffset);
|
|
175
198
|
let activeIndex;
|
|
176
199
|
spanElms.filter((elmt, index) => {
|
|
177
|
-
if (elmt.classList.contains(
|
|
200
|
+
if (elmt.classList.contains("activeSpanElm")) {
|
|
178
201
|
activeIndex = index;
|
|
179
202
|
}
|
|
180
203
|
});
|
|
181
204
|
if (actElm) {
|
|
182
|
-
if (event.keyCode === 37 /* ArrowLeft */ ||
|
|
183
|
-
|
|
205
|
+
if (event.keyCode === 37 /* ArrowLeft */ ||
|
|
206
|
+
event.keyCode === 38 /* ArrowUp */) {
|
|
207
|
+
if (selection.getRangeAt(0).endOffset !== 0 &&
|
|
208
|
+
actElm.innerText.length !== 0) {
|
|
184
209
|
getCursorPosition(actElm);
|
|
185
210
|
return;
|
|
186
211
|
}
|
|
@@ -189,51 +214,69 @@ const FormulaComponent = (props) => {
|
|
|
189
214
|
activeIndex = activeIndex - 1;
|
|
190
215
|
}
|
|
191
216
|
}
|
|
192
|
-
else if (event.keyCode === 39 /* ArrowRight */ ||
|
|
193
|
-
|
|
217
|
+
else if (event.keyCode === 39 /* ArrowRight */ ||
|
|
218
|
+
event.keyCode === 40 /* ArrowDown */) {
|
|
219
|
+
//&& selection.focusOffset === selection.focusNode.textContent.length
|
|
220
|
+
if (actElm.innerText.length === selection.getRangeAt(0).endOffset &&
|
|
221
|
+
activeIndex < spanElms.length - 1) {
|
|
194
222
|
activeIndex = activeIndex + 1;
|
|
195
223
|
}
|
|
196
224
|
}
|
|
197
225
|
if (activeIndex !== -1 && spanElms.indexOf(actElm) !== activeIndex)
|
|
198
|
-
actElm.classList.remove(
|
|
226
|
+
actElm.classList.remove("activeSpanElm");
|
|
199
227
|
}
|
|
200
|
-
if (activeIndex !== null &&
|
|
201
|
-
|
|
228
|
+
if (activeIndex !== null &&
|
|
229
|
+
activeIndex !== -1 &&
|
|
230
|
+
spanElms.length > activeIndex &&
|
|
231
|
+
spanElms.indexOf(actElm) !== activeIndex) {
|
|
232
|
+
if (event.keyCode === 37 /* ArrowLeft */ ||
|
|
233
|
+
event.keyCode === 38 /* ArrowUp */)
|
|
202
234
|
range.selectNodeContents(spanElms[activeIndex]);
|
|
203
235
|
else if (event.keyCode === 39 /* ArrowRight */ || event.keyCode === 40)
|
|
204
236
|
range.setStart(spanElms[activeIndex], 0);
|
|
205
|
-
if (!range.startContainer.parentElement.getAttribute(
|
|
206
|
-
range.startContainer.parentElement.classList.add(
|
|
237
|
+
if (!range.startContainer.parentElement.getAttribute("id")) {
|
|
238
|
+
range.startContainer.parentElement.classList.add("activeSpanElm");
|
|
207
239
|
}
|
|
208
240
|
else {
|
|
209
241
|
let eml = range.startContainer;
|
|
210
|
-
eml === null || eml === void 0 ? void 0 : eml.classList.add(
|
|
242
|
+
eml === null || eml === void 0 ? void 0 : eml.classList.add("activeSpanElm");
|
|
211
243
|
}
|
|
212
244
|
}
|
|
213
|
-
let CurrentActElm = document.querySelector(
|
|
245
|
+
let CurrentActElm = document.querySelector(".formulaSpanElm.activeSpanElm");
|
|
214
246
|
if (CurrentActElm)
|
|
215
247
|
getCursorPosition(CurrentActElm);
|
|
216
248
|
}
|
|
217
249
|
// Allow numbers, *, -, +, %, /, (, ), and single space
|
|
218
|
-
if (!((event.keyCode >=
|
|
219
|
-
event.keyCode ===
|
|
220
|
-
event.keyCode ===
|
|
221
|
-
event.keyCode ===
|
|
250
|
+
if (!((event.keyCode >= "0" && event.keyCode <= "9") ||
|
|
251
|
+
event.keyCode === "*" ||
|
|
252
|
+
event.keyCode === "-" ||
|
|
253
|
+
event.keyCode === "+" ||
|
|
254
|
+
event.keyCode === "%" ||
|
|
255
|
+
event.keyCode === "/" ||
|
|
256
|
+
event.keyCode === "(" ||
|
|
257
|
+
event.keyCode === ")" ||
|
|
258
|
+
(event.keyCode !== " " &&
|
|
259
|
+
event.target.textContent.trim().slice(-1) === " "))) {
|
|
222
260
|
event.preventDefault();
|
|
223
261
|
}
|
|
224
262
|
// Prevent new lines (enter keypress)
|
|
225
|
-
if (event.keyCode ===
|
|
263
|
+
if (event.keyCode === "Enter") {
|
|
226
264
|
event.preventDefault();
|
|
227
265
|
}
|
|
228
266
|
getCursorPosition(event.target);
|
|
229
267
|
// Prevent entering operators continuously after each other
|
|
230
|
-
if (operators.includes(event.keyCode) &&
|
|
268
|
+
if (operators.includes(event.keyCode) &&
|
|
269
|
+
operators.includes(lastChar) &&
|
|
270
|
+
operators.includes(content[contentEditableCursorIndex - 2])) {
|
|
231
271
|
event.preventDefault();
|
|
232
272
|
}
|
|
233
273
|
};
|
|
234
274
|
const onFilter = (e) => {
|
|
235
275
|
if (e.target.value) {
|
|
236
|
-
let opts = props === null || props === void 0 ? void 0 : props.fieldOptions.filter((x) => {
|
|
276
|
+
let opts = props === null || props === void 0 ? void 0 : props.fieldOptions.filter((x) => {
|
|
277
|
+
var _a, _b;
|
|
278
|
+
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(e.target.value.toLowerCase());
|
|
279
|
+
});
|
|
237
280
|
setFieldOptions(opts);
|
|
238
281
|
}
|
|
239
282
|
else {
|
|
@@ -242,8 +285,9 @@ const FormulaComponent = (props) => {
|
|
|
242
285
|
};
|
|
243
286
|
const onClickContentEditable = (e) => {
|
|
244
287
|
var _a, _b, _c;
|
|
245
|
-
let spanElms = Array.from(document.querySelectorAll(
|
|
246
|
-
if (!e.target.classList.contains(
|
|
288
|
+
let spanElms = Array.from(document.querySelectorAll(".formulaSpanElm"));
|
|
289
|
+
if (!e.target.classList.contains("formulaSpanElm") &&
|
|
290
|
+
spanElms.length !== 0) {
|
|
247
291
|
// let contentEditableElement = e.target
|
|
248
292
|
// contentEditableElement.focus(); // Set focus to the content editable element
|
|
249
293
|
const range = document.createRange(); // Create a new range
|
|
@@ -252,9 +296,10 @@ const FormulaComponent = (props) => {
|
|
|
252
296
|
const selection = window.getSelection(); // Get the selection object
|
|
253
297
|
selection.removeAllRanges(); // Remove any existing ranges from the selection
|
|
254
298
|
selection.addRange(range);
|
|
255
|
-
(_a = document
|
|
256
|
-
|
|
257
|
-
|
|
299
|
+
(_a = document
|
|
300
|
+
.querySelector(".activeSpanElm")) === null || _a === void 0 ? void 0 : _a.classList.remove("activeSpanElm");
|
|
301
|
+
let elms = document.querySelectorAll(".formulaSpanElm");
|
|
302
|
+
(_c = (_b = elms[elms.length - 1]) === null || _b === void 0 ? void 0 : _b.classList) === null || _c === void 0 ? void 0 : _c.add("activeSpanElm");
|
|
258
303
|
e.preventDefault();
|
|
259
304
|
}
|
|
260
305
|
else {
|
|
@@ -262,7 +307,7 @@ const FormulaComponent = (props) => {
|
|
|
262
307
|
}
|
|
263
308
|
};
|
|
264
309
|
const onAddOperator = (event, operator) => {
|
|
265
|
-
let elm = document.querySelector(
|
|
310
|
+
let elm = document.querySelector(".activeSpanElm");
|
|
266
311
|
console.log(event);
|
|
267
312
|
// const operators = ['%', '*', '-', '+', '/'];
|
|
268
313
|
// const lastChar = elm.innerHTML?.charAt(elm.innerHTML?.length - 1);
|
|
@@ -271,36 +316,37 @@ const FormulaComponent = (props) => {
|
|
|
271
316
|
// event.preventDefault();
|
|
272
317
|
// return;
|
|
273
318
|
// }
|
|
274
|
-
if (contentEditableDivRef.current.innerHTML !==
|
|
319
|
+
if (contentEditableDivRef.current.innerHTML !==
|
|
320
|
+
`<span class='formulaSpanElm'></span>`) {
|
|
275
321
|
elm.innerHTML = elm.innerHTML + operator;
|
|
276
322
|
}
|
|
277
323
|
onChangeCondition();
|
|
278
324
|
};
|
|
279
325
|
const onSave = (event) => {
|
|
280
326
|
let elements = contentEditableDivRef.current.children;
|
|
281
|
-
let formula =
|
|
327
|
+
let formula = "";
|
|
282
328
|
for (let i = 0; i < elements.length; i++) {
|
|
283
329
|
const element = elements[i];
|
|
284
|
-
if (element.classList.contains(
|
|
285
|
-
formula = formula + element.getAttribute(
|
|
330
|
+
if (element.classList.contains("formulaChipElm"))
|
|
331
|
+
formula = formula + element.getAttribute("itemid");
|
|
286
332
|
else
|
|
287
333
|
formula = formula + element.innerHTML;
|
|
288
334
|
}
|
|
289
335
|
// setContent(contentEditableDivRef.current.innerHTML)
|
|
290
336
|
priceConditioRef.current.toggle(event);
|
|
291
|
-
formula = formula.replaceAll(
|
|
337
|
+
formula = formula.replaceAll("<br>", "");
|
|
292
338
|
props.onSaveFormula(formula);
|
|
293
339
|
};
|
|
294
340
|
const onKeyDownHandler = (event) => {
|
|
295
341
|
var _a;
|
|
296
342
|
if (event.keyCode === 8 || event.keyCode === 46) {
|
|
297
343
|
// let elm = document.querySelector('.activeSpanElm') as HTMLElement
|
|
298
|
-
let spanElms = Array.from(document.querySelectorAll(
|
|
299
|
-
let activeIndex = spanElms.findIndex((x) => x.classList.contains(
|
|
300
|
-
if (activeIndex && ((_a = spanElms[activeIndex]) === null || _a === void 0 ? void 0 : _a.innerHTML) ===
|
|
344
|
+
let spanElms = Array.from(document.querySelectorAll(".formulaSpanElm"));
|
|
345
|
+
let activeIndex = spanElms.findIndex((x) => x.classList.contains("activeSpanElm"));
|
|
346
|
+
if (activeIndex && ((_a = spanElms[activeIndex]) === null || _a === void 0 ? void 0 : _a.innerHTML) === "") {
|
|
301
347
|
spanElms[activeIndex].previousElementSibling.remove();
|
|
302
348
|
let index = event.keyCode === 8 ? activeIndex - 1 : activeIndex;
|
|
303
|
-
spanElms[index].classList.add(
|
|
349
|
+
spanElms[index].classList.add("activeSpanElm");
|
|
304
350
|
const range = document.createRange(); // Create a new range
|
|
305
351
|
spanElms[activeIndex].remove();
|
|
306
352
|
range.selectNodeContents(spanElms[index]); // Select the entire content of the element
|
|
@@ -315,43 +361,54 @@ const FormulaComponent = (props) => {
|
|
|
315
361
|
const menuContent = [
|
|
316
362
|
{
|
|
317
363
|
template: () => {
|
|
318
|
-
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full" }, { children: [(props === null || props === void 0 ? void 0 : props.headerTemplate) ?
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
364
|
+
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)
|
|
365
|
+
? props === null || props === void 0 ? void 0 : props.headerLabel
|
|
366
|
+
: "Configure Value" })), (0, jsx_runtime_1.jsx)("span", { children: (props === null || props === void 0 ? void 0 : props.headerDescription)
|
|
367
|
+
? props === null || props === void 0 ? void 0 : props.headerDescription
|
|
368
|
+
: "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) && (
|
|
369
|
+
// <div className="px-4 py-2 border-top-1 border-gray-200">
|
|
370
|
+
// <div className="relative flex aling-items-center w-full">
|
|
371
|
+
// <div className="h-full flex align-items-cente justify-content-center w-2rem absolute left-0">
|
|
372
|
+
// <SvgComponent icon="search-md" />
|
|
373
|
+
// </div>
|
|
374
|
+
// <InputText onInput={(e: any) => onFilter(e)} className="pl-8 w-full" placeholder={props.fieldOptionFilterPlaceholder} />
|
|
375
|
+
// </div>
|
|
376
|
+
// </div>
|
|
377
|
+
(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) => {
|
|
378
|
+
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));
|
|
379
|
+
}) }))) : ((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)
|
|
380
|
+
? props === null || props === void 0 ? void 0 : props.fieldFilterEmptyMessage
|
|
381
|
+
: "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) => {
|
|
382
|
+
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" })] }));
|
|
383
|
+
}) })), (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>` &&
|
|
384
|
+
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)
|
|
385
|
+
? props === null || props === void 0 ? void 0 : props.formulaElemectPlaceholder
|
|
386
|
+
: "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) => {
|
|
387
|
+
setContent(props === null || props === void 0 ? void 0 : props.formulaValue);
|
|
388
|
+
priceConditioRef.current.toggle(e);
|
|
389
|
+
} }, { 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"));
|
|
390
|
+
},
|
|
391
|
+
},
|
|
336
392
|
];
|
|
337
393
|
const addEventListenerForSpan = () => {
|
|
338
394
|
var _a;
|
|
339
395
|
// Select all div elements with the specified class name
|
|
340
|
-
const spanElements = document.querySelectorAll(
|
|
341
|
-
(_a = document.querySelector(
|
|
396
|
+
const spanElements = document.querySelectorAll(".formulaSpanElm");
|
|
397
|
+
(_a = document.querySelector(".activeSpanElm")) === null || _a === void 0 ? void 0 : _a.classList.remove("activeSpanElm");
|
|
342
398
|
// Loop through each div element
|
|
343
399
|
spanElements.forEach((spanElement) => {
|
|
344
400
|
// Add an event listener for the 'click' event to each div element
|
|
345
|
-
spanElement.addEventListener(
|
|
401
|
+
spanElement.addEventListener("click", function (e) {
|
|
346
402
|
var _a;
|
|
347
|
-
(_a = document
|
|
348
|
-
|
|
403
|
+
(_a = document
|
|
404
|
+
.querySelector(".activeSpanElm")) === null || _a === void 0 ? void 0 : _a.classList.remove("activeSpanElm");
|
|
405
|
+
e.target.classList.add("activeSpanElm");
|
|
349
406
|
getCursorPosition(e.target);
|
|
350
407
|
// Your event handler code here
|
|
351
408
|
});
|
|
352
409
|
});
|
|
353
410
|
if (spanElements.length !== 0) {
|
|
354
|
-
spanElements[spanElements.length - 1].classList.add(
|
|
411
|
+
spanElements[spanElements.length - 1].classList.add("activeSpanElm");
|
|
355
412
|
getCursorPosition(spanElements[spanElements.length - 1]);
|
|
356
413
|
}
|
|
357
414
|
};
|
|
@@ -368,29 +425,46 @@ const FormulaComponent = (props) => {
|
|
|
368
425
|
// let chipElm: string = '';
|
|
369
426
|
// let text = splitText[i];
|
|
370
427
|
const id = splitText[i].match(pattern);
|
|
371
|
-
let chipElm =
|
|
428
|
+
let chipElm = "";
|
|
372
429
|
if (id) {
|
|
373
430
|
let item = fieldOptions.find((x) => x.id === id[0]);
|
|
374
|
-
chipElm = `<div class="formulaChipElm max-w-8rem w-max
|
|
431
|
+
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>`;
|
|
375
432
|
}
|
|
376
433
|
// chipElm = text.replace(text, t)
|
|
377
|
-
const placeholderText = splitText[i].replace(pattern,
|
|
378
|
-
const textParts = placeholderText
|
|
434
|
+
const placeholderText = splitText[i].replace(pattern, "|");
|
|
435
|
+
const textParts = placeholderText
|
|
436
|
+
.split("|")
|
|
437
|
+
.filter((part) => part !== "");
|
|
379
438
|
if (textParts.length > 0) {
|
|
380
439
|
for (let z = 0; z < textParts.length; z++) {
|
|
381
|
-
if (z === 0 &&
|
|
382
|
-
formulatText = textParts[z]
|
|
440
|
+
if (z === 0 && splitText.length - 1 === i && chipElm)
|
|
441
|
+
formulatText = textParts[z]
|
|
442
|
+
? formulatText +
|
|
443
|
+
`<span class='formulaSpanElm'>${textParts[z]}</span>` +
|
|
444
|
+
chipElm +
|
|
445
|
+
`<span class='formulaSpanElm'></span>`
|
|
446
|
+
: `<span class='formulaSpanElm'></span>`;
|
|
383
447
|
else if (z === 0 && chipElm && id) {
|
|
384
448
|
// let lastSpanIndex = formulatText.lastIndexOf('</span>');
|
|
385
|
-
formulatText = textParts[z]
|
|
449
|
+
formulatText = textParts[z]
|
|
450
|
+
? formulatText +
|
|
451
|
+
`<span class='formulaSpanElm'>${textParts[z]}</span>` +
|
|
452
|
+
chipElm
|
|
453
|
+
: `<span class='formulaSpanElm'></span>`;
|
|
386
454
|
}
|
|
387
455
|
else
|
|
388
|
-
formulatText = textParts[z]
|
|
456
|
+
formulatText = textParts[z]
|
|
457
|
+
? formulatText +
|
|
458
|
+
`<span class='formulaSpanElm'>${textParts[z]}</span>`
|
|
459
|
+
: `<span class='formulaSpanElm'></span>`;
|
|
389
460
|
}
|
|
390
461
|
}
|
|
391
462
|
else {
|
|
392
|
-
if (
|
|
393
|
-
formulatText =
|
|
463
|
+
if (splitText.length - 1 === i)
|
|
464
|
+
formulatText =
|
|
465
|
+
`<span class='formulaSpanElm'></span>` +
|
|
466
|
+
chipElm +
|
|
467
|
+
`<span class='formulaSpanElm'></span>`;
|
|
394
468
|
else
|
|
395
469
|
formulatText = `<span class='formulaSpanElm'></span>` + chipElm;
|
|
396
470
|
}
|
|
@@ -405,21 +479,24 @@ const FormulaComponent = (props) => {
|
|
|
405
479
|
setIsValid(false);
|
|
406
480
|
}, 1000);
|
|
407
481
|
};
|
|
408
|
-
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:
|
|
409
|
-
|
|
482
|
+
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) => {
|
|
483
|
+
if (props === null || props === void 0 ? void 0 : props.onConditionChange)
|
|
484
|
+
props === null || props === void 0 ? void 0 : props.onConditionChange(e);
|
|
485
|
+
setConditionValue(e.value);
|
|
486
|
+
}, 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: (() => {
|
|
410
487
|
var _a, _b;
|
|
411
488
|
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;
|
|
412
489
|
switch (optiontype) {
|
|
413
490
|
case "INCREASE_BY_VALUE":
|
|
414
491
|
case "DECREASE_BY_VALUE": {
|
|
415
|
-
return (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, Object.assign({ useGrouping: false, min: 0, minFractionDigits: 2, maxFractionDigits: 2 }, 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:
|
|
492
|
+
return ((0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, Object.assign({ useGrouping: false, min: 0, minFractionDigits: 2, maxFractionDigits: 2 }, 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" })));
|
|
416
493
|
}
|
|
417
494
|
case "INCREASE_BY_PERCENTAGE":
|
|
418
495
|
case "DECREASE_BY_PERCENTAGE": {
|
|
419
|
-
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className:
|
|
496
|
+
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 }, 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" }))] })));
|
|
420
497
|
}
|
|
421
498
|
case "MANUAL": {
|
|
422
|
-
return (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, Object.assign({ useGrouping: false, min: 0, minFractionDigits: 2, maxFractionDigits: 2 }, 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:
|
|
499
|
+
return ((0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, Object.assign({ useGrouping: false, min: 0, minFractionDigits: 2, maxFractionDigits: 2 }, 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" })));
|
|
423
500
|
}
|
|
424
501
|
case "CALCULATION": {
|
|
425
502
|
const pattern = /(?:[a-f0-9]{24}|msrp|map|costprice)/g;
|
|
@@ -431,7 +508,7 @@ const FormulaComponent = (props) => {
|
|
|
431
508
|
let name = (_b = fieldOptions.find((item) => item.id === id)) === null || _b === void 0 ? void 0 : _b.name;
|
|
432
509
|
text = text.replaceAll(id, name);
|
|
433
510
|
}
|
|
434
|
-
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:
|
|
511
|
+
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" })) })));
|
|
435
512
|
// }else{
|
|
436
513
|
// return 'Select'
|
|
437
514
|
// }
|
|
@@ -9,7 +9,7 @@ const ScMultiSelect = (props) => {
|
|
|
9
9
|
const multiselectElm = (0, react_1.useRef)(null);
|
|
10
10
|
const [showCount, setShowCount] = (0, react_1.useState)(0);
|
|
11
11
|
const checkOverflow = (0, react_1.useCallback)(() => {
|
|
12
|
-
if (multiselectElm) {
|
|
12
|
+
if (multiselectElm !== null) {
|
|
13
13
|
const dropDownItem = multiselectElm.current.getElement().children[1].children[0];
|
|
14
14
|
const selectedItems = multiselectElm.current.getElement().children[1].children[0].children;
|
|
15
15
|
const containerWidth = dropDownItem.offsetWidth;
|
|
@@ -31,7 +31,7 @@ const ScMultiSelect = (props) => {
|
|
|
31
31
|
}, [props === null || props === void 0 ? void 0 : props.value, multiselectElm]);
|
|
32
32
|
(0, react_1.useEffect)(() => {
|
|
33
33
|
checkOverflow();
|
|
34
|
-
}, []);
|
|
34
|
+
}, [checkOverflow]);
|
|
35
35
|
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "relative form_field" }, { children: [(0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, { ref: multiselectElm, selectAll: props === null || props === void 0 ? void 0 : props.selectAll, filter: props === null || props === void 0 ? void 0 : props.filter, filterIcon: props === null || props === void 0 ? void 0 : props.filterIcon, filterBy: props === null || props === void 0 ? void 0 : props.filterBy, onFilter: props === null || props === void 0 ? void 0 : props.onFilter, filterPlaceholder: props === null || props === void 0 ? void 0 : props.filterPlaceholder, filterTemplate: props === null || props === void 0 ? void 0 : props.filterTemplate, filterMatchMode: props.filterMatchMode, fixedPlaceholder: props === null || props === void 0 ? void 0 : props.fixedPlaceholder, filterLocale: props === null || props === void 0 ? void 0 : props.filterLocale, filterInputAutoFocus: props === null || props === void 0 ? void 0 : props.filterInputAutoFocus, emptyFilterMessage: props === null || props === void 0 ? void 0 : props.emptyFilterMessage, panelClassName: "sc_multiSelect_panel", onShow: props === null || props === void 0 ? void 0 : props.onShow, onHide: props === null || props === void 0 ? void 0 : props.onHide, dropdownIcon: props === null || props === void 0 ? void 0 : props.dropdownIcon, showClear: props === null || props === void 0 ? void 0 : props.showClear, display: props === null || props === void 0 ? void 0 : props.display, value: props === null || props === void 0 ? void 0 : props.value, onChange: (e) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
|
|
36
36
|
yield (props === null || props === void 0 ? void 0 : props.onChange(e));
|
|
37
37
|
if (props === null || props === void 0 ? void 0 : props.showSelectedCount)
|