@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
250 lines (249 loc) • 10.1 kB
JavaScript
;
"use client";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(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 _classnames = _interopRequireDefault(require("classnames"));
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");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
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)();
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;
}
return (0, _DateFormatUtils.parseDuration)(durationString);
}, [value, children]);
const getDuration = (0, _react.useCallback)(dateStyle => {
if (durationValue === undefined) {
return;
}
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, _react.useMemo)(() => {
const attrs = {
className: (0, _classnames.default)('dnb-date-format', (0, _SpacingUtils.createSpacingClasses)(props), (0, _SkeletonHelper.createSkeletonClass)('font', skeleton, context)),
lang: locale
};
(0, _SkeletonHelper.skeletonDOMAttributes)(attrs, skeleton, context);
return attrs;
}, [props, skeleton, context, locale]);
const getAbsoluteDateTime = (0, _react.useCallback)((style = 'yyyy-MM-dd') => {
if (!date || isNaN(date.getTime())) {
return;
}
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;
}
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;
}
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 _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("time", _extends({}, attributes, {
dateTime: originalDurationString,
"aria-label": hasAriaLabel ? durationFormattedFull : undefined,
ref: showTooltip ? ref : undefined
}), _react.default.createElement("span", {
"aria-hidden": hasAriaLabel
}, durationFormatted)), showTooltip && _react.default.createElement(_Tooltip.default, {
targetElement: ref,
tooltip: durationFormattedFull,
triggerOffset: 8
}));
}
if (!hasValidDate) {
return _react.default.createElement("span", {
className: "dnb-date-format"
}, invalidDate.replace('{value}', getInvalidValue({
value,
children
})));
}
if (relativeTime) {
const relativeTooltip = getAbsoluteDateFormatted({
options: {
dateStyle: 'full',
timeStyle: timeStyle || 'short'
},
hideYear: false,
hideCurrentYear: false
});
return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("time", _extends({
dateTime: getAbsoluteDateTime('yyyy-MM-dd HH:mm:ss')
}, attributes, {
ref: ref
}), label), _react.default.createElement(_Tooltip.default, {
targetElement: ref,
tooltip: relativeTooltip,
triggerOffset: 8
}));
}
const displayedContent = getAbsoluteDateFormatted();
const showTooltip = tooltipContent && tooltipContent !== displayedContent;
return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("time", _extends({
dateTime: getAbsoluteDateTime()
}, attributes, {
ref: showTooltip ? ref : undefined
}), displayedContent), showTooltip && _react.default.createElement(_Tooltip.default, {
targetElement: ref,
tooltip: tooltipContent,
triggerOffset: 8
}));
}
function getDate({
value,
children
}) {
if (value) {
if (typeof value === 'string' && (0, _DateFormatUtils.isValidDuration)(value)) {
return;
}
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;
}
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;
DateFormat._supportsSpacingProps = true;
//# sourceMappingURL=DateFormat.js.map