All files / src/components/common/DropdownOptions 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
58
59
60
61
62
63
64
65
66
67
68
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React from "react";
import CustomInput from "../../Inputs/CustomInput.tsx";
import { InputTypes } from "../../../types/inputs/index.ts";
import useBasicSearch from "../../../hooks/common/useBasicSearch";
 
type DropdownOptionsPropTypes = {
  options: any[];
  handleSelect: (
    e: React.MouseEvent<HTMLDivElement, MouseEvent>,
    option: any,
  ) => void;
};
 
function DropdownOptions({ options, handleSelect }: DropdownOptionsPropTypes) {
  const { filteredList, query, setValue, isEmpty, notFound } = useBasicSearch(
    options,
    ["label"],
  );
 
  const handleChange = (val: string) => {
    setValue(val);
  };
 
  return (
    <div className="origin-top-right absolute left-0 w-full max-h-[200px] overflow-scroll rounded-md shadow-lg bg-white ring-1 ring-gray-200 ring-opacity-5 z-10">
      <div
        className="flex flex-col gap-3 p-2"
        role="menu"
        aria-orientation="vertical"
        aria-labelledby="options-menu">
        <CustomInput
          inputType={InputTypes.TEXT}
          value={query}
          placeholder="Search options..."
          className="!w-full"
          containerClassName="w-full sticky top-2"
          handleChange={handleChange}
        />
        {notFound && (
          <div
            className="block p-2 text-xs text-gray-700 hover:bg-gray-100 hover:text-gray-900 cursor-pointer rounded-md"
            role="menuitem">
            No options matching
          </div>
        )}
        {isEmpty && (
          <div
            className="block p-2 text-xs text-gray-700 hover:bg-gray-100 hover:text-gray-900 cursor-pointer rounded-md"
            role="menuitem">
            No options available
          </div>
        )}
        {filteredList?.map((option: any, index: number) => (
          <div
            key={index}
            className="block p-2 text-xs text-gray-700 hover:bg-gray-100 hover:text-gray-900 cursor-pointer rounded-md max-w-xs line-clamp-2"
            role="menuitem"
            onClick={(e) => handleSelect(e, option)}>
            {option.label}
          </div>
        ))}
      </div>
    </div>
  );
}
 
export default DropdownOptions;