instantjob-recruiter-client
Version:
a set of tools for creating an instantjob recruiter react client
411 lines (340 loc) • 14.9 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _taggedTemplateLiteral2 = require('babel-runtime/helpers/taggedTemplateLiteral');
var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2);
var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
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 _templateObject = (0, _taggedTemplateLiteral3.default)(['\n ', '\n'], ['\n ', '\n']),
_templateObject2 = (0, _taggedTemplateLiteral3.default)(['\n ', '\n font-size: 25px;\n color: white;\n margin-left: 20px;\n'], ['\n ', '\n font-size: 25px;\n color: white;\n margin-left: 20px;\n']);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _styledComponents = require('styled-components');
var _styledComponents2 = _interopRequireDefault(_styledComponents);
var _reactRedux = require('react-redux');
var _reactRouter = require('react-router');
var _md = require('react-icons/lib/md');
var _profile_image = require('components/profile_image');
var _profile_image2 = _interopRequireDefault(_profile_image);
var _instant_job = require('components/instant_job');
var _instant_job2 = _interopRequireDefault(_instant_job);
var _hover = require('components/utils/hover');
var _hover2 = _interopRequireDefault(_hover);
var _viewport_listener = require('components/viewport_listener');
var _viewport_listener2 = _interopRequireDefault(_viewport_listener);
var _chat = require('scenes/chat');
var _chat2 = _interopRequireDefault(_chat);
var _store = require('common/store');
var _store2 = _interopRequireDefault(_store);
var _auto_bind = require('common/auto_bind');
var _auto_bind2 = _interopRequireDefault(_auto_bind);
var _styles = require('common/styles');
var _authentication = require('common/authentication');
var _utilities = require('common/utilities');
var _display = require('actions/display');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var font_title = 20;
var font_text = 12;
var NavbarStatic = function (_Component) {
(0, _inherits3.default)(NavbarStatic, _Component);
function NavbarStatic(props) {
(0, _classCallCheck3.default)(this, NavbarStatic);
var _this = (0, _possibleConstructorReturn3.default)(this, (NavbarStatic.__proto__ || (0, _getPrototypeOf2.default)(NavbarStatic)).call(this, props));
_this.state = {
previously_extended: false
};
(0, _auto_bind2.default)(_this);
return _this;
}
(0, _createClass3.default)(NavbarStatic, [{
key: 'render',
value: function render() {
return _react2.default.createElement(
'div',
{ style: { display: 'flex', flexDirection: 'column' } },
_react2.default.createElement(_viewport_listener2.default, { on_change: function on_change(viewport, scrollbar_size) {
return _store2.default.dispatch((0, _display.store_viewport)(viewport, scrollbar_size));
} }),
_react2.default.createElement(
'div',
{ style: styles.nav_bar },
_react2.default.createElement(
'div',
{ style: { display: 'flex', alignItems: 'center', height: 50 } },
_react2.default.createElement(
'div',
{ style: styles.brand(true) },
_react2.default.createElement(_instant_job2.default, null)
)
),
_react2.default.createElement(CollapsibleLinks, this.props)
),
_react2.default.createElement(
'div',
{ style: { display: 'flex', flexDirection: 'row', alignItems: 'stretch', position: 'absolute', top: 50, right: 0, left: 0, bottom: 0 } },
_react2.default.createElement(
'div',
{ style: { zIndex: 0, overflow: 'auto', backgroundColor: 'white', flexGrow: 10000000, flexShrink: 1, display: 'flex', flexDirection: 'column', alignItems: 'stretch', justifyContent: 'flex-start' } },
this.props.children
),
(0, _utilities.array_contains)(['xs', 'sm'], this.props.viewport) ? null : _react2.default.createElement(_chat2.default, { side_module: true })
)
);
}
}]);
return NavbarStatic;
}(_react.Component);
var CollapsibleLinks = function (_Component2) {
(0, _inherits3.default)(CollapsibleLinks, _Component2);
function CollapsibleLinks() {
(0, _classCallCheck3.default)(this, CollapsibleLinks);
return (0, _possibleConstructorReturn3.default)(this, (CollapsibleLinks.__proto__ || (0, _getPrototypeOf2.default)(CollapsibleLinks)).apply(this, arguments));
}
(0, _createClass3.default)(CollapsibleLinks, [{
key: 'render',
value: function render() {
var _this3 = this;
var tabs = void 0;
switch (this.props.viewport) {
case 'xs':
case 'sm':
tabs = [{ path: "/", icon: _md.MdTrendingUp, label: "Activité", is_active: function is_active(path) {
return path.match(/^\/statistics\/?/) || path == '/';
} }, { path: "/deals", icon: _md.MdFlag, label: "Missions", is_active: function is_active(path) {
return path.match(/^\/deals\/?/);
} }, { path: "/users", icon: _md.MdGroup, label: "Répertoire", is_active: function is_active(path) {
return path.match(/^\/users\/?/);
} }, { path: "/messages", icon: _md.MdComment, label: "Messagerie", is_active: function is_active(path) {
return path.match(/^\/messages\/?/);
} }, { path: "/settings", icon: _md.MdSettings, label: "Paramètres", is_active: function is_active(path) {
return path.match(/^\/settings\/?/);
} }];
return _react2.default.createElement(
_hover2.default,
null,
function (hover) {
return _react2.default.createElement(
'div',
{ style: { display: 'flex', alignItems: 'center' } },
_react2.default.createElement(
'div',
{ style: { right: 0, marginLeft: 'auto', paddingRight: 15, color: (0, _styles.color)('white'), fontSize: 30 } },
_react2.default.createElement(_md.MdMenu, null)
),
hover ? _react2.default.createElement(
'div',
{ style: styles.extended_menu },
_react2.default.createElement(
'div',
{ style: { display: 'flex', flexDirection: 'column' } },
tabs.map(function (tab) {
return _react2.default.createElement(Tab, { key: tab.label, path: tab.path, icon: tab.icon, label: tab.label, active: tab.is_active(_this3.props.location.pathname), extended: true });
}),
_react2.default.createElement(
'div',
{ className: 'link', style: (0, _extends3.default)({}, styles.profile, { paddingTop: 8 }), onClick: function onClick() {
return _reactRouter.browserHistory.push('/settings');
} },
_react2.default.createElement(_profile_image2.default, (0, _extends3.default)({}, _this3.props.profile, { hide_status: true })),
_react2.default.createElement(
'div',
{ style: (0, _extends3.default)({}, styles.profile_infos, { marginLeft: 8 }) },
_react2.default.createElement(
'div',
null,
_this3.props.profile.first_name
),
_react2.default.createElement(
'div',
{ style: { display: 'flex', fontSize: font_text } },
_this3.props.profile.agency.name
)
),
_react2.default.createElement(_md.MdArrowDropDown, { style: (0, _extends3.default)({}, styles.icons, { fontSize: 22, marginLeft: 10 }) })
)
),
_react2.default.createElement('div', { style: { fontSize: 20, color: 'white', right: 20, bottom: 15, position: 'absolute' }, dangerouslySetInnerHTML: { __html: _this3.props.logout_link } })
) : null
);
}
);
case 'md':
case 'lg':
case 'xl':
tabs = [{ path: "/", icon: _md.MdTrendingUp, label: "Activité", is_active: function is_active(path) {
return path.match(/^\/statistics\/?/) || path == '/';
} }, { path: "/deals", icon: _md.MdFlag, label: "Missions", is_active: function is_active(path) {
return path.match(/^\/deals\/?/);
} }, { path: "/users", icon: _md.MdGroup, label: "Répertoire", is_active: function is_active(path) {
return path.match(/^\/users\/?/);
} }, { path: "/settings", icon: _md.MdSettings, label: "Paramètres", is_active: function is_active(path) {
return path.match(/^\/settings\/?/);
} }];
return _react2.default.createElement(
'div',
{ style: { flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'space-between' } },
_react2.default.createElement(
'div',
{ style: styles.tab_list },
tabs.map(function (_ref, index) {
var is_active = _ref.is_active,
tab = (0, _objectWithoutProperties3.default)(_ref, ['is_active']);
return _react2.default.createElement(Tab, (0, _extends3.default)({}, tab, { key: tab.label, index: index, active: is_active(_this3.props.location.pathname) }));
})
),
_react2.default.createElement(
'div',
{ style: styles.profile_container },
_react2.default.createElement(
'div',
{ style: styles.profile },
_react2.default.createElement(_profile_image2.default, (0, _extends3.default)({}, this.props.profile, { large: true, hide_status: true })),
_react2.default.createElement(
'div',
{ style: styles.profile_infos },
_react2.default.createElement(
'div',
null,
this.props.profile.first_name
),
_react2.default.createElement(
'div',
{ style: { display: 'flex', fontSize: font_text } },
this.props.profile.agency.name
)
)
),
_react2.default.createElement(
Logout,
{ onClick: _authentication.action_logout },
_react2.default.createElement(_md.MdPowerSettingsNew, null)
)
)
);
default:
return _react2.default.createElement('div', null);
}
}
}]);
return CollapsibleLinks;
}(_react.Component);
var Tab = function Tab(_ref2) {
var Icon = _ref2.icon,
extended = _ref2.extended,
active = _ref2.active,
index = _ref2.index,
path = _ref2.path,
label = _ref2.label;
var tab_style = extended ? styles.extended_tab(active, index) : styles.tab(active, index);
return _react2.default.createElement(
TabContainer,
{ style: tab_style, onClick: function onClick() {
return _reactRouter.browserHistory.push(path);
} },
_react2.default.createElement(Icon, null),
_react2.default.createElement(
'div',
{ style: { paddingLeft: 10 } },
label
)
);
};
var TabContainer = _styledComponents2.default.div(_templateObject, _styles.link);
var Navbar = (0, _reactRedux.connect)(function (state) {
return {
profile: state.profile,
viewport: state.display.viewport
};
})(NavbarStatic);
var styles = {
nav_bar: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'stretch',
paddingLeft: 8,
backgroundColor: (0, _styles.color)('primary'),
height: 50,
zIndex: 2,
position: 'relative'
},
tab_list: {
display: 'flex',
flexDirection: 'row',
alignItems: 'flex-start'
},
tab: function tab(activated, index) {
return {
display: 'flex',
flexDirection: 'row',
marginLeft: index ? 40 : 20,
fontSize: font_title,
color: activated ? (0, _styles.color)('white') : (0, _styles.color)('black', 'normal', 0.5),
alignItems: 'center'
};
},
extended_tab: function extended_tab(activated, index) {
return (0, _extends3.default)({}, this.tab(activated, index), {
marginLeft: 8,
paddingTop: 8
});
},
extended_menu: {
display: 'flex',
flexDirection: 'row',
alignItems: 'flex-end',
paddingBottom: 15,
position: 'absolute',
left: 0,
top: 50,
right: 0,
flex: 1,
backgroundColor: (0, _styles.color)('primary')
},
brand: function brand(activated) {
return {
display: 'flex',
color: activated ? (0, _styles.color)('white') : (0, _styles.color)('black', 'normal', 0.5),
marginRight: 8,
fontSize: 24
};
},
profile_container: {
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
color: (0, _styles.color)('white'),
marginRight: 15
},
profile: {
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
color: (0, _styles.color)('white')
},
profile_infos: {
display: 'flex',
flexDirection: 'column',
fontSize: font_title,
marginLeft: 20
},
icons: {
fontSize: 30,
marginLeft: 20
}
};
var Logout = _styledComponents2.default.div(_templateObject2, _styles.link);
exports.default = Navbar;