| 1 | "use strict";
|
| 2 | Object.defineProperty(exports, "__esModule", { value: true });
|
| 3 | exports.MultipleFileUploadStatusItem = void 0;
|
| 4 | const tslib_1 = require("tslib");
|
| 5 | const React = tslib_1.__importStar(require("react"));
|
| 6 | const multiple_file_upload_1 = tslib_1.__importDefault(require("@patternfly/react-styles/css/components/MultipleFileUpload/multiple-file-upload"));
|
| 7 | const react_styles_1 = require("@patternfly/react-styles");
|
| 8 | const Progress_1 = require("../Progress");
|
| 9 | const Button_1 = require("../Button");
|
| 10 | const file_icon_1 = tslib_1.__importDefault(require('@patternfly/react-icons/dist/js/icons/file-icon'));
|
| 11 | const times_circle_icon_1 = tslib_1.__importDefault(require('@patternfly/react-icons/dist/js/icons/times-circle-icon'));
|
| 12 | const MultipleFileUploadStatusItem = (_a) => {
|
| 13 | var { className, file, fileIcon, onReadStarted = () => { }, onReadFinished = () => { }, onReadSuccess = () => { }, onReadFail = () => { }, onClearClick = () => { }, customFileHandler, fileName, fileSize, progressValue, progressVariant, progressAriaLabel, progressAriaLabelledBy, progressId, buttonAriaLabel = 'Remove from list' } = _a, props = tslib_1.__rest(_a, ["className", "file", "fileIcon", "onReadStarted", "onReadFinished", "onReadSuccess", "onReadFail", "onClearClick", "customFileHandler", "fileName", "fileSize", "progressValue", "progressVariant", "progressAriaLabel", "progressAriaLabelledBy", "progressId", "buttonAriaLabel"]);
|
| 14 | const [loadPercentage, setLoadPercentage] = React.useState(0);
|
| 15 | const [loadResult, setLoadResult] = React.useState();
|
| 16 | function readFile(file) {
|
| 17 | return new Promise((resolve, reject) => {
|
| 18 | const reader = new FileReader();
|
| 19 | reader.onload = () => resolve(reader.result);
|
| 20 | reader.onerror = () => reject(reader.error);
|
| 21 | reader.onprogress = data => {
|
| 22 | if (data.lengthComputable) {
|
| 23 | setLoadPercentage((data.loaded / data.total) * 100);
|
| 24 | }
|
| 25 | };
|
| 26 | reader.readAsDataURL(file);
|
| 27 | });
|
| 28 | }
|
| 29 | React.useEffect(() => {
|
| 30 | if (customFileHandler) {
|
| 31 | customFileHandler(file);
|
| 32 | }
|
| 33 | else {
|
| 34 | onReadStarted(file);
|
| 35 | readFile(file)
|
| 36 | .then(data => {
|
| 37 | setLoadResult('success');
|
| 38 | setLoadPercentage(100);
|
| 39 | onReadFinished(file);
|
| 40 | onReadSuccess(data, file);
|
| 41 | })
|
| 42 | .catch((error) => {
|
| 43 | onReadFinished(file);
|
| 44 | onReadFail(error, file);
|
| 45 | setLoadResult('danger');
|
| 46 | });
|
| 47 | }
|
| 48 | }, []);
|
| 49 | const getHumanReadableFileSize = (size) => {
|
| 50 | const prefixes = ['', 'K', 'M', 'G', 'T'];
|
| 51 | let prefixUnit = 0;
|
| 52 | while (size >= 1000) {
|
| 53 | prefixUnit += 1;
|
| 54 | size = size / 1000;
|
| 55 | }
|
| 56 | if (prefixUnit >= prefixes.length) {
|
| 57 | return 'File size too large';
|
| 58 | }
|
| 59 | return `${Math.round(size)}${prefixes[prefixUnit]}B`;
|
| 60 | };
|
| 61 | const title = (React.createElement("span", { className: multiple_file_upload_1.default.multipleFileUploadStatusItemProgress },
|
| 62 | React.createElement("span", { className: multiple_file_upload_1.default.multipleFileUploadStatusItemProgressText }, fileName || (file === null || file === void 0 ? void 0 : file.name) || ''),
|
| 63 | React.createElement("span", { className: multiple_file_upload_1.default.multipleFileUploadStatusItemProgressSize }, fileSize || getHumanReadableFileSize((file === null || file === void 0 ? void 0 : file.size) || 0))));
|
| 64 | return (React.createElement("li", Object.assign({ className: react_styles_1.css(multiple_file_upload_1.default.multipleFileUploadStatusItem, className) }, props),
|
| 65 | React.createElement("div", { className: multiple_file_upload_1.default.multipleFileUploadStatusItemIcon }, fileIcon || React.createElement(file_icon_1.default, null)),
|
| 66 | React.createElement("div", { className: multiple_file_upload_1.default.multipleFileUploadStatusItemMain },
|
| 67 | React.createElement(Progress_1.Progress, { title: title, value: progressValue || loadPercentage, variant: progressVariant || loadResult, "aria-label": progressAriaLabel, "aria-labelledby": progressAriaLabelledBy, id: progressId })),
|
| 68 | React.createElement("div", { className: multiple_file_upload_1.default.multipleFileUploadStatusItemClose },
|
| 69 | React.createElement(Button_1.Button, { variant: "plain", "aria-label": buttonAriaLabel, onClick: onClearClick },
|
| 70 | React.createElement(times_circle_icon_1.default, null)))));
|
| 71 | };
|
| 72 | exports.MultipleFileUploadStatusItem = MultipleFileUploadStatusItem;
|
| 73 | exports.MultipleFileUploadStatusItem.displayName = 'MultipleFileUploadStatusItem';
|
| 74 | |
| \ | No newline at end of file |