fastlion-amis
Version:
一种MIS页面生成工具
276 lines (275 loc) • 13 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
/**
* @file 基于 react-datetime 改造。
*/
var react_datetime_1 = (0, tslib_1.__importDefault)(require("react-datetime"));
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var CalendarContainer_1 = (0, tslib_1.__importDefault)(require("./CalendarContainer"));
var classnames_1 = (0, tslib_1.__importDefault)(require("classnames"));
var moment_1 = (0, tslib_1.__importDefault)(require("moment"));
var theme_1 = require("../../theme");
var helper_1 = require("../../utils/helper");
var BaseDatePicker = /** @class */ (function (_super) {
(0, tslib_1.__extends)(BaseDatePicker, _super);
function BaseDatePicker(props) {
var _this = _super.call(this, props) || this;
_this.timeCellLength = {
year: 4,
month: 2,
date: 2,
hours: 2,
minutes: 2,
seconds: 2,
milliseconds: 3
};
_this.getUpdateOn = function (formats) {
if (formats.date.match(/[lLD]/)) {
return 'days';
}
else if (formats.date.indexOf('M') !== -1) {
return 'months';
}
else if (formats.date.indexOf('Q') !== -1) {
return 'quarters';
}
else if (formats.date.indexOf('Y') !== -1) {
return 'years';
}
return 'days';
};
_this.getComponentProps = (function (origin) {
return function () {
var props = origin.call(_this);
props.setDateTimeState = _this.setState.bind(_this);
[
'inputFormat',
'onChange',
'onClose',
'requiredConfirm',
'classPrefix',
'prevIcon',
'nextIcon',
'isEndDate',
'classnames',
'minDate',
'maxDate',
'schedules',
'largeMode',
'onScheduleClick',
'hideHeader',
'updateOn',
'useMobileUI',
'showToolbar',
'embed',
'type'
].forEach(function (key) { return (props[key] = _this.props[key]); });
return props;
};
})(_this.getComponentProps);
_this.setDate = function (type) {
// todo 没看懂这个是啥意思，好像没啥用
var currentShould = _this.props.viewMode === 'months' &&
!/^mm$/i.test(_this.props.inputFormat || '');
var nextViews = {
month: currentShould ? 'months' : 'days',
year: currentShould ? 'months' : 'days',
quarters: ''
};
if (_this.props.viewMode === 'quarters') {
nextViews.year = 'quarters';
}
return function (e) {
var _a, _b;
_this.setState({
viewDate: _this.state.viewDate
.clone()[type](parseInt(e.target.closest('td').getAttribute('data-value'), 10))
.startOf(type),
currentView: nextViews[type]
});
(_b = (_a = _this.props).onViewModeChange) === null || _b === void 0 ? void 0 : _b.call(_a, nextViews[type]);
};
};
_this.updateSelectedDate = function (e, close) {
var that = _this;
var target = e.currentTarget, modifier = 0, viewDate = _this.state.viewDate, currentDate = _this.state.selectedDate || viewDate, date;
if (target.className.indexOf('rdtDay') !== -1) {
if (target.className.indexOf('rdtNew') !== -1)
modifier = 1;
else if (target.className.indexOf('rdtOld') !== -1)
modifier = -1;
date = viewDate
.clone()
.month(viewDate.month() + modifier)
.date(parseInt(target.getAttribute('data-value'), 10));
}
else if (target.className.indexOf('rdtMonth') !== -1) {
date = viewDate
.clone()
.month(parseInt(target.getAttribute('data-value'), 10))
.date(currentDate.date());
}
else if (target.className.indexOf('rdtQuarter') !== -1) {
date = viewDate
.clone()
.quarter(parseInt(target.getAttribute('data-value'), 10))
.startOf('quarter')
.date(currentDate.date());
}
else if (target.className.indexOf('rdtYear') !== -1) {
date = viewDate
.clone()
.month(currentDate.month())
.date(currentDate.date())
.year(parseInt(target.getAttribute('data-value'), 10));
}
date
.hours(currentDate.hours())
.minutes(currentDate.minutes())
.seconds(currentDate.seconds())
.milliseconds(currentDate.milliseconds());
if (!_this.props.value) {
var open = !(_this.props.closeOnSelect && close);
if (!open) {
that.props.onBlur(date);
}
_this.setState({
selectedDate: date,
viewDate: date.clone().startOf('month'),
inputValue: date.format(_this.state.inputFormat),
open: open
});
}
else {
if (_this.props.closeOnSelect && close) {
that.closeCalendar();
}
}
that.props.onChange(date);
};
_this.getDateBoundary = function (currentDate) {
var _a, _b;
var _c = currentDate.toObject(), years = _c.years, months = _c.months;
var maxDateObject = (_a = _this.props.maxDate) === null || _a === void 0 ? void 0 : _a.toObject();
var minDateObject = (_b = _this.props.minDate) === null || _b === void 0 ? void 0 : _b.toObject();
var yearBoundary = {
max: maxDateObject ? maxDateObject.years : years + 100,
min: minDateObject ? minDateObject.years : years - 100,
};
var monthBoundary = {
max: years === (maxDateObject === null || maxDateObject === void 0 ? void 0 : maxDateObject.years) ? maxDateObject.months : 11,
min: years === (minDateObject === null || minDateObject === void 0 ? void 0 : minDateObject.years) ? minDateObject.months : 0
};
var dateBoundary = {
max: years === (maxDateObject === null || maxDateObject === void 0 ? void 0 : maxDateObject.years) && months === (maxDateObject === null || maxDateObject === void 0 ? void 0 : maxDateObject.months) ? maxDateObject.date : currentDate.daysInMonth(),
min: years === (minDateObject === null || minDateObject === void 0 ? void 0 : minDateObject.years) && months === (minDateObject === null || minDateObject === void 0 ? void 0 : minDateObject.months) ? minDateObject.date : 1
};
return {
year: yearBoundary,
month: monthBoundary,
date: dateBoundary,
hours: { max: 23, min: 0 },
minutes: { max: 59, min: 0 },
seconds: { max: 59, min: 0 }
};
};
_this.timeCell = function (value, type) {
var str = value + '';
while (str.length < _this.timeCellLength[type])
str = '0' + str;
return str;
};
_this.getColumns = function (types, dateBoundary) {
var __ = _this.props.translate;
var columns = [];
types.map(function (type) {
var options = (0, helper_1.getRange)(dateBoundary[type].min, dateBoundary[type].max, 1).map(function (item) {
return {
text: type === 'month' ? _this.timeCell(item + 1, type) : _this.timeCell(item, type),
value: item
};
});
columns.push({ options: options, type: __('Data.' + type) });
});
return columns;
};
_this.onConfirm = function (value, types, isHandleChange) {
var currentDate = (_this.state.selectedDate || _this.state.viewDate || (0, moment_1.default)()).clone();
var date = (0, helper_1.convertArrayValueToMoment)(value, types, currentDate);
if (!_this.props.value) {
_this.setState({
selectedDate: date,
inputValue: date.format(_this.state.inputFormat)
});
}
_this.props.onChange && _this.props.onChange(date, isHandleChange);
!isHandleChange && _this.props.onClose && _this.props.onClose();
};
var state = _this.getStateFromProps(_this.props);
if (state.open === undefined) {
state.open = !_this.props.input;
}
state.currentView = _this.props.dateFormat
? _this.props.viewMode || state.updateOn || 'days'
: 'time';
if (_this.props.viewDate) {
state.viewDate = _this.props.viewDate;
}
_this.state = state;
return _this;
}
BaseDatePicker.prototype.render = function () {
var _a;
var Component = CalendarContainer_1.default;
var viewProps = this.getComponentProps();
var _b = this.props, timeFormat = _b.timeFormat, dateFormat = _b.dateFormat, viewMode = _b.viewMode, renderQuarter = _b.renderQuarter, timeRangeHeader = _b.timeRangeHeader;
if (viewMode === 'quarters') {
_a = [
'quarters',
renderQuarter
], viewProps.updateOn = _a[0], viewProps.renderQuarter = _a[1];
}
else if (viewMode === 'years') {
viewProps.updateOn = 'years';
}
else if (viewMode === 'months') {
viewProps.updateOn = 'months';
}
viewProps.onConfirm = this.onConfirm;
viewProps.getDateBoundary = this.getDateBoundary;
viewProps.getColumns = this.getColumns;
viewProps.timeCell = this.timeCell;
viewProps.initial = this.props.initial;
viewProps.numerical = this.props.numerical;
viewProps.isInitial = this.props.isInitial;
viewProps.timeRangeHeader = this.props.timeRangeHeader;
// viewProps.viewStartYear = this.props.viewStartYear;
// viewProps.viewStartMonth = this.props.viewStartMonth;
// viewProps.viewEndYear = this.props.viewEndYear;
// viewProps.viewEndMonth = this.props.viewEndMonth;
// viewProps.changeCurrentShowTime = this.props.changeCurrentShowTime;
return (react_1.default.createElement("div", { className: (0, classnames_1.default)('rdt rdtStatic rdtOpen', this.props.className, (timeFormat && !dateFormat) || typeof dateFormat !== 'string'
? 'rdtTimeWithoutD'
: timeFormat && timeFormat.toLowerCase().indexOf('s') > 0
? 'rdtTimeWithS'
: timeFormat
? 'rdtTime'
: '') },
react_1.default.createElement("div", { key: (0, helper_1.isMobile)() ? viewProps.value : 'dt', className: (0, classnames_1.default)('rdtPicker', {
'is-mobile-year': (0, helper_1.isMobile)() && viewMode === 'years'
}, { 'is-mobile-embed': (0, helper_1.isMobile)() && viewProps.embed }, timeFormat && !dateFormat
? 'rdtPickerTimeWithoutD'
: timeFormat && dateFormat
? 'rdtPickerTime'
: dateFormat && !timeFormat
? 'rdtPickerDate'
: '') },
react_1.default.createElement(Component, { view: this.state.currentView, viewProps: viewProps, timeRangeHeader: timeRangeHeader }))));
};
BaseDatePicker.propTypes = {};
return BaseDatePicker;
}(react_datetime_1.default));
var Calendar = (0, theme_1.themeable)(BaseDatePicker);
exports.default = Calendar;
//# sourceMappingURL=./components/calendar/Calendar.js.map