sag_components 1.0.609 → 1.0.611
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.
|
@@ -25,8 +25,8 @@ const checkedIcon = /*#__PURE__*/_react.default.createElement(_CheckBox.default,
|
|
|
25
25
|
/**
|
|
26
26
|
* SAG DropdownMulti
|
|
27
27
|
*/
|
|
28
|
-
const DropdownMulti =
|
|
29
|
-
|
|
28
|
+
const DropdownMulti = _ref => {
|
|
29
|
+
let {
|
|
30
30
|
name,
|
|
31
31
|
width = '100%',
|
|
32
32
|
size,
|
|
@@ -47,7 +47,11 @@ const DropdownMulti = props => {
|
|
|
47
47
|
disabled = false,
|
|
48
48
|
dropdownListfontSize = '14px',
|
|
49
49
|
placeHolderFontSize = '14px'
|
|
50
|
-
} =
|
|
50
|
+
} = _ref;
|
|
51
|
+
/**
|
|
52
|
+
* SAG DropdownMulti
|
|
53
|
+
*/
|
|
54
|
+
|
|
51
55
|
const [currentInputValue, setCurrentInputValue] = (0, _react.useState)(null);
|
|
52
56
|
const [selectedOptionsState, setSelectedOptionsState] = (0, _react.useState)([]);
|
|
53
57
|
(0, _react.useEffect)(() => {
|
|
@@ -188,10 +192,10 @@ const DropdownMulti = props => {
|
|
|
188
192
|
width: "0.5em",
|
|
189
193
|
height: "0.5em"
|
|
190
194
|
}) : null,
|
|
191
|
-
renderOption: (props, option,
|
|
195
|
+
renderOption: (props, option, _ref2) => {
|
|
192
196
|
let {
|
|
193
197
|
selected
|
|
194
|
-
} =
|
|
198
|
+
} = _ref2;
|
|
195
199
|
return /*#__PURE__*/_react.default.createElement("li", props, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
|
|
196
200
|
icon: icon,
|
|
197
201
|
checkedIcon: checkedIcon,
|
|
@@ -253,7 +257,6 @@ const DropdownMulti = props => {
|
|
|
253
257
|
|
|
254
258
|
// --------------------------------- MAIN -------------------------------------
|
|
255
259
|
return /*#__PURE__*/_react.default.createElement(_DropdownMulti.DropdownContainer, {
|
|
256
|
-
className: "DropdownContainer",
|
|
257
260
|
width: width
|
|
258
261
|
}, getAutocompleteMulti());
|
|
259
262
|
};
|
|
@@ -8,4 +8,6 @@ exports.DropdownContainer = void 0;
|
|
|
8
8
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
|
|
9
9
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
10
10
|
var _templateObject;
|
|
11
|
-
|
|
11
|
+
// import './font.css';
|
|
12
|
+
|
|
13
|
+
const DropdownContainer = exports.DropdownContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n width: ", ";\n text-align: left; \n position: relative; \n align-items: center;\n justify-content: center;\n font-family: Poppins; \n font-size: \"14px\";\n"])), props => props.width);
|
|
@@ -31,19 +31,18 @@ const FilterPanel = props => {
|
|
|
31
31
|
} = props;
|
|
32
32
|
const [FieldsDataState, setFieldsDataState] = (0, _react.useState)(fieldsData);
|
|
33
33
|
const [Reset, setReset] = (0, _react.useState)(false);
|
|
34
|
+
const [PeriodPickerSelectedValue, setPeriodPickerSelectedValue] = (0, _react.useState)('');
|
|
34
35
|
(0, _react.useEffect)(() => {
|
|
35
36
|
setFieldsDataState(fieldsData);
|
|
36
37
|
}, [fieldsData]);
|
|
37
38
|
const onClickResetHandler = () => {
|
|
38
39
|
const newFieldsDataState = FieldsDataState === null || FieldsDataState === void 0 ? void 0 : FieldsDataState.map(itemField => ({
|
|
39
40
|
...itemField,
|
|
40
|
-
selectedValue: undefined
|
|
41
|
-
...(itemField.periodPickerSelectedValue ? {
|
|
42
|
-
periodPickerSelectedValue: undefined
|
|
43
|
-
} : '')
|
|
41
|
+
selectedValue: undefined
|
|
44
42
|
}));
|
|
45
43
|
setFieldsDataState(newFieldsDataState);
|
|
46
44
|
setReset(!Reset);
|
|
45
|
+
setPeriodPickerSelectedValue('');
|
|
47
46
|
onResetClick({
|
|
48
47
|
eventName: 'onResetClick',
|
|
49
48
|
fieldsData: newFieldsDataState
|
|
@@ -63,7 +62,7 @@ const FilterPanel = props => {
|
|
|
63
62
|
};
|
|
64
63
|
const displayPeriodPickerContent = item => {
|
|
65
64
|
let content;
|
|
66
|
-
switch (
|
|
65
|
+
switch (PeriodPickerSelectedValue) {
|
|
67
66
|
case 'date':
|
|
68
67
|
content = /*#__PURE__*/_react.default.createElement(_FilterPanel.DatePickerContainer, {
|
|
69
68
|
className: "DatePickerContainer"
|
|
@@ -165,7 +164,6 @@ const FilterPanel = props => {
|
|
|
165
164
|
className: "Dropdown",
|
|
166
165
|
name: ''.concat(item.name, '_Year'),
|
|
167
166
|
reset: Reset,
|
|
168
|
-
showPopupIcon: true,
|
|
169
167
|
allowedInput: "all",
|
|
170
168
|
dropdownListfontSize: "14px",
|
|
171
169
|
labelColor: borderColor,
|
|
@@ -203,30 +201,7 @@ const FilterPanel = props => {
|
|
|
203
201
|
});
|
|
204
202
|
break;
|
|
205
203
|
default:
|
|
206
|
-
content =
|
|
207
|
-
className: "PeriodPickerContainer"
|
|
208
|
-
}, /*#__PURE__*/_react.default.createElement(_Dropdown.Dropdown, {
|
|
209
|
-
className: "Dropdown",
|
|
210
|
-
name: ''.concat(item.name, '_Default'),
|
|
211
|
-
reset: Reset,
|
|
212
|
-
showPopupIcon: false,
|
|
213
|
-
allowedInput: "all",
|
|
214
|
-
dropdownListfontSize: "14px",
|
|
215
|
-
labelColor: borderColor,
|
|
216
|
-
limitTagsOnMultiSelect: 2,
|
|
217
|
-
onInputChange: () => {},
|
|
218
|
-
shape: "round",
|
|
219
|
-
size: "large",
|
|
220
|
-
text: "Select Dates",
|
|
221
|
-
value: undefined,
|
|
222
|
-
required: false,
|
|
223
|
-
disabled: true,
|
|
224
|
-
placeHolder: "Select Dates",
|
|
225
|
-
placeHolderFontSize: "14px",
|
|
226
|
-
onChange: () => {},
|
|
227
|
-
options: [],
|
|
228
|
-
width: "100%"
|
|
229
|
-
}));
|
|
204
|
+
content = '';
|
|
230
205
|
}
|
|
231
206
|
return content;
|
|
232
207
|
};
|
|
@@ -238,7 +213,6 @@ const FilterPanel = props => {
|
|
|
238
213
|
className: "Dropdown",
|
|
239
214
|
name: item.name,
|
|
240
215
|
reset: Reset,
|
|
241
|
-
showPopupIcon: true,
|
|
242
216
|
allowedInput: "all",
|
|
243
217
|
dropdownListfontSize: "14px",
|
|
244
218
|
labelColor: borderColor,
|
|
@@ -246,7 +220,7 @@ const FilterPanel = props => {
|
|
|
246
220
|
onInputChange: () => {},
|
|
247
221
|
shape: "round",
|
|
248
222
|
size: "large",
|
|
249
|
-
text:
|
|
223
|
+
text: item.label,
|
|
250
224
|
value: item.selectedValue || undefined,
|
|
251
225
|
required: item.required,
|
|
252
226
|
disabled: item.disabled,
|
|
@@ -278,7 +252,6 @@ const FilterPanel = props => {
|
|
|
278
252
|
className: "DropdownMulti",
|
|
279
253
|
name: item.name,
|
|
280
254
|
reset: Reset,
|
|
281
|
-
showPopupIcon: true,
|
|
282
255
|
allowedInput: "all",
|
|
283
256
|
dropdownListfontSize: "14px",
|
|
284
257
|
labelColor: borderColor,
|
|
@@ -286,7 +259,7 @@ const FilterPanel = props => {
|
|
|
286
259
|
onInputChange: () => {},
|
|
287
260
|
shape: "round",
|
|
288
261
|
size: "large",
|
|
289
|
-
text:
|
|
262
|
+
text: item.label,
|
|
290
263
|
value: item.selectedValue || undefined,
|
|
291
264
|
required: item.required,
|
|
292
265
|
disabled: item.disabled,
|
|
@@ -320,7 +293,7 @@ const FilterPanel = props => {
|
|
|
320
293
|
className: "RangePicker",
|
|
321
294
|
borderColor: borderColor,
|
|
322
295
|
borderRadius: "12px",
|
|
323
|
-
label:
|
|
296
|
+
label: item.label,
|
|
324
297
|
onChange: eventDatePicker => {
|
|
325
298
|
const selectedValue = eventDatePicker && typeof eventDatePicker === 'string' ? "".concat(eventDatePicker) : undefined;
|
|
326
299
|
const newFieldsDataState = FieldsDataState === null || FieldsDataState === void 0 ? void 0 : FieldsDataState.map(itemField => itemField.name === item.name ? {
|
|
@@ -350,7 +323,6 @@ const FilterPanel = props => {
|
|
|
350
323
|
className: "Dropdown",
|
|
351
324
|
name: item.name,
|
|
352
325
|
reset: Reset,
|
|
353
|
-
showPopupIcon: true,
|
|
354
326
|
allowedInput: "all",
|
|
355
327
|
dropdownListfontSize: "14px",
|
|
356
328
|
labelColor: borderColor,
|
|
@@ -358,7 +330,7 @@ const FilterPanel = props => {
|
|
|
358
330
|
onInputChange: () => {},
|
|
359
331
|
shape: "round",
|
|
360
332
|
size: "large",
|
|
361
|
-
text:
|
|
333
|
+
text: item.label,
|
|
362
334
|
value: item.selectedValue || undefined,
|
|
363
335
|
required: item.required,
|
|
364
336
|
disabled: item.disabled,
|
|
@@ -366,12 +338,8 @@ const FilterPanel = props => {
|
|
|
366
338
|
placeHolderFontSize: "14px",
|
|
367
339
|
onChange: eventDropdownPeriodPicker => {
|
|
368
340
|
var _eventDropdownPeriodP, _eventDropdownPeriodP2;
|
|
369
|
-
const
|
|
370
|
-
|
|
371
|
-
...itemField,
|
|
372
|
-
periodPickerSelectedValue: newPeriodPickerSelectedValue ? "".concat(newPeriodPickerSelectedValue) : undefined
|
|
373
|
-
} : itemField);
|
|
374
|
-
setFieldsDataState(newFieldsDataState);
|
|
341
|
+
const selectedValue = eventDropdownPeriodPicker !== null && eventDropdownPeriodPicker !== void 0 && (_eventDropdownPeriodP = eventDropdownPeriodPicker.newValue) !== null && _eventDropdownPeriodP !== void 0 && _eventDropdownPeriodP.value ? "".concat(eventDropdownPeriodPicker === null || eventDropdownPeriodPicker === void 0 ? void 0 : (_eventDropdownPeriodP2 = eventDropdownPeriodPicker.newValue) === null || _eventDropdownPeriodP2 === void 0 ? void 0 : _eventDropdownPeriodP2.value) : undefined;
|
|
342
|
+
setPeriodPickerSelectedValue(selectedValue);
|
|
375
343
|
},
|
|
376
344
|
options: item.dropdownOptions && item.dropdownOptions.length > 0 ? item.dropdownOptions : [],
|
|
377
345
|
width: "100%"
|
|
@@ -379,7 +347,6 @@ const FilterPanel = props => {
|
|
|
379
347
|
break;
|
|
380
348
|
default:
|
|
381
349
|
content = '';
|
|
382
|
-
break;
|
|
383
350
|
}
|
|
384
351
|
return content;
|
|
385
352
|
};
|