49 lines
1.3 KiB
TypeScript
49 lines
1.3 KiB
TypeScript
import React, { useState, useEffect } from "react";
|
|
import RegularDropDown from "./RegularDropDown";
|
|
|
|
type LabledDropdownProps = {
|
|
defaultOption: string; // Initial active option
|
|
options: string[]; // Array of dropdown options
|
|
label?: string; // Customizable label text
|
|
onSelect?: (option: string) => void; // Callback when option is selected
|
|
className?: string; // Additional className for styling
|
|
disabled?: boolean; // Disable dropdown
|
|
search?: boolean; // Enable/disable search functionality
|
|
};
|
|
|
|
const LabledDropdown: React.FC<LabledDropdownProps> = ({
|
|
defaultOption,
|
|
options,
|
|
label = "Type",
|
|
onSelect,
|
|
className = "",
|
|
search = false
|
|
}) => {
|
|
const [activeOption, setActiveOption] = useState(defaultOption);
|
|
|
|
// Update active option if defaultOption changes
|
|
useEffect(() => {
|
|
setActiveOption(defaultOption);
|
|
}, [defaultOption]);
|
|
|
|
const handleSelect = (option: string) => {
|
|
setActiveOption(option);
|
|
if (onSelect) {
|
|
onSelect(option);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className={`value-field-container ${className}`}>
|
|
<div className="label">{label}</div>
|
|
<RegularDropDown
|
|
header={activeOption}
|
|
options={options}
|
|
onSelect={handleSelect}
|
|
search={search}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default LabledDropdown; |