{datepicker.days.map((day, i) => {
return (
= ({
}
}}
className={clsx(
- "relative flex h-full w-full items-center justify-center text-sm hover:bg-gray-50 focus:z-10 focus:rounded active:bg-gray-100",
+ "group relative flex h-full w-full items-start justify-end rounded-none px-2.5 py-1.5 text-sm font-medium tracking-tight focus:z-10 focus:rounded",
{
- "bg-gray-50 text-gray-500": day.outOfMonth,
- "font-bold": day.today,
- "text-primary-600": day.today && !day.selected,
- "font-normal text-white after:absolute after:-z-0 after:h-8 after:w-8 after:rounded-full after:bg-green-600 after:content-['']":
- day.selected,
+ "bg-gray-100 text-gray-400": day.isPast,
+ "text-rose-600": day.today && !day.selected,
+ "bg-gray-50 text-gray-500":
+ day.outOfMonth && !day.isPast,
+ "text-primary-600": day.selected,
},
)}
>
+
{day.day}
@@ -209,11 +219,11 @@ const MonthCalendar: React.FunctionComponent
= ({
{
+ onCheckedChange={(checked) => {
if (checked) {
// convert dates to time slots
onChange(
- options.map((option) => {
+ options.map((option) => {
if (option.type === "timeSlot") {
throw new Error(
"Expected option to be a date but received timeSlot",
diff --git a/apps/web/src/components/forms/poll-options-form/poll-options-form.tsx b/apps/web/src/components/forms/poll-options-form/poll-options-form.tsx
index ff6f6e10a..8544b6029 100644
--- a/apps/web/src/components/forms/poll-options-form/poll-options-form.tsx
+++ b/apps/web/src/components/forms/poll-options-form/poll-options-form.tsx
@@ -1,14 +1,16 @@
import { CalendarIcon, TableIcon } from "@rallly/icons";
-import { Form, FormItem } from "@rallly/ui/form";
-import clsx from "clsx";
-import { useTranslation } from "next-i18next";
+import { Card, CardDescription, CardHeader, CardTitle } from "@rallly/ui/card";
+import { FormField, FormMessage } from "@rallly/ui/form";
+import { Tabs, TabsList, TabsTrigger } from "@rallly/ui/tabs";
+import { Trans, useTranslation } from "next-i18next";
import * as React from "react";
-import { Controller, useForm } from "react-hook-form";
+import { useFormContext } from "react-hook-form";
+
+import TimeZonePicker from "@/components/time-zone-picker";
import { getBrowserTimeZone } from "../../../utils/date-time-utils";
import { useModal } from "../../modal";
-import TimeZonePicker from "../../time-zone-picker";
-import { PollFormProps } from "../types";
+import { NewEventData } from "../types";
import MonthCalendar from "./month-calendar";
import { DateTimeOption } from "./types";
import WeekCalendar from "./week-calendar";
@@ -21,32 +23,11 @@ export type PollOptionsData = {
options: DateTimeOption[];
};
-const PollOptionsForm: React.FunctionComponent<
- PollFormProps & { title?: string }
-> = ({ name, defaultValues, onSubmit, onChange, title, className }) => {
+const PollOptionsForm = ({ children }: React.PropsWithChildren) => {
const { t } = useTranslation();
- const form = useForm({
- defaultValues: {
- options: [],
- duration: 30,
- timeZone: "",
- navigationDate: new Date().toISOString(),
- ...defaultValues,
- },
- resolver: (values) => {
- return {
- values,
- errors:
- values.options.length === 0
- ? {
- options: true,
- }
- : {},
- };
- },
- });
+ const form = useFormContext();
- const { control, handleSubmit, watch, setValue, formState } = form;
+ const { watch, setValue, formState } = form;
const views = React.useMemo(() => {
const res = [
@@ -71,7 +52,8 @@ const PollOptionsForm: React.FunctionComponent<
[views, watchView],
);
- const watchOptions = watch("options");
+ // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+ const watchOptions = watch("options", [])!;
const watchDuration = watch("duration");
const watchTimeZone = watch("timeZone");
@@ -100,19 +82,6 @@ const PollOptionsForm: React.FunctionComponent<
},
});
- React.useEffect(() => {
- if (onChange) {
- const subscription = watch(({ options = [], ...rest }) => {
- // Watch returns a deep partial here which is not really accurate and messes up
- // the types a bit. Repackaging it to keep the types sane.
- onChange({ options: options as DateTimeOption[], ...rest });
- });
- return () => {
- subscription.unsubscribe();
- };
- }
- }, [watch, onChange]);
-
React.useEffect(() => {
if (watchOptions.length > 1) {
const optionType = watchOptions[0].type;
@@ -124,115 +93,117 @@ const PollOptionsForm: React.FunctionComponent<
}, [watchOptions, openDateOrTimeRangeModal]);
const watchNavigationDate = watch("navigationDate");
- const navigationDate = new Date(watchNavigationDate);
-
- const [calendarHelpModal, openHelpModal] = useModal({
- overlayClosable: true,
- title: t("calendarHelpTitle"),
- description: t("calendarHelp"),
- okText: t("ok"),
- });
+ const navigationDate = new Date(watchNavigationDate ?? Date.now());
return (
-