@digifi-los/reactapp
Version:
180 lines (146 loc) • 7.78 kB
JavaScript
'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;