import { Fragment, useCallback, useEffect, useMemo, useState, useRef } from "react"; import type { ArrayPath, Control, ControllerRenderProps, FieldArrayWithId, FieldPath, FieldPathValue, FieldValues, UseFieldArrayRemove, } from "react-hook-form"; import { Controller, useFieldArray, useFormContext } from "react-hook-form"; import type { GroupBase, Props } from "react-select"; import type { ConfigType } from "@calcom/dayjs"; import dayjs from "@calcom/dayjs"; import { defaultDayRange as DEFAULT_DAY_RANGE } from "@calcom/lib/availability"; import classNames from "@calcom/lib/classNames"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { weekdayNames } from "@calcom/lib/weekday"; import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery"; import type { TimeRange } from "@calcom/types/schedule"; import { Button, Dropdown, DropdownMenuContent, DropdownMenuTrigger, Select, SkeletonText, Switch, Checkbox, } from "@calcom/ui"; import { Copy, Plus, Trash } from "@calcom/ui/components/icon"; export type { TimeRange }; export type FieldPathByValue = { [Key in FieldPath]: FieldPathValue extends TValue ? Key : never; }[FieldPath]; const ScheduleDay = ({ name, weekday, control, CopyButton, }: { name: ArrayPath; weekday: string; control: Control; CopyButton: JSX.Element; }) => { const { watch, setValue } = useFormContext(); const watchDayRange = watch(name); return (
{/* Label & switch container */}
<> {watchDayRange ? (
{!!watchDayRange.length &&
{CopyButton}
}
) : ( )}
); }; const CopyButton = ({ getValuesFromDayRange, weekStart, }: { getValuesFromDayRange: string; weekStart: number; }) => { const { t } = useLocale(); const [open, setOpen] = useState(false); const fieldArrayName = getValuesFromDayRange.substring(0, getValuesFromDayRange.lastIndexOf(".")); const { setValue, getValues } = useFormContext(); return (