@eccenca/gui-elements
Version:
GUI elements based on other libraries, usable in React application, written in Typescript.
91 lines • 4.02 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __read = (this && this.__read) || function (o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
};
import React, { useEffect, useState } from "react";
var dateTimeToElapsedTimeInMs = function (dateTime) {
var absoluteMs = typeof dateTime === "number" ? dateTime : new Date(dateTime).getTime();
var elapsed = new Date().getTime() - absoluteMs;
return elapsed < 0 ? 0 : elapsed;
};
/**
* Returns a segmentation of the elapsed time, i.e. an array with the nr of days, hours, minutes, seconds
*/
var elapsedTimeSegmented = function (elapsedTimeInMs) {
// In how many segments the time should be split, i.e. hours, minutes, seconds
var segmentSteps = [24, 60, 60];
// First convert to time in seconds
var remaining = Math.floor(elapsedTimeInMs / 1000);
var segmentValues = [];
segmentSteps.reverse().forEach(function (segmentSize) {
var segmentValue = remaining % segmentSize;
remaining = Math.floor(remaining / segmentSize);
segmentValues.push(segmentValue);
});
segmentValues.push(remaining);
return segmentValues.reverse();
};
/**
* Returns the simplified elapsed time
*/
var simplifiedElapsedTime = function (timeSegments, translateUnits, includeSeconds) {
if (includeSeconds === void 0) { includeSeconds = false; }
var units = ["day", "hour", "minute"];
if (includeSeconds) {
units.push("second");
}
// Find first non-null value
var idx = 0;
while (idx < 3 && timeSegments[idx] === 0) {
idx++;
}
if (idx === 3 && !includeSeconds) {
// Do not show exact seconds
return "< 1 ".concat(translateUnits("minute"));
}
else {
return "".concat(timeSegments[idx], " ").concat(translateUnits((units[idx] + (timeSegments[idx] > 1 ? "s" : ""))));
}
};
/**
* Displays the elapsed time in a human readable way.
*/
export var ElapsedDateTimeDisplay = function (_a) {
var dateTime = _a.dateTime, _b = _a.prefix, prefix = _b === void 0 ? "" : _b, _c = _a.suffix, suffix = _c === void 0 ? "" : _c, _d = _a.showDateTimeTooltip, showDateTimeTooltip = _d === void 0 ? true : _d, translateUnits = _a.translateUnits, includeSeconds = _a.includeSeconds, otherProps = __rest(_a, ["dateTime", "prefix", "suffix", "showDateTimeTooltip", "translateUnits", "includeSeconds"]);
var _e = __read(useState(dateTimeToElapsedTimeInMs(dateTime)), 2), elapsedTime = _e[0], setElapsedTime = _e[1];
useEffect(function () {
var timeout = setInterval(function () {
setElapsedTime(dateTimeToElapsedTimeInMs(dateTime));
}, 1000);
return function () { return clearInterval(timeout); };
}, [dateTime]);
return (React.createElement("span", { "data-test-id": otherProps["data-test-id"], title: showDateTimeTooltip ? new Date(dateTime).toString() : "" }, prefix + simplifiedElapsedTime(elapsedTimeSegmented(elapsedTime), translateUnits, includeSeconds) + suffix));
};
export var elapsedDateTimeDisplayUtils = {
elapsedTimeSegmented: elapsedTimeSegmented,
simplifiedElapsedTime: simplifiedElapsedTime,
};
//# sourceMappingURL=ElapsedDateTimeDisplay.js.map