@intility/bifrost-react/dist/components/FormatDuration/FormatDuration.js

React library for Intility's design system, Bifrost.

"use client";

import { c as _c } from "react-compiler-runtime";
import useDateTimeFormatter from "@intility/bifrost-react/hooks/useDateTimeFormatter";
import useLocale from "@intility/bifrost-react/hooks/useLocale";
import Tooltip from "@intility/bifrost-react/Tooltip";
import { useCallback } from "react";
import getDuration from "../../utils/getDuration.js";
import { jsx as _jsx } from "react/jsx-runtime";
// cache formatter by locale
const cache = {};
function useDurationFormatter() {
  const $ = _c(2);
  const {
    dateOptions: t0
  } = useLocale();
  const {
    locale
  } = t0;
  let t1;
  if ($[0] !== locale) {
    t1 = duration => {
      let formatter = cache[locale];
      if (!formatter || typeof formatter.format !== "function") {
        formatter = new Intl.DurationFormat(locale, {
          style: "long"
        });
        cache[locale] = formatter;
      }
      return formatter.format(duration);
    };
    $[0] = locale;
    $[1] = t1;
  } else {
    t1 = $[1];
  }
  return t1;
}
const fullToolTipOptions = {
  day: "2-digit",
  month: "long",
  year: "numeric",
  hour: "2-digit",
  minute: "2-digit",
  timeZoneName: "short"
};
/**
 * Display human-readable duration (e.g "3 days"/"5 hours") based on a `start`
 * and `end` Date object, with a tooltip displaying full DateTime info
 * including time zone.
 *
 * @see https://bifrost.intility.com/react/formatDuration
 */
export default function FormatDuration(t0) {
  const $ = _c(19);
  const {
    start,
    end
  } = t0;
  const {
    dateOptions: t1
  } = useLocale();
  const {
    locale
  } = t1;
  const durationFormatter = useDurationFormatter();
  const dateTimeFormatter = useDateTimeFormatter();
  let t2;
  if ($[0] !== durationFormatter || $[1] !== end || $[2] !== start) {
    t2 = durationFormatter(getDuration(start, end));
    $[0] = durationFormatter;
    $[1] = end;
    $[2] = start;
    $[3] = t2;
  } else {
    t2 = $[3];
  }
  const displayString = t2;
  let t3;
  if ($[4] !== dateTimeFormatter || $[5] !== locale || $[6] !== start) {
    t3 = dateTimeFormatter({
      date: start,
      show: "datetime",
      locale,
      options: fullToolTipOptions
    });
    $[4] = dateTimeFormatter;
    $[5] = locale;
    $[6] = start;
    $[7] = t3;
  } else {
    t3 = $[7];
  }
  let t4;
  if ($[8] !== dateTimeFormatter || $[9] !== end || $[10] !== locale) {
    t4 = dateTimeFormatter({
      date: end,
      show: "datetime",
      locale,
      options: fullToolTipOptions
    });
    $[8] = dateTimeFormatter;
    $[9] = end;
    $[10] = locale;
    $[11] = t4;
  } else {
    t4 = $[11];
  }
  const tooltipString = `${t3} - ${t4}`;
  let t5;
  if ($[12] !== tooltipString) {
    t5 = /*#__PURE__*/_jsx("span", {
      suppressHydrationWarning: true,
      children: tooltipString
    });
    $[12] = tooltipString;
    $[13] = t5;
  } else {
    t5 = $[13];
  }
  const t6 = displayString || "0 seconds";
  let t7;
  if ($[14] !== t6) {
    t7 = /*#__PURE__*/_jsx("span", {
      children: t6
    });
    $[14] = t6;
    $[15] = t7;
  } else {
    t7 = $[15];
  }
  let t8;
  if ($[16] !== t5 || $[17] !== t7) {
    t8 = /*#__PURE__*/_jsx(Tooltip, {
      content: t5,
      children: t7
    });
    $[16] = t5;
    $[17] = t7;
    $[18] = t8;
  } else {
    t8 = $[18];
  }
  return t8;
}