office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
82 lines • 4.28 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
/* tslint:disable:no-unused-variable */
var React = require("react");
/* tslint:enable:no-unused-variable */
/* tslint:disable:no-string-literal */
var Button_1 = require("office-ui-fabric-react/lib/Button");
var FocusTrapZone_1 = require("office-ui-fabric-react/lib/FocusTrapZone");
var Toggle_1 = require("office-ui-fabric-react/lib/Toggle");
var Utilities_1 = require("office-ui-fabric-react/lib/Utilities");
require("./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(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