Allow clearing search field
This commit is contained in:
parent
76bada0f16
commit
a3b5acb788
|
@ -24,4 +24,18 @@
|
||||||
.bd-search-wrapper > svg {
|
.bd-search-wrapper > svg {
|
||||||
margin-right: 2px;
|
margin-right: 2px;
|
||||||
fill: var(--interactive-normal);
|
fill: var(--interactive-normal);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-search-wrapper > .bd-button {
|
||||||
|
margin-right: 2px;
|
||||||
|
background: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-search-wrapper > .bd-button > svg .fill {
|
||||||
|
fill: var(--interactive-normal);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-search-wrapper > .bd-button:hover > svg .fill {
|
||||||
|
fill: var(--interactive-hover);
|
||||||
}
|
}
|
|
@ -1,4 +1,5 @@
|
||||||
import React from "@modules/react";
|
import React from "@modules/react";
|
||||||
|
import Close from "@ui/icons/close";
|
||||||
import SearchIcon from "@ui/icons/search";
|
import SearchIcon from "@ui/icons/search";
|
||||||
|
|
||||||
const {useState, useEffect, useCallback, useRef} = React;
|
const {useState, useEffect, useCallback, useRef} = React;
|
||||||
|
@ -19,9 +20,15 @@ export default function Search({onChange, className, onKeyDown, placeholder}) {
|
||||||
setValue(e.target.value);
|
setValue(e.target.value);
|
||||||
}, [onChange]);
|
}, [onChange]);
|
||||||
|
|
||||||
|
const reset = useCallback(() => {
|
||||||
|
onChange?.({target: {value: ""}});
|
||||||
|
setValue("");
|
||||||
|
}, [onChange]);
|
||||||
|
|
||||||
return <div className={"bd-search-wrapper" + (className ? ` ${className}` : "")}>
|
return <div className={"bd-search-wrapper" + (className ? ` ${className}` : "")}>
|
||||||
<input onChange={change} onKeyDown={onKeyDown} type="text" className="bd-search" placeholder={placeholder} maxLength="50" value={value} ref={input}/>
|
<input onChange={change} onKeyDown={onKeyDown} type="text" className="bd-search" placeholder={placeholder} maxLength="50" value={value} ref={input}/>
|
||||||
<SearchIcon />
|
{!value && <SearchIcon />}
|
||||||
|
{value && <button className="bd-button" onClick={reset}><Close size="16px" /></button>}
|
||||||
</div>;
|
</div>;
|
||||||
|
|
||||||
}
|
}
|
Loading…
Reference in New Issue