solrkit/build/src/component/facet/CheckFacet.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 { get, includes, take, filter, orderBy } from 'lodash';
import { Popup } from 'semantic-ui-react';
import { defaultRenderer } from './FacetTypes';
var CheckFacet = (function (_super) {
    __extends(CheckFacet, _super);
    function CheckFacet() {
        var _this = _super.call(this) || this;
        _this.state = {
            showMoreLink: true,
            typeahead: ''
        };
        _this.onShowMore = _this.onShowMore.bind(_this);
        _this.onChangeTypeahead = _this.onChangeTypeahead.bind(_this);
        return _this;
    }
    CheckFacet.prototype.onClick = function (value) {
        var _this = this;
        return function () {
            var selections = get(_this.context.searchState.facets, _this.props.facet, []);
            if (includes(selections, value)) {
                selections = selections.filter(function (f) { return f !== value; });
            }
            else {
                selections.push(value);
            }
            var thisFacet = {};
            thisFacet[_this.props.facet] = selections;
            _this.context.transition({
                start: 0,
                facets: thisFacet
            });
        };
    };
    CheckFacet.prototype.onShowMore = function () {
        this.setState({ showMoreLink: false });
    };
    CheckFacet.prototype.onChangeTypeahead = function (event) {
        this.setState({ typeahead: event.currentTarget.value });
    };
    CheckFacet.prototype.render = function () {
        var _this = this;
        var title = this.props.title;
        var help = this.props.help;
        var render = this.props.render || defaultRenderer;
        var searchBox = this.props.search ? (React.createElement("form", { className: "ui mini form" },
            React.createElement("div", { className: "field", style: { paddingBottom: '3px', width: '70%' } },
                React.createElement("input", { type: "text", placeholder: "Filter", onChange: this.onChangeTypeahead })))) : null;
        var valueList = this.props.search && this.state.typeahead.length > 0 ? (filter(this.props.values, function (v) { return v[0].startsWith(_this.state.typeahead); })) : (this.props.values);
        var noMore = !this.state.showMoreLink || valueList.length < 8;
        var displayValues = (noMore) ? (valueList) : (take(valueList, 5));
        var moreLink = noMore ? (null) : (React.createElement("div", { style: { display: 'block', cursor: 'pointer' }, onClick: this.onShowMore }, "Show More"));
        return (React.createElement("div", { className: "ui", style: { marginBottom: '1em' } },
            title ? (help ? (React.createElement(Popup, { trigger: React.createElement("h4", null, title), content: help })) :
                React.createElement("h4", null, title))
                : null,
            searchBox,
            orderBy(displayValues, [3, 2], ['desc', 'desc']).map(function (_a, i) {
                var value = _a[0], count = _a[1], checked = _a[2];
                return (React.createElement("div", { style: { display: 'block' } },
                    React.createElement("div", { className: "ui checkbox" },
                        React.createElement("input", { onClick: _this.onClick(value), checked: checked, type: "checkbox", name: i + '' }),
                        React.createElement("label", { onClick: _this.onClick(value), style: { cursor: 'pointer' } }, render(value, count)))));
            }),
            moreLink));
    };
    CheckFacet.contextTypes = {
        searchState: React.PropTypes.object,
        transition: React.PropTypes.func
    };
    return CheckFacet;
}(React.Component));
export { CheckFacet };
//# sourceMappingURL=CheckFacet.js.map