synapse-react-client
Version:
[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps
61 lines • 3.98 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importStar)(require("react"));
var fontawesome_svg_core_1 = require("@fortawesome/fontawesome-svg-core");
var free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
var react_fontawesome_1 = require("@fortawesome/react-fontawesome");
var testDownloadSpeed_1 = require("../../utils/functions/testDownloadSpeed");
var calculateFriendlyFileSize_1 = require("../../utils/functions/calculateFriendlyFileSize");
var react_tooltip_1 = (0, tslib_1.__importDefault)(require("react-tooltip"));
var moment_1 = (0, tslib_1.__importDefault)(require("moment"));
var SynapseTableConstants_1 = require("../table/SynapseTableConstants");
var SynapseContext_1 = require("../../utils/SynapseContext");
fontawesome_svg_core_1.library.add(free_solid_svg_icons_1.faFile);
fontawesome_svg_core_1.library.add(free_solid_svg_icons_1.faDatabase);
fontawesome_svg_core_1.library.add(free_solid_svg_icons_1.faClock);
function DownloadDetails(props) {
var _a = (0, react_1.useState)({
isLoading: true,
downloadSpeed: 0,
}), state = _a[0], setState = _a[1];
var accessToken = (0, SynapseContext_1.useSynapseContext)().accessToken;
var isLoading = state.isLoading, downloadSpeed = state.downloadSpeed;
var numFiles = props.numFiles, numBytes = props.numBytes;
(0, react_1.useEffect)(function () {
if (accessToken) {
(0, testDownloadSpeed_1.testDownloadSpeed)(accessToken).then(function (speed) {
setState({
isLoading: false,
downloadSpeed: speed,
});
});
}
}, [accessToken]);
var timeEstimateInSeconds = isLoading || downloadSpeed === 0 ? 0 : numBytes / downloadSpeed;
var friendlyTime = timeEstimateInSeconds === 0
? ''
: moment_1.default.duration(timeEstimateInSeconds, 'seconds').humanize();
var numBytesTooltipId = 'num_bytes_id';
var friendlyTimeTooltipId = 'friendly_time_id';
var isInactive = numFiles === 0 || timeEstimateInSeconds === 0;
var iconClassName = isInactive ? 'SRC-inactive' : 'SRC-primary-text-color';
return (react_1.default.createElement("span", { className: "download-details-container" },
react_1.default.createElement("span", null,
react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { className: iconClassName, icon: "file" }),
!isInactive && react_1.default.createElement(react_1.default.Fragment, null,
" ",
numFiles,
" \u00A0 files ")),
react_1.default.createElement("span", { "data-for": numBytesTooltipId, "data-tip": "This is the total size of all files. Zipped package(s) will likely be smaller." },
react_1.default.createElement(react_tooltip_1.default, { delayShow: SynapseTableConstants_1.TOOLTIP_DELAY_SHOW, place: "top", type: "dark", effect: "solid", id: numBytesTooltipId }),
react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { className: iconClassName, icon: "database" }),
(0, calculateFriendlyFileSize_1.calculateFriendlyFileSize)(numBytes)),
react_1.default.createElement("span", { "data-for": friendlyTimeTooltipId, "data-tip": "This is an estimate of how long package download will take." },
react_1.default.createElement(react_tooltip_1.default, { delayShow: SynapseTableConstants_1.TOOLTIP_DELAY_SHOW, place: "top", type: "dark", effect: "solid", id: friendlyTimeTooltipId }),
react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { className: iconClassName, icon: "clock" }),
isLoading && numFiles > 0 && react_1.default.createElement("span", { className: "spinner" }),
!isLoading && friendlyTime)));
}
exports.default = DownloadDetails;
//# sourceMappingURL=DownloadDetails.js.map