RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-11 19:44:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

show a placeholder

Browse Source
This commit is contained in:
SrGooglo 2025-02-05 02:40:26 +00:00
parent 7c055e8024
commit 521f239359
1 changed files with 42 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
packages/app/src/components/SearchButton/index.jsx
View File

@ -5,55 +5,55 @@ import classnames from "classnames"
import "./index.less" import "./index.less"
const SearchButton = (props) => { const SearchButton = (props) => {
const searchBoxRef = React.useRef(null) const searchBoxRef = React.useRef(null)
const [value, setValue] = React.useState() const [value, setValue] = React.useState()
const [open, setOpen] = React.useState() const [open, setOpen] = React.useState()
const openSearchBox = (to) => { const openSearchBox = (to) => {
to = to ?? !open to = to ?? !open
setOpen(to) setOpen(to)
if (to) { if (to) {
searchBoxRef.current?.focus() searchBoxRef.current?.focus()
} }
} }
const handleOnChange = (value) => { const handleOnChange = (value) => {
setValue(value) setValue(value)
if (!value || value.length === 0 || value === "" || value === " ") { if (!value || value.length === 0 || value === "" || value === " ") {
if (typeof props.onEmpty === "function") { if (typeof props.onEmpty === "function") {
props.onEmpty() props.onEmpty()
} }
return false return false
} }
if (typeof props.onChange === "function") { if (typeof props.onChange === "function") {
props.onChange(value) props.onChange(value)
} }
} }
return <div return (
className="searchButton" <div className="searchButton" onClick={() => openSearchBox(true)}>
onClick={() => openSearchBox(true)} <Input
> ref={searchBoxRef}
<Input className={classnames("searchBox", { ["open"]: open })}
ref={searchBoxRef} placeholder="Type for search..."
className={classnames("searchBox", { ["open"]: open })} onSearch={props.onSearch}
onSearch={props.onSearch} onChange={handleOnChange}
onChange={handleOnChange} value={value}
value={value} onFocus={() => openSearchBox(true)}
onFocus={() => openSearchBox(true)} onBlur={() => {
onBlur={() => { if (value.length === 0) {
if (value.length === 0) { openSearchBox(false)
openSearchBox(false) }
} }}
}} disabled={props.disabled}
disabled={props.disabled} />
/> </div>
</div> )
} }
export default SearchButton export default SearchButton