instantjob-recruiter-client/dist/components/input_calendar/time_pickers.es6.js

a set of tools for creating an instantjob recruiter react client

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.get_days_chunks = exports.get_start_end = exports.get_periods = exports.chunks_count_in_day = exports.chunk_length_in_minutes = exports.chunks_count_in_hour = exports.day_id = undefined;

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 _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _bind2 = _interopRequireDefault(_bind);

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

var _hover = require('components/utils/hover');

var _hover2 = _interopRequireDefault(_hover);

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

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

var _auto_bind2 = _interopRequireDefault(_auto_bind);

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

var _moment2 = _interopRequireDefault(_moment);

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

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/time_pickers.scss'));

var is_between = function is_between(a, b, c) {
  return a >= b && a < c || a >= c && a < b;
};
var day_id = exports.day_id = function day_id(day) {
  return day.format("YYYY-MM-DD");
};
var get_events_periods = function get_events_periods(events) {
  return (0, _calendar.make_periods)(events);
};
var get_day_periods = (0, _utilities.make_memoized)(function (day) {
  return (0, _base.tolerant_selector)([get_events_periods], function (periods) {
    var _intersecting_periods = (0, _calendar.intersecting_periods_interval)(periods, (0, _moment2.default)(day), (0, _moment2.default)(day).endOf('day')),
        lower = _intersecting_periods.lower,
        upper = _intersecting_periods.upper;

    return periods.slice(lower, upper);
  });
});
var get_event_hours = (0, _utilities.make_memoized)(function (day) {
  return (0, _base.tolerant_selector)([get_day_periods(day)], function (periods) {
    return (0, _utilities.set_from_array)((0, _utilities.range)(24).filter(function (hour) {
      var start = (0, _moment2.default)(day).add(hour, 'hours');
      var end = (0, _moment2.default)(start).endOf('hour');

      var _intersecting_periods2 = (0, _calendar.intersecting_periods_interval)(periods, start, end),
          lower = _intersecting_periods2.lower,
          upper = _intersecting_periods2.upper;

      return lower != upper;
    }));
  });
});

var chunks_count_in_hour = exports.chunks_count_in_hour = 4;
var chunk_length_in_minutes = exports.chunk_length_in_minutes = 60 / chunks_count_in_hour;
var chunks_count_in_day = exports.chunks_count_in_day = 24 * chunks_count_in_hour;

var get_periods = exports.get_periods = function get_periods(chunk_set) {
  var periods = [],
      period_started = void 0,
      start = null;
  var add_period = function add_period(end) {
    return periods.push({ start: start, end: end });
  };
  (0, _utilities.range)(chunks_count_in_day).forEach(function (chunk) {
    if (chunk_set[chunk]) {
      if (!period_started) {
        start = chunk;
        period_started = true;
      }
    } else {
      if (period_started) {
        add_period(chunk - 1);
        period_started = false;
      }
    }
  });
  if (period_started) {
    add_period(chunks_count_in_day - 1);
  }
  return periods;
};

var get_start_end = exports.get_start_end = function get_start_end(day, start_id, end_id) {
  var start_of_day = (0, _moment2.default)(day);
  var start = start_id,
      end = end_id;
  if (start > end) {
    start = end;
    end = start_id;
  }
  return {
    start: (0, _moment2.default)(start_of_day).add(start * chunk_length_in_minutes, 'minutes'),
    end: (0, _moment2.default)(start_of_day).add((end + 1) * chunk_length_in_minutes, 'minutes')
  };
};

