sag_components 1.0.601 → 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 +6 -3
- package/dist/stories/components/ProgressBar.js +52 -0
- package/dist/stories/components/ProgressBar.style.js +13 -0
- 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
|
};
|
|
@@ -119,7 +119,8 @@ const FilterPanel = props => {
|
|
|
119
119
|
});
|
|
120
120
|
},
|
|
121
121
|
placeholder: "Select Month ...",
|
|
122
|
-
width: "100%"
|
|
122
|
+
width: "100%",
|
|
123
|
+
height: "55px"
|
|
123
124
|
});
|
|
124
125
|
break;
|
|
125
126
|
case 'quarter':
|
|
@@ -150,7 +151,8 @@ const FilterPanel = props => {
|
|
|
150
151
|
});
|
|
151
152
|
},
|
|
152
153
|
placeholder: "Select Quarter ...",
|
|
153
|
-
width: "100%"
|
|
154
|
+
width: "100%",
|
|
155
|
+
height: "55px"
|
|
154
156
|
});
|
|
155
157
|
break;
|
|
156
158
|
case 'year':
|
|
@@ -190,7 +192,8 @@ const FilterPanel = props => {
|
|
|
190
192
|
});
|
|
191
193
|
},
|
|
192
194
|
options: getYearsArray(),
|
|
193
|
-
width: "100%"
|
|
195
|
+
width: "100%",
|
|
196
|
+
height: "55px"
|
|
194
197
|
});
|
|
195
198
|
break;
|
|
196
199
|
default:
|
|
@@ -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);
|
|
@@ -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;
|