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 __());
    };
})();
var GroupPanel = /** @class */ (function (_super) {
    __extends(GroupPanel, _super);
    function GroupPanel() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.panel = null;
        _this.grid = null;
        _this.state = {
            view: new wijmo.collections.CollectionView(Util.getData())
        };
        return _this;
    }
    GroupPanel.prototype.render = function () {
        var _this = this;
        return React.createElement("div", null,
            React.createElement("h2", null, "GroupPanel"),
            React.createElement("p", null,
                "Use the ",
                React.createElement("b", null, "Wj.GroupPanel"),
                " component to implement a UI for drag/drop grouping. It provides a drag/drop surface, so users can create and modify the groups dynamically:"),
            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: "#gp2Jsx", role: "tab", "data-toggle": "tab" }, "JSX")),
                        React.createElement("li", null,
                            React.createElement("a", { href: "#gp2Js", role: "tab", "data-toggle": "tab" }, "JS"))),
                    React.createElement("div", { className: "tab-content" },
                        React.createElement("div", { className: "tab-pane active pane-content", id: "gp2Jsx" },
                            '<Wj.GroupPanel\n',
                            '    ref={(panel) => this.panel = panel.control}\n',
                            '    placeholder="Drag columns here to create Groups" />\n',
                            '<Wj.FlexGrid\n',
                            '    ref={(grid) => this.panel.grid = grid.control}\n',
                            '    itemsSource={this.state.view} />\n'),
                        React.createElement("div", { className: "tab-pane pane-content", id: "gp2Js" },
                            'panel = null;\n',
                            'grid =  null;\n',
                            'state =\n',
                            '{\n',
                            '    view: new wijmo.collections.CollectionView(Util.getData())\n',
                            '}\n'))),
                React.createElement("div", { className: "col-md-6" },
                    React.createElement("h4", null, "Result (live):"),
                    React.createElement(Wj.GroupPanel, { ref: function (panel) { return _this.panel = panel.control; }, placeholder: "Drag columns here to create Groups" }),
                    React.createElement(Wj.FlexGrid, { ref: function (grid) { return _this.panel.grid = grid.control; }, itemsSource: this.state.view }))));
    };
    return GroupPanel;
}(React.Component));
//# sourceMappingURL=GroupPanel.js.map