@dnb/eufemia/cjs/components/date-format/DateFormat.js

DNB Eufemia Design System UI Library

"use strict";
"use client";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = require("react");
var _Context = _interopRequireDefault(require("../../shared/Context.js"));
var _DatePickerCalc = require("../date-picker/DatePickerCalc.js");
var _DateFormatUtils = require("./DateFormatUtils.js");
var _dateFns = require("date-fns");
var _clsx = _interopRequireDefault(require("clsx"));
var _SpacingUtils = require("../space/SpacingUtils.js");
var _Tooltip = _interopRequireDefault(require("../Tooltip.js"));
var _SkeletonHelper = require("../skeleton/SkeletonHelper.js");
var _index = require("../../shared/index.js");
var _componentHelper = require("../../shared/component-helper.js");
var _withComponentMarkers = _interopRequireDefault(require("../../shared/helpers/withComponentMarkers.js"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function DateFormat(props) {
  const context = (0, _react.useContext)(_Context.default);
  const {
    invalidDate
  } = (0, _index.useTranslation)().DateFormat;
  const {
    value,
    children,
    locale: localeProp,
    dateStyle = 'long',
    timeStyle,
    dateTimeSeparator,
    hideCurrentYear = false,
    hideYear = false,
    relativeTimeStyle,
    skeleton,
    relativeTime = false,
    relativeTimeReference
  } = props;
  const locale = localeProp || context.locale;
  const ref = (0, _react.useRef)(undefined);
  const date = (0, _react.useMemo)(() => {
    return getDate({
      value,
      children
    });
  }, [value, children]);
  const durationValue = (0, _react.useMemo)(() => {
    const durationString = String(value || children);
    if (!durationString || !(0, _DateFormatUtils.isValidDuration)(durationString)) {
      return undefined;
    }
    return (0, _DateFormatUtils.parseDuration)(durationString);
  }, [value, children]);
  const getDuration = (0, _react.useCallback)(dateStyle => {
    if (durationValue === undefined) {
      return undefined;
    }
    return (0, _DateFormatUtils.formatDuration)(durationValue, locale, dateStyle, String(value || children));
  }, [children, durationValue, locale, value]);
  const durationFormatted = (0, _react.useMemo)(() => {
    return getDuration(dateStyle);
  }, [dateStyle, getDuration]);
  const durationFormattedFull = (0, _react.useMemo)(() => {
    return getDuration('full');
  }, [getDuration]);
  const attributes = (0, _SpacingUtils.useSpacing)(props, {
    className: (0, _clsx.default)('dnb-date-format', (0, _SkeletonHelper.createSkeletonClass)('font', skeleton, context)),
    lang: locale
  });
  (0, _SkeletonHelper.skeletonDOMAttributes)(attributes, skeleton, context);
  const getAbsoluteDateTime = (0, _react.useCallback)((style = 'yyyy-MM-dd') => {
    if (!date || isNaN(date.getTime())) {
      return undefined;
    }
    return (0, _dateFns.format)(date, style);
  }, [date]);
  const getAbsoluteDateFormatted = (0, _react.useCallback)(({
    options = {
      dateStyle,
      ...(timeStyle ? {
        timeStyle
      } : {})
    },
    hideYear: hideYearOverride,
    hideCurrentYear: hideCurrentYearOverride
  } = {}) => {
    if (!date || isNaN(date.getTime())) {
      return undefined;
    }
    const originalValue = value !== undefined ? value : children !== undefined ? (0, _componentHelper.convertJsxToString)(children) : date;
    if (options !== null && options !== void 0 && options.timeStyle) {
      const formattedDate = (0, _DateFormatUtils.formatDate)(originalValue, {
        locale,
        options: {
          dateStyle: options.dateStyle
        },
        hideCurrentYear: hideCurrentYearOverride !== undefined ? hideCurrentYearOverride : hideCurrentYear,
        hideYear: hideYearOverride !== undefined ? hideYearOverride : hideYear
      });
      const formattedTime = (0, _DateFormatUtils.formatDate)(originalValue, {
        locale,
        options: {
          timeStyle: options.timeStyle
        }
      });
      const separator = dateTimeSeparator !== undefined ? dateTimeSeparator : (0, _DateFormatUtils.getDateTimeSeparator)(locale, options.dateStyle, options.timeStyle);
      return `${formattedDate}${separator}${formattedTime}`;
    }
    return (0, _DateFormatUtils.formatDate)(originalValue, {
      locale,
      options,
      hideCurrentYear: hideCurrentYearOverride !== undefined ? hideCurrentYearOverride : hideCurrentYear,
      hideYear: hideYearOverride !== undefined ? hideYearOverride : hideYear
    });
  }, [date, locale, dateStyle, timeStyle, dateTimeSeparator, hideCurrentYear, hideYear, value, children]);
  const [label, setLabel] = (0, _react.useState)(() => {
    return relativeTime && date ? (0, _DateFormatUtils.getRelativeTime)(date, locale, undefined, relativeTimeStyle || dateStyle, relativeTimeReference) : undefined;
  });
  (0, _react.useEffect)(() => {
    if (!relativeTime || !date) {
      return undefined;
    }
    let timeoutId;
    const scheduleNextUpdate = () => {
      const delay = (0, _DateFormatUtils.getRelativeTimeNextUpdateMs)(date, relativeTimeReference);
      timeoutId = setTimeout(() => {
        const next = (0, _DateFormatUtils.getRelativeTime)(date, locale, undefined, relativeTimeStyle || dateStyle, relativeTimeReference);
        setLabel(prev => prev !== next ? next : prev);
        scheduleNextUpdate();
      }, delay);
    };
    setLabel((0, _DateFormatUtils.getRelativeTime)(date, locale, undefined, relativeTimeStyle || dateStyle, relativeTimeReference));
    scheduleNextUpdate();
    return () => {
      clearTimeout(timeoutId);
    };
  }, [date, locale, relativeTime, dateStyle, relativeTimeStyle, relativeTimeReference]);
  const hasValidDate = date && !isNaN(date.getTime());
  const tooltipContent = (0, _react.useMemo)(() => {
    if (!hasValidDate) {
      return undefined;
    }
    return getAbsoluteDateFormatted({
      options: {
        dateStyle: 'full',
        ...(timeStyle ? {
          timeStyle
        } : {})
      },
      hideYear: false,
      hideCurrentYear: false
    });
  }, [hasValidDate, getAbsoluteDateFormatted, timeStyle]);
  if (durationValue !== undefined) {
    const originalDurationString = String(value || children);
    const hasAriaLabel = durationFormattedFull !== durationFormatted;
    const showTooltip = durationFormattedFull !== durationFormatted;
    return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
      children: [(0, _jsxRuntime.jsx)("time", {
        ...attributes,
        dateTime: originalDurationString,
        "aria-label": hasAriaLabel ? durationFormattedFull : undefined,
        ref: showTooltip ? ref : undefined,
        children: (0, _jsxRuntime.jsx)("span", {
          "aria-hidden": hasAriaLabel,
          children: durationFormatted
        })
      }), showTooltip && (0, _jsxRuntime.jsx)(_Tooltip.default, {
        targetElement: ref,
        tooltip: durationFormattedFull,
        triggerOffset: 8
      })]
    });
  }
  if (!hasValidDate) {
    return (0, _jsxRuntime.jsx)("span", {
      className: "dnb-date-format",
      children: invalidDate.replace('{value}', getInvalidValue({
        value,
        children
      }))
    });
  }
  if (relativeTime) {
    const relativeTooltip = getAbsoluteDateFormatted({
      options: {
        dateStyle: 'full',
        timeStyle: timeStyle || 'short'
      },
      hideYear: false,
      hideCurrentYear: false
    });
    return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
      children: [(0, _jsxRuntime.jsx)("time", {
        dateTime: getAbsoluteDateTime('yyyy-MM-dd HH:mm:ss'),
        ...attributes,
        ref: ref,
        children: label
      }), (0, _jsxRuntime.jsx)(_Tooltip.default, {
        targetElement: ref,
        tooltip: relativeTooltip,
        triggerOffset: 8
      })]
    });
  }
  const displayedContent = getAbsoluteDateFormatted();
  const showTooltip = tooltipContent && tooltipContent !== displayedContent;
  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [(0, _jsxRuntime.jsx)("time", {
      dateTime: getAbsoluteDateTime(),
      ...attributes,
      ref: showTooltip ? ref : undefined,
      children: displayedContent
    }), showTooltip && (0, _jsxRuntime.jsx)(_Tooltip.default, {
      targetElement: ref,
      tooltip: tooltipContent,
      triggerOffset: 8
    })]
  });
}
function getDate({
  value,
  children
}) {
  if (value) {
    if (typeof value === 'string' && (0, _DateFormatUtils.isValidDuration)(value)) {
      return undefined;
    }
    if (typeof value === 'string') {
      return (0, _DatePickerCalc.convertStringToDate)(value);
    }
    if (value instanceof Date) {
      return value;
    }
    return (0, _DatePickerCalc.convertStringToDate)(String(value));
  }
  const childrenValue = (0, _componentHelper.convertJsxToString)(children);
  if (childrenValue && (0, _DateFormatUtils.isValidDuration)(childrenValue)) {
    return undefined;
  }
  return (0, _DatePickerCalc.convertStringToDate)(childrenValue);
}
function getInvalidValue({
  value,
  children
}) {
  if (value instanceof Date) {
    return value.toString();
  }
  if (children !== undefined && value === undefined) {
    return String(children);
  }
  return String(value);
}
var _default = exports.default = DateFormat;
(0, _withComponentMarkers.default)(DateFormat, {
  _supportsSpacingProps: true
});
//# sourceMappingURL=DateFormat.js.map