Replace aria with hui on text-area input.

plezanje-net · Jan 18, 2025 · 93f20be · 93f20be
1 parent 969c59e
commit 93f20be
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 73 deletions.
diff --git a/src/app/[lang]/edit/(crag)/components/crag-form.tsx b/src/app/[lang]/edit/(crag)/components/crag-form.tsx
@@ -369,7 +369,7 @@ function CragForm({ formType, countriesWithAreas, crag }: TCragFormProps) {
                 label="Opis plezališča"
                 value={cragDescription}
                 onChange={setCragDescription}
-                isDisabled={loading}
+                disabled={loading}
               />
             </div>
 
@@ -518,7 +518,7 @@ function CragForm({ formType, countriesWithAreas, crag }: TCragFormProps) {
                 label="Opis dostopa"
                 value={approachDescription}
                 onChange={setApproachDescription}
-                isDisabled={loading}
+                disabled={loading}
               />
             </div>
 

diff --git a/src/app/sandbox/text-area/page.tsx b/src/app/sandbox/text-area/page.tsx
@@ -1,36 +1,46 @@
 "use client";
+
 import TextArea from "@/components/ui/text-area";
+import { useState } from "react";
 
 function TextAreaPage() {
+  const [value1, setValue1] = useState("");
+  const [value2, setValue2] = useState("Raje idi spat!");
+  const [value3, setValue3] = useState("Ti bo dalo malo notranjega miru.");
+
   return (
     <div className="m-8">
       <h1 className="text-xl">Text area demo</h1>
 
       <div className="mt-10 w-96">
         <TextArea
+          value={value1}
+          onChange={setValue1}
           label="Default"
           description="Leave a comment"
           placeholder="Your comment goes here."
         />
       </div>
 
       <div className="mt-10 w-96">
-        <TextArea label="Prefilled" defaultValue="Raje idi spat!" />
+        <TextArea value={value2} label="Prefilled" onChange={setValue2} />
       </div>
 
       <div className="mt-10 w-96">
         <TextArea
+          value={value3}
+          onChange={setValue3}
           label="Invalid"
-          defaultValue="Ti bo dalo malo notranjega miru."
           errorMessage="That's nonsense"
         />
       </div>
 
       <div className="mt-10 w-96">
         <TextArea
+          value="Namesto da daješ svoje nebulozne predloge."
+          onChange={() => {}}
           label="Disabled"
-          defaultValue="Namesto da daješ svoje nebulozne predloge."
-          isDisabled
+          disabled
         />
       </div>
     </div>

diff --git a/src/components/log-dialog/log-dialog.tsx b/src/components/log-dialog/log-dialog.tsx
@@ -219,7 +219,7 @@ function LogDialog({ openTrigger }: TLogDialogProps) {
               label="Opombe"
               placeholder="Vnesi opombe k aktivnosti v plezališču."
               description="Opombe bodo vidne samo tebi."
-              isDisabled={loading}
+              disabled={loading}
             />
           </div>
 

diff --git a/src/components/log-dialog/log-route.tsx b/src/components/log-dialog/log-route.tsx
@@ -164,12 +164,12 @@ function LogRoute({
         <div className="pt-6 mt-6 border-t border-neutral-200"></div>
         <div>
           <TextArea
-            value={note}
+            value={note || ""}
             onChange={(n) => setRouteNote(route.key, n)}
             label="Opomba"
             placeholder="Vnesi opombo k vzponu."
             description="Opomba bo vidna samo tebi."
-            isDisabled={loading}
+            disabled={loading}
           />
         </div>
         <div className="pt-6 mt-6 border-t border-neutral-200"></div>

diff --git a/src/components/ui/text-area.tsx b/src/components/ui/text-area.tsx
@@ -1,79 +1,51 @@
-import { useRef, useState } from "react";
-import { useTextField, useFocus, AriaTextFieldOptions } from "react-aria";
+import { Description, Field, Label, Textarea } from "@headlessui/react";
 
-type TextAreaProps = {
+type TTextAreaProps = {
+  name?: string;
+  value: string;
+  onChange: (value: string) => void;
   label?: string;
+  placeholder?: string;
   description?: string;
   errorMessage?: string;
-  isDisabled?: boolean;
+  disabled?: boolean;
   rows?: number;
-} & AriaTextFieldOptions<"textarea">;
-
-function TextArea(props: TextAreaProps) {
-  const { isDisabled, label, description, errorMessage, rows = 6 } = props;
-  const textareaRef = useRef(null);
-  const [isFocused, setIsFocused] = useState(false);
-
-  const { labelProps, inputProps, descriptionProps, errorMessageProps } =
-    useTextField(
-      {
-        ...props,
-        inputElementType: "textarea",
-      },
-      textareaRef
-    );
-
-  const { focusProps } = useFocus({
-    onFocusChange: (isFocused) => setIsFocused(isFocused),
-  });
-
+};
+
+function TextArea({
+  name,
+  value,
+  onChange,
+  label,
+  placeholder,
+  description,
+  errorMessage,
+  disabled,
+  rows = 6,
+}: TTextAreaProps) {
   return (
-    <div>
-      {label && (
-        <label {...labelProps} className="block">
-          {label}
-        </label>
-      )}
-      <div
-        className={`flex items-center rounded-lg border focus:ring focus:ring-blue-100
-                    ${
-                      isDisabled
-                        ? "border-neutral-300 bg-neutral-100 text-neutral-400"
-                        : "border-neutral-400"
-                    }
-                    ${
-                      isFocused
-                        ? "ring" +
-                          (errorMessage ? " ring-red-100" : " ring-blue-100")
-                        : ""
-                    }
-                    ${label ? "mt-2" : ""}
-                    ${errorMessage ? "border-red-500 focus:ring-red-100" : ""}
-                  `}
-      >
-        <textarea
-          {...inputProps}
-          {...focusProps}
-          rows={rows}
-          ref={textareaRef}
-          className={
-            "flex-1 rounded-lg py-2 px-4 placeholder:text-neutral-400 focus:outline-none"
-          }
-        />
-      </div>
+    <Field disabled={disabled}>
+      {label && <Label className="mb-2 block">{label}</Label>}
+
+      <Textarea
+        name={name}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        rows={rows}
+        placeholder={placeholder}
+        className={`block w-full py-2 px-4 rounded-lg border outline-none focus:ring placeholder:text-neutral-400
+          ${disabled ? "border-neutral-300 bg-neutral-100 text-neutral-400" : "border-neutral-400"}
+          ${errorMessage ? "focus:ring-red-100 border-red-500" : "focus:ring-blue-100"}`}
+      />
 
       {description && !errorMessage && (
-        <div {...descriptionProps} className="mt-1 text-sm">
-          {description}
-        </div>
+        <Description className="text-sm mt-1">{description}</Description>
       )}
 
       {errorMessage && (
-        <div {...errorMessageProps} className="mt-1 text-sm text-red-500">
-          {props.errorMessage}
-        </div>
+        <div className="text-sm mt-1 text-red-500">{errorMessage}</div>
       )}
-    </div>
+    </Field>
   );
 }