214 lines
8.8 KiB
JavaScript
214 lines
8.8 KiB
JavaScript
import { __assign, __awaiter, __generator, __spreadArray } from "tslib";
|
||
import dayjs from 'dayjs';
|
||
import equal from 'fast-deep-equal';
|
||
import { Component, triggerEvent, getValueFromProps } from '../_util/simply';
|
||
import { defaultLocaleText, CalendarDefaultProps, } from './props';
|
||
import { getMonthListFromRange, getSelectionModeFromValue, renderCells, getScrollIntoViewId, } from './utils';
|
||
import mixinValue from '../mixins/value';
|
||
import { getInstanceBoundingClientRect } from '../_util/jsapi/get-instance-bounding-client-rect';
|
||
Component(CalendarDefaultProps, {
|
||
getInstance: function () {
|
||
if (this.$id) {
|
||
return my;
|
||
}
|
||
return this;
|
||
},
|
||
getBoundingClientRect: function (query) {
|
||
return __awaiter(this, void 0, void 0, function () {
|
||
return __generator(this, function (_a) {
|
||
switch (_a.label) {
|
||
case 0: return [4 /*yield*/, getInstanceBoundingClientRect(this.getInstance(), query)];
|
||
case 1: return [2 /*return*/, _a.sent()];
|
||
}
|
||
});
|
||
});
|
||
},
|
||
scrollIntoView: function (value) {
|
||
this.updateScrollIntoViewId(getScrollIntoViewId(value));
|
||
},
|
||
clickCell: function (e) {
|
||
var _a, _b;
|
||
var time = e.currentTarget.dataset.time;
|
||
var clickDate = dayjs(time.time);
|
||
if (time.disabled) {
|
||
return;
|
||
}
|
||
var value = this.getValue();
|
||
var selectionModeFromValue = getSelectionModeFromValue(value);
|
||
var selectionMode = (_b = (_a = getValueFromProps(this, 'selectionMode')) !== null && _a !== void 0 ? _a : selectionModeFromValue) !== null && _b !== void 0 ? _b : 'range';
|
||
if (selectionMode === 'range') {
|
||
if (Array.isArray(value)) {
|
||
if (value.length === 1) {
|
||
var current = value[0];
|
||
if (dayjs(clickDate.toDate().getTime()).isBefore(dayjs(current))) {
|
||
this.updateValue([clickDate.toDate().getTime()]);
|
||
}
|
||
else {
|
||
this.updateValue([value[0], clickDate.toDate().getTime()]);
|
||
}
|
||
}
|
||
else {
|
||
this.updateValue([clickDate.toDate().getTime()]);
|
||
}
|
||
}
|
||
else {
|
||
this.updateValue([clickDate.toDate().getTime()]);
|
||
}
|
||
}
|
||
else if (selectionMode === 'single') {
|
||
this.updateValue(clickDate.toDate().getTime());
|
||
}
|
||
},
|
||
setCurrentMonth: function (e) {
|
||
this.setData({ headerState: e.month });
|
||
},
|
||
measurement: function () {
|
||
var elementSize = this.data.elementSize;
|
||
// 组件如果内嵌在 slot 里, 一定会被渲染出来, 但是此时 cellHight 为 0
|
||
// 此时需要重新计算
|
||
if (!elementSize || elementSize.cellHight === 0) {
|
||
this.measurementFn();
|
||
}
|
||
},
|
||
measurementFn: function () {
|
||
var _this = this;
|
||
Promise.all([
|
||
this.getBoundingClientRect('.ant-calendar-body-container'),
|
||
this.getBoundingClientRect('.ant-calendar-cells'),
|
||
this.getBoundingClientRect('.ant-calendar-title-container'),
|
||
])
|
||
.then(function (_a) {
|
||
var bodyContainer = _a[0], cellContainer = _a[1], Title = _a[2];
|
||
// 滚动的时候 top 和 bottom 等尺寸会变
|
||
// 所以只能依赖 height 来计算
|
||
var paddingHeight = bodyContainer.height - cellContainer.height - Title.height;
|
||
var monthTitleHeight = Title.height + paddingHeight;
|
||
var cellHight = cellContainer.height / (_this.data.monthList[0].cells.length / 7);
|
||
_this.setData({
|
||
elementSize: {
|
||
monthTitleHeight: monthTitleHeight,
|
||
cellHight: cellHight,
|
||
paddingHeight: paddingHeight,
|
||
},
|
||
});
|
||
})
|
||
.catch(function () {
|
||
_this.setData({ elementSize: null });
|
||
});
|
||
},
|
||
// scroll 触发滚动之后需要重置 scrollIntoViewId
|
||
updateScrollIntoViewId: function (id) {
|
||
var _this = this;
|
||
this.setData({ scrollIntoViewId: id });
|
||
var timer = setTimeout(function () {
|
||
_this.setData({ scrollIntoViewId: '' });
|
||
clearTimeout(timer);
|
||
});
|
||
},
|
||
updateValue: function (newValue) {
|
||
triggerEvent(this, 'change', newValue);
|
||
if (!this.isControlled()) {
|
||
this.update(newValue);
|
||
}
|
||
},
|
||
updateData: function () {
|
||
var _a = getValueFromProps(this, [
|
||
'monthRange',
|
||
'localeText',
|
||
'weekStartsOn',
|
||
'onFormatter',
|
||
'onMonthFormatter',
|
||
]), monthRange = _a[0], plocaleText = _a[1], pweekStartsOn = _a[2], onFormatter = _a[3], onMonthFormatter = _a[4];
|
||
var localeText = Object.assign({}, defaultLocaleText, plocaleText);
|
||
var markItems = __spreadArray([], localeText.weekdayNames, true);
|
||
var weekStartsOn = pweekStartsOn;
|
||
if (weekStartsOn === 'Sunday') {
|
||
var item = markItems.pop();
|
||
if (item)
|
||
markItems.unshift(item);
|
||
}
|
||
var value = this.getValue();
|
||
var start = dayjs(monthRange === null || monthRange === void 0 ? void 0 : monthRange[0]).startOf('d');
|
||
var end = dayjs(monthRange === null || monthRange === void 0 ? void 0 : monthRange[1]).startOf('d');
|
||
var monthRangeList = getMonthListFromRange(start, end);
|
||
var monthList = monthRangeList.map(function (p) {
|
||
var cells = renderCells(p, weekStartsOn, value, localeText,
|
||
// 如果monthRange传入异常，用内置的时间范围
|
||
start.isAfter(end) || start.isSame(end)
|
||
? [monthRangeList[0], dayjs(monthRangeList[1]).endOf('month')]
|
||
: [start, end]);
|
||
if (onFormatter && typeof onFormatter === 'function') {
|
||
cells = cells.map(function (o) {
|
||
var _a;
|
||
var time = o.time, top = o.top, bottom = o.bottom, disabled = o.disabled, isSelectedBegin = o.isSelectedBegin, isSelectedEnd = o.isSelectedEnd, isSelected = o.isSelected, className = o.className, isRange = o.isRange;
|
||
var newState = (_a = onFormatter({
|
||
time: time,
|
||
top: top ? __assign({}, top) : undefined,
|
||
bottom: bottom ? __assign({}, bottom) : undefined,
|
||
disabled: disabled,
|
||
isSelectedBegin: isSelectedBegin,
|
||
isSelectedEnd: isSelectedEnd,
|
||
isSelected: isSelected,
|
||
className: className,
|
||
isRange: isRange,
|
||
}, value)) !== null && _a !== void 0 ? _a : {};
|
||
var result = __assign({}, o);
|
||
if (typeof newState === 'object') {
|
||
// 只允许修改的字段字段
|
||
['top', 'bottom', 'disabled', 'className'].forEach(function (key) {
|
||
if (key in newState) {
|
||
result[key] = newState[key];
|
||
}
|
||
});
|
||
}
|
||
return result;
|
||
});
|
||
}
|
||
var month = {
|
||
title: p.format(localeText.title),
|
||
className: '',
|
||
cells: cells,
|
||
};
|
||
if (onMonthFormatter && typeof onMonthFormatter === 'function') {
|
||
month = __assign(__assign({}, month), onMonthFormatter(p));
|
||
}
|
||
return month;
|
||
});
|
||
this.setData({ markItems: markItems, monthList: monthList });
|
||
},
|
||
}, {
|
||
elementSize: null,
|
||
markItems: [],
|
||
monthList: [],
|
||
headerState: 0,
|
||
scrollIntoViewId: '',
|
||
}, [mixinValue()], {
|
||
didMount: function () {
|
||
this.updateData();
|
||
this.measurementFn();
|
||
// 初始化默认值时，滚动到选中位置
|
||
var _a = getValueFromProps(this, [
|
||
'value',
|
||
'defaultValue',
|
||
]), value = _a[0], defaultValue = _a[1];
|
||
if (this.isControlled()) {
|
||
this.updateScrollIntoViewId(getScrollIntoViewId(value));
|
||
}
|
||
else {
|
||
defaultValue &&
|
||
this.updateScrollIntoViewId(getScrollIntoViewId(defaultValue));
|
||
}
|
||
},
|
||
didUpdate: function (prevProps, prevData) {
|
||
if (!this.isEqualValue(prevData)) {
|
||
// 滚动到已选的位置
|
||
var changedScrollIntoView = getValueFromProps(this, 'changedScrollIntoView');
|
||
changedScrollIntoView &&
|
||
this.updateScrollIntoViewId(getScrollIntoViewId(this.getValue()));
|
||
}
|
||
if (!equal(prevProps, this.props) || !this.isEqualValue(prevData)) {
|
||
this.updateData();
|
||
}
|
||
},
|
||
});
|