pds-dev-kit-web-test 2.5.377 → 2.5.378
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.
|
@@ -42,53 +42,76 @@ exports.CustomProgressbar = void 0;
|
|
|
42
42
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
43
43
|
var react_1 = require("react");
|
|
44
44
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
45
|
+
var progressConfigs_1 = require("./progressConfigs");
|
|
45
46
|
var CustomProgressbar = function (_a) {
|
|
46
47
|
var progressRef = _a.progressRef, leftTimeMsRef = _a.leftTimeMsRef, _b = _a.type, type = _b === void 0 ? 'NONE' : _b, _c = _a.offset, offset = _c === void 0 ? { top: '0' } : _c, _d = _a.size, size = _d === void 0 ? 1 : _d;
|
|
47
48
|
var _e = (0, react_1.useState)(0), leftTimeSec = _e[0], setLeftTimeSec = _e[1];
|
|
48
49
|
var _f = (0, react_1.useState)(0), progress = _f[0], setProgress = _f[1];
|
|
49
|
-
// 초 단위 렌더
|
|
50
50
|
(0, react_1.useEffect)(function () {
|
|
51
|
-
var
|
|
51
|
+
var updateTimer = function () {
|
|
52
52
|
var _a;
|
|
53
|
-
var sec = Math.
|
|
53
|
+
var sec = Math.abs(((_a = leftTimeMsRef.current) !== null && _a !== void 0 ? _a : 10000) / 1000);
|
|
54
54
|
setLeftTimeSec(sec);
|
|
55
|
-
}
|
|
55
|
+
};
|
|
56
|
+
updateTimer();
|
|
57
|
+
var id = setInterval(updateTimer, 1000);
|
|
56
58
|
return function () { return clearInterval(id); };
|
|
57
|
-
}, [
|
|
58
|
-
// 실시간 progress 반영
|
|
59
|
+
}, []);
|
|
59
60
|
(0, react_1.useEffect)(function () {
|
|
60
61
|
var animationId;
|
|
62
|
+
var lastProgress = -1;
|
|
61
63
|
var updateProgress = function () {
|
|
62
64
|
var _a;
|
|
63
|
-
|
|
65
|
+
var currentProgress = (_a = progressRef.current) !== null && _a !== void 0 ? _a : 0;
|
|
66
|
+
// 소수점 3자리로 제한 (0.001 단위)
|
|
67
|
+
var fixedProgress = Math.round(currentProgress * 1000) / 1000;
|
|
68
|
+
// 0.5% 이상 변경시에만 업데이트
|
|
69
|
+
if (Math.abs(fixedProgress - lastProgress) > 0.005) {
|
|
70
|
+
setProgress(fixedProgress);
|
|
71
|
+
lastProgress = fixedProgress;
|
|
72
|
+
}
|
|
64
73
|
animationId = requestAnimationFrame(updateProgress);
|
|
65
74
|
};
|
|
66
75
|
animationId = requestAnimationFrame(updateProgress);
|
|
67
76
|
return function () { return cancelAnimationFrame(animationId); };
|
|
68
|
-
}, [
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
77
|
+
}, []);
|
|
78
|
+
var renderProgressByType = function () {
|
|
79
|
+
switch (type) {
|
|
80
|
+
case 'NONE':
|
|
81
|
+
return null;
|
|
82
|
+
case 'DESIGN1':
|
|
83
|
+
return (0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign1, { progress: progress, leftTimeSec: leftTimeSec });
|
|
84
|
+
case 'DESIGN2':
|
|
85
|
+
return (0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign2, { progress: progress, leftTimeSec: leftTimeSec });
|
|
86
|
+
case 'DESIGN3':
|
|
87
|
+
return (0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign3, { progress: progress });
|
|
88
|
+
case 'DESIGN4':
|
|
89
|
+
return (0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign4, { progress: progress });
|
|
90
|
+
case 'DESIGN5':
|
|
91
|
+
return (0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign5, { progress: progress });
|
|
92
|
+
case 'DESIGN6':
|
|
93
|
+
return (0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign6, { progress: progress });
|
|
94
|
+
case 'DESIGN7':
|
|
95
|
+
return (0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign7, { progress: progress });
|
|
96
|
+
case 'DESIGN8':
|
|
97
|
+
return (0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign8, { progress: progress });
|
|
98
|
+
default:
|
|
99
|
+
return (0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign1, { progress: progress, leftTimeSec: leftTimeSec });
|
|
100
|
+
}
|
|
101
|
+
};
|
|
102
|
+
return ((0, jsx_runtime_1.jsx)(S_ProgressWrapper, __assign({ "$offset": offset, "$size": size }, { children: renderProgressByType() })));
|
|
80
103
|
};
|
|
81
104
|
exports.CustomProgressbar = CustomProgressbar;
|
|
82
|
-
var
|
|
83
|
-
var $offset = _a.$offset;
|
|
84
|
-
return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n "], ["\n ", "\n ", "\n ", "\n ", "\n "])), $offset.top !== undefined ? "top: ".concat($offset.top, ";") : '', $offset.bottom !== undefined ? "bottom: ".concat($offset.bottom, ";") : '', $offset.left !== undefined ? "left: ".concat($offset.left, ";") : '', $offset.right !== undefined ? "right: ".concat($offset.right, ";") : '');
|
|
85
|
-
}, function (_a) {
|
|
105
|
+
var S_ProgressWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n bottom: 16px;\n height: fit-content;\n left: 16px;\n padding: 5px;\n position: absolute;\n right: 16px;\n transform: ", ";\n transform-origin: ", ";\n width: max-content;\n z-index: 10;\n\n ", ";\n"], ["\n bottom: 16px;\n height: fit-content;\n left: 16px;\n padding: 5px;\n position: absolute;\n right: 16px;\n transform: ", ";\n transform-origin: ", ";\n width: max-content;\n z-index: 10;\n\n ", ";\n"])), function (_a) {
|
|
86
106
|
var _b, _c;
|
|
87
107
|
var $size = _a.$size, $offset = _a.$offset;
|
|
88
108
|
return "scale(".concat($size, ") translate(").concat((_b = $offset.translateX) !== null && _b !== void 0 ? _b : 0, "%, ").concat((_c = $offset.translateY) !== null && _c !== void 0 ? _c : 0, "%)");
|
|
89
109
|
}, function (_a) {
|
|
90
110
|
var $offset = _a.$offset;
|
|
91
111
|
return $offset.transformOrigin || 'center center';
|
|
112
|
+
}, function (_a) {
|
|
113
|
+
var $offset = _a.$offset;
|
|
114
|
+
return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n "], ["\n ", "\n ", "\n ", "\n ", "\n "])), $offset.top !== undefined ? "top: ".concat($offset.top, ";") : '', $offset.bottom !== undefined ? "bottom: ".concat($offset.bottom, ";") : '', $offset.left !== undefined ? "left: ".concat($offset.left, ";") : '', $offset.right !== undefined ? "right: ".concat($offset.right, ";") : '');
|
|
92
115
|
});
|
|
93
116
|
exports.default = exports.CustomProgressbar;
|
|
94
117
|
var templateObject_1, templateObject_2;
|