87 lines
2.2 KiB
TypeScript
87 lines
2.2 KiB
TypeScript
import React, { useState } from "react";
|
|
import RenameInput from "./RenameInput";
|
|
|
|
type InputWithDropDownProps = {
|
|
label: string;
|
|
value: string;
|
|
min?: number;
|
|
step?: number;
|
|
defaultValue?: string;
|
|
options?: string[]; // Array of dropdown options
|
|
activeOption?: string; // The currently active dropdown option
|
|
onClick?: () => void;
|
|
onChange: (newValue: string) => void;
|
|
editableLabel?: boolean;
|
|
placeholder?: string; // New placeholder prop
|
|
};
|
|
|
|
const InputWithDropDown: React.FC<InputWithDropDownProps> = ({
|
|
label,
|
|
value,
|
|
min,
|
|
step,
|
|
defaultValue,
|
|
options,
|
|
activeOption,
|
|
onClick,
|
|
onChange,
|
|
editableLabel = false,
|
|
placeholder = "Inherit", // Default empty placeholder
|
|
}) => {
|
|
const separatedWords = label
|
|
.split(/(?=[A-Z])/)
|
|
.map((word) => word.trim())
|
|
.toString();
|
|
|
|
const [openDropdown, setOpenDropdown] = useState(false);
|
|
|
|
return (
|
|
<div className="value-field-container">
|
|
{editableLabel ? (
|
|
<RenameInput value={label} />
|
|
) : (
|
|
<label htmlFor={separatedWords} className="label">
|
|
{label}
|
|
</label>
|
|
)}
|
|
<div className="input default" id={separatedWords}>
|
|
<input
|
|
min={min}
|
|
step={step}
|
|
type="number"
|
|
defaultValue={value}
|
|
onChange={(e) => {
|
|
onChange(e.target.value);
|
|
}}
|
|
placeholder={placeholder} // Added placeholder prop
|
|
/>
|
|
|
|
{activeOption && (
|
|
<div
|
|
className="dropdown"
|
|
onClick={() => {
|
|
setOpenDropdown(true);
|
|
}}
|
|
>
|
|
<div className="active-option">{activeOption}</div>
|
|
{options && openDropdown && (
|
|
<div className="dropdown-options-list">
|
|
{options.map((option, index) => (
|
|
<div
|
|
key={index}
|
|
className={"dropdown-option"}
|
|
onClick={onClick}
|
|
>
|
|
{option}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default InputWithDropDown; |