react-big-calendar
Version:
Calendar! with events
207 lines (206 loc) • 9.81 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _clsx = _interopRequireDefault(require("clsx"));
var _helpers = require("./utils/helpers");
var _selection = require("./utils/selection");
var _Selection = _interopRequireWildcard(require("./Selection"));
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
var BackgroundCells = /*#__PURE__*/function (_React$Component) {
function BackgroundCells(props, context) {
var _this;
(0, _classCallCheck2.default)(this, BackgroundCells);
_this = _callSuper(this, BackgroundCells, [props, context]);
_this.state = {
selecting: false
};
_this.containerRef = /*#__PURE__*/(0, _react.createRef)();
return _this;
}
(0, _inherits2.default)(BackgroundCells, _React$Component);
return (0, _createClass2.default)(BackgroundCells, [{
key: "componentDidMount",
value: function componentDidMount() {
this.props.selectable && this._selectable();
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
this._teardownSelectable();
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps) {
if (!prevProps.selectable && this.props.selectable) this._selectable();
if (prevProps.selectable && !this.props.selectable) this._teardownSelectable();
}
}, {
key: "render",
value: function render() {
var _this$props = this.props,
range = _this$props.range,
getNow = _this$props.getNow,
getters = _this$props.getters,
currentDate = _this$props.date,
Wrapper = _this$props.components.dateCellWrapper,
localizer = _this$props.localizer;
var _this$state = this.state,
selecting = _this$state.selecting,
startIdx = _this$state.startIdx,
endIdx = _this$state.endIdx;
var current = getNow();
return /*#__PURE__*/_react.default.createElement("div", {
className: "rbc-row-bg",
ref: this.containerRef
}, range.map(function (date, index) {
var selected = selecting && index >= startIdx && index <= endIdx;
var _getters$dayProp = getters.dayProp(date),
className = _getters$dayProp.className,
style = _getters$dayProp.style;
return /*#__PURE__*/_react.default.createElement(Wrapper, {
key: index,
value: date,
range: range
}, /*#__PURE__*/_react.default.createElement("div", {
style: style,
className: (0, _clsx.default)('rbc-day-bg', className, selected && 'rbc-selected-cell', localizer.isSameDate(date, current) && 'rbc-today', currentDate && localizer.neq(currentDate, date, 'month') && 'rbc-off-range-bg')
}));
}));
}
}, {
key: "_selectable",
value: function _selectable() {
var _this2 = this;
var node = this.containerRef.current;
var selector = this._selector = new _Selection.default(this.props.container, {
longPressThreshold: this.props.longPressThreshold
});
var selectorClicksHandler = function selectorClicksHandler(point, actionType) {
if (!(0, _Selection.isEvent)(node, point) && !(0, _Selection.isShowMore)(node, point)) {
var rowBox = (0, _Selection.getBoundsForNode)(node);
var _this2$props = _this2.props,
range = _this2$props.range,
rtl = _this2$props.rtl;
if ((0, _selection.pointInBox)(rowBox, point)) {
var currentCell = (0, _selection.getSlotAtX)(rowBox, point.x, rtl, range.length);
_this2._selectSlot({
startIdx: currentCell,
endIdx: currentCell,
action: actionType,
box: point
});
}
}
_this2._initial = {};
_this2.setState({
selecting: false
});
};
selector.on('selecting', function (box) {
var _this2$props2 = _this2.props,
range = _this2$props2.range,
rtl = _this2$props2.rtl;
var startIdx = -1;
var endIdx = -1;
if (!_this2.state.selecting) {
(0, _helpers.notify)(_this2.props.onSelectStart, [box]);
_this2._initial = {
x: box.x,
y: box.y
};
}
if (selector.isSelected(node)) {
var nodeBox = (0, _Selection.getBoundsForNode)(node);
var _dateCellSelection = (0, _selection.dateCellSelection)(_this2._initial, nodeBox, box, range.length, rtl);
startIdx = _dateCellSelection.startIdx;
endIdx = _dateCellSelection.endIdx;
}
_this2.setState({
selecting: true,
startIdx: startIdx,
endIdx: endIdx
});
});
selector.on('beforeSelect', function (box) {
if (_this2.props.selectable !== 'ignoreEvents') return;
return !(0, _Selection.isEvent)(_this2.containerRef.current, box);
});
selector.on('click', function (point) {
return selectorClicksHandler(point, 'click');
});
selector.on('doubleClick', function (point) {
return selectorClicksHandler(point, 'doubleClick');
});
selector.on('select', function (bounds) {
_this2._selectSlot(_objectSpread(_objectSpread({}, _this2.state), {}, {
action: 'select',
bounds: bounds
}));
_this2._initial = {};
_this2.setState({
selecting: false
});
(0, _helpers.notify)(_this2.props.onSelectEnd, [_this2.state]);
});
}
}, {
key: "_teardownSelectable",
value: function _teardownSelectable() {
if (!this._selector) return;
this._selector.teardown();
this._selector = null;
}
}, {
key: "_selectSlot",
value: function _selectSlot(_ref) {
var endIdx = _ref.endIdx,
startIdx = _ref.startIdx,
action = _ref.action,
bounds = _ref.bounds,
box = _ref.box;
if (endIdx !== -1 && startIdx !== -1) this.props.onSelectSlot && this.props.onSelectSlot({
start: startIdx,
end: endIdx,
action: action,
bounds: bounds,
box: box,
resourceId: this.props.resourceId
});
}
}]);
}(_react.default.Component);
BackgroundCells.propTypes = process.env.NODE_ENV !== "production" ? {
date: _propTypes.default.instanceOf(Date),
getNow: _propTypes.default.func.isRequired,
getters: _propTypes.default.object.isRequired,
components: _propTypes.default.object.isRequired,
container: _propTypes.default.func,
dayPropGetter: _propTypes.default.func,
selectable: _propTypes.default.oneOf([true, false, 'ignoreEvents']),
longPressThreshold: _propTypes.default.number,
onSelectSlot: _propTypes.default.func.isRequired,
onSelectEnd: _propTypes.default.func,
onSelectStart: _propTypes.default.func,
range: _propTypes.default.arrayOf(_propTypes.default.instanceOf(Date)),
rtl: _propTypes.default.bool,
type: _propTypes.default.string,
resourceId: _propTypes.default.any,
localizer: _propTypes.default.any
} : {};
var _default = exports.default = BackgroundCells;