instantjob-recruiter-client/dist/components/generic_week.es6.js

a set of tools for creating an instantjob recruiter react client

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

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 _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _extends3 = require('babel-runtime/helpers/extends');

var _extends4 = _interopRequireDefault(_extends3);

var _keys = require('babel-runtime/core-js/object/keys');

var _keys2 = _interopRequireDefault(_keys);

var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');

var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactList = require('react-list');

var _reactList2 = _interopRequireDefault(_reactList);

var _utilities = require('../common/utilities');

var _constants = require('../common/constants');

var _moment = require('../common/moment');

var _moment2 = _interopRequireDefault(_moment);

var _calendar = require('../common/calendar');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var column_width = 40;
var diameter = 24;
var min_height = diameter * 24;
var number_of_days = 365;

var tolerant_equal = function tolerant_equal(previous, next) {
  if (previous === next) {
    return true;
  } else {
    return false;
  }
};

var props_selector = function props_selector(selectors, builder) {
  var previous_values = selectors.map(function () {
    return null;
  });
  var result = void 0;
  return function (props) {
    var next_values = selectors.map(function (selector) {
      return selector(props);
    });
    if (next_values.reduce(function (unchanged, value, index) {
      return unchanged && tolerant_equal(value, previous_values[index]);
    }, true)) {
      return result;
    } else {
      return builder.apply(undefined, (0, _toConsumableArray3.default)(next_values));
    }
  };
};

var get_all_days_events = function get_all_days_events(props) {
  return props.day_events;
};
var get_all_hours_events = function get_all_hours_events(props) {
  return props.hour_events;
};
var get_day = function get_day(day_number) {
  return (0, _moment2.default)().startOf('day').add(day_number, 'days');
};
var make_get_day_events = function make_get_day_events(day_number) {
  return props_selector([get_all_days_events, get_all_hours_events], function (all_days_events, all_hours_events) {
    var day = get_day(day_number);
    var events = [all_days_events, all_hours_events].map(function (all_events) {
      return (0, _keys2.default)(all_events).reduce(function (events, hue) {
        return (0, _extends4.default)({}, events, (0, _defineProperty3.default)({}, hue, all_events[hue].filter(function (e) {
          return (0, _calendar.event_intersects)(e, day, 1, 'day');
        })));
      }, {});
    });
    return { day_events: events[0], hour_events: events[1] };
  });
};

var make_get_day_hours = function make_get_day_hours(day_number) {
  return props_selector([make_get_day_events(day_number)], function (events) {
    return (0, _utilities.range)(26).map(function (hour_id) {
      var hour = get_day(day_number).add(hour_id - 1, 'hours');
      var find_corresponding_event = function find_corresponding_event(events) {
        return events.reduce(function (corresponding, e) {
          return (0, _calendar.event_intersects)(e, hour, 1, 'hour') ? e : corresponding;
        }, null);
      };
      return (0, _keys2.default)(events.hour_events).reduce(function (result, hue) {
        var event = find_corresponding_event(events.hour_events[hue]);
        if (event) {
          return (0, _extends4.default)({}, result, { event: event, hue: hue });
        } else {
          return result;
        }
      }, { hour: hour });
    }).map(function (_ref, index, hours) {
      var hour = _ref.hour,
          event = _ref.event,
          hue = _ref.hue;

      if (index > 0 && index < 26) {
        if (event) {
          var start = hue == hours[index - 1].hue;
          var end = hue == hours[index + 1].hue;
          var category = void 0;
          if (start) {
            if (end) {
              category = 'middle';
            } else {
              category = 'start';
            }
          } else {
            if (end) {
              category = 'end';
            } else {
              category = 'one';
            }
          }
          return { category: category, hue: hue, event: event, hour: hour };
        } else {
          return { category: 'none', hue: (0, _constants.color)('primary', 'light'), hour: hour };
        }
      } else {
        return null;
      }
    }).slice(1, 25);
  });
};

var make_get_day_event = function make_get_day_event(day_number) {
  return props_selector([make_get_day_events(day_number)], function (events) {
    return (0, _keys2.default)(events.day_events).reduce(function (result, hue) {
      return events.day_events[hue].length > 0 ? { hue: hue, day_event: events.day_events[hue][0] } : result;
    }, (0, _keys2.default)(events.hour_events).reduce(function (result, hue) {
      return events.hour_events[hue].length > 0 ? { hue: hue, day_event: events.hour_events[hue][0] } : result;
    }, { hue: null, day_event: false }));
  });
};

