UNPKG

@digifi-los/reactapp

Version:
180 lines (146 loc) 7.78 kB
'use strict'; Object.defineProperty(exports, "__esModule", { value: true }); var _typeof2 = require('babel-runtime/helpers/typeof'); var _typeof3 = _interopRequireDefault(_typeof2); var _assign = require('babel-runtime/core-js/object/assign'); var _assign2 = _interopRequireDefault(_assign); var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); var _createClass2 = require('babel-runtime/helpers/createClass'); var _createClass3 = _interopRequireDefault(_createClass2); var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); var _inherits2 = require('babel-runtime/helpers/inherits'); var _inherits3 = _interopRequireDefault(_inherits2); var _react = require('react'); var _react2 = _interopRequireDefault(_react); var _reBulma = require('re-bulma'); var _reactRouter = require('react-router'); require('font-awesome/css/font-awesome.css'); var _styles = require('../../styles'); var _styles2 = _interopRequireDefault(_styles); var _route_prefixes = require('../../../../utilities/route_prefixes'); var _capitalize = require('capitalize'); var _capitalize2 = _interopRequireDefault(_capitalize); var _AppLayoutMap = require('../AppLayoutMap'); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } // FormHorizontal, NavToggle, ControlLabel, Group, var AppHeader = function(_Component) { (0, _inherits3.default)(AppHeader, _Component); function AppHeader(props /*, context*/ ) { (0, _classCallCheck3.default)(this, AppHeader); var _this = (0, _possibleConstructorReturn3.default)(this, (AppHeader.__proto__ || (0, _getPrototypeOf2.default)(AppHeader)).call(this, props)); _this.state = { ui: props.ui, user: props.user }; _this.all_prefixes = (0, _route_prefixes.all_prefixes)(props.settings.adminPath); _this.getRenderedComponent = _AppLayoutMap.getRenderedComponent.bind(_this); return _this; } (0, _createClass3.default)(AppHeader, [{ key: 'componentWillReceiveProps', value: function componentWillReceiveProps(nextProps) { this.setState({ ui: nextProps.ui, user: nextProps.user }); } }, { key: 'render', value: function render() { // console.debug('this.all_prefixes.manifest_prefix', this.all_prefixes.manifest_prefix); var buttonColor = this.props.settings.ui.header.buttonColor; var globalSearch = this.props.settings.ui.header.useGlobalSearch ? _react2.default.createElement( _reBulma.NavGroup, { align: 'center', style: { flex: 3 } }, _react2.default.createElement( _reBulma.NavItem, { style: _styles2.default.fullWidth }, _react2.default.createElement(_reBulma.Input, { type: 'text', placeholder: 'Search', isExpanded: true, style: _styles2.default.fullWidth }) ) ) : null; var navLabelTitle = !this.props.settings.ui.header.useGlobalSearch && this.props.ui.nav_label ? _react2.default.createElement( _reBulma.NavItem, { style: (0, _assign2.default)({ justifyContent: 'flex-start' }, _styles2.default.fullWidth) }, _react2.default.createElement( 'span', { style: (0, _assign2.default)({ fontSize: '20px' }, this.props.settings.ui.header.navLabelStyle) }, this.props.ui.nav_label ) ) : null; return _react2.default.createElement( _reBulma.Hero, { color: this.props.settings.ui.header.color, isBold: this.props.settings.ui.header.isBold, style: (0, _assign2.default)(_styles2.default.fixedTop, _styles2.default.navContainer, this.props.settings.ui.header.containerStyle), className: this.props.settings.ui.initialization.show_header || this.props.user.isLoggedIn ? 'animated fadeInDown Header-Speed' : 'animated slideOutDown Header-Speed' }, this.props.ui && this.props.ui.components && this.props.ui.components.header && (0, _typeof3.default)(this.props.ui.components.header) === 'object' && this.props.ui.components.header.layout ? this.getRenderedComponent(this.props.ui.components.header.layout) : _react2.default.createElement( _reBulma.HeroHead, null, _react2.default.createElement( _reBulma.Container, null, _react2.default.createElement( _reBulma.Nav, { style: { boxShadow: 'none' } }, _react2.default.createElement( _reBulma.NavGroup, { align: 'left' }, _react2.default.createElement( _reBulma.NavItem, null, this.props.settings.ui.header.customButton && (0, _typeof3.default)(this.props.settings.ui.header.customButton) === 'object' && this.props.settings.ui.header.customButton.layout ? this.getRenderedComponent(this.props.settings.ui.header.customButton) : _react2.default.createElement(_reBulma.Button, { onClick: this.props.toggleUISidebar, buttonStyle: 'isOutlined', color: buttonColor, icon: 'fa fa-bars', style: _styles2.default.iconButton }) ), navLabelTitle ), globalSearch, _react2.default.createElement( _reBulma.NavGroup, { align: 'right', isMenu: true }, _react2.default.createElement( _reBulma.NavItem, null, _react2.default.createElement( _reactRouter.Link, { to: this.all_prefixes.manifest_prefix + 'account/profile', style: (0, _assign2.default)({ fontSize: '20px' }, _styles2.default.noUnderline, this.props.settings.ui.header.userNameStyle) }, (0, _capitalize2.default)(this.state.user.firstname || '') + ' ' + (0, _capitalize2.default)(this.state.user.lastname || '') ) ), _react2.default.createElement( _reBulma.NavItem, null, this.getRenderedComponent({ component: 'ResponsiveLink', props: { location: this.all_prefixes.manifest_prefix + 'account/profile', style: { width: '48px', height: '48px', display: 'block', backgroundColor: 'white', borderRadius: '24px', backgroundSize: 'cover', backgroundRepeat: 'no-repeat', backgroundImage: 'url(' + (this.props.user.profile_image_preview || '/favicon.png') + ')' } } }) ), this.state.user.isLoggedIn && this.props.settings.ui && this.props.settings.ui.header && this.props.settings.ui.header.useHeaderLogout ? _react2.default.createElement( _reBulma.NavItem, null, _react2.default.createElement(_reBulma.Button, { buttonStyle: 'isOutlined', onClick: this.props.logoutUser, color: buttonColor, icon: 'fa fa-sign-out', style: (0, _assign2.default)({ paddingRight: 0 }, _styles2.default.noMarginLeftRight) }) ) : null ) ) ) ) ); } }]); return AppHeader; }(_react.Component); // import ResponsiveLink from '../ResponsiveLink';;; exports.default = AppHeader;