Add filter placeholder
This commit is contained in:
parent
b39017b6f2
commit
5f5f15b9f6
2 changed files with 19 additions and 9 deletions
|
@ -30,14 +30,15 @@ export function ProjectSelect({ onChange, selected }: Props) {
|
|||
|
||||
return (
|
||||
<Select
|
||||
options={options}
|
||||
selected={String(selected)}
|
||||
className="max-h-96 overflow-y-scroll overflow-x-none w-3/4"
|
||||
placeholder="Any project"
|
||||
filterPlaceholder="Filter by project"
|
||||
onChange={(option: Option) => {
|
||||
const project = projects.find(p => p.id == option.id);
|
||||
onChange(project);
|
||||
}}
|
||||
options={options}
|
||||
selected={String(selected)}
|
||||
placeholder="Any project"
|
||||
className="max-h-96 overflow-y-scroll overflow-x-none w-3/4"
|
||||
/>
|
||||
);
|
||||
1;
|
||||
|
|
|
@ -25,6 +25,7 @@ type Props = {
|
|||
onChange: (o: Option) => void;
|
||||
placeholder: string;
|
||||
className?: string;
|
||||
filterPlaceholder?: string;
|
||||
isFilterable?: boolean;
|
||||
};
|
||||
|
||||
|
@ -40,6 +41,7 @@ export const Select = ({
|
|||
selected,
|
||||
placeholder,
|
||||
className,
|
||||
filterPlaceholder = "Filter by text",
|
||||
isFilterable = true,
|
||||
}: Props) => {
|
||||
const selectOptions = [
|
||||
|
@ -82,7 +84,10 @@ export const Select = ({
|
|||
<ul className={className}>
|
||||
{isFilterable && isOpen && (
|
||||
<li className="flex">
|
||||
<FilterInput onTextChange={text => setFilterText(text)} />
|
||||
<Filter
|
||||
placeholder={filterPlaceholder}
|
||||
onTextChange={text => setFilterText(text)}
|
||||
/>
|
||||
</li>
|
||||
)}
|
||||
{selectOptions
|
||||
|
@ -108,11 +113,17 @@ export const Select = ({
|
|||
);
|
||||
};
|
||||
|
||||
type FilterInputProps = { onTextChange: (text: string) => void };
|
||||
function FilterInput({ onTextChange }: FilterInputProps) {
|
||||
type FilterProps = {
|
||||
onTextChange: (text: string) => void;
|
||||
placeholder: string;
|
||||
};
|
||||
function Filter({ onTextChange, placeholder }: FilterProps) {
|
||||
return (
|
||||
<input
|
||||
type="text"
|
||||
className="p-3 rounded border-secondary border-solid outline-none"
|
||||
autoFocus={true}
|
||||
placeholder={placeholder}
|
||||
onClick={e => e.stopPropagation()}
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const {
|
||||
|
@ -120,8 +131,6 @@ function FilterInput({ onTextChange }: FilterInputProps) {
|
|||
} = e;
|
||||
onTextChange(text);
|
||||
}}
|
||||
type="text"
|
||||
placeholder="Filter by text"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue