1
0
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:
Alex
2020-11-17 00:50:19 +01:00
parent 9e178fe386
commit e2c6a6a538
5 changed files with 116 additions and 7 deletions

View 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>
)
}