[TM-1476] WEB DESIGN: Update the tree species UI to enable users to e…

…nter in data that aligns with taxonomic backbone (#724) * [TM-1476] [TM-13476] add tree species iu * [TM-1476] [TM-13476] fix build * [TM-1476] update snapshots * [TM-1476] Fix lint * [TM-1476] update storybook --------- Co-authored-by: diego-morales-flores-1996 <[email protected]> Co-authored-by: Limber Mamani Vallejos <[email protected]>
wri · Dec 4, 2024 · eab3706 · eab3706
1 parent d71490b
commit eab3706
Show file tree

Hide file tree

Showing 23 changed files with 702 additions and 236 deletions.
diff --git a/src/assets/icons/add-button.svg b/src/assets/icons/add-button.svg
diff --git a/src/assets/icons/edit-ta.svg b/src/assets/icons/edit-ta.svg
diff --git a/src/assets/icons/new-tag-tree-species.svg b/src/assets/icons/new-tag-tree-species.svg
diff --git a/src/assets/icons/non-scientific name.svg b/src/assets/icons/non-scientific name.svg
diff --git a/src/assets/icons/trash-ta.svg b/src/assets/icons/trash-ta.svg
diff --git a/src/components/elements/Inputs/AutoCompleteInput/AutoCompleteInput.tsx b/src/components/elements/Inputs/AutoCompleteInput/AutoCompleteInput.tsx
@@ -1,5 +1,6 @@
 import { Popover, Transition } from "@headlessui/react";
 import { useT } from "@transifex/react";
+import classNames from "classnames";
 import { ChangeEvent, forwardRef, Fragment, Ref, useState } from "react";
 import { Else, If, Then } from "react-if";
 
@@ -11,11 +12,16 @@ import Input, { InputProps } from "../Input/Input";
 export interface AutoCompleteInputProps extends InputProps {
   onSearch: (query: string) => Promise<string[]>;
   disableAutoComplete?: boolean;
+  classNameMenu?: string;
+  onSelected?: (item: string) => void;
 }
 
 //TODO: Bugfix: Users can enter space in this input
 const AutoCompleteInput = forwardRef(
-  ({ onSearch, disableAutoComplete, ...inputProps }: AutoCompleteInputProps, ref?: Ref<HTMLInputElement>) => {
+  (
+    { onSearch, disableAutoComplete, classNameMenu, onSelected, ...inputProps }: AutoCompleteInputProps,
+    ref?: Ref<HTMLInputElement>
+  ) => {
     const t = useT();
     const [list, setList] = useState<string[]>([]);
     const [loading, setLoading] = useState(false);
@@ -27,6 +33,8 @@ const AutoCompleteInput = forwardRef(
         inputProps.onChange?.({ target: { name: inputProps.name, value: item } } as ChangeEvent<HTMLInputElement>);
       }
 
+      onSelected?.(item);
+
       setList([]);
     };
 
@@ -63,7 +71,10 @@ const AutoCompleteInput = forwardRef(
           leaveFrom="transform scale-100 opacity-100"
           leaveTo="transform scale-95 opacity-0"
         >
-          <Popover.Panel as="div" className="border-light mt-2 max-h-[230px] overflow-auto rounded-lg">
+          <Popover.Panel
+            as="div"
+            className={classNames("border-light mt-2 max-h-[230px] overflow-auto rounded-lg", classNameMenu)}
+          >
             <If condition={loading}>
               <Then>
                 <Text variant="text-body-600" className="p-3">

diff --git a/src/components/elements/Inputs/Input/Input.tsx b/src/components/elements/Inputs/Input/Input.tsx
@@ -14,7 +14,7 @@ export interface InputProps
   extends InputWrapperProps,
     Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "type" | "form"> {
   name: string;
-  variant?: "secondary" | "default" | "login" | "signup" | "monitored";
+  variant?: "secondary" | "default" | "login" | "signup" | "monitored" | "treePlanted";
   formHook?: UseFormReturn<any>;
   clearable?: boolean;
   iconButtonProps?: IconButtonProps;
@@ -112,6 +112,11 @@ const Input = forwardRef(
           true,
         "pl-4": inputProps.type === "number",
         "border-neutral-300": !error
+      },
+      treePlanted: {
+        "py-[7.5px] py-1.5 !w-[100px] text-center border border-blueCustom-700 rounded hover:border-primary hover:shadow-blue-border opacity-60 outline-none text-14-light !font-primary":
+          true,
+        "text-center": inputProps.type === "number"
       }
     };