ucsc-xena-client/dist/views/ConceptSuggest.js

UCSC Xena Client. Functional genomics visualizations.

'use strict';

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

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

var _PureComponent2 = require('../PureComponent');

var _PureComponent3 = _interopRequireDefault(_PureComponent2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _XAutosuggest = require('./XAutosuggest');

var _XAutosuggest2 = _interopRequireDefault(_XAutosuggest);

var _input = require('react-toolbox/lib/input');

var _input2 = _interopRequireDefault(_input);

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

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

var RETURN = 13;
var returnPressed = function returnPressed(ev) {
	return ev.keyCode === RETURN;
};

var renderInputComponent = function renderInputComponent(_ref) {
	var ref = _ref.ref,
	    _onChange = _ref.onChange,
	    label = _ref.label,
	    error = _ref.error,
	    props = _objectWithoutProperties(_ref, ['ref', 'onChange', 'label', 'error']);

	return _react2.default.createElement(
		_input2.default,
		_extends({
			spellCheck: false,
			innerRef: function innerRef(el) {
				return ref(el && el.inputNode);
			},
			onChange: function onChange(value, ev) {
				return _onChange(ev);
			},
			label: label || 'Enter concept or text'
		}, props),
		_react2.default.createElement(
			'i',
			{ style: { color: 'red', opacity: error ? 1 : 0 }, className: 'material-icons' },
			'error'
		)
	);
};

var ConceptSuggest = function (_PureComponent) {
	_inherits(ConceptSuggest, _PureComponent);

	function ConceptSuggest() {
		var _ref2;

		var _temp, _this, _ret;

		_classCallCheck(this, ConceptSuggest);

		for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
			args[_key] = arguments[_key];
		}

		return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref2 = ConceptSuggest.__proto__ || Object.getPrototypeOf(ConceptSuggest)).call.apply(_ref2, [this].concat(args))), _this), _this.state = { suggestions: [], value: '' }, _this.onSuggestionsFetchRequested = function (_ref3) {
			var value = _ref3.value;

			// need to trim value?
			var concepts = _this.props.concepts,
			    lcv = value.toLowerCase();

			_this.setState({ suggestions: concepts.filter(function (c) {
					return c.toLowerCase().indexOf(lcv) !== -1;
				}) });
		}, _this.onSuggestionsClearRequested = function () {
			_this.setState({ suggestions: [] });
		}, _this.onChange = function (ev, _ref4) {
			var newValue = _ref4.newValue,
			    method = _ref4.method;

			// Don't update the value for 'up' and 'down' keys. If we do update
			// the value, it gives us an in-place view of the suggestion (pasting
			// the value into the input field), but the drawback is that it moves
			// the cursor to the end of the line. This messes up multi-word input.
			// We could try to preserve the cursor position, perhaps by passing a
			// custom input renderer. But for now, just don't update the value for
			// these events.
			if (method !== 'up' && method !== 'down') {
				_this.setState({ value: newValue });
			}
		}, _this.onKeyDown = function (ev) {
			var value = ev.target.value.trim();
			if (returnPressed(ev) && value.length > 0) {
				_this.props.onAddTerm(value);
				_this.setState({ value: '' });
			}
		}, _this.getSuggestionValue = function (suggestion) {
			return suggestion;
		}, _this.shouldRenderSuggestions = function (value) {
			return value.trim().length > 2;
		}, _temp), _possibleConstructorReturn(_this, _ret);
	}

	_createClass(ConceptSuggest, [{
		key: 'render',
		value: function render() {
			var onChange = this.onChange,
			    onKeyDown = this.onKeyDown,
			    _props = this.props,
			    label = _props.label,
			    error = _props.error,
			    _state = this.state,
			    suggestions = _state.suggestions,
			    value = _state.value;


			return _react2.default.createElement(_XAutosuggest2.default, {
				inputRef: this.setInput,
				suggestions: suggestions,
				renderSuggestion: function renderSuggestion(v) {
					return _react2.default.createElement(
						'span',
						null,
						v
					);
				},
				onSuggestionsFetchRequested: this.onSuggestionsFetchRequested,
				onSuggestionsClearRequested: this.onSuggestionsClearRequested,
				getSuggestionValue: this.getSuggestionValue,
				shouldRenderSuggestions: this.shouldRenderSuggestions,
				renderInputComponent: renderInputComponent,
				inputProps: { value: value, label: label, error: error, onKeyDown: onKeyDown, onChange: onChange } });
		}
	}]);

	return ConceptSuggest;
}(_PureComponent3.default);

exports.default = ConceptSuggest;