amis-ui 2.0.2 → 2.2.0

package/esm/components/DateRangePicker.js

@@ -1,14 +1,16 @@
 /**
- * amis-ui v2.0.2
+ * amis-ui v2.2.0
  * Copyright 2018-2022 fex
  */
 
-import { __extends, __spreadArray, __assign } from 'tslib';
+import { __extends, __spreadArray, __assign, __rest } from 'tslib';
 import React__default from 'react';
 import moment from 'moment';
+import omit from 'lodash/omit';
+import kebabCase from 'lodash/kebabCase';
 import { findDOMNode } from 'react-dom';
 import { Icon } from './icons.js';
-import { noop, isMobile, ucFirst, Overlay, PopOver, themeable, localeable } from 'amis-core';
+import { noop, getComputedStyle, isMobile, ucFirst, Overlay, PopOver, themeable, localeable } from 'amis-core';
 import Calendar from './calendar/Calendar.js';
 import PopUp from './PopUp.js';
 import CalendarMobile from './CalendarMobile.js';
@@ -352,9 +354,11 @@ var DateRangePicker = /** @class */ (function (_super) {
         var _this = _super.call(this, props) || this;
         // 是否是第一次点击，如果是第一次点击就可以点任意地址
         _this.isFirstClick = true;
-        _this.nextMonth = moment().add(1, 'months');
+        _this.nextMonth = moment().add(1, 'months').startOf('day');
+        _this.currentMonth = moment().startOf('day');
         _this.startInputRef = React__default.createRef();
         _this.endInputRef = React__default.createRef();
+        _this.separatorRef = React__default.createRef();
         _this.calendarRef = React__default.createRef();
         _this.open = _this.open.bind(_this);
         _this.openStart = _this.openStart.bind(_this);
@@ -364,7 +368,7 @@ var DateRangePicker = /** @class */ (function (_super) {
         _this.endInputChange = _this.endInputChange.bind(_this);
         _this.handleDateChange = _this.handleDateChange.bind(_this);
         _this.handleStartDateChange = _this.handleStartDateChange.bind(_this);
-        _this.handeleEndDateChange = _this.handeleEndDateChange.bind(_this);
+        _this.handelEndDateChange = _this.handelEndDateChange.bind(_this);
         _this.handleTimeStartChange = _this.handleTimeStartChange.bind(_this);
         _this.handleTimeEndChange = _this.handleTimeEndChange.bind(_this);
         _this.handleFocus = _this.handleFocus.bind(_this);
@@ -394,7 +398,8 @@ var DateRangePicker = /** @class */ (function (_super) {
             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)
+            endInputValue: endDate === null || endDate === void 0 ? void 0 : endDate.format(inputFormat),
+            endDateOpenedFirst: false
         };
         return _this;
     }
@@ -410,6 +415,7 @@ var DateRangePicker = /** @class */ (function (_super) {
         }
         return newValue;
     };
+    /* 将日期时间转化为momemnt格式，如果输入的内容不合法则返回undefined */
     DateRangePicker.unFormatValue = function (value, format, joinValues, delimiter) {
         if (!value) {
             return {
@@ -420,9 +426,16 @@ var DateRangePicker = /** @class */ (function (_super) {
         if (joinValues && typeof value === 'string') {
             value = value.split(delimiter);
         }
+        var startDate = moment(value === null || value === void 0 ? void 0 : value[0], format);
+        var endDate = moment(value === null || value === void 0 ? void 0 : value[1], format);
+        /**
+         * 不合法的value输入都丢弃
+         * 注意undefined被moment认为是合法的输入，moment会转化为now，所以需要结合在一起判断
+         * @reference https://github.com/moment/moment/issues/1639
+         */
         return {
-            startDate: value[0] ? moment(value[0], format) : undefined,
-            endDate: value[1] ? moment(value[1], format) : undefined
+            startDate: value[0] && startDate.isValid() ? startDate : undefined,
+            endDate: value[1] && endDate.isValid() ? endDate : undefined
         };
     };
     DateRangePicker.prototype.componentDidMount = function () {
@@ -454,8 +467,10 @@ var DateRangePicker = /** @class */ (function (_super) {
             this.setState({
                 startDate: startDate,
                 endDate: endDate,
-                startInputValue: startDate === null || startDate === void 0 ? void 0 : startDate.format(inputFormat),
-                endInputValue: endDate === null || endDate === void 0 ? void 0 : endDate.format(inputFormat)
+                startInputValue: startDate && (startDate === null || startDate === void 0 ? void 0 : startDate.isValid())
+                    ? startDate === null || startDate === void 0 ? void 0 : startDate.format(inputFormat)
+                    : '',
+                endInputValue: endDate && (endDate === null || endDate === void 0 ? void 0 : endDate.isValid()) ? endDate === null || endDate === void 0 ? void 0 : endDate.format(inputFormat) : ''
             });
         }
     };
@@ -508,24 +523,39 @@ var DateRangePicker = /** @class */ (function (_super) {
         }
         this.setState({
             isOpened: true,
-            editState: 'end'
+            editState: 'end',
+            endDateOpenedFirst: true
         });
     };
     DateRangePicker.prototype.close = function (isConfirm) {
         if (isConfirm === void 0) { isConfirm = false; }
         if (!isConfirm) {
-            var _a = this.state, oldEndDate = _a.oldEndDate, oldStartDate = _a.oldStartDate;
-            var inputFormat = this.props.inputFormat;
+            /** 未点击确认关闭时，将日期恢复至未做任何选择的状态 */
+            var _a = this.props, value = _a.value, format = _a.format, joinValues = _a.joinValues, delimiter = _a.delimiter, inputFormat = _a.inputFormat;
+            var _b = DateRangePicker.unFormatValue(value, format, joinValues, delimiter), startDate = _b.startDate, endDate = _b.endDate;
+            this.setState({
+                startDate: startDate,
+                endDate: endDate,
+                oldStartDate: startDate,
+                oldEndDate: endDate,
+                startInputValue: startDate && moment(startDate).isValid()
+                    ? startDate.format(inputFormat)
+                    : '',
+                endInputValue: endDate && moment(endDate).isValid()
+                    ? endDate.format(inputFormat)
+                    : ''
+            });
+        }
+        else {
             this.setState({
-                endDate: oldEndDate,
-                endInputValue: oldEndDate ? oldEndDate.format(inputFormat) : '',
-                startDate: oldStartDate,
-                startInputValue: oldStartDate ? oldStartDate.format(inputFormat) : ''
+                oldStartDate: this.state.startDate,
+                oldEndDate: this.state.endDate
             });
         }
         this.setState({
             isOpened: false,
-            editState: undefined
+            editState: undefined,
+            endDateOpenedFirst: false
         }, this.blur);
     };
     DateRangePicker.prototype.handleClick = function () {
@@ -542,19 +572,17 @@ var DateRangePicker = /** @class */ (function (_super) {
         }
     };
     DateRangePicker.prototype.confirm = function () {
-        var _a;
-        if (!this.state.startDate && !this.state.endDate) {
+        var _a = this.props, format = _a.format, joinValues = _a.joinValues, delimiter = _a.delimiter, utc = _a.utc;
+        var _b = this.state, startDate = _b.startDate, endDate = _b.endDate;
+        if (!startDate && !endDate) {
             return;
         }
-        else if ((_a = this.state.startDate) === null || _a === void 0 ? void 0 : _a.isAfter(this.state.endDate)) {
+        else if (endDate && (startDate === null || startDate === void 0 ? void 0 : startDate.isAfter(this.state.endDate))) {
             return;
         }
-        this.props.onChange(DateRangePicker.formatValue({
-            startDate: this.state.startDate,
-            endDate: this.state.endDate
-        }, this.props.format, this.props.joinValues, this.props.delimiter, this.props.utc));
-        if (this.state.startDate && !this.state.endDate) {
-            this.setState({ editState: 'end' });
+        this.props.onChange(DateRangePicker.formatValue({ startDate: startDate, endDate: endDate }, format, joinValues, delimiter, utc));
+        if (startDate && !endDate) {
+            this.setState({ editState: 'end', endDateOpenedFirst: false });
         }
         else {
             this.close(true);
@@ -590,51 +618,46 @@ var DateRangePicker = /** @class */ (function (_super) {
             this.handleStartDateChange(newValue);
         }
         else if (editState === 'end') {
-            this.handeleEndDateChange(newValue);
+            this.handelEndDateChange(newValue);
         }
     };
     DateRangePicker.prototype.handleStartDateChange = function (newValue) {
         var _a = this.props, timeFormat = _a.timeFormat, minDate = _a.minDate, inputFormat = _a.inputFormat, type = _a.type;
-        var startDate = this.state.startDate;
+        var _b = this.state, startDate = _b.startDate, endDateOpenedFirst = _b.endDateOpenedFirst;
         if (minDate && newValue.isBefore(minDate)) {
             newValue = minDate;
         }
         var date = this.filterDate(newValue, startDate || minDate, timeFormat, 'start');
         var newState = {
             startDate: date,
-            oldStartDate: startDate,
             startInputValue: date.format(inputFormat)
         };
         // 这些没有时间的选择点第一次后第二次就是选结束时间
-        if (type === 'input-date-range' ||
-            type === 'input-year-range' ||
-            type === 'input-quarter-range' ||
-            type === 'input-month-range') {
+        if (!endDateOpenedFirst &&
+            (type === 'input-date-range' ||
+                type === 'input-year-range' ||
+                type === 'input-quarter-range' ||
+                type === 'input-month-range')) {
             newState.editState = 'end';
         }
         this.setState(newState);
     };
-    DateRangePicker.prototype.handeleEndDateChange = function (newValue) {
+    DateRangePicker.prototype.handelEndDateChange = function (newValue) {
         var _this = this;
-        var _a = this.props, embed = _a.embed, timeFormat = _a.timeFormat, inputFormat = _a.inputFormat;
-        var _b = this.state, startDate = _b.startDate, endDate = _b.endDate;
+        var _a = this.props, embed = _a.embed, timeFormat = _a.timeFormat, inputFormat = _a.inputFormat, type = _a.type;
+        var _b = this.state; _b.startDate; var endDate = _b.endDate, endDateOpenedFirst = _b.endDateOpenedFirst;
         newValue = this.getEndDateByDuration(newValue);
-        // 如果结束时间在前面，需要清空开始时间
-        if (newValue.isBefore(startDate)) {
-            this.setState({
-                startDate: undefined,
-                oldStartDate: startDate,
-                startInputValue: ''
-            });
-        }
+        var editState = endDateOpenedFirst ? 'start' : 'end';
         var date = this.filterDate(newValue, endDate, timeFormat, 'end');
         this.setState({
             endDate: date,
-            oldEndDate: endDate,
             endInputValue: date.format(inputFormat)
         }, function () {
             embed && _this.confirm();
         });
+        if (type !== 'input-datetime-range') {
+            this.setState({ editState: editState });
+        }
     };
     // 手动控制输入时间
     DateRangePicker.prototype.startInputChange = function (e) {
@@ -865,7 +888,7 @@ var DateRangePicker = /** @class */ (function (_super) {
                 ? maxDate.isBefore(endDate)
                     ? maxDate
                     : endDate
-                : undefined;
+                : maxDate || endDate;
         if (minDate && currentDate.isBefore(minDate, precision)) {
             return false;
         }
@@ -895,7 +918,7 @@ var DateRangePicker = /** @class */ (function (_super) {
                 ? minDate.isAfter(startDate)
                     ? minDate
                     : startDate
-                : undefined;
+                : minDate || startDate;
         if (minDate && currentDate.isBefore(minDate, precision)) {
             return false;
         }
@@ -916,12 +939,23 @@ var DateRangePicker = /** @class */ (function (_super) {
     };
     DateRangePicker.prototype.renderDay = function (props, currentDate) {
         var _a = this.state, startDate = _a.startDate, endDate = _a.endDate;
+        // 剔除掉 DaysView 中传递的参数
+        props = omit(props, ['todayActiveStyle']);
+        props.className = props.className.replace('rdtActive', '');
         if (startDate &&
             endDate &&
             currentDate.isBetween(startDate, endDate, 'day', '[]')) {
             props.className += ' rdtBetween';
         }
-        return (React__default.createElement("td", __assign({}, props),
+        if (startDate && currentDate.isSame(startDate, 'day')) {
+            props.className += ' rdtActive rdtStartDay';
+        }
+        if (endDate && currentDate.isSame(endDate, 'day')) {
+            props.className += ' rdtActive rdtEndDay';
+        }
+        var _b = this.getDisabledElementProps(currentDate), className = _b.className, others = __rest(_b, ["className"]);
+        props.className += className;
+        return (React__default.createElement("td", __assign({}, props, others),
             React__default.createElement("span", null, currentDate.date())));
     };
     DateRangePicker.prototype.renderMonth = function (props, month, year, date) {
@@ -936,7 +970,9 @@ var DateRangePicker = /** @class */ (function (_super) {
             currentDate.isBetween(startDate, endDate, 'month', '[]')) {
             props.className += ' rdtBetween';
         }
-        return (React__default.createElement("td", __assign({}, props),
+        var _b = this.getDisabledElementProps(currentDate), className = _b.className, others = __rest(_b, ["className"]);
+        props.className += className;
+        return (React__default.createElement("td", __assign({}, props, others),
             React__default.createElement("span", null, monthStrFixedLength)));
     };
     DateRangePicker.prototype.renderQuarter = function (props, quarter, year) {
@@ -947,7 +983,9 @@ var DateRangePicker = /** @class */ (function (_super) {
             currentDate.isBetween(startDate, endDate, 'quarter', '[]')) {
             props.className += ' rdtBetween';
         }
-        return (React__default.createElement("td", __assign({}, props),
+        var _b = this.getDisabledElementProps(currentDate), className = _b.className, others = __rest(_b, ["className"]);
+        props.className += className;
+        return (React__default.createElement("td", __assign({}, props, others),
             React__default.createElement("span", null,
                 "Q",
                 quarter)));
@@ -960,46 +998,114 @@ var DateRangePicker = /** @class */ (function (_super) {
             currentDate.isBetween(startDate, endDate, 'year', '[]')) {
             props.className += ' rdtBetween';
         }
-        return (React__default.createElement("td", __assign({}, props),
+        var _b = this.getDisabledElementProps(currentDate), className = _b.className, others = __rest(_b, ["className"]);
+        props.className += className;
+        return (React__default.createElement("td", __assign({}, props, others),
             React__default.createElement("span", null, year)));
     };
     DateRangePicker.prototype.renderCalendar = function () {
         var _this = this;
-        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, type = _b.type, _c = _b.viewMode, viewMode = _c === void 0 ? 'days' : _c; _b.useMobileUI;
+        var _a = this.props, ns = _a.classPrefix, cx = _a.classnames, dateFormat = _a.dateFormat, timeFormat = _a.timeFormat, inputFormat = _a.inputFormat, ranges = _a.ranges, locale = _a.locale, embed = _a.embed, type = _a.type, _b = _a.viewMode, viewMode = _b === void 0 ? 'days' : _b;
         var __ = this.props.translate;
-        var _d = this.state, startDate = _d.startDate, endDate = _d.endDate, editState = _d.editState;
+        var _c = this.state, startDate = _c.startDate, endDate = _c.endDate, editState = _c.editState;
+        var isDateTimeRange = type === 'input-datetime-range';
+        var isDateRange = type === 'input-date-range';
         // timeRange需要单独选择范围
-        var isTimeRange = type === 'input-datetime-range' || viewMode === 'time';
+        var isTimeRange = isDateTimeRange || viewMode === 'time';
+        var isConfirmBtnDisbaled = (isTimeRange && editState === 'start' && !startDate) ||
+            (isTimeRange && editState === 'end' && !endDate) ||
+            (startDate && (endDate === null || endDate === void 0 ? void 0 : endDate.isBefore(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__default.createElement("div", { className: cx("".concat(ns, "DateRangePicker-wrap")), ref: this.calendarRef },
             this.renderRanges(ranges),
-            (!isTimeRange || (editState === 'start' && !embed)) && (React__default.createElement(Calendar, { className: "".concat(ns, "DateRangePicker-start"), value: startDate, 
-                // 区分的原因是 time-range 左侧就只能选起始时间，而其它都能在左侧同时同时选择起始和结束
-                // TODO: 后续得把 time-range 代码拆分出来
-                onChange: type === 'input-datetime-range'
-                    ? 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, renderMonth: this.renderMonth, renderQuarter: this.renderQuarter, renderYear: this.renderYear, locale: locale, timeRangeHeader: "\u5F00\u59CB\u65F6\u95F4" })),
-            (!isTimeRange || (editState === 'end' && !embed)) && (React__default.createElement(Calendar, { className: "".concat(ns, "DateRangePicker-end"), value: endDate, onChange: type === 'input-datetime-range'
-                    ? this.handeleEndDateChange
-                    : viewMode === 'time'
-                        ? this.handleTimeEndChange
-                        : this.handleDateChange, requiredConfirm: false, dateFormat: dateFormat, inputFormat: inputFormat, timeFormat: timeFormat, viewDate: this.nextMonth, isEndDate: true, isValidDate: this.checkEndIsValidDate, viewMode: viewMode, input: false, onClose: this.close, renderDay: this.renderDay, renderMonth: this.renderMonth, renderQuarter: this.renderQuarter, renderYear: this.renderYear, locale: locale, timeRangeHeader: "\u7ED3\u675F\u65F6\u95F4" })),
+            React__default.createElement("div", { className: cx("".concat(ns, "DateRangePicker-picker-wrap")) },
+                (!isTimeRange || (editState === 'start' && !embed)) && (React__default.createElement(Calendar, { className: "".concat(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, renderMonth: this.renderMonth, renderQuarter: this.renderQuarter, renderYear: this.renderYear, locale: locale, timeRangeHeader: "\u5F00\u59CB\u65F6\u95F4" })),
+                (!isTimeRange || (editState === 'end' && !embed)) && (React__default.createElement(Calendar, { className: "".concat(ns, "DateRangePicker-end"), value: endDate, onChange: isDateTimeRange
+                        ? this.handelEndDateChange
+                        : viewMode === 'time'
+                            ? this.handleTimeEndChange
+                            : this.handleDateChange, requiredConfirm: false, dateFormat: dateFormat, inputFormat: inputFormat, timeFormat: timeFormat, viewDate: isDateTimeRange ? this.currentMonth : this.nextMonth, 
+                    // isEndDate
+                    isValidDate: this.checkEndIsValidDate, viewMode: viewMode, input: false, onClose: this.close, renderDay: this.renderDay, renderMonth: this.renderMonth, renderQuarter: this.renderQuarter, renderYear: this.renderYear, locale: locale, timeRangeHeader: "\u7ED3\u675F\u65F6\u95F4" }))),
             embed ? null : (React__default.createElement("div", { key: "button", className: "".concat(ns, "DateRangePicker-actions") },
-                React__default.createElement("a", { className: cx('Button', 'Button--default'), onClick: function () { return _this.close; } }, __('cancel')),
+                React__default.createElement("a", { className: cx('Button', 'Button--default'), onClick: function () { return _this.close(); } }, __('cancel')),
                 React__default.createElement("a", { className: cx('Button', 'Button--primary', 'm-l-sm', {
-                        'is-disabled': (!this.state.startDate &&
-                            isTimeRange &&
-                            editState === 'start') ||
-                            (!this.state.endDate && isTimeRange && editState === 'end') ||
-                            ((_a = this.state.endDate) === null || _a === void 0 ? void 0 : _a.isBefore(this.state.startDate))
+                        'is-disabled': isConfirmBtnDisbaled
                     }), onClick: this.confirm }, __('confirm'))))));
     };
+    DateRangePicker.prototype.getDisabledElementProps = function (currentDate) {
+        var _a = this.state; _a.endDateOpenedFirst; var endDate = _a.endDate, startDate = _a.startDate, editState = _a.editState;
+        var afterEndDate = editState === 'start' && currentDate > endDate;
+        var beforeStartDate = editState === 'end' && currentDate < startDate;
+        if (afterEndDate || beforeStartDate) {
+            return {
+                className: ' is-disabled',
+                onClick: undefined
+            };
+        }
+        return {
+            className: ''
+        };
+    };
+    /** 获取宽度类型变量的值 */
+    DateRangePicker.prototype.getValidWidthValue = function (element, propsName) {
+        if (!element || !propsName) {
+            return 0;
+        }
+        var propsValue = parseInt(getComputedStyle(element, kebabCase(propsName)), 10);
+        return isNaN(propsValue) ? 0 : propsValue;
+    };
+    DateRangePicker.prototype.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__default.createElement("div", { className: cx('DateRangePicker-activeCursor', { isFocused: isFocused }), style: {
+                position: 'absolute',
+                left: cursorLeft,
+                width: cursorWidth
+            } }));
+    };
     DateRangePicker.prototype.render = function () {
         var _a;
         var _this = this;
-        var _b = this.props, className = _b.className, popoverClassName = _b.popoverClassName, ns = _b.classPrefix, cx = _b.classnames, value = _b.value, startPlaceholder = _b.startPlaceholder, endPlaceholder = _b.endPlaceholder, popOverContainer = _b.popOverContainer, inputFormat = _b.inputFormat; _b.format; _b.joinValues; _b.delimiter; var clearable = _b.clearable, disabled = _b.disabled, embed = _b.embed, overlayPlacement = _b.overlayPlacement, borderMode = _b.borderMode, useMobileUI = _b.useMobileUI, timeFormat = _b.timeFormat, minDate = _b.minDate, maxDate = _b.maxDate, minDuration = _b.minDuration, maxDuration = _b.maxDuration, dateFormat = _b.dateFormat, _c = _b.viewMode, viewMode = _c === void 0 ? 'days' : _c, ranges = _b.ranges, label = _b.label;
+        var _b = this.props, className = _b.className, popoverClassName = _b.popoverClassName, ns = _b.classPrefix, cx = _b.classnames, value = _b.value, startPlaceholder = _b.startPlaceholder, endPlaceholder = _b.endPlaceholder, popOverContainer = _b.popOverContainer, inputFormat = _b.inputFormat; _b.format; _b.joinValues; _b.delimiter; var clearable = _b.clearable, disabled = _b.disabled, embed = _b.embed, overlayPlacement = _b.overlayPlacement, borderMode = _b.borderMode, useMobileUI = _b.useMobileUI, timeFormat = _b.timeFormat, minDate = _b.minDate, maxDate = _b.maxDate, minDuration = _b.minDuration, maxDuration = _b.maxDuration, dateFormat = _b.dateFormat, _c = _b.viewMode, viewMode = _c === void 0 ? 'days' : _c, ranges = _b.ranges, label = _b.label, animation = _b.animation;
         var useCalendarMobile = useMobileUI &&
             isMobile() &&
             ['days', 'months', 'quarters'].indexOf(viewMode) > -1;
@@ -1012,6 +1118,8 @@ var DateRangePicker = /** @class */ (function (_super) {
                 }, className) }, useCalendarMobile ? calendarMobile : this.renderCalendar()));
         }
         var CalendarMobileTitle = (React__default.createElement("div", { className: "".concat(ns, "CalendarMobile-title") }, label && typeof label === 'string' ? label : __('Calendar.datepicker')));
+        /** 是否启用游标动画 */
+        var useAnimation = animation !== false;
         return (React__default.createElement("div", { tabIndex: 0, onKeyPress: this.handleKeyPress, onFocus: this.handleFocus, onBlur: this.handleBlur, className: cx("".concat(ns, "DateRangePicker"), (_a = {
                     'is-disabled': disabled,
                     'is-focused': isFocused
@@ -1020,12 +1128,14 @@ var DateRangePicker = /** @class */ (function (_super) {
                 _a['is-mobile'] = useMobileUI && isMobile(),
                 _a), className), ref: this.dom },
             React__default.createElement(Input, { className: cx('DateRangePicker-input', {
-                    isActive: this.state.editState === 'start' && isOpened
+                    isActive: !useAnimation && this.state.editState === 'start' && isOpened
                 }), onChange: this.startInputChange, onClick: this.openStart, ref: this.startInputRef, placeholder: __(startPlaceholder), autoComplete: "off", value: this.state.startInputValue || '', disabled: disabled }),
-            React__default.createElement("span", { className: cx('DateRangePicker-input-separator') }, "-"),
+            React__default.createElement("span", { className: cx('DateRangePicker-input-separator'), ref: this.separatorRef },
+                React__default.createElement("span", { className: cx('DateRangePicker-input-separator-line') })),
             React__default.createElement(Input, { className: cx('DateRangePicker-input', {
-                    isActive: this.state.editState === 'end' && isOpened
+                    isActive: !useAnimation && this.state.editState === 'end' && isOpened
                 }), onChange: this.endInputChange, onClick: this.openEnd, ref: this.endInputRef, placeholder: __(endPlaceholder), autoComplete: "off", value: this.state.endInputValue || '', disabled: disabled }),
+            useAnimation ? this.renderActiveCursor() : null,
             clearable && !disabled && value ? (React__default.createElement("a", { className: "".concat(ns, "DateRangePicker-clear"), onClick: this.clearValue },
                 React__default.createElement(Icon, { icon: "input-clear", className: "icon" }))) : null,
             React__default.createElement("a", { className: "".concat(ns, "DateRangePicker-toggler") },
@@ -1044,7 +1154,8 @@ var DateRangePicker = /** @class */ (function (_super) {
         ranges: 'yesterday,7daysago,prevweek,thismonth,prevmonth,prevquarter',
         resetValue: '',
         closeOnSelect: true,
-        overlayPlacement: 'auto'
+        overlayPlacement: 'auto',
+        endDateOpenedFirst: false
     };
     return DateRangePicker;
 }(React__default.Component));

package/esm/components/Drawer.d.ts

@@ -58,15 +58,15 @@ export declare class Drawer extends React.Component<DrawerProps, DrawerState> {
     render(): JSX.Element;
 }
 declare const _default: {
-    new (props: Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "disabled" | "onHide" | "closeOnEsc" | "closeOnOutside" | "show" | "onExited" | "onEntered" | "height" | "width" | "bodyClassName" | "resizable"> & Partial<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "showCloseButton" | "size" | "overlay" | "container" | "position">> & Partial<Pick<Pick<DrawerProps, "showCloseButton" | "size" | "overlay" | "container" | "position">, never>> & import("amis-core/lib/theme").ThemeOutterProps): {
+    new (props: Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "disabled" | "onHide" | "closeOnEsc" | "width" | "height" | "closeOnOutside" | "show" | "onExited" | "onEntered" | "bodyClassName" | "resizable"> & Partial<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "showCloseButton" | "size" | "overlay" | "container" | "position">> & Partial<Pick<Pick<DrawerProps, "showCloseButton" | "size" | "overlay" | "container" | "position">, never>> & import("amis-core/lib/theme").ThemeOutterProps): {
         ref: any;
         childRef(ref: any): void;
         getWrappedInstance(): any;
         render(): JSX.Element;
         context: any;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "disabled" | "onHide" | "closeOnEsc" | "closeOnOutside" | "show" | "onExited" | "onEntered" | "height" | "width" | "bodyClassName" | "resizable"> & Partial<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "showCloseButton" | "size" | "overlay" | "container" | "position">> & Partial<Pick<Pick<DrawerProps, "showCloseButton" | "size" | "overlay" | "container" | "position">, never>> & import("amis-core/lib/theme").ThemeOutterProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "disabled" | "onHide" | "closeOnEsc" | "width" | "height" | "closeOnOutside" | "show" | "onExited" | "onEntered" | "bodyClassName" | "resizable"> & Partial<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "showCloseButton" | "size" | "overlay" | "container" | "position">> & Partial<Pick<Pick<DrawerProps, "showCloseButton" | "size" | "overlay" | "container" | "position">, never>> & import("amis-core/lib/theme").ThemeOutterProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "disabled" | "onHide" | "closeOnEsc" | "closeOnOutside" | "show" | "onExited" | "onEntered" | "height" | "width" | "bodyClassName" | "resizable"> & Partial<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "showCloseButton" | "size" | "overlay" | "container" | "position">> & Partial<Pick<Pick<DrawerProps, "showCloseButton" | "size" | "overlay" | "container" | "position">, never>> & import("amis-core/lib/theme").ThemeOutterProps> & Readonly<{
+        readonly props: Readonly<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "disabled" | "onHide" | "closeOnEsc" | "width" | "height" | "closeOnOutside" | "show" | "onExited" | "onEntered" | "bodyClassName" | "resizable"> & Partial<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "showCloseButton" | "size" | "overlay" | "container" | "position">> & Partial<Pick<Pick<DrawerProps, "showCloseButton" | "size" | "overlay" | "container" | "position">, never>> & import("amis-core/lib/theme").ThemeOutterProps> & Readonly<{
             children?: React.ReactNode;
         }>;
         state: Readonly<{}>;
@@ -74,17 +74,17 @@ declare const _default: {
             [key: string]: React.ReactInstance;
         };
         componentDidMount?(): void;
-        shouldComponentUpdate?(nextProps: Readonly<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "disabled" | "onHide" | "closeOnEsc" | "closeOnOutside" | "show" | "onExited" | "onEntered" | "height" | "width" | "bodyClassName" | "resizable"> & Partial<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "showCloseButton" | "size" | "overlay" | "container" | "position">> & Partial<Pick<Pick<DrawerProps, "showCloseButton" | "size" | "overlay" | "container" | "position">, never>> & import("amis-core/lib/theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): boolean;
+        shouldComponentUpdate?(nextProps: Readonly<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "disabled" | "onHide" | "closeOnEsc" | "width" | "height" | "closeOnOutside" | "show" | "onExited" | "onEntered" | "bodyClassName" | "resizable"> & Partial<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "showCloseButton" | "size" | "overlay" | "container" | "position">> & Partial<Pick<Pick<DrawerProps, "showCloseButton" | "size" | "overlay" | "container" | "position">, never>> & import("amis-core/lib/theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): boolean;
         componentWillUnmount?(): void;
         componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "disabled" | "onHide" | "closeOnEsc" | "closeOnOutside" | "show" | "onExited" | "onEntered" | "height" | "width" | "bodyClassName" | "resizable"> & Partial<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "showCloseButton" | "size" | "overlay" | "container" | "position">> & Partial<Pick<Pick<DrawerProps, "showCloseButton" | "size" | "overlay" | "container" | "position">, never>> & import("amis-core/lib/theme").ThemeOutterProps>, prevState: Readonly<{}>): any;
-        componentDidUpdate?(prevProps: Readonly<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "disabled" | "onHide" | "closeOnEsc" | "closeOnOutside" | "show" | "onExited" | "onEntered" | "height" | "width" | "bodyClassName" | "resizable"> & Partial<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "showCloseButton" | "size" | "overlay" | "container" | "position">> & Partial<Pick<Pick<DrawerProps, "showCloseButton" | "size" | "overlay" | "container" | "position">, never>> & import("amis-core/lib/theme").ThemeOutterProps>, prevState: Readonly<{}>, snapshot?: any): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "disabled" | "onHide" | "closeOnEsc" | "width" | "height" | "closeOnOutside" | "show" | "onExited" | "onEntered" | "bodyClassName" | "resizable"> & Partial<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "showCloseButton" | "size" | "overlay" | "container" | "position">> & Partial<Pick<Pick<DrawerProps, "showCloseButton" | "size" | "overlay" | "container" | "position">, never>> & import("amis-core/lib/theme").ThemeOutterProps>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "disabled" | "onHide" | "closeOnEsc" | "width" | "height" | "closeOnOutside" | "show" | "onExited" | "onEntered" | "bodyClassName" | "resizable"> & Partial<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "showCloseButton" | "size" | "overlay" | "container" | "position">> & Partial<Pick<Pick<DrawerProps, "showCloseButton" | "size" | "overlay" | "container" | "position">, never>> & import("amis-core/lib/theme").ThemeOutterProps>, prevState: Readonly<{}>, snapshot?: any): void;
         componentWillMount?(): void;
         UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "disabled" | "onHide" | "closeOnEsc" | "closeOnOutside" | "show" | "onExited" | "onEntered" | "height" | "width" | "bodyClassName" | "resizable"> & Partial<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "showCloseButton" | "size" | "overlay" | "container" | "position">> & Partial<Pick<Pick<DrawerProps, "showCloseButton" | "size" | "overlay" | "container" | "position">, never>> & import("amis-core/lib/theme").ThemeOutterProps>, nextContext: any): void;
-        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "disabled" | "onHide" | "closeOnEsc" | "closeOnOutside" | "show" | "onExited" | "onEntered" | "height" | "width" | "bodyClassName" | "resizable"> & Partial<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "showCloseButton" | "size" | "overlay" | "container" | "position">> & Partial<Pick<Pick<DrawerProps, "showCloseButton" | "size" | "overlay" | "container" | "position">, never>> & import("amis-core/lib/theme").ThemeOutterProps>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "disabled" | "onHide" | "closeOnEsc" | "closeOnOutside" | "show" | "onExited" | "onEntered" | "height" | "width" | "bodyClassName" | "resizable"> & Partial<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "showCloseButton" | "size" | "overlay" | "container" | "position">> & Partial<Pick<Pick<DrawerProps, "showCloseButton" | "size" | "overlay" | "container" | "position">, never>> & import("amis-core/lib/theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "disabled" | "onHide" | "closeOnEsc" | "closeOnOutside" | "show" | "onExited" | "onEntered" | "height" | "width" | "bodyClassName" | "resizable"> & Partial<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "showCloseButton" | "size" | "overlay" | "container" | "position">> & Partial<Pick<Pick<DrawerProps, "showCloseButton" | "size" | "overlay" | "container" | "position">, never>> & import("amis-core/lib/theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
+        componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "disabled" | "onHide" | "closeOnEsc" | "width" | "height" | "closeOnOutside" | "show" | "onExited" | "onEntered" | "bodyClassName" | "resizable"> & Partial<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "showCloseButton" | "size" | "overlay" | "container" | "position">> & Partial<Pick<Pick<DrawerProps, "showCloseButton" | "size" | "overlay" | "container" | "position">, never>> & import("amis-core/lib/theme").ThemeOutterProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "disabled" | "onHide" | "closeOnEsc" | "width" | "height" | "closeOnOutside" | "show" | "onExited" | "onEntered" | "bodyClassName" | "resizable"> & Partial<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "showCloseButton" | "size" | "overlay" | "container" | "position">> & Partial<Pick<Pick<DrawerProps, "showCloseButton" | "size" | "overlay" | "container" | "position">, never>> & import("amis-core/lib/theme").ThemeOutterProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "disabled" | "onHide" | "closeOnEsc" | "width" | "height" | "closeOnOutside" | "show" | "onExited" | "onEntered" | "bodyClassName" | "resizable"> & Partial<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "showCloseButton" | "size" | "overlay" | "container" | "position">> & Partial<Pick<Pick<DrawerProps, "showCloseButton" | "size" | "overlay" | "container" | "position">, never>> & import("amis-core/lib/theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "disabled" | "onHide" | "closeOnEsc" | "width" | "height" | "closeOnOutside" | "show" | "onExited" | "onEntered" | "bodyClassName" | "resizable"> & Partial<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "showCloseButton" | "size" | "overlay" | "container" | "position">> & Partial<Pick<Pick<DrawerProps, "showCloseButton" | "size" | "overlay" | "container" | "position">, never>> & import("amis-core/lib/theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
     };
     displayName: string;
     contextType: React.Context<string>;

package/esm/components/Drawer.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v2.0.2
+ * amis-ui v2.2.0
  * Copyright 2018-2022 fex
  */