var get_days_chunks = exports.get_days_chunks = function get_days_chunks(events) {
  var days = {};
  events.forEach(function (event) {
    var current = (0, _moment2.default)(event.start);
    while (current.isBefore(event.end)) {
      var id = day_id(current);
      if (!days[id]) {
        days[id] = {};
      }
      if (!event.full_days) {
        days[id][(60 * current.hour() + current.minutes()) / chunk_length_in_minutes] = true;
      }
      current.add(chunk_length_in_minutes, 'minutes');
    }
  });
  return days;
};

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

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

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

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

  (0, _createClass3.default)(TimePickers, [{
    key: 'render_displayed_hour',
    value: function render_displayed_hour(hour) {
      return _react2.default.createElement(
        'div',
        { key: hour, className: cx('time-pickers__header-hour') },
        hour % 2 == 0 ? hour + 'h' : null
      );
    }
  }, {
    key: 'render_day',
    value: function render_day(_ref) {
      var date = _ref.date,
          chunks = _ref.chunks;

      return _react2.default.createElement(
        'div',
        { key: date.format(), className: cx('time-pickers__day') },
        _react2.default.createElement(
          'div',
          { className: cx('time-pickers__day-label') },
          this.props.day_label ? date.format('D MMMM' + ((0, _moment2.default)().isSame(date, 'year') ? '' : ' YYYY')) : ""
        ),
        _react2.default.createElement(TimePicker, {
          color: this.props.full_day_color && (0, _utilities.for_all)((0, _utilities.range)(chunks_count_in_day), function (chunk) {
            return chunks[chunk];
          }) ? this.props.full_day_color : this.props.drag_color,
          on_drag_and_drop: this.props.on_drag_and_drop,
          chunks: chunks,
          date: date,
          events: this.props.events,
          flip: this.props.flip
        })
      );
    }
  }, {
    key: 'render',
    value: function render() {
      return _react2.default.createElement(
        'div',
        { className: cx('time-pickers') },
        _react2.default.createElement(
          'div',
          { className: cx('time-pickers__header') },
          (0, _utilities.range)(25).map(this.render_displayed_hour)
        ),
        _react2.default.createElement(
          'div',
          { className: cx('time-pickers__days') },
          this.props.days.map(this.render_day),
          _react2.default.createElement('div', { key: 'bottom-filler', className: cx('time-pickers__days-bottom-filler') })
        )
      );
    }
  }]);
  return TimePickers;
}(_react.Component);

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

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

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

    _this2.state = {
      is_dragging: false,
      start: 0,
      end: 0
    };
    (0, _auto_bind2.default)(_this2);
    return _this2;
  }

  (0, _createClass3.default)(TimePicker, [{
    key: 'shouldComponentUpdate',
    value: function shouldComponentUpdate(props, state) {
      var _this3 = this;

      return !props.date.isSame(this.props.date) || props.color !== this.props.color || (0, _utilities.exist)((0, _utilities.range)(chunks_count_in_day), function (chunk) {
        return props.chunks[chunk] !== _this3.props.chunks[chunk];
      }) || state !== this.state;
    }
  }, {
    key: 'dragging_paint',
    value: function dragging_paint(_ref2) {
      var start = _ref2.start,
          end = _ref2.end;

      if (start < end) {
        return !this.count(start + 1);
      } else if (start > end) {
        return !this.count(start - 1);
      } else {
        return this.count(start + 1) == this.count(start - 1) ? this.count(start) == 0 : this.count(start) > 0;
      }
    }
  }, {
    key: 'offset',
    value: function offset(_ref3) {
      var start = _ref3.start,
          end = _ref3.end;

      var offset = 0;
      if (start <= end) {
        offset = chunks_count_in_hour - 1;
      }
      var count = this.count(start);
      if (!this.props.chunks[start * chunks_count_in_hour]) {
        count = chunks_count_in_hour - count;
      }
      return (count + offset) % chunks_count_in_hour - offset;
    }
  }, {
    key: 'count',
    value: function count(hour) {
      var _this4 = this;

      return (0, _utilities.range)(hour * chunks_count_in_hour, (hour + 1) * chunks_count_in_hour).filter(function (chunk) {
        return _this4.props.chunks[chunk];
      }).length;
    }
  }, {
    key: 'paint',
    value: function paint(hour) {
      return (0, _utilities.for_all)(this.get_chunks(hour), (0, _utilities.property_getter)('active'));
    }
  }, {
    key: 'get_chunks',
    value: function get_chunks(hour) {
      return this.get_active_chunks().slice(hour * chunks_count_in_hour, (hour + 1) * chunks_count_in_hour);
    }
  }, {
    key: 'drag_start',
    value: function drag_start(hour) {
      this.setState({ start: hour, end: hour, is_dragging: true });
    }
  }, {
    key: 'drag_hover',
    value: function drag_hover(hour) {
      this.setState({ end: hour });
    }
  }, {
    key: 'drag_end',
    value: function drag_end() {
      this.setState({ is_dragging: false });
      this.props.flip(this.props.date, this.get_dragging_chunks(), this.dragging_paint(this.state));
    }
  }, {
    key: 'get_dragging_chunks',
    value: function get_dragging_chunks() {
      var _state = this.state,
          start = _state.start,
          end = _state.end;

      var offset = this.offset(this.state);
      if (start > end) {
        start = this.state.end;
        end = this.state.start;
      }
      return (0, _utilities.range)(start * chunks_count_in_hour + offset, (end + 1) * chunks_count_in_hour + offset);
    }
  }, {
    key: 'get_active_chunks',
    value: function get_active_chunks() {
      var _this5 = this;

      var active_chunks = (0, _utilities.range)(chunks_count_in_day).map(function (chunk) {
        return _this5.props.chunks[chunk];
      });
      var paint = this.dragging_paint(this.state);
      if (this.state.is_dragging) {
        this.get_dragging_chunks().forEach(function (chunk) {
          return active_chunks[chunk] = paint;
        });
      }
      return active_chunks.map(function (active, index) {
        return {
          active: active,
          start: active && (index == 0 || !active_chunks[index - 1]),
          end: active && (index + 1 == chunks_count_in_day || !active_chunks[index + 1])
        };
      });
    }
  }, {
    key: 'on_hour_click',
    value: function on_hour_click(hour) {
      this.props.flip(this.props.date, (0, _utilities.range)(hour * chunks_count_in_hour, (hour + 1) * chunks_count_in_hour), !this.paint(hour));
    }
  }, {
    key: 'get_selectors',
    value: function get_selectors() {
      var _this6 = this;

      return this.get_active_chunks().map(function (_ref4, chunk) {
        var start = _ref4.start,
            end = _ref4.end;

        var select = void 0,
            offset = void 0;
        if (start) {
          var chunk_base = chunks_count_in_hour * Math.floor(chunk / chunks_count_in_hour);
          select = function select(index) {
            _this6.props.flip(_this6.props.date, (0, _utilities.range)(chunk_base + index, chunk_base + chunks_count_in_hour), true);
            _this6.props.flip(_this6.props.date, (0, _utilities.range)(chunk_base, chunk_base + index), false);
          };
          offset = -10;
        } else if (end) {
          chunk = chunk + 1;
          var _chunk_base = chunks_count_in_hour * Math.floor(chunk / chunks_count_in_hour);
          select = function select(index) {
            _this6.props.flip(_this6.props.date, (0, _utilities.range)(_chunk_base + index, _chunk_base + chunks_count_in_hour), false);
            _this6.props.flip(_this6.props.date, (0, _utilities.range)(_chunk_base, _chunk_base + index), true);
          };
          offset = +10;
        }
        if (select) {
          return { position: chunk * 20 / chunks_count_in_hour + offset, chunk: chunk, select: select };
        }
      }).filter(Boolean);
    }
  }, {
    key: 'render_selector',
    value: function render_selector(selector, index) {
      return _react2.default.createElement(Selector, (0, _extends3.default)({ key: index }, selector));
    }
  }, {
    key: 'render_hour',
    value: function render_hour(hour) {
      var events_colors = (0, _utilities.array_from_set)((0, _utilities.filter_hash)((0, _utilities.map_hash)(this.props.events, get_event_hours(day_id(this.props.date))), function (active_hours) {
        return active_hours[hour];
      }));
      return _react2.default.createElement(DragDropHour, {
        key: hour,
        hour: hour,
        drag_start: this.drag_start,
        drag_hover: this.drag_hover,
        drag_end: this.drag_end,
        onClick: this.on_hour_click,
        chunks: this.get_chunks(hour),
        event_color: events_colors[0],
        active_color: this.props.color
      });
    }
  }, {
    key: 'render',
    value: function render() {
      return _react2.default.createElement(
        'div',
        { className: cx('time-pickers__day-hours') },
        _react2.default.createElement(
          'div',
          { className: cx('time-pickers__day-hours-slider') },
          (0, _utilities.range)(24).map(this.render_hour)
        ),
        _react2.default.createElement(
          'div',
          { className: cx('time-pickers__day-hours-selectors') },
          this.get_selectors().map(this.render_selector)
        )
      );
    }
  }]);
  return TimePicker;
}(_react.Component);

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

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

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

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

  (0, _createClass3.default)(Hour, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      this.props.connectDragPreview((0, _reactDndHtml5Backend.getEmptyImage)(), { captureDraggingState: true });
    }
  }, {
    key: 'onClick',
    value: function onClick() {
      this.props.onClick(this.props.hour);
    }
  }, {
    key: 'render_chunk',
    value: function render_chunk(_ref5, index) {
      var active = _ref5.active,
          start = _ref5.start,
          end = _ref5.end;
      var active_color = this.props.active_color;

      return _react2.default.createElement(
        'div',
        { key: index, style: { backgroundColor: active ? active_color : null }, className: cx('time-pickers__hour-box-chunk') },
        start ? _react2.default.createElement(
          'div',
          { style: { backgroundColor: active_color }, className: cx('time-pickers__hour-box-chunk-start') },
          _react2.default.createElement('div', { className: cx('time-pickers__hour-box-chunk-handle') })
        ) : null,
        end ? _react2.default.createElement(
          'div',
          { style: { backgroundColor: active_color }, className: cx('time-pickers__hour-box-chunk-end') },
          _react2.default.createElement('div', { className: cx('time-pickers__hour-box-chunk-handle') })
        ) : null
      );
    }
  }, {
    key: 'render',
    value: function render() {
      var _props = this.props,
          chunks = _props.chunks,
          connectDropTarget = _props.connectDropTarget,
          connectDragSource = _props.connectDragSource,
          event_color = _props.event_color;

      return connectDropTarget(connectDragSource(_react2.default.createElement(
        'div',
        { className: cx('time-pickers__hour') },
        _react2.default.createElement(
          'div',
          {
            style: { backgroundColor: event_color },
            onClick: this.onClick,
            className: cx('time-pickers__hour-box')
          },
          chunks.map(this.render_chunk)
        )
      )));
    }
  }]);
  return Hour;
}(_react.Component);

