sag_components 1.0.611 → 1.0.613

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.
Files changed (4) hide show
  1. package/dist/stories/components/DropdownMulti.js +6 -9
  2. package/dist/stories/components/DropdownMulti.style.js +1 -3
  3. package/dist/stories/components/FilterPanel.js +55 -12
  4. package/package.json +1 -1
package/dist/stories/components/DropdownMulti.js CHANGED
@@ -25,8 +25,8 @@ const checkedIcon = /*#__PURE__*/_react.default.createElement(_CheckBox.default,
25
25
  /**
26
26
  * SAG DropdownMulti
27
27
  */
28
- const DropdownMulti = _ref => {
29
- let {
28
+ const DropdownMulti = props => {
29
+ const {
30
30
  name,
31
31
  width = '100%',
32
32
  size,
@@ -47,11 +47,7 @@ const DropdownMulti = _ref => {
47
47
  disabled = false,
48
48
  dropdownListfontSize = '14px',
49
49
  placeHolderFontSize = '14px'
50
- } = _ref;
51
- /**
52
- * SAG DropdownMulti
53
- */
54
-
50
+ } = props;
55
51
  const [currentInputValue, setCurrentInputValue] = (0, _react.useState)(null);
56
52
  const [selectedOptionsState, setSelectedOptionsState] = (0, _react.useState)([]);
57
53
  (0, _react.useEffect)(() => {
@@ -192,10 +188,10 @@ const DropdownMulti = _ref => {
192
188
  width: "0.5em",
193
189
  height: "0.5em"
194
190
  }) : null,
195
- renderOption: (props, option, _ref2) => {
191
+ renderOption: (props, option, _ref) => {
196
192
  let {
197
193
  selected
198
- } = _ref2;
194
+ } = _ref;
199
195
  return /*#__PURE__*/_react.default.createElement("li", props, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
200
196
  icon: icon,
201
197
  checkedIcon: checkedIcon,
@@ -257,6 +253,7 @@ const DropdownMulti = _ref => {
257
253
 
258
254
  // --------------------------------- MAIN -------------------------------------
259
255
  return /*#__PURE__*/_react.default.createElement(_DropdownMulti.DropdownContainer, {
256
+ className: "DropdownContainer",
260
257
  width: width
261
258
  }, getAutocompleteMulti());
262
259
  };
package/dist/stories/components/DropdownMulti.style.js CHANGED
@@ -8,6 +8,4 @@ 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
- // 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);
11
+ 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);
package/dist/stories/components/FilterPanel.js CHANGED
@@ -31,18 +31,29 @@ 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)('');
35
34
  (0, _react.useEffect)(() => {
36
- setFieldsDataState(fieldsData);
35
+ const newFieldsDataState = FieldsDataState.map(itemFieldsDataState => {
36
+ const foundItem = fieldsData.find(itemfieldsData => itemFieldsDataState.name === itemfieldsData.name);
37
+ return {
38
+ ...itemFieldsDataState,
39
+ ...(itemFieldsDataState.dropdownOptions ? {
40
+ dropdownOptions: foundItem !== null && foundItem !== void 0 && foundItem.dropdownOptions ? foundItem === null || foundItem === void 0 ? void 0 : foundItem.dropdownOptions : undefined
41
+ } : '')
42
+ };
43
+ });
44
+ setFieldsDataState(newFieldsDataState);
45
+ console.log('newFieldsDataState', newFieldsDataState);
37
46
  }, [fieldsData]);
38
47
  const onClickResetHandler = () => {
39
48
  const newFieldsDataState = FieldsDataState === null || FieldsDataState === void 0 ? void 0 : FieldsDataState.map(itemField => ({
40
49
  ...itemField,
41
- selectedValue: undefined
50
+ selectedValue: undefined,
51
+ ...(itemField.periodPickerSelectedValue ? {
52
+ periodPickerSelectedValue: undefined
53
+ } : '')
42
54
  }));
43
55
  setFieldsDataState(newFieldsDataState);
44
56
  setReset(!Reset);
45
- setPeriodPickerSelectedValue('');
46
57
  onResetClick({
47
58
  eventName: 'onResetClick',
48
59
  fieldsData: newFieldsDataState
@@ -62,7 +73,7 @@ const FilterPanel = props => {
62
73
  };
63
74
  const displayPeriodPickerContent = item => {
64
75
  let content;
65
- switch (PeriodPickerSelectedValue) {
76
+ switch (item.periodPickerSelectedValue) {
66
77
  case 'date':
67
78
  content = /*#__PURE__*/_react.default.createElement(_FilterPanel.DatePickerContainer, {
68
79
  className: "DatePickerContainer"
@@ -164,6 +175,7 @@ const FilterPanel = props => {
164
175
  className: "Dropdown",
165
176
  name: ''.concat(item.name, '_Year'),
166
177
  reset: Reset,
178
+ showPopupIcon: true,
167
179
  allowedInput: "all",
168
180
  dropdownListfontSize: "14px",
169
181
  labelColor: borderColor,
@@ -201,7 +213,30 @@ const FilterPanel = props => {
201
213
  });
202
214
  break;
203
215
  default:
204
- content = '';
216
+ content = /*#__PURE__*/_react.default.createElement(_FilterPanel.PeriodPickerContainer, {
217
+ className: "PeriodPickerContainer"
218
+ }, /*#__PURE__*/_react.default.createElement(_Dropdown.Dropdown, {
219
+ className: "Dropdown",
220
+ name: ''.concat(item.name, '_Default'),
221
+ reset: Reset,
222
+ showPopupIcon: false,
223
+ allowedInput: "all",
224
+ dropdownListfontSize: "14px",
225
+ labelColor: borderColor,
226
+ limitTagsOnMultiSelect: 2,
227
+ onInputChange: () => {},
228
+ shape: "round",
229
+ size: "large",
230
+ text: "Select Dates",
231
+ value: undefined,
232
+ required: false,
233
+ disabled: true,
234
+ placeHolder: "Select Dates",
235
+ placeHolderFontSize: "14px",
236
+ onChange: () => {},
237
+ options: [],
238
+ width: "100%"
239
+ }));
205
240
  }
206
241
  return content;
207
242
  };
@@ -213,6 +248,7 @@ const FilterPanel = props => {
213
248
  className: "Dropdown",
214
249
  name: item.name,
215
250
  reset: Reset,
251
+ showPopupIcon: true,
216
252
  allowedInput: "all",
217
253
  dropdownListfontSize: "14px",
218
254
  labelColor: borderColor,
@@ -220,7 +256,7 @@ const FilterPanel = props => {
220
256
  onInputChange: () => {},
221
257
  shape: "round",
222
258
  size: "large",
223
- text: item.label,
259
+ text: !item.selectedValue ? item.labelEmptyValue || item.label : item.label,
224
260
  value: item.selectedValue || undefined,
225
261
  required: item.required,
226
262
  disabled: item.disabled,
@@ -252,6 +288,7 @@ const FilterPanel = props => {
252
288
  className: "DropdownMulti",
253
289
  name: item.name,
254
290
  reset: Reset,
291
+ showPopupIcon: true,
255
292
  allowedInput: "all",
256
293
  dropdownListfontSize: "14px",
257
294
  labelColor: borderColor,
@@ -259,7 +296,7 @@ const FilterPanel = props => {
259
296
  onInputChange: () => {},
260
297
  shape: "round",
261
298
  size: "large",
262
- text: item.label,
299
+ text: !item.selectedValue ? item.labelEmptyValue || item.label : item.label,
263
300
  value: item.selectedValue || undefined,
264
301
  required: item.required,
265
302
  disabled: item.disabled,
@@ -293,7 +330,7 @@ const FilterPanel = props => {
293
330
  className: "RangePicker",
294
331
  borderColor: borderColor,
295
332
  borderRadius: "12px",
296
- label: item.label,
333
+ label: !item.selectedValue ? item.labelEmptyValue || item.label : item.label,
297
334
  onChange: eventDatePicker => {
298
335
  const selectedValue = eventDatePicker && typeof eventDatePicker === 'string' ? "".concat(eventDatePicker) : undefined;
299
336
  const newFieldsDataState = FieldsDataState === null || FieldsDataState === void 0 ? void 0 : FieldsDataState.map(itemField => itemField.name === item.name ? {
@@ -323,6 +360,7 @@ const FilterPanel = props => {
323
360
  className: "Dropdown",
324
361
  name: item.name,
325
362
  reset: Reset,
363
+ showPopupIcon: true,
326
364
  allowedInput: "all",
327
365
  dropdownListfontSize: "14px",
328
366
  labelColor: borderColor,
@@ -330,7 +368,7 @@ const FilterPanel = props => {
330
368
  onInputChange: () => {},
331
369
  shape: "round",
332
370
  size: "large",
333
- text: item.label,
371
+ text: !item.periodPickerSelectedValue ? item.labelEmptyValue || item.label : item.label,
334
372
  value: item.selectedValue || undefined,
335
373
  required: item.required,
336
374
  disabled: item.disabled,
@@ -338,8 +376,12 @@ const FilterPanel = props => {
338
376
  placeHolderFontSize: "14px",
339
377
  onChange: eventDropdownPeriodPicker => {
340
378
  var _eventDropdownPeriodP, _eventDropdownPeriodP2;
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);
379
+ const newPeriodPickerSelectedValue = 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;
380
+ const newFieldsDataState = FieldsDataState === null || FieldsDataState === void 0 ? void 0 : FieldsDataState.map(itemField => itemField.name === item.name ? {
381
+ ...itemField,
382
+ periodPickerSelectedValue: newPeriodPickerSelectedValue ? "".concat(newPeriodPickerSelectedValue) : undefined
383
+ } : itemField);
384
+ setFieldsDataState(newFieldsDataState);
343
385
  },
344
386
  options: item.dropdownOptions && item.dropdownOptions.length > 0 ? item.dropdownOptions : [],
345
387
  width: "100%"
@@ -347,6 +389,7 @@ const FilterPanel = props => {
347
389
  break;
348
390
  default:
349
391
  content = '';
392
+ break;
350
393
  }
351
394
  return content;
352
395
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sag_components",
3
- "version": "1.0.611",
3
+ "version": "1.0.613",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {