"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Checkbox_1 = require("office-ui-fabric-react/lib/Checkbox");
var Layer_1 = require("office-ui-fabric-react/lib/Layer");
var Toggle_1 = require("office-ui-fabric-react/lib/Toggle");
require("./Layer.Example.scss");
var styling_1 = require("@uifabric/styling");
var LayerHostedExample = (function (_super) {
    __extends(LayerHostedExample, _super);
    function LayerHostedExample() {
        var _this = _super.call(this) || this;
        _this.state = {
            showLayer: false,
            showHost: true
        };
        return _this;
    }
    LayerHostedExample.prototype.render = function () {
        var _this = this;
        var _a = this.state, showLayer = _a.showLayer, showHost = _a.showHost;
        var content = (React.createElement("div", { className: 'LayerExample-content ' + styling_1.AnimationClassNames.scaleUpIn100 }, "This is example layer content."));
        return (React.createElement("div", null,
            React.createElement(Toggle_1.Toggle, { label: 'Show host', checked: showHost, onChanged: function (checked) { return _this.setState({ showHost: checked }); } }),
            showHost && (React.createElement(Layer_1.LayerHost, { id: 'layerhost1', className: 'LayerExample-customHost' })),
            React.createElement("p", { id: 'foo' }, "In some cases, you may need to contain layered content within an area. Create an instance of a LayerHost along with an id, and provide a hostId on the layer to render it within the specific host. (Note that it's important that you don't include children within the LayerHost. It's meant to contain Layered content only.)"),
            React.createElement(Checkbox_1.Checkbox, { label: 'Render the box below in a Layer and target it at hostId=layerhost1', checked: showLayer, onChange: function (ev, checked) { return _this.setState({ showLayer: checked }); } }),
            showLayer ? (React.createElement(Layer_1.Layer, { hostId: 'layerhost1', onLayerDidMount: function () { return console.log('didmount'); }, onLayerWillUnmount: function () { return console.log('willunmount'); } }, content)) : content,
            React.createElement("div", { className: 'LayerExample-nonLayered' }, "I am normally below the content.")));
    };
    return LayerHostedExample;
}(React.Component));
exports.LayerHostedExample = LayerHostedExample;

//# sourceMappingURL=Layer.Hosted.Example.js.map