var DragDropHour = (0, _reactDnd.DropTarget)("time-pickers__hour", {
  hover: function hover(props, monitor, component) {
    var period = monitor.getItem();
    if (period) {
      if (period.end != props.hour) {
        props.drag_hover(props.hour);
        period.end = props.hour;
      }
    }
  }
}, function (connect, monitor) {
  return {
    connectDropTarget: connect.dropTarget()
  };
})((0, _reactDnd.DragSource)("time-pickers__hour", {
  beginDrag: function beginDrag(props) {
    props.drag_start(props.hour);
    return { start: props.hour, end: props.hour };
  },
  endDrag: function endDrag(props) {
    props.drag_end();
  }
}, function (connect, monitor) {
  return {
    connectDragSource: connect.dragSource(),
    connectDragPreview: connect.dragPreview(),
    isDragging: monitor.isDragging()
  };
})(Hour));

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

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

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

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

  (0, _createClass3.default)(Selector, [{
    key: 'render_chunk',
    value: function render_chunk(index) {
      var _props2 = this.props,
          chunk = _props2.chunk,
          select = _props2.select;

      return _react2.default.createElement(
        'div',
        {
          key: index,
          className: cx('time-pickers__selector-chunks-chunk', { 'time-pickers__selector-chunks-chunk_selected': index == chunk % chunks_count_in_hour }),
          onClick: function onClick() {
            return select(index);
          }
        },
        this.get_chunk(chunks_count_in_hour * Math.floor(chunk / chunks_count_in_hour) + index)
      );
    }
  }, {
    key: 'get_chunk',
    value: function get_chunk(chunk) {
      var minutes = chunk_length_in_minutes * (chunk % chunks_count_in_hour);
      return Math.floor(chunk / chunks_count_in_hour) + 'h' + (minutes < 10 ? 0 : "") + minutes;
    }
  }, {
    key: 'render',
    value: function render() {
      var _this9 = this;

      var _props3 = this.props,
          position = _props3.position,
          chunk = _props3.chunk;

      return _react2.default.createElement(
        'div',
        { style: { left: position }, className: cx('time-pickers__selector') },
        _react2.default.createElement(
          'div',
          { className: cx('time-pickers__selector-container') },
          _react2.default.createElement(
            _hover2.default,
            null,
            function (hover) {
              return hover ? _react2.default.createElement(
                'div',
                { className: cx('time-pickers__selector-chunks') },
                (0, _utilities.range)(chunks_count_in_hour).map(_this9.render_chunk)
              ) : _react2.default.createElement(
                'div',
                { className: cx('time-pickers__selector-chunk') },
                _this9.get_chunk(chunk)
              );
            }
          )
        )
      );
    }
  }]);
  return Selector;
}(_react.Component);

TimePickers.defaultProps = {
  day_label: true,
  days: [],
  on_drag_and_drop: function on_drag_and_drop(date, start, end, paint) {},
  full_day_color: '',
  drag_color: '',
  events: {}
};

exports.default = TimePickers;