import React from "react"; import classnames from "classnames"; import { globalProps } from "../utilities/globalProps"; import { buildCss, buildDataProps, buildHtmlProps } from "../utilities/props"; import DateTime from '../pb_kit/dateTime'; import Body from "../pb_body/_body"; import Caption from "../pb_caption/_caption"; import Icon from "../pb_icon/_icon"; type DateRangeInlineProps = { align?: "left" | "center" | "vertical"; className?: string; dark?: boolean; data?: string; endDate?: Date; htmlOptions?: { [key: string]: string | number | boolean | (() => any) }; icon?: boolean; id?: string; size?: "sm" | "xs"; startDate?: Date; }; const dateTimestamp = (dateValue: Date, includeYear: boolean) => { if (includeYear) { return `${DateTime.toMonth(dateValue)} ${DateTime.toDay(dateValue)}, ${DateTime.toYear(dateValue)}`; } else { return `${DateTime.toMonth(dateValue)} ${DateTime.toDay(dateValue)}`; } }; const dateTimeIso = (dateValue: Date) => { return DateTime.toIso(dateValue); }; const DateRangeInline = (props: DateRangeInlineProps): React.ReactElement => { const { align = "left", className, dark = false, data = {}, endDate, htmlOptions = {}, icon = false, size = "sm", startDate, } = props; const dateInCurrentYear = () => { const currentDate = new Date(); return ( startDate?.getFullYear() === endDate?.getFullYear() && startDate?.getFullYear() === currentDate.getFullYear() ); }; const dateRangeClasses = buildCss("pb_date_range_inline_kit", align); const dataProps = buildDataProps(data); const htmlProps = buildHtmlProps(htmlOptions); const renderTime = (date: Date) => { return ( {dateInCurrentYear() ? ( ` ${dateTimestamp(date, false)} ` ) : ( ` ${dateTimestamp(date, true)} ` )} ); }; return (

{size === "xs" && ( <> {icon && ( )} {renderTime(startDate)} {renderTime(endDate)} )} {size === "sm" && ( <> {icon && ( )} {renderTime(startDate)} {renderTime(endDate)} )}

); }; export default DateRangeInline;