"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 wjMultiRow = require("wijmo/wijmo.react.grid.multirow");
//Application
var DataSvc_1 = require("../services/DataSvc");
var CellFreezing = /** @class */ (function (_super) {
    __extends(CellFreezing, _super);
    function CellFreezing(props) {
        var _this = _super.call(this, props) || this;
        _this.orders = DataSvc_1.DataService.default.orders;
        _this.layoutDefs = DataSvc_1.DataService.default.ldTwoLines;
        _this.multiRow = null;
        _this.state = {
            layoutDefinition: _this.layoutDefs,
            freeStr: 'Freeze'
        };
        _this.initialized = _this.initialized.bind(_this);
        return _this;
    }
    CellFreezing.prototype.initialized = function (s) {
        this.multiRow = s;
    };
    // toggle frozen rows/columns
    CellFreezing.prototype.toggleFreeze = function (rows, cols) {
        var flex = this.multiRow;
        if (flex) {
            flex.frozenColumns = flex.frozenColumns ? 0 : cols;
            flex.frozenRows = flex.frozenRows ? 0 : rows;
        }
        this.setState({
            freeStr: flex.frozenRows == 0 ? 'Freeze' : 'Unfreeze'
        });
    };
    CellFreezing.prototype.render = function () {
        return React.createElement("div", null,
            React.createElement("h2", null, "Cell Freezing"),
            React.createElement("p", null,
                "The ",
                React.createElement("b", null, "MultiRow"),
                " control allows you to freeze rows and columns so they remain in view as the user scrolls the grid. Frozen cells can be edited and selected as regular cells, exactly as in Excel and in the ",
                React.createElement("b", null, "FlexGrid"),
                " control."),
            React.createElement("p", null, "This example allows you to toggle whether the first group of rows and columns should be frozen."),
            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: "#cfJsx", role: "tab", "data-toggle": "tab" }, "JSX")),
                        React.createElement("li", null,
                            React.createElement("a", { href: "#cfJs", role: "tab", "data-toggle": "tab" }, "TS")),
                        React.createElement("li", null,
                            React.createElement("a", { href: "#cfCss", role: "tab", "data-toggle": "tab" }, "CSS"))),
                    React.createElement("div", { className: "tab-content" },
                        React.createElement("div", { className: "tab-pane active pane-content", id: "cfJsx" },
                            '<wjMultiRow.MultiRow\n',
                            '    initialized={this.initialized}\n',
                            '    itemsSource={this.orders}\n',
                            '    layoutDefinition={this.state.layoutDefinition}>\n',
                            '</wjMultiRow.MultiRow>\n',
                            '<button className="btn btn-default"\n',
                            '    onClick={this.toggleFreeze.bind(this, 2, 2)}>\n',
                            '    {this.state.freeStr}\n',
                            '</button>\n'),
                        React.createElement("div", { className: "tab-pane pane-content", id: "cfJs" },
                            'multiRow = null;\n',
                            '\n',
                            'constructor(props) {\n',
                            '    super(props);\n',
                            '    this.state = {\n',
                            '        layoutDefinition: this.layoutDefs,\n',
                            '        freeStr: \'Freeze\'\n',
                            '    }\n',
                            '    this.initialized = this.initialized.bind(this);\n',
                            '}\n',
                            'initialized(s) {\n',
                            '    this.multiRow = s;\n',
                            '}\n',
                            '\n',
                            '// toggle frozen rows/columns\n',
                            'toggleFreeze(rows: number, cols: number) {\n',
                            '    var flex = this.multiRow;\n',
                            '    if (flex) {\n',
                            '        flex.frozenColumns = flex.frozenColumns ? 0 : cols;\n',
                            '        flex.frozenRows = flex.frozenRows ? 0 : rows;\n',
                            '    }\n',
                            '    this.setState({\n',
                            '        freeStr: flex.frozenRows == 0 ? \'Freeze\' : \'Unfreeze\'\n',
                            '    });\n',
                            '}\n'),
                        React.createElement("div", { className: "tab-pane pane-content", id: "cfCss" },
                            '/* custom styling for frozen cells */\n',
                            '.wj-cell.wj-frozen:not(.wj-header):not(.wj-group):not(.wj-state-selected):not(.wj-state-multi-selected) {\n',
                            '   background-color: #f3fbcc;\n',
                            '}\n'))),
                React.createElement("div", { className: "col-md-7" },
                    React.createElement("h4", null, "Result (live):"),
                    React.createElement(wjMultiRow.MultiRow, { initialized: this.initialized, itemsSource: this.orders, layoutDefinition: this.state.layoutDefinition }),
                    React.createElement("button", { className: "btn btn-default", onClick: this.toggleFreeze.bind(this, 2, 2) }, this.state.freeStr))));
    };
    return CellFreezing;
}(React.Component));
exports.CellFreezing = CellFreezing;
//# sourceMappingURL=CellFreezing.js.map