react-kube/Autocomplete.js

Kube CSS in React Components

"use strict";

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 _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };

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 _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) subClass.__proto__ = superClass; }

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _classnames = require("classnames");

var _classnames2 = _interopRequireDefault(_classnames);

var _HighlightText = require("./HighlightText");

var _HighlightText2 = _interopRequireDefault(_HighlightText);

var _Input = require("./Input");

var _Input2 = _interopRequireDefault(_Input);

var Autocomplete = (function (_React$Component) {
	function Autocomplete(props) {
		_classCallCheck(this, Autocomplete);

		_get(Object.getPrototypeOf(Autocomplete.prototype), "constructor", this).call(this, props);
		this.state = {
			data: [],
			show: true,
			value: this.props.value };
	}

	_inherits(Autocomplete, _React$Component);

	_createClass(Autocomplete, [{
		key: "componentDidMount",
		value: function componentDidMount() {
			//Calculate width of the input field to equal the suggestions lists width
			this.inputWidth = _react2["default"].findDOMNode(this.refs.autocompleteInput).offsetWidth;
		}
	}, {
		key: "handleBlur",
		value: function handleBlur() {
			//hide suggestions on blur
			if (this.state.show) {
				this.setState({
					show: false
				});
			}
			//on blur callback
			this.props.onBlur ? this.props.onBlur : null; //eslint-disable-line
		}
	}, {
		key: "handleChange",
		value: function handleChange(e) {
			var _this = this;

			// change value of input
			this.setState({
				value: e.target.value
			});

			var suggestionList = [];
			if (e.target.value.length) {
				if (this.props.data[0].label) {
					suggestionList = [];
					var _iteratorNormalCompletion = true;
					var _didIteratorError = false;
					var _iteratorError = undefined;

					try {
						for (var _iterator = this.props.data[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
							var item = _step.value;

							switch (this.props.rule) {
								case "contains":
									if (item.label.toLowerCase().search(e.target.value.toLowerCase()) !== -1 && e.target.value.length <= item.label.length) {
										suggestionList.push(item);
									}
									break;
								case "exact":
									if (item.label.toLowerCase().substring(0, e.target.value.length) === e.target.value.toLowerCase()) {
										suggestionList.push(item);
									}
									break;
							}
						}
					} catch (err) {
						_didIteratorError = true;
						_iteratorError = err;
					} finally {
						try {
							if (!_iteratorNormalCompletion && _iterator["return"]) {
								_iterator["return"]();
							}
						} finally {
							if (_didIteratorError) {
								throw _iteratorError;
							}
						}
					}
				} else {
					suggestionList = this.props.data.filter(function (item) {
						switch (_this.props.rule) {
							case "contains":
								return item.toLowerCase().search(e.target.value.toLowerCase()) !== -1 && e.target.value.length <= item.length;
							case "exact":
								return item.toLowerCase().substring(0, e.target.value.length) === e.target.value.toLowerCase();
						}
					});
				}
			} else {
				suggestionList = [];
			}

			if (this.props.limit && suggestionList.length > this.props.limit) {
				suggestionList = suggestionList.slice(0, this.props.limit);
			}

			this.setState({ data: suggestionList });

			// show the suggestions
			if (suggestionList.length > 0) {
				this.setState({
					show: true
				});
			}

			// on change callback
			this.props.onChange ? this.props.onChange(e.target.value) : null; //eslint-disable-line
		}
	}, {
		key: "handleSelect",
		value: function handleSelect(suggestion) {
			// close suggestions and set value on selection
			this.setState({
				show: false,
				value: suggestion.label ? suggestion.label : suggestion
			});

			// on select callback
			this.props.onSelect ? this.props.onSelect(suggestion) : null; //eslint-disable-line
		}
	}, {
		key: "render",
		value: function render() {
			var _this2 = this;

			var wrapperStyle = {
				position: "relative"
			};

			var listClasses = (0, _classnames2["default"])({
				"autocomplete": true
			});

			var listStyle = {
				display: "block",
				width: this.inputWidth
			};

			var suggestions = undefined;
			if (this.props.data[0].label) {
				suggestions = this.state.data.map(function (suggestion, i) {
					return _react2["default"].createElement(
						"li",
						{ key: i },
						_react2["default"].createElement(
							"a",
							{ key: i, onMouseDown: _this2.handleSelect.bind(_this2, suggestion), ref: i },
							_this2.props.highlight && _this2.state.value ? _react2["default"].createElement(_HighlightText2["default"], { query: _this2.state.value, text: suggestion.label }) : suggestion.label
						)
					);
				});
			} else {
				suggestions = this.state.data.map(function (suggestion, i) {
					return _react2["default"].createElement(
						"li",
						{ key: i },
						_react2["default"].createElement(
							"a",
							{ key: i, onMouseDown: _this2.handleSelect.bind(_this2, suggestion), ref: i },
							_this2.props.highlight && _this2.state.value ? _react2["default"].createElement(_HighlightText2["default"], { query: _this2.state.value, text: suggestion }) : suggestion
						)
					);
				});
			}

			return _react2["default"].createElement(
				"span",
				null,
				_react2["default"].createElement(
					"div",
					{ style: wrapperStyle },
					_react2["default"].createElement(_Input2["default"], { autoComplete: "false", description: this.props.description, label: this.props.label, name: "q", onBlur: this.handleBlur.bind(this), onChange: this.handleChange.bind(this), placeholder: this.props.placeholder, ref: "autocompleteInput", required: this.props.required, type: "text", value: this.state.value, width: this.props.width }),
					this.state.show ? _react2["default"].createElement(
						"ul",
						{ className: (0, _classnames2["default"])(this.props.listClassName, listClasses), style: listStyle },
						suggestions
					) : null
				)
			);
		}
	}]);

	return Autocomplete;
})(_react2["default"].Component);

Autocomplete.propTypes = {
	className: _react2["default"].PropTypes.string,
	data: _react2["default"].PropTypes.oneOfType([_react2["default"].PropTypes.arrayOf(_react2["default"].PropTypes.string), _react2["default"].PropTypes.arrayOf(_react2["default"].PropTypes.shape({
		label: _react2["default"].PropTypes.string,
		value: _react2["default"].PropTypes.any
	}))]).isRequired,
	description: _react2["default"].PropTypes.string,
	highlight: _react2["default"].PropTypes.bool,
	label: _react2["default"].PropTypes.string,
	limit: _react2["default"].PropTypes.number,
	listClassName: _react2["default"].PropTypes.string,
	onBlur: _react2["default"].PropTypes.func,
	onChange: _react2["default"].PropTypes.func,
	onSelect: _react2["default"].PropTypes.func,
	placeholder: _react2["default"].PropTypes.string,
	required: _react2["default"].PropTypes.bool,
	rule: _react2["default"].PropTypes.oneOf(["contains", "exact"]),
	style: _react2["default"].PropTypes.object,
	value: _react2["default"].PropTypes.string,
	width: _react2["default"].PropTypes.oneOfType([_react2["default"].PropTypes.string, _react2["default"].PropTypes.number])
};

Autocomplete.defaultProps = { highlight: false, rule: "contains" };

module.exports = Autocomplete;