"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 wjNav = require("wijmo/wijmo.react.nav");
//Application
var DataSvc_1 = require("../services/DataSvc");
var NavigationTrees = /** @class */ (function (_super) {
    __extends(NavigationTrees, _super);
    function NavigationTrees(props) {
        var _this = _super.call(this, props) || this;
        _this.items = DataSvc_1.DataService.default.items;
        _this.treeView = null;
        _this.state = {
            navItem: ''
        };
        _this.initialized = _this.initialized.bind(_this);
        _this.navTo = _this.navTo.bind(_this);
        return _this;
    }
    NavigationTrees.prototype.initialized = function (s) {
        this.treeView = s;
    };
    // 'Navigation' display
    NavigationTrees.prototype.navTo = function () {
        this.setState({
            navItem: 'Navigating to *** ' + this.treeView.selectedItem.header + ' ***'
        });
    };
    NavigationTrees.prototype.render = function () {
        return React.createElement("div", null,
            React.createElement("h2", null, "Navigation Trees"),
            React.createElement("p", null, "The simplest and most common use for the TreeView control is navigation. The TreeView's hierarchical structure and auto-search functionality make it easy for users to drill-down and find the items they are interested in."),
            React.createElement("p", null,
                "You can use the ",
                React.createElement("b", null, "selectedItemChanged"),
                " or ",
                React.createElement("b", null, "itemClicked"),
                " events for navigation. The difference is that ",
                React.createElement("b", null, "selectedItemChanged"),
                " occurs when the user moves the selection with the keyboard, and ",
                React.createElement("b", null, "itemClicked"),
                " occurs when the user clicks an item or presses the Enter key."),
            React.createElement("p", null,
                "This example uses the ",
                React.createElement("b", null, "itemClicked"),
                " event:"),
            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: "#ntJsx", role: "tab", "data-toggle": "tab" }, "JSX")),
                        React.createElement("li", null,
                            React.createElement("a", { href: "#ntJs", role: "tab", "data-toggle": "tab" }, "TS"))),
                    React.createElement("div", { className: "tab-content" },
                        React.createElement("div", { className: "tab-pane active pane-content", id: "ntJsx" },
                            '<wjNav.TreeView\n',
                            '    initialized={this.initialized}\n',
                            '    itemsSource={this.items}\n',
                            '    displayMemberPath={\'header\'}\n',
                            '    childItemsPath={\'items\'}\n',
                            '    itemClicked={this.navTo} />\n',
                            '\n',
                            '<div id="tvNavItem">{this.state.navItem}</div>\n'),
                        React.createElement("div", { className: "tab-pane pane-content", id: "ntJs" },
                            'constructor(props) {\n',
                            '    super(props);\n',
                            '    this.state = {\n',
                            '        navItem: \'\'\n',
                            '    }\n',
                            '    this.initialized = this.initialized.bind(this);\n',
                            '    this.navTo = this.navTo.bind(this);\n',
                            '}\n',
                            '\n',
                            'initialized(s) {\n',
                            '    this.treeView = s;  \n',
                            '}\n',
                            '\n',
                            '// \'Navigation\' display\n',
                            'navTo() {\n',
                            '    this.setState({\n',
                            '        navItem: \'Navigating to *** \' + this.treeView.selectedItem.header + \' ***\'\n',
                            '    });     \n',
                            '}\n'))),
                React.createElement("div", { className: "col-md-7" },
                    React.createElement("h4", null, "Result (live):"),
                    React.createElement(wjNav.TreeView, { initialized: this.initialized, itemsSource: this.items, displayMemberPath: 'header', childItemsPath: 'items', itemClicked: this.navTo }),
                    React.createElement("div", { id: "tvNavItem" }, this.state.navItem))));
    };
    return NavigationTrees;
}(React.Component));
exports.NavigationTrees = NavigationTrees;
//# sourceMappingURL=NavigationTrees.js.map