From 4759aed51d143f518cedf4153f116eee385ea139 Mon Sep 17 00:00:00 2001 From: Alex van Andel Date: Mon, 9 Aug 2021 22:43:57 +0000 Subject: [PATCH] Fixed dismiss on toggle + implemented switch component --- components/ui/Switch.tsx | 41 ++++++++++++++++++++++++++++++++++++ package.json | 1 + pages/integrations/index.tsx | 41 +++++++++++++----------------------- yarn.lock | 27 ++++++++++++++++++++++++ 4 files changed, 84 insertions(+), 26 deletions(-) create mode 100644 components/ui/Switch.tsx diff --git a/components/ui/Switch.tsx b/components/ui/Switch.tsx new file mode 100644 index 0000000000..ad2b415a19 --- /dev/null +++ b/components/ui/Switch.tsx @@ -0,0 +1,41 @@ +import { useState } from "react"; +import * as PrimitiveSwitch from "@radix-ui/react-switch"; +import * as Label from "@radix-ui/react-label"; + +function classNames(...classes) { + return classes.filter(Boolean).join(" "); +} + +export default function Switch(props) { + const { label, onCheckedChange, ...primitiveProps } = props; + const [checked, setChecked] = useState(props.defaultChecked || false); + + const onPrimitiveCheckedChange = (change: boolean) => { + if (onCheckedChange) { + onCheckedChange(change); + } + setChecked(change); + }; + + return ( +
+ + + + {label && ( + + {label} + + )} +
+ ); +} diff --git a/package.json b/package.json index 6e151e8550..a25a020f1f 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "@radix-ui/react-collapsible": "^0.0.16", "@radix-ui/react-dialog": "^0.0.19", "@radix-ui/react-slot": "^0.0.12", + "@radix-ui/react-switch": "^0.0.15", "@radix-ui/react-tooltip": "^0.0.21", "@tailwindcss/forms": "^0.2.1", "async": "^3.2.0", diff --git a/pages/integrations/index.tsx b/pages/integrations/index.tsx index 2b318e029f..322d8dfcb0 100644 --- a/pages/integrations/index.tsx +++ b/pages/integrations/index.tsx @@ -6,10 +6,9 @@ import { useEffect, useState } from "react"; import { getSession, useSession } from "next-auth/client"; import { CheckCircleIcon, ChevronRightIcon, PlusIcon, XCircleIcon } from "@heroicons/react/solid"; import { InformationCircleIcon } from "@heroicons/react/outline"; -import { Switch } from "@headlessui/react"; -import Loader from "@components/Loader"; -import classNames from "@lib/classNames"; import { Dialog, DialogClose, DialogContent, DialogHeader, DialogTrigger } from "@components/Dialog"; +import Switch from "@components/ui/Switch"; +import Loader from "@components/Loader"; export default function IntegrationHome({ integrations }) { // eslint-disable-next-line @typescript-eslint/no-unused-vars @@ -32,17 +31,15 @@ export default function IntegrationHome({ integrations }) { function calendarSelectionHandler(calendar) { return (selected) => { - const cals = [...selectableCalendars]; - const i = cals.findIndex((c) => c.externalId === calendar.externalId); - cals[i].selected = selected; - setSelectableCalendars(cals); + const i = selectableCalendars.findIndex((c) => c.externalId === calendar.externalId); + selectableCalendars[i].selected = selected; if (selected) { fetch("api/availability/calendar", { method: "POST", headers: { "Content-Type": "application/json", }, - body: JSON.stringify(cals[i]), + body: JSON.stringify(selectableCalendars[i]), }).then((response) => response.json()); } else { fetch("api/availability/calendar", { @@ -50,7 +47,7 @@ export default function IntegrationHome({ integrations }) { headers: { "Content-Type": "application/json", }, - body: JSON.stringify(cals[i]), + body: JSON.stringify(selectableCalendars[i]), }).then((response) => response.json()); } }; @@ -67,6 +64,10 @@ export default function IntegrationHome({ integrations }) { } } + function onCloseSelectCalendar() { + setSelectableCalendars([...selectableCalendars]); + } + useEffect(loadCalendars, [integrations]); if (loading) { @@ -116,7 +117,7 @@ export default function IntegrationHome({ integrations }) { ); const SelectCalendarDialog = () => ( - + !open && onCloseSelectCalendar()}> Select calendars @@ -142,21 +143,9 @@ export default function IntegrationHome({ integrations }) {
- Select calendar - + defaultChecked={calendar.selected} + onCheckedChange={calendarSelectionHandler(calendar)} + />
))} @@ -185,7 +174,7 @@ export default function IntegrationHome({ integrations }) { {integrations .filter((ig) => ig.credential) .map((ig) => ( -
  • +
  • diff --git a/yarn.lock b/yarn.lock index bb82f82bb6..95eaaf9162 100644 --- a/yarn.lock +++ b/yarn.lock @@ -867,6 +867,17 @@ dependencies: "@babel/runtime" "^7.13.10" +"@radix-ui/react-label@0.0.15": + version "0.0.15" + resolved "https://registry.yarnpkg.com/@radix-ui/react-label/-/react-label-0.0.15.tgz#ab70d7cd93d6ebaf2e1007cca70e9b1858bcb932" + integrity sha512-p1nM6z2rLkstfHVsqSxcDMn0eAGXkx/G5e4XIGmOCxYa/7EkOQ+lBz0+/7sk+Ut+8B37h7d0bfxnzr3ILVxJUw== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/react-compose-refs" "0.0.5" + "@radix-ui/react-id" "0.0.6" + "@radix-ui/react-polymorphic" "0.0.13" + "@radix-ui/react-primitive" "0.0.15" + "@radix-ui/react-polymorphic@0.0.12": version "0.0.12" resolved "https://registry.yarnpkg.com/@radix-ui/react-polymorphic/-/react-polymorphic-0.0.12.tgz#bf4ae516669b68e059549538104d97322f7c876b" @@ -954,6 +965,22 @@ "@babel/runtime" "^7.13.10" "@radix-ui/react-compose-refs" "0.0.5" +"@radix-ui/react-switch@^0.0.15": + version "0.0.15" + resolved "https://registry.yarnpkg.com/@radix-ui/react-switch/-/react-switch-0.0.15.tgz#675e0abd509ac211f6c9193fab786f17bd335de3" + integrity sha512-2f2fhxvZSb21N+Va1lV4wvyY+zgPkJoKZOiK3rEH9zAmkyQ1nIDeI6eKwipeRO9WcGMeftOZBgVQTZhWSK0Rag== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/primitive" "0.0.5" + "@radix-ui/react-compose-refs" "0.0.5" + "@radix-ui/react-context" "0.0.5" + "@radix-ui/react-label" "0.0.15" + "@radix-ui/react-polymorphic" "0.0.13" + "@radix-ui/react-primitive" "0.0.15" + "@radix-ui/react-use-controllable-state" "0.0.6" + "@radix-ui/react-use-previous" "0.0.5" + "@radix-ui/react-use-size" "0.0.6" + "@radix-ui/react-tooltip@^0.0.21": version "0.0.21" resolved "https://registry.yarnpkg.com/@radix-ui/react-tooltip/-/react-tooltip-0.0.21.tgz#86160645cf0441fa7f465c8aaa265887cc3ff9b4"