office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
56 lines • 3.04 kB
JavaScript
define(["require", "exports", "tslib", "react", "@uifabric/utilities", "../../../Panel", "../../../Checkbox", "../LayerHost"], function (require, exports, tslib_1, React, utilities_1, Panel_1, Checkbox_1, LayerHost_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var LayerCustomizedExample = /** @class */ (function (_super) {
tslib_1.__extends(LayerCustomizedExample, _super);
function LayerCustomizedExample(props) {
var _this = _super.call(this, props) || this;
_this._onDismissPanel = function () {
_this.setState({
showPanel: false
});
};
_this._onShowPanelChange = function (event, checked) {
_this.setState({
showPanel: !!checked
});
};
_this._onTrapPanelChange = function (event, checked) {
_this.setState({
trapPanel: !!checked
});
};
_this.state = {
showPanel: true,
trapPanel: true
};
return _this;
}
LayerCustomizedExample.prototype.render = function () {
return (React.createElement("div", null,
React.createElement("p", null,
"A ",
React.createElement("code", null, "Panel"),
" is rendered, trapped in a specified container. Use 'Show panel' to show/hide the panel (or click the X to dismiss it). Use 'Trap panel' to release the panel from its bounds."),
React.createElement(Checkbox_1.Checkbox, { label: 'Show panel', checked: this.state.showPanel, onChange: this._onShowPanelChange }),
React.createElement(Checkbox_1.Checkbox, { label: 'Trap panel', checked: this.state.trapPanel, onChange: this._onTrapPanelChange }),
React.createElement(utilities_1.Customizer, { scopedSettings: this.state.trapPanel ? {
Layer: {
hostId: 'test'
}
} : {} }, this.state.showPanel ?
(React.createElement(Panel_1.Panel, { isOpen: true, hasCloseButton: true, headerText: 'Test', focusTrapZoneProps: {
isClickableOutsideFocusTrap: true,
forceFocusInsideTrap: false
}, onDismissed: this._onDismissPanel })) : (React.createElement("div", null))),
React.createElement(LayerHost_1.LayerHost, { id: 'test', style: {
position: 'relative',
height: '400px',
overflow: 'hidden'
} })));
};
return LayerCustomizedExample;
}(React.Component));
exports.LayerCustomizedExample = LayerCustomizedExample;
});
//# sourceMappingURL=Layer.Customized.Example.js.map