amis-ui 3.1.1 → 3.3.0

package/lib/components/CalendarMobile.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.1.1
+ * amis-ui v3.3.0
  * Copyright 2018-2023 fex
  */
 
@@ -18,11 +18,9 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
 
-/**
- * @file CalendarMobile
- * @description 移动端日历组件
- * @author hongyang03
- */
+var __react_jsx__ = require('react');
+var _J$X_ = (__react_jsx__["default"] || __react_jsx__).createElement;
+(__react_jsx__["default"] || __react_jsx__).Fragment;
 var CalendarMobile = /** @class */ (function (_super) {
     tslib.__extends(CalendarMobile, _super);
     function CalendarMobile(props) {
@@ -82,6 +80,7 @@ var CalendarMobile = /** @class */ (function (_super) {
     CalendarMobile.prototype.componentDidUpdate = function (prevProps) {
         var _this = this;
         var props = this.props;
+        var ns = props.classPrefix;
         if (prevProps.minDate !== props.minDate ||
             prevProps.maxDate !== props.maxDate) {
             var currentDate = this.state.currentDate;
@@ -92,6 +91,21 @@ var CalendarMobile = /** @class */ (function (_super) {
                 currentDate: dateRange.currentDate
             }, function () { return _this.initMonths(); });
         }
+        if ((prevProps.startDate !== props.startDate &&
+            props.startDate !== this.state.startDate) ||
+            (prevProps.endDate !== props.endDate &&
+                props.endDate !== this.state.endDate)) {
+            this.setState({
+                startDate: props.startDate,
+                endDate: props.endDate
+            }, function () {
+                return requestAnimationFrame(function () {
+                    var _a;
+                    (_a = document
+                        .querySelector(".".concat(ns, "CalendarMobile:not(.").concat(ns, "CalendarMobile-embed) .rdtRangeStart:not(.rdtNew)"))) === null || _a === void 0 ? void 0 : _a.scrollIntoView();
+                });
+            });
+        }
     };
     CalendarMobile.prototype.componentWillUnmount = function () {
         this.setState({ showToast: false });
@@ -298,10 +312,10 @@ var CalendarMobile = /** @class */ (function (_super) {
         var _this = this;
         var cx = this.props.classnames;
         var renderProps = this.getRenderProps(props, currentDate);
-        return (React__default["default"].createElement("td", tslib.__assign({}, renderProps.props),
-            React__default["default"].createElement("div", { className: "calendar-wrap", onClick: function () { return _this.handleCalendarClick(renderProps.rdtDisabled); } },
+        return (_J$X_("td", tslib.__assign({}, renderProps.props),
+            _J$X_("div", { className: "calendar-wrap", onClick: function () { return _this.handleCalendarClick(renderProps.rdtDisabled); } },
                 currentDate.date(),
-                React__default["default"].createElement("div", { className: cx('CalendarMobile-range-text') }, renderProps.footerText))));
+                _J$X_("div", { className: cx('CalendarMobile-range-text') }, renderProps.footerText))));
     };
     CalendarMobile.prototype.renderMonth = function (props, month, year) {
         var _this = this;
@@ -313,21 +327,21 @@ var CalendarMobile = /** @class */ (function (_super) {
         var strLength = 3;
         var monthStrFixedLength = monthStr.substring(0, strLength);
         var renderProps = this.getRenderProps(props, currentDate);
-        return (React__default["default"].createElement("td", tslib.__assign({}, renderProps.props),
-            React__default["default"].createElement("div", { className: "calendar-wrap", onClick: function () { return _this.handleCalendarClick(renderProps.rdtDisabled); } },
+        return (_J$X_("td", tslib.__assign({}, renderProps.props),
+            _J$X_("div", { className: "calendar-wrap", onClick: function () { return _this.handleCalendarClick(renderProps.rdtDisabled); } },
                 monthStrFixedLength,
-                React__default["default"].createElement("div", { className: cx('CalendarMobile-range-text') }, renderProps.footerText))));
+                _J$X_("div", { className: cx('CalendarMobile-range-text') }, renderProps.footerText))));
     };
     CalendarMobile.prototype.renderQuarter = function (props, quarter, year) {
         var _this = this;
         var cx = this.props.classnames;
         var currentDate = moment__default["default"]().year(year).quarter(quarter);
         var renderProps = this.getRenderProps(props, currentDate);
-        return (React__default["default"].createElement("td", tslib.__assign({}, props),
-            React__default["default"].createElement("div", { className: "calendar-wrap", onClick: function () { return _this.handleCalendarClick(renderProps.rdtDisabled); } },
+        return (_J$X_("td", tslib.__assign({}, props),
+            _J$X_("div", { className: "calendar-wrap", onClick: function () { return _this.handleCalendarClick(renderProps.rdtDisabled); } },
                 "Q",
                 quarter,
-                React__default["default"].createElement("div", { className: cx('CalendarMobile-range-text') }, renderProps.footerText))));
+                _J$X_("div", { className: cx('CalendarMobile-range-text') }, renderProps.footerText))));
     };
     CalendarMobile.prototype.handleMobileChange = function (newValue) {
         var _this = this;
@@ -378,7 +392,7 @@ var CalendarMobile = /** @class */ (function (_super) {
     };
     CalendarMobile.prototype.renderMobileCalendarBody = function () {
         var _this = this;
-        var _a = this.props, cx = _a.classnames, dateFormat = _a.dateFormat; _a.timeFormat; var inputFormat = _a.inputFormat, locale = _a.locale, _b = _a.viewMode, viewMode = _b === void 0 ? 'days' : _b, close = _a.close, defaultDate = _a.defaultDate, showViewMode = _a.showViewMode;
+        var _a = this.props, cx = _a.classnames, dateFormat = _a.dateFormat; _a.timeFormat; var inputFormat = _a.inputFormat, locale = _a.locale, _b = _a.viewMode, viewMode = _b === void 0 ? 'days' : _b, close = _a.close, defaultDate = _a.defaultDate, showViewMode = _a.showViewMode, isEndDate = _a.isEndDate;
         var __ = this.props.translate;
         var _c = this.state, minDate = _c.minDate, maxDate = _c.maxDate;
         if (!minDate || !maxDate) {
@@ -395,34 +409,34 @@ var CalendarMobile = /** @class */ (function (_super) {
             }
             calendarDates.push(date);
         }
-        return (React__default["default"].createElement("div", { className: cx('CalendarMobile-body'), ref: this.mobileBody, onScroll: this.onMobileBodyScroll }, calendarDates.map(function (calendarDate, index) {
+        return (_J$X_("div", { className: cx('CalendarMobile-body'), ref: this.mobileBody, onScroll: this.onMobileBodyScroll }, calendarDates.map(function (calendarDate, index) {
             var rdtOldNone = showViewMode === 'months' &&
                 calendarDate.clone().startOf('month').day() === 1
                 ? 'rdtOldNone'
                 : '';
-            return (React__default["default"].createElement("div", { className: cx('CalendarMobile-calendar-wrap', rdtOldNone), key: 'calendar-wrap' + index },
-                showViewMode === 'months' && (React__default["default"].createElement("div", { className: cx('CalendarMobile-calendar-mark'), key: 'calendar-mark' + index }, calendarDate.month() + 1)),
-                React__default["default"].createElement("div", { className: cx('CalendarMobile-calendar-header') },
-                    React__default["default"].createElement("span", { className: "rdtSwitch" }, calendarDate.format(__('dateformat.year'))),
-                    showViewMode === 'months' && (React__default["default"].createElement("span", { className: "rdtSwitch" }, calendarDate.format(__('MMM'))))),
-                React__default["default"].createElement(Calendar["default"], { className: cx('CalendarMobile-calendar', rdtOldNone), viewDate: calendarDate, value: calendarDate, onChange: _this.handleMobileChange, requiredConfirm: false, dateFormat: dateFormat, inputFormat: inputFormat, timeFormat: "", isValidDate: _this.checkIsValidDate, viewMode: viewMode, input: false, onClose: close, renderDay: _this.renderMobileDay, renderMonth: _this.renderMonth, renderQuarter: _this.renderQuarter, locale: locale, hideHeader: true, updateOn: viewMode, key: 'calendar' + index })));
+            return (_J$X_("div", { className: cx('CalendarMobile-calendar-wrap', rdtOldNone), key: 'calendar-wrap' + index },
+                showViewMode === 'months' && (_J$X_("div", { className: cx('CalendarMobile-calendar-mark'), key: 'calendar-mark' + index }, calendarDate.month() + 1)),
+                _J$X_("div", { className: cx('CalendarMobile-calendar-header') },
+                    _J$X_("span", { className: "rdtSwitch" }, calendarDate.format(__('dateformat.year'))),
+                    showViewMode === 'months' && (_J$X_("span", { className: "rdtSwitch" }, calendarDate.format(__('MMM'))))),
+                _J$X_(Calendar["default"], { className: cx('CalendarMobile-calendar', rdtOldNone), viewDate: calendarDate, value: calendarDate, onChange: _this.handleMobileChange, requiredConfirm: false, dateFormat: dateFormat, inputFormat: inputFormat, timeFormat: "", isValidDate: _this.checkIsValidDate, viewMode: viewMode, input: false, onClose: close, renderDay: _this.renderMobileDay, renderMonth: _this.renderMonth, renderQuarter: _this.renderQuarter, locale: locale, hideHeader: true, updateOn: viewMode, key: 'calendar' + index, isEndDate: isEndDate })));
         })));
     };
     CalendarMobile.prototype.renderMobileTimePicker = function () {
-        var _a = this.props, cx = _a.classnames, timeFormat = _a.timeFormat, locale = _a.locale, close = _a.close, timeConstraints = _a.timeConstraints, defaultDate = _a.defaultDate, isDatePicker = _a.isDatePicker;
+        var _a = this.props, cx = _a.classnames, timeFormat = _a.timeFormat, locale = _a.locale, close = _a.close, timeConstraints = _a.timeConstraints, defaultDate = _a.defaultDate, isDatePicker = _a.isDatePicker, isEndDate = _a.isEndDate;
         var __ = this.props.translate;
         var _b = this.state, startDate = _b.startDate, endDate = _b.endDate, dateTime = _b.dateTime;
-        return (React__default["default"].createElement("div", { className: cx('CalendarMobile-time') },
-            React__default["default"].createElement("div", { className: cx('CalendarMobile-time-title') }, isDatePicker
+        return (_J$X_("div", { className: cx('CalendarMobile-time') },
+            _J$X_("div", { className: cx('CalendarMobile-time-title') }, isDatePicker
                 ? __('Date.titleTime')
                 : startDate && endDate
                     ? __('Calendar.endPick')
                     : __('Calendar.startPick')),
-            React__default["default"].createElement(Calendar["default"], { className: cx('CalendarMobile-time-calendar'), value: defaultDate, onChange: this.handleTimeChange, requiredConfirm: false, timeFormat: timeFormat, viewMode: "time", input: false, onClose: close, locale: locale, useMobileUI: true, showToolbar: false, viewDate: moment__default["default"]().set({
+            _J$X_(Calendar["default"], { className: cx('CalendarMobile-time-calendar'), value: defaultDate, onChange: this.handleTimeChange, requiredConfirm: false, timeFormat: timeFormat, viewMode: "time", input: false, onClose: close, locale: locale, useMobileUI: true, showToolbar: false, viewDate: moment__default["default"]().set({
                     hour: dateTime[0],
                     minute: dateTime[1],
                     second: dateTime[2] || 0
-                }), timeConstraints: timeConstraints, isValidDate: this.checkIsValidDate })));
+                }), timeConstraints: timeConstraints, isValidDate: this.checkIsValidDate, isEndDate: isEndDate })));
     };
     CalendarMobile.prototype.render = function () {
         var _a = this.props, className = _a.className, cx = _a.classnames, embed = _a.embed, close = _a.close, confirm = _a.confirm, footerExtra = _a.footerExtra, timeFormat = _a.timeFormat, showViewMode = _a.showViewMode, isDatePicker = _a.isDatePicker;
@@ -431,32 +445,32 @@ var CalendarMobile = /** @class */ (function (_super) {
         var dateNow = currentDate
             ? currentDate.format(__("Calendar.".concat(showViewMode === 'months' ? 'yearmonth' : 'year')))
             : moment__default["default"]().format(__("Calendar.".concat(showViewMode === 'months' ? 'yearmonth' : 'year')));
-        var header = (React__default["default"].createElement("div", { className: cx('CalendarMobile-header'), ref: this.mobileHeader },
-            React__default["default"].createElement("div", { className: cx('CalendarMobile-subtitle') },
-                React__default["default"].createElement("span", { className: "subtitle-text" },
+        var header = (_J$X_("div", { className: cx('CalendarMobile-header'), ref: this.mobileHeader },
+            _J$X_("div", { className: cx('CalendarMobile-subtitle') },
+                _J$X_("span", { className: "subtitle-text" },
                     currentDate &&
-                        currentDate.isSameOrBefore(minDate, showViewMode) ? null : (React__default["default"].createElement("a", { className: "rdtPrev", onClick: this.scrollPreYear }, "\u2039")),
+                        currentDate.isSameOrBefore(minDate, showViewMode) ? null : (_J$X_("a", { className: "rdtPrev", onClick: this.scrollPreYear }, "\u2039")),
                     dateNow,
                     (currentDate &&
                         currentDate.isSameOrAfter(maxDate, showViewMode)) ||
-                        isScrollToBottom ? null : (React__default["default"].createElement("a", { className: "rdtNext", onClick: this.scrollAfterYear }, "\u203A")))),
-            showViewMode === 'months' ? (React__default["default"].createElement("div", { className: cx('CalendarMobile-weekdays') }, this.getDaysOfWeek().map(function (day, index) { return (React__default["default"].createElement("span", { key: day + index, className: "weekday" }, day)); }))) : null));
-        var footer = (React__default["default"].createElement("div", { className: cx('CalendarMobile-footer') },
+                        isScrollToBottom ? null : (_J$X_("a", { className: "rdtNext", onClick: this.scrollAfterYear }, "\u203A")))),
+            showViewMode === 'months' ? (_J$X_("div", { className: cx('CalendarMobile-weekdays') }, this.getDaysOfWeek().map(function (day, index) { return (_J$X_("span", { key: day + index, className: "weekday" }, day)); }))) : null));
+        var footer = (_J$X_("div", { className: cx('CalendarMobile-footer') },
             timeFormat && startDate && this.renderMobileTimePicker(),
-            React__default["default"].createElement("div", { className: cx('CalendarMobile-footer-toolbar') },
-                React__default["default"].createElement("div", { className: cx('CalendarMobile-footer-ranges') }, footerExtra),
-                confirm && !embed && (React__default["default"].createElement("a", { className: cx('Button', 'Button--primary', 'date-range-confirm', {
+            _J$X_("div", { className: cx('CalendarMobile-footer-toolbar') },
+                _J$X_("div", { className: cx('CalendarMobile-footer-ranges') }, footerExtra),
+                confirm && !embed && (_J$X_("a", { className: cx('Button', 'Button--primary', 'date-range-confirm', {
                         'is-disabled': !startDate || !(endDate || isDatePicker)
                     }), onClick: function () {
                         confirm(startDate, endDate);
                         close && close();
                     } }, __('confirm'))))));
-        return (React__default["default"].createElement("div", { className: cx('CalendarMobile', embed ? 'CalendarMobile-embed' : '', className) },
-            React__default["default"].createElement("div", { className: cx('CalendarMobile-wrap') },
+        return (_J$X_("div", { className: cx('CalendarMobile', embed ? 'CalendarMobile-embed' : '', className) },
+            _J$X_("div", { className: cx('CalendarMobile-wrap') },
                 header,
                 this.renderMobileCalendarBody(),
                 footer),
-            showToast ? (React__default["default"].createElement("div", { className: cx('CalendarMobile-toast') }, __('Calendar.toast'))) : null));
+            showToast ? (_J$X_("div", { className: cx('CalendarMobile-toast') }, __('Calendar.toast'))) : null));
     };
     CalendarMobile.defaultProps = {
         showViewMode: 'months'