cosmo-ui
Version:
Common React components
56 lines • 2.72 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var cx = require("classnames");
var row_1 = require("./row");
var column_1 = require("./column");
var list_1 = require("./list");
var spinner_1 = require("./spinner");
var utils_1 = require("../utils");
var styles = require('../../src/styles/components/forms.scss');
var TextSearch = (function (_super) {
tslib_1.__extends(TextSearch, _super);
function TextSearch() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.mkHandleSetSelected = function (o) { return function () {
_this.props.setSelected(o);
}; };
_this.handleInputFocus = function () { return _this.props.setFocus(true); };
_this.handleInputBlur = function () { return _this.props.setFocus(false); };
_this.handleInputChange = function (e) {
_this.props.setSearch(e.currentTarget.value);
};
return _this;
}
TextSearch.prototype.render = function () {
var _a = this.props, field = _a.field, placeholder = _a.placeholder;
return (React.createElement(column_1.Column, { className: styles.searchContainer },
React.createElement(row_1.Row, { className: this.classNames(field) },
React.createElement("input", { className: styles.input, type: "text", value: field.value, placeholder: placeholder, onChange: this.handleInputChange, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur }),
this.renderSpinner()),
this.renderSearchResults()));
};
TextSearch.prototype.renderSpinner = function () {
return React.createElement(spinner_1.Spinner, { visible: this.props.loading });
};
TextSearch.prototype.renderSearchResults = function () {
var _this = this;
if (!this.props.dropdownOpen)
return null;
return (React.createElement(list_1.List, { className: styles.resultsContainer }, this.props.searchResults.map(function (o) {
return React.createElement(list_1.ListItem, { key: utils_1.shortID(), onClick: _this.mkHandleSetSelected(o) }, o.suggestion);
})));
};
TextSearch.prototype.classNames = function (field) {
return cx(this.props.className, styles.inputContainer, (_a = {},
_a[styles.focus] = this.props.isFocused,
_a[styles.success] = field.valid,
_a[styles.error] = field.errors.length > 0 || (field.dirty && !field.valid),
_a));
var _a;
};
return TextSearch;
}(React.Component));
exports.TextSearch = TextSearch;
//# sourceMappingURL=text-search.js.map