2023-05-19 23:14:55 +02:00
|
|
|
import React from "@modules/react";
|
2024-02-22 05:10:24 +01:00
|
|
|
import Close from "@ui/icons/close";
|
2023-05-20 00:37:21 +02:00
|
|
|
import SearchIcon from "@ui/icons/search";
|
2019-06-29 06:47:56 +02:00
|
|
|
|
2024-02-22 00:25:54 +01:00
|
|
|
const {useState, useEffect, useCallback, useRef} = React;
|
2020-10-27 19:42:49 +01:00
|
|
|
|
|
|
|
|
2023-03-07 01:17:28 +01:00
|
|
|
export default function Search({onChange, className, onKeyDown, placeholder}) {
|
2024-02-22 00:25:54 +01:00
|
|
|
const input = useRef(null);
|
2023-03-07 01:17:28 +01:00
|
|
|
const [value, setValue] = useState("");
|
2024-02-22 00:25:54 +01:00
|
|
|
|
|
|
|
// focus search bar on page select
|
|
|
|
useEffect(()=>{
|
|
|
|
if (!input.current) return;
|
|
|
|
input.current.focus();
|
|
|
|
}, []);
|
|
|
|
|
2023-03-07 01:17:28 +01:00
|
|
|
const change = useCallback((e) => {
|
|
|
|
onChange?.(e);
|
|
|
|
setValue(e.target.value);
|
2023-03-20 03:23:11 +01:00
|
|
|
}, [onChange]);
|
2023-03-07 01:17:28 +01:00
|
|
|
|
2024-02-22 05:10:24 +01:00
|
|
|
const reset = useCallback(() => {
|
|
|
|
onChange?.({target: {value: ""}});
|
|
|
|
setValue("");
|
|
|
|
}, [onChange]);
|
|
|
|
|
2023-03-07 01:17:28 +01:00
|
|
|
return <div className={"bd-search-wrapper" + (className ? ` ${className}` : "")}>
|
2024-02-22 00:25:54 +01:00
|
|
|
<input onChange={change} onKeyDown={onKeyDown} type="text" className="bd-search" placeholder={placeholder} maxLength="50" value={value} ref={input}/>
|
2024-02-22 05:10:24 +01:00
|
|
|
{!value && <SearchIcon />}
|
|
|
|
{value && <button className="bd-button" onClick={reset}><Close size="16px" /></button>}
|
2023-03-07 01:17:28 +01:00
|
|
|
</div>;
|
|
|
|
|
2019-06-29 06:47:56 +02:00
|
|
|
}
|