"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 AccordionTrees = /** @class */ (function (_super) {
    __extends(AccordionTrees, _super);
    function AccordionTrees(props) {
        var _this = _super.call(this, props) || this;
        _this.accordionItems = DataSvc_1.DataService.default.accordionItems;
        _this.treeView = null;
        _this.state = {
            accordioItem: true
        };
        return _this;
    }
    AccordionTrees.prototype.initialized = function (s) {
        var _this = this;
        this.treeView = s;
        this.treeView.hostElement.addEventListener('click', function (e) {
            if (e.target.tagName == 'A') {
                _this.setState({
                    accordioItem: 'Navigating to *** ' + e.target.href + ' ***'
                });
                e.preventDefault();
            }
        });
    };
    AccordionTrees.prototype.render = function () {
        return React.createElement("div", null,
            React.createElement("h2", null, "Accordion Trees"),
            React.createElement("p", null, "Accordions are multi-pane panels that keep only one panel expanded at a time. They are commonly used for navigation."),
            React.createElement("p", null, "You can use the TreeView control to implement accordions."),
            React.createElement("p", null,
                "Use CSS to customize the header display and to hide the collapse/expand glyphs, and make sure the ",
                React.createElement("b", null, "autoCollapse"),
                " property is set to true (the default), so non-active panels are automatically collapsed."),
            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: "#atJsx", role: "tab", "data-toggle": "tab" }, "JSX")),
                        React.createElement("li", null,
                            React.createElement("a", { href: "#atJs", role: "tab", "data-toggle": "tab" }, "TS")),
                        React.createElement("li", null,
                            React.createElement("a", { href: "#atCss", role: "tab", "data-toggle": "tab" }, "CSS"))),
                    React.createElement("div", { className: "tab-content" },
                        React.createElement("div", { className: "tab-pane active pane-content", id: "atJsx" },
                            '<wjNav.TreeView\n',
                            '    initialized={this.initialized.bind(this)}\n',
                            '    className="accordion-tree"\n',
                            '    itemsSource={this.accordionItems}\n',
                            '    isContentHtml={true}\n',
                            '    autoCollapse={true} />\n',
                            '\n',
                            '<div id="tvAccordionItem">{this.state.accordioItem}</div>\n'),
                        React.createElement("div", { className: "tab-pane pane-content", id: "atJs" },
                            'constructor(props) {\n',
                            '    super(props);\n',
                            '    this.state = {\n',
                            '        accordioItem: true\n',
                            '    }\n',
                            '}\n',
                            '\n',
                            'initialized(s) {\n',
                            '    this.treeView = s;\n',
                            '    this.treeView.hostElement.addEventListener(\'click\', (e: any) => {\n',
                            '        if (e.target.tagName == \'A\') {\n',
                            '            this.setState({\n',
                            '                accordioItem: \'Navigating to *** \' + e.target.href + \' ***\'\n',
                            '            }); \n',
                            '            e.preventDefault();\n',
                            '        }\n',
                            '    })\n',
                            '}\n'),
                        React.createElement("div", { className: "tab-pane pane-content", id: "atCss" },
                            ' /* accordion tree styles */\n',
                            ' .accordion-tree.wj-treeview &#123;\n',
                            '     background: transparent;\n',
                            '     box-shadow: none;\n',
                            '     height: auto;\n',
                            ' }\n',
                            '\n',
                            ' /* hide collapse/expand glyphs */\n',
                            ' .accordion-tree.wj-treeview .wj-nodelist .wj-node:before &#123; \n',
                            '     display: none;\n',
                            ' }\n',
                            '\n',
                            ' /* level 0 nodes (headers) */\n',
                            ' .accordion-tree.wj-treeview .wj-nodelist > .wj-node &#123;\n',
                            '     font-size: 120%;\n',
                            '     font-weight: bold;\n',
                            '     padding: 6px 10px;\n',
                            '     color: white;\n',
                            '     background: #106cc8;\n',
                            '     margin-bottom: 4px;\n',
                            '     box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);\n',
                            ' }\n',
                            '\n',
                            ' /* level 1 nodes (navigation items) */\n',
                            ' .accordion-tree.wj-treeview .wj-nodelist > .wj-nodelist > .wj-node &#123;\n',
                            '     font-size: inherit;\n',
                            '     font-weight: normal;\n',
                            '     padding: 4px 1em;\n',
                            '     color: inherit;\n',
                            '     background: inherit;\n',
                            '     box-shadow: none;\n',
                            ' }\n',
                            ' .accordion-tree.wj-treeview .wj-nodelist &#123;\n',
                            '      padding-bottom: 6px;\n',
                            ' }\n'))),
                React.createElement("div", { className: "col-md-7" },
                    React.createElement("h4", null, "Result (live):"),
                    React.createElement(wjNav.TreeView, { initialized: this.initialized.bind(this), className: "accordion-tree", itemsSource: this.accordionItems, isContentHtml: true, autoCollapse: true }),
                    React.createElement("div", { id: "tvAccordionItem" }, this.state.accordioItem))));
    };
    return AccordionTrees;
}(React.Component));
exports.AccordionTrees = AccordionTrees;
//# sourceMappingURL=AccordionTrees.js.map