mirror of
https://github.com/ragestudio/comty.git
synced 2025-06-10 19:14:16 +00:00
show a placeholder
This commit is contained in:
parent
7c055e8024
commit
521f239359
@ -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
|
Loading…
x
Reference in New Issue
Block a user