office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
62 lines • 3.76 kB
JavaScript
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 (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(Button_1.DefaultButton, { onClick: this._onStringButtonClicked, text: this.props.name }),
React.createElement(Toggle_1.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_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