You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

пре 3 година
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424
  1. "use strict";
  2. var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
  3. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  4. exports.__esModule = true;
  5. exports.default = void 0;
  6. var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
  7. var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
  8. var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
  9. var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
  10. var _propTypes = _interopRequireDefault(require("prop-types"));
  11. var _react = _interopRequireDefault(require("react"));
  12. var _reactDom = require("react-dom");
  13. var _clsx = _interopRequireDefault(require("clsx"));
  14. var dates = _interopRequireWildcard(require("./utils/dates"));
  15. var _chunk = _interopRequireDefault(require("lodash/chunk"));
  16. var _constants = require("./utils/constants");
  17. var _helpers = require("./utils/helpers");
  18. var _position = _interopRequireDefault(require("dom-helpers/position"));
  19. var animationFrame = _interopRequireWildcard(require("dom-helpers/animationFrame"));
  20. var _Popup = _interopRequireDefault(require("./Popup"));
  21. var _Overlay = _interopRequireDefault(require("react-overlays/Overlay"));
  22. var _DateContentRow = _interopRequireDefault(require("./DateContentRow"));
  23. var _Header = _interopRequireDefault(require("./Header"));
  24. var _DateHeader = _interopRequireDefault(require("./DateHeader"));
  25. var _eventLevels = require("./utils/eventLevels");
  26. var eventsForWeek = function eventsForWeek(evts, start, end, accessors) {
  27. return evts.filter(function (e) {
  28. return (0, _eventLevels.inRange)(e, start, end, accessors);
  29. });
  30. };
  31. var MonthView =
  32. /*#__PURE__*/
  33. function (_React$Component) {
  34. (0, _inheritsLoose2.default)(MonthView, _React$Component);
  35. function MonthView() {
  36. var _this;
  37. for (var _len = arguments.length, _args = new Array(_len), _key = 0; _key < _len; _key++) {
  38. _args[_key] = arguments[_key];
  39. }
  40. _this = _React$Component.call.apply(_React$Component, [this].concat(_args)) || this;
  41. _this.getContainer = function () {
  42. return (0, _reactDom.findDOMNode)((0, _assertThisInitialized2.default)(_this));
  43. };
  44. _this.renderWeek = function (week, weekIdx) {
  45. var _this$props = _this.props,
  46. events = _this$props.events,
  47. components = _this$props.components,
  48. selectable = _this$props.selectable,
  49. getNow = _this$props.getNow,
  50. selected = _this$props.selected,
  51. date = _this$props.date,
  52. localizer = _this$props.localizer,
  53. longPressThreshold = _this$props.longPressThreshold,
  54. accessors = _this$props.accessors,
  55. getters = _this$props.getters;
  56. var _this$state = _this.state,
  57. needLimitMeasure = _this$state.needLimitMeasure,
  58. rowLimit = _this$state.rowLimit;
  59. events = eventsForWeek(events, week[0], week[week.length - 1], accessors);
  60. events.sort(function (a, b) {
  61. return (0, _eventLevels.sortEvents)(a, b, accessors);
  62. });
  63. return _react.default.createElement(_DateContentRow.default, {
  64. key: weekIdx,
  65. ref: weekIdx === 0 ? _this.slotRowRef : undefined,
  66. container: _this.getContainer,
  67. className: "rbc-month-row",
  68. getNow: getNow,
  69. date: date,
  70. range: week,
  71. events: events,
  72. maxRows: rowLimit,
  73. selected: selected,
  74. selectable: selectable,
  75. components: components,
  76. accessors: accessors,
  77. getters: getters,
  78. localizer: localizer,
  79. renderHeader: _this.readerDateHeading,
  80. renderForMeasure: needLimitMeasure,
  81. onShowMore: _this.handleShowMore,
  82. onSelect: _this.handleSelectEvent,
  83. onDoubleClick: _this.handleDoubleClickEvent,
  84. onSelectSlot: _this.handleSelectSlot,
  85. longPressThreshold: longPressThreshold,
  86. rtl: _this.props.rtl
  87. });
  88. };
  89. _this.readerDateHeading = function (_ref) {
  90. var date = _ref.date,
  91. className = _ref.className,
  92. props = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["date", "className"]);
  93. var _this$props2 = _this.props,
  94. currentDate = _this$props2.date,
  95. getDrilldownView = _this$props2.getDrilldownView,
  96. localizer = _this$props2.localizer;
  97. var isOffRange = dates.month(date) !== dates.month(currentDate);
  98. var isCurrent = dates.eq(date, currentDate, 'day');
  99. var drilldownView = getDrilldownView(date);
  100. var label = localizer.format(date, 'dateFormat');
  101. var DateHeaderComponent = _this.props.components.dateHeader || _DateHeader.default;
  102. return _react.default.createElement("div", (0, _extends2.default)({}, props, {
  103. className: (0, _clsx.default)(className, isOffRange && 'rbc-off-range', isCurrent && 'rbc-current')
  104. }), _react.default.createElement(DateHeaderComponent, {
  105. label: label,
  106. date: date,
  107. drilldownView: drilldownView,
  108. isOffRange: isOffRange,
  109. onDrillDown: function onDrillDown(e) {
  110. return _this.handleHeadingClick(date, drilldownView, e);
  111. }
  112. }));
  113. };
  114. _this.handleSelectSlot = function (range, slotInfo) {
  115. _this._pendingSelection = _this._pendingSelection.concat(range);
  116. clearTimeout(_this._selectTimer);
  117. _this._selectTimer = setTimeout(function () {
  118. return _this.selectDates(slotInfo);
  119. });
  120. };
  121. _this.handleHeadingClick = function (date, view, e) {
  122. e.preventDefault();
  123. _this.clearSelection();
  124. (0, _helpers.notify)(_this.props.onDrillDown, [date, view]);
  125. };
  126. _this.handleSelectEvent = function () {
  127. _this.clearSelection();
  128. for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
  129. args[_key2] = arguments[_key2];
  130. }
  131. (0, _helpers.notify)(_this.props.onSelectEvent, args);
  132. };
  133. _this.handleDoubleClickEvent = function () {
  134. _this.clearSelection();
  135. for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
  136. args[_key3] = arguments[_key3];
  137. }
  138. (0, _helpers.notify)(_this.props.onDoubleClickEvent, args);
  139. };
  140. _this.handleShowMore = function (events, date, cell, slot, target) {
  141. var _this$props3 = _this.props,
  142. popup = _this$props3.popup,
  143. onDrillDown = _this$props3.onDrillDown,
  144. onShowMore = _this$props3.onShowMore,
  145. getDrilldownView = _this$props3.getDrilldownView; //cancel any pending selections so only the event click goes through.
  146. _this.clearSelection();
  147. if (popup) {
  148. var position = (0, _position.default)(cell, (0, _reactDom.findDOMNode)((0, _assertThisInitialized2.default)(_this)));
  149. _this.setState({
  150. overlay: {
  151. date: date,
  152. events: events,
  153. position: position,
  154. target: target
  155. }
  156. });
  157. } else {
  158. (0, _helpers.notify)(onDrillDown, [date, getDrilldownView(date) || _constants.views.DAY]);
  159. }
  160. (0, _helpers.notify)(onShowMore, [events, date, slot]);
  161. };
  162. _this._bgRows = [];
  163. _this._pendingSelection = [];
  164. _this.slotRowRef = _react.default.createRef();
  165. _this.state = {
  166. rowLimit: 5,
  167. needLimitMeasure: true
  168. };
  169. return _this;
  170. }
  171. var _proto = MonthView.prototype;
  172. _proto.componentWillReceiveProps = function componentWillReceiveProps(_ref2) {
  173. var date = _ref2.date;
  174. this.setState({
  175. needLimitMeasure: !dates.eq(date, this.props.date, 'month')
  176. });
  177. };
  178. _proto.componentDidMount = function componentDidMount() {
  179. var _this2 = this;
  180. var running;
  181. if (this.state.needLimitMeasure) this.measureRowLimit(this.props);
  182. window.addEventListener('resize', this._resizeListener = function () {
  183. if (!running) {
  184. animationFrame.request(function () {
  185. running = false;
  186. _this2.setState({
  187. needLimitMeasure: true
  188. }); //eslint-disable-line
  189. });
  190. }
  191. }, false);
  192. };
  193. _proto.componentDidUpdate = function componentDidUpdate() {
  194. if (this.state.needLimitMeasure) this.measureRowLimit(this.props);
  195. };
  196. _proto.componentWillUnmount = function componentWillUnmount() {
  197. window.removeEventListener('resize', this._resizeListener, false);
  198. };
  199. _proto.render = function render() {
  200. var _this$props4 = this.props,
  201. date = _this$props4.date,
  202. localizer = _this$props4.localizer,
  203. className = _this$props4.className,
  204. month = dates.visibleDays(date, localizer),
  205. weeks = (0, _chunk.default)(month, 7);
  206. this._weekCount = weeks.length;
  207. return _react.default.createElement("div", {
  208. className: (0, _clsx.default)('rbc-month-view', className)
  209. }, _react.default.createElement("div", {
  210. className: "rbc-row rbc-month-header"
  211. }, this.renderHeaders(weeks[0])), weeks.map(this.renderWeek), this.props.popup && this.renderOverlay());
  212. };
  213. _proto.renderHeaders = function renderHeaders(row) {
  214. var _this$props5 = this.props,
  215. localizer = _this$props5.localizer,
  216. components = _this$props5.components;
  217. var first = row[0];
  218. var last = row[row.length - 1];
  219. var HeaderComponent = components.header || _Header.default;
  220. return dates.range(first, last, 'day').map(function (day, idx) {
  221. return _react.default.createElement("div", {
  222. key: 'header_' + idx,
  223. className: "rbc-header"
  224. }, _react.default.createElement(HeaderComponent, {
  225. date: day,
  226. localizer: localizer,
  227. label: localizer.format(day, 'weekdayFormat')
  228. }));
  229. });
  230. };
  231. _proto.renderOverlay = function renderOverlay() {
  232. var _this3 = this;
  233. var overlay = this.state && this.state.overlay || {};
  234. var _this$props6 = this.props,
  235. accessors = _this$props6.accessors,
  236. localizer = _this$props6.localizer,
  237. components = _this$props6.components,
  238. getters = _this$props6.getters,
  239. selected = _this$props6.selected,
  240. popupOffset = _this$props6.popupOffset;
  241. return _react.default.createElement(_Overlay.default, {
  242. rootClose: true,
  243. placement: "bottom",
  244. show: !!overlay.position,
  245. onHide: function onHide() {
  246. return _this3.setState({
  247. overlay: null
  248. });
  249. },
  250. target: function target() {
  251. return overlay.target;
  252. }
  253. }, function (_ref3) {
  254. var props = _ref3.props;
  255. return _react.default.createElement(_Popup.default, (0, _extends2.default)({}, props, {
  256. popupOffset: popupOffset,
  257. accessors: accessors,
  258. getters: getters,
  259. selected: selected,
  260. components: components,
  261. localizer: localizer,
  262. position: overlay.position,
  263. events: overlay.events,
  264. slotStart: overlay.date,
  265. slotEnd: overlay.end,
  266. onSelect: _this3.handleSelectEvent,
  267. onDoubleClick: _this3.handleDoubleClickEvent
  268. }));
  269. });
  270. };
  271. _proto.measureRowLimit = function measureRowLimit() {
  272. this.setState({
  273. needLimitMeasure: false,
  274. rowLimit: this.slotRowRef.current.getRowLimit()
  275. });
  276. };
  277. _proto.selectDates = function selectDates(slotInfo) {
  278. var slots = this._pendingSelection.slice();
  279. this._pendingSelection = [];
  280. slots.sort(function (a, b) {
  281. return +a - +b;
  282. });
  283. (0, _helpers.notify)(this.props.onSelectSlot, {
  284. slots: slots,
  285. start: slots[0],
  286. end: slots[slots.length - 1],
  287. action: slotInfo.action,
  288. bounds: slotInfo.bounds,
  289. box: slotInfo.box
  290. });
  291. };
  292. _proto.clearSelection = function clearSelection() {
  293. clearTimeout(this._selectTimer);
  294. this._pendingSelection = [];
  295. };
  296. return MonthView;
  297. }(_react.default.Component);
  298. MonthView.propTypes = process.env.NODE_ENV !== "production" ? {
  299. events: _propTypes.default.array.isRequired,
  300. date: _propTypes.default.instanceOf(Date),
  301. min: _propTypes.default.instanceOf(Date),
  302. max: _propTypes.default.instanceOf(Date),
  303. step: _propTypes.default.number,
  304. getNow: _propTypes.default.func.isRequired,
  305. scrollToTime: _propTypes.default.instanceOf(Date),
  306. rtl: _propTypes.default.bool,
  307. width: _propTypes.default.number,
  308. accessors: _propTypes.default.object.isRequired,
  309. components: _propTypes.default.object.isRequired,
  310. getters: _propTypes.default.object.isRequired,
  311. localizer: _propTypes.default.object.isRequired,
  312. selected: _propTypes.default.object,
  313. selectable: _propTypes.default.oneOf([true, false, 'ignoreEvents']),
  314. longPressThreshold: _propTypes.default.number,
  315. onNavigate: _propTypes.default.func,
  316. onSelectSlot: _propTypes.default.func,
  317. onSelectEvent: _propTypes.default.func,
  318. onDoubleClickEvent: _propTypes.default.func,
  319. onShowMore: _propTypes.default.func,
  320. onDrillDown: _propTypes.default.func,
  321. getDrilldownView: _propTypes.default.func.isRequired,
  322. popup: _propTypes.default.bool,
  323. popupOffset: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({
  324. x: _propTypes.default.number,
  325. y: _propTypes.default.number
  326. })])
  327. } : {};
  328. MonthView.range = function (date, _ref4) {
  329. var localizer = _ref4.localizer;
  330. var start = dates.firstVisibleDay(date, localizer);
  331. var end = dates.lastVisibleDay(date, localizer);
  332. return {
  333. start: start,
  334. end: end
  335. };
  336. };
  337. MonthView.navigate = function (date, action) {
  338. switch (action) {
  339. case _constants.navigate.PREVIOUS:
  340. return dates.add(date, -1, 'month');
  341. case _constants.navigate.NEXT:
  342. return dates.add(date, 1, 'month');
  343. default:
  344. return date;
  345. }
  346. };
  347. MonthView.title = function (date, _ref5) {
  348. var localizer = _ref5.localizer;
  349. return localizer.format(date, 'monthHeaderFormat');
  350. };
  351. var _default = MonthView;
  352. exports.default = _default;
  353. module.exports = exports["default"];