office-ui-fabric-react/lib-es2015/components/FocusTrapZone/examples/FocusTrapZone.Nested.Example.js

Reusable React components for building experiences for Office 365.

import * as tslib_1 from "tslib";
/* tslint:disable:no-unused-variable */
import * as React from 'react';
/* tslint:enable:no-unused-variable */
/* tslint:disable:no-string-literal */
import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
import { FocusTrapZone } from 'office-ui-fabric-react/lib/FocusTrapZone';
import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
import { autobind } from 'office-ui-fabric-react/lib/Utilities';
import './FocusTrapZone.Box.Example.scss';
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(DefaultButton, { onClick: this._onStringButtonClicked, text: this.props.name }),
            React.createElement(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, { 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([
        autobind
    ], FocusTrapComponent.prototype, "_onStringButtonClicked", null);
    tslib_1.__decorate([
        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(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([
        autobind
    ], FocusTrapZoneNestedExample.prototype, "_setIsActive", null);
    tslib_1.__decorate([
        autobind
    ], FocusTrapZoneNestedExample.prototype, "_randomize", null);
    return FocusTrapZoneNestedExample;
}(React.Component));
export default FocusTrapZoneNestedExample;
//# sourceMappingURL=FocusTrapZone.Nested.Example.js.map