instantjob-recruiter-client
Version:
a set of tools for creating an instantjob recruiter react client
203 lines (164 loc) • 8.7 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _taggedTemplateLiteral2 = require('babel-runtime/helpers/taggedTemplateLiteral');
var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2);
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']),
_templateObject2 = (0, _taggedTemplateLiteral3.default)(['\n margin: 3px;\n ', '\n padding: 0;\n display: flex;\n flex-direction: column;\n align-items: stretch;\n'], ['\n margin: 3px;\n ', '\n padding: 0;\n display: flex;\n flex-direction: column;\n align-items: stretch;\n']),
_templateObject3 = (0, _taggedTemplateLiteral3.default)(['\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n ', '\n color: ', ';\n font-size: 18px;\n'], ['\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n ', '\n color: ', ';\n font-size: 18px;\n']),
_templateObject4 = (0, _taggedTemplateLiteral3.default)(['\n ', '\n height: ', 'px;\n border-bottom: solid 1px ', ';\n display: flex;\n align-items: stretch;\n\n &:last-of-type {\n border-bottom-style: none;\n }\n'], ['\n ', '\n height: ', 'px;\n border-bottom: solid 1px ', ';\n display: flex;\n align-items: stretch;\n\n &:last-of-type {\n border-bottom-style: none;\n }\n']),
_templateObject5 = (0, _taggedTemplateLiteral3.default)(['\n flex-grow: 1;\n flex-shrink: 1;\n display: flex;\n flex-direction: column;\n align-items: stretch;\n justify-content: space-between;\n padding: 5px 0;\n margin-right: 10px;\n position: relative;\n'], ['\n flex-grow: 1;\n flex-shrink: 1;\n display: flex;\n flex-direction: column;\n align-items: stretch;\n justify-content: space-between;\n padding: 5px 0;\n margin-right: 10px;\n position: relative;\n']),
_templateObject6 = (0, _taggedTemplateLiteral3.default)(['\n ', '\n'], ['\n ', '\n']),
_templateObject7 = (0, _taggedTemplateLiteral3.default)(['\n display: flex;\n justify-content: space-between;\n align-items: center;\n'], ['\n display: flex;\n justify-content: space-between;\n align-items: center;\n']),
_templateObject8 = (0, _taggedTemplateLiteral3.default)(['\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: ', 'px;\n'], ['\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: ', 'px;\n']),
_templateObject9 = (0, _taggedTemplateLiteral3.default)(['\n ', '\n background-color: ', ';\n color: white;\n font-size: ', 'px;\n display: flex;\n align-items: center;\n justify-content: center;\n'], ['\n ', '\n background-color: ', ';\n color: white;\n font-size: ', 'px;\n display: flex;\n align-items: center;\n justify-content: center;\n']),
_templateObject10 = (0, _taggedTemplateLiteral3.default)(['\n font-size: 10px;\n color: ', ';\n'], ['\n font-size: 10px;\n color: ', ';\n']);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _styledComponents = require('styled-components');
var _styledComponents2 = _interopRequireDefault(_styledComponents);
var _auto_bind = require('common/auto_bind');
var _auto_bind2 = _interopRequireDefault(_auto_bind);
var _styles = require('common/styles');
var _moment = require('common/moment');
var _moment2 = _interopRequireDefault(_moment);
var _event_system = require('common/event_system');
var _event_system2 = _interopRequireDefault(_event_system);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var Periods = function (_Component) {
(0, _inherits3.default)(Periods, _Component);
function Periods(props) {
(0, _classCallCheck3.default)(this, Periods);
var _this = (0, _possibleConstructorReturn3.default)(this, (Periods.__proto__ || (0, _getPrototypeOf2.default)(Periods)).call(this, props));
(0, _auto_bind2.default)(_this);
return _this;
}
(0, _createClass3.default)(Periods, [{
key: 'render_periods',
value: function render_periods(periods) {
return _react2.default.createElement(
Content,
null,
periods.map(function (period, id) {
return _react2.default.createElement(Period, (0, _extends3.default)({}, period, { key: id }));
})
);
}
}, {
key: 'show_week',
value: function show_week() {
var week = (0, _moment2.default)(this.props.periods[0].start).startOf('week');
_event_system2.default.post('calendar-week', week);
_event_system2.default.trigger('calendar-show-week');
}
}, {
key: 'render',
value: function render() {
var _props = this.props,
ellipsis = _props.ellipsis,
periods = _props.periods;
if (periods.length == 0) {
return null;
} else if (ellipsis && periods.length > ellipsis) {
return _react2.default.createElement(
Container,
null,
this.render_periods(periods.slice(0, ellipsis - 1)),
_react2.default.createElement(
Ellipsis,
{ onClick: this.show_week },
'+ ',
periods.length - ellipsis + 1
)
);
} else {
return this.render_periods(periods);
}
}
}]);
return Periods;
}(_react.Component);
exports.default = Periods;
var Period = function Period(_ref) {
var start = _ref.start,
end = _ref.end,
onClick = _ref.onClick,
color = _ref.color,
icon = _ref.icon,
title = _ref.title,
information = _ref.information;
return _react2.default.createElement(
PeriodContainer,
{ onClick: onClick },
_react2.default.createElement(
Status,
null,
_react2.default.createElement(
Badge,
{ color: color },
icon
)
),
_react2.default.createElement(
Main,
null,
_react2.default.createElement(
Title,
null,
title
),
_react2.default.createElement(
More,
null,
_react2.default.createElement(
Time,
null,
display_period(start, end)
),
information
)
)
);
};
var period_height = 48;
var status_radius = 40;
function display_period(start, end) {
if (end.diff(start, 'hour') == 24) {
return "Toute la journée";
}
end = (0, _moment2.default)(end).add(1, 'second').startOf('minute');
var start_hour = start.hours();
var end_hour = end.hours() + 24 * end.diff((0, _moment2.default)(start).startOf('day'), 'days');
var start_minutes = start.minutes() ? start.format("mm") : "";
var end_minutes = end.minutes() ? end.format("mm") : "";
return start_hour + 'h' + start_minutes + ' - ' + end_hour + 'h' + end_minutes;
}
var Container = _styledComponents2.default.div(_templateObject);
var Content = _styledComponents2.default.div(_templateObject2, _styles.card);
var Ellipsis = _styledComponents2.default.div(_templateObject3, _styles.link, (0, _styles.color)('action'));
var PeriodContainer = _styledComponents2.default.div(_templateObject4, function (_ref2) {
var onClick = _ref2.onClick;
return onClick ? _styles.link : '';
}, period_height, (0, _styles.color)('black', 'translucent'));
var Main = _styledComponents2.default.div(_templateObject5);
var Title = _styledComponents2.default.div(_templateObject6, (0, _styles.ellipsis)('100%'));
var More = _styledComponents2.default.div(_templateObject7);
var Status = _styledComponents2.default.div(_templateObject8, period_height);
var Badge = _styledComponents2.default.div(_templateObject9, (0, _styles.circle)(status_radius), function (_ref3) {
var color = _ref3.color;
return color;
}, status_radius * 0.6);
var Time = _styledComponents2.default.div(_templateObject10, (0, _styles.color)('black', 'light'));