All files / src/components/common/TypingDropdown index.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React, { useEffect, useState } from "react";
import useDropdown from "../../../hooks/common/useDropdown.ts";
import DropdownOptions from "../DropdownOptions/index.tsx";
import DropdownTitle from "../DropdownTitle/index.tsx";
 
const TypingDropdown = ({
  data,
  selected,
  handleChange: change,
  disabled,
  value,
  ...props
}: any) => {
  const { dropdownRef, handleSelect, isOpen, setIsOpen, toggle } =
    useDropdown(change);
  const [filteredOptions, setFilteredOptions] = useState(data);
 
  useEffect(() => {
    Iif (!selected) {
      setFilteredOptions(data);
      return;
    }
    const filtered = data?.filter((option: any) =>
      option?.label?.toLowerCase().includes(selected?.toLowerCase()),
    );
    setFilteredOptions(filtered);
  }, [selected, data]);
 
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const val = e.target.value;
    change(val);
    setIsOpen(true);
  };
 
  return (
    <div ref={dropdownRef} className="relative w-full inline-block text-left">
      <DropdownTitle
        {...props}
        toggle={toggle}
        value={selected}
        disabled={disabled}
        inputDisabed={false}
        onChange={handleChange}
      />
 
      {isOpen && filteredOptions?.length > 0 && !disabled && (
        <DropdownOptions
          options={filteredOptions}
          handleSelect={handleSelect}
        />
      )}
    </div>
  );
};
 
export default TypingDropdown;