office-ui-fabric-react/lib/components/Layer/examples/Layer.Hosted.Example.js

Reusable React components for building experiences for Office 365.

import * as tslib_1 from "tslib";
import * as React from 'react';
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 'office-ui-fabric-react/lib/Styling';
import './Layer.Example.scss';
import * as exampleStylesImport from 'office-ui-fabric-react/lib/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._onChangeCheckbox = function (ev, checked) {
            _this.setState({ showLayer: checked });
        };
        _this._onChangeCheckboxNoId = function (ev, checked) {
            _this.setState({ showLayerNoId: checked });
        };
        _this._onChangeToggle = function (ev, checked) {
            _this.setState({ showHost: checked });
        };
        _this.state = {
            showLayer: false,
            showLayerNoId: false,
            showHost: true
        };
        return _this;
    }
    LayerHostedExample.prototype.render = function () {
        var _a = this.state, showLayer = _a.showLayer, showLayerNoId = _a.showLayerNoId, 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, onChange: 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'), className: 'exampleLayerClassName' }, content)) : (content),
            React.createElement("div", { className: "LayerExample-nonLayered" }, "I am normally below the content."),
            React.createElement("p", null, "If you do not specify a hostId then the hosted layer will default to being fixed to the page by default."),
            React.createElement(Checkbox, { className: exampleStyles.exampleCheckbox, label: "Render the box below in a Layer without specifying a host, fixing it to the top of the page", checked: showLayerNoId, onChange: this._onChangeCheckboxNoId }),
            showLayerNoId ? (React.createElement(Layer, { onLayerDidMount: this._log('didmount'), onLayerWillUnmount: this._log('willunmount') }, content)) : (content)));
    };
    LayerHostedExample.prototype._log = function (text) {
        return function () {
            console.log(text);
        };
    };
    return LayerHostedExample;
}(React.Component));
export { LayerHostedExample };
//# sourceMappingURL=Layer.Hosted.Example.js.map