office-ui-fabric-react/lib-es2015/components/Callout/examples/Callout.Basic.Example.js

Reusable React components for building experiences for Office 365.

import * as tslib_1 from "tslib";
import * as React from 'react';
import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
import { Callout } from 'office-ui-fabric-react/lib/Callout';
import { Link } from 'office-ui-fabric-react/lib/Link';
import './CalloutExample.scss';
var CalloutBasicExample = /** @class */ (function (_super) {
    tslib_1.__extends(CalloutBasicExample, _super);
    function CalloutBasicExample(props) {
        var _this = _super.call(this, props) || this;
        _this._onShowMenuClicked = _this._onShowMenuClicked.bind(_this);
        _this._onCalloutDismiss = _this._onCalloutDismiss.bind(_this);
        _this.state = {
            isCalloutVisible: false
        };
        return _this;
    }
    CalloutBasicExample.prototype.render = function () {
        var _this = this;
        var isCalloutVisible = this.state.isCalloutVisible;
        return (React.createElement("div", { className: 'ms-CalloutExample' },
            React.createElement("div", { className: 'ms-CalloutBasicExample-buttonArea', ref: function (menuButton) { return _this._menuButtonElement = menuButton; } },
                React.createElement(DefaultButton, { onClick: this._onShowMenuClicked, text: isCalloutVisible ? 'Hide callout' : 'Show callout' })),
            isCalloutVisible && (React.createElement(Callout, { className: 'ms-CalloutExample-callout', ariaLabelledBy: 'callout-label-1', ariaDescribedBy: 'callout-description-1', role: 'alertdialog', gapSpace: 0, target: this._menuButtonElement, onDismiss: this._onCalloutDismiss, setInitialFocus: true },
                React.createElement("div", { className: 'ms-CalloutExample-header' },
                    React.createElement("p", { className: 'ms-CalloutExample-title', id: 'callout-label-1' }, "All of your favorite people")),
                React.createElement("div", { className: 'ms-CalloutExample-inner' },
                    React.createElement("div", { className: 'ms-CalloutExample-content' },
                        React.createElement("p", { className: 'ms-CalloutExample-subText', id: 'callout-description-1' }, "Message body is optional. If help documentation is available, consider adding a link to learn more at the bottom.")),
                    React.createElement("div", { className: 'ms-CalloutExample-actions' },
                        React.createElement(Link, { className: 'ms-CalloutExample-link', href: 'http://microsoft.com' }, "Go to microsoft")))))));
    };
    CalloutBasicExample.prototype._onShowMenuClicked = function () {
        this.setState({
            isCalloutVisible: !this.state.isCalloutVisible
        });
    };
    CalloutBasicExample.prototype._onCalloutDismiss = function () {
        this.setState({
            isCalloutVisible: false
        });
    };
    return CalloutBasicExample;
}(React.Component));
export { CalloutBasicExample };
//# sourceMappingURL=Callout.Basic.Example.js.map