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

DNB Eufemia Design System UI Library

"use client";

import _extends from "@babel/runtime/helpers/esm/extends";
import "core-js/modules/es.string.replace.js";
import React, { useContext, useMemo } from 'react';
import SharedContext from '../../shared/Context';
import { convertJsxToString } from '../../shared/component-helper';
import { convertStringToDate } from '../date-picker/DatePickerCalc';
import { formatDate } from './DateFormatUtils';
import { format } from 'date-fns';
import classnames from 'classnames';
import { createSpacingClasses } from '../space/SpacingUtils';
import { createSkeletonClass, skeletonDOMAttributes } from '../skeleton/SkeletonHelper';
import { useTranslation } from '../../shared';
function DateFormat(props) {
  const context = useContext(SharedContext);
  const {
    invalidDate
  } = useTranslation().DateFormat;
  const {
    value,
    locale = context.locale,
    dateStyle = 'long',
    children,
    skeleton
  } = props;
  const date = useMemo(() => getDate({
    value,
    children
  }), [value, children]);
  const attributes = {};
  skeletonDOMAttributes(attributes, skeleton, context);
  if (!date) {
    return React.createElement("span", {
      className: "dnb-date-format"
    }, invalidDate.replace('{value}', getInvalidValue({
      value,
      children
    })));
  }
  return React.createElement("time", _extends({
    className: classnames('dnb-date-format', createSpacingClasses(props), createSkeletonClass('font', skeleton, context)),
    lang: locale,
    dateTime: format(date, 'yyyy-MM-dd')
  }, attributes), formatDate(date, {
    locale,
    options: {
      dateStyle
    }
  }));
}
function getDate(_ref) {
  let {
    value,
    children
  } = _ref;
  if (value) {
    return convertStringToDate(value);
  }
  return convertStringToDate(convertJsxToString(children));
}
function getInvalidValue(_ref2) {
  let {
    value,
    children
  } = _ref2;
  if (value instanceof Date) {
    return value.toString();
  }
  if (children !== undefined && value === undefined) {
    return String(children);
  }
  return value;
}
export default DateFormat;
DateFormat._supportsSpacingProps = true;
//# sourceMappingURL=DateFormat.js.map