box-ui-elements/src/elements/common/date/DateField.js.flow

Box UI Elements

import * as React from 'react';
import { FormattedMessage, useIntl} from 'react-intl';
import { isToday, isYesterday } from '../../../utils/datetime';
import messages from '../messages';
import './DateField.scss';

type Props = {
    capitalize?: boolean,
    date: string,
    dateFormat?: any,
    omitCommas?: boolean,
    relative?: boolean
};

const DEFAULT_DATE_FORMAT = {
    weekday: 'short',
    month: 'short',
    year: 'numeric',
    day: 'numeric',
};

const DateField = ({
    date,
    dateFormat = DEFAULT_DATE_FORMAT,
    omitCommas = false,
    relative = true,
    capitalize = false,
}: Props) => {
    const { formatDate } = useIntl();
    const d = new Date(date);
    const isTodaysDate = isToday(d);
    const isYesterdaysDate = isYesterday(d);

    if (relative && (isTodaysDate || isYesterdaysDate)) {
        let Message = <FormattedMessage {...messages.today} />;
        if (isYesterdaysDate) {
            Message = <FormattedMessage {...messages.yesterday} />;
        }

        if (capitalize) {
            return <span className="be-date-capitalize">{Message}</span>;
        }

        return Message;
    }

    let formattedDate = formatDate(d, dateFormat);
    formattedDate = omitCommas ? formattedDate.replace(/,/g, '') : formattedDate;
    return formattedDate;
};

export default DateField;