fastlion-amis
Version:
一种MIS页面生成工具
527 lines (526 loc) • 23.2 kB
JavaScript
"use strict";
/**
* @file DatePicker
* @description 时间选择器组件
* @author fex
*/
Object.defineProperty(exports, "__esModule", { value: true });
exports.DatePicker = 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"));
require("moment/locale/zh-cn");
var icons_1 = require("./icons");
var PopOver_1 = (0, tslib_1.__importDefault)(require("./PopOver"));
var PopUp_1 = (0, tslib_1.__importDefault)(require("./PopUp"));
var Overlay_1 = (0, tslib_1.__importDefault)(require("./Overlay"));
var theme_1 = require("../theme");
var Calendar_1 = (0, tslib_1.__importDefault)(require("./calendar/Calendar"));
// import 'react-datetime/css/react-datetime.css';
var locale_1 = require("../locale");
var helper_1 = require("../utils/helper");
var CalendarMobile_1 = (0, tslib_1.__importDefault)(require("./CalendarMobile"));
var availableShortcuts = {
now: {
label: 'Date.now',
date: function (now) {
return now;
}
},
today: {
label: 'Date.today',
date: function (now) {
return now.startOf('day');
}
},
yesterday: {
label: 'Date.yesterday',
date: function (now) {
return now.add(-1, 'days').startOf('day');
}
},
thisweek: {
label: 'Date.monday',
date: function (now) {
return now.startOf('week').startOf('day');
}
},
thismonth: {
label: 'Date.startOfMonth',
date: function (now) {
return now.startOf('month');
}
},
prevmonth: {
label: 'Date.startOfLastMonth',
date: function (now) {
return now.startOf('month').add(-1, 'month');
}
},
prevquarter: {
label: 'Date.startOfLastQuarter',
date: function (now) {
return now.startOf('quarter').add(-1, 'quarter');
}
},
thisquarter: {
label: 'Date.startOfQuarter',
date: function (now) {
return now.startOf('quarter');
}
},
tomorrow: {
label: 'Date.tomorrow',
date: function (now) {
return now.add(1, 'days').startOf('day');
}
},
endofthisweek: {
label: 'Date.endOfWeek',
date: function (now) {
return now.endOf('week');
}
},
endofthismonth: {
label: 'Date.endOfMonth',
date: function (now) {
return now.endOf('month');
}
},
endoflastmonth: {
label: 'Date.endOfLastMonth',
date: function (now) {
return now.add(-1, 'month').endOf('month');
}
}
};
var advancedShortcuts = [
{
regexp: /^(\d+)hoursago$/,
resolve: function (__, _, hours) {
return {
label: __('Date.hoursago', { hours: hours }),
date: function (now) {
return now.subtract(hours, 'hours');
}
};
}
},
{
regexp: /^(\d+)hourslater$/,
resolve: function (__, _, hours) {
return {
label: __('Date.hourslater', { hours: hours }),
date: function (now) {
return now.add(hours, 'hours');
}
};
}
},
{
regexp: /^(\d+)daysago$/,
resolve: function (__, _, days) {
return {
label: __('Date.daysago', { days: days }),
date: function (now) {
return now.subtract(days, 'days');
}
};
}
},
{
regexp: /^(\d+)dayslater$/,
resolve: function (__, _, days) {
return {
label: __('Date.dayslater', { days: days }),
date: function (now) {
return now.add(days, 'days');
}
};
}
},
{
regexp: /^(\d+)weeksago$/,
resolve: function (__, _, weeks) {
return {
label: __('Date.weeksago', { weeks: weeks }),
date: function (now) {
return now.subtract(weeks, 'weeks');
}
};
}
},
{
regexp: /^(\d+)weekslater$/,
resolve: function (__, _, weeks) {
return {
label: __('Date.weekslater', { weeks: weeks }),
date: function (now) {
return now.add(weeks, 'weeks');
}
};
}
},
{
regexp: /^(\d+)monthsago$/,
resolve: function (__, _, months) {
return {
label: __('Date.monthsago', { months: months }),
date: function (now) {
return now.subtract(months, 'months');
}
};
}
},
{
regexp: /^(\d+)monthslater$/,
resolve: function (__, _, months) {
return {
label: __('Date.monthslater', { months: months }),
date: function (now) {
return now.add(months, 'months');
}
};
}
},
{
regexp: /^(\d+)quartersago$/,
resolve: function (__, _, quarters) {
return {
label: __('Date.quartersago', { quarters: quarters }),
date: function (now) {
return now.subtract(quarters, 'quarters');
}
};
}
},
{
regexp: /^(\d+)quarterslater$/,
resolve: function (__, _, quarters) {
return {
label: __('Date.quarterslater', { quarters: quarters }),
date: function (now) {
return now.add(quarters, 'quarters');
}
};
}
}
];
function normalizeValue(value, format) {
if (!value || value === '0') {
return undefined;
}
var v = (0, moment_1.default)(value, format, true);
return v.isValid() ? v : undefined;
}
// console.log(this.state.value, this.props.initial, this.props.timeFormat);
// if (!this.state.value) {
// let data = normalizeValue(props.initial)
// this.setState({
// value: data
// });
// }
var DatePicker = /** @class */ (function (_super) {
(0, tslib_1.__extends)(DatePicker, _super);
function DatePicker(props) {
var _a;
var _this = _super.call(this, props) || this;
_this.state = {
isOpened: false,
isFocused: false,
isInitial: false,
// value: normalizeValue(this.props.value, this.props.format)
// chencicsy
// 年月日格式在YYYY-DD format下无法初始化的问题
value: _this.props.inputFormat === 'YYYY-MM' ? normalizeValue((_a = _this.props.value) === null || _a === void 0 ? void 0 : _a.slice(0, 7), _this.props.format) : normalizeValue(_this.props.value, _this.props.format)
};
_this.domRef = function (ref) {
_this.dom = ref;
};
_this.handleChange = _this.handleChange.bind(_this);
_this.selectRannge = _this.selectRannge.bind(_this);
_this.checkIsValidDate = _this.checkIsValidDate.bind(_this);
_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.clearValue = _this.clearValue.bind(_this);
_this.handleClick = _this.handleClick.bind(_this);
_this.handleKeyPress = _this.handleKeyPress.bind(_this);
_this.getParent = _this.getParent.bind(_this);
_this.getTarget = _this.getTarget.bind(_this);
_this.handlePopOverClick = _this.handlePopOverClick.bind(_this);
_this.renderShortCuts = _this.renderShortCuts.bind(_this);
_this.numerical = _this.numerical.bind(_this);
return _this;
}
DatePicker.prototype.componentDidUpdate = function (prevProps) {
var props = this.props;
if (prevProps.value !== props.value) {
this.setState({
value: normalizeValue(props.value, props.format)
});
}
};
DatePicker.prototype.numerical = function () {
this.setState({
isInitial: true
});
};
DatePicker.prototype.focus = function () {
if (!this.dom) {
return;
}
this.dom.focus();
};
DatePicker.prototype.handleFocus = function () {
this.setState({
isFocused: true
});
};
DatePicker.prototype.handleBlur = function () {
this.setState({
isFocused: false
});
};
DatePicker.prototype.handleKeyPress = function (e) {
if (e.key === ' ') {
this.handleClick();
e.preventDefault();
}
};
DatePicker.prototype.handleClick = function () {
this.state.isOpened ? this.close() : this.open();
};
DatePicker.prototype.handlePopOverClick = function (e) {
e.stopPropagation();
e.preventDefault();
};
DatePicker.prototype.open = function (fn) {
this.props.disabled ||
this.setState({
isOpened: true
}, fn);
};
DatePicker.prototype.close = function () {
this.setState({
isOpened: false
});
};
DatePicker.prototype.clearValue = function (e) {
e.preventDefault();
e.stopPropagation();
var onChange = this.props.onChange;
onChange('');
};
DatePicker.prototype.handleChange = function (value, judge) {
var _this = this;
var _a = this.props, onChange = _a.onChange, format = _a.format, minDate = _a.minDate, maxDate = _a.maxDate, dateFormat = _a.dateFormat, timeFormat = _a.timeFormat, closeOnSelect = _a.closeOnSelect, utc = _a.utc, viewMode = _a.viewMode, initial = _a.initial;
var isInitial = this.state.isInitial;
if (!moment_1.default.isMoment(value)) {
return;
}
if (minDate && value && value.isBefore(minDate, 'second')) {
value = minDate;
}
else if (maxDate && value && value.isAfter(maxDate, 'second')) {
value = maxDate;
}
judge &&
(timeFormat === null || timeFormat === void 0 ? void 0 : timeFormat.split(':').forEach(function (format, i) {
var _a;
var type = /h/i.test(format)
? 'hours'
: /m/.test(format)
? 'minutes'
: /s/.test(format)
? 'seconds' : '';
if (!isInitial && initial) {
var initials = initial === null || initial === void 0 ? void 0 : initial.split(":");
_this.selectinit(initials, type, value);
}
else if (isInitial && _this.props.value) {
var initials = (_a = _this.props.value) === null || _a === void 0 ? void 0 : _a.split(" ")[1].split(":");
_this.selectinit(initials, type, value);
}
}));
onChange(utc ? moment_1.default.utc(value).format(format) : value.format(format));
if (closeOnSelect && dateFormat && !timeFormat) {
this.close();
}
};
DatePicker.prototype.selectinit = function (initials, type, value) {
var HH = parseInt(initials[0]);
var MM = parseInt(initials[1]);
var SS = parseInt(initials[2]);
switch (type) {
case "hours":
if (HH >= 0 && HH < 24) {
if (value.format('HH') === "00") {
value["hours"](HH);
}
}
break;
case "minutes":
if (MM >= 0 && MM < 60) {
if (value.format('mm') === "00") {
value["minutes"](MM);
}
}
break;
case "seconds":
if (SS >= 0 && SS < 60) {
if (value.format('ss') === "00") {
value["seconds"](SS);
}
}
break;
default:
break;
}
};
DatePicker.prototype.selectRannge = function (item, shortcutArr) {
var closeOnSelect = this.props.closeOnSelect;
var now = (0, moment_1.default)();
(shortcutArr === null || shortcutArr === void 0 ? void 0 : shortcutArr.includes(item.key)) ?
this.handleChange(item.date(now), true)
:
this.handleChange(item.date(now), false);
closeOnSelect && this.close();
};
DatePicker.prototype.checkIsValidDate = function (currentDate) {
var _a = this.props, minDate = _a.minDate, maxDate = _a.maxDate;
if (minDate && currentDate.isBefore(minDate, 'day')) {
return false;
}
else if (maxDate && currentDate.isAfter(maxDate, 'day')) {
return false;
}
return true;
};
DatePicker.prototype.getTarget = function () {
return this.dom;
};
DatePicker.prototype.getParent = function () {
return this.dom;
};
DatePicker.prototype.getAvailableShortcuts = function (key) {
if (availableShortcuts[key]) {
return availableShortcuts[key];
}
var __ = this.props.translate;
for (var i = 0, len = advancedShortcuts.length; i < len; i++) {
var item = advancedShortcuts[i];
var m = item.regexp.exec(key);
if (m) {
return item.resolve.apply(item, (0, tslib_1.__spreadArray)([__], m, true));
}
}
return null;
};
DatePicker.prototype.renderShortCuts = function (shortcuts) {
var _this = this;
if (!shortcuts) {
return null;
}
var _a = this.props, ns = _a.classPrefix, cx = _a.classnames;
var shortcutArr;
if (typeof shortcuts === 'string') {
shortcutArr = shortcuts.split(',');
}
else {
shortcutArr = shortcuts;
}
var __ = this.props.translate;
return (react_1.default.createElement("ul", { className: cx("DatePicker-shortcuts") }, shortcutArr.map(function (item) {
if (!item) {
return null;
}
var shortcut = {};
if (typeof item === 'string') {
shortcut = _this.getAvailableShortcuts(item);
shortcut.key = item;
}
else if (item.date) {
shortcut = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, item), { date: function () { return item.date; } });
}
return (react_1.default.createElement("li", { className: cx("DatePicker-shortcut"), onClick: function () { return _this.selectRannge(shortcut, shortcutArr); }, key: shortcut.key || shortcut.label },
react_1.default.createElement("a", null, __(shortcut.label))));
})));
};
DatePicker.prototype.render = function () {
var _a;
var _b = this.props, ns = _b.classPrefix, cx = _b.classnames, className = _b.className, popoverClassName = _b.popoverClassName, value = _b.value, placeholder = _b.placeholder, disabled = _b.disabled, inputFormat = _b.inputFormat, dateFormat = _b.dateFormat, timeFormat = _b.timeFormat, viewMode = _b.viewMode, timeConstraints = _b.timeConstraints, popOverContainer = _b.popOverContainer, clearable = _b.clearable, shortcuts = _b.shortcuts, utc = _b.utc, overlayPlacement = _b.overlayPlacement, locale = _b.locale, format = _b.format, borderMode = _b.borderMode, embed = _b.embed, minDate = _b.minDate, useMobileUI = _b.useMobileUI, maxDate = _b.maxDate, schedules = _b.schedules, largeMode = _b.largeMode, scheduleClassNames = _b.scheduleClassNames, onScheduleClick = _b.onScheduleClick, mobileCalendarMode = _b.mobileCalendarMode;
var __ = this.props.translate;
var isOpened = this.state.isOpened;
var date = this.state.value;
var calendarMobile = (react_1.default.createElement(CalendarMobile_1.default, { isDatePicker: true, timeFormat: timeFormat, inputFormat: inputFormat, startDate: date, defaultDate: date, minDate: minDate, maxDate: maxDate, dateFormat: dateFormat, embed: embed, viewMode: viewMode, close: this.close, confirm: this.handleChange, footerExtra: this.renderShortCuts(shortcuts), showViewMode: viewMode === 'quarters' || viewMode === 'months' ? 'years' : 'months', timeConstraints: timeConstraints }));
var CalendarMobileTitle = (react_1.default.createElement("div", { className: ns + "CalendarMobile-title" }, __('Calendar.datepicker')));
var useCalendarMobile = useMobileUI &&
(0, helper_1.isMobile)() &&
['days', 'months', 'quarters'].indexOf(viewMode) > -1;
if (embed) {
var schedulesData = undefined;
if (schedules && Array.isArray(schedules)) {
// 设置日程颜色
var index_1 = 0;
schedulesData = schedules.map(function (schedule) {
var className = schedule.className;
if (!className && scheduleClassNames) {
className = scheduleClassNames[index_1];
index_1++;
if (index_1 >= scheduleClassNames.length) {
index_1 = 0;
}
}
return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, schedule), { className: className });
});
}
return (react_1.default.createElement("div", { className: cx("DateCalendar", {
'is-disabled': disabled,
'ScheduleCalendar': schedulesData,
'ScheduleCalendar-large': largeMode
}, className) },
react_1.default.createElement(Calendar_1.default, { value: date, onChange: this.handleChange, requiredConfirm: false, dateFormat: dateFormat, timeFormat: timeFormat, isValidDate: this.checkIsValidDate, viewMode: viewMode, timeConstraints: timeConstraints, input: false, onClose: this.close, locale: locale, minDate: minDate, maxDate: maxDate,
// utc={utc}
schedules: schedulesData, largeMode: largeMode, onScheduleClick: onScheduleClick, embed: embed, useMobileUI: useMobileUI })));
}
return (react_1.default.createElement("div", { tabIndex: 0, onKeyPress: this.handleKeyPress, onFocus: this.handleFocus, onBlur: this.handleBlur, className: cx("DatePicker", (_a = {
'is-disabled': disabled,
'is-focused': this.state.isFocused
},
_a["DatePicker--border" + (0, helper_1.ucFirst)(borderMode)] = borderMode,
_a['is-mobile'] = useMobileUI && (0, helper_1.isMobile)(),
_a), className), ref: this.domRef, onClick: this.handleClick },
react_1.default.createElement("div", { className: cx('DatePicker-content') },
date ? (react_1.default.createElement("span", { className: cx("DatePicker-value") }, date.format(inputFormat))) : (react_1.default.createElement("span", { className: cx("DatePicker-placeholder") }, __(placeholder))),
clearable && !disabled && normalizeValue(value, format) ? (react_1.default.createElement("a", { className: cx("DatePicker-clear"), onClick: this.clearValue },
react_1.default.createElement(icons_1.Icon, { icon: "close", className: "icon" }))) : null,
react_1.default.createElement("a", { className: cx("DatePicker-toggler") },
react_1.default.createElement(icons_1.Icon, { icon: "clock", className: "icon" }))),
!(useMobileUI && (0, helper_1.isMobile)()) && isOpened ? (react_1.default.createElement(Overlay_1.default, { target: this.getTarget, container: this.getTarget, rootClose: false, placement: overlayPlacement, show: true },
react_1.default.createElement(PopOver_1.default, { classPrefix: ns, className: cx("DatePicker-popover", popoverClassName), onHide: this.close, overlay: true, onClick: this.handlePopOverClick },
this.renderShortCuts(shortcuts),
react_1.default.createElement(Calendar_1.default, { value: date, initial: this.props.initial, onChange: this.handleChange, requiredConfirm: !!(dateFormat && timeFormat), dateFormat: dateFormat, inputFormat: inputFormat, timeFormat: timeFormat, isValidDate: this.checkIsValidDate, viewMode: viewMode, timeConstraints: timeConstraints, input: false, onClose: this.close, locale: locale, minDate: minDate, maxDate: maxDate, useMobileUI: useMobileUI, numerical: this.numerical, isInitial: this.state.isInitial })))) : null,
useMobileUI && (0, helper_1.isMobile)() ? (mobileCalendarMode === 'calendar' && useCalendarMobile ? (react_1.default.createElement(PopUp_1.default, { isShow: isOpened, className: cx(ns + "CalendarMobile-pop"), onHide: this.close, header: CalendarMobileTitle }, calendarMobile)) : (react_1.default.createElement(PopUp_1.default, { className: cx(ns + "DatePicker-popup DatePicker-mobile"), container: popOverContainer, isShow: isOpened, showClose: false, onHide: this.handleClick },
this.renderShortCuts(shortcuts),
react_1.default.createElement(Calendar_1.default, { value: date, onChange: this.handleChange, requiredConfirm: !!(dateFormat && timeFormat), dateFormat: dateFormat, inputFormat: inputFormat, timeFormat: timeFormat, isValidDate: this.checkIsValidDate, viewMode: viewMode, timeConstraints: timeConstraints, input: false, onClose: this.close, locale: locale, minDate: minDate, maxDate: maxDate, useMobileUI: useMobileUI })))) : null));
};
DatePicker.defaultProps = {
viewMode: 'days',
shortcuts: '',
closeOnSelect: true,
overlayPlacement: 'auto',
scheduleClassNames: [
'bg-warning',
'bg-danger',
'bg-success',
'bg-info',
'bg-secondary'
]
};
return DatePicker;
}(react_1.default.Component));
exports.DatePicker = DatePicker;
exports.default = (0, theme_1.themeable)((0, locale_1.localeable)(DatePicker));
//# sourceMappingURL=./components/DatePicker.js.map