Repository URL to install this package:
|
Version:
2.0.3 ▾
|
'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;