@smitch/fluid
Version:
A Next/React ui-component libray.
26 lines (25 loc) • 1.53 kB
JavaScript
'use client';
import { jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import { twMerge } from 'tailwind-merge';
var Progress = function (_a) {
var totalSize = _a.totalSize, _b = _a.downloadedSize, downloadedSize = _b === void 0 ? 0 : _b, _c = _a.unit, unit = _c === void 0 ? 'mb' : _c, _d = _a.id, id = _d === void 0 ? 'progress' : _d, onDone = _a.onDone, _e = _a.feedbackClasses, feedbackClasses = _e === void 0 ? '' : _e, _f = _a.className, className = _f === void 0 ? '' : _f, style = _a.style;
var _g = useState(0), progress = _g[0], setProgress = _g[1];
var _h = useState(false), done = _h[0], setDone = _h[1];
useEffect(function () {
if (totalSize > 0) {
var percentage = (downloadedSize / totalSize) * 100;
setProgress(Math.min(percentage, 100));
}
if (downloadedSize >= totalSize) {
setDone(true);
if (onDone && !done)
onDone();
}
else {
setDone(false);
}
}, [totalSize, downloadedSize, onDone, done]);
return (_jsxs("div", { className: 'progress-wrapper min-w-60', children: [_jsxs("progress", { className: twMerge("progress w-full h-4", className), style: style, id: id, value: progress, max: 100, children: [progress.toFixed(2), "%"] }), _jsxs("div", { className: twMerge("progress-feedback text-sm text-center mt-2", feedbackClasses), children: [progress.toFixed(0), "% / ", totalSize, " ", unit] })] }));
};
export default Progress;