vnext/src/ui/SearchBox.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

import React from 'react';
import { useFormState } from 'react-use-form-state';

/**
 * @typedef {Object} SearchBoxPropsFields
 * @property {function} onSearch
 */

 /**
 * @typedef {SearchBoxPropsFields} SearchBoxProps
 */

/**
 * @param {SearchBoxProps} props
 */
function SearchBox({ onSearch }) {
    let onSubmit = (/** @type React.FormEvent<HTMLFormElement> */ event) => {
        event.preventDefault();
        onSearch(formState.values.search);
    };
    const [formState, { text }] = useFormState();
    return (
        <form onSubmit={onSubmit}>
            <input name="search" className="text"
                placeholder="Search..." value={formState.values.search} {...text('search')} />
        </form>
    );
}

export default SearchBox;