fastlion-amis
Version:
一种MIS页面生成工具
978 lines • 74.6 kB
JavaScript
"use strict";
/**
* @file DateRangePicker
* @description 自定义日期范围时间选择器组件
* @author fex
*/
Object.defineProperty(exports, "__esModule", { value: true });
exports.DateRangePicker = exports.advancedRanges = exports.availableRanges = exports.extractWrappedText = void 0;
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var moment_1 = (0, tslib_1.__importDefault)(require("moment"));
var react_dom_1 = require("react-dom");
var icons_1 = require("./icons");
var Overlay_1 = (0, tslib_1.__importDefault)(require("./Overlay"));
var Calendar_1 = (0, tslib_1.__importDefault)(require("./calendar/Calendar"));
var PopOver_1 = (0, tslib_1.__importDefault)(require("./PopOver"));
var PopUp_1 = (0, tslib_1.__importDefault)(require("./PopUp"));
var theme_1 = require("../theme");
var helper_1 = require("../utils/helper");
var locale_1 = require("../locale");
var Input_1 = (0, tslib_1.__importDefault)(require("./Input"));
var resize_sensor_1 = require("../utils/resize-sensor");
var lodash_1 = require("lodash");
var api_1 = require("../utils/api");
var Button_1 = (0, tslib_1.__importDefault)(require("./Button"));
var formula_1 = require("../utils/formula");
function extractWrappedText(str) {
var regex = /\$\{([^}]+)\}/g; // 正则表达式，匹配 ${...} 形式的文本
var matches = [];
var match;
while ((match = regex.exec(str)) !== null) {
matches.push(match[1]); // 将匹配到的内容添加到结果数组中
}
return matches;
}
exports.extractWrappedText = extractWrappedText;
exports.availableRanges = {
'today': {
label: 'Date.today',
startDate: function (now) {
return now.startOf('day');
},
endDate: function (now) {
return now;
}
},
'yesterday': {
label: 'Date.yesterday',
startDate: function (now) {
return now.add(-1, 'days').startOf('day');
},
endDate: function (now) {
return now.add(-1, 'days').endOf('day');
}
},
'tomorrow': {
label: 'Date.tomorrow',
startDate: function (now) {
return now.add(1, 'days').startOf('day');
},
endDate: function (now) {
return now.add(1, 'days').endOf('day');
}
},
'1dayago': {
label: 'DateRange.1dayago',
startDate: function (now) {
return now.add(-1, 'days');
},
endDate: function (now) {
return now;
}
},
// 兼容一下错误的用法
'1daysago': {
label: 'DateRange.1daysago',
startDate: function (now) {
return now.add(-1, 'days');
},
endDate: function (now) {
return now;
}
},
'7daysago': {
label: 'DateRange.7daysago',
startDate: function (now) {
return now.add(-7, 'days').startOf('day');
},
endDate: function (now) {
return now.add(-1, 'days').endOf('day');
}
},
'30daysago': {
label: 'DateRange.30daysago',
startDate: function (now) {
return now.add(-30, 'days').startOf('day');
},
endDate: function (now) {
return now.add(-1, 'days').endOf('day');
}
},
'90daysago': {
label: 'DateRange.90daysago',
startDate: function (now) {
return now.add(-90, 'days').startOf('day');
},
endDate: function (now) {
return now.add(-1, 'days').endOf('day');
}
},
'prevweek': {
label: 'DateRange.lastWeek',
startDate: function (now) {
return now.startOf('week').add(-1, 'weeks');
},
endDate: function (now) {
return now.startOf('week').add(-1, 'days').endOf('day');
}
},
'thisweek': {
label: 'DateRange.thisWeek',
startDate: function (now) {
return now.startOf('week');
},
endDate: function (now) {
return now.endOf('week');
}
},
'thismonth': {
label: 'DateRange.thisMonth',
startDate: function (now) {
return now.startOf('month');
},
endDate: function (now) {
return now.endOf('month');
}
},
'thisquarter': {
label: 'DateRange.thisQuarter',
startDate: function (now) {
return now.startOf('quarter');
},
endDate: function (now) {
return now.endOf('quarter');
}
},
'prevmonth': {
label: 'DateRange.lastMonth',
startDate: function (now) {
return now.startOf('month').add(-1, 'month');
},
endDate: function (now) {
return now.startOf('month').add(-1, 'day').endOf('day');
}
},
'prevquarter': {
label: 'DateRange.lastQuarter',
startDate: function (now) {
return now.startOf('quarter').add(-1, 'quarter');
},
endDate: function (now) {
return now.startOf('quarter').add(-1, 'day').endOf('day');
}
},
'thisyear': {
label: 'DateRange.thisYear',
startDate: function (now) {
return now.startOf('year');
},
endDate: function (now) {
return now.endOf('year');
}
},
'lastYear': {
label: 'DateRange.lastYear',
startDate: function (now) {
return now.startOf('year').add(-1, 'year');
},
endDate: function (now) {
return now.endOf('year').add(-1, 'year').endOf('day');
}
},
// 兼容一下之前的用法 'lastYear'
'prevyear': {
label: 'DateRange.lastYear',
startDate: function (now) {
return now.startOf('year').add(-1, 'year');
},
endDate: function (now) {
return now.endOf('year').add(-1, 'year').endOf('day');
}
},
};
exports.advancedRanges = [
{
regexp: /^(\d+)hoursago$/,
resolve: function (__, _, hours) {
return {
label: __('DateRange.hoursago', { hours: hours }),
startDate: function (now) {
return now.add(-hours, 'hours').startOf('hour');
},
endDate: function (now) {
return now.add(-1, 'hours').endOf('hours');
}
};
}
},
{
regexp: /^(\d+)hourslater$/,
resolve: function (__, _, hours) {
return {
label: __('DateRange.hourslater', { hours: hours }),
startDate: function (now) {
return now.startOf('hour');
},
endDate: function (now) {
return now.add(hours, 'hours').endOf('hour');
}
};
}
},
{
regexp: /^(\d+)daysago$/,
resolve: function (__, _, days) {
return {
label: __('DateRange.daysago', { days: days }),
startDate: function (now) {
return now.add(-days, 'days').startOf('day');
},
endDate: function (now) {
return now.add(-1, 'days').endOf('day');
}
};
}
},
{
regexp: /^(\d+)dayslater$/,
resolve: function (__, _, days) {
return {
label: __('DateRange.dayslater', { days: days }),
startDate: function (now) {
return now.startOf('day');
},
endDate: function (now) {
return now.add(days, 'days').endOf('day');
}
};
}
},
{
regexp: /^(\d+)weeksago$/,
resolve: function (__, _, weeks) {
return {
label: __('DateRange.weeksago', { weeks: weeks }),
startDate: function (now) {
return now.startOf('week').add(-weeks, 'weeks');
},
endDate: function (now) {
return now.startOf('week').add(-1, 'days').endOf('day');
}
};
}
},
{
regexp: /^(\d+)weekslater$/,
resolve: function (__, _, weeks) {
return {
label: __('DateRange.weekslater', { weeks: weeks }),
startDate: function (now) {
return now.startOf('week');
},
endDate: function (now) {
return now.startOf('week').add(weeks, 'weeks').endOf('day');
}
};
}
},
{
regexp: /^(\d+)monthsago$/,
resolve: function (__, _, months) {
return {
label: __('DateRange.monthsago', { months: months }),
startDate: function (now) {
return now.startOf('months').add(-months, 'months');
},
endDate: function (now) {
return now.startOf('month').add(-1, 'days').endOf('day');
}
};
}
},
{
regexp: /^(\d+)monthslater$/,
resolve: function (__, _, months) {
return {
label: __('DateRange.monthslater', { months: months }),
startDate: function (now) {
return now.startOf('month');
},
endDate: function (now) {
return now.startOf('month').add(months, 'months').endOf('day');
}
};
}
},
{
regexp: /^(\d+)quartersago$/,
resolve: function (__, _, quarters) {
return {
label: __('DateRange.quartersago', { quarters: quarters }),
startDate: function (now) {
return now.startOf('quarters').add(-quarters, 'quarters');
},
endDate: function (now) {
return now.startOf('quarter').add(-1, 'days').endOf('day');
}
};
}
},
{
regexp: /^(\d+)quarterslater$/,
resolve: function (__, _, quarters) {
return {
label: __('DateRange.quarterslater', { quarters: quarters }),
startDate: function (now) {
return now.startOf('quarter');
},
endDate: function (now) {
return now.startOf('quarter').add(quarters, 'quarters').endOf('day');
}
};
}
},
{
regexp: /^(\d+)yearsago$/,
resolve: function (__, _, years) {
return {
label: __('DateRange.yearsago', { years: years }),
startDate: function (now) {
return now.startOf('years').add(-years, 'years');
},
endDate: function (now) {
return now.startOf('year').add(-1, 'days').endOf('day');
}
};
}
},
{
regexp: /^(\d+)yearslater$/,
resolve: function (__, _, years) {
return {
label: __('DateRange.yearslater', { years: years }),
startDate: function (now) {
return now.startOf('year');
},
endDate: function (now) {
return now.startOf('year').add(years, 'years').endOf('day');
}
};
}
}
];
var dateFormats = {
Y: { format: 'YYYY' },
Q: { format: 'YYYY [Q]Q' },
M: { format: 'YYYY-MM' },
D: { format: 'YYYY-MM-DD' }
};
var timeFormats = {
h: { format: 'HH' },
H: { format: 'HH' },
m: { format: 'mm' },
s: { format: 'ss' },
S: { format: 'ss' }
};
var DateRangePicker = /** @class */ (function (_super) {
(0, tslib_1.__extends)(DateRangePicker, _super);
function DateRangePicker(props) {
var _this = _super.call(this, props) || this;
_this.nextMonth = (0, moment_1.default)().add(1, 'months').startOf('day');
_this.currentMonth = (0, moment_1.default)().startOf('day');
_this.handleOutClick = function (e) {
if (!e.target ||
!_this.dom.current ||
_this.dom.current.contains(e.target) ||
!_this.calendarRef.current ||
_this.calendarRef.current.contains(e.target)) {
return;
}
if (_this.state.isOpened) {
e.preventDefault();
_this.close(true);
}
};
_this.handleMobileChange = function (data, callback) {
_this.setState({
startDate: data.startDate,
endDate: data.endDate
}, callback);
};
_this.selectShortcut = function (shortcut) {
var _a = _this.props, closeOnSelect = _a.closeOnSelect, minDate = _a.minDate, maxDate = _a.maxDate;
var now = (0, moment_1.default)();
var startDate = shortcut.startDate(now.clone());
var endDate = shortcut.endDate(now.clone());
_this.setState({
startDate: minDate && (minDate === null || minDate === void 0 ? void 0 : minDate.isValid())
? moment_1.default.max(startDate, minDate)
: startDate,
endDate: maxDate && (maxDate === null || maxDate === void 0 ? void 0 : maxDate.isValid()) ? moment_1.default.min(maxDate, endDate) : endDate
}, closeOnSelect ? _this.confirm : helper_1.noop);
};
_this.renderRanges = function (ranges) {
if (!ranges)
return null;
var _a = _this.props, ns = _a.classPrefix, data = _a.data, format = _a.format, store = _a.store, type = _a.type, inputFormat = _a.inputFormat, name = _a.name;
var rangeArr;
if (typeof ranges === 'string') {
rangeArr = ranges.split(',');
}
else {
rangeArr = ranges;
}
var __ = _this.props.translate;
return (react_1.default.createElement("div", { style: { paddingBottom: '5px' } },
react_1.default.createElement("ul", { className: ns + "DateRangePicker-rangers " + (type === 'input-datetime-range' ? 'is-datetime-range' : ''), style: { height: (0, helper_1.isMobile)() ? 'unset' : (type === null || type === void 0 ? void 0 : type.includes('time')) ? '338px' : '291px' } }, rangeArr.map(function (item) {
var _a, _b, _c;
if (!item) {
return null;
}
var range = {};
if (typeof item === 'string') {
if (exports.availableRanges[item]) {
range = exports.availableRanges[item];
if (!range)
return null;
range.key = item;
}
else {
// 通过正则尝试匹配
for (var i = 0, len = exports.advancedRanges.length; i < len; i++) {
var value = exports.advancedRanges[i];
var m = value.regexp.exec(item);
if (m) {
range = value.resolve.apply(item, (0, tslib_1.__spreadArray)([__], m, true));
range.key = item;
}
}
}
}
else if (item.startDate &&
item.endDate) {
var shortcutRaw_1 = (0, tslib_1.__assign)({}, item);
range = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, item), { startDate: function () {
var startDate = (0, formula_1.isExpression)(shortcutRaw_1.startDate)
? (0, moment_1.default)(formula_1.FormulaExec['formula'](shortcutRaw_1.startDate, data), format)
: typeof shortcutRaw_1.startDate === 'string'
? (0, moment_1.default)(shortcutRaw_1.startDate, format)
: shortcutRaw_1.startDate;
return startDate &&
moment_1.default.isMoment(startDate) &&
startDate.isValid()
? startDate
: item.startDate;
}, endDate: function () {
var endDate = (0, formula_1.isExpression)(shortcutRaw_1.endDate)
? (0, moment_1.default)(formula_1.FormulaExec['formula'](shortcutRaw_1.endDate, data), format)
: typeof shortcutRaw_1.endDate === 'string'
? (0, moment_1.default)(shortcutRaw_1.endDate, format)
: shortcutRaw_1.endDate;
return endDate && moment_1.default.isMoment(endDate) && endDate.isValid()
? endDate
: item.endDate;
} });
}
else if (item.date) {
var shortcutRaw_2 = (0, tslib_1.__assign)({}, item);
var compareFields = extractWrappedText(((_b = (_a = shortcutRaw_2.date) === null || _a === void 0 ? void 0 : _a.split('DATEMODIFY(')) === null || _b === void 0 ? void 0 : _b[1]) || '');
var field_1 = '';
if (compareFields === null || compareFields === void 0 ? void 0 : compareFields.length) {
field_1 = compareFields[0];
}
else {
return null;
}
var compareValue = (0, helper_1.getPropValue)({ data: (name === null || name === void 0 ? void 0 : name.includes('.')) ? (_c = store.data) === null || _c === void 0 ? void 0 : _c[name.split('.')[0]] : store.data, name: field_1 });
var tiemsArr_1 = [];
if ((0, lodash_1.isString)(compareValue)) {
tiemsArr_1 = compareValue.split(',');
}
range = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, item), { startDate: function () {
var _a, _b, _c, _d, _e;
var startDate = (0, moment_1.default)(formula_1.FormulaExec['formula'](shortcutRaw_2.date.replace(field_1, (tiemsArr_1 === null || tiemsArr_1 === void 0 ? void 0 : tiemsArr_1[0]) ? 'rangeStart' : (0, lodash_1.now)()), { rangeStart: (tiemsArr_1 === null || tiemsArr_1 === void 0 ? void 0 : tiemsArr_1[0]) || '' }), format);
if (type === 'input-datetime-range') {
var nowDate = startDate.format(inputFormat);
if (((_a = nowDate.split(' ')) === null || _a === void 0 ? void 0 : _a[0]) && ((_c = (_b = tiemsArr_1 === null || tiemsArr_1 === void 0 ? void 0 : tiemsArr_1[0]) === null || _b === void 0 ? void 0 : _b.split(' ')) === null || _c === void 0 ? void 0 : _c[1])) {
var newDate = [(_d = nowDate.split(' ')) === null || _d === void 0 ? void 0 : _d[0], (_e = tiemsArr_1 === null || tiemsArr_1 === void 0 ? void 0 : tiemsArr_1[0].split(' ')) === null || _e === void 0 ? void 0 : _e[1]].join(' ');
return (0, moment_1.default)(newDate);
}
}
return startDate &&
moment_1.default.isMoment(startDate) &&
startDate.isValid()
? startDate
: item.date;
}, endDate: function () {
var _a, _b, _c, _d, _e;
var endDate = (0, moment_1.default)(formula_1.FormulaExec['formula'](shortcutRaw_2.date.replace(field_1, (tiemsArr_1 === null || tiemsArr_1 === void 0 ? void 0 : tiemsArr_1[1]) ? 'rangeEnd' : (0, lodash_1.now)()), { rangeEnd: (tiemsArr_1 === null || tiemsArr_1 === void 0 ? void 0 : tiemsArr_1[1]) || '' }), format);
if (type === 'input-datetime-range') {
var nowDate = endDate.format(inputFormat);
if (((_a = nowDate.split(' ')) === null || _a === void 0 ? void 0 : _a[0]) && ((_c = (_b = tiemsArr_1 === null || tiemsArr_1 === void 0 ? void 0 : tiemsArr_1[1]) === null || _b === void 0 ? void 0 : _b.split(' ')) === null || _c === void 0 ? void 0 : _c[1])) {
var newDate = [(_d = nowDate.split(' ')) === null || _d === void 0 ? void 0 : _d[0], (_e = tiemsArr_1 === null || tiemsArr_1 === void 0 ? void 0 : tiemsArr_1[1].split(' ')) === null || _e === void 0 ? void 0 : _e[1]].join(' ');
return (0, moment_1.default)(newDate);
}
}
return endDate && moment_1.default.isMoment(endDate) && endDate.isValid()
? endDate
: item.date;
} });
}
if (Object.keys(range).length) {
return (react_1.default.createElement("li", { className: ns + "DateRangePicker-ranger", onClick: function () { return _this.selectShortcut(range); }, key: range.key || range.label },
react_1.default.createElement("a", null, __(range.label))));
}
else {
return null;
}
}))));
};
_this.endInputChange = function (e) {
var _a = _this.props, onChange = _a.onChange, inputFormat = _a.inputFormat, utc = _a.utc;
var value = e.currentTarget.value;
_this.setState({ endInputValue: value });
if (value === '') {
onChange('');
}
else {
var newDate = _this.getEndDateByDuration((0, moment_1.default)(value, inputFormat));
_this.setState({ endDate: newDate });
}
};
// 根据 duration 修复起始时间
_this.getStartDateByDuration = function (newValue) {
var _a, _b;
var _c = _this.props, minDuration = _c.minDuration, maxDuration = _c.maxDuration, type = _c.type;
var _d = _this.state, endDate = _d.endDate, editState = _d.editState;
if (!endDate) {
return newValue;
}
// 时间范围必须统一成同一天，不然会不一致
if (type === 'input-time-range' && endDate) {
newValue.set({
year: endDate.year(),
month: endDate.month(),
date: endDate.date()
});
}
if (minDuration &&
((_a = newValue.isBefore) === null || _a === void 0 ? void 0 : _a.call(newValue, endDate.clone().subtract(minDuration)))) {
newValue = endDate.clone().subtract(minDuration);
}
if (maxDuration &&
((_b = newValue.isAfter) === null || _b === void 0 ? void 0 : _b.call(newValue, endDate.clone().subtract(maxDuration)))) {
newValue = endDate.clone().subtract(maxDuration);
}
return newValue;
};
// 根据 duration 修复结束时间
_this.getEndDateByDuration = function (newValue) {
var _a, _b, _c;
var _d = _this.props, minDuration = _d.minDuration, maxDuration = _d.maxDuration, type = _d.type, maxDate = _d.maxDate;
var _e = _this.state, startDate = _e.startDate, endDate = _e.endDate, editState = _e.editState;
if (!startDate) {
return newValue;
}
// 时间范围必须统一成同一天，不然会不一致
if (type === 'input-time-range' && startDate) {
newValue.set({
year: startDate.year(),
month: startDate.month(),
date: startDate.date()
});
}
if (minDuration && ((_a = newValue.isBefore) === null || _a === void 0 ? void 0 : _a.call(newValue, startDate.clone().add(minDuration)))) {
newValue = startDate.clone().add(minDuration);
}
if (maxDuration && ((_b = newValue.isAfter) === null || _b === void 0 ? void 0 : _b.call(newValue, startDate.clone().add(maxDuration)))) {
newValue = startDate.clone().add(maxDuration);
}
if (maxDate && newValue && ((_c = newValue.isAfter) === null || _c === void 0 ? void 0 : _c.call(newValue, maxDate, 'second'))) {
newValue = maxDate;
}
return newValue;
};
_this.openStart = function (e) {
e.stopPropagation();
if (_this.props.disabled) {
return;
}
_this.setState({
isOpened: true,
editState: 'start'
});
};
_this.openEnd = function (e) {
e.stopPropagation();
if (_this.props.disabled) {
return;
}
_this.setState({
isOpened: true,
editState: 'end',
endDateOpenedFirst: true
});
};
// 主要用于处理时间的情况
_this.handleTimeStartChange = function (newValue, isHandleChange) {
var _a;
var _b = _this.props, embed = _b.embed, inputFormat = _b.inputFormat, minDuration = _b.minDuration, maxDuration = _b.maxDuration, minDate = _b.minDate;
var _c = _this.state, startDate = _c.startDate, endDate = _c.endDate;
// 时间范围必须统一成同一天，不然会不一致
if (endDate) {
newValue.set({
year: endDate.year(),
month: endDate.month(),
date: endDate.date()
});
}
if (minDate && newValue && ((_a = newValue.isBefore) === null || _a === void 0 ? void 0 : _a.call(newValue, minDate, 'second'))) {
newValue = minDate;
}
_this.setState({
startDate: newValue,
startInputValue: newValue.format(inputFormat)
}, function () {
(embed || (0, helper_1.isMobile)()) && _this.confirm(isHandleChange);
});
};
_this.handleTimeEndChange = function (newValue, isHandleChange) {
var _a, _b, _c;
var _d = _this.props, embed = _d.embed, inputFormat = _d.inputFormat, minDuration = _d.minDuration, maxDuration = _d.maxDuration, maxDate = _d.maxDate;
var _e = _this.state, startDate = _e.startDate, endDate = _e.endDate;
if (startDate) {
newValue.set({
year: startDate.year(),
month: startDate.month(),
date: startDate.date()
});
}
if (maxDate && newValue && ((_a = newValue.isAfter) === null || _a === void 0 ? void 0 : _a.call(newValue, maxDate, 'second'))) {
newValue = maxDate;
}
if (startDate &&
minDuration &&
((_b = newValue.isBefore) === null || _b === void 0 ? void 0 : _b.call(newValue, startDate.clone().add(minDuration)))) {
newValue = startDate.clone().add(minDuration);
}
if (startDate &&
maxDuration &&
((_c = newValue.isAfter) === null || _c === void 0 ? void 0 : _c.call(newValue, startDate.clone().add(maxDuration)))) {
newValue = startDate.clone().add(maxDuration);
}
_this.setState({
endDate: newValue,
endInputValue: newValue.format(inputFormat)
}, function () {
(embed || (0, helper_1.isMobile)()) && _this.confirm(isHandleChange);
});
};
_this.handleDateChange = function (newValue, isHandleChange) {
var editState = _this.state.editState;
if (editState === 'start') {
_this.handleStartDateChange(newValue, isHandleChange);
}
else if (editState === 'end') {
_this.handelEndDateChange(newValue, isHandleChange);
}
};
/**
* @param {Moment} newValue 当前选择的日期时间值
* @param {ViewMode=} subControlViewMode 子选择控件的类型，可选参数（'time'），用于区分datetime选择器的触发控件
*/
_this.handleStartDateChange = function (newValue, isHandleChange) {
var _a;
var _b = _this.props, minDate = _b.minDate, inputFormat = _b.inputFormat, type = _b.type;
var _c = _this.state, startDate = _c.startDate, endDateOpenedFirst = _c.endDateOpenedFirst, timeFormat = _c.curTimeFormat;
if (minDate && ((_a = newValue.isBefore) === null || _a === void 0 ? void 0 : _a.call(newValue, minDate))) {
newValue = minDate;
}
var date = _this.filterDate(newValue, {
type: 'start',
originValue: startDate || minDate,
timeFormat: timeFormat,
autoInitDefaultValue: !!timeFormat && newValue && !startDate
});
var newState = {
startDate: date,
startInputValue: date.format(inputFormat)
};
if (!(0, helper_1.isMobile)()) {
// 这些没有时间的选择点第一次后第二次就是选结束时间
if (!endDateOpenedFirst &&
(type === 'input-date-range' ||
type === 'input-year-range' ||
type === 'input-quarter-range' ||
type === 'input-month-range')) {
newState.editState = 'end';
}
}
_this.setState(newState, function () { (0, helper_1.isMobile)() && _this.confirm(isHandleChange); });
};
/**
* @param {Moment} newValue 当前选择的日期时间值
* @param {string=} subControlViewMode 子选择控件的类型的类型，可选参数（'time'），用于区分datetime选择器的触发控件
*/
_this.handelEndDateChange = function (newValue, isHandleChange) {
var _a = _this.props, embed = _a.embed, inputFormat = _a.inputFormat, type = _a.type;
var _b = _this.state, startDate = _b.startDate, endDate = _b.endDate, endDateOpenedFirst = _b.endDateOpenedFirst, timeFormat = _b.curTimeFormat;
newValue = _this.getEndDateByDuration(newValue);
var editState = endDateOpenedFirst ? 'start' : 'end';
var date = _this.filterDate(newValue, {
type: 'end',
originValue: endDate,
timeFormat: timeFormat,
autoInitDefaultValue: !!timeFormat && newValue && !endDate
});
_this.setState({
endDate: date,
endInputValue: date.format(inputFormat)
}, function () {
(embed || (0, helper_1.isMobile)()) && _this.confirm(isHandleChange);
});
if (type !== 'input-datetime-range' && !(0, helper_1.isMobile)()) {
_this.setState({ editState: editState });
}
};
// 手动控制输入时间
_this.startInputChange = function (e) {
var _a = _this.props, onChange = _a.onChange, inputFormat = _a.inputFormat, utc = _a.utc;
var value = e.currentTarget.value;
_this.setState({ startInputValue: value });
if (value === '') {
onChange('');
}
else {
var newDate = _this.getStartDateByDuration((0, moment_1.default)(value, inputFormat));
_this.setState({ startDate: newDate });
}
};
/** 获取宽度类型变量的值 */
_this.getValidWidthValue = function (element, propsName) {
if (!element || !propsName) {
return 0;
}
var propsValue = parseInt((0, resize_sensor_1.getComputedStyle)(element, (0, lodash_1.kebabCase)(propsName)), 10);
return isNaN(propsValue) ? 0 : propsValue;
};
_this.renderActiveCursor = function () {
var _a, _b, _c, _d;
var cx = _this.props.classnames;
var _e = _this.state, editState = _e.editState, isFocused = _e.isFocused;
var cursorWidth = 0;
var cursorLeft = 0;
var parentNode = (_a = _this === null || _this === void 0 ? void 0 : _this.dom) === null || _a === void 0 ? void 0 : _a.current;
var startInputNode = (_b = _this === null || _this === void 0 ? void 0 : _this.startInputRef) === null || _b === void 0 ? void 0 : _b.current;
var endInputNode = (_c = _this === null || _this === void 0 ? void 0 : _this.endInputRef) === null || _c === void 0 ? void 0 : _c.current;
var separatorNode = (_d = _this === null || _this === void 0 ? void 0 : _this.separatorRef) === null || _d === void 0 ? void 0 : _d.current;
if (parentNode && startInputNode && endInputNode && separatorNode) {
if (editState === 'start') {
var paddingWidth = _this.getValidWidthValue(parentNode, 'paddingLeft');
cursorLeft = paddingWidth;
cursorWidth = startInputNode.offsetWidth;
}
else if (editState === 'end') {
var separatorWidth = separatorNode.offsetWidth +
_this.getValidWidthValue(parentNode, 'paddingLeft') +
_this.getValidWidthValue(parentNode, 'marginLeft') +
_this.getValidWidthValue(parentNode, 'paddingRight') +
_this.getValidWidthValue(parentNode, 'marginRight');
cursorLeft = startInputNode.offsetWidth + separatorWidth;
cursorWidth = endInputNode.offsetWidth;
}
else {
cursorWidth = 0;
}
}
return (react_1.default.createElement("div", { className: cx('DateRangePicker-activeCursor', { isFocused: isFocused }), style: {
position: 'absolute',
left: cursorLeft,
width: cursorWidth
} }));
};
//记录当前时间范围展示的时间，用于控制点击上一年，上一个月等
_this.viewStartYear = undefined;
_this.viewStartMonth = undefined;
_this.viewEndYear = undefined;
_this.viewEndMonth = undefined;
_this.changeCurrentShowTime = function (isStart, isYear, value) {
if (isStart) {
isYear ? _this.viewStartYear = value : _this.viewStartMonth = value;
}
else {
isYear ? _this.viewEndYear = value : _this.viewEndMonth = value;
}
};
_this.renderCalendar = function () {
var _a;
var _b = _this.props, ns = _b.classPrefix, cx = _b.classnames, dateFormat = _b.dateFormat, timeFormat = _b.timeFormat, inputFormat = _b.inputFormat, ranges = _b.ranges, locale = _b.locale, embed = _b.embed, _c = _b.viewMode, viewMode = _c === void 0 ? 'days' : _c, type = _b.type;
var __ = _this.props.translate;
var mobileUI = (0, helper_1.isMobile)();
var _d = _this.state, startDate = _d.startDate, endDate = _d.endDate, editState = _d.editState;
var isDateTimeRange = type === 'input-datetime-range';
// timeRange需要单独选择范围
var isTimeRange = isDateTimeRange || viewMode === 'time';
var isDateRange = type === 'input-date-range';
var isConfirmBtnDisbaled = (isTimeRange && editState === 'start' && !startDate) ||
(isTimeRange && editState === 'end' && !endDate) ||
(startDate && ((_a = endDate === null || endDate === void 0 ? void 0 : endDate.isBefore) === null || _a === void 0 ? void 0 : _a.call(endDate, _this.state.startDate))) ||
/** 日期范围选择之后会立即切换面板，所以开始/结束日期任意一个不合法就不允许更新数据 */
(isDateRange &&
(!startDate ||
!endDate ||
!(startDate === null || startDate === void 0 ? void 0 : startDate.isValid()) ||
!(endDate === null || endDate === void 0 ? void 0 : endDate.isValid())));
return (react_1.default.createElement("div", { className: cx(ns + "DateRangePicker-wrap", { 'is-mobile': (0, helper_1.isMobile)() }), ref: _this.calendarRef },
react_1.default.createElement("div", { className: 'dateRange-body' },
_this.renderRanges(ranges),
react_1.default.createElement("div", { className: 'dateRangePicker' },
react_1.default.createElement("div", { className: cx(ns + "DateRangePicker-picker-wrap", {
'is-vertical': embed
}) },
(!isTimeRange ||
(editState === 'start' && !embed) ||
(mobileUI && isTimeRange)) && (react_1.default.createElement(Calendar_1.default, { className: ns + "DateRangePicker-start", value: startDate,
// 区分的原因是 time-range 左侧就只能选起始时间，而其它都能在左侧同时同时选择起始和结束
// TODO: 后续得把 time-range 代码拆分出来
onChange: isDateTimeRange
? _this.handleStartDateChange
: viewMode === 'time'
? _this.handleTimeStartChange
: _this.handleDateChange, requiredConfirm: false, dateFormat: dateFormat, inputFormat: inputFormat, timeFormat: timeFormat, isValidDate: _this.checkStartIsValidDate, viewMode: viewMode, input: false, onClose: _this.close, renderDay: _this.renderDay, renderQuarter: _this.renderQuarter, locale: locale, translate: __, initial: _this.props.initial, timeRangeHeader: __('DateRange.startTime'), viewStartYear: _this.viewStartYear, viewEndYear: _this.viewEndYear, viewStartMonth: _this.viewStartMonth, viewEndMonth: _this.viewEndMonth, changeCurrentShowTime: _this.changeCurrentShowTime })),
(!isTimeRange ||
(editState === 'end' && !embed) ||
(mobileUI && isTimeRange)) && (react_1.default.createElement(Calendar_1.default, { className: ns + "DateRangePicker-end", value: endDate, onChange: isDateTimeRange
? _this.handelEndDateChange
: viewMode === 'time'
? _this.handleTimeEndChange
: _this.handleDateChange, requiredConfirm: false, dateFormat: dateFormat, inputFormat: inputFormat, timeFormat: timeFormat, viewDate: _this.state.endDate ? _this.state.endDate : isDateTimeRange ? _this.currentMonth : _this.nextMonth, isEndDate: true, isValidDate: _this.checkEndIsValidDate, viewMode: viewMode, input: false, onClose: _this.close, renderDay: _this.renderDay, renderQuarter: _this.renderQuarter, locale: locale, translate: __, initial: _this.props.initial, timeRangeHeader: __('DateRange.endTime'), viewStartYear: _this.viewStartYear, viewEndYear: _this.viewEndYear, viewStartMonth: _this.viewStartMonth, viewEndMonth: _this.viewEndMonth, changeCurrentShowTime: _this.changeCurrentShowTime }))),
embed || mobileUI ? null : (react_1.default.createElement("div", { key: "button", className: ns + "DateRangePicker-actions" },
react_1.default.createElement(Button_1.default, { size: "sm", onClick: function () { return _this.close(true); } }, __('cancel')),
react_1.default.createElement(Button_1.default, { level: "primary", size: "sm", className: cx('m-l-sm'), disabled: isConfirmBtnDisbaled, onClick: function () { _this.confirm(); _this.handleBlur(); } }, __('confirm'))))))));
};
_this.handleTimeClick = function (status) {
var editState = _this.state.editState;
if (editState === status)
return;
_this.setState({ editState: status });
};
_this.showTimes = function () {
var __ = _this.props.translate;
var _a = _this.state, startInputValue = _a.startInputValue, endInputValue = _a.endInputValue, editState = _a.editState;
return (react_1.default.createElement("div", { className: 'selected-date-show-box' },
react_1.default.createElement("div", { onClick: function () { return _this.handleTimeClick('start'); }, className: "show-start show-date-item " + (editState === 'start' ? 'actived' : '') + " " + (startInputValue ? '' : 'empty') }, startInputValue || __('DateRange.startTime')),
react_1.default.createElement("div", { onClick: function () { return _this.handleTimeClick('end'); }, className: "show-end show-date-item " + (editState === 'end' ? 'actived' : '') + " " + (endInputValue ? '' : 'empty') }, endInputValue || __('DateRange.endTime'))));
};
_this.renderMobileRange = function () {
var _a = _this.props, timeFormat = _a.timeFormat, inputFormat = _a.inputFormat, dateFormat = _a.dateFormat, ranges = _a.ranges, viewMode = _a.viewMode, type = _a.type, locale = _a.locale, __ = _a.translate;
var _b = _this.state, startDate = _b.startDate, endDate = _b.endDate, editState = _b.editState;
var isDateTimeRange = type === 'input-datetime-range';
return react_1.default.createElement(react_1.default.Fragment, null,
_this.renderRanges(ranges),
_this.showTimes(),
react_1.default.createElement("div", { key: editState }, editState === 'start' ? react_1.default.createElement(Calendar_1.default, { value: startDate,
// 区分的原因是 time-range 左侧就只能选起始时间，而其它都能在左侧同时同时选择起始和结束
// TODO: 后续得把 time-range 代码拆分出来
onChange: isDateTimeRange
? _this.handleStartDateChange
: viewMode === 'time'
? _this.handleTimeStartChange
: _this.handleDateChange, requiredConfirm: !!(dateFormat && timeFormat), dateFormat: dateFormat, inputFormat: inputFormat, timeFormat: timeFormat, isValidDate: _this.checkStartIsValidDate, viewMode: viewMode, input: false, onClose: _this.close, locale: locale, translate: __, useMobileUI: true, initial: _this.props.initial, type: type }) :
react_1.default.createElement(Calendar_1.default, { value: endDate, onChange: isDateTimeRange
? _this.handelEndDateChange
: viewMode === 'time'
? _this.handleTimeEndChange
: _this.handleDateChange, requiredConfirm: false, dateFormat: dateFormat, inputFormat: inputFormat, timeFormat: timeFormat, viewDate: _this.state.endDate ? _this.state.endDate : _this.nextMonth, isEndDate: true, isValidDate: _this.checkEndIsValidDate, viewMode: viewMode, input: false, onClose: _this.close, renderDay: _this.renderDay, renderQuarter: _this.renderQuarter, locale: locale, translate: __, useMobileUI: true, initial: _this.props.initial, type: type })));
};
_this.open = _this.open.bind(_this);
_this.close = _this.close.bind(_this);
_this.handleFocus = _this.handleFocus.bind(_this);
_this.handleBlur = _this.handleBlur.bind(_this);
_this.checkStartIsValidDate = _this.checkStartIsValidDate.bind(_this);
_this.checkEndIsValidDate = _this.checkEndIsValidDate.bind(_this);
_this.confirm = _this.confirm.bind(_this);
_this.clearValue = _this.clearValue.bind(_this);
_this.dom = react_1.default.createRef();
_this.startInputRef = react_1.default.createRef();
_this.endInputRef = react_1.default.createRef();
_this.separatorRef = react_1.default.createRef();
_this.calendarRef = react_1.default.createRef();
_this.handleClick = _this.handleClick.bind(_this);
_this.handlePopOverClick = _this.handlePopOverClick.bind(_this);
_this.renderDay = _this.renderDay.bind(_this);
_this.renderQuarter = _this.renderQuarter.bind(_this);
_this.handleMobileChange = _this.handleMobileChange.bind(_this);
var _a = _this.props, format = _a.format, joinValues = _a.joinValues, delimiter = _a.delimiter, value = _a.value, inputFormat = _a.inputFormat, dateFormat = _a.dateFormat, timeFormat = _a.timeFormat;
_this.getTarget = _this.getTarget.bind(_this);
var _b = DateRangePicker.unFormatValue(value, format, joinValues, delimiter), startDate = _b.startDate, endDate = _b.endDate;
var curDateFormat = dateFormat !== null && dateFormat !== void 0 ? dateFormat : '';
var curTimeFormat = timeFormat !== null && timeFormat !== void 0 ? timeFormat : '';
var curTimeFormatArr = [];
!dateFormat &&
Object.keys(dateFormats).forEach(function (item) {
if (inputFormat === null || inputFormat === void 0 ? void 0 : inputFormat.includes(item)) {
curDateFormat = dateFormats[item].format;
}
});
!timeFormat &&
Object.keys(timeFormats).forEach(function (item) {
if (inputFormat === null || inputFormat === void 0 ? void 0 : inputFormat.includes(item)) {
curTimeFormatArr.push(timeFormats[item].format);
}
});
curTimeFormat = curTimeFormatArr.length
? curTimeFormatArr.join(':')
: curTimeFormat;
_this.state = {
isOpened: false,
isFocused: false,
startDate: startDate,
endDate: endDate,
editState: 'start',
oldStartDate: startDate,
oldEndDate: endDate,
startInputValue: startDate === null || startDate === void 0 ? void 0 : startDate.format(inputFormat),
endInputValue: endDate === null || endDate === void 0 ? void 0 : endDate.format(inputFormat),
endDateOpenedFirst: false,
curDateFormat: curDateFormat,
curTimeFormat: curTimeFormat
};
return _this;
}
DateRangePicker.formatValue = function (newValue, format, joinValues, delimiter, utc) {
var _a, _b;
if (utc === void 0) { utc = false; }
newValue = [
(_a = (utc ? moment_1.default.utc(newValue.startDate) : newValue.startDate)) === null || _a === void 0 ? void 0 : _a.format(format),
(_b = (utc ? moment_1.default.utc(newValue.endDate) : newValue.endDate)) === null || _b === void 0 ? void 0 : _b.format(format)
];
if (joinValues) {
newValue = newValue.join(delimiter);
}
return newValue;
};
DateRangePicker.unFormatValue = function (value, format, joinValues, delimiter) {
if (!value) {
return {
startDate: undefined,
endDate: undefined
};
}
if (joinValues && typeof value === 'string') {
value = value.split(delimiter);
}
return {
startDate: value[0] ? (0, moment_1.default)(value[0], format) : undefined,
endDate: value[1] ? (0, moment_1.default)(value[1], format) : undefined
};
};
DateRangePicker.prototype.componentDidMount = function () {
var _a, _b;
document.body.addEventListener('click', this.handleOutClick, true);
(_b = (_a = this.props) === null || _a === void 0 ? void 0 : _a.onRef) === null || _b === void 0 ? void 0 : _b.call(_a, this);
};
DateRangePicker.prototype.componentWillUnmount = function () {
document.body.removeEventListener('click', this.handleOutClick, true);
};
DateRangePicker.prototype.componentDidUpdate = function (prevProps, pr