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 __());
    };
})();
// make components available through the "Wj" prefix, so users can write
// "Wj.FlexGrid" instead of "wijmo.react.FlexGrid":
var Wj = wijmo.react;
var App = /** @class */ (function (_super) {
    __extends(App, _super);
    function App(props) {
        var _this = _super.call(this, props) || this;
        _this.state = {
            // report definitions
            reports: new wijmo.collections.CollectionView([
                { name: 'Alphabetical List of Products', component: AlphabeticalListofProducts },
                { name: 'Customer Labels', component: CustomerLabels },
                { name: 'Employees', component: Employees },
                { name: 'Product Catalog', component: ProductCatalog },
                { name: 'Products by Category', component: ProductsbyCategory },
                { name: 'Sales by Category', component: SalesbyCategory },
                { name: 'Sales Chart', component: SalesChart },
                { name: 'Employee Sales by Country', component: EmployeeSalesbyCountry }
            ], {
                currentChanged: function (s, e) {
                    this.setState({
                        currentReport: s.currentItem
                    });
                }.bind(_this)
            }),
            // zoom levels
            zoomLevels: new wijmo.collections.CollectionView([
                { header: '25%', value: 0.25 },
                { header: '50%', value: 0.5 },
                { header: '75%', value: 0.75 },
                { header: '100%', value: 1 },
                { header: '125%', value: 1.25 }
            ], {
                currentChanged: function (s, e) {
                    this.setState({
                        currentZoom: s.currentItem
                    });
                }.bind(_this)
            })
        };
        // select first report
        _this.state.currentReport = _this.state.reports.currentItem;
        // start at 75% zoom level
        _this.state.zoomLevels.moveCurrentToPosition(2);
        _this.state.currentZoom = _this.state.zoomLevels.currentItem;
        return _this;
    }
    // zoom in and out
    App.prototype.zoomIn = function () {
        this.state.zoomLevels.moveCurrentToNext();
    };
    App.prototype.zoomOut = function () {
        this.state.zoomLevels.moveCurrentToPrevious();
    };
    // print the current report
    App.prototype.print = function () {
        // create document
        var doc = new wijmo.PrintDocument({
            title: this.state.reports.currentItem.name
        });
        // add content to it
        var view = document.getElementById('report');
        doc.append(view);
        // and print it
        doc.print();
    };
    App.prototype.render = function () {
        return React.createElement("div", null,
            React.createElement("div", { className: "header" },
                React.createElement("div", { className: "container" },
                    React.createElement("img", { src: "https://grapecitycontentcdn.azureedge.net/gcbrand/samples/wijmo/wijmo-logo.png", alt: "Wijmo 5" }),
                    React.createElement("h1", null, "Simple Reports"),
                    React.createElement("p", null,
                        "Creating simple reports in React is easy with ",
                        React.createElement("b", null, "PrintDocument"),
                        ", ",
                        React.createElement("b", null, "CollectionView"),
                        ", and a few lines of JSX code."))),
            React.createElement("div", { className: "container" },
                React.createElement("p", null, "Select a report to see a quick preview. Click the print button to print, preview, or export to PDF:"),
                React.createElement("div", { className: "shadow" },
                    React.createElement("div", { className: "toolbar" },
                        React.createElement(Wj.ComboBox, { style: { width: '300px' }, displayMemberPath: "name", itemsSource: this.state.reports }),
                        React.createElement("div", { className: "glyphicon glyphicon-minus-sign group-start", title: "Zoom Out", onClick: this.zoomOut.bind(this) }),
                        React.createElement(Wj.ComboBox, { style: "width:150px", itemsSource: this.state.zoomLevels, displayMemberPath: "header" }),
                        React.createElement("div", { className: "glyphicon glyphicon-plus-sign", title: "Zoom In", onClick: this.zoomIn.bind(this) }),
                        React.createElement("div", { className: "glyphicon glyphicon-print group-start", title: "Print", onClick: this.print.bind(this) })),
                    React.createElement("div", { className: "report" },
                        React.createElement("div", { style: { zoom: this.state.currentZoom.value } },
                            React.createElement("div", { id: "report" }, React.createElement(this.state.currentReport.component)))))));
    };
    return App;
}(React.Component));
//# sourceMappingURL=App.js.map