132 lines
4.0 KiB
JavaScript
132 lines
4.0 KiB
JavaScript
import React, { useState, useEffect, useRef } from "react";
|
|
import { useFormContext } from "react-hook-form";
|
|
import "./MultiSelectDropdown.css";
|
|
|
|
const SelectMultiple = ({
|
|
name,
|
|
options = [],
|
|
label = "Select options",
|
|
labelKey = "name",
|
|
valueKey = "id",
|
|
placeholder = "Please select...",
|
|
IsLoading = false,
|
|
}) => {
|
|
const { setValue, watch } = useFormContext();
|
|
const selectedValues = watch(name) || [];
|
|
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const [searchText, setSearchText] = useState("");
|
|
const dropdownRef = useRef(null);
|
|
|
|
useEffect(() => {
|
|
const handleClickOutside = (e) => {
|
|
if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
|
|
setIsOpen(false);
|
|
}
|
|
};
|
|
document.addEventListener("mousedown", handleClickOutside);
|
|
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
}, []);
|
|
|
|
const handleCheckboxChange = (value) => {
|
|
const updated = selectedValues.includes(value)
|
|
? selectedValues.filter((v) => v !== value)
|
|
: [...selectedValues, value];
|
|
|
|
setValue(name, updated, { shouldValidate: true });
|
|
};
|
|
|
|
const filteredOptions = options.filter((item) =>
|
|
item[labelKey]?.toLowerCase().includes(searchText.toLowerCase())
|
|
);
|
|
|
|
return (
|
|
<div ref={dropdownRef} className="multi-select-dropdown-container">
|
|
<label className="form-label mb-1">{label}</label>
|
|
|
|
<div
|
|
className="multi-select-dropdown-header"
|
|
onClick={() => setIsOpen((prev) => !prev)}
|
|
>
|
|
<span
|
|
className={
|
|
selectedValues.length > 0
|
|
? "placeholder-style-selected"
|
|
: "placeholder-style"
|
|
}
|
|
>
|
|
<div className="selected-badges-container">
|
|
{selectedValues.length > 0 ? (
|
|
selectedValues.map((val) => {
|
|
const found = options.find((opt) => opt[valueKey] === val);
|
|
return (
|
|
<span
|
|
key={val}
|
|
className="badge badge-selected-item mx-1 mb-1"
|
|
>
|
|
{found ? found[labelKey] : ""}
|
|
</span>
|
|
);
|
|
})
|
|
) : (
|
|
<span className="placeholder-text">{placeholder}</span>
|
|
)}
|
|
</div>
|
|
</span>
|
|
<i className="bx bx-chevron-down"></i>
|
|
</div>
|
|
|
|
{isOpen && (
|
|
<div className="multi-select-dropdown-options">
|
|
<div className="multi-select-dropdown-search">
|
|
<input
|
|
type="text"
|
|
placeholder="Search..."
|
|
value={searchText}
|
|
onChange={(e) => setSearchText(e.target.value)}
|
|
className="multi-select-dropdown-search-input"
|
|
/>
|
|
</div>
|
|
|
|
{filteredOptions.map((item) => {
|
|
const labelVal = item[labelKey];
|
|
const valueVal = item[valueKey];
|
|
const isChecked = selectedValues.includes(valueVal);
|
|
|
|
return (
|
|
<div
|
|
key={valueVal}
|
|
className={`multi-select-dropdown-option ${
|
|
isChecked ? "selected" : ""
|
|
}`}
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
className="custom-checkbox form-check-input"
|
|
checked={isChecked}
|
|
onChange={() => handleCheckboxChange(valueVal)}
|
|
/>
|
|
<label className="text-secondary">{labelVal}</label>
|
|
</div>
|
|
);
|
|
})}
|
|
{!IsLoading && filteredOptions.length === 0 && (
|
|
<div className="multi-select-dropdown-Not-found">
|
|
<label className="text-muted">
|
|
Not Found {`'${searchText}'`}
|
|
</label>
|
|
</div>
|
|
)}
|
|
{IsLoading && filteredOptions.length === 0 && (
|
|
<div className="multi-select-dropdown-Not-found">
|
|
<label className="text-muted">Loading...</label>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SelectMultiple;
|