amis-ui 3.1.1 → 3.3.0

package/lib/components/calendar/DaysView.d.ts

@@ -2,6 +2,7 @@
 import moment from 'moment';
 import React from 'react';
 import { LocaleProps, ClassNamesFn } from 'amis-core';
+import type { RendererEnv } from 'amis-core';
 import { PickerOption } from '../PickerColumn';
 import { DateType } from './Calendar';
 import type { TimeScale } from './TimeView';
@@ -39,6 +40,7 @@ interface CustomDaysViewProps extends LocaleProps {
         content: any;
         className?: string;
     }>;
+    env?: RendererEnv;
     largeMode?: boolean;
     todayActiveStyle?: React.CSSProperties;
     onScheduleClick?: (scheduleData: any) => void;
@@ -89,6 +91,7 @@ export declare class CustomDaysView extends React.Component<CustomDaysViewProps>
     scrollToTop: (type: 'hours' | 'minutes' | 'seconds' | 'milliseconds', value: number, i: number, label?: string) => void;
     confirm: () => void;
     cancel: () => void;
+    curfilterHtml: (content: any) => any;
     renderDay: (props: any, currentDate: moment.Moment) => React.JSX.Element;
     /** 时间选择器数据源 */
     computedTimeOptions(timeScale: TimeScale): {

package/lib/components/calendar/DaysView.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.1.1
+ * amis-ui v3.3.0
  * Copyright 2018-2023 fex
  */
 
@@ -33,7 +33,9 @@ var omit__default = /*#__PURE__*/_interopDefaultLegacy(omit);
 var each__default = /*#__PURE__*/_interopDefaultLegacy(each);
 var kebabCase__default = /*#__PURE__*/_interopDefaultLegacy(kebabCase);
 
-// 最早基于 react-datetime 2.16.2 版本，后来大部分都自己写了
+var __react_jsx__ = require('react');
+var _J$X_ = (__react_jsx__["default"] || __react_jsx__).createElement;
+(__react_jsx__["default"] || __react_jsx__).Fragment;
 var CustomDaysView = /** @class */ (function (_super) {
     tslib.__extends(CustomDaysView, _super);
     function CustomDaysView(props) {
@@ -90,7 +92,7 @@ var CustomDaysView = /** @class */ (function (_super) {
         };
         _this.showTime = function () {
             var _a = _this.props, selectedDate = _a.selectedDate, viewDate = _a.viewDate, timeFormat = _a.timeFormat;
-            return (React__default["default"].createElement("div", { key: "stb", className: "rdtShowTime" }, (selectedDate || viewDate || moment__default["default"]()).format(timeFormat)));
+            return (_J$X_("div", { key: "stb", className: "rdtShowTime" }, (selectedDate || viewDate || moment__default["default"]()).format(timeFormat)));
         };
         _this.setTime = function (type, value) {
             var date = (_this.props.selectedDate || _this.props.viewDate).clone();
@@ -130,9 +132,16 @@ var CustomDaysView = /** @class */ (function (_super) {
         _this.cancel = function () {
             _this.props.onClose && _this.props.onClose();
         };
+        _this.curfilterHtml = function (content) {
+            var env = _this.props.env;
+            if (env === null || env === void 0 ? void 0 : env.filterHtml) {
+                return env.filterHtml(content);
+            }
+            return content;
+        };
         _this.renderDay = function (props, currentDate) {
             var todayActiveStyle = props.todayActiveStyle; /** 只有today才会传入这个属性 */
-            var _a = _this.props, cx = _a.classnames, __ = _a.translate;
+            var _a = _this.props, cx = _a.classnames, __ = _a.translate; _a.env;
             var injectedProps = omit__default["default"](props, ['todayActiveStyle']);
             /** 某些情况下需要用inline style覆盖动态class，需要hack important的样式 */
             var todayDomRef = function (node) {
@@ -212,6 +221,9 @@ var CustomDaysView = /** @class */ (function (_super) {
                         });
                         // 最多展示3个
                         showSchedule_1 = showSchedule_1.slice(0, 3);
+                        var locale = _this.props.viewDate.localeData();
+                        // 以周几作为一周的开始，0表示周日，1表示周一
+                        var firstDayOfWeek_1 = locale.firstDayOfWeek();
                         var scheduleDiv = showSchedule_1.map(function (item, index) {
                             var diffDays = moment__default["default"](item.endTime).diff(moment__default["default"](item.startTime), 'days');
                             /* 存在天数跨度小于1，但是横跨2天的case */
@@ -222,37 +234,39 @@ var CustomDaysView = /** @class */ (function (_super) {
                             }
                             /* 前面的计算结果是闭区间，所以最终结果要补足1 */
                             diffDays += 1;
-                            var width = item.width ||
-                                Math.min(diffDays, 7 - moment__default["default"](item.startTime).weekday());
-                            return (React__default["default"].createElement("div", { key: injectedProps.key + 'content' + index, className: cx('ScheduleCalendar-large-schedule-content', item.className), style: { width: width + '00%' }, onClick: function () {
+                            var endWidth = 7 - (moment__default["default"](item.startTime).weekday() - firstDayOfWeek_1 + 1);
+                            var width = item.width || Math.min(diffDays, endWidth) || 1;
+                            return (_J$X_("div", { key: injectedProps.key + 'content' + index, className: cx('ScheduleCalendar-large-schedule-content', item.className), style: { width: width + '00%' }, onClick: function () {
                                     return _this.props.onScheduleClick &&
                                         _this.props.onScheduleClick(scheduleData_1);
                                 } },
-                                React__default["default"].createElement("div", { className: cx('ScheduleCalendar-text-overflow') }, item.content)));
+                                _J$X_("div", { className: cx('ScheduleCalendar-text-overflow'), dangerouslySetInnerHTML: {
+                                        __html: _this.curfilterHtml(item.content)
+                                    } })));
                         });
-                        return (React__default["default"].createElement("td", tslib.__assign({}, injectedProps),
-                            React__default["default"].createElement("div", { className: cx('ScheduleCalendar-large-day-wrap') },
-                                React__default["default"].createElement("div", { className: cx('ScheduleCalendar-large-schedule-header') },
-                                    React__default["default"].createElement("span", null, currentDate.date())),
+                        return (_J$X_("td", tslib.__assign({}, injectedProps),
+                            _J$X_("div", { className: cx('ScheduleCalendar-large-day-wrap') },
+                                _J$X_("div", { className: cx('ScheduleCalendar-large-schedule-header') },
+                                    _J$X_("span", null, currentDate.date())),
                                 scheduleDiv,
-                                schedule_1.length > 3 && (React__default["default"].createElement("div", { className: cx('ScheduleCalendar-large-schedule-footer') },
+                                schedule_1.length > 3 && (_J$X_("div", { className: cx('ScheduleCalendar-large-schedule-footer') },
                                     schedule_1.length - 3,
                                     " ",
                                     __('more'))))));
                     }
                     // 正常模式
-                    var ScheduleIcon = (React__default["default"].createElement("div", { className: cx('ScheduleCalendar-icon', schedule_1[0].className), onClick: function () {
+                    var ScheduleIcon = (_J$X_("div", { className: cx('ScheduleCalendar-icon', schedule_1[0].className), onClick: function () {
                             return _this.props.onScheduleClick &&
                                 _this.props.onScheduleClick(scheduleData_1);
                         } }));
-                    return (React__default["default"].createElement("td", tslib.__assign({}, injectedProps),
-                        React__default["default"].createElement("span", { style: todayActiveStyle, ref: todayDomRef },
+                    return (_J$X_("td", tslib.__assign({}, injectedProps),
+                        _J$X_("span", { style: todayActiveStyle, ref: todayDomRef },
                             currentDate.date(),
                             ScheduleIcon)));
                 }
             }
-            return (React__default["default"].createElement("td", tslib.__assign({}, injectedProps),
-                React__default["default"].createElement("span", { style: todayActiveStyle, ref: todayDomRef }, currentDate.date())));
+            return (_J$X_("td", tslib.__assign({}, injectedProps),
+                _J$X_("span", { style: todayActiveStyle, ref: todayDomRef }, currentDate.date())));
         };
         _this.renderTimes = function () {
             var _a = _this.props, timeFormat = _a.timeFormat, selectedDate = _a.selectedDate, viewDate = _a.viewDate, isEndDate = _a.isEndDate, cx = _a.classnames;
@@ -276,7 +290,7 @@ var CustomDaysView = /** @class */ (function (_super) {
                         minutes: 'mm',
                         seconds: 'ss'
                     };
-                    inputs.push(React__default["default"].createElement(Downshift__default["default"], { key: i + 'input', inputValue: date.format(formatMap_1[type]) }, function (_a) {
+                    inputs.push(_J$X_(Downshift__default["default"], { key: i + 'input', inputValue: date.format(formatMap_1[type]) }, function (_a) {
                         var getInputProps = _a.getInputProps, openMenu = _a.openMenu, closeMenu = _a.closeMenu;
                         getInputProps({
                             onFocus: function () { return openMenu(); },
@@ -284,12 +298,12 @@ var CustomDaysView = /** @class */ (function (_super) {
                                 return _this.setTime(type, Math.max(min_1, Math.min(parseInt(e.currentTarget.value.replace(/\D/g, ''), 10) || 0, max_1)));
                             }
                         });
-                        return (React__default["default"].createElement("div", { className: cx('CalendarInputWrapper', 'CalendarInputWrapperMT') },
-                            React__default["default"].createElement("div", { className: cx('CalendarInput-sugs', type === 'hours'
+                        return (_J$X_("div", { className: cx('CalendarInputWrapper', 'CalendarInputWrapperMT') },
+                            _J$X_("div", { className: cx('CalendarInput-sugs', type === 'hours'
                                     ? 'CalendarInput-sugsHours'
                                     : 'CalendarInput-sugsTimes'), id: "".concat(_this.state.uniqueTag, "-").concat(i, "-input") }, options_1.map(function (option) {
                                 var _a;
-                                return (React__default["default"].createElement("div", { key: option.value, className: cx('CalendarInput-sugsItem', {
+                                return (_J$X_("div", { key: option.value, className: cx('CalendarInput-sugsItem', {
                                         'is-highlight': selectedDate
                                             ? option.value === date.format(formatMap_1[type])
                                             : option.value === ((_a = options_1 === null || options_1 === void 0 ? void 0 : options_1[0]) === null || _a === void 0 ? void 0 : _a.value)
@@ -300,24 +314,24 @@ var CustomDaysView = /** @class */ (function (_super) {
                                     } }, option.value));
                             }))));
                     }));
-                    inputs.push(React__default["default"].createElement("span", { key: i + 'divider' }));
+                    inputs.push(_J$X_("span", { key: i + 'divider' }));
                 }
             });
             inputs.length && inputs.pop();
-            return (React__default["default"].createElement("div", { className: cx('CalendarTimesWrapper') },
+            return (_J$X_("div", { className: cx('CalendarTimesWrapper') },
                 _this.showTime(),
-                React__default["default"].createElement("div", { className: cx('CalendarInputsWrapper') }, inputs)));
+                _J$X_("div", { className: cx('CalendarInputsWrapper') }, inputs)));
         };
         _this.renderFooter = function () {
             if (!_this.props.requiredConfirm) {
                 return null;
             }
             var _a = _this.props, __ = _a.translate, cx = _a.classnames;
-            return (React__default["default"].createElement("tfoot", { key: "tf" },
-                React__default["default"].createElement("tr", null,
-                    React__default["default"].createElement("td", { colSpan: 7 }, _this.props.requiredConfirm ? (React__default["default"].createElement("div", { key: "button", className: "rdtActions" },
-                        React__default["default"].createElement("a", { className: cx('Button', 'Button--default'), onClick: _this.cancel }, __('cancel')),
-                        React__default["default"].createElement("a", { className: cx('Button', 'Button--primary', 'm-l-sm'), onClick: _this.confirm }, __('confirm')))) : null))));
+            return (_J$X_("tfoot", { key: "tf" },
+                _J$X_("tr", null,
+                    _J$X_("td", { colSpan: 7 }, _this.props.requiredConfirm ? (_J$X_("div", { key: "button", className: "rdtActions" },
+                        _J$X_("a", { className: cx('Button', 'Button--default'), onClick: _this.cancel }, __('cancel')),
+                        _J$X_("a", { className: cx('Button', 'Button--primary', 'm-l-sm'), onClick: _this.confirm }, __('confirm')))) : null))));
         };
         _this.onPickerConfirm = function (value) {
             _this.props.onConfirm && _this.props.onConfirm(value, _this.state.types);
@@ -339,7 +353,7 @@ var CustomDaysView = /** @class */ (function (_super) {
         _this.renderPicker = function () {
             var __ = _this.props.translate;
             var title = _this.state.types.length > 3 ? __('Date.titleTime') : __('Date.titleDate');
-            return (React__default["default"].createElement(Picker["default"], { translate: _this.props.translate, locale: _this.props.locale, title: title, columns: _this.state.columns, value: _this.state.pickerValue, onChange: _this.onPickerChange, onConfirm: _this.onPickerConfirm, onClose: _this.cancel }));
+            return (_J$X_(Picker["default"], { translate: _this.props.translate, locale: _this.props.locale, title: title, columns: _this.state.columns, value: _this.state.pickerValue, onChange: _this.onPickerChange, onConfirm: _this.onPickerConfirm, onClose: _this.cancel }));
         };
         var selectedDate = props.selectedDate; props.viewDate; var timeFormat = props.timeFormat;
         var currentDate = selectedDate || moment__default["default"]();
@@ -410,7 +424,7 @@ var CustomDaysView = /** @class */ (function (_super) {
                 dayProps.onClick = this.updateSelectedDate;
             days.push(renderer(dayProps, currentDate, selected));
             if (days.length === 7) {
-                weeks.push(React__default["default"].createElement('tr', { key: prevMonth.format('M_D') }, days));
+                weeks.push(_J$X_('tr', { key: prevMonth.format('M_D') }, days));
                 days = [];
             }
             prevMonth.add(1, 'd');
@@ -455,35 +469,35 @@ var CustomDaysView = /** @class */ (function (_super) {
         var locale = date.localeData();
         var __ = this.props.translate;
         if (amisCore.isMobile() && useMobileUI && !embed) {
-            return React__default["default"].createElement("div", { className: "rdtYears" }, this.renderPicker());
+            return _J$X_("div", { className: "rdtYears" }, this.renderPicker());
         }
         var tableChildren = [
-            this.props.hideHeader ? null : (React__default["default"].createElement("thead", { key: "th" },
-                React__default["default"].createElement("tr", null,
-                    React__default["default"].createElement("th", { colSpan: 7 },
-                        React__default["default"].createElement("div", { className: "rdtHeader" },
-                            React__default["default"].createElement("a", { className: "rdtPrev", onClick: this.props.subtractTime(1, 'years') },
-                                React__default["default"].createElement(icons.Icon, { icon: "right-double-arrow", className: "icon date-icon-arrow-left" })),
-                            React__default["default"].createElement("a", { className: "rdtPrev", onClick: this.props.subtractTime(1, 'months') },
-                                React__default["default"].createElement(icons.Icon, { icon: "right-arrow", className: "icon date-icon-arrow-left" })),
-                            React__default["default"].createElement("div", { className: "rdtCenter" },
-                                React__default["default"].createElement("a", { className: "rdtSwitch", onClick: this.props.showView('years') }, date.format(__('dateformat.year'))),
-                                React__default["default"].createElement("a", { className: "rdtSwitch", onClick: this.props.showView('months') }, date.format(__('MMM')))),
-                            React__default["default"].createElement("a", { className: "rdtNext", onClick: this.props.addTime(1, 'months') },
-                                React__default["default"].createElement(icons.Icon, { icon: "right-arrow", className: "icon date-icon-arrow" })),
-                            React__default["default"].createElement("a", { className: "rdtNext", onClick: this.props.addTime(1, 'years') },
-                                React__default["default"].createElement(icons.Icon, { icon: "right-double-arrow", className: "icon date-icon-arrow" }))),
-                        React__default["default"].createElement("div", { className: "header-line" }))),
-                React__default["default"].createElement("tr", null, this.getDaysOfWeek(locale).map(function (day, index) { return (React__default["default"].createElement("th", { key: day + index, className: "dow" }, day)); })))),
-            React__default["default"].createElement("tbody", { key: "tb" }, this.renderDays())
+            this.props.hideHeader ? null : (_J$X_("thead", { key: "th" },
+                _J$X_("tr", null,
+                    _J$X_("th", { colSpan: 7 },
+                        _J$X_("div", { className: "rdtHeader" },
+                            _J$X_("a", { className: "rdtPrev", onClick: this.props.subtractTime(1, 'years') },
+                                _J$X_(icons.Icon, { icon: "right-double-arrow", className: "icon date-icon-arrow-left" })),
+                            _J$X_("a", { className: "rdtPrev", onClick: this.props.subtractTime(1, 'months') },
+                                _J$X_(icons.Icon, { icon: "right-arrow", className: "icon date-icon-arrow-left" })),
+                            _J$X_("div", { className: "rdtCenter" },
+                                _J$X_("a", { className: "rdtSwitch", onClick: this.props.showView('years') }, date.format(__('dateformat.year'))),
+                                _J$X_("a", { className: "rdtSwitch", onClick: this.props.showView('months') }, date.format(__('MMM')))),
+                            _J$X_("a", { className: "rdtNext", onClick: this.props.addTime(1, 'months') },
+                                _J$X_(icons.Icon, { icon: "right-arrow", className: "icon date-icon-arrow" })),
+                            _J$X_("a", { className: "rdtNext", onClick: this.props.addTime(1, 'years') },
+                                _J$X_(icons.Icon, { icon: "right-double-arrow", className: "icon date-icon-arrow" }))),
+                        _J$X_("div", { className: "header-line" }))),
+                _J$X_("tr", null, this.getDaysOfWeek(locale).map(function (day, index) { return (_J$X_("th", { key: day + index, className: "dow" }, day)); })))),
+            _J$X_("tbody", { key: "tb" }, this.renderDays())
         ];
-        return (React__default["default"].createElement(React__default["default"].Fragment, null,
-            React__default["default"].createElement("div", { className: timeFormat ? 'rdtDays' : '' },
-                React__default["default"].createElement("table", { className: timeFormat ? 'rdtDaysPart' : '' }, tableChildren),
-                timeFormat ? (React__default["default"].createElement("div", { className: timeFormat.toLowerCase().indexOf('s') > 0
+        return (_J$X_(React__default["default"].Fragment, null,
+            _J$X_("div", { className: timeFormat ? 'rdtDays' : '' },
+                _J$X_("table", { className: timeFormat ? 'rdtDaysPart' : '' }, tableChildren),
+                timeFormat ? (_J$X_("div", { className: timeFormat.toLowerCase().indexOf('s') > 0
                         ? 'rdtTimePartWithS'
                         : 'rdtTimePart' }, this.renderTimes())) : null),
-            React__default["default"].createElement("table", null, this.renderFooter())));
+            _J$X_("table", null, this.renderFooter())));
     };
     return CustomDaysView;
 }(React__default["default"].Component));

package/lib/components/calendar/MonthsView.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.1.1
+ * amis-ui v3.3.0
  * Copyright 2018-2023 fex
  */
 
@@ -18,6 +18,9 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
+var __react_jsx__ = require('react');
+var _J$X_ = (__react_jsx__["default"] || __react_jsx__).createElement;
+(__react_jsx__["default"] || __react_jsx__).Fragment;
 var CustomMonthsView = /** @class */ (function (_super) {
     tslib.__extends(CustomMonthsView, _super);
     function CustomMonthsView(props) {
@@ -30,8 +33,8 @@ var CustomMonthsView = /** @class */ (function (_super) {
             // Because some months are up to 5 characters long, we want to
             // use a fixed string length for consistency
             var monthStrFixedLength = monthStr.substring(0, strLength);
-            return (React__default["default"].createElement("td", tslib.__assign({}, rest),
-                React__default["default"].createElement("span", null, monthStrFixedLength)));
+            return (_J$X_("td", tslib.__assign({}, rest),
+                _J$X_("span", null, monthStrFixedLength)));
         };
         _this.onConfirm = function (value, types) {
             _this.props.onConfirm && _this.props.onConfirm(value, ['year', 'month']);
@@ -82,7 +85,7 @@ var CustomMonthsView = /** @class */ (function (_super) {
         _this.renderPicker = function () {
             var __ = _this.props.translate;
             var title = __('Date.titleMonth');
-            return (React__default["default"].createElement(Picker["default"], { translate: _this.props.translate, locale: _this.props.locale, title: title, columns: _this.state.columns, value: _this.state.pickerValue, onChange: _this.onPickerChange, onConfirm: _this.onConfirm, onClose: _this.props.onClose }));
+            return (_J$X_(Picker["default"], { translate: _this.props.translate, locale: _this.props.locale, title: title, columns: _this.state.columns, value: _this.state.pickerValue, onChange: _this.onPickerChange, onConfirm: _this.onConfirm, onClose: _this.props.onClose }));
         };
         var selectedDate = props.selectedDate, viewDate = props.viewDate;
         var currentDate = selectedDate || viewDate || moment__default["default"]();
@@ -130,7 +133,7 @@ var CustomMonthsView = /** @class */ (function (_super) {
                         : this.props.setDate && this.props.setDate('month');
             months.push(renderer(props, i, year, date && date.clone()));
             if (months.length === 3) {
-                rows.push(React__default["default"].createElement('tr', { key: i }, months));
+                rows.push(_J$X_('tr', { key: i }, months));
                 months = [];
             }
             i++;
@@ -148,17 +151,17 @@ var CustomMonthsView = /** @class */ (function (_super) {
         var showYearHead = !/^mm$/i.test(this.props.inputFormat || '') && !this.props.hideHeader;
         var canClick = /yy/i.test(this.props.inputFormat || '');
         if (amisCore.isMobile() && this.props.useMobileUI) {
-            return React__default["default"].createElement("div", { className: "rdtYears" }, this.renderPicker());
+            return _J$X_("div", { className: "rdtYears" }, this.renderPicker());
         }
-        return (React__default["default"].createElement("div", { className: "rdtMonths" },
-            showYearHead && (React__default["default"].createElement("table", { className: "headerTable" },
-                React__default["default"].createElement("thead", null,
-                    React__default["default"].createElement("tr", null,
-                        React__default["default"].createElement("th", { className: "rdtPrev", onClick: this.props.subtractTime(1, 'years') }, "\u00AB"),
-                        canClick ? (React__default["default"].createElement("th", { className: "rdtSwitch", onClick: this.props.showView('years') }, this.props.viewDate.format(__('dateformat.year')))) : (React__default["default"].createElement("th", { className: "rdtSwitch" }, this.props.viewDate.format(__('dateformat.year')))),
-                        React__default["default"].createElement("th", { className: "rdtNext", onClick: this.props.addTime(1, 'years') }, "\u00BB"))))),
-            React__default["default"].createElement("table", null,
-                React__default["default"].createElement("tbody", null, this.renderMonths()))));
+        return (_J$X_("div", { className: "rdtMonths" },
+            showYearHead && (_J$X_("table", { className: "headerTable" },
+                _J$X_("thead", null,
+                    _J$X_("tr", null,
+                        _J$X_("th", { className: "rdtPrev", onClick: this.props.subtractTime(1, 'years') }, "\u00AB"),
+                        canClick ? (_J$X_("th", { className: "rdtSwitch", onClick: this.props.showView('years') }, this.props.viewDate.format(__('dateformat.year')))) : (_J$X_("th", { className: "rdtSwitch" }, this.props.viewDate.format(__('dateformat.year')))),
+                        _J$X_("th", { className: "rdtNext", onClick: this.props.addTime(1, 'years') }, "\u00BB"))))),
+            _J$X_("table", null,
+                _J$X_("tbody", null, this.renderMonths()))));
     };
     return CustomMonthsView;
 }(React__default["default"].Component));

package/lib/components/calendar/QuartersView.d.ts

@@ -15,13 +15,24 @@ export interface QuarterViewProps extends LocaleProps, ThemeProps {
     renderQuarter: any;
     isValidDate: (date: moment.Moment) => boolean;
     hideHeader?: boolean;
+    useMobileUI?: boolean;
+    onConfirm?: (value: number[], types?: string[]) => void;
+    onClose?: () => void;
 }
 export declare class QuarterView extends React.Component<QuarterViewProps> {
+    state: {
+        columns: never[];
+        pickerValue: number[];
+    };
     renderYear(): React.JSX.Element | null;
     renderQuarters(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>[];
     renderQuarter: (props: any, quartar: number, year: number, date: moment.Moment) => React.JSX.Element;
     updateSelectedQuarter: (event: any) => void;
     alwaysValidDate(): boolean;
+    onPickerConfirm: (value: number[]) => void;
+    onPickerChange: (value: number[], index: number) => void;
+    cancel(): void;
+    renderPicker(): React.JSX.Element;
     render(): React.JSX.Element;
 }
 declare const _default: {

package/lib/components/calendar/QuartersView.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.1.1
+ * amis-ui v3.3.0
  * Copyright 2018-2023 fex
  */
 
@@ -11,25 +11,39 @@ var tslib = require('tslib');
 var moment = require('moment');
 var React = require('react');
 var amisCore = require('amis-core');
+var Picker = require('../Picker.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
+var __react_jsx__ = require('react');
+var _J$X_ = (__react_jsx__["default"] || __react_jsx__).createElement;
+(__react_jsx__["default"] || __react_jsx__).Fragment;
 var QuarterView = /** @class */ (function (_super) {
     tslib.__extends(QuarterView, _super);
     function QuarterView() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            columns: [],
+            pickerValue: [_this.props.viewDate.year(), _this.props.viewDate.quarter()]
+        };
         _this.renderQuarter = function (props, quartar, year, date) {
-            return (React__default["default"].createElement("td", tslib.__assign({}, props),
-                React__default["default"].createElement("span", null,
+            return (_J$X_("td", tslib.__assign({}, props),
+                _J$X_("span", null,
                     "Q",
                     quartar)));
         };
         _this.updateSelectedQuarter = function (event) {
             _this.props.updateSelectedDate(event);
         };
+        _this.onPickerConfirm = function (value) {
+            _this.props.onConfirm && _this.props.onConfirm(value, ['year', 'quarter']);
+        };
+        _this.onPickerChange = function (value, index) {
+            _this.setState({ pickerValue: value });
+        };
         return _this;
     }
     QuarterView.prototype.renderYear = function () {
@@ -39,12 +53,12 @@ var QuarterView = /** @class */ (function (_super) {
             return null;
         }
         var canClick = /yy/i.test(this.props.inputFormat || '');
-        return (React__default["default"].createElement("table", null,
-            React__default["default"].createElement("thead", null,
-                React__default["default"].createElement("tr", null,
-                    React__default["default"].createElement("th", { className: "rdtPrev", onClick: this.props.subtractTime(1, 'years') }, "\u00AB"),
-                    canClick ? (React__default["default"].createElement("th", { className: "rdtSwitch", onClick: this.props.showView('years') }, this.props.viewDate.format(__('dateformat.year')))) : (React__default["default"].createElement("th", { className: "rdtSwitch" }, this.props.viewDate.format(__('dateformat.year')))),
-                    React__default["default"].createElement("th", { className: "rdtNext", onClick: this.props.addTime(1, 'years') }, "\u00BB")))));
+        return (_J$X_("table", null,
+            _J$X_("thead", null,
+                _J$X_("tr", null,
+                    _J$X_("th", { className: "rdtPrev", onClick: this.props.subtractTime(1, 'years') }, "\u00AB"),
+                    canClick ? (_J$X_("th", { className: "rdtSwitch", onClick: this.props.showView('years') }, this.props.viewDate.format(__('dateformat.year')))) : (_J$X_("th", { className: "rdtSwitch" }, this.props.viewDate.format(__('dateformat.year')))),
+                    _J$X_("th", { className: "rdtNext", onClick: this.props.addTime(1, 'years') }, "\u00BB")))));
     };
     QuarterView.prototype.renderQuarters = function () {
         var date = this.props.selectedDate, quarter = this.props.viewDate.quarter(), year = this.props.viewDate.year(), rows = [], i = 1, quarters = [], renderer = this.props.renderQuarter || this.renderQuarter, isValid = this.props.isValidDate || this.alwaysValidDate, classes, props, isDisabled;
@@ -68,7 +82,7 @@ var QuarterView = /** @class */ (function (_super) {
             }
             quarters.push(renderer(props, i, year, date && date.clone()));
             if (quarters.length === 2) {
-                rows.push(React__default["default"].createElement('tr', { key: quarter + '_' + rows.length }, quarters));
+                rows.push(_J$X_('tr', { key: quarter + '_' + rows.length }, quarters));
                 quarters = [];
             }
             i++;
@@ -78,13 +92,44 @@ var QuarterView = /** @class */ (function (_super) {
     QuarterView.prototype.alwaysValidDate = function () {
         return true;
     };
+    QuarterView.prototype.cancel = function () {
+        var _a, _b;
+        (_b = (_a = this.props).onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
+    };
+    QuarterView.prototype.renderPicker = function () {
+        var __ = this.props.translate;
+        var title = __('Date.titleQuarter');
+        var minYear = new Date().getFullYear() - 100;
+        var maxYear = new Date().getFullYear() + 100;
+        var columns = [
+            {
+                options: amisCore.getRange(minYear, maxYear, 1)
+            },
+            {
+                options: amisCore.getRange(1, 4).map(function (item) {
+                    return {
+                        text: 'Q' + item,
+                        value: item
+                    };
+                })
+            }
+        ];
+        return (_J$X_(Picker["default"], { translate: this.props.translate, locale: this.props.locale, title: title, columns: columns, value: this.state.pickerValue, onChange: this.onPickerChange, onConfirm: this.onPickerConfirm, onClose: this.cancel }));
+    };
     QuarterView.prototype.render = function () {
-        var _a = this.props, cx = _a.classnames, hideHeader = _a.hideHeader;
-        return (React__default["default"].createElement("div", { className: cx('ClalendarQuarter') },
+        var _a = this.props, cx = _a.classnames, hideHeader = _a.hideHeader, useMobileUI = _a.useMobileUI;
+        var mobileUI = useMobileUI && amisCore.isMobile();
+        return mobileUI ? (this.renderPicker()) : (_J$X_("div", { className: cx('ClalendarQuarter') },
             hideHeader ? null : this.renderYear(),
-            React__default["default"].createElement("table", null,
-                React__default["default"].createElement("tbody", null, this.renderQuarters()))));
+            _J$X_("table", null,
+                _J$X_("tbody", null, this.renderQuarters()))));
     };
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", []),
+        tslib.__metadata("design:returntype", void 0)
+    ], QuarterView.prototype, "cancel", null);
     return QuarterView;
 }(React__default["default"].Component));
 var QuartersView = amisCore.localeable(QuarterView);