import React from "react"; import classnames from "classnames"; import { globalProps } from "../utilities/globalProps"; import { buildCss, buildDataProps } 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 = { className?: string; id?: string; data?: string; align?: "left" | "center" | "vertical"; size?: "sm" | "xs"; dark?: boolean; icon?: boolean; startDate?: Date; endDate?: 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) => { const { icon = false, dark = false, size = "sm", align = "left", data = {}, startDate, endDate, className, } = props; const iconContent = () => { return ( <> {icon && ( <> )} ); }; 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 renderTime = (date: Date) => { return ( {dateInCurrentYear() ? ( <>{` ${dateTimestamp(date, false)} `} ) : ( <>{` ${dateTimestamp(date, true)} `} )} ); }; return (

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

); }; export default DateRangeInline;