Reorganise components

2026-07-23 04:26:57 +00:00 · 2023-09-14 11:35:30 +02:00
parent bff704077c
commit ac467d7c38
21 changed files with 14 additions and 14 deletions
@@ -0,0 +1,88 @@
+import React from "react";
+
+import { get } from "lodash";
+import { Controller, useFormContext } from "react-hook-form";
+import { twMerge } from "tailwind-merge";
+
+import { Field, FieldProps } from "./Field";
+
+export const TextAreaField = (
+  props: FieldProps &
+    React.HTMLProps<HTMLTextAreaElement> & {
+      handleChanged?: (props: { name: string }) => void;
+      startIcon?: React.ReactNode;
+    },
+) => {
+  const {
+    name,
+    label,
+    required,
+    disabled,
+    className,
+    labelClassName,
+    childrenWrapperClassName,
+    hideErrorMessage = false,
+
+    startIcon,
+    handleChanged,
+
+    ...rest
+  } = props;
+  const form = useFormContext();
+
+  const {
+    formState: { errors },
+  } = form;
+
+  const hasError = !!get(errors, name)?.message;
+
+  return (
+    <Field
+      {...{
+        name,
+        label,
+        required,
+        className,
+        labelClassName,
+        childrenWrapperClassName,
+        hideErrorMessage,
+      }}
+    >
+      <div className="flex w-full flex-col">
+        <Controller
+          control={form.control}
+          name={name}
+          render={({ field }) => (
+            <div className="relative">
+              {startIcon && (
+                <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+                  {startIcon}
+                </div>
+              )}
+              <textarea
+                {...form.register(name, {
+                  required,
+                })}
+                aria-required={required}
+                aria-invalid={hasError}
+                disabled={disabled}
+                className={twMerge(
+                  "flex w-full content-center rounded-lg border p-3 text-sm",
+                  "border-gray-300 bg-gray-50  text-gray-900 shadow-sm focus:border-primary-500 focus:ring-primary-500",
+                  "dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500",
+                  hasError && "!border-orange-700 focus:!border-orange-700",
+                  disabled && "dark:bg-gray-50",
+                )}
+                {...rest}
+                onChange={(e) => {
+                  field.onChange(e);
+                }}
+                value={field.value}
+              />
+            </div>
+          )}
+        />
+      </div>
+    </Field>
+  );
+};