jobiqo-cl
Version:
[](https://circleci.com/gh/jobiqo/jobiqo-cl)
50 lines (47 loc) • 1.97 kB
JavaScript
import React__default, { Component } from 'react';
import { SearchIcon } from '../../../../icons/Search.js';
import { SearchBox as SearchBox$1, Form, SearchInput, SearchButton } from './styles.js';
/**
* @file index.tsx
*
* @fileoverview Renders a search box for the search pages (jobs / companies / resumes).
*/
/**
* The search box to use on search pages. Contains a fulltext search input and a
* submit button element. Can be usd on resume searches and job searches.
*/
class SearchBox extends Component {
constructor() {
super(...arguments);
this.state = {
value: ''
};
/**
* Handle change event on the search input.
*/
this.handleChange = (event) => {
const inputValue = event.currentTarget.value;
this.setState(prevState => ({ value: inputValue }));
};
/**
* Handle a submit event on the form.
*/
this.handleSubmit = (event) => {
// Call the prop named onSubmit
this.props.onSubmit(this.state.value);
event.preventDefault();
};
}
render() {
return (React__default.createElement(SearchBox$1, { "data-testid": "searchbox-wrapper" },
React__default.createElement(Form, { "data-testid": "searchbox-form", role: "search", onSubmit: this.handleSubmit },
React__default.createElement(SearchInput, { placeholder: "Search anything", name: "search", type: "search", value: this.state.value, onChange: this.handleChange }),
React__default.createElement(SearchButton, { "data-testid": "searchbox-button", type: "submit", triggered: this.state.value !== '' },
React__default.createElement(SearchIcon, { height: "25", width: "25", title: "Submit" })))));
}
}
SearchBox.defaultProps = {
onSubmit: null
};
export default SearchBox;
export { SearchBox };