package.src.components.Timestamp.Timestamp.tsx Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of react-core Show documentation
This library provides a set of common React components for use with the PatternFly reference implementation.
The newest version!
import * as React from 'react';
import styles from '@patternfly/react-styles/css/components/Timestamp/timestamp';
import { css } from '@patternfly/react-styles';
import { Tooltip } from '../Tooltip';
import { isValidDate } from '../../helpers/datetimeUtils';

export enum TimestampFormat {
  full = 'full',
  long = 'long',
  medium = 'medium',
  short = 'short'
}

export enum TimestampTooltipVariant {
  default = 'default',
  custom = 'custom'
}

export interface TimestampTooltip {
  /** The variant of the tooltip. The "default" variant displays the date passed into
   * the timestamp's date prop as a UTC string.
   */
  variant: 'default' | 'custom';
  /** Content displayed in the tooltip when using the "custom" variant. */
  content?: React.ReactNode;
  /** Additional props passed to the tooltip. */
  tooltipProps?: any;
  /** A custom suffix to apply to a "default" variant tooltip. */
  suffix?: string;
}

export interface TimestampProps extends React.HTMLProps {
  /** Displays custom content inside the timestamp, such as a relative time. This prop will
   * override the default content that is displayed. Custom content will not be affected by
   * any props that format or add to displayed content.
   */
  children?: React.ReactNode;
  /** Class to add to the outer span. */
  className?: string;
  /** Applies custom formatting to the displayed date and/or time. Passing this prop in will
   * override the dateFormat and timeFormat props.
   */
  customFormat?: { [key: string]: string };
  /** Determines the default content that is displayed inside the timestamp and the value of
   * the inner time element's datetime attribute. */
  date?: Date;
  /** Determines the format of the displayed date in the timestamp and UTC tooltip. Examples:
   * "Full" => Tuesday, August 9, 2022;
   * "Long" => August 9, 2022;
   * "Medium" => Aug 9, 2022;
   * "Short" => 8/9/22
   */
  dateFormat?: 'full' | 'long' | 'medium' | 'short';
  /** Applies a custom suffix to the displayed content, usually after the time, such as a
   * custom time zone.
   */
  displaySuffix?: string;
  /** Flag for displaying the time in a 12 hour format. If this prop is not passed in,
   * the hour format will be based on the locale prop's value.
   */
  is12Hour?: boolean;
  /** Determines which locale to use in the displayed content. Defaults to the current locale
   * when this prop is not passed in. For more information about locale's:
   * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation
   */
  locale?: string;
  /** Flag indicating whether the default content should be displayed as a UTC string
   * instead of a local string.
   */
  shouldDisplayUTC?: boolean;
  /** Determines the format of the displayed time in the timestamp and UTC tooltip. Examples:
   * "Full" => 11:25:00 AM Eastern Daylight Time
   * "Long" => 11:25:00 AM EDT
   * "Medium" => 11:25:00 AM
   * "Short" => 11:25 AM
   */
  timeFormat?: 'full' | 'long' | 'medium' | 'short';
  /** Adds a tooltip to the timestamp. */
  tooltip?: TimestampTooltip;
}

export const Timestamp: React.FunctionComponent = ({
  children,
  className,
  customFormat,
  date: dateProp,
  dateFormat,
  displaySuffix = '',
  is12Hour,
  locale,
  shouldDisplayUTC,
  timeFormat,
  tooltip,
  ...props
}: TimestampProps) => {
  const [date, setDate] = React.useState(() => {
    const initDate = new Date(dateProp);
    if (isValidDate(initDate)) {
      return initDate;
    }

    return new Date();
  });

  React.useEffect(() => {
    const dateFromProp = new Date(dateProp);
    if (isValidDate(dateFromProp) && dateFromProp.toString() !== new Date(date).toString()) {
      setDate(dateFromProp);
    } else if (!dateProp) {
      setDate(new Date());
    }
  }, [dateProp]);

  const hasTimeFormat = timeFormat && !customFormat;
  const formatOptions = {
    ...(dateFormat && !customFormat && { dateStyle: dateFormat }),
    ...(customFormat && { ...customFormat }),
    ...(is12Hour !== undefined && { hour12: is12Hour })
  };

  const dateAsLocaleString = new Date(date).toLocaleString(locale, {
    ...formatOptions,
    ...(hasTimeFormat && { timeStyle: timeFormat })
  });

  const utcTimeFormat = timeFormat !== 'short' ? 'medium' : 'short';
  const convertToUTCString = (date: Date) => new Date(date).toUTCString().slice(0, -3);
  const utcDateString = new Date(convertToUTCString(date)).toLocaleString(locale, {
    ...formatOptions,
    ...(hasTimeFormat && { timeStyle: utcTimeFormat })
  });
  const defaultUTCSuffix = timeFormat === 'full' ? 'Coordinated Universal Time' : 'UTC';
  const createUTCContent = (customSuffix: string) =>
    `${utcDateString} ${customSuffix ? customSuffix : defaultUTCSuffix}`;

  const defaultDisplay = shouldDisplayUTC
    ? createUTCContent(displaySuffix)
    : `${dateAsLocaleString}${displaySuffix ? ' ' + displaySuffix : ''}`;
  const { dateTime, ...propsWithoutDateTime } = props;

  const timestamp = (
    
      
        {!children ? defaultDisplay : children}
      
    
  );

  return tooltip ? (
    
      {timestamp}
    
  ) : (
    timestamp
  );
};
Timestamp.displayName = 'Timestamp';