"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 wjInput = require("wijmo/wijmo.react.input");
var wjMultiRow = require("wijmo/wijmo.react.grid.multirow");
//Application
var DataSvc_1 = require("../services/DataSvc");
var MultiRowLayoutDefinition = /** @class */ (function (_super) {
    __extends(MultiRowLayoutDefinition, _super);
    function MultiRowLayoutDefinition(props) {
        var _this = _super.call(this, props) || this;
        _this.orders = DataSvc_1.DataService.default.orders;
        _this.layoutDefs = DataSvc_1.DataService.default.layoutDefs;
        _this.state = {
            layoutDefinition: _this.layoutDefs.items[2].def,
            desc: _this.layoutDefs.items[2].description
        };
        return _this;
    }
    MultiRowLayoutDefinition.prototype.layoutDefChanged = function (s, e) {
        var currentItem = this.layoutDefs.currentItem;
        this.setState({ layoutDefinition: currentItem.def });
        this.setState({ desc: currentItem.description });
    };
    MultiRowLayoutDefinition.prototype.render = function () {
        return React.createElement("div", null,
            React.createElement("h2", null, "MultiRow Layout Definition"),
            React.createElement("p", null,
                "The ",
                React.createElement("b", null, "MultiRow"),
                " control uses multiple rows to display each record. The record layout is defined by the ",
                React.createElement("b", null, "layoutDefinition"),
                " property."),
            React.createElement("p", null,
                "The ",
                React.createElement("b", null, "layoutDefinition"),
                " property contains an array of cell group objects with the following properties:"),
            React.createElement("ul", null,
                React.createElement("li", null,
                    React.createElement("b", null, "header"),
                    ": Group name."),
                React.createElement("li", null,
                    React.createElement("b", null, "colspan"),
                    ": Number of columns spanned by the group (defaults to one)."),
                React.createElement("li", null,
                    React.createElement("b", null, "cells"),
                    ": Array of objects representing the cells in the group. Cells are columns with an additional ",
                    React.createElement("b", null, "colspan"),
                    " property.")),
            React.createElement("p", null,
                "The example below illustrates the usage of the ",
                React.createElement("b", null, "layoutDefiniton"),
                " property:"),
            React.createElement("p", null,
                "Now, let's look at the same data shown in a ",
                React.createElement("b", null, "MultiRow"),
                " control with different layouts. Use the combo box to select a layout definition and how the grid groups the data in different ways. Notice that the ",
                React.createElement("b", null, "MultiRow"),
                " control provides all the usual grid features, including editing, sorting, filtering, and column sizing:"),
            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: "#mldJsx", role: "tab", "data-toggle": "tab" }, "JSX")),
                        React.createElement("li", null,
                            React.createElement("a", { href: "#mldJs", role: "tab", "data-toggle": "tab" }, "TS"))),
                    React.createElement("div", { className: "tab-content" },
                        React.createElement("div", { className: "tab-pane active pane-content", id: "mldJsx" },
                            '<wjMultiRow.MultiRow itemsSource={this.orders}\n',
                            '    layoutDefinition={this.state.layoutDefinition}>\n',
                            '</wjMultiRow.MultiRow>\n',
                            '<wjInput.ComboBox\n',
                            '    itemsSource={this.layoutDefs}\n',
                            '    displayMemberPath="name"\n',
                            '    textChanged={this.layoutDefChanged.bind(this)} />\n',
                            '\n',
                            '<p>{this.state.desc}</p>\n'),
                        React.createElement("div", { className: "tab-pane pane-content", id: "mldJs" },
                            ' // sample layout definitions\n',
                            'this.ldOneLine = [\n',
                            '   {cells: [{binding: \'id\', header: \'ID\', cssClass: \'id\' }] },\n',
                            '   {cells: [{binding: \'date\', header: \'Ordered\' }] },\n',
                            '   {cells: [{binding: \'shippedDate\', header: \'Shipped\' }] },\n',
                            '   {cells: [{binding: \'amount\', header: \'Amount\', format: \'c\', cssClass: \'amount\' }] },\n',
                            '   {cells: [{binding: \'customer.name\', header: \'Customer\' }] },\n',
                            '   {cells: [{binding: \'customer.address\', header: \'Address\' }] },\n',
                            '   {cells: [{binding: \'customer.city\', header: \'City\', dataMap: this.cityMap }] },\n',
                            '   {cells: [{binding: \'customer.state\', header: \'State\', width: 45 }] },\n',
                            '   {cells: [{binding: \'customer.zip\', header: \'Zip\' }] },\n',
                            '   {cells: [{binding: \'customer.email\', header: \'Customer Email\', cssClass: \'email\' }] },\n',
                            '   {cells: [{binding: \'customer.phone\', header: \'Customer Phone\' }] },\n',
                            '   {cells: [{binding: \'shipper.name\', header: \'Shipper\' }] },\n',
                            '   {cells: [{binding: \'shipper.email\', header: \'Shipper Email\', cssClass: \'email\' }] },\n',
                            '   {cells: [{binding: \'shipper.phone\', header: \'Shipper Phone\' }] },\n',
                            '   {cells: [{binding: \'shipper.express\', header: \'Express\' }] }\n',
                            '];\n',
                            'this.ldTwoLines = [\n',
                            '    {\n',
                            '        header: \'Order\', colspan: 2, cells: \n',
                            '            {binding: \'id\', header: \'ID\', cssClass: \'id\' },\n',
                            '            {binding: \'date\', header: \'Ordered\' },\n',
                            '            {binding: \'amount\', header: \'Amount\', format: \'c\', cssClass: \'amount\' },\n',
                            '            {binding: \'shippedDate\', header: \'Shipped\' }\n',
                            '        ]\n',
                            '    },\n',
                            '    {\n',
                            '         header: \'Customer\', colspan: 3, cells: [\n',
                            '            {binding: \'customer.name\', header: \'Name\' },\n',
                            '            {binding: \'customer.email\', header: \'EMail\', colspan: 2, cssClass: \'email\' },\n',
                            '            {binding: \'customer.address\', header: \'Address\' },\n',
                            '            {binding: \'customer.city\', header: \'City\', dataMap: this.cityMap },\n',
                            '            {binding: \'customer.state\', header: \'State\', width: 45 }\n',
                            '        ]\n',
                            '    },\n',
                            '    {\n',
                            '          header: \'Shipper\', cells: [\n',
                            '            {binding: \'shipper.name\', header: \'Shipper\', colspan: 2 },\n',
                            '            {binding: \'shipper.email\', header: \'EMail\', cssClass: \'email\' },\n',
                            '            {binding: \'shipper.express\', header: \'Express\' }\n',
                            '        ]\n',
                            '    }\n',
                            '];\n',
                            'this.ldThreeLines = [\n',
                            '    {\n',
                            '          header: \'Order\', colspan: 2, cells: [\n',
                            '            {binding: \'id\', header: \'ID\', colspan: 2, cssClass: \'id\' },\n',
                            '            {binding: \'amount\', header: \'Amount\', format: \'c\', colspan: 2, cssClass: \'amount\' },\n',
                            '            {binding: \'date\', header: \'Ordered\' },\n',
                            '            {binding: \'shippedDate\', header: \'Shipped\' }\n',
                            '        ]\n',
                            '    },\n',
                            '    {\n',
                            '          header: \'Customer\', colspan: 3, cells: [\n',
                            '            {binding: \'customer.name\', header: \'Name\' },\n',
                            '            {binding: \'customer.email\', header: \'EMail\', colspan: 2, cssClass: \'email\' },\n',
                            '            {binding: \'customer.address\', header: \'Address\', colspan: 2 },\n',
                            '            {binding: \'customer.phone\', header: \'Phone\' },\n',
                            '            {binding: \'customer.city\', header: \'City\', dataMap: this.cityMap },\n',
                            '            {binding: \'customer.state\', header: \'State\', width: 45 },\n',
                            '            {binding: \'customer.zip\', header: \'Zip\' },\n',
                            '        ]\n',
                            '    },\n',
                            '    {\n',
                            '          header: \'Shipper\', cells: [\n',
                            '            {binding: \'shipper.name\', header: \'Shipper\' },\n',
                            '            {binding: \'shipper.email\', header: \'EMail\', cssClass: \'email\' },\n',
                            '            {binding: \'shipper.express\', header: \'Express\' }\n',
                            '        ]\n',
                            '    }\n',
                            ']\n',
                            'this.layoutDefs = new wjcCore.CollectionView([\n',
                            '    {\n',
                            '        name: \'Traditional\',\n',
                            '        description: \'Traditional grid view, with one row per record. The user must scroll horizontally to see the whole record.\',\n',
                            '        def: this.ldOneLine\n',
                            '    },\n',
                            '    {\n',
                            '        name: \'Compact\',\n',
                            '        description: \'This view uses two rows per record. The layout is divided into three groups: order, customer, and shipper\',\n',
                            '        def: this.ldTwoLines\n',
                            '    },n',
                            '    {n',
                            '   name: \'Detailed\',\n',
                            '        description: \'This view uses three rows per record. The layout is divided into three groups: order, customer, and shipper\',\n',
                            '        def: this.ldThreeLines\n',
                            '    }\n',
                            ']);\n',
                            'this.state = {\n',
                            '    layoutDefinition: this.layoutDefs.items[2].def,\n',
                            '      desc: this.layoutDefs.items[2].description\n',
                            ' }\n',
                            ' layoutDefChanged(s, e) {\n',
                            '      var currentItem = this.layoutDefs.currentItem;\n',
                            '      this.setState({layoutDefinition: currentItem.def });\n',
                            '      this.setState({desc: currentItem.description });\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 }),
                    React.createElement(wjInput.ComboBox, { itemsSource: this.layoutDefs, displayMemberPath: "name", textChanged: this.layoutDefChanged.bind(this) }),
                    React.createElement("p", null, this.state.desc))),
            React.createElement("p", null,
                "The ",
                React.createElement("b", null, "layoutDefinition"),
                " property specifies the layout of the cells in the grid. It contains an array of cell group objects. Each cell group specifies how many columns the group should span, and the cells that make up each group."),
            React.createElement("p", null, "The image below illustrates how a cell group is interpreted and turned into a grid layout:"),
            React.createElement("img", { src: "resources/cellGroup.png", alt: "cell group" }),
            React.createElement("p", null,
                "The group spans three grid columns. It contains six cells with different spans. When generating the layout, the grid fits as many cells as possible in each row, and wraps to the next row when the group span is reached. The last cell in each row is automatically expanded to fill ",
                React.createElement("b", null, "colspan"),
                " of the group. The process is similar to wrapping of text to create a paragraph."),
            React.createElement("p", null,
                "The same process is applied to every group in the ",
                React.createElement("b", null, "layoutDefinition"),
                "object."));
    };
    return MultiRowLayoutDefinition;
}(React.Component));
exports.MultiRowLayoutDefinition = MultiRowLayoutDefinition;
//# sourceMappingURL=MultiRowLayoutDefinition.js.map