solrkit/build/src/component/SearchBox.js

  UI Components for Solr, using TypeScript + React

var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
import * as React from 'react';
import { PropTypes } from 'react';
import { Search } from 'semantic-ui-react';
import { take } from 'lodash';
var SearchBox = (function (_super) {
    __extends(SearchBox, _super);
    function SearchBox() {
        var _this = _super.call(this) || this;
        _this.state = {
            query: '',
            shouldBeOpen: false,
            searchEditedByUser: false
        };
        _this.onKeyUp = _this.onKeyUp.bind(_this);
        _this.onBlur = _this.onBlur.bind(_this);
        _this.onChangeQuery = _this.onChangeQuery.bind(_this);
        _this.onSelectTypeahead = _this.onSelectTypeahead.bind(_this);
        return _this;
    }
    SearchBox.prototype.onKeyUp = function (event) {
        event.preventDefault();
        if (event.keyCode === 13) {
            this.onDoSearch(this.state.query);
            this.setState({ shouldBeOpen: false });
        }
        else if (event.keyCode === 27) {
            this.setState({ shouldBeOpen: false });
        }
    };
    SearchBox.prototype.onChangeQuery = function (e, data) {
        this.setState({
            query: data.value + '',
            shouldBeOpen: (data.value || '').length > 0,
            searchEditedByUser: true
        });
    };
    SearchBox.prototype.onSelectTypeahead = function (e, data) {
        this.setState({
            query: data.value + '',
            shouldBeOpen: false,
            searchEditedByUser: true
        });
        this.onDoSearch(data.value + '');
    };
    SearchBox.prototype.onDoSearch = function (value) {
        this.context.transition({ query: value, start: 0 });
    };
    SearchBox.prototype.onBlur = function () {
        this.setState({ shouldBeOpen: false });
    };
    SearchBox.prototype.render = function () {
        var self = this;
        var query = (self.state.searchEditedByUser ?
            self.state.query :
            self.context.searchState.query) || '';
        var lc = query.toLowerCase();
        var filteredSearches = take((self.props.sampleSearches || []).filter(function (search) { return search.indexOf(lc) === 0; }), 5).map(function (title) { return { title: title }; });
        return (React.createElement(Search, { className: "full", id: "searchBox", open: this.state.shouldBeOpen, loading: this.props.loading, onResultSelect: self.onSelectTypeahead, onSearchChange: self.onChangeQuery, results: filteredSearches, input: { fluid: true }, value: query, showNoResults: false, fluid: true, onKeyUp: self.onKeyUp, onBlur: self.onBlur, placeholder: this.props.placeholder, size: "large" }));
    };
    SearchBox.contextTypes = {
        searchState: PropTypes.object,
        transition: PropTypes.func
    };
    return SearchBox;
}(React.Component));
export { SearchBox };
//# sourceMappingURL=SearchBox.js.map