diff options
author | Ernst Widerberg <ernst@sunet.se> | 2022-06-08 10:57:01 +0200 |
---|---|---|
committer | Ernst Widerberg <ernst@sunet.se> | 2022-06-08 11:49:53 +0200 |
commit | 02cfd1180cc07312134e223dd12e5e65c7dfea9c (patch) | |
tree | 8544258642b3e29432ab4596eada0d5ab6029710 | |
parent | 8edfcbb83f233d251458cc46119556f207a277c3 (diff) |
Make functional: SearchForm
-rw-r--r-- | src/components/SearchForm.js | 150 |
1 files changed, 66 insertions, 84 deletions
diff --git a/src/components/SearchForm.js b/src/components/SearchForm.js index 6f626c2..1e56fc7 100644 --- a/src/components/SearchForm.js +++ b/src/components/SearchForm.js @@ -1,102 +1,84 @@ -import React from "react"; +import React, { useState } from "react"; import PropTypes from "prop-types"; import Button from "@mui/material/Button"; import ClearIcon from "@mui/icons-material/Clear"; -import FormControl from "@mui/material/FormControl"; -import IconButton from "@mui/material/IconButton"; import InputAdornment from "@mui/material/InputAdornment"; import MenuItem from "@mui/material/MenuItem"; import Select from "@mui/material/Select"; import TextField from "@mui/material/TextField"; -class SearchForm extends React.Component { - static propTypes = { - filter: PropTypes.func.isRequired - }; +function SearchForm(props) { + // NOTE: This state is for UI only, ListView's "filter" is used for requests. + let [searchField, setSearchField] = useState("port"); + let [searchValue, setSearchValue] = useState(""); - constructor(props) { - super(props); - // NOTE: This state is for UI only, List state's "filter" is used for requests. - this.state = { - searchField: "port", - searchValue: "" - }; - - this.clearSearch = this.clearSearch.bind(this); - this.submitSearch = this.submitSearch.bind(this); - } - - clearSearch(_) { - this.setState({ searchValue: "" }); - this.props.filter(null, null); + function clearSearch(_) { + setSearchValue(""); + props.filter(null, null); } - submitSearch() { + function submitSearch() { // e.preventDefault(); - if (this.state.searchValue === "") this.clearSearch(); - else this.props.filter(this.state.searchField, this.state.searchValue); + if (searchValue === "") clearSearch(); + else props.filter(searchField, searchValue); } - render() { - return ( - <div id="search"> - <TextField - fullWidth - size="small" - sx={{ width: 400 }} - value={this.state.searchValue} - placeholder="Search..." - onChange={event => { - this.setState({ - searchValue: event.target.value - }); - }} - onKeyDown={event => { - if (event.key === "Enter") this.submitSearch(); - if (event.key === "Escape") this.clearSearch(); - }} - InputProps={{ - endAdornment: ( - <InputAdornment position="end"> - {this.state.searchValue !== "" && ( - <ClearIcon - variant="clickable" - onClick={this.clearSearch} - /> - )} - </InputAdornment> - ) - }} - /> - <Select - size="small" - sx={{ width: 200, marginLeft: "1em" }} - value={this.state.searchField} - onChange={event => { - this.setState({ - searchField: event.target.value - }); - }} - > - <MenuItem value="port">Port</MenuItem> - <MenuItem value="domain">Domain</MenuItem> - <MenuItem value="ip">IP</MenuItem> - <MenuItem value="asn">ASN</MenuItem> - <MenuItem value="asn_country_code"> - ASN Country Code - </MenuItem> - </Select> - <Button - variant="contained" - sx={{ marginLeft: "1em" }} - onClick={this.submitSearch} - > - Search - </Button> - </div> - ); - } + return ( + <div id="search"> + <TextField + fullWidth + size="small" + sx={{ width: 400 }} + value={searchValue} + placeholder="Search..." + onChange={event => { + setSearchValue(event.target.value); + }} + onKeyDown={event => { + if (event.key === "Enter") submitSearch(); + if (event.key === "Escape") clearSearch(); + }} + InputProps={{ + endAdornment: ( + <InputAdornment position="end"> + {searchValue !== "" && ( + <ClearIcon + variant="clickable" + onClick={clearSearch} + /> + )} + </InputAdornment> + ) + }} + /> + <Select + size="small" + sx={{ width: 200, marginLeft: "1em" }} + value={searchField} + onChange={event => { + setSearchField(event.target.value); + }} + > + <MenuItem value="port">Port</MenuItem> + <MenuItem value="domain">Domain</MenuItem> + <MenuItem value="ip">IP</MenuItem> + <MenuItem value="asn">ASN</MenuItem> + <MenuItem value="asn_country_code">ASN Country Code</MenuItem> + </Select> + <Button + variant="contained" + sx={{ marginLeft: "1em" }} + onClick={submitSearch} + > + Search + </Button> + </div> + ); } +SearchForm.propTypes = { + filter: PropTypes.func.isRequired +}; + export default SearchForm; |