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    
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; }; }();

exports.default = withDragAndDrop;

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _propTypes3 = require('../../utils/propTypes');

var _EventWrapper = require('./EventWrapper');

var _EventWrapper2 = _interopRequireDefault(_EventWrapper);

var _EventContainerWrapper = require('./EventContainerWrapper');

var _EventContainerWrapper2 = _interopRequireDefault(_EventContainerWrapper);

var _WeekWrapper = require('./WeekWrapper');

var _WeekWrapper2 = _interopRequireDefault(_WeekWrapper);

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

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

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

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; }

/**
 * Creates a higher-order component (HOC) supporting drag & drop and optionally resizing
 * of events:
 *
 * ```js
 *    import Calendar from 'react-big-calendar'
 *    import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop'
 *    export default withDragAndDrop(Calendar)
 * ```
 * (you can optionally pass any dnd backend as an optional second argument to `withDragAndDrop`.
 * It defaults to `react-dnd-html5-backend` which you should probably include in
 * your project if using this default).
 *
 * Set `resizable` to true in your calendar if you want events to be resizable.
 *
 * The HOC adds `onEventDrop` and `onEventResize` callback properties if the events are
 * moved or resized. They are called with these signatures:
 *
 * ```js
 *    function onEventDrop({ event, start, end, allDay }) {...}
 *    function onEventResize(type, { event, start, end, allDay }) {...}  // type is always 'drop'
 * ```
 *
 * Moving and resizing of events has some subtlety which one should be aware of.
 *
 * In some situations, non-allDay events are displayed in "row" format where they
 * are rendered horizontally. This is the case for ALL events in a month view. It
 * is also occurs with multi-day events in a day or week view (unless `showMultiDayTimes`
 * is set).
 *
 * When dropping or resizing non-allDay events into a the header area or when
 * resizing them horizontally because they are displayed in row format, their
 * times are preserved, only their date is changed.
 *
 * If you care about these corner cases, you can examine the `allDay` param suppled
 * in the callback to determine how the user dropped or resized the event.
 *
 * @param {*} Calendar
 * @param {*} backend
 */
function withDragAndDrop(Calendar) {
  var DragAndDropCalendar = function (_React$Component) {
    _inherits(DragAndDropCalendar, _React$Component);

    function DragAndDropCalendar() {
      var _ref;

      _classCallCheck(this, DragAndDropCalendar);

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

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

      _this.handleBeginAction = function (event, action, direction, nativeEvent) {
        _this.setState({ event: event, action: action, direction: direction, nativeEvent: nativeEvent });
      };

      _this.handleInteractionStart = function () {
        if (_this.state.interacting === false) _this.setState({ interacting: true });
      };

      _this.handleInteractionEnd = function (interactionInfo) {
        var _this$props = _this.props,
            onEventDrop = _this$props.onEventDrop,
            onEventResize = _this$props.onEventResize;
        var _this$state = _this.state,
            action = _this$state.action,
            event = _this$state.event;


        if (!action) return;

        _this.setState({
          action: null,
          event: null,
          interacting: false,
          direction: null
        });

        if (interactionInfo == null) return;

        interactionInfo.event = event;
        if (action === 'move' && onEventDrop) onEventDrop(interactionInfo);
        if (action === 'resize' && onEventResize) onEventResize(interactionInfo);
      };

      var components = _this.props.components;


      _this.components = (0, _common.mergeComponents)(components, {
        eventWrapper: _EventWrapper2.default,
        eventContainerWrapper: _EventContainerWrapper2.default,
        weekWrapper: _WeekWrapper2.default
      });

      _this.state = { interacting: false };
      return _this;
    }

    _createClass(DragAndDropCalendar, [{
      key: 'getChildContext',
      value: function getChildContext() {
        return {
          draggable: {
            onStart: this.handleInteractionStart,
            onEnd: this.handleInteractionEnd,
            onBeginAction: this.handleBeginAction,
            draggableAccessor: this.props.draggableAccessor,
            resizableAccessor: this.props.resizableAccessor,
            dragAndDropAction: this.state
          }
        };
      }
    }, {
      key: 'render',
      value: function render() {
        var _props = this.props,
            selectable = _props.selectable,
            props = _objectWithoutProperties(_props, ['selectable']);

        var interacting = this.state.interacting;

        delete props.onEventDrop;
        delete props.onEventResize;

        props.selectable = selectable ? 'ignoreEvents' : false;

        props.className = (0, _classnames2.default)(props.className, 'rbc-addons-dnd', !!interacting && 'rbc-addons-dnd-is-dragging');

        return _react2.default.createElement(Calendar, _extends({}, props, { components: this.components, interacting: interacting }));
      }
    }]);

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

  DragAndDropCalendar.propTypes = {
    onEventDrop: _propTypes2.default.func,
    onEventResize: _propTypes2.default.func,

    draggableAccessor: _propTypes3.accessor,
    resizableAccessor: _propTypes3.accessor,

    selectable: _propTypes2.default.oneOf([true, false, 'ignoreEvents']),
    resizable: _propTypes2.default.bool,
    components: _propTypes2.default.object,
    step: _propTypes2.default.number
  };
  DragAndDropCalendar.defaultProps = {
    // TODO: pick these up from Calendar.defaultProps
    components: {},
    draggableAccessor: null,
    resizableAccessor: null,
    step: 30
  };
  DragAndDropCalendar.contextTypes = {
    dragDropManager: _propTypes2.default.object
  };
  DragAndDropCalendar.childContextTypes = {
    draggable: _propTypes2.default.shape({
      onStart: _propTypes2.default.func,
      onEnd: _propTypes2.default.func,
      onBeginAction: _propTypes2.default.func,
      draggableAccessor: _propTypes3.accessor,
      resizableAccessor: _propTypes3.accessor,
      dragAndDropAction: _propTypes2.default.object
    })
  };


  return DragAndDropCalendar;
}