sag_components 1.0.600 → 1.0.601
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.
|
@@ -7,12 +7,16 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
});
|
|
8
8
|
exports.default = void 0;
|
|
9
9
|
var _react = _interopRequireWildcard(require("react"));
|
|
10
|
-
var
|
|
10
|
+
var _moment = _interopRequireDefault(require("moment"));
|
|
11
11
|
var _DropdownMulti = require("./DropdownMulti");
|
|
12
12
|
var _Dropdown = require("./Dropdown");
|
|
13
13
|
var _SagButton = _interopRequireDefault(require("./SagButton"));
|
|
14
14
|
var _RangePicker = _interopRequireDefault(require("./RangePicker"));
|
|
15
|
+
var _QuarterPicker = _interopRequireDefault(require("./QuarterPicker"));
|
|
16
|
+
var _MonthPicker = _interopRequireDefault(require("./MonthPicker"));
|
|
15
17
|
var _FilterPanel = require("./FilterPanel.style");
|
|
18
|
+
// eslint-disable-next-line import/no-extraneous-dependencies
|
|
19
|
+
|
|
16
20
|
const FilterPanel = props => {
|
|
17
21
|
const {
|
|
18
22
|
fieldsData,
|
|
@@ -25,53 +29,183 @@ const FilterPanel = props => {
|
|
|
25
29
|
height
|
|
26
30
|
} = props;
|
|
27
31
|
const [FieldsDataState, setFieldsDataState] = (0, _react.useState)(fieldsData);
|
|
32
|
+
const [Reset, setReset] = (0, _react.useState)(false);
|
|
33
|
+
const [PeriodPickerSelectedValue, setPeriodPickerSelectedValue] = (0, _react.useState)('');
|
|
28
34
|
const onClickResetHandler = () => {
|
|
29
35
|
const newFieldsDataState = FieldsDataState === null || FieldsDataState === void 0 ? void 0 : FieldsDataState.map(itemField => ({
|
|
30
36
|
...itemField,
|
|
31
|
-
selectedValue:
|
|
32
|
-
selectedLabel: null
|
|
37
|
+
selectedValue: undefined
|
|
33
38
|
}));
|
|
34
39
|
setFieldsDataState(newFieldsDataState);
|
|
40
|
+
setReset(!Reset);
|
|
41
|
+
setPeriodPickerSelectedValue('');
|
|
35
42
|
onResetClick({
|
|
36
43
|
eventName: 'onResetClick',
|
|
37
44
|
fieldsData: newFieldsDataState
|
|
38
45
|
});
|
|
39
46
|
};
|
|
40
|
-
const
|
|
41
|
-
const
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
47
|
+
const getYearsArray = () => {
|
|
48
|
+
const currentYear = (0, _moment.default)().year();
|
|
49
|
+
const previousYear = (0, _moment.default)().subtract(1, 'years').year();
|
|
50
|
+
const yearsArray = [{
|
|
51
|
+
value: previousYear,
|
|
52
|
+
label: previousYear
|
|
53
|
+
}, {
|
|
54
|
+
value: currentYear,
|
|
55
|
+
label: currentYear
|
|
56
|
+
}];
|
|
57
|
+
return yearsArray;
|
|
46
58
|
};
|
|
47
|
-
const
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
59
|
+
const displayPeriodPickerContent = item => {
|
|
60
|
+
let content;
|
|
61
|
+
switch (PeriodPickerSelectedValue) {
|
|
62
|
+
case 'date':
|
|
63
|
+
content = /*#__PURE__*/_react.default.createElement(_FilterPanel.DatePickerContainer, {
|
|
64
|
+
className: "DatePickerContainer"
|
|
65
|
+
}, /*#__PURE__*/_react.default.createElement(_RangePicker.default, {
|
|
66
|
+
className: "RangePicker",
|
|
67
|
+
name: ''.concat(item.name, '_Date'),
|
|
68
|
+
borderColor: borderColor,
|
|
69
|
+
borderRadius: "12px",
|
|
70
|
+
label: "Date Range",
|
|
71
|
+
onChange: eventRangePicker => {
|
|
72
|
+
const selectedValue = eventRangePicker && typeof eventRangePicker === 'string' ? "".concat(eventRangePicker) : undefined;
|
|
73
|
+
const newFieldsDataState = FieldsDataState === null || FieldsDataState === void 0 ? void 0 : FieldsDataState.map(itemField => itemField.name === item.name ? {
|
|
74
|
+
...itemField,
|
|
75
|
+
inputSubType: selectedValue ? 'daterange' : undefined,
|
|
76
|
+
selectedValue: selectedValue ? "".concat(selectedValue) : undefined
|
|
77
|
+
} : itemField);
|
|
78
|
+
setFieldsDataState(newFieldsDataState);
|
|
79
|
+
onItemValueChanged({
|
|
80
|
+
fieldsData: newFieldsDataState,
|
|
81
|
+
changedItem: {
|
|
82
|
+
name: item.name,
|
|
83
|
+
inputType: item.inputType,
|
|
84
|
+
inputSubType: 'daterange',
|
|
85
|
+
selectedValue: selectedValue ? "".concat(selectedValue) : undefined
|
|
86
|
+
}
|
|
87
|
+
});
|
|
88
|
+
},
|
|
89
|
+
required: item.required,
|
|
90
|
+
placeholder: "Select Date Range ...",
|
|
91
|
+
width: "100%",
|
|
92
|
+
height: "55px"
|
|
93
|
+
}));
|
|
94
|
+
break;
|
|
95
|
+
case 'month':
|
|
96
|
+
content = /*#__PURE__*/_react.default.createElement(_MonthPicker.default, {
|
|
97
|
+
name: ''.concat(item.name, '_Month'),
|
|
98
|
+
borderColor: "#a9a9a9",
|
|
99
|
+
borderColorFoucs: borderColor,
|
|
100
|
+
borderRadius: "12px",
|
|
101
|
+
label: "Month",
|
|
102
|
+
required: item.required,
|
|
103
|
+
onChange: eventMonthPicker => {
|
|
104
|
+
const selectedValue = eventMonthPicker && typeof eventMonthPicker === 'string' ? "".concat(eventMonthPicker) : undefined;
|
|
105
|
+
const newFieldsDataState = FieldsDataState === null || FieldsDataState === void 0 ? void 0 : FieldsDataState.map(itemField => itemField.name === item.name ? {
|
|
106
|
+
...itemField,
|
|
107
|
+
inputSubType: selectedValue ? 'month' : undefined,
|
|
108
|
+
selectedValue: selectedValue ? "".concat(selectedValue) : undefined
|
|
109
|
+
} : itemField);
|
|
110
|
+
setFieldsDataState(newFieldsDataState);
|
|
111
|
+
onItemValueChanged({
|
|
112
|
+
fieldsData: newFieldsDataState,
|
|
113
|
+
changedItem: {
|
|
114
|
+
name: item.name,
|
|
115
|
+
inputType: item.inputType,
|
|
116
|
+
inputSubType: 'month',
|
|
117
|
+
selectedValue: selectedValue ? "".concat(selectedValue) : undefined
|
|
118
|
+
}
|
|
119
|
+
});
|
|
120
|
+
},
|
|
121
|
+
placeholder: "Select Month ...",
|
|
122
|
+
width: "100%"
|
|
123
|
+
});
|
|
124
|
+
break;
|
|
125
|
+
case 'quarter':
|
|
126
|
+
content = /*#__PURE__*/_react.default.createElement(_QuarterPicker.default, {
|
|
127
|
+
className: "QuarterPicker",
|
|
128
|
+
name: ''.concat(item.name, '_Quarter'),
|
|
129
|
+
borderColor: "#a9a9a9",
|
|
130
|
+
borderColorFoucs: borderColor,
|
|
131
|
+
borderRadius: "12px",
|
|
132
|
+
label: "Quarter",
|
|
133
|
+
required: item.required,
|
|
134
|
+
onChange: eventQuarterPicker => {
|
|
135
|
+
const selectedValue = eventQuarterPicker && typeof eventQuarterPicker === 'string' ? "".concat(eventQuarterPicker) : undefined;
|
|
136
|
+
const newFieldsDataState = FieldsDataState === null || FieldsDataState === void 0 ? void 0 : FieldsDataState.map(itemField => itemField.name === item.name ? {
|
|
137
|
+
...itemField,
|
|
138
|
+
inputSubType: selectedValue ? 'quarter' : undefined,
|
|
139
|
+
selectedValue: selectedValue ? "".concat(selectedValue) : undefined
|
|
140
|
+
} : itemField);
|
|
141
|
+
setFieldsDataState(newFieldsDataState);
|
|
142
|
+
onItemValueChanged({
|
|
143
|
+
fieldsData: newFieldsDataState,
|
|
144
|
+
changedItem: {
|
|
145
|
+
name: item.name,
|
|
146
|
+
inputType: item.inputType,
|
|
147
|
+
inputSubType: 'quarter',
|
|
148
|
+
selectedValue: selectedValue ? "".concat(selectedValue) : undefined
|
|
149
|
+
}
|
|
150
|
+
});
|
|
151
|
+
},
|
|
152
|
+
placeholder: "Select Quarter ...",
|
|
153
|
+
width: "100%"
|
|
154
|
+
});
|
|
155
|
+
break;
|
|
156
|
+
case 'year':
|
|
157
|
+
content = /*#__PURE__*/_react.default.createElement(_Dropdown.Dropdown, {
|
|
158
|
+
className: "Dropdown",
|
|
159
|
+
name: ''.concat(item.name, '_Year'),
|
|
160
|
+
reset: Reset,
|
|
161
|
+
allowedInput: "all",
|
|
162
|
+
dropdownListfontSize: "14px",
|
|
163
|
+
labelColor: borderColor,
|
|
164
|
+
limitTagsOnMultiSelect: 2,
|
|
165
|
+
onInputChange: () => {},
|
|
166
|
+
shape: "round",
|
|
167
|
+
size: "large",
|
|
168
|
+
text: "Year",
|
|
169
|
+
value: item.selectedValue || undefined,
|
|
170
|
+
required: item.required,
|
|
171
|
+
placeHolder: "Select Year ...",
|
|
172
|
+
placeHolderFontSize: "14px",
|
|
173
|
+
onChange: eventDropdown => {
|
|
174
|
+
var _eventDropdown$newVal, _eventDropdown$newVal2;
|
|
175
|
+
const selectedValue = eventDropdown !== null && eventDropdown !== void 0 && (_eventDropdown$newVal = eventDropdown.newValue) !== null && _eventDropdown$newVal !== void 0 && _eventDropdown$newVal.value ? "".concat(eventDropdown === null || eventDropdown === void 0 ? void 0 : (_eventDropdown$newVal2 = eventDropdown.newValue) === null || _eventDropdown$newVal2 === void 0 ? void 0 : _eventDropdown$newVal2.value) : undefined;
|
|
176
|
+
const newFieldsDataState = FieldsDataState === null || FieldsDataState === void 0 ? void 0 : FieldsDataState.map(itemField => itemField.name === item.name ? {
|
|
177
|
+
...itemField,
|
|
178
|
+
inputSubType: selectedValue ? 'year' : undefined,
|
|
179
|
+
selectedValue: selectedValue ? "".concat(selectedValue) : undefined
|
|
180
|
+
} : itemField);
|
|
181
|
+
setFieldsDataState(newFieldsDataState);
|
|
182
|
+
onItemValueChanged({
|
|
183
|
+
fieldsData: newFieldsDataState,
|
|
184
|
+
changedItem: {
|
|
185
|
+
name: item.name,
|
|
186
|
+
inputType: item.inputType,
|
|
187
|
+
inputSubType: 'year',
|
|
188
|
+
selectedValue: selectedValue ? "".concat(selectedValue) : undefined
|
|
189
|
+
}
|
|
190
|
+
});
|
|
191
|
+
},
|
|
192
|
+
options: getYearsArray(),
|
|
193
|
+
width: "100%"
|
|
194
|
+
});
|
|
195
|
+
break;
|
|
196
|
+
default:
|
|
197
|
+
content = '';
|
|
198
|
+
}
|
|
199
|
+
return content;
|
|
66
200
|
};
|
|
67
|
-
|
|
68
201
|
const displayField = item => {
|
|
69
202
|
let content;
|
|
70
203
|
switch (item.inputType) {
|
|
71
204
|
case 'dropdown':
|
|
72
205
|
content = /*#__PURE__*/_react.default.createElement(_Dropdown.Dropdown, {
|
|
73
|
-
|
|
206
|
+
className: "Dropdown",
|
|
74
207
|
name: item.name,
|
|
208
|
+
reset: Reset,
|
|
75
209
|
allowedInput: "all",
|
|
76
210
|
dropdownListfontSize: "14px",
|
|
77
211
|
labelColor: borderColor,
|
|
@@ -85,12 +219,12 @@ const FilterPanel = props => {
|
|
|
85
219
|
disabled: item.disabled,
|
|
86
220
|
placeHolder: item.placeHolder,
|
|
87
221
|
placeHolderFontSize: "14px",
|
|
88
|
-
onChange:
|
|
89
|
-
var
|
|
90
|
-
const selectedValue = "".concat(
|
|
222
|
+
onChange: eventDropdown => {
|
|
223
|
+
var _eventDropdown$newVal3, _eventDropdown$newVal4;
|
|
224
|
+
const selectedValue = eventDropdown !== null && eventDropdown !== void 0 && (_eventDropdown$newVal3 = eventDropdown.newValue) !== null && _eventDropdown$newVal3 !== void 0 && _eventDropdown$newVal3.value ? "".concat(eventDropdown === null || eventDropdown === void 0 ? void 0 : (_eventDropdown$newVal4 = eventDropdown.newValue) === null || _eventDropdown$newVal4 === void 0 ? void 0 : _eventDropdown$newVal4.value) : undefined;
|
|
91
225
|
const newFieldsDataState = FieldsDataState === null || FieldsDataState === void 0 ? void 0 : FieldsDataState.map(itemField => itemField.name === item.name ? {
|
|
92
226
|
...itemField,
|
|
93
|
-
selectedValue: "".concat(selectedValue)
|
|
227
|
+
selectedValue: selectedValue ? "".concat(selectedValue) : undefined
|
|
94
228
|
} : itemField);
|
|
95
229
|
setFieldsDataState(newFieldsDataState);
|
|
96
230
|
onItemValueChanged({
|
|
@@ -98,7 +232,7 @@ const FilterPanel = props => {
|
|
|
98
232
|
changedItem: {
|
|
99
233
|
name: item.name,
|
|
100
234
|
inputType: item.inputType,
|
|
101
|
-
selectedValue: "".concat(selectedValue)
|
|
235
|
+
selectedValue: selectedValue ? "".concat(selectedValue) : undefined
|
|
102
236
|
}
|
|
103
237
|
});
|
|
104
238
|
},
|
|
@@ -108,8 +242,9 @@ const FilterPanel = props => {
|
|
|
108
242
|
break;
|
|
109
243
|
case 'dropdownMulti':
|
|
110
244
|
content = /*#__PURE__*/_react.default.createElement(_DropdownMulti.DropdownMulti, {
|
|
111
|
-
|
|
245
|
+
className: "DropdownMulti",
|
|
112
246
|
name: item.name,
|
|
247
|
+
reset: Reset,
|
|
113
248
|
allowedInput: "all",
|
|
114
249
|
dropdownListfontSize: "14px",
|
|
115
250
|
labelColor: borderColor,
|
|
@@ -123,9 +258,9 @@ const FilterPanel = props => {
|
|
|
123
258
|
disabled: item.disabled,
|
|
124
259
|
placeHolder: item.placeHolder,
|
|
125
260
|
placeHolderFontSize: "14px",
|
|
126
|
-
onChange:
|
|
127
|
-
var
|
|
128
|
-
const selectedValue = "".concat(
|
|
261
|
+
onChange: eventDropdownMulti => {
|
|
262
|
+
var _eventDropdownMulti$n;
|
|
263
|
+
const selectedValue = "".concat(eventDropdownMulti === null || eventDropdownMulti === void 0 ? void 0 : (_eventDropdownMulti$n = eventDropdownMulti.newValue) === null || _eventDropdownMulti$n === void 0 ? void 0 : _eventDropdownMulti$n.map(selectedItem => "'".concat(selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value, "'")));
|
|
129
264
|
const newFieldsDataState = FieldsDataState === null || FieldsDataState === void 0 ? void 0 : FieldsDataState.map(itemField => itemField.name === item.name ? {
|
|
130
265
|
...itemField,
|
|
131
266
|
selectedValue: "".concat(selectedValue)
|
|
@@ -146,17 +281,17 @@ const FilterPanel = props => {
|
|
|
146
281
|
break;
|
|
147
282
|
case 'datepicker':
|
|
148
283
|
content = /*#__PURE__*/_react.default.createElement(_FilterPanel.DatePickerContainer, {
|
|
149
|
-
|
|
284
|
+
className: "DatePickerContainer"
|
|
150
285
|
}, /*#__PURE__*/_react.default.createElement(_RangePicker.default, {
|
|
286
|
+
className: "RangePicker",
|
|
151
287
|
borderColor: borderColor,
|
|
152
288
|
borderRadius: "12px",
|
|
153
289
|
label: item.label,
|
|
154
|
-
onChange:
|
|
155
|
-
|
|
156
|
-
const selectedValue = "".concat(onChangeEvent);
|
|
290
|
+
onChange: eventDatePicker => {
|
|
291
|
+
const selectedValue = eventDatePicker && typeof eventDatePicker === 'string' ? "".concat(eventDatePicker) : undefined;
|
|
157
292
|
const newFieldsDataState = FieldsDataState === null || FieldsDataState === void 0 ? void 0 : FieldsDataState.map(itemField => itemField.name === item.name ? {
|
|
158
293
|
...itemField,
|
|
159
|
-
selectedValue: "".concat(selectedValue)
|
|
294
|
+
selectedValue: selectedValue ? "".concat(selectedValue) : undefined
|
|
160
295
|
} : itemField);
|
|
161
296
|
setFieldsDataState(newFieldsDataState);
|
|
162
297
|
onItemValueChanged({
|
|
@@ -164,7 +299,7 @@ const FilterPanel = props => {
|
|
|
164
299
|
changedItem: {
|
|
165
300
|
name: item.name,
|
|
166
301
|
inputType: item.inputType,
|
|
167
|
-
selectedValue: "".concat(selectedValue)
|
|
302
|
+
selectedValue: selectedValue ? "".concat(selectedValue) : undefined
|
|
168
303
|
}
|
|
169
304
|
});
|
|
170
305
|
},
|
|
@@ -174,6 +309,35 @@ const FilterPanel = props => {
|
|
|
174
309
|
height: "55px"
|
|
175
310
|
}));
|
|
176
311
|
break;
|
|
312
|
+
case 'periodpicker':
|
|
313
|
+
content = /*#__PURE__*/_react.default.createElement(_FilterPanel.PeriodPickerContainer, {
|
|
314
|
+
className: "PeriodPickerContainer"
|
|
315
|
+
}, /*#__PURE__*/_react.default.createElement(_Dropdown.Dropdown, {
|
|
316
|
+
className: "Dropdown",
|
|
317
|
+
name: item.name,
|
|
318
|
+
reset: Reset,
|
|
319
|
+
allowedInput: "all",
|
|
320
|
+
dropdownListfontSize: "14px",
|
|
321
|
+
labelColor: borderColor,
|
|
322
|
+
limitTagsOnMultiSelect: 2,
|
|
323
|
+
onInputChange: () => {},
|
|
324
|
+
shape: "round",
|
|
325
|
+
size: "large",
|
|
326
|
+
text: item.label,
|
|
327
|
+
value: item.selectedValue || undefined,
|
|
328
|
+
required: item.required,
|
|
329
|
+
disabled: item.disabled,
|
|
330
|
+
placeHolder: item.placeHolder,
|
|
331
|
+
placeHolderFontSize: "14px",
|
|
332
|
+
onChange: eventDropdownPeriodPicker => {
|
|
333
|
+
var _eventDropdownPeriodP, _eventDropdownPeriodP2;
|
|
334
|
+
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;
|
|
335
|
+
setPeriodPickerSelectedValue(selectedValue);
|
|
336
|
+
},
|
|
337
|
+
options: item.dropdownOptions && item.dropdownOptions.length > 0 ? item.dropdownOptions : [],
|
|
338
|
+
width: "100%"
|
|
339
|
+
}), displayPeriodPickerContent(item));
|
|
340
|
+
break;
|
|
177
341
|
default:
|
|
178
342
|
content = '';
|
|
179
343
|
}
|
|
@@ -215,7 +379,10 @@ const FilterPanel = props => {
|
|
|
215
379
|
fieldsData: FieldsDataState,
|
|
216
380
|
selectedValues: FieldsDataState === null || FieldsDataState === void 0 ? void 0 : FieldsDataState.map(itemField => ({
|
|
217
381
|
name: itemField.name,
|
|
218
|
-
selectedValue: itemField.selectedValue
|
|
382
|
+
selectedValue: itemField.selectedValue,
|
|
383
|
+
...(itemField.inputSubType ? {
|
|
384
|
+
inputSubType: itemField.inputSubType
|
|
385
|
+
} : '')
|
|
219
386
|
}))
|
|
220
387
|
})
|
|
221
388
|
}), /*#__PURE__*/_react.default.createElement(_SagButton.default, {
|
|
@@ -4,13 +4,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.FieldsContainer = exports.FieldContainer = exports.DatePickerContainer = exports.ControlsContainer = exports.ButtonsContainer = exports.AllFieldsContainer = void 0;
|
|
7
|
+
exports.PeriodPickerContainer = exports.FieldsContainer = exports.FieldContainer = exports.DatePickerContainer = exports.ControlsContainer = exports.ButtonsContainer = exports.AllFieldsContainer = void 0;
|
|
8
8
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
|
|
9
9
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
10
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
10
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
|
|
11
11
|
const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n font-family: \"Poppins\", sans-serif;\n font-weight: 500;\n font-size: 14px;\n background-color: #fefefe;\n padding: 20px;\n border-radius: 10px;\n box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);\n width: ", ";\n height: ", ";\n"])), props => props.width, props => props.height);
|
|
12
12
|
const ButtonsContainer = exports.ButtonsContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex; \n flex-direction: row-reverse; \n padding: 20px 10px 0 0;\n gap: 20px;\n"])));
|
|
13
13
|
const AllFieldsContainer = exports.AllFieldsContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n flex-wrap: wrap;\n width: 100%;\n"])));
|
|
14
14
|
const FieldsContainer = exports.FieldsContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n white-space: wrap;\n padding: 10px;\n gap: 20px;\n width: 100%;\n"])));
|
|
15
15
|
const FieldContainer = exports.FieldContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)([" \n margin: 0;\n \n"])));
|
|
16
|
-
const DatePickerContainer = exports.DatePickerContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n margin: 0;\n"])));
|
|
16
|
+
const DatePickerContainer = exports.DatePickerContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n margin: 0;\n"])));
|
|
17
|
+
const PeriodPickerContainer = exports.PeriodPickerContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)([" \n display: flex;\n flex-direction: column;\n gap: 20px;\n"])));
|
|
@@ -43,6 +43,7 @@ const MonthPicker = _ref => {
|
|
|
43
43
|
setIsOpen(!isOpen);
|
|
44
44
|
setIsFocused(false);
|
|
45
45
|
setStartDateValue(startDate);
|
|
46
|
+
onChange("".concat((0, _moment.default)(startDate).format('MMMM | YYYY')));
|
|
46
47
|
setValue("".concat((0, _moment.default)(startDate).format('MMMM | YYYY')));
|
|
47
48
|
}
|
|
48
49
|
};
|
|
@@ -43,7 +43,8 @@ const QuarterPicker = _ref => {
|
|
|
43
43
|
setIsOpen(!isOpen);
|
|
44
44
|
setIsFocused(false);
|
|
45
45
|
setStartDateValue(startDate);
|
|
46
|
-
setValue("".concat(
|
|
46
|
+
setValue("".concat(startDate));
|
|
47
|
+
onChange("".concat(startDate));
|
|
47
48
|
}
|
|
48
49
|
};
|
|
49
50
|
const onChangeEvent = e => {
|