@polkadot/react-query/Elapsed.js

A collection of RxJs React components the Polkadot JS API

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = Elapsed;

var _react = _interopRequireWildcard(require("react"));

var _util = require("@polkadot/util");

// Copyright 2017-2020 @polkadot/react-query authors & contributors
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
const TICK_TIMEOUT = 100;
const tickers = new Map();
let lastNow = Date.now();
let lastId = 0;

function tick() {
  lastNow = Date.now();

  for (const ticker of tickers.values()) {
    ticker(lastNow);
  }

  setTimeout(tick, TICK_TIMEOUT);
}

function getDisplayValue(now = 0, value = 0) {
  const tsValue = (value && value.getTime ? value.getTime() : (0, _util.bnToBn)(value).toNumber()) || 0;
  let display = '0.0s';

  if (now && tsValue) {
    const elapsed = Math.max(Math.abs(now - tsValue), 0) / 1000;

    if (elapsed < 15) {
      display = "".concat(elapsed.toFixed(1), "s");
    } else if (elapsed < 60) {
      display = "".concat(elapsed | 0, "s");
    } else if (elapsed < 3600) {
      display = "".concat(elapsed / 60 | 0, "m");
    } else {
      display = "".concat(elapsed / 3600 | 0, "h");
    }
  }

  return display;
}

tick();

function Elapsed({
  className,
  style,
  value
}) {
  const [now, setNow] = (0, _react.useState)(lastNow);
  (0, _react.useEffect)(() => {
    const id = lastId++;
    tickers.set(id, setNow);
    return () => {
      tickers.delete(id);
    };
  }, []);
  return _react.default.createElement("div", {
    className: ['ui--Elapsed', className].join(' '),
    style: style
  }, getDisplayValue(now, value));
}