mirror of
https://github.com/tormachris/cf-workers-status-page.git
synced 2025-07-06 11:52:48 +02:00
feat: add monitor filter field
This commit is contained in:
42
src/components/monitorFilter.js
Normal file
42
src/components/monitorFilter.js
Normal file
@ -0,0 +1,42 @@
|
||||
import config from '../../config.yaml'
|
||||
import { useState } from 'react'
|
||||
|
||||
export default function MonitorFilter({ active, callback }) {
|
||||
const [input, setInput] = useState('')
|
||||
|
||||
const handleInput = (event) => {
|
||||
// ignore focus trigger
|
||||
if (event.target.value === '/') {
|
||||
return
|
||||
}
|
||||
setInput(event.target.value)
|
||||
callback(event.target.value)
|
||||
}
|
||||
|
||||
const handleKeyDown = (event) => {
|
||||
// blur input field on escape
|
||||
if (event.keyCode === 27) {
|
||||
event.target.blur()
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="ui search">
|
||||
<div className="ui icon input">
|
||||
<input
|
||||
className="prompt"
|
||||
type="text"
|
||||
value={input}
|
||||
onInput={handleInput}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder="Tap '/' to search"
|
||||
tabIndex={0}
|
||||
ref={
|
||||
(e) => e && active && e.focus()
|
||||
}
|
||||
/>
|
||||
<i className="search icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
Reference in New Issue
Block a user