var Week = function (_Component) {
  (0, _inherits3.default)(Week, _Component);

  function Week(props) {
    (0, _classCallCheck3.default)(this, Week);

    var _this = (0, _possibleConstructorReturn3.default)(this, (Week.__proto__ || (0, _getPrototypeOf2.default)(Week)).call(this, props));

    _this.state = {
      width: 100,
      height: min_height
    };
    _this.day_event_getters = (0, _utilities.range)(number_of_days).map(function (day_number) {
      return make_get_day_event(day_number);
    });
    _this.day_hours_getters = (0, _utilities.range)(number_of_days).map(function (day_number) {
      return make_get_day_hours(day_number);
    });
    _this.update_dimensions = _this.update_dimensions.bind(_this);
    _this.render_day_header = _this.render_day_header.bind(_this);
    _this.render_day = _this.render_day.bind(_this);
    _this.on_days_scroll = _this.on_days_scroll.bind(_this);
    _this.scroll_to_day = _this.scroll_to_day.bind(_this);
    return _this;
  }

  (0, _createClass3.default)(Week, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      var _this2 = this;

      this.update_dimensions();
      $(window).resize(this.update_dimensions);
      $(this.days_container).scroll(function () {
        return $(_this2.day_headers_container).scrollLeft($(_this2.days_container).scrollLeft());
      });
      $(this.day_headers_container).scroll(function () {
        return $(_this2.days_container).scrollLeft($(_this2.day_headers_container).scrollLeft());
      });
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      $(window).off("resize", this.update_dimensions);
    }
  }, {
    key: 'scroll_to_day',
    value: function scroll_to_day(day) {
      $(this.days_container).scrollLeft(day.diff(get_day(0), 'days') * column_width);
    }
  }, {
    key: 'render_day_header',
    value: function render_day_header(day_number, key) {
      var _this3 = this;

      var _day_event_getters$da = this.day_event_getters[day_number](this.props),
          hue = _day_event_getters$da.hue,
          day_event = _day_event_getters$da.day_event;

      var day = get_day(day_number);
      return _react2.default.createElement(DayHeader, {
        key: key,
        day: day,
        hue: day_event ? hue : null,
        on_click: function on_click() {
          return _this3.props.on_day_click(day, day_event);
        }
      });
    }
  }, {
    key: 'render_day',
    value: function render_day(day_number, key) {
      var _day_event_getters$da2 = this.day_event_getters[day_number](this.props),
          hue = _day_event_getters$da2.hue,
          day_event = _day_event_getters$da2.day_event;

      return _react2.default.createElement(Day, {
        key: key,
        background_hue: day_event.full_days ? hue : null,
        hours: this.day_hours_getters[day_number](this.props),
        on_click: day_event.full_days ? function () {} : this.props.on_hour_click,
        height: (this.state.height > min_height ? this.state.height : min_height) - 84
      });
    }
  }, {
    key: 'update_dimensions',
    value: function update_dimensions() {
      var width = $(this.container).width();
      var height = $(this.container).height();
      if (width != this.state.width || height != this.state.height) {
        this.setState({ width: width, height: height });
      }
    }
  }, {
    key: 'render',
    value: function render() {
      var _this4 = this;

      var start = (0, _moment2.default)().startOf('day');
      return _react2.default.createElement(
        'div',
        { style: { flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'stretch' }, ref: function ref(container) {
            return _this4.container = container;
          } },
        _react2.default.createElement(
          'div',
          { style: { marginLeft: 40, height: 84 + this.props.scrollbar_size, flexShrink: 0, overflowX: 'scroll', width: this.state.width - 40 }, ref: function ref(day_headers_container) {
              return _this4.day_headers_container = day_headers_container;
            } },
          _react2.default.createElement(_reactList2.default, {
            ref: function ref(day_headers) {
              return _this4.day_headers = day_headers;
            },
            axis: 'x',
            length: number_of_days,
            itemRenderer: function itemRenderer(column, key) {
              return _this4.render_day_header(column, key);
            },
            type: 'uniform'
          })
        ),
        _react2.default.createElement(
          'div',
          { style: { height: this.state.height - 84, display: 'flex', flexDirection: 'row', overflowY: 'auto', width: this.state.width } },
          _react2.default.createElement(
            'div',
            { style: { width: 40, flexShrink: 0, display: 'flex', flexDirection: 'column', alignItems: 'stretch', height: (this.state.height > min_height ? this.state.height : min_height) - 84 } },
            (0, _utilities.range)(13).map(function (hour) {
              return _react2.default.createElement(DisplayedHour, { hour: 2 * hour, key: hour });
            })
          ),
          _react2.default.createElement(
            'div',
            { style: { height: (this.state.height > min_height ? this.state.height : min_height) - 84 + this.props.scrollbar_size, width: this.state.width - 40, overflowX: 'scroll', overflowY: 'hidden' }, ref: function ref(days_container) {
                return _this4.days_container = days_container;
              } },
            _react2.default.createElement(_reactList2.default, {
              axis: 'x',
              length: number_of_days,
              itemRenderer: function itemRenderer(column, key) {
                return _this4.render_day(column, key);
              },
              type: 'uniform'
            })
          )
        )
      );
    }
  }, {
    key: 'on_days_scroll',
    value: function on_days_scroll() {
      this.day_headers.scrollTo($(this.days_container).scrollLeft() / column_width);
    }
  }]);
  return Week;
}(_react.Component);

