import * as tslib_1 from "tslib";
import * as React from 'react';
import { autobind } from 'office-ui-fabric-react/lib/Utilities';
import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
import { Layer, LayerHost } from 'office-ui-fabric-react/lib/Layer';
import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
import { AnimationClassNames } from '../../../Styling';
import './Layer.Example.scss';
import * as exampleStylesImport from '../../../common/_exampleStyles.scss';
var exampleStyles = exampleStylesImport;
var LayerHostedExample = /** @class */ (function (_super) {
    tslib_1.__extends(LayerHostedExample, _super);
    function LayerHostedExample(props) {
        var _this = _super.call(this, props) || this;
        _this.state = {
            showLayer: false,
            showHost: true
        };
        return _this;
    }
    LayerHostedExample.prototype.render = function () {
        var _a = this.state, showLayer = _a.showLayer, showHost = _a.showHost;
        var content = (React.createElement("div", { className: 'LayerExample-content ' + AnimationClassNames.scaleUpIn100 }, "This is example layer content."));
        return (React.createElement("div", null,
            React.createElement(Toggle, { label: 'Show host', checked: showHost, onChanged: this._onChangeToggle }),
            showHost && (React.createElement(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, { className: exampleStyles.exampleCheckbox, label: 'Render the box below in a Layer and target it at hostId=layerhost1', checked: showLayer, onChange: this._onChangeCheckbox }),
            showLayer ? (React.createElement(Layer, { hostId: 'layerhost1', onLayerDidMount: this._log('didmount'), onLayerWillUnmount: this._log('willunmount') }, content)) : content,
            React.createElement("div", { className: 'LayerExample-nonLayered' }, "I am normally below the content.")));
    };
    LayerHostedExample.prototype._log = function (text) {
        return function () {
            console.log(text);
        };
    };
    LayerHostedExample.prototype._onChangeCheckbox = function (ev, checked) {
        this.setState({ showLayer: checked });
    };
    LayerHostedExample.prototype._onChangeToggle = function (checked) {
        this.setState({ showHost: checked });
    };
    tslib_1.__decorate([
        autobind
    ], LayerHostedExample.prototype, "_onChangeCheckbox", null);
    tslib_1.__decorate([
        autobind
    ], LayerHostedExample.prototype, "_onChangeToggle", null);
    return LayerHostedExample;
}(React.Component));
export { LayerHostedExample };
//# sourceMappingURL=Layer.Hosted.Example.js.map