"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 CreatingTrees = /** @class */ (function (_super) {
    __extends(CreatingTrees, _super);
    function CreatingTrees(props) {
        var _this = _super.call(this, props) || this;
        _this.items = DataSvc_1.DataService.default.items;
        _this.treeView = null;
        _this.state = {
            isAnimated: true,
            autoCollapse: true,
            expandOnClick: true
        };
        return _this;
    }
    CreatingTrees.prototype.collapseAll = function () {
        this.treeView.collapseToLevel(0);
    };
    CreatingTrees.prototype.expandAll = function () {
        this.treeView.collapseToLevel(1000);
    };
    CreatingTrees.prototype.initialized = function (s) {
        this.treeView = s;
    };
    CreatingTrees.prototype.treeStateChanged = 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;
    };
    CreatingTrees.prototype.render = function () {
        return React.createElement("div", null,
            React.createElement("h2", null, "Creating Trees"),
            React.createElement("p", null, "To create trees, you will normally have to set three properties:"),
            React.createElement("ol", null,
                React.createElement("li", null,
                    React.createElement("b", null, "itemsSource"),
                    " defines the array that contains the hierarchical data. Each item in the array contains information about a node and (optionally) an array of child nodes."),
                React.createElement("li", null,
                    React.createElement("b", null, "displayMemberPath"),
                    " defines the name of the property in the items that contains the text to be displayed in the tree nodes. By default, this property is set to the string 'header'."),
                React.createElement("li", null,
                    React.createElement("b", null, "childItemsPath"),
                    " defines the name of the property in the items that contains the array of child nodes. By default, this property is set to the string 'items'.")),
            React.createElement("p", null,
                "There are also properties for binding node images, checkboxes, and collapsed state to the ",
                React.createElement("b", null, "itemsSource"),
                " array."),
            React.createElement("p", null,
                "By default, the TreeView expands the first node of each level when it loads the tree. You can customize that behavior using the ",
                React.createElement("b", null, "collapsedMemberPath"),
                " property to control the collapsed state of each node, or call the ",
                React.createElement("b", null, "collapseToLevel"),
                " method after the tree is loaded to collapse all nodes deeper than the level you want to show."),
            React.createElement("p", null, "Once the tree is loaded, you can select, collapse, or expand nodes using the mouse or the keyboard. You can also use the keyboard to search for nodes."),
            React.createElement("p", null,
                "The TreeView control uses animations to expand and collapse nodes by default. You can turn this feature off by setting the ",
                React.createElement("b", null, "isAnimated"),
                " property to false."),
            React.createElement("p", null,
                "It also collapses sibling nodes automatically when a node is expanded. You can turn this feature off by setting the ",
                React.createElement("b", null, "autoCollapse"),
                " property to false."),
            React.createElement("p", null,
                "By default, the TreeView control expands collapsed nodes when the user clicks anywhere on the node. You can change this by setting the ",
                React.createElement("b", null, "expandOnClick"),
                " property to false, in which case only clicks on the collapsed/expanded glyph will affect the collapsed state."),
            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: "#smrJsx", role: "tab", "data-toggle": "tab" }, "JSX")),
                        React.createElement("li", null,
                            React.createElement("a", { href: "#smrJs", role: "tab", "data-toggle": "tab" }, "TS")),
                        React.createElement("li", null,
                            React.createElement("a", { href: "#smrCss", role: "tab", "data-toggle": "tab" }, "CSS"))),
                    React.createElement("div", { className: "tab-content" },
                        React.createElement("div", { className: "tab-pane active pane-content", id: "smrJsx" },
                            '<wjNav.TreeView\n',
                            '    initialized={this.initialized.bind(this)}\n',
                            '    itemsSource={this.items}\n',
                            '    displayMemberPath={\'header\'}\n',
                            '    childItemsPath={\'items\'}\n',
                            '    isAnimated={this.state.isAnimated}\n',
                            '    autoCollapse={this.state.autoCollapse}\n',
                            '    expandOnClick={this.state.expandOnClick} />\n',
                            '<div>\n',
                            '    <button id="btnCollapse" className="btn btn-default" onClick={this.collapseAll.bind(this)}>Collapse All</button>\n',
                            '    <button id="btnExpand" className="btn btn-default" onClick={this.expandAll.bind(this)}>Expand All</button>\n',
                            '</div>\n',
                            '<br />\n',
                            '<label>\n',
                            '    <input id="chkIsAnimated" type="checkbox" name="isAnimated" checked={this.state.isAnimated}\n',
                            '        onChange={this.treeStateChanged.bind(this)}/> \n',
                            '    isAnimated\n',
                            '</label>\n',
                            '<br />\n',
                            '<label>\n',
                            '    <input id="chkAutoCollapse" type="checkbox" name="autoCollapse" checked={this.state.autoCollapse}\n',
                            '        onChange={this.treeStateChanged.bind(this)} /> \n',
                            '    autoCollapse\n',
                            '</label>\n',
                            '<br />\n',
                            '<label>\n',
                            '    <input id="chkExpandOnClick" type="checkbox" name="expandOnClick" checked={this.state.expandOnClick}\n',
                            '        onChange={this.treeStateChanged.bind(this)} /> \n',
                            '    expandOnClick\n',
                            '</label>\n'),
                        React.createElement("div", { className: "tab-pane pane-content", id: "smrJs" },
                            'tems = [\n',
                            '     {header: \'Electronics\', img: \'resources/electronics.png\', items: [\n',
                            '           {header: \'Trimmers/Shavers\' },\n',
                            '           {header: \'Tablets\' },\n',
                            '           {\n',
                            '                       header: \'Phones\', img: \'resources/phones.png\', items: [\n',
                            '                   {header: \'Apple\' },\n',
                            '                   {header: \'Motorola\', newItem: true },\n',
                            '                   {header: \'Nokia\' },\n',
                            '                   {header: \'Samsung\' }\n',
                            '               ]\n',
                            '           },\n',
                            '           {header: \'Speakers\', newItem: true },\n',
                            '           {header: \'Monitors\' }\n',
                            '       ]\n',
                            '   }.....];\n',
                            '   treeView = null;\n',
                            '   constructor(props) {\n',
                            '       super(props);\n',
                            '       this.state = {\n',
                            '           isAnimated: true,\n',
                            '           autoCollapse: true,\n',
                            '           expandOnClick: true\n',
                            '       }\n',
                            '   }\n',
                            '\n',
                            '   collapseAll() {\n',
                            '       this.treeView.collapseToLevel(0);\n',
                            '   }\n',
                            '\n',
                            '   expandAll() {\n',
                            '       this.treeView.collapseToLevel(1000);\n',
                            '   }\n',
                            '\n',
                            '   initialized(s) {\n',
                            '       console.log(s);\n',
                            '       this.treeView = s;\n',
                            '   }\n',
                            '\n',
                            '   treeStateChanged(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: "smrCss" },
                            ' /* default trees on this sample */\n',
                            ' .wj-treeview &#123;\n',
                            '     height: 350px;\n',
                            '     font-size: 120%;\n',
                            '     margin-bottom: 8px;\n',
                            '     background: white;\n',
                            '     box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);\n',
                            ' }\n'))),
                React.createElement("div", { className: "col-md-7" },
                    React.createElement("h4", null, "Result (live):"),
                    React.createElement(wjNav.TreeView, { initialized: this.initialized.bind(this), itemsSource: this.items, displayMemberPath: 'header', childItemsPath: 'items', isAnimated: this.state.isAnimated, autoCollapse: this.state.autoCollapse, expandOnClick: this.state.expandOnClick }),
                    React.createElement("div", null,
                        React.createElement("button", { id: "btnCollapse", className: "btn btn-default", onClick: this.collapseAll.bind(this) }, "Collapse All"),
                        React.createElement("button", { id: "btnExpand", className: "btn btn-default", onClick: this.expandAll.bind(this) }, "Expand All")),
                    React.createElement("br", null),
                    React.createElement("label", null,
                        React.createElement("input", { id: "chkIsAnimated", type: "checkbox", name: "isAnimated", checked: this.state.isAnimated, onChange: this.treeStateChanged.bind(this) }),
                        "isAnimated"),
                    React.createElement("br", null),
                    React.createElement("label", null,
                        React.createElement("input", { id: "chkAutoCollapse", type: "checkbox", name: "autoCollapse", checked: this.state.autoCollapse, onChange: this.treeStateChanged.bind(this) }),
                        "autoCollapse"),
                    React.createElement("br", null),
                    React.createElement("label", null,
                        React.createElement("input", { id: "chkExpandOnClick", type: "checkbox", name: "expandOnClick", checked: this.state.expandOnClick, onChange: this.treeStateChanged.bind(this) }),
                        "expandOnClick"))));
    };
    return CreatingTrees;
}(React.Component));
exports.CreatingTrees = CreatingTrees;
//# sourceMappingURL=CreatingTrees.js.map