amis-ui 3.5.2 → 3.6.0

package/lib/components/DatePicker.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.5.2
+ * amis-ui v3.6.0
  * Copyright 2018-2023 fex
  */
 
@@ -16,6 +16,7 @@ var PopUp = require('./PopUp.js');
 var Calendar = require('./calendar/Calendar.js');
 var CalendarMobile = require('./CalendarMobile.js');
 var Input = require('./Input.js');
+var Button = require('./Button.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -277,7 +278,8 @@ var DatePicker = /** @class */ (function (_super) {
             value: amisCore.normalizeDate(value, valueFormat || format),
             inputValue: ((_a = amisCore.normalizeDate(value, valueFormat || format)) === null || _a === void 0 ? void 0 : _a.format(displayFormat || inputFormat)) || '',
             curTimeFormat: curTimeFormat,
-            curDateFormat: curDateFormat
+            curDateFormat: curDateFormat,
+            isModified: false
         };
         return _this;
     }
@@ -326,6 +328,12 @@ var DatePicker = /** @class */ (function (_super) {
             this.setState(newState);
         }
     };
+    DatePicker.prototype.isConfirmMode = function () {
+        var _a = this.props, closeOnSelect = _a.closeOnSelect, embed = _a.embed, mobileUI = _a.mobileUI;
+        var curTimeFormat = this.state.curTimeFormat;
+        /** 日期时间选择器才支持confirm */
+        return closeOnSelect === false && !!curTimeFormat && !embed && !mobileUI;
+    };
     DatePicker.prototype.focus = function () {
         if (!this.dom) {
             return;
@@ -370,22 +378,29 @@ var DatePicker = /** @class */ (function (_super) {
         input && input.focus();
     };
     DatePicker.prototype.close = function () {
-        this.setState({
-            isOpened: false
-        });
+        var _a;
+        var isConfirmMode = this.isConfirmMode();
+        if (isConfirmMode) {
+            var _b = this.props, value = _b.value, valueFormat = _b.valueFormat, format = _b.format, displayFormat = _b.displayFormat, inputFormat = _b.inputFormat;
+            this.setState({
+                value: amisCore.normalizeDate(value, valueFormat || format),
+                inputValue: ((_a = amisCore.normalizeDate(value, valueFormat || format)) === null || _a === void 0 ? void 0 : _a.format(displayFormat || inputFormat)) || ''
+            });
+        }
+        this.setState({ isOpened: false, isModified: false });
     };
     DatePicker.prototype.clearValue = function (e) {
         e.preventDefault();
         e.stopPropagation();
         var onChange = this.props.onChange;
         onChange('');
-        this.setState({ inputValue: '' });
+        this.setState({ inputValue: '', isModified: false });
     };
     // 清空
     DatePicker.prototype.clear = function () {
         var onChange = this.props.onChange;
         onChange('');
-        this.setState({ inputValue: '' });
+        this.setState({ inputValue: '', isModified: false });
     };
     // 重置
     DatePicker.prototype.reset = function (resetValue) {
@@ -396,13 +411,18 @@ var DatePicker = /** @class */ (function (_super) {
         var _b = this.props, format = _b.format, valueFormat = _b.valueFormat, inputFormat = _b.inputFormat, displayFormat = _b.displayFormat, onChange = _b.onChange;
         onChange(resetValue);
         this.setState({
-            inputValue: (_a = amisCore.normalizeDate(resetValue, valueFormat || format)) === null || _a === void 0 ? void 0 : _a.format(displayFormat || inputFormat || '')
+            inputValue: (_a = amisCore.normalizeDate(resetValue, valueFormat || format)) === null || _a === void 0 ? void 0 : _a.format(displayFormat || inputFormat || ''),
+            isModified: false
         });
     };
-    DatePicker.prototype.handleChange = function (value) {
-        var _a = this.props, onChange = _a.onChange, format = _a.format, valueFormat = _a.valueFormat, minDate = _a.minDate, maxDate = _a.maxDate, inputFormat = _a.inputFormat, displayFormat = _a.displayFormat, closeOnSelect = _a.closeOnSelect, utc = _a.utc; _a.viewMode;
-        var _b = this.state, curDateFormat = _b.curDateFormat, curTimeFormat = _b.curTimeFormat;
-        if (!moment__default["default"].isMoment(value)) {
+    /**
+     * 如果为日期时间选择器，则单独处理时间选择事件，点击确认的时候才触发onChange
+     */
+    DatePicker.prototype.handleConfirm = function () {
+        var _a = this.props, onChange = _a.onChange, format = _a.format, valueFormat = _a.valueFormat, minDate = _a.minDate, maxDate = _a.maxDate, inputFormat = _a.inputFormat, displayFormat = _a.displayFormat, utc = _a.utc;
+        var value = this.state.value;
+        var isConfirmMode = this.isConfirmMode();
+        if (!isConfirmMode || !value) {
             return;
         }
         if (minDate && value && value.isBefore(minDate, 'second')) {
@@ -414,15 +434,65 @@ var DatePicker = /** @class */ (function (_super) {
         onChange(utc
             ? moment__default["default"].utc(value).format(valueFormat || format)
             : value.format(valueFormat || format));
-        if (closeOnSelect && curDateFormat && !curTimeFormat) {
-            this.close();
-        }
         this.setState({
             inputValue: utc
                 ? moment__default["default"].utc(value).format(displayFormat || inputFormat)
-                : value.format(displayFormat || inputFormat)
+                : value.format(displayFormat || inputFormat),
+            isOpened: false,
+            isModified: true
         });
     };
+    DatePicker.prototype.handleChange = function (value, viewMode) {
+        var _a = this.props, onChange = _a.onChange, format = _a.format, valueFormat = _a.valueFormat, minDate = _a.minDate, maxDate = _a.maxDate, inputFormat = _a.inputFormat, displayFormat = _a.displayFormat, closeOnSelect = _a.closeOnSelect, utc = _a.utc, defaultValue = _a.value;
+        var _b = this.state, curDateFormat = _b.curDateFormat, curTimeFormat = _b.curTimeFormat, isModified = _b.isModified;
+        var isConfirmMode = this.isConfirmMode();
+        if (!moment__default["default"].isMoment(value)) {
+            return;
+        }
+        if (minDate && value && value.isBefore(minDate, 'second')) {
+            value = minDate;
+        }
+        else if (maxDate && value && value.isAfter(maxDate, 'second')) {
+            value = maxDate;
+        }
+        /** 首次选择且当前未绑定值，则默认使用当前时间 */
+        if (!defaultValue && !!curTimeFormat && !isModified) {
+            var now_1 = moment__default["default"]();
+            var timePart_1 = {
+                date: value.get('date'),
+                hour: value.get('hour'),
+                minute: value.get('minute'),
+                second: value.get('second'),
+                millisecond: value.get('millisecond')
+            };
+            Object.keys(timePart_1).forEach(function (unit) {
+                /** 首次选择时间，日期使用当前时间; 将未设置过的时间字段设置为当前值 */
+                if ((unit === 'date' && viewMode === 'time') ||
+                    (unit !== 'date' && timePart_1[unit] === 0)) {
+                    timePart_1[unit] = now_1.get(unit);
+                }
+            });
+            value.set(timePart_1);
+        }
+        var updatedValue = utc
+            ? moment__default["default"].utc(value).format(valueFormat || format)
+            : value.format(valueFormat || format);
+        var updatedInputValue = utc
+            ? moment__default["default"].utc(value).format(displayFormat || inputFormat)
+            : value.format(displayFormat || inputFormat);
+        if (isConfirmMode) {
+            this.setState({ value: value, inputValue: updatedInputValue });
+            this.inputValueCache = updatedInputValue;
+        }
+        else {
+            onChange(updatedValue);
+            if (closeOnSelect && curDateFormat && !curTimeFormat) {
+                this.close();
+            }
+            this.setState({ inputValue: updatedInputValue });
+        }
+        this.setState({ isModified: true });
+    };
     // 手动输入日期
     DatePicker.prototype.inputChange = function (e) {
         var _a = this.props, onChange = _a.onChange, inputFormat = _a.inputFormat, format = _a.format, displayFormat = _a.displayFormat, valueFormat = _a.valueFormat, utc = _a.utc, minDate = _a.minDate, maxDate = _a.maxDate;
@@ -434,9 +504,9 @@ var DatePicker = /** @class */ (function (_super) {
         else {
             // 将输入的格式转成正则匹配，比如 YYYY-MM-DD HH:mm:ss 改成 \d\d\d\d\-
             // 只有匹配成功才更新
-            var inputCheckRegex = amisCore.string2regExp((displayFormat || inputFormat)
-                .replace(/[ymdhs]/gi, "".concat(amisCore.string2regExp('\\d')))
-                .replace(/-/gi, "".concat(amisCore.string2regExp('\\-'))));
+            var inputCheckRegex = new RegExp((valueFormat || inputFormat || displayFormat)
+                .replace(/[ymdhs]/gi, '\\d')
+                .replace(/-/gi, '\\-'));
             if (inputCheckRegex.test(value)) {
                 var newDate = moment__default["default"](value, displayFormat || inputFormat);
                 var dateValue = utc
@@ -553,11 +623,19 @@ var DatePicker = /** @class */ (function (_super) {
     };
     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, displayFormat = _b.displayFormat; _b.dateFormat; _b.timeFormat; var viewMode = _b.viewMode, timeConstraints = _b.timeConstraints, popOverContainer = _b.popOverContainer, clearable = _b.clearable, shortcuts = _b.shortcuts; _b.utc; var isEndDate = _b.isEndDate, overlayPlacement = _b.overlayPlacement, locale = _b.locale, format = _b.format, valueFormat = _b.valueFormat, borderMode = _b.borderMode, embed = _b.embed, minDate = _b.minDate, mobileUI = _b.mobileUI, maxDate = _b.maxDate, schedules = _b.schedules, largeMode = _b.largeMode, scheduleClassNames = _b.scheduleClassNames, todayActiveStyle = _b.todayActiveStyle, onScheduleClick = _b.onScheduleClick, mobileCalendarMode = _b.mobileCalendarMode, label = _b.label, env = _b.env;
+        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, displayFormat = _b.displayFormat; _b.dateFormat; _b.timeFormat; var viewMode = _b.viewMode, timeConstraints = _b.timeConstraints, popOverContainer = _b.popOverContainer, clearable = _b.clearable, shortcuts = _b.shortcuts; _b.utc; var isEndDate = _b.isEndDate, overlayPlacement = _b.overlayPlacement, locale = _b.locale, format = _b.format, valueFormat = _b.valueFormat, borderMode = _b.borderMode, embed = _b.embed, minDate = _b.minDate, mobileUI = _b.mobileUI, maxDate = _b.maxDate, schedules = _b.schedules, largeMode = _b.largeMode, scheduleClassNames = _b.scheduleClassNames, todayActiveStyle = _b.todayActiveStyle, onScheduleClick = _b.onScheduleClick, mobileCalendarMode = _b.mobileCalendarMode, label = _b.label, env = _b.env, onClick = _b.onClick, onMouseEnter = _b.onMouseEnter, onMouseLeave = _b.onMouseLeave; _b.closeOnSelect;
         var __ = this.props.translate;
-        var _c = this.state, curTimeFormat = _c.curTimeFormat, curDateFormat = _c.curDateFormat;
-        var isOpened = this.state.isOpened;
+        var _c = this.state, curTimeFormat = _c.curTimeFormat, curDateFormat = _c.curDateFormat, isOpened = _c.isOpened;
+        var isConfirmMode = this.isConfirmMode();
         var date = this.state.value;
+        var isConfirmBtnDisbaled = false;
+        if (isConfirmMode) {
+            var lastModifiedValue = amisCore.normalizeDate(value, valueFormat || format);
+            isConfirmBtnDisbaled =
+                date && lastModifiedValue
+                    ? moment__default["default"](date).isSame(lastModifiedValue, 'second')
+                    : date === lastModifiedValue;
+        }
         var calendarMobile = (_J$X_(CalendarMobile["default"], { isDatePicker: true, timeFormat: curTimeFormat, displayForamt: displayFormat || inputFormat, startDate: date, defaultDate: date, minDate: minDate, maxDate: maxDate, dateFormat: curDateFormat, embed: embed, viewMode: viewMode, close: this.close, confirm: this.handleChange, footerExtra: this.renderShortCuts(shortcuts), showViewMode: viewMode === 'quarters' || viewMode === 'months' ? 'years' : 'months', timeConstraints: timeConstraints, isEndDate: isEndDate }));
         var CalendarMobileTitle = (_J$X_("div", { className: "".concat(ns, "CalendarMobile-title") }, label && typeof label === 'string' ? label : __('Calendar.datepicker')));
         var useCalendarMobile = mobileUI && ['days', 'months', 'quarters'].indexOf(viewMode) > -1;
@@ -585,7 +663,7 @@ var DatePicker = /** @class */ (function (_super) {
                 }, className) },
                 _J$X_(Calendar["default"], { value: date, onChange: this.handleChange, requiredConfirm: false, dateFormat: curDateFormat, timeFormat: curTimeFormat, isValidDate: this.checkIsValidDate, viewMode: viewMode, timeConstraints: timeConstraints, input: false, onClose: this.close, locale: locale, minDate: minDate, maxDate: maxDate, 
                     // utc={utc}
-                    schedules: schedulesData, env: env, largeMode: largeMode, todayActiveStyle: todayActiveStyle, onScheduleClick: onScheduleClick, embed: embed, mobileUI: mobileUI, isEndDate: isEndDate })));
+                    schedules: schedulesData, env: env, largeMode: largeMode, todayActiveStyle: todayActiveStyle, onScheduleClick: onScheduleClick, embed: embed, mobileUI: mobileUI, isEndDate: isEndDate, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave })));
         }
         return (_J$X_("div", { tabIndex: 0, onKeyPress: this.handleKeyPress, onFocus: this.handleFocus, onBlur: this.handleBlur, className: cx("DatePicker", (_a = {
                     'is-disabled': disabled,
@@ -606,9 +684,12 @@ var DatePicker = /** @class */ (function (_super) {
             !mobileUI && isOpened ? (_J$X_(amisCore.Overlay, { target: this.getTarget, container: popOverContainer || this.getParent, rootClose: false, placement: overlayPlacement, show: true },
                 _J$X_(amisCore.PopOver, { classPrefix: ns, className: cx("DatePicker-popover", popoverClassName), onHide: this.close, overlay: true, onClick: this.handlePopOverClick },
                     this.renderShortCuts(shortcuts),
-                    _J$X_(Calendar["default"], { value: date, onChange: this.handleChange, requiredConfirm: viewMode === 'time', dateFormat: curDateFormat, displayForamt: displayFormat || inputFormat, timeFormat: curTimeFormat, isValidDate: this.checkIsValidDate, viewMode: viewMode, timeConstraints: timeConstraints, input: false, onClose: this.close, locale: locale, minDate: minDate, maxDate: maxDate, mobileUI: mobileUI, isEndDate: isEndDate })))) : null,
+                    _J$X_(Calendar["default"], { value: date, onChange: this.handleChange, requiredConfirm: viewMode === 'time', dateFormat: curDateFormat, displayForamt: displayFormat || inputFormat, timeFormat: curTimeFormat, isValidDate: this.checkIsValidDate, viewMode: viewMode, timeConstraints: timeConstraints, input: false, onClose: this.close, locale: locale, minDate: minDate, maxDate: maxDate, mobileUI: mobileUI, isEndDate: isEndDate, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }),
+                    isConfirmMode ? (_J$X_("div", { className: "".concat(ns, "DateRangePicker-actions") },
+                        _J$X_(Button["default"], { size: "sm", onClick: this.close }, __('cancel')),
+                        _J$X_(Button["default"], { level: "primary", size: "sm", disabled: isConfirmBtnDisbaled, className: cx('m-l-sm'), onClick: this.handleConfirm }, __('confirm')))) : null))) : null,
             mobileUI ? (mobileCalendarMode === 'calendar' && useCalendarMobile ? (_J$X_(PopUp["default"], { isShow: isOpened, className: cx("".concat(ns, "CalendarMobile-pop")), onHide: this.close, header: CalendarMobileTitle }, calendarMobile)) : (_J$X_(PopUp["default"], { className: cx("".concat(ns, "DatePicker-popup DatePicker-mobile")), container: popOverContainer, isShow: isOpened, showClose: false, onHide: this.handleClick },
-                _J$X_(Calendar["default"], { value: date, onChange: this.handleChange, requiredConfirm: false, dateFormat: curDateFormat, displayForamt: displayFormat || inputFormat, timeFormat: curTimeFormat, isValidDate: this.checkIsValidDate, viewMode: viewMode, timeConstraints: timeConstraints, input: false, onClose: this.close, locale: locale, minDate: minDate, maxDate: maxDate, mobileUI: mobileUI })))) : null));
+                _J$X_(Calendar["default"], { value: date, onChange: this.handleChange, requiredConfirm: false, dateFormat: curDateFormat, displayForamt: displayFormat || inputFormat, timeFormat: curTimeFormat, isValidDate: this.checkIsValidDate, viewMode: viewMode, timeConstraints: timeConstraints, input: false, onClose: this.close, locale: locale, minDate: minDate, maxDate: maxDate, mobileUI: mobileUI, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave })))) : null));
     };
     DatePicker.defaultProps = {
         viewMode: 'days',
@@ -623,6 +704,12 @@ var DatePicker = /** @class */ (function (_super) {
             'bg-secondary'
         ]
     };
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", []),
+        tslib.__metadata("design:returntype", void 0)
+    ], DatePicker.prototype, "handleConfirm", null);
     return DatePicker;
 }(React__default["default"].Component));
 var DatePicker$1 = amisCore.themeable(amisCore.localeable(DatePicker));