cpui-components/lib/components/SearchBar/SearchBar.js

"use strict";

Object.defineProperty(exports, "__esModule", {
	value: true
});
exports.SearchBar = undefined;

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _propTypes = require("prop-types");

var _propTypes2 = _interopRequireDefault(_propTypes);

var _FormInput = require("./../FormInput");

var _FormInput2 = _interopRequireDefault(_FormInput);

var _Button = require("./../Button");

var _Button2 = _interopRequireDefault(_Button);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var SearchBar = exports.SearchBar = function (_Component) {
	_inherits(SearchBar, _Component);

	function SearchBar() {
		_classCallCheck(this, SearchBar);

		var _this = _possibleConstructorReturn(this, (SearchBar.__proto__ || Object.getPrototypeOf(SearchBar)).call(this));

		_this.setSearchValue = function (newValue) {
			var hasContent = _this.searchInput.input.value.trim().length > 0;
			_this.searchInput.input.value = newValue;
			_this.setState({
				showAutoSearch: false,
				showClearAutoSearch: true,
				showSubmitSearch: false,
				showClearSubmitSearch: false
			});
		};

		_this.render = function () {
			var autoSearch = _this.state.showAutoSearch ? _react2.default.createElement(
				_Button2.default,
				{
					noStyles: true,
					id: "searchButton",
					title: "Search",
					className: "cp-AutoSearch-button " + (_this.props.size ? "cp-SearchBar-button--small" : "")
				},
				_react2.default.createElement(
					"svg",
					null,
					_react2.default.createElement("use", { xlinkHref: "#iconSearch" })
				)
			) : null;

			var clearAutoSearch = _this.state.showClearAutoSearch ? _react2.default.createElement(
				_Button2.default,
				{
					noStyles: true,
					id: "clearSearch",
					title: "Clear Search",
					onClick: _this.onClearClickWrapped,
					className: "cp-AutoSearch-button " + (_this.props.size ? "cp-SearchBar-button--small" : "")
				},
				_react2.default.createElement(
					"svg",
					null,
					_react2.default.createElement("use", { xlinkHref: "#iconClose" })
				)
			) : null;

			var submitSearch = _this.state.showSubmitSearch ? _react2.default.createElement(
				_Button2.default,
				{
					id: "searchButton",
					title: "Search",
					onClick: _this.props.onClickHandler,
					className: "cp-SearchBar-button " + (_this.props.size ? "cp-SearchBar-button--small" : "")
				},
				_react2.default.createElement(
					"svg",
					null,
					_react2.default.createElement("use", { xlinkHref: "#iconSearch" })
				)
			) : null;

			var clearSubmitSearch = _this.state.showClearSubmitSearch ? _react2.default.createElement(
				_Button2.default,
				{
					noStyles: true,
					id: "clearSearch",
					title: "Clear Search",
					onClick: _this.onClearClickWrapped,
					className: "cp-AutoSearch-button " + (_this.props.size ? "cp-SearchBar-button--small" : ""),
					style: { right: 47 }
				},
				_react2.default.createElement(
					"svg",
					null,
					_react2.default.createElement("use", { xlinkHref: "#iconClose" })
				)
			) : null;

			return _react2.default.createElement(
				"div",
				{
					className: (_this.props.isModuleSearch ? "cp-ModuleSearch" : "cp-SearchBar") + " " + _this.props.className
				},
				_react2.default.createElement(_FormInput2.default, {
					ref: function ref(searchInput) {
						_this.searchInput = searchInput;
					},
					onSubmit: _this.props.onClickHandler,
					onKeyUp: _this.onKeyUpWrapped,
					type: "search",
					placeholder: _this.props.placeholder,
					defaultValue: _this.props.defaultValue,
					className: _this.props.isSubmitSearch ? (_this.props.size ? "cp-SubmitSearchBar-input--small" : "") + " " + (_this.props.isModuleSearch ? "cp-ModuleSubmitSearch-input" : "cp-SubmitSearchBar-input") : (_this.props.size ? "cp-SearchBar-input--small" : "") + " " + (_this.props.isModuleSearch ? "cp-ModuleSearch-input" : "cp-SearchBar-input")
				}),
				autoSearch,
				clearAutoSearch,
				submitSearch,
				clearSubmitSearch
			);
		};

		_this.state = {
			showAutoSearch: false,
			showClearAutoSearch: false,
			showSubmitSearch: true,
			showClearSubmitSearch: false
		};
		_this.onKeyUpWrapped = _this.onKeyUpWrapped.bind(_this);
		_this.onClearClickWrapped = _this.onClearClickWrapped.bind(_this);
		return _this;
	}

	_createClass(SearchBar, [{
		key: "componentDidMount",
		value: function componentDidMount() {
			var hasContent = this.searchInput.input.value.trim().length > 0;
			this.setState({
				showAutoSearch: !this.props.isSubmitSearch && !hasContent,
				showClearAutoSearch: !this.props.isSubmitSearch && hasContent,
				showSubmitSearch: this.props.isSubmitSearch,
				showClearSubmitSearch: false
			});
		}
	}, {
		key: "onKeyUpWrapped",
		value: function onKeyUpWrapped(event) {
			var hasContent = this.searchInput.input.value.trim().length > 0;

			if (event.key !== "Enter") {
				if (this.props.onKeyPressHandler) {
					this.props.onKeyPressHandler(event);
				}

				if (!hasContent && this.props.clearSearchFunction) {
					this.onClearClickWrapped(event);
				}
			} else {
				if (this.props.onClickHandler) {
					this.props.onClickHandler(event);
				}
			}

			this.setState({
				showAutoSearch: !hasContent && !this.props.isSubmitSearch,
				showClearAutoSearch: hasContent && !this.props.isSubmitSearch,
				showSubmitSearch: this.props.isSubmitSearch,
				showClearSubmitSearch: hasContent && this.props.isSubmitSearch
			});
		}
	}, {
		key: "onClearClickWrapped",
		value: function onClearClickWrapped(event) {
			if (this.props.clearSearchFunction) {
				this.props.clearSearchFunction(event);
			}
			this.searchInput.input.value = "";
			this.searchInput.input.focus();

			this.setState({
				showAutoSearch: !this.props.isSubmitSearch,
				showClearAutoSearch: false,
				showSubmitSearch: this.props.isSubmitSearch,
				showClearSubmitSearch: false
			});
		}
	}]);

	return SearchBar;
}(_react.Component);

SearchBar.propTypes = {
	onClickHandler: _propTypes2.default.func.isRequired,
	onKeyPressHandler: _propTypes2.default.func.isRequired,
	size: _propTypes2.default.oneOf(["small"]),
	defaultValue: _propTypes2.default.string,
	isModuleSearch: _propTypes2.default.bool,
	clearSearchFunction: _propTypes2.default.func,
	isSubmitSearch: _propTypes2.default.bool,
	className: _propTypes2.default.string
};
SearchBar.defaultProps = {
	isSubmitSearch: true
};
exports.default = SearchBar;