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

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _defaults = require('lodash/defaults');

var _defaults2 = _interopRequireDefault(_defaults);

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

var _momentTimezone2 = _interopRequireDefault(_momentTimezone);

var _reactSwipeable = require('react-swipeable');

var _reactSwipeable2 = _interopRequireDefault(_reactSwipeable);

var _noop = require('lodash/noop');

var _noop2 = _interopRequireDefault(_noop);

var _uniqueId = require('lodash/uniqueId');

var _uniqueId2 = _interopRequireDefault(_uniqueId);

var _reactBigCalendar = require('./react-big-calendar');

var _reactBigCalendar2 = _interopRequireDefault(_reactBigCalendar);

var _dragAndDrop = require('./react-big-calendar/addons/dragAndDrop');

var _dragAndDrop2 = _interopRequireDefault(_dragAndDrop);

var _CalendarToolbar = require('./CalendarToolbar');

var _CalendarToolbar2 = _interopRequireDefault(_CalendarToolbar);

var _CalendarHeader = require('./CalendarHeader');

var _CalendarHeader2 = _interopRequireDefault(_CalendarHeader);

var _DayWrapper = require('./DayWrapper');

var _DayWrapper2 = _interopRequireDefault(_DayWrapper);

var _dates = require('./react-big-calendar/utils/dates');

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

var SWIPE_DIRECTIONS = {
  LEFT: 'left',
  RIGHT: 'right'
};

var DEFAULT_CULTURE = 'en';

var defaultProps = {
  messages: {},
  culture: 'en',
  data: [],
  date: new Date(),
  initialDate: new Date(),
  components: {},
  onScroll: _noop2.default,
  handleDragSelection: _noop2.default,
  handleTimeslotExclusion: _noop2.default,
  handleDragSelecting: _noop2.default,
  handleWeekChange: _noop2.default,
  getDrilldownView: _noop2.default,
  onDrillDown: _noop2.default,
  scrollToTime: null,
  isAllowedTime: null,
  viewChangeEnabled: true,
  dragSelection: false,
  withDragAndDrop: false,
  withResizing: false,
  isGenericCalendarMode: false,
  clickSelection: false,
  slotDuration: _dates.MILLI.minutes,
  optionsToolbar: false,
  style: {},
  isHeaderDatesShow: true,
  maxHorizon: null,
  minNotice: null,
  errorMessage: null,
  logError: _noop2.default
};

/**
 * Swipeable calendar component. Using for managing events and dates.
 * Includes setting modal, that is displayed, if user calendar isn't empty.
 */

