@bigfishtv/cockpit/es/components/input/AutosuggestInput.js

var _class, _temp;

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

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

import PropTypes from 'prop-types';
import React, { Component } from 'react';
import deepEqual from 'deep-equal';
import keycode from 'keycode';
import _debounce from 'lodash/debounce';

import Autosuggest from 'react-autosuggest';

import { get } from '../../api/xhrUtils';

import Button from '../button/Button';
import autosuggestTheme from '../../config/autosuggestTheme';
import Icon from '../Icon';
import Spinner from '../Spinner';

// we define this because react-docgen fails when defaultProp directly references an imported component
var autosuggestThemeDefault = _extends({}, autosuggestTheme);

var AutosuggestInput = (_temp = _class = function (_Component) {
	_inherits(AutosuggestInput, _Component);

	function AutosuggestInput(props) {
		_classCallCheck(this, AutosuggestInput);

		var _this = _possibleConstructorReturn(this, _Component.call(this, props));

		_this.handleSuggestion = function (event, _ref) {
			var suggestion = _ref.suggestion,
			    suggestionValue = _ref.suggestionValue,
			    method = _ref.method;

			event.preventDefault();
			if (_this.props.beforeSelection(suggestion, suggestionValue, method)) {
				_this.props.onChange(suggestion);
				_this.setState({ inputValue: '' });
			}
		};

		_this.getSuggestions = function (_ref2) {
			var value = _ref2.value,
			    reason = _ref2.reason;

			if (reason == 'type') {
				if (_this.props.autoCache && value in _this.cache) {
					_this.applySuggestions(_this.cache[value]);
				} else {
					var _extends2;

					_this.setState({ loading: true });
					get({
						url: _this.props.queryUrl,
						params: _extends({}, _this.props.params, (_extends2 = {}, _extends2[_this.props.queryParam] = value, _extends2)),
						callback: function callback(data) {
							_this.setState({ loading: false });
							setTimeout(function () {
								return _this.applySuggestions(data);
							}, 10);
						}
					});
				}
			}
		};

		_this.cache = {};
		_this.focused = props.autoFocus || false;
		_this.handleKeyDown = _this.handleKeyDown.bind(_this);
		_this.getSuggestions = _debounce(_this.getSuggestions, props.debounceTime);
		_this.state = {
			loading: false,
			inputValue: '',
			suggestions: props.suggestions || []
		};
		return _this;
	}

	AutosuggestInput.prototype.componentDidMount = function componentDidMount() {
		document.addEventListener('keydown', this.handleKeyDown);
	};

	AutosuggestInput.prototype.componentWillUnmount = function componentWillUnmount() {
		document.removeEventListener('keydown', this.handleKeyDown);
	};

	AutosuggestInput.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
		if (!deepEqual(this.props.suggestions, nextProps.suggestions)) {
			this.setState({ suggestions: nextProps.suggestions });
		}
	};

	AutosuggestInput.prototype.handleKeyDown = function handleKeyDown(event) {
		if (keycode(event) == 'enter' && this.focused && !this.state.suggestions.length) {
			event.preventDefault();
			this.props.onCreate(this.state.inputValue);
			this.setState({ inputValue: '' });
		}
	};

	// When suggestion is selected either via click/tap or enter key


	// Called upon 'onSuggestionsUpdateRequested'


	// Called once suggestions are fetched, either from cache or via xhr
	AutosuggestInput.prototype.applySuggestions = function applySuggestions(preFilteredSuggestions) {
		var suggestions = this.props.filterSuggestions(preFilteredSuggestions);
		this.setState({ suggestions: suggestions });
		this.props.onSuggestionsChange(suggestions);
	};

	AutosuggestInput.prototype.render = function render() {
		var _this2 = this;

		var _props = this.props,
		    autoFocus = _props.autoFocus,
		    autoCache = _props.autoCache,
		    multiSection = _props.multiSection,
		    getSuggestions = _props.getSuggestions,
		    getSectionSuggestions = _props.getSectionSuggestions,
		    renderSuggestion = _props.renderSuggestion,
		    renderSectionTitle = _props.renderSectionTitle,
		    readOnly = _props.readOnly,
		    placeholder = _props.placeholder,
		    theme = _props.theme,
		    onInputChange = _props.onInputChange,
		    onInputFocus = _props.onInputFocus,
		    onInputBlur = _props.onInputBlur,
		    Cell = _props.Cell,
		    rest = _objectWithoutProperties(_props, ['autoFocus', 'autoCache', 'multiSection', 'getSuggestions', 'getSectionSuggestions', 'renderSuggestion', 'renderSectionTitle', 'readOnly', 'placeholder', 'theme', 'onInputChange', 'onInputFocus', 'onInputBlur', 'Cell']);

		var _state = this.state,
		    suggestions = _state.suggestions,
		    inputValue = _state.inputValue,
		    loading = _state.loading;


		var inputProps = {
			value: inputValue,
			placeholder: placeholder,
			readOnly: readOnly,
			autoFocus: autoFocus,
			onChange: function onChange(event, _ref3) {
				var newValue = _ref3.newValue,
				    method = _ref3.method;

				if (method == 'type') {
					_this2.setState({ inputValue: newValue });
					onInputChange(newValue);
				}
			},
			onBlur: function onBlur(event) {
				_this2.focused = false;
				onInputBlur(event);
			},
			onFocus: function onFocus(event) {
				_this2.focused = true;
				onInputFocus(event);
			}
		};

		if (!this.props.value) {
			return React.createElement(
				'div',
				{ className: 'autosuggest-container' },
				React.createElement(Autosuggest, {
					ref: 'autosuggest',
					theme: theme,
					multiSection: multiSection,
					suggestions: suggestions,
					onSuggestionsUpdateRequested: getSuggestions || this.getSuggestions,
					getSuggestionValue: function getSuggestionValue() {
						return '';
					},
					getSectionSuggestions: getSectionSuggestions,
					shouldRenderSuggestions: function shouldRenderSuggestions(value) {
						return typeof value == 'undefined' || !!value;
					},
					renderSuggestion: renderSuggestion,
					renderSectionTitle: renderSectionTitle,
					onSuggestionSelected: this.handleSuggestion,
					inputProps: inputProps
				}),
				loading && React.createElement(Spinner, { size: 16 })
			);
		} else {
			if (Cell) {
				return React.createElement(Cell, _extends({}, rest, { value: this.props.value, onRemove: function onRemove() {
						return _this2.props.onChange(null);
					} }));
			} else {
				return React.createElement(
					'div',
					{ className: 'cell' },
					React.createElement(
						'div',
						{ className: 'cell-content' },
						this.props.renderSuggestion(this.props.value)
					),
					React.createElement(
						'div',
						{ className: 'cell-control' },
						React.createElement(
							Button,
							{ size: 'icon', onClick: function onClick() {
									return _this2.props.onChange(null);
								} },
							React.createElement(Icon, { name: 'close', size: '18' })
						)
					)
				);
			}
		}
	};

	return AutosuggestInput;
}(Component), _class.propTypes = {
	placeholder: PropTypes.string,
	renderSuggestion: PropTypes.func,
	queryUrl: PropTypes.string,
	onChange: PropTypes.func,
	getSuggestions: PropTypes.func,
	readOnly: PropTypes.bool,
	queryParam: PropTypes.string
}, _class.defaultProps = {
	placeholder: 'Search...',
	theme: autosuggestThemeDefault,
	renderSuggestion: function renderSuggestion(suggestion, _ref4) {
		var value = _ref4.value,
		    valueBeforeUpDown = _ref4.valueBeforeUpDown;
		return React.createElement(
			'div',
			null,
			suggestion.name || suggestion.title || suggestion.toString()
		);
	},
	queryParam: 'q',
	params: {},
	autoCache: true,
	autoFocus: false,
	multiSection: false,
	debounceTime: 100,
	suggestions: [],
	onInputFocus: function onInputFocus() {},
	onInputBlur: function onInputBlur() {},
	onInputChange: function onInputChange() {},
	onSuggestionsChange: function onSuggestionsChange() {},
	filterSuggestions: function filterSuggestions(suggestions) {
		return suggestions;
	},
	onChange: function onChange() {},
	onCreate: function onCreate() {},
	beforeSelection: function beforeSelection() {
		return true;
	},
	getSectionSuggestions: function getSectionSuggestions(section) {
		return section.suggestions;
	},
	renderSectionTitle: function renderSectionTitle(section) {
		return section.sectionName;
	},
	Cell: null
}, _temp);
export { AutosuggestInput as default };