UNPKG

@patternfly/react-core

Version:

This library provides a set of common React components for use with the PatternFly reference implementation.

54 lines 3.65 kB
import { __rest } from "tslib"; import { jsx as _jsx } from "react/jsx-runtime"; import { useEffect, useState } from 'react'; import styles from '@patternfly/react-styles/css/components/Timestamp/timestamp.mjs'; import { css } from '@patternfly/react-styles'; import { Tooltip } from '../Tooltip'; import { isValidDate } from '../../helpers/datetimeUtils'; export var TimestampFormat; (function (TimestampFormat) { TimestampFormat["full"] = "full"; TimestampFormat["long"] = "long"; TimestampFormat["medium"] = "medium"; TimestampFormat["short"] = "short"; })(TimestampFormat || (TimestampFormat = {})); export var TimestampTooltipVariant; (function (TimestampTooltipVariant) { TimestampTooltipVariant["default"] = "default"; TimestampTooltipVariant["custom"] = "custom"; })(TimestampTooltipVariant || (TimestampTooltipVariant = {})); export const Timestamp = (_a) => { var { children, className, customFormat, date: dateProp, dateFormat, displaySuffix = '', is12Hour, locale, shouldDisplayUTC, timeFormat, tooltip } = _a, props = __rest(_a, ["children", "className", "customFormat", "date", "dateFormat", "displaySuffix", "is12Hour", "locale", "shouldDisplayUTC", "timeFormat", "tooltip"]); const [date, setDate] = useState(() => { const initDate = new Date(dateProp); if (isValidDate(initDate)) { return initDate; } return new Date(); }); 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 = Object.assign(Object.assign(Object.assign({}, (dateFormat && !customFormat && { dateStyle: dateFormat })), (customFormat && Object.assign({}, customFormat))), (is12Hour !== undefined && { hour12: is12Hour })); const dateAsLocaleString = new Date(date).toLocaleString(locale, Object.assign(Object.assign({}, formatOptions), (hasTimeFormat && { timeStyle: timeFormat }))); const utcTimeFormat = timeFormat !== 'short' ? 'medium' : 'short'; const convertToUTCString = (date) => new Date(date).toUTCString().slice(0, -3); const utcDateString = new Date(convertToUTCString(date)).toLocaleString(locale, Object.assign(Object.assign({}, formatOptions), (hasTimeFormat && { timeStyle: utcTimeFormat }))); const defaultUTCSuffix = timeFormat === 'full' ? 'Coordinated Universal Time' : 'UTC'; const createUTCContent = (customSuffix) => `${utcDateString} ${customSuffix ? customSuffix : defaultUTCSuffix}`; const defaultDisplay = shouldDisplayUTC ? createUTCContent(displaySuffix) : `${dateAsLocaleString}${displaySuffix ? ' ' + displaySuffix : ''}`; const { dateTime } = props, propsWithoutDateTime = __rest(props, ["dateTime"]); const timestamp = (_jsx("span", Object.assign({ className: css(styles.timestamp, tooltip && styles.modifiers.helpText, className) }, (tooltip && { tabIndex: 0 }), propsWithoutDateTime, { children: _jsx("time", { className: `${styles.timestamp}__text`, dateTime: dateTime || new Date(date).toISOString(), children: !children ? defaultDisplay : children }) }))); return tooltip ? (_jsx(Tooltip, Object.assign({ content: tooltip.variant === TimestampTooltipVariant.default ? createUTCContent(tooltip.suffix) : tooltip.content }, tooltip.tooltipProps, { children: timestamp }))) : (timestamp); }; Timestamp.displayName = 'Timestamp'; //# sourceMappingURL=Timestamp.js.map