sag_components 1.0.600 → 1.0.602
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/stories/components/DownloadProgress.js +95 -0
- package/dist/stories/components/DownloadProgress.style.js +14 -0
- package/dist/stories/components/EventList.js +3 -4
- package/dist/stories/components/FilterPanel.js +216 -46
- package/dist/stories/components/FilterPanel.style.js +4 -3
- package/dist/stories/components/MonthPicker.js +1 -0
- package/dist/stories/components/ProgressBar.js +52 -0
- package/dist/stories/components/ProgressBar.style.js +13 -0
- package/dist/stories/components/QuarterPicker.js +2 -1
- package/dist/stories/components/icons/ErrorIcon.js +28 -0
- package/dist/stories/components/icons/SucceededIcon.js +28 -0
- package/package.json +1 -1
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.default = void 0;
|
|
9
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
10
|
+
var _ErrorIcon = require("./icons/ErrorIcon");
|
|
11
|
+
var _SucceededIcon = require("./icons/SucceededIcon");
|
|
12
|
+
var _ProgressBar = _interopRequireDefault(require("./ProgressBar"));
|
|
13
|
+
var _DownloadProgress = require("./DownloadProgress.style");
|
|
14
|
+
const DownloadProgress = props => {
|
|
15
|
+
const {
|
|
16
|
+
title,
|
|
17
|
+
succeededMessage,
|
|
18
|
+
failedMessage,
|
|
19
|
+
downloadStatus,
|
|
20
|
+
showShadow,
|
|
21
|
+
progressPercent,
|
|
22
|
+
refreshInterval,
|
|
23
|
+
progressBarColor,
|
|
24
|
+
onTryAgainClick
|
|
25
|
+
} = props;
|
|
26
|
+
const [DownloadStatus, setDownloadStatus] = (0, _react.useState)(downloadStatus);
|
|
27
|
+
(0, _react.useEffect)(() => {
|
|
28
|
+
setDownloadStatus(downloadStatus);
|
|
29
|
+
}, [downloadStatus]);
|
|
30
|
+
const displayProgressContent = () => {
|
|
31
|
+
let content = '';
|
|
32
|
+
switch (DownloadStatus) {
|
|
33
|
+
case 'inProgress':
|
|
34
|
+
content = /*#__PURE__*/_react.default.createElement(_DownloadProgress.DownloadProgressContentContainer, {
|
|
35
|
+
className: "DownloadProgressContentContainer"
|
|
36
|
+
}, /*#__PURE__*/_react.default.createElement(_ProgressBar.default, {
|
|
37
|
+
className: "ProgressBar",
|
|
38
|
+
color: progressBarColor,
|
|
39
|
+
progressPercent: progressPercent,
|
|
40
|
+
refreshInterval: refreshInterval,
|
|
41
|
+
width: "100%"
|
|
42
|
+
}));
|
|
43
|
+
break;
|
|
44
|
+
case 'succeeded':
|
|
45
|
+
content = /*#__PURE__*/_react.default.createElement(_DownloadProgress.DownloadProgressContentContainer, {
|
|
46
|
+
className: "DownloadProgressContentContainer"
|
|
47
|
+
}, /*#__PURE__*/_react.default.createElement(_DownloadProgress.DownloadProgressStatusMessage, {
|
|
48
|
+
className: "DownloadProgressStatusMessage_succeeded"
|
|
49
|
+
}, succeededMessage), /*#__PURE__*/_react.default.createElement(_SucceededIcon.SucceededIcon, {
|
|
50
|
+
color: "#92CF17",
|
|
51
|
+
width: "12px",
|
|
52
|
+
height: "12px"
|
|
53
|
+
}));
|
|
54
|
+
break;
|
|
55
|
+
case 'failed':
|
|
56
|
+
content = /*#__PURE__*/_react.default.createElement(_DownloadProgress.DownloadProgressContentContainer, {
|
|
57
|
+
className: "DownloadProgressContentContainer"
|
|
58
|
+
}, /*#__PURE__*/_react.default.createElement(_DownloadProgress.DownloadProgressStatusMessage, {
|
|
59
|
+
className: "DownloadProgressStatusMessage_failed"
|
|
60
|
+
}, failedMessage), /*#__PURE__*/_react.default.createElement(_DownloadProgress.DownloadProgressStatusMessage, {
|
|
61
|
+
className: "DownloadProgressStatusMessage_TryAgain",
|
|
62
|
+
onClick: () => onTryAgainClick({
|
|
63
|
+
eventName: 'onTryAgainClick'
|
|
64
|
+
})
|
|
65
|
+
}, "Try again"), /*#__PURE__*/_react.default.createElement(_ErrorIcon.ErrorIcon, {
|
|
66
|
+
color: "#FF3949",
|
|
67
|
+
width: "12px",
|
|
68
|
+
height: "12px"
|
|
69
|
+
}));
|
|
70
|
+
break;
|
|
71
|
+
default:
|
|
72
|
+
content = '';
|
|
73
|
+
break;
|
|
74
|
+
}
|
|
75
|
+
return content;
|
|
76
|
+
};
|
|
77
|
+
return /*#__PURE__*/_react.default.createElement(_DownloadProgress.DownloadProgressMainContainer, {
|
|
78
|
+
className: "DownloadProgressMainContainer",
|
|
79
|
+
showShadow: showShadow
|
|
80
|
+
}, /*#__PURE__*/_react.default.createElement(_DownloadProgress.DownloadProgressTitle, {
|
|
81
|
+
className: "DownloadProgressTitle"
|
|
82
|
+
}, title), displayProgressContent());
|
|
83
|
+
};
|
|
84
|
+
var _default = exports.default = DownloadProgress;
|
|
85
|
+
DownloadProgress.defaultProps = {
|
|
86
|
+
title: 'CPG presentation shopper marketing, supplier name ',
|
|
87
|
+
succeededMessage: 'File Downloaded',
|
|
88
|
+
failedMessage: 'Something went wrong',
|
|
89
|
+
downloadStatus: 'inProgress',
|
|
90
|
+
showShadow: true,
|
|
91
|
+
progressPercent: 0,
|
|
92
|
+
refreshInterval: 100,
|
|
93
|
+
progressBarColor: '#92CF17',
|
|
94
|
+
onTryAgainClick: () => {}
|
|
95
|
+
};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.DownloadProgressTitle = exports.DownloadProgressStatusMessage = exports.DownloadProgressMainContainer = exports.DownloadProgressContentContainer = void 0;
|
|
8
|
+
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
|
|
9
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
10
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
11
|
+
const DownloadProgressMainContainer = exports.DownloadProgressMainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n font-family: \"Poppins\", sans-serif;\n font-style: normal;\n font-size: 12px;\n font-weight: 400;\n color: #212121;\n line-height: 14px;\n position: relative;\n margin: 0;\n padding: 10px;\n background: #ffffff;\n border-radius: 12px;\n box-shadow: ", ";\n"])), props => props.showShadow ? '0px 0px 20px 0px rgba(0, 0, 0, 0.2)' : '');
|
|
12
|
+
const DownloadProgressContentContainer = exports.DownloadProgressContentContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)([" \n display: flex;\n align-items: center;\n margin: 0 10px;\n gap: 10px;\n"])));
|
|
13
|
+
const DownloadProgressTitle = exports.DownloadProgressTitle = _styledComponents.default.h3(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)([" \n font-weight: 400;\n margin: 10px; \n"])));
|
|
14
|
+
const DownloadProgressStatusMessage = exports.DownloadProgressStatusMessage = _styledComponents.default.h3(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)([" \n margin: 3px 0;\n &.DownloadProgressStatusMessage_succeeded{\n font-weight: 500; \n }\n &.DownloadProgressStatusMessage_failed{\n color: #7F7D7D;\n font-weight: 400; \n }\n &.DownloadProgressStatusMessage_TryAgain{\n color: #1B30AA;\n font-weight: 400;\n text-decoration: underline; \n &:hover {\n background-Color: #f1f1f1;\n cursor: pointer;\n } \n }\n"])));
|
|
@@ -16,7 +16,7 @@ const EventList = props => {
|
|
|
16
16
|
width = '100%',
|
|
17
17
|
height = '100%',
|
|
18
18
|
itemHeight = '160px',
|
|
19
|
-
|
|
19
|
+
onSelectClick
|
|
20
20
|
} = props;
|
|
21
21
|
const displayEventsItems = () => {
|
|
22
22
|
if (eventsData && eventsData.length > 0) {
|
|
@@ -31,7 +31,7 @@ const EventList = props => {
|
|
|
31
31
|
period: item.period,
|
|
32
32
|
selectTextColor: selectTextColor,
|
|
33
33
|
onClick: event => {
|
|
34
|
-
|
|
34
|
+
onSelectClick({
|
|
35
35
|
eventName: event === null || event === void 0 ? void 0 : event.eventName
|
|
36
36
|
});
|
|
37
37
|
}
|
|
@@ -56,7 +56,6 @@ EventList.defaultProps = {
|
|
|
56
56
|
selectTextColor: '#229E38',
|
|
57
57
|
width: '100%',
|
|
58
58
|
height: '100%',
|
|
59
|
-
itemWidth: '700px',
|
|
60
59
|
itemHeight: '160px',
|
|
61
|
-
|
|
60
|
+
onSelectClick: () => {}
|
|
62
61
|
};
|
|
@@ -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,186 @@ 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
|
+
height: "55px"
|
|
124
|
+
});
|
|
125
|
+
break;
|
|
126
|
+
case 'quarter':
|
|
127
|
+
content = /*#__PURE__*/_react.default.createElement(_QuarterPicker.default, {
|
|
128
|
+
className: "QuarterPicker",
|
|
129
|
+
name: ''.concat(item.name, '_Quarter'),
|
|
130
|
+
borderColor: "#a9a9a9",
|
|
131
|
+
borderColorFoucs: borderColor,
|
|
132
|
+
borderRadius: "12px",
|
|
133
|
+
label: "Quarter",
|
|
134
|
+
required: item.required,
|
|
135
|
+
onChange: eventQuarterPicker => {
|
|
136
|
+
const selectedValue = eventQuarterPicker && typeof eventQuarterPicker === 'string' ? "".concat(eventQuarterPicker) : undefined;
|
|
137
|
+
const newFieldsDataState = FieldsDataState === null || FieldsDataState === void 0 ? void 0 : FieldsDataState.map(itemField => itemField.name === item.name ? {
|
|
138
|
+
...itemField,
|
|
139
|
+
inputSubType: selectedValue ? 'quarter' : undefined,
|
|
140
|
+
selectedValue: selectedValue ? "".concat(selectedValue) : undefined
|
|
141
|
+
} : itemField);
|
|
142
|
+
setFieldsDataState(newFieldsDataState);
|
|
143
|
+
onItemValueChanged({
|
|
144
|
+
fieldsData: newFieldsDataState,
|
|
145
|
+
changedItem: {
|
|
146
|
+
name: item.name,
|
|
147
|
+
inputType: item.inputType,
|
|
148
|
+
inputSubType: 'quarter',
|
|
149
|
+
selectedValue: selectedValue ? "".concat(selectedValue) : undefined
|
|
150
|
+
}
|
|
151
|
+
});
|
|
152
|
+
},
|
|
153
|
+
placeholder: "Select Quarter ...",
|
|
154
|
+
width: "100%",
|
|
155
|
+
height: "55px"
|
|
156
|
+
});
|
|
157
|
+
break;
|
|
158
|
+
case 'year':
|
|
159
|
+
content = /*#__PURE__*/_react.default.createElement(_Dropdown.Dropdown, {
|
|
160
|
+
className: "Dropdown",
|
|
161
|
+
name: ''.concat(item.name, '_Year'),
|
|
162
|
+
reset: Reset,
|
|
163
|
+
allowedInput: "all",
|
|
164
|
+
dropdownListfontSize: "14px",
|
|
165
|
+
labelColor: borderColor,
|
|
166
|
+
limitTagsOnMultiSelect: 2,
|
|
167
|
+
onInputChange: () => {},
|
|
168
|
+
shape: "round",
|
|
169
|
+
size: "large",
|
|
170
|
+
text: "Year",
|
|
171
|
+
value: item.selectedValue || undefined,
|
|
172
|
+
required: item.required,
|
|
173
|
+
placeHolder: "Select Year ...",
|
|
174
|
+
placeHolderFontSize: "14px",
|
|
175
|
+
onChange: eventDropdown => {
|
|
176
|
+
var _eventDropdown$newVal, _eventDropdown$newVal2;
|
|
177
|
+
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;
|
|
178
|
+
const newFieldsDataState = FieldsDataState === null || FieldsDataState === void 0 ? void 0 : FieldsDataState.map(itemField => itemField.name === item.name ? {
|
|
179
|
+
...itemField,
|
|
180
|
+
inputSubType: selectedValue ? 'year' : undefined,
|
|
181
|
+
selectedValue: selectedValue ? "".concat(selectedValue) : undefined
|
|
182
|
+
} : itemField);
|
|
183
|
+
setFieldsDataState(newFieldsDataState);
|
|
184
|
+
onItemValueChanged({
|
|
185
|
+
fieldsData: newFieldsDataState,
|
|
186
|
+
changedItem: {
|
|
187
|
+
name: item.name,
|
|
188
|
+
inputType: item.inputType,
|
|
189
|
+
inputSubType: 'year',
|
|
190
|
+
selectedValue: selectedValue ? "".concat(selectedValue) : undefined
|
|
191
|
+
}
|
|
192
|
+
});
|
|
193
|
+
},
|
|
194
|
+
options: getYearsArray(),
|
|
195
|
+
width: "100%",
|
|
196
|
+
height: "55px"
|
|
197
|
+
});
|
|
198
|
+
break;
|
|
199
|
+
default:
|
|
200
|
+
content = '';
|
|
201
|
+
}
|
|
202
|
+
return content;
|
|
66
203
|
};
|
|
67
|
-
|
|
68
204
|
const displayField = item => {
|
|
69
205
|
let content;
|
|
70
206
|
switch (item.inputType) {
|
|
71
207
|
case 'dropdown':
|
|
72
208
|
content = /*#__PURE__*/_react.default.createElement(_Dropdown.Dropdown, {
|
|
73
|
-
|
|
209
|
+
className: "Dropdown",
|
|
74
210
|
name: item.name,
|
|
211
|
+
reset: Reset,
|
|
75
212
|
allowedInput: "all",
|
|
76
213
|
dropdownListfontSize: "14px",
|
|
77
214
|
labelColor: borderColor,
|
|
@@ -85,12 +222,12 @@ const FilterPanel = props => {
|
|
|
85
222
|
disabled: item.disabled,
|
|
86
223
|
placeHolder: item.placeHolder,
|
|
87
224
|
placeHolderFontSize: "14px",
|
|
88
|
-
onChange:
|
|
89
|
-
var
|
|
90
|
-
const selectedValue = "".concat(
|
|
225
|
+
onChange: eventDropdown => {
|
|
226
|
+
var _eventDropdown$newVal3, _eventDropdown$newVal4;
|
|
227
|
+
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
228
|
const newFieldsDataState = FieldsDataState === null || FieldsDataState === void 0 ? void 0 : FieldsDataState.map(itemField => itemField.name === item.name ? {
|
|
92
229
|
...itemField,
|
|
93
|
-
selectedValue: "".concat(selectedValue)
|
|
230
|
+
selectedValue: selectedValue ? "".concat(selectedValue) : undefined
|
|
94
231
|
} : itemField);
|
|
95
232
|
setFieldsDataState(newFieldsDataState);
|
|
96
233
|
onItemValueChanged({
|
|
@@ -98,7 +235,7 @@ const FilterPanel = props => {
|
|
|
98
235
|
changedItem: {
|
|
99
236
|
name: item.name,
|
|
100
237
|
inputType: item.inputType,
|
|
101
|
-
selectedValue: "".concat(selectedValue)
|
|
238
|
+
selectedValue: selectedValue ? "".concat(selectedValue) : undefined
|
|
102
239
|
}
|
|
103
240
|
});
|
|
104
241
|
},
|
|
@@ -108,8 +245,9 @@ const FilterPanel = props => {
|
|
|
108
245
|
break;
|
|
109
246
|
case 'dropdownMulti':
|
|
110
247
|
content = /*#__PURE__*/_react.default.createElement(_DropdownMulti.DropdownMulti, {
|
|
111
|
-
|
|
248
|
+
className: "DropdownMulti",
|
|
112
249
|
name: item.name,
|
|
250
|
+
reset: Reset,
|
|
113
251
|
allowedInput: "all",
|
|
114
252
|
dropdownListfontSize: "14px",
|
|
115
253
|
labelColor: borderColor,
|
|
@@ -123,9 +261,9 @@ const FilterPanel = props => {
|
|
|
123
261
|
disabled: item.disabled,
|
|
124
262
|
placeHolder: item.placeHolder,
|
|
125
263
|
placeHolderFontSize: "14px",
|
|
126
|
-
onChange:
|
|
127
|
-
var
|
|
128
|
-
const selectedValue = "".concat(
|
|
264
|
+
onChange: eventDropdownMulti => {
|
|
265
|
+
var _eventDropdownMulti$n;
|
|
266
|
+
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
267
|
const newFieldsDataState = FieldsDataState === null || FieldsDataState === void 0 ? void 0 : FieldsDataState.map(itemField => itemField.name === item.name ? {
|
|
130
268
|
...itemField,
|
|
131
269
|
selectedValue: "".concat(selectedValue)
|
|
@@ -146,17 +284,17 @@ const FilterPanel = props => {
|
|
|
146
284
|
break;
|
|
147
285
|
case 'datepicker':
|
|
148
286
|
content = /*#__PURE__*/_react.default.createElement(_FilterPanel.DatePickerContainer, {
|
|
149
|
-
|
|
287
|
+
className: "DatePickerContainer"
|
|
150
288
|
}, /*#__PURE__*/_react.default.createElement(_RangePicker.default, {
|
|
289
|
+
className: "RangePicker",
|
|
151
290
|
borderColor: borderColor,
|
|
152
291
|
borderRadius: "12px",
|
|
153
292
|
label: item.label,
|
|
154
|
-
onChange:
|
|
155
|
-
|
|
156
|
-
const selectedValue = "".concat(onChangeEvent);
|
|
293
|
+
onChange: eventDatePicker => {
|
|
294
|
+
const selectedValue = eventDatePicker && typeof eventDatePicker === 'string' ? "".concat(eventDatePicker) : undefined;
|
|
157
295
|
const newFieldsDataState = FieldsDataState === null || FieldsDataState === void 0 ? void 0 : FieldsDataState.map(itemField => itemField.name === item.name ? {
|
|
158
296
|
...itemField,
|
|
159
|
-
selectedValue: "".concat(selectedValue)
|
|
297
|
+
selectedValue: selectedValue ? "".concat(selectedValue) : undefined
|
|
160
298
|
} : itemField);
|
|
161
299
|
setFieldsDataState(newFieldsDataState);
|
|
162
300
|
onItemValueChanged({
|
|
@@ -164,7 +302,7 @@ const FilterPanel = props => {
|
|
|
164
302
|
changedItem: {
|
|
165
303
|
name: item.name,
|
|
166
304
|
inputType: item.inputType,
|
|
167
|
-
selectedValue: "".concat(selectedValue)
|
|
305
|
+
selectedValue: selectedValue ? "".concat(selectedValue) : undefined
|
|
168
306
|
}
|
|
169
307
|
});
|
|
170
308
|
},
|
|
@@ -174,6 +312,35 @@ const FilterPanel = props => {
|
|
|
174
312
|
height: "55px"
|
|
175
313
|
}));
|
|
176
314
|
break;
|
|
315
|
+
case 'periodpicker':
|
|
316
|
+
content = /*#__PURE__*/_react.default.createElement(_FilterPanel.PeriodPickerContainer, {
|
|
317
|
+
className: "PeriodPickerContainer"
|
|
318
|
+
}, /*#__PURE__*/_react.default.createElement(_Dropdown.Dropdown, {
|
|
319
|
+
className: "Dropdown",
|
|
320
|
+
name: item.name,
|
|
321
|
+
reset: Reset,
|
|
322
|
+
allowedInput: "all",
|
|
323
|
+
dropdownListfontSize: "14px",
|
|
324
|
+
labelColor: borderColor,
|
|
325
|
+
limitTagsOnMultiSelect: 2,
|
|
326
|
+
onInputChange: () => {},
|
|
327
|
+
shape: "round",
|
|
328
|
+
size: "large",
|
|
329
|
+
text: item.label,
|
|
330
|
+
value: item.selectedValue || undefined,
|
|
331
|
+
required: item.required,
|
|
332
|
+
disabled: item.disabled,
|
|
333
|
+
placeHolder: item.placeHolder,
|
|
334
|
+
placeHolderFontSize: "14px",
|
|
335
|
+
onChange: eventDropdownPeriodPicker => {
|
|
336
|
+
var _eventDropdownPeriodP, _eventDropdownPeriodP2;
|
|
337
|
+
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;
|
|
338
|
+
setPeriodPickerSelectedValue(selectedValue);
|
|
339
|
+
},
|
|
340
|
+
options: item.dropdownOptions && item.dropdownOptions.length > 0 ? item.dropdownOptions : [],
|
|
341
|
+
width: "100%"
|
|
342
|
+
}), displayPeriodPickerContent(item));
|
|
343
|
+
break;
|
|
177
344
|
default:
|
|
178
345
|
content = '';
|
|
179
346
|
}
|
|
@@ -215,7 +382,10 @@ const FilterPanel = props => {
|
|
|
215
382
|
fieldsData: FieldsDataState,
|
|
216
383
|
selectedValues: FieldsDataState === null || FieldsDataState === void 0 ? void 0 : FieldsDataState.map(itemField => ({
|
|
217
384
|
name: itemField.name,
|
|
218
|
-
selectedValue: itemField.selectedValue
|
|
385
|
+
selectedValue: itemField.selectedValue,
|
|
386
|
+
...(itemField.inputSubType ? {
|
|
387
|
+
inputSubType: itemField.inputSubType
|
|
388
|
+
} : '')
|
|
219
389
|
}))
|
|
220
390
|
})
|
|
221
391
|
}), /*#__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
|
};
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = void 0;
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
var _ProgressBar = require("./ProgressBar.style");
|
|
10
|
+
const ProgressBar = props => {
|
|
11
|
+
const {
|
|
12
|
+
progressPercent,
|
|
13
|
+
refreshInterval,
|
|
14
|
+
height,
|
|
15
|
+
width,
|
|
16
|
+
color
|
|
17
|
+
} = props;
|
|
18
|
+
const [progress, setProgress] = (0, _react.useState)(0);
|
|
19
|
+
(0, _react.useEffect)(() => {
|
|
20
|
+
const timer = setInterval(() => {
|
|
21
|
+
setProgress(currentProgress => {
|
|
22
|
+
const newProgress = currentProgress + 1;
|
|
23
|
+
if (newProgress > 100) {
|
|
24
|
+
clearInterval(timer);
|
|
25
|
+
return 100;
|
|
26
|
+
}
|
|
27
|
+
return newProgress;
|
|
28
|
+
});
|
|
29
|
+
}, refreshInterval);
|
|
30
|
+
return () => clearInterval(timer);
|
|
31
|
+
}, [progressPercent, refreshInterval]);
|
|
32
|
+
(0, _react.useEffect)(() => {
|
|
33
|
+
setProgress(progressPercent);
|
|
34
|
+
}, [progressPercent]);
|
|
35
|
+
return /*#__PURE__*/_react.default.createElement(_ProgressBar.ProgressBarContainer, {
|
|
36
|
+
className: "ProgressBarContainer",
|
|
37
|
+
width: width,
|
|
38
|
+
height: height
|
|
39
|
+
}, /*#__PURE__*/_react.default.createElement(_ProgressBar.ProgressBarFiller, {
|
|
40
|
+
className: "ProgressBarFiller",
|
|
41
|
+
color: color,
|
|
42
|
+
progress: progress
|
|
43
|
+
}));
|
|
44
|
+
};
|
|
45
|
+
var _default = exports.default = ProgressBar;
|
|
46
|
+
ProgressBar.defaultProps = {
|
|
47
|
+
progressPercent: 0,
|
|
48
|
+
refreshInterval: 100,
|
|
49
|
+
width: '100%',
|
|
50
|
+
height: '9px',
|
|
51
|
+
color: '#066768'
|
|
52
|
+
};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.ProgressBarFiller = exports.ProgressBarContainer = void 0;
|
|
8
|
+
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
|
|
9
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
10
|
+
var _templateObject, _templateObject2;
|
|
11
|
+
// Styled-components for the progress container and the filler
|
|
12
|
+
const ProgressBarContainer = exports.ProgressBarContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)([" \n width: ", ";\n background-color: #F2F2F2;\n border-radius: 12px;\n height: ", ";\n margin: 5px 0; \n"])), props => props.width, props => props.height);
|
|
13
|
+
const ProgressBarFiller = exports.ProgressBarFiller = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n background-color: ", ";\n height: 100%;\n text-align: center;\n border-radius: 12px;\n transition: width 0.5s ease-in-out;\n width: ", "%;\n"])), props => props.color, props => props.progress);
|
|
@@ -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 => {
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = exports.ErrorIcon = void 0;
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
// eslint-disable-next-line react/prop-types
|
|
10
|
+
const ErrorIcon = _ref => {
|
|
11
|
+
let {
|
|
12
|
+
color = '#FF3949',
|
|
13
|
+
width = '18',
|
|
14
|
+
height = '18'
|
|
15
|
+
} = _ref;
|
|
16
|
+
return /*#__PURE__*/_react.default.createElement("svg", {
|
|
17
|
+
width: width,
|
|
18
|
+
height: height,
|
|
19
|
+
viewBox: "0 0 14 13",
|
|
20
|
+
fill: "none",
|
|
21
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
22
|
+
}, /*#__PURE__*/_react.default.createElement("path", {
|
|
23
|
+
d: "M7 1.625C5.24219 1.625 3.64844 2.5625 2.75781 4.0625C1.89062 5.58594 1.89062 7.4375 2.75781 8.9375C3.64844 10.4609 5.24219 11.375 7 11.375C8.73438 11.375 10.3281 10.4609 11.2188 8.9375C12.0859 7.4375 12.0859 5.58594 11.2188 4.0625C10.3281 2.5625 8.73438 1.625 7 1.625ZM7 12.5C4.84375 12.5 2.875 11.375 1.79688 9.5C0.71875 7.64844 0.71875 5.375 1.79688 3.5C2.875 1.64844 4.84375 0.5 7 0.5C9.13281 0.5 11.1016 1.64844 12.1797 3.5C13.2578 5.375 13.2578 7.64844 12.1797 9.5C11.1016 11.375 9.13281 12.5 7 12.5ZM7 3.5C7.30469 3.5 7.5625 3.75781 7.5625 4.0625V6.6875C7.5625 7.01562 7.30469 7.25 7 7.25C6.67188 7.25 6.4375 7.01562 6.4375 6.6875V4.0625C6.4375 3.75781 6.67188 3.5 7 3.5ZM7.75 8.75C7.75 9.17188 7.39844 9.5 7 9.5C6.57812 9.5 6.25 9.17188 6.25 8.75C6.25 8.35156 6.57812 8 7 8C7.39844 8 7.75 8.35156 7.75 8.75Z",
|
|
24
|
+
fill: color
|
|
25
|
+
}));
|
|
26
|
+
};
|
|
27
|
+
exports.ErrorIcon = ErrorIcon;
|
|
28
|
+
var _default = exports.default = ErrorIcon;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = exports.SucceededIcon = void 0;
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
// eslint-disable-next-line react/prop-types
|
|
10
|
+
const SucceededIcon = _ref => {
|
|
11
|
+
let {
|
|
12
|
+
color = '#92CF17',
|
|
13
|
+
width = '18',
|
|
14
|
+
height = '18'
|
|
15
|
+
} = _ref;
|
|
16
|
+
return /*#__PURE__*/_react.default.createElement("svg", {
|
|
17
|
+
width: width,
|
|
18
|
+
height: height,
|
|
19
|
+
viewBox: "0 0 14 13",
|
|
20
|
+
fill: "none",
|
|
21
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
22
|
+
}, /*#__PURE__*/_react.default.createElement("path", {
|
|
23
|
+
d: "M7 1.625C5.24219 1.625 3.64844 2.5625 2.75781 4.0625C1.89062 5.58594 1.89062 7.4375 2.75781 8.9375C3.64844 10.4609 5.24219 11.375 7 11.375C8.73438 11.375 10.3281 10.4609 11.2188 8.9375C12.0859 7.4375 12.0859 5.58594 11.2188 4.0625C10.3281 2.5625 8.73438 1.625 7 1.625ZM7 12.5C4.84375 12.5 2.875 11.375 1.79688 9.5C0.71875 7.64844 0.71875 5.375 1.79688 3.5C2.875 1.64844 4.84375 0.5 7 0.5C9.13281 0.5 11.1016 1.64844 12.1797 3.5C13.2578 5.375 13.2578 7.64844 12.1797 9.5C11.1016 11.375 9.13281 12.5 7 12.5ZM9.64844 5.39844L6.64844 8.39844C6.41406 8.63281 6.0625 8.63281 5.85156 8.39844L4.35156 6.89844C4.11719 6.6875 4.11719 6.33594 4.35156 6.125C4.5625 5.89062 4.91406 5.89062 5.14844 6.125L6.25 7.22656L8.85156 4.625C9.0625 4.39062 9.41406 4.39062 9.64844 4.625C9.85938 4.83594 9.85938 5.1875 9.64844 5.39844Z",
|
|
24
|
+
fill: color
|
|
25
|
+
}));
|
|
26
|
+
};
|
|
27
|
+
exports.SucceededIcon = SucceededIcon;
|
|
28
|
+
var _default = exports.default = SucceededIcon;
|