sag_components 1.0.608 → 1.0.609

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 +44 -11
  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,19 @@ 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
35
  setFieldsDataState(fieldsData);
37
36
  }, [fieldsData]);
38
37
  const onClickResetHandler = () => {
39
38
  const newFieldsDataState = FieldsDataState === null || FieldsDataState === void 0 ? void 0 : FieldsDataState.map(itemField => ({
40
39
  ...itemField,
41
- selectedValue: undefined
40
+ selectedValue: undefined,
41
+ ...(itemField.periodPickerSelectedValue ? {
42
+ periodPickerSelectedValue: undefined
43
+ } : '')
42
44
  }));
43
45
  setFieldsDataState(newFieldsDataState);
44
46
  setReset(!Reset);
45
- setPeriodPickerSelectedValue('');
46
47
  onResetClick({
47
48
  eventName: 'onResetClick',
48
49
  fieldsData: newFieldsDataState
@@ -62,7 +63,7 @@ const FilterPanel = props => {
62
63
  };
63
64
  const displayPeriodPickerContent = item => {
64
65
  let content;
65
- switch (PeriodPickerSelectedValue) {
66
+ switch (item.periodPickerSelectedValue) {
66
67
  case 'date':
67
68
  content = /*#__PURE__*/_react.default.createElement(_FilterPanel.DatePickerContainer, {
68
69
  className: "DatePickerContainer"
@@ -164,6 +165,7 @@ const FilterPanel = props => {
164
165
  className: "Dropdown",
165
166
  name: ''.concat(item.name, '_Year'),
166
167
  reset: Reset,
168
+ showPopupIcon: true,
167
169
  allowedInput: "all",
168
170
  dropdownListfontSize: "14px",
169
171
  labelColor: borderColor,
@@ -201,7 +203,30 @@ const FilterPanel = props => {
201
203
  });
202
204
  break;
203
205
  default:
204
- content = '';
206
+ content = /*#__PURE__*/_react.default.createElement(_FilterPanel.PeriodPickerContainer, {
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
+ }));
205
230
  }
206
231
  return content;
207
232
  };
@@ -213,6 +238,7 @@ const FilterPanel = props => {
213
238
  className: "Dropdown",
214
239
  name: item.name,
215
240
  reset: Reset,
241
+ showPopupIcon: true,
216
242
  allowedInput: "all",
217
243
  dropdownListfontSize: "14px",
218
244
  labelColor: borderColor,
@@ -220,7 +246,7 @@ const FilterPanel = props => {
220
246
  onInputChange: () => {},
221
247
  shape: "round",
222
248
  size: "large",
223
- text: item.label,
249
+ text: !item.selectedValue ? item.labelEmptyValue || item.label : item.label,
224
250
  value: item.selectedValue || undefined,
225
251
  required: item.required,
226
252
  disabled: item.disabled,
@@ -252,6 +278,7 @@ const FilterPanel = props => {
252
278
  className: "DropdownMulti",
253
279
  name: item.name,
254
280
  reset: Reset,
281
+ showPopupIcon: true,
255
282
  allowedInput: "all",
256
283
  dropdownListfontSize: "14px",
257
284
  labelColor: borderColor,
@@ -259,7 +286,7 @@ const FilterPanel = props => {
259
286
  onInputChange: () => {},
260
287
  shape: "round",
261
288
  size: "large",
262
- text: item.label,
289
+ text: !item.selectedValue ? item.labelEmptyValue || item.label : item.label,
263
290
  value: item.selectedValue || undefined,
264
291
  required: item.required,
265
292
  disabled: item.disabled,
@@ -293,7 +320,7 @@ const FilterPanel = props => {
293
320
  className: "RangePicker",
294
321
  borderColor: borderColor,
295
322
  borderRadius: "12px",
296
- label: item.label,
323
+ label: !item.selectedValue ? item.labelEmptyValue || item.label : item.label,
297
324
  onChange: eventDatePicker => {
298
325
  const selectedValue = eventDatePicker && typeof eventDatePicker === 'string' ? "".concat(eventDatePicker) : undefined;
299
326
  const newFieldsDataState = FieldsDataState === null || FieldsDataState === void 0 ? void 0 : FieldsDataState.map(itemField => itemField.name === item.name ? {
@@ -323,6 +350,7 @@ const FilterPanel = props => {
323
350
  className: "Dropdown",
324
351
  name: item.name,
325
352
  reset: Reset,
353
+ showPopupIcon: true,
326
354
  allowedInput: "all",
327
355
  dropdownListfontSize: "14px",
328
356
  labelColor: borderColor,
@@ -330,7 +358,7 @@ const FilterPanel = props => {
330
358
  onInputChange: () => {},
331
359
  shape: "round",
332
360
  size: "large",
333
- text: item.label,
361
+ text: !item.periodPickerSelectedValue ? item.labelEmptyValue || item.label : item.label,
334
362
  value: item.selectedValue || undefined,
335
363
  required: item.required,
336
364
  disabled: item.disabled,
@@ -338,8 +366,12 @@ const FilterPanel = props => {
338
366
  placeHolderFontSize: "14px",
339
367
  onChange: eventDropdownPeriodPicker => {
340
368
  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);
369
+ 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;
370
+ const newFieldsDataState = FieldsDataState === null || FieldsDataState === void 0 ? void 0 : FieldsDataState.map(itemField => itemField.name === item.name ? {
371
+ ...itemField,
372
+ periodPickerSelectedValue: newPeriodPickerSelectedValue ? "".concat(newPeriodPickerSelectedValue) : undefined
373
+ } : itemField);
374
+ setFieldsDataState(newFieldsDataState);
343
375
  },
344
376
  options: item.dropdownOptions && item.dropdownOptions.length > 0 ? item.dropdownOptions : [],
345
377
  width: "100%"
@@ -347,6 +379,7 @@ const FilterPanel = props => {
347
379
  break;
348
380
  default:
349
381
  content = '';
382
+ break;
350
383
  }
351
384
  return content;
352
385
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sag_components",
3
- "version": "1.0.608",
3
+ "version": "1.0.609",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {