instantjob-recruiter-client/dist/components/generic_calendar.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 _keys = require('babel-runtime/core-js/object/keys');

var _keys2 = _interopRequireDefault(_keys);

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

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

var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);

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

var _extends6 = _interopRequireDefault(_extends5);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _bind = require('classnames/bind');

var _bind2 = _interopRequireDefault(_bind);

var _infinite_list = require('./infinite_list');

var _infinite_list2 = _interopRequireDefault(_infinite_list);

var _reactDnd = require('react-dnd');

var _reactDndHtml5Backend = require('react-dnd-html5-backend');

var _md = require('react-icons/lib/md');

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

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

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

var _moment2 = _interopRequireDefault(_moment);

var _auto_bind = require('../common/auto_bind');

var _auto_bind2 = _interopRequireDefault(_auto_bind);

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

var _base = require('../selectors/base');

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

var cx = _bind2.default.bind(require('../styles/input_calendar.scss'));

var get_start_end = function get_start_end(start_id, end_id) {
  var start_of_week = (0, _moment2.default)().startOf('week');
  var start = start_id,
      end = end_id;
  if (start > end) {
    start = end;
    end = start_id;
  }
  return {
    start: (0, _moment2.default)(start_of_week).add(start - 1, 'days'),
    end: (0, _moment2.default)(start_of_week).add(end - 1, 'days').endOf('day')
  };
};

var get_events = function get_events(props, state) {
  if (state.is_dragging && props.drag_color) {
    if (state.paint) {
      return (0, _extends6.default)({}, props.events, (0, _defineProperty3.default)({}, props.drag_color, [].concat((0, _toConsumableArray3.default)(props.events[props.drag_color] || []), [(0, _extends6.default)({
        id: 'temp'
      }, get_start_end(state.start, state.end), {
        full_days: true
      })])));
    } else {
      var _extends3;

      var other_events = (0, _extends6.default)({}, props.events);
      if (other_events[props.drag_color]) {
        delete other_events[props.drag_color];
      }
      return (0, _extends6.default)({}, other_events, (_extends3 = {}, (0, _defineProperty3.default)(_extends3, "", [(0, _extends6.default)({
        id: 'temp'
      }, get_start_end(state.start, state.end), {
        full_days: true
      })]), (0, _defineProperty3.default)(_extends3, props.drag_color, props.events[props.drag_color] || []), _extends3));
    }
  } else {
    return props.events;
  }
};
var make_get_week_events = (0, _utilities.make_memoized)(function (week_number) {
  return (0, _base.tolerant_selector)([get_events], function (events) {
    var week = (0, _moment2.default)().startOf('week').add(week_number, 'weeks');
    var hues = (0, _keys2.default)(events);
    return hues.reduce(function (other_events, hue) {
      return (0, _extends6.default)({}, other_events, (0, _defineProperty3.default)({}, hue, events[hue].filter(function (e) {
        return (0, _calendar.event_intersects)(e, (0, _moment2.default)(week).subtract(1, 'day'), 9, 'days');
      })));
    }, {});
  });
});

var make_get_week_days = (0, _utilities.make_memoized)(function (week_number) {
  return (0, _base.tolerant_selector)([make_get_week_events(week_number)], function (events) {
    var week = (0, _moment2.default)().startOf('week').add(week_number, 'weeks');
    var days = (0, _utilities.range)(9).map(function (day) {
      var date = (0, _moment2.default)(week).add(day - 1, 'days');
      var hued_event = (0, _keys2.default)(events).reduce(function (hued_event, hue) {
        if (hued_event) {
          return hued_event;
        } else {
          return events[hue].reduce(function (hued_event, e) {
            if (hued_event) {
              return hued_event;
            } else {
              if ((0, _calendar.event_intersects)(e, date, 1, 'day')) {
                return { event: e, hue: hue };
              } else {
                return null;
              }
            }
          }, null);
        }
      }, null);
      return (0, _extends6.default)({ date: date }, hued_event);
    });
    var days_event_are_continuous = function days_event_are_continuous(i) {
      return days[i].hue == days[i + 1].hue;
    };
    for (var i = 0; i < 7; i++) {
      var category = void 0;
      if (days[i + 1].event) {
        if (days_event_are_continuous(i)) {
          if (days_event_are_continuous(i + 1)) {
            category = "middle";
          } else {
            category = "end";
          }
        } else {
          if (days_event_are_continuous(i + 1)) {
            category = "start";
          } else {
            category = "one";
          }
        }
      } else {
        category = "none";
      }
      days[i + 1].category = category;
    }
    delete days[0];
    delete days[8];

    return days;
  });
});

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

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

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

    (0, _auto_bind2.default)(_this);
    return _this;
  }

  (0, _createClass3.default)(Calendar, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      this.update_month((0, _moment2.default)());
    }
  }, {
    key: 'scroll_to_week',
    value: function scroll_to_week(week) {
      this.weeks.scroll_to_week(week);
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      return _react2.default.createElement(
        'div',
        { className: cx('input-calendar'), style: { display: "flex", flexDirection: 'column', alignItems: 'stretch', flex: 1 } },
        _react2.default.createElement(
          'div',
          { style: { flexShrink: 0, height: 30, display: "flex", flexDirection: "column", justifyContent: 'center', alignItems: "center" } },
          _react2.default.createElement('div', { ref: function ref(month_label) {
              return _this2.month_label = month_label;
            }, style: { textAlign: 'center', color: (0, _constants.color)('primary', 'light'), fontWeight: 900 } })
        ),
        _react2.default.createElement(
          'div',
          { style: { marginLeft: this.props.hide_navigation ? 0 : 50, flexShrink: 0, height: 30, display: "flex", flexDirection: "row", alignItems: "center", justifyContent: "space-around", borderBottomStyle: "solid", borderBottomWidth: 2, borderBottomColor: (0, _constants.color)('primary', 'light') } },
          ["L", "M", "M", "J", "V", "S", "D"].map(function (day, index) {
            return _react2.default.createElement(WeekDay, { day: day, key: index });
          })
        ),
        _react2.default.createElement(
          'div',
          { style: { flex: 1, cursor: this.props.drag_color ? 'ew-resize' : 'initial', display: 'flex', alignItems: 'stretch' } },
          _react2.default.createElement(Weeks, {
            ref: function ref(weeks) {
              return _this2.weeks = weeks;
            },
            update_month: this.update_month,
            events: this.props.events,
            on_click: this.props.on_click,
            drag_color: this.props.drag_color,
            on_drag_and_drop: this.props.on_drag_and_drop,
            on_navigate_to_week: this.props.on_navigate_to_week,
            hide_navigation: this.props.hide_navigation
          })
        )
      );
    }
  }, {
    key: 'update_month',
    value: function update_month(month) {
      $(this.month_label).text((0, _utilities.capitalize_first_letter)(month.isSame((0, _moment2.default)(), 'year') ? month.format("MMMM") : month.format("MMMM YYYY")));
    }
  }]);
  return Calendar;
}(_react.Component);

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

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

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

    _this3.state = {
      is_dragging: false,
      start: 0,
      end: 0,
      paint: true
    };
    (0, _auto_bind2.default)(_this3);
    _this3.current_month = (0, _moment2.default)().startOf('month');
    return _this3;
  }

  (0, _createClass3.default)(Weeks, [{
    key: 'is_week_loaded',
    value: function is_week_loaded(week) {
      return week < this.state.week_count - this.state.week_offset;
    }
  }, {
    key: 'on_week_click',
    value: function on_week_click(date, event) {
      this.props.on_click(date, event);
    }
  }, {
    key: 'drag_start',
    value: function drag_start(day, paint) {
      this.setState({ start: day, end: day, is_dragging: true, paint: paint });
    }
  }, {
    key: 'drag_hover',
    value: function drag_hover(day) {
      this.setState({ end: day });
    }
  }, {
    key: 'drag_end',
    value: function drag_end(day) {
      this.setState({ is_dragging: false });

      var _get_start_end = get_start_end(this.state.start, this.state.end),
          start = _get_start_end.start,
          end = _get_start_end.end;

      this.props.on_drag_and_drop(start, end, this.state.paint);
    }
  }, {
    key: 'scroll_to_week',
    value: function scroll_to_week(week) {
      this.list.scroll_to_item(week);
    }
  }, {
    key: 'handle_scroll',
    value: function handle_scroll(scrollTop) {
      var month = (0, _moment2.default)().startOf('week').add(scrollTop / row_height, 'weeks');
      if (!month.isSame(this.current_month, 'month')) {
        this.current_month = month;
        this.props.update_month(month);
      }
    }
  }, {
    key: 'render_week',
    value: function render_week(index) {
      return _react2.default.createElement(Week, {
        key: index,
        days: make_get_week_days(index)(this.props, this.state),
        on_click: this.on_week_click,
        week: index,
        drag_start: this.drag_start,
        drag_hover: this.drag_hover,
        drag_end: this.drag_end,
        on_navigate_to_week: this.props.on_navigate_to_week,
        hide_navigation: this.props.hide_navigation
      });
    }
  }, {
    key: 'render',
    value: function render() {
      var _this4 = this;

      return _react2.default.createElement(
        _infinite_list2.default,
        {
          item_height: row_height,
          handle_scroll: this.handle_scroll,
          ref: function ref(list) {
            return _this4.list = list;
          }
        },
        this.render_week
      );
    }
  }]);
  return Weeks;
}(_react.Component);

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

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

  (0, _createClass3.default)(WeekDay, [{
    key: 'render',
    value: function render() {
      return _react2.default.createElement(
        'span',
        { style: { color: (0, _constants.color)('primary', 'light'), fontWeight: 900 } },
        this.props.day
      );
    }
  }]);
  return WeekDay;
}(_react.Component);

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

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

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

    (0, _auto_bind2.default)(_this6);
    return _this6;
  }

  (0, _createClass3.default)(Week, [{
    key: 'on_navigate_to_week',
    value: function on_navigate_to_week() {
      this.props.on_navigate_to_week(this.props.week);
    }
  }, {
    key: 'render',
    value: function render() {
      var _this7 = this;

      return _react2.default.createElement(
        'div',
        { className: cx('input-calendar__week'), style: { height: 50, width: this.props.width, display: 'flex', flexDirection: 'row', alignItems: 'stretch', justifyContent: 'space-around' } },
        this.props.hide_navigation ? null : _react2.default.createElement(
          'div',
          { onClick: this.on_navigate_to_week, className: cx('input-calendar__week-link') },
          _react2.default.createElement(_md.MdSubdirectoryArrowRight, null)
        ),
        this.props.days.map(function (day, index) {
          return _react2.default.createElement(DragDropDay, {
            drag_start: _this7.props.drag_start,
            drag_hover: _this7.props.drag_hover,
            drag_end: _this7.props.drag_end,
            day: _this7.props.week * 7 + index,
            event: day.event,
            hue: day.hue,
            category: day.category,
            on_click: _this7.props.on_click,
            date: day.date,
            key: index
          });
        })
      );
    }
  }]);
  return Week;
}(_react.Component);

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

  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: 'shouldComponentUpdate',
    value: function shouldComponentUpdate(props) {
      return props.day !== this.props.day || props.event !== this.props.event || props.hue !== this.props.hue || props.category !== this.props.category || !props.date.isSame(this.props.date);
    }
  }, {
    key: 'componentDidMount',
    value: function componentDidMount() {
      this.props.connectDragPreview((0, _reactDndHtml5Backend.getEmptyImage)(), { captureDraggingState: true });
    }
  }, {
    key: 'render',
    value: function render() {
      var _this9 = this;

      var hue = void 0;
      switch (this.props.category) {
        case "none":
          hue = (0, _constants.color)('primary');
          break;
        default:
          hue = this.props.hue ? 'white' : (0, _constants.color)('primary');
      }
      return this.props.connectDropTarget(this.props.connectDragSource(_react2.default.createElement(
        'div',
        { onClick: function onClick() {
            return _this9.props.on_click(_this9.props.date, _this9.props.event);
          }, style: { flex: 1, position: 'relative', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', backgroundColor: this.props.date.month() % 2 == 0 ? 'white' : (0, _constants.color)('black', 'pale') } },
        _react2.default.createElement(Sticker, { category: this.props.category, hue: this.props.hue }),
        _react2.default.createElement(
          'div',
          { style: { color: hue, zIndex: 1 } },
          this.props.date.format("D")
        ),
        this.props.date.date() == 1 ? _react2.default.createElement(
          'div',
          { style: { color: this.props.hue ? this.props.hue : hue, zIndex: 1, fontSize: 10, position: 'absolute', bottom: 1, left: 0, right: 0, textAlign: 'center' } },
          this.props.date.format("MMM")
        ) : null
      )));
    }
  }]);
  return Day;
}(_react.Component);

var DragDropDay = (0, _reactDnd.DropTarget)("generic-calendar__day", {
  hover: function hover(props, monitor, component) {
    var period = monitor.getItem();
    if (period) {
      if (period.end != props.day) {
        props.drag_hover(props.day);
        period.end = props.day;
      }
    }
  }
}, function (connect, monitor) {
  return {
    connectDropTarget: connect.dropTarget()
  };
})((0, _reactDnd.DragSource)("generic-calendar__day", {
  beginDrag: function beginDrag(props) {
    props.drag_start(props.day, !props.event);
    return { start: props.day, end: props.day };
  },
  endDrag: function endDrag(props) {
    props.drag_end();
  }
}, function (connect, monitor) {
  return {
    connectDragSource: connect.dragSource(),
    connectDragPreview: connect.dragPreview(),
    isDragging: monitor.isDragging()
  };
})(Day));

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

  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, _extends6.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, _extends6.default)({}, styles.middle_sticker, { backgroundColor: this.props.hue }) })
          );
        case 'end':
          return _react2.default.createElement(
            'div',
            { style: styles.sticker_container },
            _react2.default.createElement(
              'div',
              { style: (0, _extends6.default)({}, styles.filler, { justifyContent: 'flex-start' }) },
              _react2.default.createElement('div', { style: (0, _extends6.default)({}, styles.half_sticker, { backgroundColor: this.props.hue }) }),
              _react2.default.createElement('div', { style: styles.half_sticker })
            ),
            _react2.default.createElement('div', { style: (0, _extends6.default)({}, styles.one_sticker, { backgroundColor: this.props.hue }) })
          );
        case 'start':
          return _react2.default.createElement(
            'div',
            { style: styles.sticker_container },
            _react2.default.createElement(
              'div',
              { style: (0, _extends6.default)({}, styles.filler, { justifyContent: 'flex-end' }) },
              _react2.default.createElement('div', { style: styles.half_sticker }),
              _react2.default.createElement('div', { style: (0, _extends6.default)({}, styles.half_sticker, { backgroundColor: this.props.hue }) })
            ),
            _react2.default.createElement('div', { style: (0, _extends6.default)({}, styles.one_sticker, { backgroundColor: this.props.hue }) })
          );
        default:
          return _react2.default.createElement('div', null);
      }
    }
  }]);
  return Sticker;
}(_react.Component);

var row_height = 50;
var diameter = 24;

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

Calendar.defaultProps = {
  events: {},
  on_click: function on_click() {},
  drag_color: '',
  on_drag_and_drop: function on_drag_and_drop(start, end, paint) {},
  hide_navigation: false
};

exports.default = Calendar;