mirror of
https://github.com/lukevella/rallly.git
synced 2025-07-23 11:17:26 +02:00
First public commit
This commit is contained in:
Luke Vella
commit
e05cd62e53
228 changed files with 17717 additions and 0 deletions
|
|
@ -0,0 +1 @@
|
|||
export { default } from "./month-calendar";
|
||||
|
|
@ -0,0 +1,426 @@
|
|||
import clsx from "clsx";
|
||||
import differenceInMinutes from "date-fns/differenceInMinutes";
|
||||
import { addMinutes, setHours } from "date-fns/esm";
|
||||
import isSameDay from "date-fns/isSameDay";
|
||||
import { usePlausible } from "next-plausible";
|
||||
import * as React from "react";
|
||||
import { DateTimeOption } from "..";
|
||||
import {
|
||||
expectTimeOption,
|
||||
getDateProps,
|
||||
removeAllOptionsForDay,
|
||||
} from "../../../../utils/date-time-utils";
|
||||
import Button from "../../../button";
|
||||
import CompactButton from "../../../compact-button";
|
||||
import DateCard from "../../../date-card";
|
||||
import Dropdown, { DropdownItem } from "../../../dropdown";
|
||||
import { useHeadlessDatePicker } from "../../../headless-date-picker";
|
||||
import Calendar from "../../../icons/calendar.svg";
|
||||
import ChevronLeft from "../../../icons/chevron-left.svg";
|
||||
import ChevronRight from "../../../icons/chevron-right.svg";
|
||||
import DotsHorizontal from "../../../icons/dots-horizontal.svg";
|
||||
import Magic from "../../../icons/magic.svg";
|
||||
import PlusSm from "../../../icons/plus-sm.svg";
|
||||
import Trash from "../../../icons/trash.svg";
|
||||
import X from "../../../icons/x.svg";
|
||||
import Switch from "../../../switch";
|
||||
import { DateTimePickerProps } from "../types";
|
||||
import { formatDateWithoutTime, formatDateWithoutTz } from "../utils";
|
||||
import TimePicker from "./time-picker";
|
||||
|
||||
const MonthCalendar: React.VoidFunctionComponent<DateTimePickerProps> = ({
|
||||
options,
|
||||
onNavigate,
|
||||
date,
|
||||
onChange,
|
||||
duration,
|
||||
onChangeDuration,
|
||||
}) => {
|
||||
const isTimedEvent = options.some((option) => option.type === "timeSlot");
|
||||
|
||||
const plausible = usePlausible();
|
||||
|
||||
const optionsByDay = React.useMemo(() => {
|
||||
const res: Record<
|
||||
string,
|
||||
[
|
||||
{
|
||||
option: DateTimeOption;
|
||||
index: number;
|
||||
},
|
||||
]
|
||||
> = {};
|
||||
|
||||
options.forEach((option, index) => {
|
||||
const dateString =
|
||||
option.type === "date"
|
||||
? option.date
|
||||
: option.start.substring(0, option.start.indexOf("T"));
|
||||
|
||||
if (res[dateString]) {
|
||||
res[dateString].push({ option, index });
|
||||
} else {
|
||||
res[dateString] = [{ option, index }];
|
||||
}
|
||||
});
|
||||
|
||||
return res;
|
||||
}, [options]);
|
||||
|
||||
const datepickerSelection = React.useMemo(() => {
|
||||
return Object.keys(optionsByDay).map(
|
||||
(dateString) => new Date(dateString + "T12:00:00"),
|
||||
);
|
||||
}, [optionsByDay]);
|
||||
|
||||
const datepicker = useHeadlessDatePicker({
|
||||
selection: datepickerSelection,
|
||||
onNavigationChange: onNavigate,
|
||||
date,
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="lg:flex overflow-hidden">
|
||||
<div className="p-4 border-b lg:border-r lg:border-b-0 shrink-0">
|
||||
<div>
|
||||
<div className="w-full flex flex-col">
|
||||
<div className="flex space-x-4 items-center justify-center mb-3">
|
||||
<Button
|
||||
icon={<ChevronLeft />}
|
||||
title="Previous month"
|
||||
onClick={datepicker.prev}
|
||||
/>
|
||||
<div className="grow text-center font-medium text-lg">
|
||||
{datepicker.label}
|
||||
</div>
|
||||
<Button
|
||||
title="Next month"
|
||||
icon={<ChevronRight />}
|
||||
onClick={datepicker.next}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-7">
|
||||
{datepicker.daysOfWeek.map((dayOfWeek) => {
|
||||
return (
|
||||
<div
|
||||
key={dayOfWeek}
|
||||
className="flex items-center justify-center pb-2 text-slate-400 text-sm font-medium"
|
||||
>
|
||||
{dayOfWeek.substring(0, 2)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="grid grid-cols-7 grow border shadow-sm rounded-lg overflow-hidden bg-white">
|
||||
{datepicker.days.map((day, i) => {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
key={i}
|
||||
onClick={() => {
|
||||
if (
|
||||
datepicker.selection.some((selectedDate) =>
|
||||
isSameDay(selectedDate, day.date),
|
||||
)
|
||||
) {
|
||||
onChange(removeAllOptionsForDay(options, day.date));
|
||||
} else {
|
||||
const selectedDate = setHours(day.date, 12);
|
||||
const newOption: DateTimeOption = !isTimedEvent
|
||||
? {
|
||||
type: "date",
|
||||
date: formatDateWithoutTime(selectedDate),
|
||||
}
|
||||
: {
|
||||
type: "timeSlot",
|
||||
start: formatDateWithoutTz(selectedDate),
|
||||
end: formatDateWithoutTz(
|
||||
addMinutes(selectedDate, duration),
|
||||
),
|
||||
};
|
||||
|
||||
onChange([...options, newOption]);
|
||||
onNavigate(selectedDate);
|
||||
}
|
||||
if (day.outOfMonth) {
|
||||
if (i < 6) {
|
||||
datepicker.prev();
|
||||
} else {
|
||||
datepicker.next();
|
||||
}
|
||||
}
|
||||
}}
|
||||
className={clsx(
|
||||
"flex items-center relative lg:w-14 justify-center focus:ring-0 focus:ring-offset-0 hover:bg-slate-50 px-4 py-3 text-sm active:bg-slate-100",
|
||||
{
|
||||
"text-slate-400 bg-slate-50": day.outOfMonth,
|
||||
"font-bold text-indigo-500": day.today,
|
||||
"border-r": (i + 1) % 7 !== 0,
|
||||
"border-b": i < datepicker.days.length - 7,
|
||||
"font-normal after:content-[''] after:animate-popIn after:absolute after:w-8 after:h-8 after:rounded-full after:bg-green-500 after:-z-0 text-white":
|
||||
day.selected,
|
||||
},
|
||||
)}
|
||||
>
|
||||
<span className="z-10">{day.day}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<Button className="mt-3" onClick={datepicker.today}>
|
||||
Today
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grow flex flex-col">
|
||||
<div
|
||||
className={clsx("border-b", {
|
||||
hidden: datepicker.selection.length === 0,
|
||||
})}
|
||||
>
|
||||
<div className="p-4 flex space-x-3 items-center">
|
||||
<div className="grow">
|
||||
<div className="font-medium">Specify times</div>
|
||||
<div className="text-sm text-slate-400">
|
||||
Include start and end times for each option
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Switch
|
||||
checked={isTimedEvent}
|
||||
onChange={(checked) => {
|
||||
if (checked) {
|
||||
// convert dates to time slots
|
||||
onChange(
|
||||
options.map((option) => {
|
||||
if (option.type === "timeSlot") {
|
||||
throw new Error(
|
||||
"Expected option to be a date but received timeSlot",
|
||||
);
|
||||
}
|
||||
const startDate = new Date(`${option.date}T12:00:00`);
|
||||
const endDate = addMinutes(startDate, duration);
|
||||
return {
|
||||
type: "timeSlot",
|
||||
start: formatDateWithoutTz(startDate),
|
||||
end: formatDateWithoutTz(endDate),
|
||||
};
|
||||
}),
|
||||
);
|
||||
} else {
|
||||
onChange(
|
||||
datepicker.selection.map((date) => ({
|
||||
type: "date",
|
||||
date: formatDateWithoutTime(date),
|
||||
})),
|
||||
);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grow px-4">
|
||||
{isTimedEvent ? (
|
||||
<div className="divide-y">
|
||||
{Object.keys(optionsByDay)
|
||||
.sort((a, b) => (a > b ? 1 : -1))
|
||||
.map((dateString) => {
|
||||
const optionsForDay = optionsByDay[dateString];
|
||||
return (
|
||||
<div
|
||||
key={dateString}
|
||||
className="py-4 space-y-3 xs:space-y-0 xs:space-x-4 xs:flex"
|
||||
>
|
||||
<div>
|
||||
<DateCard
|
||||
{...getDateProps(new Date(dateString + "T12:00:00"))}
|
||||
/>
|
||||
</div>
|
||||
<div className="grow space-y-3">
|
||||
{optionsForDay.map(({ option, index }) => {
|
||||
if (option.type === "date") {
|
||||
throw new Error("Expected timeSlot but got date");
|
||||
}
|
||||
const startDate = new Date(option.start);
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="flex space-x-3 items-center"
|
||||
>
|
||||
<TimePicker
|
||||
value={startDate}
|
||||
onChange={(newStart) => {
|
||||
const newEnd = addMinutes(newStart, duration);
|
||||
// replace enter with updated start time
|
||||
onChange([
|
||||
...options.slice(0, index),
|
||||
{
|
||||
...option,
|
||||
start: formatDateWithoutTz(newStart),
|
||||
end: formatDateWithoutTz(newEnd),
|
||||
},
|
||||
...options.slice(index + 1),
|
||||
]);
|
||||
onNavigate(newStart);
|
||||
onChangeDuration(
|
||||
differenceInMinutes(newEnd, newStart),
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<TimePicker
|
||||
value={new Date(option.end)}
|
||||
startFrom={addMinutes(startDate, 15)}
|
||||
onChange={(newEnd) => {
|
||||
onChange([
|
||||
...options.slice(0, index),
|
||||
{
|
||||
...option,
|
||||
end: formatDateWithoutTz(newEnd),
|
||||
},
|
||||
...options.slice(index + 1),
|
||||
]);
|
||||
onNavigate(newEnd);
|
||||
onChangeDuration(
|
||||
differenceInMinutes(newEnd, startDate),
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<CompactButton
|
||||
icon={X}
|
||||
onClick={() => {
|
||||
onChange([
|
||||
...options.slice(0, index),
|
||||
...options.slice(index + 1),
|
||||
]);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
<div className="flex space-x-3 items-center">
|
||||
<Button
|
||||
icon={<PlusSm />}
|
||||
onClick={() => {
|
||||
const lastOption = expectTimeOption(
|
||||
optionsForDay[optionsForDay.length - 1].option,
|
||||
);
|
||||
const startTime = lastOption.start;
|
||||
|
||||
onChange([
|
||||
...options,
|
||||
{
|
||||
type: "timeSlot",
|
||||
start: startTime,
|
||||
end: formatDateWithoutTz(
|
||||
addMinutes(new Date(startTime), duration),
|
||||
),
|
||||
},
|
||||
]);
|
||||
}}
|
||||
>
|
||||
Add time option
|
||||
</Button>
|
||||
<Dropdown
|
||||
trigger={<CompactButton icon={DotsHorizontal} />}
|
||||
placement="bottom-start"
|
||||
>
|
||||
<DropdownItem
|
||||
icon={Magic}
|
||||
disabled={datepicker.selection.length < 2}
|
||||
label="Apply to all dates"
|
||||
onClick={() => {
|
||||
plausible("Applied options to all dates");
|
||||
const times = optionsForDay.map(
|
||||
({ option }) => {
|
||||
if (option.type === "date") {
|
||||
throw new Error(
|
||||
"Expected timeSlot but got date",
|
||||
);
|
||||
}
|
||||
|
||||
return {
|
||||
startTime: option.start.substring(
|
||||
option.start.indexOf("T"),
|
||||
),
|
||||
endTime: option.end.substring(
|
||||
option.end.indexOf("T"),
|
||||
),
|
||||
};
|
||||
},
|
||||
);
|
||||
const newOptions: DateTimeOption[] = [];
|
||||
Object.keys(optionsByDay).forEach(
|
||||
(dateString) => {
|
||||
times.forEach((time) => {
|
||||
newOptions.push({
|
||||
type: "timeSlot",
|
||||
start: dateString + time.startTime,
|
||||
end: dateString + time.endTime,
|
||||
});
|
||||
});
|
||||
},
|
||||
);
|
||||
onChange(newOptions);
|
||||
}}
|
||||
/>
|
||||
<DropdownItem
|
||||
label="Delete date"
|
||||
icon={Trash}
|
||||
onClick={() => {
|
||||
onChange(
|
||||
removeAllOptionsForDay(
|
||||
options,
|
||||
new Date(dateString),
|
||||
),
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</Dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : datepicker.selection.length ? (
|
||||
<div className="grid grid-cols-[repeat(auto-fill,60px)] gap-5 py-4">
|
||||
{datepicker.selection
|
||||
.sort((a, b) => a.getTime() - b.getTime())
|
||||
.map((selectedDate, i) => {
|
||||
return (
|
||||
<DateCard
|
||||
key={i}
|
||||
{...getDateProps(selectedDate)}
|
||||
annotation={
|
||||
<CompactButton
|
||||
icon={X}
|
||||
onClick={() => {
|
||||
// TODO (Luke Vella) [2022-03-19]: Find cleaner way to manage this state
|
||||
// Quite tedious right now to remove a single element
|
||||
onChange(
|
||||
removeAllOptionsForDay(options, selectedDate),
|
||||
);
|
||||
}}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex h-full items-center justify-center py-12">
|
||||
<div className="text-center font-medium text-gray-400">
|
||||
<Calendar className="inline-block h-12 w-12 mb-2" />
|
||||
<div>No dates selected</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MonthCalendar;
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
import { Combobox } from "@headlessui/react";
|
||||
import clsx from "clsx";
|
||||
import { addMinutes, format, isSameDay, setHours, setMinutes } from "date-fns";
|
||||
import * as React from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import { usePopper } from "react-popper";
|
||||
|
||||
import ChevronDown from "../../../icons/chevron-down.svg";
|
||||
import { styleMenuItem } from "../../../menu-styles";
|
||||
|
||||
export interface TimePickerProps {
|
||||
value: Date;
|
||||
startFrom?: Date;
|
||||
className?: string;
|
||||
onChange?: (value: Date) => void;
|
||||
}
|
||||
|
||||
const TimePicker: React.VoidFunctionComponent<TimePickerProps> = ({
|
||||
value,
|
||||
onChange,
|
||||
className,
|
||||
startFrom = setMinutes(setHours(value, 0), 0),
|
||||
}) => {
|
||||
const [referenceElement, setReferenceElement] =
|
||||
React.useState<HTMLDivElement | null>(null);
|
||||
const [popperElement, setPopperElement] =
|
||||
React.useState<HTMLUListElement | null>(null);
|
||||
|
||||
const { styles, attributes } = usePopper(referenceElement, popperElement, {
|
||||
modifiers: [
|
||||
{
|
||||
name: "offset",
|
||||
options: {
|
||||
offset: [0, 5],
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const [query, setQuery] = React.useState("");
|
||||
const options: React.ReactNode[] = [];
|
||||
for (let i = 0; i < 96; i++) {
|
||||
const optionValue = addMinutes(startFrom, i * 15);
|
||||
if (!isSameDay(value, optionValue)) {
|
||||
// we only support event that start and end on the same day for now
|
||||
// because react-big-calendar does not support events that span days
|
||||
break;
|
||||
}
|
||||
if (query && !format(optionValue, "hhmma").includes(query)) {
|
||||
continue;
|
||||
}
|
||||
options.push(
|
||||
<Combobox.Option
|
||||
key={i}
|
||||
className={styleMenuItem}
|
||||
value={optionValue.toISOString()}
|
||||
>
|
||||
{format(optionValue, "p")}
|
||||
</Combobox.Option>,
|
||||
);
|
||||
}
|
||||
|
||||
const portal = document.getElementById("portal");
|
||||
|
||||
return (
|
||||
<Combobox
|
||||
value={value.toISOString()}
|
||||
onChange={(newValue) => {
|
||||
setQuery("");
|
||||
onChange?.(new Date(newValue));
|
||||
}}
|
||||
>
|
||||
<div ref={setReferenceElement} className={clsx("relative", className)}>
|
||||
{/* Remove generic params once Combobox.Input can infer the types */}
|
||||
<Combobox.Input<"input">
|
||||
className="input w-28 pr-8"
|
||||
displayValue={() => ""}
|
||||
onChange={(e) => {
|
||||
setQuery(e.target.value.toUpperCase().replace(/[\:\s]/g, ""));
|
||||
}}
|
||||
/>
|
||||
<Combobox.Button className="absolute inset-0 flex items-center cursor-default px-2 h-9 text-left">
|
||||
<span className="grow truncate">
|
||||
{!query ? format(value, "p") : null}
|
||||
</span>
|
||||
<span className="flex pointer-events-none">
|
||||
<ChevronDown className="w-5 h-5" />
|
||||
</span>
|
||||
</Combobox.Button>
|
||||
{portal &&
|
||||
ReactDOM.createPortal(
|
||||
<Combobox.Options
|
||||
style={styles.popper}
|
||||
{...attributes.popper}
|
||||
ref={setPopperElement}
|
||||
className="z-50 w-32 py-1 overflow-auto bg-white rounded-md shadow-lg max-h-72 ring-1 ring-black ring-opacity-5 focus:outline-none"
|
||||
>
|
||||
{options}
|
||||
</Combobox.Options>,
|
||||
portal,
|
||||
)}
|
||||
</div>
|
||||
</Combobox>
|
||||
);
|
||||
};
|
||||
|
||||
export default TimePicker;
|
||||
Loading…
Add table
Add a link
Reference in a new issue