feat(WEB-162): final design edit profile page

2024-06-18 08:15:57 +02:00
parent 5f3e417593
commit d84efcbb0f
81 changed files with 1538 additions and 711 deletions
--- a/components/TempDesignSystem/Form/Select/index.tsx
+++ b/components/TempDesignSystem/Form/Select/index.tsx
@@ -1,94 +1,35 @@
 "use client"
-import { useState } from "react"
-import {
-  Button,
-  type Key,
-  Label,
-  ListBox,
-  ListBoxItem,
-  Popover,
-  Select as ReactAriaSelect,
-  SelectValue,
-} from "react-aria-components"
+import { useController, useFormContext } from "react-hook-form"

-import Body from "../../Text/Body"
-import Footnote from "../../Text/Footnote"
-import SelectChevron from "../SelectChevron"
+import ReactAriaSelect from "@/components/TempDesignSystem/Select"

-import styles from "./select.module.css"
-
-import type { SelectPortalContainer, SelectProps } from "./select"
+import type { SelectProps } from "./select"

 export default function Select({
-  "aria-label": ariaLabel,
  items,
  label,
-  onSelect,
+  name,
  placeholder,
-  value,
-  defaultSelectedKey,
+  registerOptions = {},
 }: SelectProps) {
-  const [rootDiv, setRootDiv] = useState<SelectPortalContainer>(null)
-
-  function setRef(node: SelectPortalContainer) {
-    if (node) {
-      setRootDiv(node)
-    }
-  }
-
-  function handleOnSelect(key: Key) {
-    onSelect(key)
-  }
+  const { control } = useFormContext()
+  const { field } = useController({
+    control,
+    name,
+    rules: registerOptions,
+  })

  return (
-    <div className={styles.container} ref={setRef}>
-      <ReactAriaSelect
-        defaultSelectedKey={defaultSelectedKey}
-        aria-label={ariaLabel}
-        className={styles.select}
-        onSelectionChange={handleOnSelect}
-        placeholder={placeholder}
-        selectedKey={value as Key}
-      >
-        <Body asChild fontOnly>
-          <Button className={styles.input}>
-            <div className={styles.inputContentWrapper}>
-              <Footnote asChild fontOnly>
-                <Label className={styles.label}>{label}</Label>
-              </Footnote>
-              <SelectValue />
-            </div>
-            <SelectChevron />
-          </Button>
-        </Body>
-        <Body asChild fontOnly>
-          <Popover
-            className={styles.popover}
-            placement="bottom"
-            shouldFlip={false}
-            /**
-             * react-aria uses portals to render Popover in body
-             * unless otherwise specified. We need it to be contained
-             * by this component to both access css variables assigned
-             * on the container as well as to not overflow it at any time.
-             */
-            UNSTABLE_portalContainer={rootDiv ?? undefined}
-          >
-            <ListBox className={styles.listBox}>
-              {items.map((item) => (
-                <ListBoxItem
-                  aria-label={String(item)}
-                  className={styles.listBoxItem}
-                  id={item.value}
-                  key={item.label}
-                >
-                  {item.label}
-                </ListBoxItem>
-              ))}
-            </ListBox>
-          </Popover>
-        </Body>
-      </ReactAriaSelect>
-    </div>
+    <ReactAriaSelect
+      defaultSelectedKey={field.value}
+      disabled={field.disabled}
+      items={items}
+      label={label}
+      name={field.name}
+      onBlur={field.onBlur}
+      onSelect={field.onChange}
+      placeholder={placeholder}
+      value={field.value}
+    />
  )
 }