sag_components 1.0.406 → 1.0.408
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.
|
@@ -17,7 +17,9 @@ var _IconButton = require("./IconButton.style");
|
|
|
17
17
|
/* IconButton */
|
|
18
18
|
const IconButton = props => {
|
|
19
19
|
const {
|
|
20
|
-
downloadStatus,
|
|
20
|
+
// downloadStatus,
|
|
21
|
+
fileLink,
|
|
22
|
+
showProcess,
|
|
21
23
|
contentColor,
|
|
22
24
|
buttonText,
|
|
23
25
|
backgroundColor,
|
|
@@ -30,11 +32,9 @@ const IconButton = props => {
|
|
|
30
32
|
onClick,
|
|
31
33
|
onCancelClick
|
|
32
34
|
} = props;
|
|
33
|
-
const [mouseDownPressed, setMouseDownPressed] = (0, _react.useState)(false);
|
|
34
35
|
const [progress, setProgress] = (0, _react.useState)(0);
|
|
35
|
-
const [showProcess, setShowProcess] = (0, _react.useState)(false);
|
|
36
36
|
const incrementProgress = () => {
|
|
37
|
-
if (
|
|
37
|
+
if (showProcess && progress <= 90) {
|
|
38
38
|
const interval = setInterval(() => {
|
|
39
39
|
setProgress(prevProgress => {
|
|
40
40
|
const newProgress = prevProgress + 3;
|
|
@@ -43,17 +43,14 @@ const IconButton = props => {
|
|
|
43
43
|
}
|
|
44
44
|
return newProgress;
|
|
45
45
|
});
|
|
46
|
-
setShowProcess(true);
|
|
47
46
|
}, 500);
|
|
48
|
-
} else
|
|
47
|
+
} else {
|
|
49
48
|
setProgress(0);
|
|
50
|
-
setShowProcess(false);
|
|
51
49
|
}
|
|
52
50
|
};
|
|
53
51
|
(0, _react.useEffect)(() => {
|
|
54
52
|
incrementProgress();
|
|
55
|
-
|
|
56
|
-
}, [downloadStatus]);
|
|
53
|
+
}, [showProcess]);
|
|
57
54
|
const getIcon = icon => {
|
|
58
55
|
switch (icon) {
|
|
59
56
|
case 'download':
|
|
@@ -102,40 +99,19 @@ const IconButton = props => {
|
|
|
102
99
|
return '';
|
|
103
100
|
}
|
|
104
101
|
};
|
|
105
|
-
const onMouseDownHandler = () => {
|
|
106
|
-
if (disabled) return;
|
|
107
|
-
setMouseDownPressed(true);
|
|
108
|
-
};
|
|
109
|
-
const onMouseUpHandler = () => {
|
|
110
|
-
if (disabled) return;
|
|
111
|
-
setMouseDownPressed(false);
|
|
112
|
-
};
|
|
113
|
-
const onPointerOutHandler = () => {
|
|
114
|
-
if (disabled) return;
|
|
115
|
-
if (!mouseDownPressed) return;
|
|
116
|
-
setMouseDownPressed(false);
|
|
117
|
-
};
|
|
118
|
-
const getClassNameExtention = () => {
|
|
119
|
-
if (disabled) return 'disabled';
|
|
120
|
-
if (mouseDownPressed) return 'mouseDownPressed';
|
|
121
|
-
return '';
|
|
122
|
-
};
|
|
123
102
|
const onClickHandler = event => {
|
|
124
|
-
|
|
103
|
+
event.preventDefault();
|
|
125
104
|
onClick(event);
|
|
126
105
|
};
|
|
127
106
|
const onCancelClickHandler = event => {
|
|
128
107
|
onCancelClick(event);
|
|
129
108
|
};
|
|
130
109
|
return /*#__PURE__*/_react.default.createElement(_IconButton.ButtonWrapper, null, /*#__PURE__*/_react.default.createElement(_IconButton.IconButtonContainer, {
|
|
131
|
-
|
|
110
|
+
download: fileLink,
|
|
132
111
|
backgroundColor: backgroundColor,
|
|
133
112
|
borderColor: borderColor,
|
|
134
113
|
borderRadius: borderRadius,
|
|
135
114
|
color: contentColor,
|
|
136
|
-
onMouseDown: onMouseDownHandler,
|
|
137
|
-
onMouseUp: onMouseUpHandler,
|
|
138
|
-
onPointerOut: onPointerOutHandler,
|
|
139
115
|
inProgress: showProcess,
|
|
140
116
|
progress: progress,
|
|
141
117
|
onClick: event => {
|
|
@@ -148,7 +124,9 @@ const IconButton = props => {
|
|
|
148
124
|
exports.IconButton = IconButton;
|
|
149
125
|
var _default = exports.default = IconButton;
|
|
150
126
|
IconButton.defaultProps = {
|
|
151
|
-
downloadStatus: '',
|
|
127
|
+
// downloadStatus: '',
|
|
128
|
+
fileLink: '',
|
|
129
|
+
showProcess: false,
|
|
152
130
|
buttonText: '',
|
|
153
131
|
iconName: 'eye',
|
|
154
132
|
contentColor: '#212121',
|
|
@@ -10,6 +10,6 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
|
|
|
10
10
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
11
11
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
|
|
12
12
|
const ButtonWrapper = exports.ButtonWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n width: fit-content;\n text-align: center;\n"])));
|
|
13
|
-
const IconButtonContainer = exports.IconButtonContainer = _styledComponents.default.
|
|
13
|
+
const IconButtonContainer = exports.IconButtonContainer = _styledComponents.default.a(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 14px;\n font-weight: 400;\n display: flex;\n gap: 10px;\n align-items: center;\n justify-content: center;\n padding: 12px 20px;\n margin-bottom: 5px;\n color: ", ";\n border-radius: ", ";\n border: 1px solid ", ";\n background: ", ";\n position: relative;\n transition: all .3s;\n ", "\n &:hover, &:focus {\n cursor: pointer;\n box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.1);\n }\n"])), props => props.color, props => props.borderRadius, props => props.borderColor.toString(), props => props.backgroundColor.toString(), props => props.inProgress && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n pointer-events: none;\n &:after {\n content: 'In Progress';\n display: flex;\n align-items: center;\n justify-content: center;\n text-wrap: nowrap;\n position: absolute;\n background: linear-gradient(\n to right,\n #5FCC70 ", "%,\n #B1B1B1 ", "%,\n #B1B1B1 100%\n );\n width: 100%;\n height: 100%;\n border-radius: ", ";\n border-width: 0;\n z-index: 9;\n }\n "])), props.progress, props.progress + 1, props => props.borderRadius));
|
|
14
14
|
const SpanText = exports.SpanText = _styledComponents.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n"])));
|
|
15
15
|
const CancelClick = exports.CancelClick = _styledComponents.default.span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n display: inherit;\n font-family: \"Lato\", sans-serif;;\n font-size: 14px;\n color: #568202;\n cursor: pointer;\n"])));
|