Repository URL to install this package:
|
Version:
2.2.0-rc.2 ▾
|
'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;