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);

	_createClass(SearchBar, [{
		key: 'onKeyUpWrapped',
		value: function onKeyUpWrapped(event) {
			if (this.props.onKeyPressHandler) {
				this.props.onKeyPressHandler(event);
			}
			var hasContent = this.searchInput.input.value.length > 0;

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

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

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

		_this.render = function () {
			if (_this.props.isSubmitSearch == undefined) {
				_this.props.isSubmitSearch = true;
			}

			var autoSearch = _this.state.showAutoSearch ? _react2.default.createElement(
				_Button2.default,
				{ noStyles: true, id: 'searchButton', title: 'Search',
					onClick: _this.props.onClickHandler,
					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.props.clearSearchFunction,
					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.props.clearSearchFunction,
					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") },
				_react2.default.createElement(_FormInput2.default, { ref: function ref(searchInput) {
						_this.searchInput = searchInput;
					},
					onKeyUp: _this.onKeyUpWrapped,
					type: 'search',
					placeholder: _this.props.placeholder,
					defaultValue: _this.props.defaultValue,
					className: (_this.props.size ? "cp-SearchBar-input--small" : '') + ' ' + (_this.props.isModuleSearch ? "cp-ModuleSearch-input" : "cp-SearchBar-input") }),
				autoSearch,
				clearAutoSearch,
				submitSearch,
				clearSubmitSearch
			);
		};

		_this.onKeyUpWrapped = _this.onKeyUpWrapped.bind(_this);

		_this.state = {
			showAutoSearch: false,
			showClearAutoSearch: false,
			showSubmitSearch: true,
			showClearSubmitSearch: false
		};
		return _this;
	}

	_createClass(SearchBar, [{
		key: 'componentDidMount',
		value: function componentDidMount() {
			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
};
SearchBar.defaultProps = {
	isSubmitSearch: true
};
exports.default = SearchBar;