office-ui-fabric-react/lib-amd/demo/components/Header/Header.js

Reusable React components for building experiences for Office 365.

var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
define(["require", "exports", "react", "../../../ContextualMenu", "../../../utilities/rtl", "../../../common/DirectionalHint", "../../../FocusZone", "../../../utilities/decorators/withResponsiveMode", "./Header.scss"], function (require, exports, React, ContextualMenu_1, rtl_1, DirectionalHint_1, FocusZone_1, withResponsiveMode_1) {
    "use strict";
    var Header = (function (_super) {
        __extends(Header, _super);
        function Header(props) {
            var _this = _super.call(this, props) || this;
            _this._onGearClick = _this._onGearClick.bind(_this);
            _this._onDismiss = _this._onDismiss.bind(_this);
            _this._onRTLToggled = _this._onRTLToggled.bind(_this);
            _this._onMenuClick = _this._onMenuClick.bind(_this);
            _this.state = {
                contextMenu: null,
                isRTLEnabled: rtl_1.getRTL()
            };
            return _this;
        }
        Header.prototype.render = function () {
            var _a = this.props, title = _a.title, sideLinks = _a.sideLinks, responsiveMode = _a.responsiveMode;
            var contextMenu = this.state.contextMenu;
            // In medium and below scenarios, hide the side links.
            if (responsiveMode <= withResponsiveMode_1.ResponsiveMode.large) {
                sideLinks = [];
            }
            return (React.createElement("div", null,
                React.createElement("div", { className: 'Header' },
                    (responsiveMode <= withResponsiveMode_1.ResponsiveMode.large) && (React.createElement("button", { className: 'Header-button', onClick: this._onMenuClick },
                        React.createElement("i", { className: 'ms-Icon ms-Icon--GlobalNavButton' }))),
                    React.createElement("div", { className: 'Header-title ms-font-xl ms-fontColor-white' },
                        React.createElement("i", { className: 'ms-Icon ms-Icon--Org' }),
                        title),
                    React.createElement("div", { className: 'Header-buttons' },
                        React.createElement(FocusZone_1.FocusZone, { direction: FocusZone_1.FocusZoneDirection.horizontal }, sideLinks.map(function (link, linkIndex) { return (React.createElement("a", { key: linkIndex, className: 'Header-button ms-fontColor-white', href: link.url }, link.name)); }).concat([
                            React.createElement("button", { key: 'headerButton', className: 'Header-button', onClick: this._onGearClick },
                                React.createElement("i", { className: 'ms-Icon ms-Icon--Settings' }))
                        ])))),
                contextMenu ? (React.createElement(ContextualMenu_1.ContextualMenu, { items: contextMenu.items, isBeakVisible: true, targetElement: contextMenu.target, directionalHint: DirectionalHint_1.DirectionalHint.bottomAutoEdge, gapSpace: 5, onDismiss: this._onDismiss })) : (null)));
        };
        Header.prototype._onMenuClick = function (ev) {
            var _a = this.props, onIsMenuVisibleChanged = _a.onIsMenuVisibleChanged, isMenuVisible = _a.isMenuVisible;
            if (onIsMenuVisibleChanged) {
                onIsMenuVisibleChanged(!isMenuVisible);
            }
        };
        Header.prototype._onGearClick = function (ev) {
            var contextMenu = this.state.contextMenu;
            this.setState({
                contextMenu: contextMenu ? null : {
                    target: ev.currentTarget,
                    items: this._getOptionMenuItems()
                }
            });
        };
        Header.prototype._getOptionMenuItems = function () {
            return [{
                    key: 'isRTL',
                    name: "Render in " + (this.state.isRTLEnabled ? 'LTR' : 'RTL'),
                    icon: 'Settings',
                    onClick: this._onRTLToggled
                }];
        };
        Header.prototype._onRTLToggled = function (ev) {
            var isRTLEnabled = this.state.isRTLEnabled;
            rtl_1.setRTL(!isRTLEnabled);
            this.setState({
                isRTLEnabled: !isRTLEnabled,
                contextMenu: null
            });
        };
        Header.prototype._onDismiss = function () {
            this.setState({
                contextMenu: null
            });
        };
        return Header;
    }(React.Component));
    Header = __decorate([
        withResponsiveMode_1.withResponsiveMode
    ], Header);
    exports.Header = Header;
});

//# sourceMappingURL=Header.js.map