Add Select/index.tsx, Select/Filter.tsx
This commit is contained in:
parent
12a5d51ab1
commit
935643cff2
2 changed files with 25 additions and 22 deletions
24
client/src/js/components/Select/Filter.tsx
Normal file
24
client/src/js/components/Select/Filter.tsx
Normal file
|
@ -0,0 +1,24 @@
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
onTextChange: (text: string) => void;
|
||||||
|
placeholder: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function Filter({ onTextChange, placeholder }: Props) {
|
||||||
|
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 {
|
||||||
|
target: { value: text },
|
||||||
|
} = e;
|
||||||
|
onTextChange(text);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
|
@ -1,4 +1,5 @@
|
||||||
import { ReactNode, useState, useEffect } from "react";
|
import { ReactNode, useState, useEffect } from "react";
|
||||||
|
import { Filter } from "./Filter";
|
||||||
|
|
||||||
const LI_CLASSNAME = [
|
const LI_CLASSNAME = [
|
||||||
"flex",
|
"flex",
|
||||||
|
@ -112,25 +113,3 @@ export const Select = ({
|
||||||
</ul>
|
</ul>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
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 {
|
|
||||||
target: { value: text },
|
|
||||||
} = e;
|
|
||||||
onTextChange(text);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
Loading…
Reference in a new issue