"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");
var wjMultiRow = require("wijmo/wijmo.react.grid.multirow");
//Application
var DataSvc_1 = require("../services/DataSvc");
var AddingDeletingRecords = /** @class */ (function (_super) {
    __extends(AddingDeletingRecords, _super);
    function AddingDeletingRecords(props) {
        var _this = _super.call(this, props) || this;
        _this.orders = DataSvc_1.DataService.default.addNewOrders;
        _this.layoutDefs = DataSvc_1.DataService.default.ldThreeLines;
        _this.state = {
            layoutDefinition: _this.layoutDefs,
            allowAddNew: true,
            allowDelete: true
        };
        return _this;
    }
    AddingDeletingRecords.prototype.allowAddOrDeleteChanged = function (event) {
        var target = event.target, value = target.type === 'checkbox' ? target.checked : target.value, name = target.name;
        this.setState((_a = {},
            _a[name] = value,
            _a));
        var _a;
    };
    AddingDeletingRecords.prototype.render = function () {
        return React.createElement("div", null,
            React.createElement("h2", null, "Adding and Deleting Records"),
            React.createElement("p", null,
                "The ",
                React.createElement("b", null, "MultiRow"),
                " control supports the ",
                React.createElement("b", null, "allowAddNew"),
                " and ",
                React.createElement("b", null, "allowDelete"),
                "properties provided by the ",
                React.createElement("b", null, "FlexGrid"),
                " control."),
            React.createElement("p", null,
                "Setting the ",
                React.createElement("b", null, "allowAddNew"),
                " property to true causes the grid to display a set of 'new row template' rows at the bottom of the grid. When user starts editing a cell in the new row template, a new item is added to the source collection. When user finishes editing the new item by moving the selection to another row or the focus to another control, the new item is committed."),
            React.createElement("p", null,
                "Setting the ",
                React.createElement("b", null, "allowDelete"),
                " property to true causes the grid to monitor key presses and to delete the current row if user presses the 'Delete' key while an entire row is selected."),
            React.createElement("div", { className: "row" },
                React.createElement("div", { className: "col-md-5" },
                    React.createElement("ul", { className: "nav nav-tabs", role: "tablist" },
                        React.createElement("li", { className: "active" },
                            React.createElement("a", { href: "#adrJsx", role: "tab", "data-toggle": "tab" }, "JSX")),
                        React.createElement("li", null,
                            React.createElement("a", { href: "#adrJs", role: "tab", "data-toggle": "tab" }, "TS")),
                        React.createElement("li", null,
                            React.createElement("a", { href: "#adrCss", role: "tab", "data-toggle": "tab" }, "CSS"))),
                    React.createElement("div", { className: "tab-content" },
                        React.createElement("div", { className: "tab-pane active pane-content", id: "adrJsx" },
                            '<wjMultiRow.MultiRow\n',
                            '    itemsSource={this.orders}\n',
                            '    layoutDefinition={this.state.layoutDefinition}\n',
                            '    allowAddNew={this.state.allowAddNew}\n',
                            '    allowDelete={this.state.allowDelete}>\n',
                            '</wjMultiRow.MultiRow>\n',
                            '<label>\n',
                            '    <input type="checkbox" name="allowAddNew" checked={this.state.allowAddNew}\n',
                            '        onChange={this.allowAddOrDeleteChanged.bind(this)}/>\n',
                            '    Allow Add New\n',
                            '</label>\n',
                            '<br />\n',
                            '<label>\n',
                            '   <input type="checkbox" name="allowDelete" checked={this.state.allowDelete}\n',
                            '          onChange={this.allowAddOrDeleteChanged.bind(this)}/>\n',
                            '    Allow Delete\n',
                            '</label>\n'),
                        React.createElement("div", { className: "tab-pane pane-content", id: "adrJs" },
                            ' constructor(props) {\n',
                            '     super(props);\n',
                            '     this.state = {\n',
                            '         layoutDefinition: this.layoutDefs,\n',
                            '         allowAddNew: true,\n',
                            '         allowDelete:true\n',
                            '     }\n',
                            ' }\n',
                            '\n',
                            ' allowAddOrDeleteChanged(event) {\n',
                            '     var target = event.target,\n',
                            '         value = target.type === \'checkbox\' ? target.checked : target.value,\n',
                            '         name = target.name;\n',
                            '\n',
                            '     this.setState({\n',
                            '       [name]: value\n',
                            '     });\n',
                            ' }\n'),
                        React.createElement("div", { className: "tab-pane pane-content", id: "adrCss" },
                            '/* custom styling for new row templates */\n',
                            '.wj-cell.wj-new:not(.wj-header):not(.wj-group):not(.wj-state-selected):not(.wj-state-multi-selected) {\n',
                            '    background-color: #f3fbcc;\n',
                            '}\n'))),
                React.createElement("div", { className: "col-md-7" },
                    React.createElement("h4", null, "Result (live):"),
                    React.createElement(wjMultiRow.MultiRow, { itemsSource: this.orders, layoutDefinition: this.state.layoutDefinition, allowAddNew: this.state.allowAddNew, allowDelete: this.state.allowDelete }),
                    React.createElement("label", null,
                        React.createElement("input", { type: "checkbox", name: "allowAddNew", checked: this.state.allowAddNew, onChange: this.allowAddOrDeleteChanged.bind(this) }),
                        "Allow Add New"),
                    React.createElement("br", null),
                    React.createElement("label", null,
                        React.createElement("input", { type: "checkbox", name: "allowDelete", checked: this.state.allowDelete, onChange: this.allowAddOrDeleteChanged.bind(this) }),
                        "Allow Delete"))));
    };
    return AddingDeletingRecords;
}(React.Component));
exports.AddingDeletingRecords = AddingDeletingRecords;
//# sourceMappingURL=AddingDeletingRecords.js.map