import classNames from "classnames"; import { useCallback, useEffect, useMemo, useState } from "react"; import { Controller, useFieldArray, UseFieldArrayAppend, UseFieldArrayRemove, useFormContext, } from "react-hook-form"; import { GroupBase, Props } from "react-select"; import dayjs, { ConfigType, Dayjs } from "@calcom/dayjs"; import { defaultDayRange as DEFAULT_DAY_RANGE } from "@calcom/lib/availability"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { weekdayNames } from "@calcom/lib/weekday"; import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery"; import { TimeRange } from "@calcom/types/schedule"; import { Icon } from "@calcom/ui"; import Dropdown, { DropdownMenuContent, DropdownMenuTrigger } from "@calcom/ui/Dropdown"; import { Button, Select, Switch, Tooltip } from "@calcom/ui/v2"; const Schedule = () => { const { i18n } = useLocale(); const form = useFormContext(); const initialValue = form.watch(); const copyAllPosition = (initialValue["schedule"] as Array)?.findIndex( (item: TimeRange[]) => item.length > 0 ); return ( <> {/* First iterate for each day */} {weekdayNames(i18n.language, 0, "long").map((weekday, num) => { const name = `schedule.${num}`; const copyAllShouldRender = copyAllPosition === num; return (
{/* Label & switch container */}
); })} ); }; const DayRanges = ({ name, copyAllShouldRender, }: { name: string; defaultValue?: TimeRange[]; copyAllShouldRender?: boolean; }) => { const form = useFormContext(); const fields = form.watch(`${name}` as `schedule.0`); const { remove } = useFieldArray({ name, }); return ( <> {fields.map((field: { id: string }, index: number) => (
{index === 0 && (
)} {index !== 0 && }
))} ); }; const RemoveTimeButton = ({ index, remove, className, }: { index: number | number[]; remove: UseFieldArrayRemove; className?: string; }) => { return (
); }; export default Schedule;