"use strict";
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 __());
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
//React
var React = require("react");
//Wijmo
var wjcCore = require("wijmo/wijmo");
//Application
var DataSvc_1 = require("../services/DataSvc");
var Filtering = /** @class */ (function (_super) {
    __extends(Filtering, _super);
    function Filtering(props) {
        var _this = _super.call(this, props) || this;
        _this.fieldNames = DataSvc_1.DataSvc.default.getNames();
        _this.cvFiltering = new wjcCore.CollectionView(DataSvc_1.DataSvc.default.getData(10));
        _this.state = {
            filterStr: '',
        };
        _this._thisFilterFunction = _this._filterFunction.bind(_this);
        return _this;
    }
    // apply filter (applied on a 500 ms timeOut)
    Filtering.prototype.filter = function (event) {
        var _this = this;
        console.log(event.target.value);
        this.setState({ filterStr: event.target.value });
        if (this._toFilter) {
            clearTimeout(this._toFilter);
        }
        this._toFilter = setTimeout(function () {
            _this._toFilter = null;
            if (_this.cvFiltering) {
                var cv = _this.cvFiltering;
                if (cv) {
                    if (cv.filter != _this._thisFilterFunction) {
                        cv.filter = _this._thisFilterFunction;
                    }
                    else {
                        cv.refresh();
                    }
                    _this.forceUpdate();
                }
            }
        }, 500);
    };
    // ICollectionView filter function
    Filtering.prototype._filterFunction = function (item) {
        var filter = this.state.filterStr.toLowerCase();
        if (!filter) {
            return true;
        }
        return item['country'].toLowerCase().indexOf(filter) > -1;
    };
    Filtering.prototype.render = function () {
        var _this = this;
        return React.createElement("div", null,
            React.createElement("h2", null, "Filtering"),
            React.createElement("p", null,
                "The CollectionView class, like the one in .NET, implements the ICollectionView interface to support filtering. To enable filtering, set the ",
                React.createElement("b", null, "CollectionView.filter"),
                " property to a function that determines which objects to include in the view."),
            React.createElement("p", null, "In this example, we create a filter for the country, and get the filter value from the input control. When you enter a value by which to filter, the grid refreshes and shows only the filtered data."),
            React.createElement("div", { className: "row" },
                React.createElement("div", { className: "col-md-6" },
                    React.createElement("ul", { className: "nav nav-tabs", role: "tablist" },
                        React.createElement("li", { className: "active" },
                            React.createElement("a", { href: "#ftJsx", role: "tab", "data-toggle": "tab" }, "JSX")),
                        React.createElement("li", null,
                            React.createElement("a", { href: "#ftJs", role: "tab", "data-toggle": "tab" }, "TS"))),
                    React.createElement("div", { className: "tab-content" },
                        React.createElement("div", { className: "tab-pane active pane-content", id: "ftJsx" },
                            ' <div className="row-fluid well">\n',
                            '     <input type="text" className="form-control app-pad" placeholder="Please enter characters for the country by which to filter (case-insensitive)"\n',
                            '         value={this.state.filterStr} onInput={this.filter.bind(this)} />\n',
                            ' </div>\n',
                            ' <div className="sGrid">\n',
                            '     <table className="table table-condensed table-bordered">\n',
                            '         <thead>\n',
                            '             <tr className="active">\n',
                            '                 {this.fieldNames.map((fieldName, index) => {\n',
                            '                     return <th key={index} className="text-center">\n',
                            '                         {fieldName}\n',
                            '                     </th>\n',
                            '                 })}\n',
                            '             </tr>\n',
                            '         </thead>\n',
                            '         <tbody>\n',
                            '             {this.cvFiltering.items.map((item, idx1) => {\n',
                            '                 return <tr key={idx1}>\n',
                            '                     {this.fieldNames.map((fieldName, idx2) => {\n',
                            '                         let itm = wjcCore.Globalize.format(item[fieldName], \'\');\n',
                            '                         return <td key={idx2} className="text-center" >\n',
                            '                             {itm}\n',
                            '                         </td>\n',
                            '                     })}\n',
                            '                 </tr>\n',
                            '             })}\n',
                            '         </tbody>\n',
                            '     </table>\n',
                            ' </div>\n'),
                        React.createElement("div", { className: "tab-pane pane-content", id: "ftJs" },
                            ' fieldNames = DataSvc.default.getNames();\n',
                            ' cvFiltering = new wjcCore.CollectionView(DataSvc.default.getData(10));\n',
                            ' private _toFilter: any;\n',
                            ' private _thisFilterFunction: wjcCore.IPredicate;\n',
                            ' constructor(props) {\n',
                            '     super(props);\n',
                            '     this.state = {\n',
                            '         filterStr: \'\',\n',
                            '     }\n',
                            '     this._thisFilterFunction = this._filterFunction.bind(this);\n',
                            ' }\n',
                            '\n',
                            ' // apply filter (applied on a 500 ms timeOut)\n',
                            ' filter(event) {\n',
                            '     console.log(event.target.value);\n',
                            '     this.setState({ filterStr: event.target.value });\n',
                            '     if (this._toFilter) {\n',
                            '         clearTimeout(this._toFilter);\n',
                            '     }\n',
                            '     \n',
                            '     this._toFilter = setTimeout(() => {\n',
                            '         this._toFilter = null;\n',
                            '         if (this.cvFiltering) {\n',
                            '             var cv = this.cvFiltering;\n',
                            '             if (cv) {\n',
                            '                 if (cv.filter != this._thisFilterFunction) {\n',
                            '                     cv.filter = this._thisFilterFunction;\n',
                            '                 } else {\n',
                            '                     cv.refresh();\n',
                            '                 }\n',
                            '                 this.forceUpdate();\n',
                            '             }\n',
                            '         }\n',
                            '     }, 500);\n',
                            '     \n',
                            ' }\n',
                            '\n',
                            ' // ICollectionView filter function\n',
                            ' private _filterFunction(item: any): boolean {\n',
                            '     var filter = this.state.filterStr.toLowerCase();\n',
                            '     if (!filter) {\n',
                            '         return true;\n',
                            '     }\n',
                            '     return item[\'country\'].toLowerCase().indexOf(filter) > -1;\n',
                            ' }\n'))),
                React.createElement("div", { className: "col-md-6" },
                    React.createElement("h4", null, "Result (live):"),
                    React.createElement("div", { className: "row-fluid well" },
                        React.createElement("input", { type: "text", className: "form-control app-pad", placeholder: "Please enter characters for the country by which to filter (case-insensitive)", value: this.state.filterStr, onInput: this.filter.bind(this) })),
                    React.createElement("div", { className: "sGrid" },
                        React.createElement("table", { className: "table table-condensed table-bordered" },
                            React.createElement("thead", null,
                                React.createElement("tr", { className: "active" }, this.fieldNames.map(function (fieldName, index) {
                                    return React.createElement("th", { key: index, className: "text-center" }, fieldName);
                                }))),
                            React.createElement("tbody", null, this.cvFiltering.items.map(function (item, idx1) {
                                return React.createElement("tr", { key: idx1 }, _this.fieldNames.map(function (fieldName, idx2) {
                                    var itm = wjcCore.Globalize.format(item[fieldName], '');
                                    return React.createElement("td", { key: idx2, className: "text-center" }, itm);
                                }));
                            })))))));
    };
    return Filtering;
}(React.Component));
exports.Filtering = Filtering;
//# sourceMappingURL=Filtering.js.map