Why Gemfury? Push, build, and install  RubyGems npm packages Python packages Maven artifacts PHP packages Go Modules Debian packages RPM packages NuGet packages

Repository URL to install this package:

Details    
@doodle/calendar / lib / react-big-calendar / addons / dragAndDrop / EventContainerWrapper.js
Size: Mime:
'use strict';

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

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _momentTimezone = require('moment-timezone');

var _momentTimezone2 = _interopRequireDefault(_momentTimezone);

var _localizer = require('../../localizer');

var _localizer2 = _interopRequireDefault(_localizer);

var _dates = require('../../utils/dates');

var _dates2 = _interopRequireDefault(_dates);

var _Selection = require('../../Selection');

var _Selection2 = _interopRequireDefault(_Selection);

var _TimeGridEvent = require('../../TimeGridEvent');

var _TimeGridEvent2 = _interopRequireDefault(_TimeGridEvent);

var _common = require('./common');

var _NoopWrapper = require('../../NoopWrapper');

var _NoopWrapper2 = _interopRequireDefault(_NoopWrapper);

var _selection = require('../../utils/selection');

var _closest = require('dom-helpers/query/closest');

var _closest2 = _interopRequireDefault(_closest);

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

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

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var pointInColumn = function pointInColumn(bounds, _ref) {
  var x = _ref.x,
      y = _ref.y;
  var left = bounds.left,
      right = bounds.right,
      top = bounds.top;

  return x < right + 10 && x > left && y > top;
};
var propTypes = {};

