public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

tweak

proto/trying-alternative-approach
KATT 2021-11-19 11:38:42 +01:00
parent fbc5ac4c14
commit d138f59264
1 changed files with 39 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
components/booking/DatePicker.tsx
View File

@ -4,10 +4,12 @@ import dayjs, { Dayjs } from "dayjs";
// Then, include dayjs-business-time // Then, include dayjs-business-time
import dayjsBusinessTime from "dayjs-business-time"; import dayjsBusinessTime from "dayjs-business-time";
import utc from "dayjs/plugin/utc"; import utc from "dayjs/plugin/utc";
import Link from "next/link";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import classNames from "@lib/classNames"; import classNames from "@lib/classNames";
import { useLocale } from "@lib/hooks/useLocale"; import { useLocale } from "@lib/hooks/useLocale";
import { useRouterAsPath } from "@lib/hooks/useRouterPath";
import getSlots from "@lib/slots"; import getSlots from "@lib/slots";
import { WorkingHours } from "@lib/types/schedule"; import { WorkingHours } from "@lib/types/schedule";
@ -16,7 +18,6 @@ dayjs.extend(utc);
type DatePickerProps = { type DatePickerProps = {
weekStart: string; weekStart: string;
onDatePicked: (pickedDate: Dayjs) => void;
workingHours: WorkingHours[]; workingHours: WorkingHours[];
eventLength: number; eventLength: number;
date: Dayjs | null; date: Dayjs | null;
@ -30,7 +31,6 @@ type DatePickerProps = {
function DatePicker({ function DatePicker({
weekStart, weekStart,
onDatePicked,
workingHours, workingHours,
eventLength, eventLength,
date, date,
@ -43,7 +43,7 @@ function DatePicker({
}: DatePickerProps): JSX.Element { }: DatePickerProps): JSX.Element {
const { t } = useLocale(); const { t } = useLocale();
const [days, setDays] = useState<({ disabled: boolean; date: number } | null)[]>([]); const [days, setDays] = useState<({ disabled: boolean; date: number } | null)[]>([]);
const asPath = useRouterAsPath();
const [selectedMonth, setSelectedMonth] = useState<number>( const [selectedMonth, setSelectedMonth] = useState<number>(
date date
? periodType === PeriodType.RANGE ? periodType === PeriodType.RANGE
@ -194,25 +194,42 @@ function DatePicker({
{day === null ? ( {day === null ? (
<div key={`e-${idx}`} /> <div key={`e-${idx}`} />
) : ( ) : (
<button <Link
onClick={() => onDatePicked(inviteeDate().date(day.date))} href={`${
disabled={day.disabled} rescheduleUid
className={classNames( ? `${asPath}?rescheduleUid=${rescheduleUid}&date=${encodeURIComponent(
"absolute w-full top-0 left-0 right-0 bottom-0 rounded-sm text-center mx-auto", inviteeDate().date(day.date).format("YYYY-MM-DDZZ")
"hover:border hover:border-brand dark:hover:border-white", )}`
day.disabled : `${asPath}?date=${encodeURIComponent(
? "text-gray-400 font-light hover:border-0 cursor-default" inviteeDate().date(day.date).format("YYYY-MM-DDZZ")
: "dark:text-white text-primary-500 font-medium", )}`
date && date.isSame(inviteeDate().date(day.date), "day") }`}
? "bg-brand text-white-important" scroll={false}>
: !day.disabled <a
? " bg-gray-100 dark:bg-gray-600" className={classNames(
: "" "rounded-sm text-center border border-transparent absolute inset-0",
)} "hover:border hover:border-brand dark:hover:border-white",
data-testid="day" day.disabled
data-disabled={day.disabled}> ? "text-gray-400 font-light hover:border-0 cursor-default"
{day.date} : "dark:text-white text-primary-500 font-medium",
</button> date && date.isSame(inviteeDate().date(day.date), "day")
? "bg-brand text-white-important"
: !day.disabled
? " bg-gray-100 dark:bg-gray-600"
: ""
)}
onClick={(e) => {
if (day.disabled) {
e.preventDefault();
}
}}
data-testid="day"
data-disabled={day.disabled}>
<span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
{day.date}
</span>
</a>
</Link>
)} )}
</div> </div>
))} ))}