var Calendar = function (_Component) {
  _inherits(Calendar, _Component);

  function Calendar(props) {
    _classCallCheck(this, Calendar);

    var _this = _possibleConstructorReturn(this, (Calendar.__proto__ || Object.getPrototypeOf(Calendar)).call(this, props));

    _this.handleNavigation = function (eventDate) {
      var culture = _this.props.culture;


      _this.setState(function (state) {
        return _extends({}, state, { date: eventDate });
      });

      var dayOnWeek = (0, _momentTimezone2.default)(eventDate).locale(culture);
      var start = dayOnWeek.clone().startOf('w').toDate();
      var end = dayOnWeek.clone().endOf('w').toDate();
      _this.props.handleWeekChange({ start: start, end: end });
    };

    _this.handleDragAndDropSelection = function (event) {
      if (!event) return;
      _this.props.handleDragSelection({
        start: event.start,
        end: event.end,
        id: +event.start + +event.end + (0, _uniqueId2.default)(),
        isTemp: true,
        allDay: !!event.allDay
      });
    };

    _this.swipedRight = function () {
      _this.swipe(SWIPE_DIRECTIONS.RIGHT);
    };

    _this.swipedLeft = function () {
      _this.swipe(SWIPE_DIRECTIONS.LEFT);
    };

    _this.state = {
      date: props.initialDate,
      hasError: false
    };

    _this.components = (0, _defaults2.default)({}, props.components, {
      toolbar: _CalendarToolbar2.default,
      header: _CalendarHeader2.default,
      dayWrapper: function dayWrapper(el) {
        return _react2.default.createElement(_DayWrapper2.default, _extends({}, el, { excludeHandler: props.handleTimeslotExclusion }));
      }
    });

    _this.CalendarComponent = props.withDragAndDrop || props.withResizing ? (0, _dragAndDrop2.default)(_reactBigCalendar2.default) : _reactBigCalendar2.default;
    _reactBigCalendar2.default.momentLocalizer(_momentTimezone2.default);
    return _this;
  }

  _createClass(Calendar, [{
    key: 'swipe',
    value: function swipe(direction) {
      var method = direction === SWIPE_DIRECTIONS.LEFT ? 'add' : 'subtract';
      var date = this.state.date;

      var newDate = (0, _momentTimezone2.default)(date)[method](1, 'w').toDate();
      this.handleNavigation(newDate);
    }
  }, {
    key: 'componentDidCatch',
    value: function componentDidCatch(error, info) {
      this.props.logError({ error: error, info: info });
    }
  }, {
    key: 'render',
    value: function render() {
      var date = this.state.date;
      var CalendarComponent = this.CalendarComponent;

      var _props = this.props,
          data = _props.data,
          culture = _props.culture,
          scrollToTime = _props.scrollToTime,
          dragSelection = _props.dragSelection,
          clickSelection = _props.clickSelection,
          onScroll = _props.onScroll,
          isAllowedTime = _props.isAllowedTime,
          handleDragSelecting = _props.handleDragSelecting,
          style = _props.style,
          messages = _props.messages,
          optionsToolbar = _props.optionsToolbar,
          drilldownView = _props.drilldownView,
          onDrillDown = _props.onDrillDown,
          getDrilldownView = _props.getDrilldownView,
          viewChangeEnabled = _props.viewChangeEnabled,
          slotDuration = _props.slotDuration,
          interacting = _props.interacting,
          withDragAndDrop = _props.withDragAndDrop,
          withResizing = _props.withResizing,
          isGenericCalendarMode = _props.isGenericCalendarMode,
          maxHorizon = _props.maxHorizon,
          minNotice = _props.minNotice,
          errorMessage = _props.errorMessage,
          minResizeDuration = _props.minResizeDuration,
          props = _objectWithoutProperties(_props, ['data', 'culture', 'scrollToTime', 'dragSelection', 'clickSelection', 'onScroll', 'isAllowedTime', 'handleDragSelecting', 'style', 'messages', 'optionsToolbar', 'drilldownView', 'onDrillDown', 'getDrilldownView', 'viewChangeEnabled', 'slotDuration', 'interacting', 'withDragAndDrop', 'withResizing', 'isGenericCalendarMode', 'maxHorizon', 'minNotice', 'errorMessage', 'minResizeDuration']);

      var hasError = this.state.hasError;


      var withSlotEditing = withDragAndDrop || withResizing;

      return _react2.default.createElement(
        _reactSwipeable2.default,
        {
          onSwipedLeft: !withSlotEditing ? this.swipedLeft : _noop2.default,
          onSwipedRight: !withSlotEditing ? this.swipedRight : _noop2.default,
          delta: 60,
          className: 'rbc-wrapper'
        },
        hasError ? _react2.default.createElement(
          _react2.default.Fragment,
          null,
          _react2.default.createElement(
            'div',
            { className: 'blocked-calendar-wrapper' },
            _react2.default.createElement(
              'h1',
              { className: 'blocked-calendar-error' },
              errorMessage || 'Sorry, error occurred. Please reload the page and try again.'
            )
          ),
          _react2.default.createElement(CalendarComponent, _extends({}, defaultProps, {
            events: [],
            components: this.components,
            style: style,
            isGenericCalendarMode: isGenericCalendarMode
          }))
        ) : _react2.default.createElement(CalendarComponent, _extends({}, props, {
          messages: messages,
          interacting: interacting,
          drilldownView: drilldownView,
          onDrillDown: onDrillDown,
          getDrilldownView: getDrilldownView,
          viewChangeEnabled: viewChangeEnabled,
          onScroll: onScroll,
          components: this.components,
          culture: culture,
          namingCulture: DEFAULT_CULTURE,
          events: data,
          isAllowedTime: isAllowedTime,
          date: date,
          style: style,
          scrollToTime: scrollToTime,
          showMultiDayTimes: false,
          optionsToolbar: optionsToolbar,
          defaultView: 'week',
          views: ['week'],
          onNavigate: this.handleNavigation,
          selectable: dragSelection,
          clickSelectable: clickSelection,
          slotDuration: slotDuration,
          onSelectSlot: this.handleDragAndDropSelection,
          onSelecting: handleDragSelecting,
          isGenericCalendarMode: isGenericCalendarMode,
          maxHorizon: maxHorizon,
          minNotice: minNotice,
          minResizeDuration: minResizeDuration
        }))
      );
    }
  }], [{
    key: 'getDerivedStateFromError',
    value: function getDerivedStateFromError() {
      return { hasError: true };
    }
  }, {
    key: 'getDerivedStateFromProps',
    value: function getDerivedStateFromProps(nextProps) {
      return { date: nextProps.date };
    }
  }]);

  return Calendar;
}(_react.Component);

