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

Reusable React components for building experiences for Office 365.

import * as tslib_1 from "tslib";
import * as React from 'react';
/* 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 './FocusTrapZone.Box.Example.scss';
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 (ev, isChecked) {
            _this.props.setIsActive(_this.props.name, isChecked);
        };
        return _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, onChange: 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;
    };
    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(DefaultButton, { onClick: this._randomize }, "Randomize")));
    };
    return FocusTrapZoneNestedExample;
}(React.Component));
export default FocusTrapZoneNestedExample;
//# sourceMappingURL=FocusTrapZone.Nested.Example.js.map