jobiqo-cl/lib/src/components/03-molecules/07-search/01-search-box/index.js

[](https://circleci.com/gh/jobiqo/jobiqo-cl)

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = require('react');
var React__default = _interopDefault(React);
var Search = require('../../../../icons/Search.js');
var styles = require('./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 React.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(styles.SearchBox, { "data-testid": "searchbox-wrapper" },
            React__default.createElement(styles.Form, { "data-testid": "searchbox-form", role: "search", onSubmit: this.handleSubmit },
                React__default.createElement(styles.SearchInput, { placeholder: "Search anything", name: "search", type: "search", value: this.state.value, onChange: this.handleChange }),
                React__default.createElement(styles.SearchButton, { "data-testid": "searchbox-button", type: "submit", triggered: this.state.value !== '' },
                    React__default.createElement(Search.SearchIcon, { height: "25", width: "25", title: "Submit" })))));
    }
}
SearchBox.defaultProps = {
    onSubmit: null
};

exports.SearchBox = SearchBox;
exports.default = SearchBox;