UNPKG

fastlion-amis

Version:

一种MIS页面生成工具

632 lines (631 loc) 30.4 kB
"use strict"; /** * @file DatePicker * @description 时间选择器组件 * @author fex */ Object.defineProperty(exports, "__esModule", { value: true }); exports.DatePicker = exports.advancedShortcuts = exports.availableShortcuts = 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")); var locale_1 = require("../locale"); var helper_1 = require("../utils/helper"); var CalendarMobile_1 = (0, tslib_1.__importDefault)(require("./CalendarMobile")); var Input_1 = (0, tslib_1.__importDefault)(require("./Input")); var formula_1 = require("../utils/formula"); var Button_1 = (0, tslib_1.__importDefault)(require("./Button")); exports.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'); } } }; exports.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; } var DatePicker = /** @class */ (function (_super) { (0, tslib_1.__extends)(DatePicker, _super); function DatePicker(props) { var _a, _b; var _this = _super.call(this, props) || this; _this.onInputBlur = function () { var inputValue = _this.state.inputValue; var _a = _this.props, inputFormat = _a.inputFormat, format = _a.format, utc = _a.utc, inputBlurCheckValue = _a.inputBlurCheckValue, onChange = _a.onChange; if (inputValue != '') { var newDate = (0, moment_1.default)(inputValue, inputFormat); var dateValue = utc ? moment_1.default.utc(newDate).format(format) : newDate.format(format); // 小于 0 的日期丢弃 if (!dateValue.startsWith('-')) { onChange(inputBlurCheckValue ? dateValue : inputValue); } } }; _this.domRef = function (ref) { _this.dom = ref; }; _this.getViewDate = function () { var initial = _this.props.initial; if (moment_1.default.isMoment(_this.state.value)) { return _this.state.value; } if (typeof _this.state.value === 'string' && new Date(_this.state.value).toString() !== 'Invalid Date') { return (0, moment_1.default)(_this.state.value); } if (initial) { var list = initial.split(':'); var time_1 = (0, moment_1.default)(); list.forEach(function (item, index) { var num = Number(item); if (index == 0) { time_1 = time_1.hours(num); } else if (index == 1) { time_1 = time_1.minutes(num); } else { time_1 = time_1.seconds(num); } }); return time_1; } return (0, moment_1.default)(); }; _this.handleClose = function () { var _a, _b; if (moment_1.default.isMoment(_this.originDate)) { _this.handleChange(_this.originDate); } else { _this.setState({ value: undefined, inputValue: '' }); (_b = (_a = _this.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, ''); } _this.close(); }; _this.inputRef = react_1.default.createRef(); _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); _this.inputChange = _this.inputChange.bind(_this); var _c = _this.props, value = _c.value, format = _c.format, inputFormat = _c.inputFormat; _this.state = { isOpened: false, isFocused: false, isInitial: false, // value: normalizeValue(this.props.value, this.props.format) // chencicsy // 年月日格式在YYYY-DD format下无法初始化的问题 value: inputFormat === 'YYYY-MM' ? normalizeValue((_a = value === null || value === void 0 ? void 0 : value.slice) === null || _a === void 0 ? void 0 : _a.call(value, 0, 7), format) : normalizeValue(value, format), inputValue: ((_b = normalizeValue(value, format)) === null || _b === void 0 ? void 0 : _b.format(inputFormat)) || '' }; return _this; } DatePicker.prototype.componentDidUpdate = function (prevProps) { var _this = this; var props = this.props; if (prevProps.value !== props.value) { var newValue_1 = props.inputBlurCheckValue ? normalizeValue(props.value, props.format) : props.value; this.setState(function (pre) { var _a, _b; return ({ value: newValue_1, inputValue: newValue_1 ? ((_b = (_a = newValue_1.format) === null || _a === void 0 ? void 0 : _a.call(newValue_1, props.inputFormat)) !== null && _b !== void 0 ? _b : newValue_1) : _this.props.inputBlurCheckValue ? '' : pre.inputValue }); }); } }; 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); var input = this.inputRef.current; input && input.focus(); }; DatePicker.prototype.close = function () { this.setState({ isOpened: false }); }; DatePicker.prototype.clearValue = function (e) { e.preventDefault(); e.stopPropagation(); var onChange = this.props.onChange; onChange(''); this.setState({ inputValue: '' }); }; 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, inputFormat = _a.inputFormat; 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(); } this.setState({ inputValue: utc ? moment_1.default.utc(value).format(inputFormat) : value.format(inputFormat) }); }; // 手动输入日期 DatePicker.prototype.inputChange = function (e) { var _a = this.props, onChange = _a.onChange, inputFormat = _a.inputFormat; var value = e.currentTarget.value; this.setState({ inputValue: value }); if (value === '') { onChange(''); this.setState({ value: undefined, inputValue: '' }); } else { var newDate = (0, moment_1.default)(value, inputFormat); this.setState({ value: newDate }); } }; 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 (exports.availableShortcuts[key]) { return exports.availableShortcuts[key]; } var __ = this.props.translate; for (var i = 0, len = exports.advancedShortcuts.length; i < len; i++) { var item = exports.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, data = _a.data, format = _a.format, name = _a.name, type = _a.type; var shortcutArr; if (typeof shortcuts === 'string') { shortcutArr = shortcuts.split(','); } else { shortcutArr = shortcuts; } var __ = this.props.translate; return (react_1.default.createElement("div", { className: cx('DatePicker-shortcuts-container') }, react_1.default.createElement("ul", { className: cx("DatePicker-shortcuts"), style: { height: (0, helper_1.isMobile)() ? 'unset' : (type === null || type === void 0 ? void 0 : type.includes('time')) ? '291px' : '243px' } }, shortcutArr.map(function (item) { if (!item) { return null; } var shortcut = {}; if (typeof item === 'string') { shortcut = _this.getAvailableShortcuts(item); if (!shortcut) return null; shortcut.key = item; } else if (item.date) { var shortcutRaw_1 = (0, tslib_1.__assign)({}, item); shortcut = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, item), { date: function () { var date = (0, formula_1.isExpression)(shortcutRaw_1.date) ? (0, moment_1.default)(formula_1.FormulaExec['formula'](shortcutRaw_1.date, (name === null || name === void 0 ? void 0 : name.includes('.')) ? data === null || data === void 0 ? void 0 : data[name.split('.')[0]] : data), format) : shortcutRaw_1.date; return date && moment_1.default.isMoment(date) && (date === null || date === void 0 ? void 0 : date.isValid()) ? date : 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", { title: __(shortcut.label) }, __(shortcut.label)))); })))); }; DatePicker.prototype.render = function () { var _a; var _this = this; var _b, _c, _d, _e, _f; var _g = this.props, ns = _g.classPrefix, cx = _g.classnames, className = _g.className, popoverClassName = _g.popoverClassName, value = _g.value, placeholder = _g.placeholder, disabled = _g.disabled, inputFormat = _g.inputFormat, dateFormat = _g.dateFormat, timeFormat = _g.timeFormat, viewMode = _g.viewMode, timeConstraints = _g.timeConstraints, popOverContainer = _g.popOverContainer, clearable = _g.clearable, shortcuts = _g.shortcuts, utc = _g.utc, overlayPlacement = _g.overlayPlacement, locale = _g.locale, format = _g.format, borderMode = _g.borderMode, embed = _g.embed, minDate = _g.minDate, useMobileUI = _g.useMobileUI, maxDate = _g.maxDate, schedules = _g.schedules, largeMode = _g.largeMode, scheduleClassNames = _g.scheduleClassNames, onScheduleClick = _g.onScheduleClick, mobileCalendarMode = _g.mobileCalendarMode, ranges = _g.ranges; 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 || ranges), showViewMode: viewMode === 'quarters' || viewMode === 'months' ? 'years' : 'months', timeConstraints: timeConstraints, viewDate: this.getViewDate() })); 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, translate: __, // utc={utc} schedules: schedulesData, largeMode: largeMode, onScheduleClick: onScheduleClick, embed: embed, useMobileUI: useMobileUI, initial: this.props.initial, viewDate: this.getViewDate() }))); } 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.props.inputFocusShowPicker ? this.handleClick : undefined }, react_1.default.createElement("div", { className: cx('DatePicker-content') }, react_1.default.createElement(Input_1.default, { className: cx('DatePicker-input'), onChange: this.inputChange, onBlur: this.onInputBlur, ref: this.inputRef, placeholder: __(placeholder), autoComplete: "off", value: this.state.inputValue, readOnly: (0, helper_1.isMobile)(), disabled: disabled }), 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 ", (0, helper_1.isMobile)() && 'Table-expandBtn') }, (0, helper_1.isMobile)() ? react_1.default.createElement(icons_1.Icon, { icon: "right-arrow-bold", className: "icon" }) : react_1.default.createElement(icons_1.Icon, { onClick: function (e) { e.stopPropagation(); _this.handleClick(); }, icon: "#icon-tooltool_table", symbol: true, 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 || ranges), react_1.default.createElement("div", { className: cx('DatePicker-body') }, react_1.default.createElement(Calendar_1.default, { value: date, initial: this.props.initial, onChange: this.handleChange, requiredConfirm: viewMode === 'time', 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, translate: __, viewDate: this.getViewDate() }), react_1.default.createElement("div", { className: cx('DatePicker-footer') }, react_1.default.createElement(Button_1.default, { level: "primary", size: "sm", className: cx('m-l-sm'), disabled: !date, onClick: function () { _this.close(); _this.handleBlur(); } }, __('confirm'))))))) : null, useMobileUI && (0, helper_1.isMobile)() ? (mobileCalendarMode === 'calendar' && useCalendarMobile ? (react_1.default.createElement(PopUp_1.default, { isShow: isOpened, container: popOverContainer, 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: true, header: react_1.default.createElement("div", { className: cx('TransferDropDown-header') }, (_f = (_c = (_b = this.props) === null || _b === void 0 ? void 0 : _b.label) !== null && _c !== void 0 ? _c : (_e = (_d = this.props) === null || _d === void 0 ? void 0 : _d.domicile) === null || _e === void 0 ? void 0 : _e.label) !== null && _f !== void 0 ? _f : ''), onHide: this.handleClick, onActonClick: function () { var _a, _b; (_b = (_a = _this.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, ''); } }, this.renderShortCuts(shortcuts || ranges), 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, translate: __, initial: this.props.initial, viewDate: this.getViewDate() })))) : null)); }; DatePicker.defaultProps = { viewMode: 'days', shortcuts: '', ranges: '', closeOnSelect: false, overlayPlacement: 'auto', scheduleClassNames: [ 'bg-warning', 'bg-danger', 'bg-success', 'bg-info', 'bg-secondary' ], inputFocusShowPicker: true, inputBlurCheckValue: true }; 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