var EventContainerWrapper = function (_React$Component) {
  _inherits(EventContainerWrapper, _React$Component);

  function EventContainerWrapper() {
    var _ref2;

    _classCallCheck(this, EventContainerWrapper);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    var _this = _possibleConstructorReturn(this, (_ref2 = EventContainerWrapper.__proto__ || Object.getPrototypeOf(EventContainerWrapper)).call.apply(_ref2, [this].concat(args)));

    _this.handleMove = function (point, boundaryBox) {
      var event = _this.context.draggable.dragAndDropAction.event;
      var _this$props = _this.props,
          accessors = _this$props.accessors,
          slotMetrics = _this$props.slotMetrics,
          isGenericCalendarMode = _this$props.isGenericCalendarMode;


      if (!pointInColumn(boundaryBox, point)) {
        _this.reset();
        return;
      }

      var currentSlot = slotMetrics.closestSlotFromPoint({ y: point.y - _this.eventOffsetTop, x: point.x }, boundaryBox);

      var eventStart = accessors.start(event);
      var eventEnd = isGenericCalendarMode ? event.end : accessors.end(event);
      var end = _dates2.default.add(currentSlot, _dates2.default.diff(eventStart, eventEnd, 'minutes'), 'minutes');

      _this.update(event, slotMetrics.getRange(currentSlot, end));
    };

    _this._selectable = function () {
      var node = (0, _reactDom.findDOMNode)(_this);
      var selector = _this._selector = new _Selection2.default(function () {
        return (0, _closest2.default)(node, '.rbc-time-view');
      });

      selector.on('beforeSelect', function (point) {
        var dragAndDropAction = _this.context.draggable.dragAndDropAction;


        if (!dragAndDropAction.action) return false;
        if (dragAndDropAction.action === 'resize') {
          return pointInColumn((0, _Selection.getBoundsForNode)(node), point);
        }

        var eventNode = (0, _Selection.getEventNodeFromPoint)(node, point);
        if (!eventNode) return false;

        _this.eventOffsetTop = point.y - (0, _Selection.getBoundsForNode)(eventNode).top;
      });

      selector.on('selecting', function (box) {
        _this.props.onInteraction(true);
        var bounds = (0, _Selection.getBoundsForNode)(node);
        var dragAndDropAction = _this.context.draggable.dragAndDropAction;


        if (dragAndDropAction.action === 'move') _this.handleMove(box, bounds);
        if (dragAndDropAction.action === 'resize') _this.handleResize(box, bounds);
      });

      selector.on('selectStart', function () {
        return _this.context.draggable.onStart();
      });

      selector.on('select', function (point) {
        var event = _this.state.event;
        var resource = _this.props.resource;

        var durationMinPossibleEvent = 15;
        var $calendarBox = document.getElementById('rbc-time-container');
        var $gutterColumn = document.getElementById('rbc-time-column');
        var $cardFooter = document.querySelector('.Card-footer');
        var calendarArea = !(0, _selection.pointInBox)((0, _Selection.getBoundsForNode)($calendarBox), point) || (0, _selection.pointInBox)((0, _Selection.getBoundsForNode)($gutterColumn), point);
        var footerArea = $cardFooter && !(0, _selection.pointInBox)((0, _Selection.getBoundsForNode)($cardFooter), point);

        // if slot drag out of calendar
        if (calendarArea && footerArea) {
          _this.props.onInteraction();
          _this.context.draggable.onEnd(null);
        }
        if (!_this.state.event) return;
        if (_this.state.height < 0) {
          _this.context.draggable.onEnd({
            start: event.start,
            end: (0, _momentTimezone2.default)(event.start).add(durationMinPossibleEvent, 'm').toDate(),
            resourceId: resource
          });
        }
        _this.handleInteractionEnd();
      });

      selector.on('click', function () {
        _this.reset();
        _this.context.draggable.onEnd(null);
      });

      selector.on('reset', function () {
        _this.reset();
        _this.context.draggable.onEnd(null);
      });
    };

    _this.handleInteractionEnd = function () {
      var resource = _this.props.resource;
      var event = _this.state.event;


      _this.reset();

      _this.context.draggable.onEnd({
        start: event.start,
        end: event.end,
        resourceId: resource
      });
    };

    _this._teardownSelectable = function () {
      if (!_this._selector) return;
      _this._selector.teardown();
      _this._selector = null;
    };

    _this.state = {};
    return _this;
  }

  _createClass(EventContainerWrapper, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      this._selectable();
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      this._teardownSelectable();
    }
  }, {
    key: 'reset',
    value: function reset() {
      if (this.state.event) this.setState({ event: null, top: null, height: null });
    }
  }, {
    key: 'update',
    value: function update(event, _ref3) {
      var startDate = _ref3.startDate,
          endDate = _ref3.endDate,
          top = _ref3.top,
          height = _ref3.height;
      var lastEvent = this.state.event;

      if (lastEvent && startDate === lastEvent.start && endDate === lastEvent.end) {
        return;
      }

      if (height > 0) {
        this.setState({
          top: top,
          height: height,
          event: _extends({}, event, { start: startDate, end: endDate })
        });
      }
    }
  }, {
    key: 'handleResize',
    value: function handleResize(point, boundaryBox) {
      this.props.onInteraction(true);
      var start = void 0;
      var end = void 0;
      var _props = this.props,
          accessors = _props.accessors,
          slotMetrics = _props.slotMetrics;
      var _context$draggable$dr = this.context.draggable.dragAndDropAction,
          event = _context$draggable$dr.event,
          direction = _context$draggable$dr.direction;


      var currentSlot = slotMetrics.closestSlotFromPoint(point, boundaryBox);
      if (direction === 'UP') {
        end = accessors.end(event);
        start = currentSlot;
      } else if (direction === 'DOWN') {
        start = accessors.start(event);
        var range = Math.abs(boundaryBox.top - boundaryBox.bottom);
        var newSlotPosition = (point.y - boundaryBox.top + _constants.scrollRegistrationOffset) / range;
        end = slotMetrics.closestSlotToPosition(newSlotPosition);
      }
      this.update(event, slotMetrics.getRange(start, end));
    }
  }, {
    key: 'render',
    value: function render() {
      var _props2 = this.props,
          children = _props2.children,
          accessors = _props2.accessors,
          components = _props2.components,
          getters = _props2.getters,
          slotMetrics = _props2.slotMetrics;
      var _state = this.state,
          event = _state.event,
          top = _state.top,
          height = _state.height;


      if (!event) return children;
      var start = event.start,
          end = event.end;


      var label = void 0;
      var format = 'eventTimeRangeFormat';

      var startsBeforeDay = slotMetrics.startsBeforeDay(start);
      var startsAfterDay = slotMetrics.startsAfterDay(end);

      if (startsBeforeDay) format = 'eventTimeRangeEndFormat';else if (startsAfterDay) format = 'eventTimeRangeStartFormat';

      if (startsBeforeDay && startsAfterDay) label = _localizer2.default.messages.allDay;else label = _localizer2.default.format({ start: start, end: end }, format);

      return _react2.default.createElement(
        _react2.default.Fragment,
        null,
        children,
        event && _react2.default.createElement(_TimeGridEvent2.default, {
          event: event,
          label: label,
          className: 'rbc-addons-dnd-drag-preview',
          style: { top: top, height: height, width: 100 },
          getters: getters,
          components: _extends({}, components, { eventWrapper: _NoopWrapper2.default }),
          accessors: _extends({}, accessors, _common.dragAccessors),
          continuesEarlier: startsBeforeDay,
          continuesLater: startsAfterDay
        })
      );
    }
  }]);

  return EventContainerWrapper;
}(_react2.default.Component);

EventContainerWrapper.propTypes = {
  accessors: _propTypes2.default.object.isRequired,
  components: _propTypes2.default.object.isRequired,
  getters: _propTypes2.default.object.isRequired,
  slotMetrics: _propTypes2.default.object.isRequired,
  resource: _propTypes2.default.any,
  /*
  * A callback called during interaction.
   */
  onInteraction: _propTypes2.default.func,
  isGenericCalendarMode: _propTypes2.default.bool
};
EventContainerWrapper.contextTypes = {
  draggable: _propTypes2.default.shape({
    onStart: _propTypes2.default.func,
    onEnd: _propTypes2.default.func,
    onBeginAction: _propTypes2.default.func,
    dragAndDropAction: _propTypes2.default.object
  })
};


EventContainerWrapper.propTypes = propTypes;

exports.default = EventContainerWrapper;