From 30469f486f9bfc084006faffa73b524afb54f4aa Mon Sep 17 00:00:00 2001 From: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com> Date: Thu, 25 May 2023 23:54:42 +0530 Subject: [PATCH] refactor: radio area group (#9113) * refactor: radio area group Signed-off-by: Udit Takkar * chore: remove select Signed-off-by: Udit Takkar * fix: e2e test Signed-off-by: Udit Takkar --------- Signed-off-by: Udit Takkar Co-authored-by: Peer Richelsen --- .../web/playwright/managed-event-types.e2e.ts | 4 +- .../components/CreateEventTypeDialog.tsx | 3 + .../ui/form/radio-area/RadioAreaGroup.tsx | 90 +++++++++---------- packages/ui/form/radio-area/Select.tsx | 68 -------------- packages/ui/form/radio-area/index.ts | 1 - 5 files changed, 49 insertions(+), 117 deletions(-) delete mode 100644 packages/ui/form/radio-area/Select.tsx diff --git a/apps/web/playwright/managed-event-types.e2e.ts b/apps/web/playwright/managed-event-types.e2e.ts index 3496deed51..b365a03089 100644 --- a/apps/web/playwright/managed-event-types.e2e.ts +++ b/apps/web/playwright/managed-event-types.e2e.ts @@ -39,10 +39,10 @@ test.describe("Managed Event Types tests", () => { await page.click("[data-testid=new-event-type-dropdown]"); await page.click("[data-testid=option-team-1]"); // Expecting we can add a managed event type as team owner - await expect(page.locator('input[value="MANAGED"]')).toBeVisible(); + await expect(page.locator('button[value="MANAGED"]')).toBeVisible(); // Actually creating a managed event type to test things further - await page.click('input[value="MANAGED"]'); + await page.click('button[value="MANAGED"]'); await page.fill("[name=title]", "managed"); await page.click("[type=submit]"); }); diff --git a/packages/features/eventtypes/components/CreateEventTypeDialog.tsx b/packages/features/eventtypes/components/CreateEventTypeDialog.tsx index 2487ebbe57..2726bc74e4 100644 --- a/packages/features/eventtypes/components/CreateEventTypeDialog.tsx +++ b/packages/features/eventtypes/components/CreateEventTypeDialog.tsx @@ -254,6 +254,9 @@ export default function CreateEventTypeDialog({ /> )} { + form.setValue("schedulingType", val); + }} className={classNames( "mt-1 flex gap-4", isAdmin && flags["managed-event-types"] && "flex-col" diff --git a/packages/ui/form/radio-area/RadioAreaGroup.tsx b/packages/ui/form/radio-area/RadioAreaGroup.tsx index f0185fc691..9bb68f24ad 100644 --- a/packages/ui/form/radio-area/RadioAreaGroup.tsx +++ b/packages/ui/form/radio-area/RadioAreaGroup.tsx @@ -1,59 +1,57 @@ -import React from "react"; +import { useId } from "@radix-ui/react-id"; +import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"; +import type { ReactNode } from "react"; import classNames from "@calcom/lib/classNames"; -type RadioAreaProps = React.InputHTMLAttributes & { classNames?: { container?: string } }; +type RadioAreaProps = RadioGroupPrimitive.RadioGroupItemProps & { + children: ReactNode; + classNames?: { container?: string }; +}; -const RadioArea = React.forwardRef( - ({ children, className, classNames: innerClassNames, ...props }, ref) => { - return ( - - ); - } -); -type MaybeArray = T[] | T; -type ChildrenOfType = MaybeArray< - React.ReactElement> ->; -interface RadioAreaGroupProps extends Omit, "onChange" | "children"> { - onChange?: (value: string) => void; - children: ChildrenOfType; -} +const RadioArea = ({ children, className, classNames: innerClassNames, ...props }: RadioAreaProps) => { + const radioAreaId = useId(); + const id = props.id ?? radioAreaId; -const RadioAreaGroup = ({ children, className, onChange, ...passThroughProps }: RadioAreaGroupProps) => { - const childrenWithProps = React.Children.map(children, (child) => { - if (onChange && React.isValidElement(child)) { - return React.cloneElement(child, { - onChange: (e: React.ChangeEvent) => { - onChange(e.target.value); - }, - }); - } - return child; - }); return ( -
- {childrenWithProps} +
+ + + +
); }; -RadioAreaGroup.displayName = "RadioAreaGroup"; -RadioArea.displayName = "RadioArea"; +const RadioAreaGroup = ({ + children, + className, + onValueChange, + ...passThroughProps +}: RadioGroupPrimitive.RadioGroupProps) => { + return ( + + {children} + + ); +}; const Item = RadioArea; const Group = RadioAreaGroup; diff --git a/packages/ui/form/radio-area/Select.tsx b/packages/ui/form/radio-area/Select.tsx deleted file mode 100644 index 6834d8c9b2..0000000000 --- a/packages/ui/form/radio-area/Select.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@radix-ui/react-collapsible"; -import React from "react"; -import type { FieldValues, Path, UseFormReturn } from "react-hook-form"; - -import classNames from "@calcom/lib/classNames"; -import { useLocale } from "@calcom/lib/hooks/useLocale"; -import { ChevronDown } from "@calcom/ui/components/icon"; - -import { RadioArea, RadioAreaGroup } from "./RadioAreaGroup"; - -interface OptionProps - extends Pick, "value" | "label" | "className"> { - description?: string; -} - -export type FieldPath = Path; -interface RadioAreaSelectProps - extends Omit, "onChange" | "form"> { - options: OptionProps[]; // allow options to be passed programmatically, like options={} - onChange?: (value: string) => void; - form: UseFormReturn; - name: FieldPath; -} - -export const Select = function RadioAreaSelect( - props: RadioAreaSelectProps -) { - const { t } = useLocale(); - const { - options, - form, - disabled = !options.length, // if not explicitly disabled and the options length is empty, disable anyway - placeholder = t("select"), - } = props; - - const getLabel = (value: string | ReadonlyArray | number | undefined) => - options.find((option: OptionProps) => option.value === value)?.label; - - return ( - - - {getLabel(props.value) ?? placeholder} - - - - - {options.map((option) => ( - - {option.label} -

{option.description}

- - ))} - - - - ); -}; - -export default Select; diff --git a/packages/ui/form/radio-area/index.ts b/packages/ui/form/radio-area/index.ts index b6a8b4b6cc..1f2d98b9cf 100644 --- a/packages/ui/form/radio-area/index.ts +++ b/packages/ui/form/radio-area/index.ts @@ -1,3 +1,2 @@ export * as RadioGroup from "./RadioAreaGroup"; -export { default as Select } from "./Select"; export { Group, Indicator, Label, Radio, RadioField } from "./Radio";