Calendar.propTypes = {
  /**
   * An array of events objects to display in the calendar.
   */
  data: _propTypes2.default.array,
  /** The current date value of the calendar. Determines the visible view range.
   * If `date` is omitted then the result of `Date.now` is used.
   */
  date: _propTypes2.default.instanceOf(Date),
  /** The initial date value of the calendar.
   */
  initialDate: _propTypes2.default.instanceOf(Date),
  /**
   * A culture code in ISO 639-1 standard for the calendar.
   */
  culture: _propTypes2.default.string,
  /**
   * Customize how different sections of the calendar render by providing custom Components.
   */
  components: _propTypes2.default.shape({
    event: _propTypes2.default.func,
    eventWrapper: _propTypes2.default.func,
    dayWrapper: _propTypes2.default.func,
    dateCellWrapper: _propTypes2.default.func,
    optionsToolbar: _propTypes2.default.func,
    toolbar: _propTypes2.default.func
  }),
  /**
   * A callback fired when a date selection is made. Only fires when `selectable` is `true`.
   */
  onScroll: _propTypes2.default.func,
  /**
   * A callback returns a bool value, if value is true, time is available for creating of slots. Using for choosing timeslot styles.
   */
  handleTimeslotExclusion: _propTypes2.default.func,
  /**
   * A callback fired when user selects slot by dragging.
   */
  handleDragSelection: _propTypes2.default.func,
  /**
   *  A callback fired when dragging a selection.
   */
  handleDragSelecting: _propTypes2.default.func,
  /**
   *  A callback fired when moving a hover block.
   */
  isAllowedTime: _propTypes2.default.func,
  /**
   * A callback uses for navigation in calendar.
   */
  handleWeekChange: _propTypes2.default.func,
  /**
   * Determines how far down the scroll pane is initially scrolled down.
   */
  scrollToTime: _propTypes2.default.instanceOf(Date),
  /**
   * Allows mouse selection of ranges of dates/times.
   */
  dragSelection: _propTypes2.default.oneOfType([_propTypes2.default.bool, _propTypes2.default.string]),
  /**
   * Allows mouse click selection of ranges of dates/times.
   */
  clickSelection: _propTypes2.default.bool,
  /**
   * Slot duration in milliseconds.
   */
  slotDuration: _propTypes2.default.number,
  /**
   * A bool flag for displaying additional toolbar.
   */
  optionsToolbar: _propTypes2.default.bool,
  /**
   * Custom styles for calendar.
   */
  style: _propTypes2.default.object,
  /**
   * String array of messages in user locale language
   */
  messages: _propTypes2.default.object,
  /**
   * Callback fired when date header, or the truncated events links are clicked
   *
   */
  onDrillDown: _propTypes2.default.func,
  /**
   * The string name of the destination view for drill-down actions, such
   * as clicking a date header, or the truncated events links. If
   * `getDrilldownView` is also specified it will be used instead.
   *
   * Set to `null` to disable drill-down actions.
   *
   * ```js
   * <BigCalendar
   *   drilldownView="agenda"
   * />
   * ```
   */
  drilldownView: _propTypes2.default.string,
  /**
   * Functionally equivalent to `drilldownView`, but accepts a function
   * that can return a view name. It's useful for customizing the drill-down
   * actions depending on the target date and triggering view.
   *
   * Return `null` to disable drill-down actions.
   *
   * ```js
   * <BigCalendar
   *   getDrilldownView={(targetDate, currentViewName, configuredViewNames) =>
   *     if (currentViewName === 'month' && configuredViewNames.includes('week'))
   *       return 'week'
   *
   *     return null;
   *   }}
   * />
   * ```
   */
  getDrilldownView: _propTypes2.default.func,
  /**
   *  A flag if view changing availability is enabled.
   */
  viewChangeEnabled: _propTypes2.default.bool,
  /**
   *  A flag if view drag and drop availability is enabled.
   */
  withDragAndDrop: _propTypes2.default.bool,
  /**
   *  A flag if view resizing availability is enabled.
   */
  withResizing: _propTypes2.default.bool,
  /**
   * Minimum duration of a time slot when resizing is enabled
   * Unit: minutes, default value: 15
   */
  minResizeDuration: _propTypes2.default.number,
  /**
   *  A flag to render generic calendar.
   */
  isGenericCalendarMode: _propTypes2.default.bool,
  /**
   * Flag to render or not dates in calendar header.
   */
  isHeaderDatesShow: _propTypes2.default.bool,
  /**
   * Top border-date of booking.
   */
  maxHorizon: _propTypes2.default.instanceOf(Date),
  /**
   * Minimal border-date of booking.
   */
  minNotice: _propTypes2.default.instanceOf(Date),
  /**
   * String with error message.
   */
  errorMessage: _propTypes2.default.string,
  /**
   * Callback used for error logging.
   */
  logError: _propTypes2.default.func
};
Calendar.defaultProps = _extends({}, defaultProps);
exports.default = Calendar;