instantjob-recruiter-client
Version:
a set of tools for creating an instantjob recruiter react client
240 lines (189 loc) • 8.56 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _taggedTemplateLiteral2 = require('babel-runtime/helpers/taggedTemplateLiteral');
var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2);
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)(['solid 1px ', ''], ['solid 1px ', '']),
_templateObject2 = (0, _taggedTemplateLiteral3.default)(['\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: stretch;\n'], ['\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: stretch;\n']),
_templateObject3 = (0, _taggedTemplateLiteral3.default)(['\n height: 40px;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n border-bottom: ', ';\n'], ['\n height: 40px;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n border-bottom: ', ';\n']),
_templateObject4 = (0, _taggedTemplateLiteral3.default)(['\n height: ', 'px;\n background-color: ', ';\n border-bottom: ', ';\n border-left: ', ';\n display: flex;\n'], ['\n height: ', 'px;\n background-color: ', ';\n border-bottom: ', ';\n border-left: ', ';\n display: flex;\n']),
_templateObject5 = (0, _taggedTemplateLiteral3.default)(['\n width: ', '%;\n border-right: ', ';\n display: flex;\n flex-direction: column;\n align-items: stretch;\n'], ['\n width: ', '%;\n border-right: ', ';\n display: flex;\n flex-direction: column;\n align-items: stretch;\n']),
_templateObject6 = (0, _taggedTemplateLiteral3.default)(['\n display: flex;\n justify-content: flex-end;\n padding: 2px 4px;\n'], ['\n display: flex;\n justify-content: flex-end;\n padding: 2px 4px;\n']),
_templateObject7 = (0, _taggedTemplateLiteral3.default)(['\n flex: 1;\n display: flex;\n justify-content: center;\n'], ['\n flex: 1;\n display: flex;\n justify-content: center;\n']);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _styledComponents = require('styled-components');
var _styledComponents2 = _interopRequireDefault(_styledComponents);
var _infinite_list = require('components/infinite_list');
var _infinite_list2 = _interopRequireDefault(_infinite_list);
var _auto_bind = require('common/auto_bind');
var _auto_bind2 = _interopRequireDefault(_auto_bind);
var _moment = require('common/moment');
var _moment2 = _interopRequireDefault(_moment);
var _event_system = require('common/event_system');
var _event_system2 = _interopRequireDefault(_event_system);
var _utilities = require('common/utilities');
var _styles = require('common/styles');
var _get_week_periods = require('./get_week_periods');
var _get_week_periods2 = _interopRequireDefault(_get_week_periods);
var _periods = require('./periods');
var _periods2 = _interopRequireDefault(_periods);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function get_periods(periods, index) {
return [];
}
var Month = function (_Component) {
(0, _inherits3.default)(Month, _Component);
function Month(props) {
(0, _classCallCheck3.default)(this, Month);
var _this = (0, _possibleConstructorReturn3.default)(this, (Month.__proto__ || (0, _getPrototypeOf2.default)(Month)).call(this, props));
_this.handle_scroll = (0, _utilities.debounce)(function (scroll_top) {
if (_this.ignore_scroll && (!_this.current_scroll_top || Math.abs(_this.current_scroll_top - scroll_top) > 5)) {
_this.current_scroll_top = scroll_top;
} else {
_this.current_scroll_top = null;
_this.week = (0, _moment2.default)().add(scroll_top / week_height, 'week').endOf('week');
_event_system2.default.post('calendar-week', _this.week);
}
});
(0, _auto_bind2.default)(_this);
return _this;
}
(0, _createClass3.default)(Month, [{
key: 'componentDidMount',
value: function componentDidMount() {
var _this2 = this;
this.stop_retrieving_calendar_week = _event_system2.default.retrieve('calendar-week', function (week) {
if (week !== _this2.week) {
_this2.ignore_scroll = true;
_this2.list.scroll_to_item(_this2.get_index(week));
}
});
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
this.stop_retrieving_calendar_week();
}
}, {
key: 'render_day',
value: function render_day(index) {
return _react2.default.createElement(
WeekDay,
{ key: index },
(0, _utilities.capitalize_first_letter)((0, _moment2.default)().startOf('week').add(index, 'day').format("dddd"))
);
}
}, {
key: 'get_index',
value: function get_index(week) {
return week.diff((0, _moment2.default)().startOf('week'), 'week');
}
}, {
key: 'get_week',
value: function get_week(index) {
return (0, _moment2.default)().startOf('week').add(index, 'weeks');
}
}, {
key: 'render_week',
value: function render_week(index) {
var week = this.get_week(index);
return _react2.default.createElement(
Week,
{ key: index, week: week },
(0, _get_week_periods2.default)(week)(this.props)
);
}
}, {
key: 'render',
value: function render() {
var _this3 = this;
return _react2.default.createElement(
Container,
null,
_react2.default.createElement(
Header,
null,
(0, _utilities.range)(7).map(this.render_day)
),
_react2.default.createElement(
_infinite_list2.default,
{
item_height: week_height,
handle_scroll: this.handle_scroll,
ref: function ref(list) {
return _this3.list = list;
}
},
this.render_week
)
);
}
}]);
return Month;
}(_react.Component);
exports.default = Month;
var Week = function (_Component2) {
(0, _inherits3.default)(Week, _Component2);
function Week(props) {
(0, _classCallCheck3.default)(this, Week);
var _this4 = (0, _possibleConstructorReturn3.default)(this, (Week.__proto__ || (0, _getPrototypeOf2.default)(Week)).call(this, props));
(0, _auto_bind2.default)(_this4);
return _this4;
}
(0, _createClass3.default)(Week, [{
key: 'get_day_date',
value: function get_day_date(index) {
var day = (0, _moment2.default)(this.props.week).add(index, 'day');
if (day.date() == 1) {
return day.format("D MMMM");
} else {
return day.format("D");
}
}
}, {
key: 'render_day',
value: function render_day(periods, index) {
return _react2.default.createElement(
DayContainer,
{ key: index },
_react2.default.createElement(
DayDate,
null,
this.get_day_date(index)
),
_react2.default.createElement(_periods2.default, { periods: periods, ellipsis: 2 })
);
}
}, {
key: 'render',
value: function render() {
var days = this.props.children;
return _react2.default.createElement(
WeekContainer,
null,
days.map(this.render_day)
);
}
}]);
return Week;
}(_react.Component);
var week_height = 120;
var border = (0, _styledComponents.css)(_templateObject, (0, _styles.color)('black', 'pale'));
var Container = _styledComponents2.default.div(_templateObject2);
var Header = _styledComponents2.default.div(_templateObject3, border);
var WeekContainer = _styledComponents2.default.div(_templateObject4, week_height, (0, _styles.color)('black', 'translucent'), border, border);
var DayContainer = _styledComponents2.default.div(_templateObject5, 100 / 7, border);
var DayDate = _styledComponents2.default.div(_templateObject6);
var WeekDay = _styledComponents2.default.div(_templateObject7);