"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 LazyLoading = /** @class */ (function (_super) {
    __extends(LazyLoading, _super);
    function LazyLoading(props) {
        var _this = _super.call(this, props) || this;
        _this.lazyItems = DataSvc_1.DataService.default.lazyItems;
        _this.treeView = null;
        _this.initialized = _this.initialized.bind(_this);
        _this.lazyLoadFunction = _this.lazyLoadFunction.bind(_this);
        return _this;
    }
    LazyLoading.prototype.initialized = function (s) {
        this.treeView = s;
    };
    LazyLoading.prototype.lazyLoadFunction = function (node, callback) {
        setTimeout(function () {
            var result = [
                { header: 'Another lazy node...', items: [] },
                { header: 'A non-lazy node without children' },
                {
                    header: 'A non-lazy node with child nodes', items: [
                        { header: 'hello' },
                        { header: 'world' }
                    ]
                }
            ];
            callback(result); // return result to control
        }, 2500); // 2.5sec http delay
    };
    LazyLoading.prototype.render = function () {
        return React.createElement("div", null,
            React.createElement("h2", null, "Lazy Loading"),
            React.createElement("p", null, "Lazy loading is useful when you are dealing with large hierarchical data sources and would like to avoid the delays involved in loading the entire data set at once."),
            React.createElement("p", null, "The TreeView control makes lazy-loading super easy. Only two steps are required:"),
            React.createElement("ol", null,
                React.createElement("li", null,
                    "Set the ",
                    React.createElement("b", null, "items"),
                    " property in the parent node data item to an empty array."),
                React.createElement("li", null,
                    "Set the TreeView's ",
                    React.createElement("b", null, "lazyLoadFunction"),
                    " property to a function to be called when the user expands the node. This function takes two parameters: the parent node and a callback function to be invoked when the data becomes available.")),
            React.createElement("p", null,
                "The tree in example below starts with three lazy-loaded nodes. When you expand them, the ",
                React.createElement("b", null, "lazyLoadFunction"),
                " is invoked. The function uses a setTimeout to simulate an http delay and returns data for three child nodes, one of which is also a lazy-loaded node."),
            React.createElement("p", null, "The example also uses some CSS to animate the node icons while they are being loaded."),
            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: "#llJsx", role: "tab", "data-toggle": "tab" }, "JSX")),
                        React.createElement("li", null,
                            React.createElement("a", { href: "#llJs", role: "tab", "data-toggle": "tab" }, "TS"))),
                    React.createElement("div", { className: "tab-content" },
                        React.createElement("div", { className: "tab-pane active pane-content", id: "llJsx" },
                            '<wjNav.TreeView\n',
                            '    initialized={this.initialized}\n',
                            '    itemsSource={this.lazyItems}\n',
                            '    displayMemberPath={\'header\'}\n',
                            '    childItemsPath={\'items\'}\n',
                            '    lazyLoadFunction={this.lazyLoadFunction} />\n'),
                        React.createElement("div", { className: "tab-pane pane-content", id: "llJs" },
                            '   this.lazyItems = [ // start with three lazy-loaded nodes\n',
                            '       {header: \'Lazy Node 1\', items: [] },\n',
                            '       {header: \'Lazy Node 2\', items: [] },\n',
                            '       {header: \'Lazy Node 3\', items: [] }\n',
                            '   ];\n',
                            ' \n',
                            ' initialized(s) {\n',
                            '     this.treeView = s;\n',
                            ' }\n',
                            ' \n',
                            ' constructor(props) {\n',
                            '     super(props);\n',
                            '     this.initialized = this.initialized.bind(this);\n',
                            '     this.lazyLoadFunction = this.lazyLoadFunction.bind(this);\n',
                            ' }\n',
                            ' lazyLoadFunction(node: wjcNav.TreeNode, callback: Function) {\n',
                            '     setTimeout(function () { // simulate http delay\n',
                            '         var result = [ // simulate result\n',
                            '             { header: \'Another lazy node...\', items: [] },\n',
                            '             { header: \'A non-lazy node without children\' },\n',
                            '             {\n',
                            '                 header: \'A non-lazy node with child nodes\', items: [\n',
                            '                     { header: \'hello\' },\n',
                            '                     { header: \'world\' }\n',
                            '                 ]\n',
                            '             }\n',
                            '         ];\n',
                            '         callback(result); // return result to control\n',
                            '     }, 2500); // 2.5sec http delay\n',
                            "}\\n'}"))),
                React.createElement("div", { className: "col-md-7" },
                    React.createElement("h4", null, "Result (live):"),
                    React.createElement(wjNav.TreeView, { initialized: this.initialized, itemsSource: this.lazyItems, displayMemberPath: 'header', childItemsPath: 'items', lazyLoadFunction: this.lazyLoadFunction }))));
    };
    return LazyLoading;
}(React.Component));
exports.LazyLoading = LazyLoading;
//# sourceMappingURL=LazyLoading.js.map