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 __());
    };
})();
var App = /** @class */ (function (_super) {
    __extends(App, _super);
    // initialize model: 
    // declare view and current item, update state when current item changes
    function App(props) {
        var _this = _super.call(this, props) || this;
        _this.addColumn = _this.addColumn.bind(_this);
        _this.removeColumn = _this.removeColumn.bind(_this);
        _this.moveColumn = _this.moveColumn.bind(_this);
        _this.draggedColumn = _this.draggedColumn.bind(_this);
        // expose some data
        var data = _this.getData(10000);
        // build list of columns available
        var item = data[0], fields = new wijmo.collections.ObservableArray();
        for (var key in item) {
            fields.push(key);
        }
        //// build list of columns currently in use (initialize with first three)
        _this.state = {
            data: new wijmo.collections.CollectionView(data),
            columnsAvailable: new wijmo.collections.CollectionView(fields),
            columns: new wijmo.collections.CollectionView()
        };
        return _this;
    }
    App.prototype.componentDidMount = function () {
        for (var i = 0; i < 3; i++) {
            this.state.columnsAvailable.moveCurrentToFirst();
            this.addColumn();
        }
    };
    // move item from columnsAvailable to columns
    App.prototype.addColumn = function () {
        var item = this.state.columnsAvailable.currentItem, index = this.state.columns.currentPosition;
        if (item) {
            this.state.columnsAvailable.remove(item);
            this.state.columns.sourceCollection.splice(Math.max(0, index), 0, item);
            this.state.columns.moveCurrentTo(item);
            this.setState({});
        }
    };
    // move item from columns to columnsAvailable
    App.prototype.removeColumn = function () {
        var item = this.state.columns.currentItem, index = this.state.columnsAvailable.currentPosition;
        if (item) {
            this.state.columns.remove(item);
            this.state.columnsAvailable.sourceCollection.splice(Math.max(0, index), 0, item);
            this.state.columnsAvailable.moveCurrentTo(item);
            this.setState({});
        }
    };
    // move a column within the columns collection
    App.prototype.moveColumn = function (offset) {
        var item = this.state.columns.currentItem;
        if (item) {
            var arr = this.state.columns.sourceCollection, index = arr.indexOf(item), newIndex = index + offset;
            if (index > -1 && newIndex > -1) {
                arr.splice(index, 1);
                arr.splice(newIndex, 0, item);
                this.state.columns.moveCurrentTo(item);
                this.setState({});
            }
        }
    };
    // update columns array if the user moves a column
    App.prototype.draggedColumn = function (s, e) {
        var columns = new wijmo.collections.ObservableArray();
        for (var i = 0; i < s.columns.length; i++) {
            columns.push(s.columns[i].binding);
        }
        this.state.columns.sourceCollection = columns;
    };
    App.prototype.getData = function (count) {
        var data = [], countries = 'US,Germany,UK,Japan,Italy,Greece,Spain,Canada,Australia,China,Austria'.split(','), products = 'Widget,Gadget,Doohickey'.split(','), colors = 'Black,White,Red,Green,Blue'.split(','), dt = new Date();
        for (var i = 0; i < count; i++) {
            data.push({
                id: i,
                date: new Date(dt.getFullYear(), i % 12, 25, i % 24, i % 60, i % 60),
                country: countries[Math.floor(Math.random() * countries.length)],
                product: products[Math.floor(Math.random() * products.length)],
                color: colors[Math.floor(Math.random() * colors.length)],
                amount: Math.random() * 10000 - 5000,
                discount: Math.random() / 4,
                active: i % 4 == 0,
            });
        }
        return data;
    };
    // render the view
    App.prototype.render = function () {
        var _this = this;
        return React.createElement("div", null,
            React.createElement("div", { className: "header" },
                React.createElement("div", { className: "container" },
                    React.createElement("h1", null, "Dynamic Columns"))),
            React.createElement("div", { className: "container" },
                React.createElement("p", null, "This sample shows how you can use React to maintain a dynamic list of FlexGrid columns defined in an array."),
                React.createElement("p", null, "The sample presents a UI used to create and edit a collection of strings. The collection is used in JSX markup to generate the grid columns. The markup is simple:"),
                React.createElement("pre", null, "<Wj.FlexGrid itemsSource={this.state.data}>\n    {this.state.columns.items.map((c) => {\n        return <Wj.FlexGridColumn key={c} binding={c} />\n    }\n    )}\n</Wj.FlexGrid>"),
                React.createElement("p", null, "Notice how the grid columns are automatically updated as you edit the source collection."),
                React.createElement("div", { className: "col-md-6" },
                    React.createElement("h3", null, "Edit the columns here"),
                    React.createElement("div", { className: "row" },
                        React.createElement("div", { className: "col-md-5" },
                            React.createElement(Wj.ListBox, { className: "wide", itemsSource: this.state.columnsAvailable })),
                        React.createElement("div", { className: "col-md-2" },
                            React.createElement("button", { type: "button", className: "btn btn-default btn-lg btn-block", title: "Add Column", onClick: this.addColumn },
                                React.createElement("span", { className: "wj-glyph-right" })),
                            React.createElement("button", { type: "button", className: "btn btn-default btn-lg btn-block", title: "Remove Column", disabled: this.state.columns.currentItem == null, onClick: this.removeColumn },
                                React.createElement("span", { className: "wj-glyph-left" })),
                            React.createElement("button", { type: "button", className: "btn btn-default btn-lg btn-block", title: "Move Column Up", disabled: this.state.columns.currentPosition <= 0, onClick: function () { return _this.moveColumn(-1); } },
                                React.createElement("span", { className: "wj-glyph-up" })),
                            React.createElement("button", { type: "button", className: "btn btn-default btn-lg btn-block", title: "Move Column Down", disabled: this.state.columns.currentPosition >= this.state.columns.itemCount - 1, onClick: function () { return _this.moveColumn(+1); } },
                                React.createElement("span", { className: "wj-glyph-down" }))),
                        React.createElement("div", { className: "col-md-5" },
                            React.createElement(Wj.ListBox, { className: "wide", itemsSource: this.state.columns })))),
                React.createElement("div", { className: "col-md-6" },
                    React.createElement("h3", null, "See the result here"),
                    React.createElement("ul", null, this.state.columns.items.map(function (c) {
                        return React.createElement("li", { key: c }, c);
                    })),
                    React.createElement(Wj.FlexGrid, { className: "wide", itemsSource: this.state.data, allowDragging: wijmo.grid.AllowDragging.Both, initialized: function (s, e) { return _this.grid = s; }, draggedColumn: function (s, e) { return _this.draggedColumn(s, e); } }, this.state.columns.items.map(function (c) {
                        return React.createElement(Wj.FlexGridColumn, { key: c, binding: c });
                    })))));
    };
    return App;
}(React.Component));
//# sourceMappingURL=App.js.map