"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 CurrentRecordManagement = /** @class */ (function (_super) {
    __extends(CurrentRecordManagement, _super);
    function CurrentRecordManagement(props) {
        var _this = _super.call(this, props) || this;
        _this.fieldNames = DataSvc_1.DataSvc.default.getNames();
        _this.cvCRM = new wjcCore.CollectionView(DataSvc_1.DataSvc.default.getData(10));
        return _this;
    }
    CurrentRecordManagement.prototype.next = function () {
        this.cvCRM.moveCurrentToNext();
        this.forceUpdate();
    };
    CurrentRecordManagement.prototype.moveCurrentTo = function (item) {
        this.cvCRM.moveCurrentTo(item);
        this.forceUpdate();
    };
    CurrentRecordManagement.prototype.previous = function () {
        this.cvCRM.moveCurrentToPrevious();
        this.forceUpdate();
    };
    // current record management
    CurrentRecordManagement.prototype.stopCurrent = function () {
        this.cvCRM.currentChanging.addHandler(this._stopCurrentIn4th);
    };
    ;
    // restore to be able to change current.
    CurrentRecordManagement.prototype.reset = function () {
        this.cvCRM.currentChanging.removeHandler(this._stopCurrentIn4th);
        this.forceUpdate();
    };
    ;
    // forbid changing current when the current item is the 4th one.
    CurrentRecordManagement.prototype._stopCurrentIn4th = function (sender, e) {
        // when the current is the 4rd item, stop moving.
        if (sender.currentPosition === 3) {
            e.cancel = true;
        }
    };
    CurrentRecordManagement.prototype.render = function () {
        var _this = this;
        return React.createElement("div", null,
            React.createElement("h2", null, "Current Record Management"),
            React.createElement("p", null, "Since it implements the ICollectionView interface, you can use the CollectionView class to manage the current record."),
            React.createElement("p", null, "This example shows how you can use the API provided in the CollectionView class to change the current record by clicking a row in the grid or by clicking buttons."),
            React.createElement("p", null,
                "We use the ",
                React.createElement("b", null, "currentPosition"),
                " property to get the position of the current record in the collection, and use the following methods to change the current position:"),
            React.createElement("ul", null,
                React.createElement("li", null, "moveCurrentTo(item)"),
                React.createElement("li", null, "moveCurrentToFirst()"),
                React.createElement("li", null, "moveCurrentToLast()"),
                React.createElement("li", null, "moveCurrentToNext()"),
                React.createElement("li", null, "moveCurrentToPosition(index)"),
                React.createElement("li", null, "moveCurrentToPrevious()")),
            React.createElement("p", null,
                "When the position changes, we use the ",
                React.createElement("b", null, "currentChanging"),
                " and ",
                React.createElement("b", null, "currentChanged"),
                " events to track it. We can cancel the change of position in the ",
                React.createElement("b", null, "currentChanging"),
                " event."),
            React.createElement("p", null,
                "Click the ",
                React.createElement("b", null, "Next"),
                " button to set the next record as the current one. Click the ",
                React.createElement("b", null, "Previous"),
                " button to set the previous record as the current one. Click the",
                React.createElement("b", null, "Stop at 4th Row"),
                " button to prevent the current record from being changed once it reaches the 4th row. Click the ",
                React.createElement("b", null, "Clear"),
                " button to remove the stop and allow the current records to be changed freely."),
            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: "#cmJsx", role: "tab", "data-toggle": "tab" }, "JSX")),
                        React.createElement("li", null,
                            React.createElement("a", { href: "#cmJs", role: "tab", "data-toggle": "tab" }, "TS"))),
                    React.createElement("div", { className: "tab-content" },
                        React.createElement("div", { className: "tab-pane active pane-content", id: "cmJsx" },
                            ' <div className="row-fluid well btn-group">\n',
                            '     <button className="btn btn-default" onClick={this.next.bind(this)}>Next</button>\n',
                            '     <button className="btn btn-default" onClick={this.previous.bind(this)}>Previous</button>\n',
                            '     <button className="btn btn-default" onClick={this.stopCurrent.bind(this)}>Stop at 4th Row</button>\n',
                            '     <button className="btn btn-default" onClick={this.reset.bind(this)}>Clear</button>\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.cvCRM.items.map((item, idx1) => {\n',
                            '                 return <tr key={idx1} className={item == this.cvCRM.currentItem ? "success" : ""}\n',
                            '                     onClick={this.moveCurrentTo.bind(this, item)} >\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: "cmJs" },
                            '   fieldNames = DataSvc.default.getNames();\n',
                            '   cvCRM = new wjcCore.CollectionView(DataSvc.default.getData(10));\n',
                            '\n',
                            '   constructor(props) {\n',
                            '       super(props);\n',
                            '   }\n',
                            '\n',
                            '   next() {\n',
                            '       this.cvCRM.moveCurrentToNext();\n',
                            '       this.forceUpdate();\n',
                            '   }\n',
                            '\n',
                            '   moveCurrentTo(item) {\n',
                            '       this.cvCRM.moveCurrentTo(item);\n',
                            '       this.forceUpdate();\n',
                            '   }\n',
                            '\n',
                            '   previous() {\n',
                            '       this.cvCRM.moveCurrentToPrevious();\n',
                            '       this.forceUpdate();\n',
                            '   }\n',
                            '\n',
                            '   // current record management\n',
                            '   stopCurrent() {\n',
                            '       this.cvCRM.currentChanging.addHandler(this._stopCurrentIn4th);\n',
                            '   };\n',
                            '\n',
                            '   // restore to be able to change current.\n',
                            '   reset() {\n',
                            '       this.cvCRM.currentChanging.removeHandler(this._stopCurrentIn4th);\n',
                            '       this.forceUpdate();\n',
                            '   };\n',
                            '\n',
                            '   // forbid changing current when the current item is the 4th one.\n',
                            '   private _stopCurrentIn4th(sender, e) {\n',
                            '       // when the current is the 4rd item, stop moving.\n',
                            '       if (sender.currentPosition === 3) {\n',
                            '           e.cancel = true;\n',
                            '       }\n',
                            '   }\n'))),
                React.createElement("div", { className: "col-md-6" },
                    React.createElement("h4", null, "Result (live):"),
                    React.createElement("div", { className: "row-fluid well btn-group" },
                        React.createElement("button", { className: "btn btn-default", onClick: this.next.bind(this) }, "Next"),
                        React.createElement("button", { className: "btn btn-default", onClick: this.previous.bind(this) }, "Previous"),
                        React.createElement("button", { className: "btn btn-default", onClick: this.stopCurrent.bind(this) }, "Stop at 4th Row"),
                        React.createElement("button", { className: "btn btn-default", onClick: this.reset.bind(this) }, "Clear")),
                    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.cvCRM.items.map(function (item, idx1) {
                                return React.createElement("tr", { key: idx1, className: item == _this.cvCRM.currentItem ? "success" : "", onClick: _this.moveCurrentTo.bind(_this, item) }, _this.fieldNames.map(function (fieldName, idx2) {
                                    var itm = wjcCore.Globalize.format(item[fieldName], '');
                                    return React.createElement("td", { key: idx2, className: "text-center" }, itm);
                                }));
                            })))))));
    };
    return CurrentRecordManagement;
}(React.Component));
exports.CurrentRecordManagement = CurrentRecordManagement;
//# sourceMappingURL=CurrentRecordManagement.js.map