Week.defaultProps = { on_day_click: function on_day_click() {}, on_hour_click: function on_hour_click() {}, day_events: {}, hour_events: {} };

var DayHeader = function (_Component2) {
  (0, _inherits3.default)(DayHeader, _Component2);

  function DayHeader() {
    (0, _classCallCheck3.default)(this, DayHeader);
    return (0, _possibleConstructorReturn3.default)(this, (DayHeader.__proto__ || (0, _getPrototypeOf2.default)(DayHeader)).apply(this, arguments));
  }

  (0, _createClass3.default)(DayHeader, [{
    key: 'render',
    value: function render() {
      return _react2.default.createElement(
        'div',
        { style: (0, _defineProperty3.default)({ width: column_width, display: 'flex', flexDirection: 'column', flexShrink: 0, alignItems: 'stretch' }, 'display', 'inline-block') },
        _react2.default.createElement(
          'div',
          { style: { height: column_width, flexShrink: 0, display: 'flex', justifyContent: 'center', alignItems: 'center' } },
          _react2.default.createElement(
            'div',
            { onClick: this.props.on_click, style: { width: diameter, height: diameter, borderRadius: diameter / 2, backgroundColor: this.props.hue ? this.props.hue : 'white', color: this.props.hue ? 'white' : (0, _constants.color)('primary'), textAlign: 'center', verticalAlign: 'middle', display: 'flex', justifyContent: 'center', flexDirection: 'column' } },
            _react2.default.createElement(
              'span',
              { style: { fontSize: 12 } },
              this.props.day.date()
            )
          )
        ),
        _react2.default.createElement(
          'div',
          { style: { height: 14, flexShrink: 0, display: 'flex', justifyContent: 'center', alignItems: 'center' } },
          this.props.day.date() == 1 ? _react2.default.createElement(
            'span',
            { style: { color: (0, _constants.color)('primary'), fontSize: 10 } },
            this.props.day.format("MMM")
          ) : null
        ),
        _react2.default.createElement(
          'div',
          { style: { height: 30, flexShrink: 0, display: 'flex', justifyContent: 'center', alignItems: 'center' } },
          _react2.default.createElement(
            'span',
            { style: { color: (0, _constants.color)('primary', 'light'), fontWeight: 900 } },
            this.props.day.format("dd")[0]
          )
        )
      );
    }
  }]);
  return DayHeader;
}(_react.Component);

var Day = function (_Component3) {
  (0, _inherits3.default)(Day, _Component3);

  function Day() {
    (0, _classCallCheck3.default)(this, Day);
    return (0, _possibleConstructorReturn3.default)(this, (Day.__proto__ || (0, _getPrototypeOf2.default)(Day)).apply(this, arguments));
  }

  (0, _createClass3.default)(Day, [{
    key: 'render',
    value: function render() {
      var _this7 = this;

      return _react2.default.createElement(
        'div',
        { style: { width: column_width, display: 'inline-block', height: this.props.height } },
        _react2.default.createElement(
          'div',
          { style: { width: column_width, height: this.props.height, display: 'flex', flexDirection: 'column', alignItems: 'stretch', overflow: 'hidden' } },
          this.props.hours.map(function (_ref3, index) {
            var hour_hue = _ref3.hue,
                category = _ref3.category,
                event = _ref3.event,
                hour = _ref3.hour;
            return _react2.default.createElement(Hour, {
              key: index,
              hue: _this7.props.background_hue ? _this7.props.background_hue : hour_hue,
              category: _this7.props.background_hue ? 'middle' : category,
              on_click: function on_click() {
                return _this7.props.on_click(hour, event);
              }
            });
          })
        )
      );
    }
  }]);
  return Day;
}(_react.Component);

