Source: shared/components/pagination/Search.es.js

/**
 * Copyright (c) 2000-present Liferay, Inc. All rights reserved.
 *
 * The contents of this file are subject to the terms of the Liferay Enterprise
 * Subscription License ("License"). You may not use this file except in
 * compliance with the License. You can obtain a copy of the License by
 * contacting Liferay, Inc. See the License for the specific language governing
 * permissions and limitations under the License, including but not limited to
 * distribution rights of the Software.
 */

import {Redirect, withRouter} from 'react-router-dom';
import Icon from '../Icon.es';
import pathToRegexp from 'path-to-regexp';
import React from 'react';

/**
 * @class
 * @memberof shared/components
 */
class Search extends React.Component {
	constructor(props) {
		super(props);
		this.state = {redirect: false, value: ''};
	}

	componentWillReceiveProps({match: {params}}) {
		const {search = ''} = params || {};
		const {value} = this.state;

		if (search !== value) {
			this.setState({
				value: search
			});
		}
	}

	handleChange(event) {
		this.setState({value: event.target.value});
	}

	handleSubmit(event) {
		event.preventDefault();

		this.setState({redirect: true});
	}

	render() {
		const {disabled} = this.props;
		const {redirect, value} = this.state;

		if (redirect) {
			const {
				location: {search},
				match: {params, path}
			} = this.props;

			const values = {page: 1};

			delete params.search;

			if (value && value.trim()) {
				values.search = encodeURIComponent(value);
			}

			const pathname = pathToRegexp.compile(path)(
				Object.assign({}, params, values)
			);

			// eslint-disable-next-line react/no-direct-mutation-state
			this.state.redirect = false;

			return <Redirect to={{pathname, search}} />;
		}

		return (
			<form
				method="GET"
				onSubmit={this.handleSubmit.bind(this)}
				role="search"
			>
				<div className="input-group">
					<div className="input-group-item">
						<input
							className="form-control input-group-inset input-group-inset-after"
							disabled={disabled}
							onChange={this.handleChange.bind(this)}
							placeholder={Liferay.Language.get('search-for')}
							type="text"
							value={value}
						/>
						<span className="input-group-inset-item input-group-inset-item-after">
							<button
								className="btn btn-unstyled"
								disabled={disabled}
								type="submit"
							>
								<Icon iconName="search" />
							</button>
						</span>
					</div>
				</div>
			</form>
		);
	}
}

export default withRouter(Search);