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

React library for Intility's design system, Bifrost.

"use client";

import { c as _c } from "react-compiler-runtime";
import { useEffect, useState } from "react";
import useDateTimeFormatter from "../../hooks/useDateTimeFormatter.js";
import useRelativeTime from "../../hooks/useRelativeTime.js";
import getNextUpdateDelay from "../../utils/getNextUpdateDelay.js";
import Tooltip from "../Tooltip/Tooltip.js";
import { jsx as _jsx } from "react/jsx-runtime";
const fullToolTipOptions = {
  day: "2-digit",
  month: "long",
  year: "numeric",
  hour: "2-digit",
  minute: "2-digit",
  timeZoneName: "short"
};
/**
 * Display a relative time string (e.g. "5 minutes ago" or "in 2 hours")
 * based on current Bifrost locale. Includes a tooltip with the full date
 * and time to avoid confusion.
 *
 * @see https://bifrost.intility.com/react/formatRelativeTime
 *
 * @example
 * // e.g. "5 minutes ago" or "in 2 hours" depending on the date provided
 * <FormatRelativeTime date={dateObjectOrISOString} />
 */
const FormatRelativeTime = t0 => {
  const $ = _c(21);
  const {
    date,
    options,
    locale,
    noTooltip: t1
  } = t0;
  const noTooltip = t1 === undefined ? false : t1;
  let t2;
  if ($[0] !== locale || $[1] !== options) {
    t2 = {
      locale,
      options
    };
    $[0] = locale;
    $[1] = options;
    $[2] = t2;
  } else {
    t2 = $[2];
  }
  const displayString = useRelativeTime(date, t2);
  const [updateCounter, setUpdateCounter] = useState(0);
  let t3;
  let t4;
  if ($[3] !== date) {
    t3 = () => {
      const dateObj = typeof date === "string" ? new Date(date) : date;
      const scheduleUpdate = () => {
        const delay = getNextUpdateDelay(dateObj);
        return setTimeout(() => {
          setUpdateCounter(_temp);
          timeoutId = scheduleUpdate();
        }, delay);
      };
      let timeoutId = scheduleUpdate();
      return () => clearTimeout(timeoutId);
    };
    t4 = [date];
    $[3] = date;
    $[4] = t3;
    $[5] = t4;
  } else {
    t3 = $[4];
    t4 = $[5];
  }
  useEffect(t3, t4);
  const dateTimeFormatter = useDateTimeFormatter();
  if (noTooltip) {
    let t5;
    if ($[6] !== displayString || $[7] !== updateCounter) {
      t5 = /*#__PURE__*/_jsx("span", {
        suppressHydrationWarning: true,
        children: displayString
      }, updateCounter);
      $[6] = displayString;
      $[7] = updateCounter;
      $[8] = t5;
    } else {
      t5 = $[8];
    }
    return t5;
  }
  let t5;
  if ($[9] !== date || $[10] !== dateTimeFormatter || $[11] !== locale) {
    t5 = dateTimeFormatter({
      date,
      show: "datetime",
      locale,
      options: fullToolTipOptions
    });
    $[9] = date;
    $[10] = dateTimeFormatter;
    $[11] = locale;
    $[12] = t5;
  } else {
    t5 = $[12];
  }
  const tooltipString = t5;
  let t6;
  if ($[13] !== tooltipString) {
    t6 = /*#__PURE__*/_jsx("span", {
      suppressHydrationWarning: true,
      children: tooltipString
    });
    $[13] = tooltipString;
    $[14] = t6;
  } else {
    t6 = $[14];
  }
  let t7;
  if ($[15] !== displayString || $[16] !== updateCounter) {
    t7 = /*#__PURE__*/_jsx("span", {
      children: displayString
    }, updateCounter);
    $[15] = displayString;
    $[16] = updateCounter;
    $[17] = t7;
  } else {
    t7 = $[17];
  }
  let t8;
  if ($[18] !== t6 || $[19] !== t7) {
    t8 = /*#__PURE__*/_jsx(Tooltip, {
      content: t6,
      children: t7
    });
    $[18] = t6;
    $[19] = t7;
    $[20] = t8;
  } else {
    t8 = $[20];
  }
  return t8;
};
export default FormatRelativeTime;
function _temp(prev) {
  return prev + 1;
}