@financial-times/spark-o-date/index.js

Spark React component library for Origami

import React, { useEffect, useRef } from 'react';
import PropTypes from 'prop-types';
import {
	Date as DateTime,
	DatePrinter,
} from '@financial-times/o-date/src/tsx/date.tsx';
import oDate from '@financial-times/o-date';
// Date should be renamed to DateTime so it doesn't clash with the native Date object
DateTimeWrapper.defaultProps = {};

DateTimeWrapper.propTypes = {
	dateTime: PropTypes.string,
	format: PropTypes.oneOfType([
		PropTypes.oneOf([
			'today-or-yesterday-or-nothing',
			'date-only',
			'time-ago-limit-4-hours',
			'time-ago-limit-24-hours',
			'time-ago-abbreviated',
			'time-ago-abbreviated-limit-4-hours',
			'time-ago-no-seconds',
		]),
		PropTypes.string,
		PropTypes.object,
	]),
	children: PropTypes.node,
};

function DateTimeWrapper(props) {
	const ref = useRef();
	useEffect(() => {
		const outerElement = ref.current;

		if (outerElement) {
			const dateElement = outerElement.querySelector(
				'[data-o-component=o-date]'
			);
			new oDate(dateElement);
		}
	}, [ref.current]);
	return (
		<span ref={ref}>
			<DateTime {...props} />
		</span>
	);
}

DatePrinterWrapper.defaultProps = {};

DatePrinterWrapper.propTypes = {
	format: PropTypes.oneOfType([
		PropTypes.oneOf([
			'today-or-yesterday-or-nothing',
			'date-only',
			'time-ago-limit-4-hours',
			'time-ago-limit-24-hours',
			'time-ago-abbreviated',
			'time-ago-abbreviated-limit-4-hours',
			'time-ago-no-seconds',
		]),
		PropTypes.string,
		PropTypes.object,
	]),
	children: PropTypes.node,
};

function DatePrinterWrapper(props) {
	return <DatePrinter {...props} />;
}

export { DateTimeWrapper as DateTime, DatePrinterWrapper as DatePrinter };