define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/Button", "office-ui-fabric-react/lib/FocusTrapZone", "office-ui-fabric-react/lib/Toggle", "./FocusTrapZone.Box.Example.scss"], function (require, exports, tslib_1, React, Button_1, FocusTrapZone_1, Toggle_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var FocusTrapComponent = /** @class */ (function (_super) {
        tslib_1.__extends(FocusTrapComponent, _super);
        function FocusTrapComponent() {
            var _this = _super !== null && _super.apply(this, arguments) || this;
            _this._onStringButtonClicked = function () {
                console.log(_this.props.name);
            };
            _this._onFocusTrapZoneToggleChanged = function (isChecked) {
                _this.props.setIsActive(_this.props.name, isChecked);
            };
            return _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;
        };
        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._setIsActive = function (name, isActive) {
                _this.state.stateMap[name] = isActive;
                _this.forceUpdate();
            };
            _this._randomize = function () {
                NAMES.forEach(function (name) {
                    _this.state.stateMap[name] = Math.random() >= 0.5;
                });
                _this.forceUpdate();
            };
            _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")));
        };
        return FocusTrapZoneNestedExample;
    }(React.Component));
    exports.default = FocusTrapZoneNestedExample;
});
//# sourceMappingURL=FocusTrapZone.Nested.Example.js.map