c467167e91
* add classnames prop to pass external styles * fix import * add comments * ignore this commit: tinkering with styling * update typings * mostly creating props and passing it down to child components * remove unnecessary comment * merge conflicts * fixup * fixup * fix conflicts * fix merge conflicts * fix merge conflicts * fix failing type checks * type checks fix * add custom classnames to booker props * update typings * pass in props down wherever necessary * fixup * still passing down around some more props * addressing pr feedback * final fixes * address feedback * fixup! address feedback * fixup! fixup! address feedback * fixup! fixup! fixup! address feedback --------- Co-authored-by: Morgan <33722304+ThyMinimalDev@users.noreply.github.com> Co-authored-by: Morgan Vernay <morgan@cal.com>
65 lines
2.3 KiB
TypeScript
65 lines
2.3 KiB
TypeScript
import { shallow } from "zustand/shallow";
|
|
|
|
import type { Dayjs } from "@calcom/dayjs";
|
|
import dayjs from "@calcom/dayjs";
|
|
import { default as DatePickerComponent } from "@calcom/features/calendars/DatePicker";
|
|
import { useNonEmptyScheduleDays } from "@calcom/features/schedules";
|
|
import { weekdayToWeekIndex } from "@calcom/lib/date-fns";
|
|
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
|
|
|
import { useBookerStore } from "../store";
|
|
import type { useEventReturnType, useScheduleForEventReturnType } from "../utils/event";
|
|
|
|
export const DatePicker = ({
|
|
event,
|
|
schedule,
|
|
classNames,
|
|
}: {
|
|
event: useEventReturnType;
|
|
schedule: useScheduleForEventReturnType;
|
|
classNames?: {
|
|
datePickerContainer?: string;
|
|
datePickerTitle?: string;
|
|
datePickerDays?: string;
|
|
datePickerDate?: string;
|
|
datePickerDatesActive?: string;
|
|
datePickerToggle?: string;
|
|
};
|
|
}) => {
|
|
const { i18n } = useLocale();
|
|
const [month, selectedDate] = useBookerStore((state) => [state.month, state.selectedDate], shallow);
|
|
const [setSelectedDate, setMonth, setDayCount] = useBookerStore(
|
|
(state) => [state.setSelectedDate, state.setMonth, state.setDayCount],
|
|
shallow
|
|
);
|
|
const nonEmptyScheduleDays = useNonEmptyScheduleDays(schedule?.data?.slots);
|
|
|
|
return (
|
|
<DatePickerComponent
|
|
customClassNames={{
|
|
datePickerTitle: classNames?.datePickerTitle,
|
|
datePickerDays: classNames?.datePickerDays,
|
|
datePickersDates: classNames?.datePickerDate,
|
|
datePickerDatesActive: classNames?.datePickerDatesActive,
|
|
datePickerToggle: classNames?.datePickerToggle,
|
|
}}
|
|
className={classNames?.datePickerContainer}
|
|
isPending={schedule.isPending}
|
|
onChange={(date: Dayjs | null) => {
|
|
setSelectedDate(date === null ? date : date.format("YYYY-MM-DD"));
|
|
}}
|
|
onMonthChange={(date: Dayjs) => {
|
|
setMonth(date.format("YYYY-MM"));
|
|
setSelectedDate(date.format("YYYY-MM-DD"));
|
|
setDayCount(null); // Whenever the month is changed, we nullify getting X days
|
|
}}
|
|
includedDates={nonEmptyScheduleDays}
|
|
locale={i18n.language}
|
|
browsingDate={month ? dayjs(month) : undefined}
|
|
selected={dayjs(selectedDate)}
|
|
weekStart={weekdayToWeekIndex(event?.data?.users?.[0]?.weekStart)}
|
|
slots={schedule?.data?.slots}
|
|
/>
|
|
);
|
|
};
|