@helpwave/hightide
Version:
helpwave's component and theming library
801 lines (785 loc) • 27.2 kB
JavaScript
// src/components/user-input/DateAndTimePicker.tsx
import clsx7 from "clsx";
// src/hooks/useLanguage.tsx
import { createContext, useContext, useEffect as useEffect2, useState as useState2 } from "react";
// src/hooks/useLocalStorage.tsx
import { useCallback, useEffect, useState } from "react";
// src/hooks/useLanguage.tsx
import { jsx } from "react/jsx-runtime";
var DEFAULT_LANGUAGE = "en";
var LanguageContext = createContext({ language: DEFAULT_LANGUAGE, setLanguage: (v) => v });
var useLanguage = () => useContext(LanguageContext);
var useLocale = (overWriteLanguage) => {
const { language } = useLanguage();
const mapping = {
en: "en-US",
de: "de-DE"
};
return mapping[overWriteLanguage ?? language];
};
// src/hooks/useTranslation.ts
var useTranslation = (defaults, translationOverwrite = {}) => {
const { language: languageProp, translation: overwrite } = translationOverwrite;
const { language: inferredLanguage } = useLanguage();
const usedLanguage = languageProp ?? inferredLanguage;
let defaultValues = defaults[usedLanguage];
if (overwrite && overwrite[usedLanguage]) {
defaultValues = { ...defaultValues, ...overwrite[usedLanguage] };
}
return defaultValues;
};
// src/util/noop.ts
var noop = () => void 0;
// src/util/array.ts
var equalSizeGroups = (array, groupSize) => {
if (groupSize <= 0) {
console.warn(`group size should be greater than 0: groupSize = ${groupSize}`);
return [[...array]];
}
const groups = [];
for (let i = 0; i < array.length; i += groupSize) {
groups.push(array.slice(i, Math.min(i + groupSize, array.length)));
}
return groups;
};
var range = (start, end, allowEmptyRange = false) => {
if (end < start) {
if (!allowEmptyRange) {
console.warn(`range: end (${end}) < start (${start}) should be allowed explicitly, set allowEmptyRange to true`);
}
return [];
}
return Array.from({ length: end - start + 1 }, (_, index) => index + start);
};
var closestMatch = (list, firstCloser) => {
return list.reduce((item1, item2) => {
return firstCloser(item1, item2) ? item1 : item2;
});
};
// src/util/date.ts
var monthsList = ["january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december"];
var weekDayList = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"];
var changeDuration = (date, duration, isAdding) => {
const {
years = 0,
months = 0,
days = 0,
hours = 0,
minutes = 0,
seconds = 0,
milliseconds = 0
} = duration;
if (years < 0) {
console.error(`Range error years must be greater than 0: received ${years}`);
return new Date(date);
}
if (months < 0 || months > 11) {
console.error(`Range error month must be 0 <= month <= 11: received ${months}`);
return new Date(date);
}
if (days < 0) {
console.error(`Range error days must be greater than 0: received ${days}`);
return new Date(date);
}
if (hours < 0 || hours > 23) {
console.error(`Range error hours must be 0 <= hours <= 23: received ${hours}`);
return new Date(date);
}
if (minutes < 0 || minutes > 59) {
console.error(`Range error minutes must be 0 <= minutes <= 59: received ${minutes}`);
return new Date(date);
}
if (seconds < 0 || seconds > 59) {
console.error(`Range error seconds must be 0 <= seconds <= 59: received ${seconds}`);
return new Date(date);
}
if (milliseconds < 0) {
console.error(`Range error seconds must be greater than 0: received ${milliseconds}`);
return new Date(date);
}
const multiplier = isAdding ? 1 : -1;
const newDate = new Date(date);
newDate.setFullYear(newDate.getFullYear() + multiplier * years);
newDate.setMonth(newDate.getMonth() + multiplier * months);
newDate.setDate(newDate.getDate() + multiplier * days);
newDate.setHours(newDate.getHours() + multiplier * hours);
newDate.setMinutes(newDate.getMinutes() + multiplier * minutes);
newDate.setSeconds(newDate.getSeconds() + multiplier * seconds);
newDate.setMilliseconds(newDate.getMilliseconds() + multiplier * milliseconds);
return newDate;
};
var addDuration = (date, duration) => {
return changeDuration(date, duration, true);
};
var subtractDuration = (date, duration) => {
return changeDuration(date, duration, false);
};
var isInTimeSpan = (value, startDate, endDate) => {
if (startDate && endDate) {
console.assert(startDate <= endDate);
return startDate <= value && value <= endDate;
} else if (startDate) {
return startDate <= value;
} else if (endDate) {
return endDate >= value;
} else {
return true;
}
};
var equalDate = (date1, date2) => {
return date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth() && date1.getDate() === date2.getDate();
};
var getWeeksForCalenderMonth = (date, weekStart, weeks = 6) => {
const month = date.getMonth();
const year = date.getFullYear();
const dayList = [];
let currentDate = new Date(year, month, 1);
const weekStartIndex = weekDayList.indexOf(weekStart);
while (currentDate.getDay() !== weekStartIndex) {
currentDate = subtractDuration(currentDate, { days: 1 });
}
while (dayList.length < 7 * weeks) {
const date2 = new Date(currentDate);
date2.setHours(date2.getHours(), date2.getMinutes());
dayList.push(date2);
currentDate = addDuration(currentDate, { days: 1 });
}
return equalSizeGroups(dayList, 7);
};
// src/components/Button.tsx
import clsx from "clsx";
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
var ButtonSizePaddings = {
small: "btn-sm",
medium: "btn-md",
large: "btn-lg"
};
var SolidButton = ({
children,
disabled = false,
color = "primary",
size = "medium",
startIcon,
endIcon,
onClick,
className,
...restProps
}) => {
const colorClasses = {
primary: "bg-button-solid-primary-background text-button-solid-primary-text",
secondary: "bg-button-solid-secondary-background text-button-solid-secondary-text",
tertiary: "bg-button-solid-tertiary-background text-button-solid-tertiary-text",
positive: "bg-button-solid-positive-background text-button-solid-positive-text",
warning: "bg-button-solid-warning-background text-button-solid-warning-text",
negative: "bg-button-solid-negative-background text-button-solid-negative-text"
}[color];
const iconColorClasses = {
primary: "text-button-solid-primary-icon",
secondary: "text-button-solid-secondary-icon",
tertiary: "text-button-solid-tertiary-icon",
positive: "text-button-solid-positive-icon",
warning: "text-button-solid-warning-icon",
negative: "text-button-solid-negative-icon"
}[color];
return /* @__PURE__ */ jsxs(
"button",
{
onClick: disabled ? void 0 : onClick,
disabled: disabled || onClick === void 0,
className: clsx(
className,
{
"text-disabled-text bg-disabled-background": disabled,
[clsx(colorClasses, "hover:brightness-90")]: !disabled
},
ButtonSizePaddings[size]
),
...restProps,
children: [
startIcon && /* @__PURE__ */ jsx2(
"span",
{
className: clsx({
[iconColorClasses]: !disabled,
[`text-disabled-icon`]: disabled
}),
children: startIcon
}
),
children,
endIcon && /* @__PURE__ */ jsx2(
"span",
{
className: clsx({
[iconColorClasses]: !disabled,
[`text-disabled-icon`]: disabled
}),
children: endIcon
}
)
]
}
);
};
var TextButton = ({
children,
disabled = false,
color = "neutral",
size = "medium",
startIcon,
endIcon,
onClick,
className,
...restProps
}) => {
const colorClasses = {
negative: "bg-transparent text-button-text-negative-text",
neutral: "bg-transparent text-button-text-neutral-text"
}[color];
const iconColorClasses = {
negative: "text-button-text-negative-icon",
neutral: "text-button-text-neutral-icon"
}[color];
return /* @__PURE__ */ jsxs(
"button",
{
onClick: disabled ? void 0 : onClick,
disabled: disabled || onClick === void 0,
className: clsx(
className,
{
"text-disabled-text": disabled,
[clsx(colorClasses, "hover:bg-button-text-hover-background rounded-full")]: !disabled
},
ButtonSizePaddings[size]
),
...restProps,
children: [
startIcon && /* @__PURE__ */ jsx2(
"span",
{
className: clsx({
[iconColorClasses]: !disabled,
[`text-disabled-icon`]: disabled
}),
children: startIcon
}
),
children,
endIcon && /* @__PURE__ */ jsx2(
"span",
{
className: clsx({
[iconColorClasses]: !disabled,
[`text-disabled-icon`]: disabled
}),
children: endIcon
}
)
]
}
);
};
// src/components/date/TimePicker.tsx
import { useEffect as useEffect3, useRef, useState as useState3 } from "react";
import { Scrollbars } from "react-custom-scrollbars-2";
import clsx2 from "clsx";
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
var TimePicker = ({
time = /* @__PURE__ */ new Date(),
onChange = noop,
is24HourFormat = true,
minuteIncrement = "5min",
maxHeight = 300,
className = ""
}) => {
const minuteRef = useRef(null);
const hourRef = useRef(null);
const isPM = time.getHours() >= 11;
const hours = is24HourFormat ? range(0, 23) : range(1, 12);
let minutes = range(0, 59);
useEffect3(() => {
const scrollToItem = () => {
if (minuteRef.current) {
const container = minuteRef.current.parentElement;
const hasOverflow = container.scrollHeight > maxHeight;
if (hasOverflow) {
minuteRef.current.scrollIntoView({
behavior: "instant",
block: "nearest"
});
}
}
};
scrollToItem();
}, [minuteRef, minuteRef.current]);
useEffect3(() => {
const scrollToItem = () => {
if (hourRef.current) {
const container = hourRef.current.parentElement;
const hasOverflow = container.scrollHeight > maxHeight;
if (hasOverflow) {
hourRef.current.scrollIntoView({
behavior: "instant",
block: "nearest"
});
}
}
};
scrollToItem();
}, [hourRef, hourRef.current]);
switch (minuteIncrement) {
case "5min":
minutes = minutes.filter((value) => value % 5 === 0);
break;
case "10min":
minutes = minutes.filter((value) => value % 10 === 0);
break;
case "15min":
minutes = minutes.filter((value) => value % 15 === 0);
break;
case "30min":
minutes = minutes.filter((value) => value % 30 === 0);
break;
}
const closestMinute = closestMatch(minutes, (item1, item2) => Math.abs(item1 - time.getMinutes()) < Math.abs(item2 - time.getMinutes()));
const style = (selected) => clsx2(
"chip-full hover:brightness-90 hover:bg-primary hover:text-on-primary rounded-md mr-3",
{ "bg-primary text-on-primary": selected, "bg-white text-black": !selected }
);
const onChangeWrapper = (transformer) => {
const newDate = new Date(time);
transformer(newDate);
onChange(newDate);
};
return /* @__PURE__ */ jsxs2("div", { className: clsx2("row gap-x-2 w-fit min-w-[150px] select-none", className), children: [
/* @__PURE__ */ jsx3(Scrollbars, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ jsx3("div", { className: "col gap-y-1 h-full", children: hours.map((hour) => {
const currentHour = hour === time.getHours() - (!is24HourFormat && isPM ? 12 : 0);
return /* @__PURE__ */ jsx3(
"button",
{
ref: currentHour ? hourRef : void 0,
className: style(currentHour),
onClick: () => onChangeWrapper((newDate) => newDate.setHours(hour + (!is24HourFormat && isPM ? 12 : 0))),
children: hour.toString().padStart(2, "0")
},
hour
);
}) }) }),
/* @__PURE__ */ jsx3(Scrollbars, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ jsx3("div", { className: "col gap-y-1 h-full", children: minutes.map((minute) => {
const currentMinute = minute === closestMinute;
return /* @__PURE__ */ jsx3(
"button",
{
ref: currentMinute ? minuteRef : void 0,
className: style(currentMinute),
onClick: () => onChangeWrapper((newDate) => newDate.setMinutes(minute)),
children: minute.toString().padStart(2, "0")
},
minute + minuteIncrement
);
}) }) }),
!is24HourFormat && /* @__PURE__ */ jsxs2("div", { className: "col gap-y-1", children: [
/* @__PURE__ */ jsx3(
"button",
{
className: style(!isPM),
onClick: () => onChangeWrapper((newDate) => isPM && newDate.setHours(newDate.getHours() - 12)),
children: "AM"
}
),
/* @__PURE__ */ jsx3(
"button",
{
className: style(isPM),
onClick: () => onChangeWrapper((newDate) => !isPM && newDate.setHours(newDate.getHours() + 12)),
children: "PM"
}
)
] })
] });
};
// src/components/date/DatePicker.tsx
import { useEffect as useEffect6, useState as useState7 } from "react";
import { ArrowDown, ArrowUp, ChevronDown as ChevronDown2 } from "lucide-react";
import clsx6 from "clsx";
// src/components/date/YearMonthPicker.tsx
import { useEffect as useEffect4, useRef as useRef2, useState as useState5 } from "react";
import { Scrollbars as Scrollbars2 } from "react-custom-scrollbars-2";
import clsx4 from "clsx";
// src/components/Expandable.tsx
import { forwardRef, useState as useState4 } from "react";
import { ChevronDown, ChevronUp } from "lucide-react";
import clsx3 from "clsx";
import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
var DefaultIcon = (expanded) => expanded ? /* @__PURE__ */ jsx4(ChevronUp, { size: 16, className: "min-w-[16px]" }) : /* @__PURE__ */ jsx4(ChevronDown, { size: 16, className: "min-w-[16px]" });
var Expandable = forwardRef(({
children,
label,
icon,
initialExpansion = false,
clickOnlyOnHeader = true,
className = "",
headerClassName = ""
}, ref) => {
const [isExpanded, setIsExpanded] = useState4(initialExpansion);
icon ??= DefaultIcon;
return /* @__PURE__ */ jsxs3(
"div",
{
ref,
className: clsx3("col bg-surface text-on-surface group rounded-lg shadow-sm", { "cursor-pointer": !clickOnlyOnHeader }, className),
onClick: () => !clickOnlyOnHeader && setIsExpanded(!isExpanded),
children: [
/* @__PURE__ */ jsxs3(
"button",
{
className: clsx3("btn-md rounded-lg justify-between items-center bg-surface text-on-surface", { "group-hover:brightness-95": !isExpanded }, headerClassName),
onClick: () => clickOnlyOnHeader && setIsExpanded(!isExpanded),
children: [
label,
icon(isExpanded)
]
}
),
isExpanded && /* @__PURE__ */ jsx4("div", { className: "col", children })
]
}
);
});
Expandable.displayName = "Expandable";
// src/components/date/YearMonthPicker.tsx
import { jsx as jsx5 } from "react/jsx-runtime";
var YearMonthPicker = ({
displayedYearMonth = /* @__PURE__ */ new Date(),
start = subtractDuration(/* @__PURE__ */ new Date(), { years: 50 }),
end = addDuration(/* @__PURE__ */ new Date(), { years: 50 }),
onChange = noop,
className = "",
maxHeight = 300,
showValueOpen = true
}) => {
const locale = useLocale();
const ref = useRef2(null);
useEffect4(() => {
const scrollToItem = () => {
if (ref.current) {
ref.current.scrollIntoView({
behavior: "instant",
block: "center"
});
}
};
scrollToItem();
}, [ref]);
if (end < start) {
console.error(`startYear: (${start}) less than endYear: (${end})`);
return null;
}
const years = range(start.getFullYear(), end.getFullYear());
return /* @__PURE__ */ jsx5("div", { className: clsx4("col select-none", className), children: /* @__PURE__ */ jsx5(Scrollbars2, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ jsx5("div", { className: "col gap-y-1 mr-3", children: years.map((year) => {
const selectedYear = displayedYearMonth.getFullYear() === year;
return /* @__PURE__ */ jsx5(
Expandable,
{
ref: (displayedYearMonth.getFullYear() ?? (/* @__PURE__ */ new Date()).getFullYear()) === year ? ref : void 0,
label: /* @__PURE__ */ jsx5("span", { className: clsx4({ "text-primary font-bold": selectedYear }), children: year }),
initialExpansion: showValueOpen && selectedYear,
children: /* @__PURE__ */ jsx5("div", { className: "col gap-y-1 px-2 pb-2", children: equalSizeGroups([...monthsList], 3).map((monthList, index) => /* @__PURE__ */ jsx5("div", { className: "row", children: monthList.map((month) => {
const monthIndex = monthsList.indexOf(month);
const newDate = new Date(year, monthIndex);
const selectedMonth = selectedYear && monthIndex === displayedYearMonth.getMonth();
const firstOfMonth = new Date(year, monthIndex, 1);
const lastOfMonth = new Date(year, monthIndex, 1);
const isAfterStart = start === void 0 || start <= addDuration(subtractDuration(lastOfMonth, { days: 1 }), { months: 1 });
const isBeforeEnd = end === void 0 || firstOfMonth <= end;
const isValid = isAfterStart && isBeforeEnd;
return /* @__PURE__ */ jsx5(
"button",
{
disabled: !isValid,
className: clsx4(
"chip hover:brightness-95 flex-1",
{
"bg-gray-50 text-black": !selectedMonth && isValid,
"bg-primary text-on-primary": selectedMonth && isValid,
"bg-disabled-background text-disabled-text": !isValid
}
),
onClick: () => {
onChange(newDate);
},
children: new Intl.DateTimeFormat(locale, { month: "short" }).format(newDate)
},
month
);
}) }, index)) })
},
year
);
}) }) }) });
};
// src/components/date/DayPicker.tsx
import clsx5 from "clsx";
import { useEffect as useEffect5, useState as useState6 } from "react";
import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
var DayPicker = ({
displayedMonth,
selected,
start,
end,
onChange = noop,
weekStart = "monday",
markToday = true,
className = ""
}) => {
const locale = useLocale();
const month = displayedMonth.getMonth();
const weeks = getWeeksForCalenderMonth(displayedMonth, weekStart);
return /* @__PURE__ */ jsxs4("div", { className: clsx5("col gap-y-1 min-w-[220px] select-none", className), children: [
/* @__PURE__ */ jsx6("div", { className: "row text-center", children: weeks[0].map((weekDay, index) => /* @__PURE__ */ jsx6("div", { className: "flex-1 font-semibold", children: new Intl.DateTimeFormat(locale, { weekday: "long" }).format(weekDay).substring(0, 2) }, index)) }),
weeks.map((week, index) => /* @__PURE__ */ jsx6("div", { className: "row text-center", children: week.map((date) => {
const isSelected = !!selected && equalDate(selected, date);
const isToday = equalDate(/* @__PURE__ */ new Date(), date);
const isSameMonth = date.getMonth() === month;
const isDayValid = isInTimeSpan(date, start, end);
return /* @__PURE__ */ jsx6(
"button",
{
disabled: !isDayValid,
className: clsx5(
"flex-1 rounded-full border-2 border-transparent shadow-sm",
{
"text-gray-700 bg-gray-100": !isSameMonth && isDayValid,
"text-black bg-white": !isSelected && isSameMonth && isDayValid,
"text-on-primary bg-primary": isSelected,
"border-black": isToday && markToday,
"hover:brightness-90 hover:bg-primary hover:text-on-primary": isDayValid,
"text-disabled-text bg-disabled-background": !isDayValid
}
),
onClick: () => onChange(date),
children: date.getDate()
},
date.getDate()
);
}) }, index))
] });
};
// src/components/date/DatePicker.tsx
import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
var defaultDatePickerTranslation = {
en: {
today: "Today"
},
de: {
today: "Heute"
}
};
var DatePicker = ({
overwriteTranslation,
value = /* @__PURE__ */ new Date(),
start = subtractDuration(/* @__PURE__ */ new Date(), { years: 50 }),
end = addDuration(/* @__PURE__ */ new Date(), { years: 50 }),
initialDisplay = "day",
onChange = noop,
yearMonthPickerProps,
dayPickerProps,
className = ""
}) => {
const locale = useLocale();
const translation = useTranslation(defaultDatePickerTranslation, overwriteTranslation);
const [displayedMonth, setDisplayedMonth] = useState7(value);
const [displayMode, setDisplayMode] = useState7(initialDisplay);
useEffect6(() => {
setDisplayedMonth(value);
}, [value]);
return /* @__PURE__ */ jsxs5("div", { className: clsx6("col gap-y-4", className), children: [
/* @__PURE__ */ jsxs5("div", { className: "row items-center justify-between h-7", children: [
/* @__PURE__ */ jsxs5(
TextButton,
{
className: clsx6("row gap-x-1 items-center cursor-pointer select-none", {
"text-disabled-text": displayMode !== "day"
}),
onClick: () => setDisplayMode(displayMode === "day" ? "yearMonth" : "day"),
children: [
`${new Intl.DateTimeFormat(locale, { month: "long" }).format(displayedMonth)} ${displayedMonth.getFullYear()}`,
/* @__PURE__ */ jsx7(ChevronDown2, { size: 16 })
]
}
),
displayMode === "day" && /* @__PURE__ */ jsxs5("div", { className: "row justify-end", children: [
/* @__PURE__ */ jsx7(
SolidButton,
{
size: "small",
color: "primary",
disabled: !isInTimeSpan(subtractDuration(displayedMonth, { months: 1 }), start, end),
onClick: () => {
setDisplayedMonth(subtractDuration(displayedMonth, { months: 1 }));
},
children: /* @__PURE__ */ jsx7(ArrowUp, { size: 20 })
}
),
/* @__PURE__ */ jsx7(
SolidButton,
{
size: "small",
color: "primary",
disabled: !isInTimeSpan(addDuration(displayedMonth, { months: 1 }), start, end),
onClick: () => {
setDisplayedMonth(addDuration(displayedMonth, { months: 1 }));
},
children: /* @__PURE__ */ jsx7(ArrowDown, { size: 20 })
}
)
] })
] }),
displayMode === "yearMonth" ? /* @__PURE__ */ jsx7(
YearMonthPicker,
{
...yearMonthPickerProps,
displayedYearMonth: value,
start,
end,
onChange: (newDate) => {
setDisplayedMonth(newDate);
setDisplayMode("day");
}
}
) : /* @__PURE__ */ jsxs5("div", { children: [
/* @__PURE__ */ jsx7(
DayPicker,
{
...dayPickerProps,
displayedMonth,
start,
end,
selected: value,
onChange: (date) => {
onChange(date);
}
}
),
/* @__PURE__ */ jsx7("div", { className: "mt-2", children: /* @__PURE__ */ jsx7(
TextButton,
{
onClick: () => {
const newDate = /* @__PURE__ */ new Date();
newDate.setHours(value.getHours(), value.getMinutes());
onChange(newDate);
},
children: translation.today
}
) })
] })
] });
};
// src/components/user-input/DateAndTimePicker.tsx
import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
var defaultTimeTranslation = {
en: {
clear: "Clear",
change: "Change",
year: "Year",
month: "Month",
day: "Day",
january: "January",
february: "Febuary",
march: "March",
april: "April",
may: "May",
june: "June",
july: "July",
august: "August",
september: "September",
october: "October",
november: "November",
december: "December"
},
de: {
clear: "Entfernen",
change: "\xC4ndern",
year: "Jahr",
month: "Monat",
day: "Tag",
january: "Januar",
february: "Febuar",
march: "M\xE4rz",
april: "April",
may: "Mai",
june: "Juni",
july: "Juli",
august: "August",
september: "September",
october: "October",
november: "November",
december: "December"
}
};
var DateTimePicker = ({
overwriteTranslation,
value = /* @__PURE__ */ new Date(),
start = subtractDuration(/* @__PURE__ */ new Date(), { years: 50 }),
end = addDuration(/* @__PURE__ */ new Date(), { years: 50 }),
mode = "dateTime",
onFinish = noop,
onChange = noop,
onRemove = noop,
timePickerProps,
datePickerProps
}) => {
const translation = useTranslation(defaultTimeTranslation, overwriteTranslation);
const useDate = mode === "dateTime" || mode === "date";
const useTime = mode === "dateTime" || mode === "time";
let dateDisplay;
let timeDisplay;
if (useDate) {
dateDisplay = /* @__PURE__ */ jsx8(
DatePicker,
{
...datePickerProps,
className: "min-w-[320px] min-h-[250px]",
yearMonthPickerProps: { maxHeight: 218 },
value,
start,
end,
onChange
}
);
}
if (useTime) {
timeDisplay = /* @__PURE__ */ jsx8(
TimePicker,
{
...timePickerProps,
className: clsx7("h-full", { "justify-between w-full": mode === "time" }),
maxHeight: 250,
time: value,
onChange
}
);
}
return /* @__PURE__ */ jsxs6("div", { className: "col w-fit", children: [
/* @__PURE__ */ jsxs6("div", { className: "row gap-x-4", children: [
dateDisplay,
timeDisplay
] }),
/* @__PURE__ */ jsx8("div", { className: "row justify-end", children: /* @__PURE__ */ jsxs6("div", { className: "row gap-x-2 mt-1", children: [
/* @__PURE__ */ jsx8(SolidButton, { size: "medium", color: "negative", onClick: onRemove, children: translation.clear }),
/* @__PURE__ */ jsx8(
SolidButton,
{
size: "medium",
onClick: () => onFinish(value),
children: translation.change
}
)
] }) })
] });
};
export {
DateTimePicker
};
//# sourceMappingURL=DateAndTimePicker.mjs.map