var DisplayedHour = function DisplayedHour(props) {
  switch (props.hour) {
    case 0:
      return _react2.default.createElement('div', { style: { flex: 0.6, display: 'flex', justifyContent: 'center', alignItems: 'center' } });
    case 24:
      return _react2.default.createElement('div', { style: { flex: 0.4, display: 'flex', justifyContent: 'center', alignItems: 'center' } });
    default:
      return _react2.default.createElement(
        'div',
        { style: { flex: 1, display: 'flex', justifyContent: 'center', alignItems: 'center', backgroundColor: props.hour % 2 ? (0, _constants.color)('important') : 'white' } },
        _react2.default.createElement(
          'span',
          { style: { textAlign: 'center' } },
          props.hour,
          'h'
        )
      );
  }
};

var Hour = function (_Component4) {
  (0, _inherits3.default)(Hour, _Component4);

  function Hour() {
    (0, _classCallCheck3.default)(this, Hour);
    return (0, _possibleConstructorReturn3.default)(this, (Hour.__proto__ || (0, _getPrototypeOf2.default)(Hour)).apply(this, arguments));
  }

  (0, _createClass3.default)(Hour, [{
    key: 'render',
    value: function render() {
      return _react2.default.createElement(
        'div',
        { style: { flex: 1, position: 'relative', display: 'flex', justifyContent: 'center', alignItems: 'center' }, onClick: this.props.on_click },
        _react2.default.createElement(Sticker, this.props),
        _react2.default.createElement('div', { style: { backgroundColor: this.props.category == "none" ? (0, _constants.color)('primary', 'light') : 'white', width: 2, height: 2, borderRadius: 1, zIndex: 1 } })
      );
    }
  }]);
  return Hour;
}(_react.Component);

var Sticker = function (_Component5) {
  (0, _inherits3.default)(Sticker, _Component5);

  function Sticker() {
    (0, _classCallCheck3.default)(this, Sticker);
    return (0, _possibleConstructorReturn3.default)(this, (Sticker.__proto__ || (0, _getPrototypeOf2.default)(Sticker)).apply(this, arguments));
  }

  (0, _createClass3.default)(Sticker, [{
    key: 'render',
    value: function render() {
      switch (this.props.category) {
        case 'one':
          return _react2.default.createElement(
            'div',
            { style: styles.sticker_container },
            _react2.default.createElement('div', { style: (0, _extends4.default)({}, styles.one_sticker, { backgroundColor: this.props.hue }) })
          );
        case 'middle':
          return _react2.default.createElement(
            'div',
            { style: styles.sticker_container },
            _react2.default.createElement('div', { style: (0, _extends4.default)({}, styles.middle_sticker, { backgroundColor: this.props.hue }) })
          );
        case 'start':
          return _react2.default.createElement(
            'div',
            { style: styles.sticker_container },
            _react2.default.createElement(
              'div',
              { style: (0, _extends4.default)({}, styles.filler, { justifyContent: 'flex-start' }) },
              _react2.default.createElement('div', { style: (0, _extends4.default)({}, styles.half_sticker, { backgroundColor: this.props.hue }) }),
              _react2.default.createElement('div', { style: styles.half_sticker })
            ),
            _react2.default.createElement('div', { style: (0, _extends4.default)({}, styles.one_sticker, { backgroundColor: this.props.hue }) })
          );
        case 'end':
          return _react2.default.createElement(
            'div',
            { style: styles.sticker_container },
            _react2.default.createElement(
              'div',
              { style: (0, _extends4.default)({}, styles.filler, { justifyContent: 'flex-end' }) },
              _react2.default.createElement('div', { style: styles.half_sticker }),
              _react2.default.createElement('div', { style: (0, _extends4.default)({}, styles.half_sticker, { backgroundColor: this.props.hue }) })
            ),
            _react2.default.createElement('div', { style: (0, _extends4.default)({}, styles.one_sticker, { backgroundColor: this.props.hue }) })
          );
        default:
          return _react2.default.createElement('div', null);
      }
    }
  }]);
  return Sticker;
}(_react.Component);

var styles = {
  sticker_container: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: (column_width - diameter) / 2,
    right: (column_width - diameter) / 2,
    display: 'flex',
    alignItems: 'stretch',
    flexDirection: 'column',
    justifyContent: 'center'
  },
  middle_sticker: {
    flex: 1
  },
  filler: {
    display: 'flex',
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    flexDirection: 'column',
    alignItems: 'stretch'
  },
  half_sticker: {
    flex: 1
  },
  one_sticker: {
    borderRadius: diameter / 2,
    height: diameter,
    width: diameter
  }
};

exports.default = Week;