define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/Button", "office-ui-fabric-react/lib/FocusTrapZone", "office-ui-fabric-react/lib/Toggle", "office-ui-fabric-react/lib/Utilities", "./FocusTrapZone.Box.Example.scss"], function (require, exports, tslib_1, React, Button_1, FocusTrapZone_1, Toggle_1, Utilities_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var FocusTrapComponent = /** @class */ (function (_super) {
        tslib_1.__extends(FocusTrapComponent, _super);
        function FocusTrapComponent() {
            return _super !== null && _super.apply(this, arguments) || this;
        }
        FocusTrapComponent.prototype.render = function () {
            var contents = (React.createElement("div", { className: 'ms-FocusTrapComponent' },
                React.createElement(Button_1.DefaultButton, { onClick: this._onStringButtonClicked, text: this.props.name }),
                React.createElement(Toggle_1.Toggle, { defaultChecked: this.props.isActive, onChanged: this._onFocusTrapZoneToggleChanged, label: 'Focus Trap Zone', onText: 'On', offText: 'Off' }),
                this.props.children));
            if (this.props.isActive) {
                return (React.createElement(FocusTrapZone_1.FocusTrapZone, { forceFocusInsideTrap: false }, contents));
            }
            return contents;
        };
        FocusTrapComponent.prototype._onStringButtonClicked = function () {
            console.log(this.props.name);
        };
        FocusTrapComponent.prototype._onFocusTrapZoneToggleChanged = function (isChecked) {
            this.props.setIsActive(this.props.name, isChecked);
        };
        tslib_1.__decorate([
            Utilities_1.autobind
        ], FocusTrapComponent.prototype, "_onStringButtonClicked", null);
        tslib_1.__decorate([
            Utilities_1.autobind
        ], FocusTrapComponent.prototype, "_onFocusTrapZoneToggleChanged", null);
        return FocusTrapComponent;
    }(React.Component));
    var NAMES = ['One', 'Two', 'Three', 'Four', 'Five'];
    var FocusTrapZoneNestedExample = /** @class */ (function (_super) {
        tslib_1.__extends(FocusTrapZoneNestedExample, _super);
        function FocusTrapZoneNestedExample(props) {
            var _this = _super.call(this, props) || this;
            _this.state = {
                stateMap: {}
            };
            return _this;
        }
        FocusTrapZoneNestedExample.prototype.render = function () {
            var stateMap = this.state.stateMap;
            return (React.createElement("div", null,
                React.createElement(FocusTrapComponent, { name: 'One', isActive: !!stateMap['One'], setIsActive: this._setIsActive },
                    React.createElement(FocusTrapComponent, { name: 'Two', isActive: !!stateMap['Two'], setIsActive: this._setIsActive },
                        React.createElement(FocusTrapComponent, { name: 'Three', isActive: !!stateMap['Three'], setIsActive: this._setIsActive }),
                        React.createElement(FocusTrapComponent, { name: 'Four', isActive: !!stateMap['Four'], setIsActive: this._setIsActive })),
                    React.createElement(FocusTrapComponent, { name: 'Five', isActive: !!stateMap['Five'], setIsActive: this._setIsActive })),
                React.createElement(Button_1.DefaultButton, { onClick: this._randomize }, "Randomize")));
        };
        FocusTrapZoneNestedExample.prototype._setIsActive = function (name, isActive) {
            this.state.stateMap[name] = isActive;
            this.forceUpdate();
        };
        FocusTrapZoneNestedExample.prototype._randomize = function () {
            var _this = this;
            NAMES.forEach(function (name) {
                _this.state.stateMap[name] = Math.random() >= .5;
            });
            this.forceUpdate();
        };
        tslib_1.__decorate([
            Utilities_1.autobind
        ], FocusTrapZoneNestedExample.prototype, "_setIsActive", null);
        tslib_1.__decorate([
            Utilities_1.autobind
        ], FocusTrapZoneNestedExample.prototype, "_randomize", null);
        return FocusTrapZoneNestedExample;
    }(React.Component));
    exports.default = FocusTrapZoneNestedExample;
});
//# sourceMappingURL=FocusTrapZone.Nested.Example.js.map