index.js 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
  1. import { __assign, __awaiter, __generator, __spreadArray } from "tslib";
  2. import dayjs from 'dayjs';
  3. import equal from 'fast-deep-equal';
  4. import { Component, triggerEvent, getValueFromProps } from '../_util/simply';
  5. import { defaultLocaleText, CalendarDefaultProps, } from './props';
  6. import { getMonthListFromRange, getSelectionModeFromValue, renderCells, getScrollIntoViewId, } from './utils';
  7. import mixinValue from '../mixins/value';
  8. import { getInstanceBoundingClientRect } from '../_util/jsapi/get-instance-bounding-client-rect';
  9. Component(CalendarDefaultProps, {
  10. getInstance: function () {
  11. if (this.$id) {
  12. return my;
  13. }
  14. return this;
  15. },
  16. getBoundingClientRect: function (query) {
  17. return __awaiter(this, void 0, void 0, function () {
  18. return __generator(this, function (_a) {
  19. switch (_a.label) {
  20. case 0: return [4 /*yield*/, getInstanceBoundingClientRect(this.getInstance(), query)];
  21. case 1: return [2 /*return*/, _a.sent()];
  22. }
  23. });
  24. });
  25. },
  26. scrollIntoView: function (value) {
  27. this.updateScrollIntoViewId(getScrollIntoViewId(value));
  28. },
  29. clickCell: function (e) {
  30. var _a, _b;
  31. var time = e.currentTarget.dataset.time;
  32. var clickDate = dayjs(time.time);
  33. if (time.disabled) {
  34. return;
  35. }
  36. var value = this.getValue();
  37. var selectionModeFromValue = getSelectionModeFromValue(value);
  38. var selectionMode = (_b = (_a = getValueFromProps(this, 'selectionMode')) !== null && _a !== void 0 ? _a : selectionModeFromValue) !== null && _b !== void 0 ? _b : 'range';
  39. if (selectionMode === 'range') {
  40. if (Array.isArray(value)) {
  41. if (value.length === 1) {
  42. var current = value[0];
  43. if (dayjs(clickDate.toDate().getTime()).isBefore(dayjs(current))) {
  44. this.updateValue([clickDate.toDate().getTime()]);
  45. }
  46. else {
  47. this.updateValue([value[0], clickDate.toDate().getTime()]);
  48. }
  49. }
  50. else {
  51. this.updateValue([clickDate.toDate().getTime()]);
  52. }
  53. }
  54. else {
  55. this.updateValue([clickDate.toDate().getTime()]);
  56. }
  57. }
  58. else if (selectionMode === 'single') {
  59. this.updateValue(clickDate.toDate().getTime());
  60. }
  61. },
  62. setCurrentMonth: function (e) {
  63. this.setData({ headerState: e.month });
  64. },
  65. measurement: function () {
  66. var elementSize = this.data.elementSize;
  67. // 组件如果内嵌在 slot 里, 一定会被渲染出来, 但是此时 cellHight 为 0
  68. // 此时需要重新计算
  69. if (!elementSize || elementSize.cellHight === 0) {
  70. this.measurementFn();
  71. }
  72. },
  73. measurementFn: function () {
  74. var _this = this;
  75. Promise.all([
  76. this.getBoundingClientRect('.ant-calendar-body-container'),
  77. this.getBoundingClientRect('.ant-calendar-cells'),
  78. this.getBoundingClientRect('.ant-calendar-title-container'),
  79. ])
  80. .then(function (_a) {
  81. var bodyContainer = _a[0], cellContainer = _a[1], Title = _a[2];
  82. // 滚动的时候 top 和 bottom 等尺寸会变
  83. // 所以只能依赖 height 来计算
  84. var paddingHeight = bodyContainer.height - cellContainer.height - Title.height;
  85. var monthTitleHeight = Title.height + paddingHeight;
  86. var cellHight = cellContainer.height / (_this.data.monthList[0].cells.length / 7);
  87. _this.setData({
  88. elementSize: {
  89. monthTitleHeight: monthTitleHeight,
  90. cellHight: cellHight,
  91. paddingHeight: paddingHeight,
  92. },
  93. });
  94. })
  95. .catch(function () {
  96. _this.setData({ elementSize: null });
  97. });
  98. },
  99. // scroll 触发滚动之后需要重置 scrollIntoViewId
  100. updateScrollIntoViewId: function (id) {
  101. var _this = this;
  102. this.setData({ scrollIntoViewId: id });
  103. var timer = setTimeout(function () {
  104. _this.setData({ scrollIntoViewId: '' });
  105. clearTimeout(timer);
  106. });
  107. },
  108. updateValue: function (newValue) {
  109. triggerEvent(this, 'change', newValue);
  110. if (!this.isControlled()) {
  111. this.update(newValue);
  112. }
  113. },
  114. updateData: function () {
  115. var _a = getValueFromProps(this, [
  116. 'monthRange',
  117. 'localeText',
  118. 'weekStartsOn',
  119. 'onFormatter',
  120. ]), monthRange = _a[0], plocaleText = _a[1], pweekStartsOn = _a[2], onFormatter = _a[3];
  121. var localeText = Object.assign({}, defaultLocaleText, plocaleText);
  122. var markItems = __spreadArray([], localeText.weekdayNames, true);
  123. var weekStartsOn = pweekStartsOn;
  124. if (weekStartsOn === 'Sunday') {
  125. var item = markItems.pop();
  126. if (item)
  127. markItems.unshift(item);
  128. }
  129. var value = this.getValue();
  130. var monthList = getMonthListFromRange(dayjs(monthRange === null || monthRange === void 0 ? void 0 : monthRange[0]), dayjs(monthRange === null || monthRange === void 0 ? void 0 : monthRange[1])).map(function (p) {
  131. var cells = renderCells(p, weekStartsOn, value, localeText);
  132. if (onFormatter && typeof onFormatter === 'function') {
  133. cells = cells.map(function (o) {
  134. var _a;
  135. var time = o.time, top = o.top, bottom = o.bottom, disabled = o.disabled, isSelectedBegin = o.isSelectedBegin, isSelectedEnd = o.isSelectedEnd, isSelected = o.isSelected;
  136. var newState = (_a = onFormatter({
  137. time: time,
  138. top: top ? __assign({}, top) : undefined,
  139. bottom: bottom ? __assign({}, bottom) : undefined,
  140. disabled: disabled,
  141. isSelectedBegin: isSelectedBegin,
  142. isSelectedEnd: isSelectedEnd,
  143. isSelected: isSelected,
  144. }, value)) !== null && _a !== void 0 ? _a : {};
  145. var result = __assign({}, o);
  146. if (typeof newState === 'object') {
  147. // 只允许修改三个字段
  148. ['top', 'bottom', 'disabled'].forEach(function (key) {
  149. if (key in newState) {
  150. result[key] = newState[key];
  151. }
  152. });
  153. }
  154. return result;
  155. });
  156. }
  157. return {
  158. title: p.format(localeText.title),
  159. cells: cells,
  160. };
  161. });
  162. this.setData({ markItems: markItems, monthList: monthList });
  163. },
  164. }, {
  165. elementSize: null,
  166. markItems: [],
  167. monthList: [],
  168. headerState: 0,
  169. scrollIntoViewId: '',
  170. }, [mixinValue()], {
  171. didMount: function () {
  172. this.updateData();
  173. this.measurementFn();
  174. // 初始化默认值时,滚动到选中位置
  175. var _a = getValueFromProps(this, [
  176. 'value',
  177. 'defaultValue',
  178. ]), value = _a[0], defaultValue = _a[1];
  179. if (this.isControlled()) {
  180. this.updateScrollIntoViewId(getScrollIntoViewId(value));
  181. }
  182. else {
  183. defaultValue &&
  184. this.updateScrollIntoViewId(getScrollIntoViewId(defaultValue));
  185. }
  186. },
  187. didUpdate: function (prevProps, prevData) {
  188. if (!this.isEqualValue(prevData)) {
  189. // 滚动到已选的位置
  190. var changedScrollIntoView = getValueFromProps(this, 'changedScrollIntoView');
  191. changedScrollIntoView &&
  192. this.updateScrollIntoViewId(getScrollIntoViewId(this.getValue()));
  193. }
  194. if (!equal(prevProps, this.props) || !this.isEqualValue(prevData)) {
  195. this.updateData();
  196. }
  197. },
  198. });