amis-ui 3.1.1 → 3.3.0

package/esm/components/DateRangePicker.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.1.1
+ * amis-ui v3.3.0
  * Copyright 2018-2023 fex
  */
 
@@ -9,7 +9,7 @@ import { findDOMNode } from 'react-dom';
 import moment from 'moment';
 import omit from 'lodash/omit';
 import kebabCase from 'lodash/kebabCase';
-import { filterDate, noop, isExpression, FormulaExec, getComputedStyle, isMobile, ucFirst, Overlay, PopOver, themeable, localeable } from 'amis-core';
+import { isMobile, filterDate, noop, isExpression, FormulaExec, getComputedStyle, ucFirst, Overlay, PopOver, themeable, localeable } from 'amis-core';
 import { Icon } from './icons.js';
 import Calendar from './calendar/Calendar.js';
 import PopUp from './PopUp.js';
@@ -794,7 +794,8 @@ var DateRangePicker = /** @class */ (function (_super) {
         }, callback);
     };
     DateRangePicker.prototype.selectShortcut = function (shortcut) {
-        var _a = this.props, closeOnSelect = _a.closeOnSelect, minDateRaw = _a.minDateRaw, maxDateRaw = _a.maxDateRaw, format = _a.format, data = _a.data;
+        var _a = this.props, closeOnSelect = _a.closeOnSelect, minDateRaw = _a.minDateRaw, maxDateRaw = _a.maxDateRaw, format = _a.format, data = _a.data, useMobileUI = _a.useMobileUI;
+        var mobileUI = useMobileUI && isMobile();
         var now = moment();
         /** minDate和maxDate要实时计算，因为用户可能设置为${NOW()}，暂时不考虑毫秒级的时间差 */
         var minDate = minDateRaw
@@ -810,7 +811,7 @@ var DateRangePicker = /** @class */ (function (_super) {
                 ? moment.max(startDate, minDate)
                 : startDate,
             endDate: maxDate && (maxDate === null || maxDate === void 0 ? void 0 : maxDate.isValid()) ? moment.min(maxDate, endDate) : endDate
-        }, closeOnSelect ? this.confirm : noop);
+        }, closeOnSelect && !mobileUI ? this.confirm : noop);
     };
     DateRangePicker.prototype.renderShortcuts = function (shortcuts) {
         var _this = this;
@@ -854,17 +855,21 @@ var DateRangePicker = /** @class */ (function (_super) {
                 shortcut = __assign(__assign({}, item), { startDate: function () {
                         var startDate = isExpression(shortcutRaw_1.startDate)
                             ? moment(FormulaExec['formula'](shortcutRaw_1.startDate, data), format)
-                            : shortcutRaw_1.startDate;
+                            : typeof shortcutRaw_1.startDate === 'string'
+                                ? moment(shortcutRaw_1.startDate, format)
+                                : shortcutRaw_1.startDate;
                         return startDate &&
                             moment.isMoment(startDate) &&
-                            (startDate === null || startDate === void 0 ? void 0 : startDate.isValid())
+                            startDate.isValid()
                             ? startDate
                             : item.startDate;
                     }, endDate: function () {
                         var endDate = isExpression(shortcutRaw_1.endDate)
                             ? moment(FormulaExec['formula'](shortcutRaw_1.endDate, data), format)
-                            : shortcutRaw_1.startDate;
-                        return endDate && moment.isMoment(endDate) && (endDate === null || endDate === void 0 ? void 0 : endDate.isValid())
+                            : typeof shortcutRaw_1.endDate === 'string'
+                                ? moment(shortcutRaw_1.endDate, format)
+                                : shortcutRaw_1.endDate;
+                        return endDate && moment.isMoment(endDate) && endDate.isValid()
                             ? endDate
                             : item.endDate;
                     } });
@@ -1033,7 +1038,7 @@ var DateRangePicker = /** @class */ (function (_super) {
     };
     DateRangePicker.prototype.renderCalendar = function () {
         var _this = this;
-        var _a = this.props, ns = _a.classPrefix, cx = _a.classnames, dateFormat = _a.dateFormat, timeFormat = _a.timeFormat, inputFormat = _a.inputFormat, ranges = _a.ranges, shortcuts = _a.shortcuts, locale = _a.locale, embed = _a.embed, type = _a.type, _b = _a.viewMode, viewMode = _b === void 0 ? 'days' : _b;
+        var _a = this.props, ns = _a.classPrefix, cx = _a.classnames, dateFormat = _a.dateFormat, timeFormat = _a.timeFormat, inputFormat = _a.inputFormat, ranges = _a.ranges, shortcuts = _a.shortcuts, locale = _a.locale, embed = _a.embed, type = _a.type, _b = _a.viewMode, viewMode = _b === void 0 ? 'days' : _b, label = _a.label, useMobileUI = _a.useMobileUI;
         var __ = this.props.translate;
         var _c = this.state, startDate = _c.startDate, endDate = _c.endDate, editState = _c.editState;
         var isDateTimeRange = type === 'input-datetime-range';
@@ -1049,25 +1054,38 @@ var DateRangePicker = /** @class */ (function (_super) {
                     !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 },
+        var mobileUI = useMobileUI && isMobile();
+        return (React__default.createElement("div", { className: cx("".concat(ns, "DateRangePicker-wrap"), { 'is-mobile': mobileUI }), ref: this.calendarRef },
+            mobileUI && !embed ? (React__default.createElement("div", { className: cx('PickerColumns-header') },
+                React__default.createElement(Button, { className: "PickerColumns-cancel", level: "link", onClick: function () { return _this.close(false); } }, __('cancel')),
+                label && typeof label === 'string'
+                    ? label
+                    : __('Calendar.datepicker'),
+                React__default.createElement(Button, { className: "PickerColumns-confirm", level: "link", disabled: isConfirmBtnDisbaled || !startDate || !endDate, onClick: this.confirm }, __('confirm')))) : null,
             this.renderShortcuts(ranges || shortcuts),
-            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, 
+            React__default.createElement("div", { className: cx("".concat(ns, "DateRangePicker-picker-wrap"), {
+                    'is-vertical': embed
+                }) },
+                (!isTimeRange ||
+                    (editState === 'start' && !embed) ||
+                    (mobileUI && isTimeRange)) && (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.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", embed: embed })),
+                (!isTimeRange ||
+                    (editState === 'end' && !embed) ||
+                    (mobileUI && isTimeRange)) && (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") },
+                    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: embed }))),
+            embed || mobileUI ? null : (React__default.createElement("div", { key: "button", className: "".concat(ns, "DateRangePicker-actions") },
                 React__default.createElement(Button, { size: "sm", onClick: function () { return _this.close(); } }, __('cancel')),
                 React__default.createElement(Button, { level: "primary", size: "sm", className: cx('m-l-sm'), disabled: isConfirmBtnDisbaled, onClick: this.confirm }, __('confirm'))))));
     };
@@ -1142,8 +1160,11 @@ var DateRangePicker = /** @class */ (function (_super) {
         var _d = this.state, isOpened = _d.isOpened, isFocused = _d.isFocused, startDate = _d.startDate, endDate = _d.endDate;
         var __ = this.props.translate;
         var calendarMobile = (React__default.createElement(CalendarMobile, { timeFormat: timeFormat, inputFormat: inputFormat, startDate: startDate, endDate: endDate, minDate: minDate, maxDate: maxDate, minDuration: minDuration, maxDuration: maxDuration, dateFormat: dateFormat, embed: embed, viewMode: viewMode, close: this.close, confirm: this.confirm, onChange: this.handleMobileChange, footerExtra: this.renderShortcuts(ranges || shortcuts), showViewMode: viewMode === 'quarters' || viewMode === 'months' ? 'years' : 'months' }));
+        var mobileUI = useMobileUI && isMobile();
         if (embed) {
             return (React__default.createElement("div", { className: cx("".concat(ns, "DateRangeCalendar"), {
+                    'is-mobile': mobileUI
+                }, {
                     'is-disabled': disabled
                 }, className) }, useCalendarMobile ? calendarMobile : this.renderCalendar()));
         }
@@ -1172,7 +1193,7 @@ var DateRangePicker = /** @class */ (function (_super) {
                 React__default.createElement(Icon, { icon: viewMode === 'time' ? 'clock' : 'date', className: "icon", iconContent: viewMode === 'time'
                         ? 'DatePicker-toggler-clock'
                         : 'DatePicker-toggler-date' })),
-            isOpened ? (useMobileUI && isMobile() ? (React__default.createElement(PopUp, { isShow: isOpened, container: popOverContainer, className: cx("".concat(ns, "CalendarMobile-pop"), "".concat(ns, "CalendarMobile-pop--").concat(viewMode)), onHide: this.close, header: CalendarMobileTitle }, useCalendarMobile ? calendarMobile : this.renderCalendar())) : (React__default.createElement(Overlay, { target: function () { return _this.dom.current; }, onHide: this.close, container: popOverContainer || (function () { return findDOMNode(_this); }), rootClose: false, placement: overlayPlacement, show: true },
+            isOpened ? (useMobileUI && isMobile() ? (React__default.createElement(PopUp, { isShow: isOpened, container: popOverContainer, className: cx("".concat(ns, "CalendarMobile-pop"), "".concat(ns, "CalendarMobile-pop--").concat(viewMode)), onHide: this.close, header: CalendarMobileTitle, showClose: false }, useCalendarMobile ? calendarMobile : this.renderCalendar())) : (React__default.createElement(Overlay, { target: function () { return _this.dom.current; }, onHide: this.close, container: popOverContainer || (function () { return findDOMNode(_this); }), rootClose: false, placement: overlayPlacement, show: true },
                 React__default.createElement(PopOver, { classPrefix: ns, className: cx("".concat(ns, "DateRangePicker-popover"), popoverClassName), onHide: this.close, onClick: this.handlePopOverClick }, this.renderCalendar())))) : null));
     };
     DateRangePicker.defaultProps = {

package/esm/components/DndContainer.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.1.1
+ * amis-ui v3.3.0
  * Copyright 2018-2023 fex
  */
 

package/esm/components/Drawer.d.ts

@@ -60,11 +60,11 @@ export declare class Drawer extends React.Component<DrawerProps, DrawerState> {
     render(): React.JSX.Element;
 }
 declare const _default: {
-    new (props: Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "children" | "disabled" | "onHide" | "closeOnEsc" | "width" | "height" | "closeOnOutside" | "show" | "onExited" | "onEntered" | "bodyClassName" | "resizable"> & {
-        showCloseButton?: boolean | undefined;
+    new (props: Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "children" | "closeOnEsc" | "show" | "disabled" | "bodyClassName" | "onHide" | "width" | "height" | "closeOnOutside" | "resizable" | "onExited" | "onEntered"> & {
+        container?: any;
         size?: any;
+        showCloseButton?: boolean | undefined;
         overlay?: boolean | undefined;
-        container?: any;
         position?: DrawerPosition | undefined;
     } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps): {
         ref: any;
@@ -72,19 +72,19 @@ declare const _default: {
         getWrappedInstance(): any;
         render(): React.JSX.Element;
         context: unknown;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "children" | "disabled" | "onHide" | "closeOnEsc" | "width" | "height" | "closeOnOutside" | "show" | "onExited" | "onEntered" | "bodyClassName" | "resizable"> & {
-            showCloseButton?: boolean | undefined;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "children" | "closeOnEsc" | "show" | "disabled" | "bodyClassName" | "onHide" | "width" | "height" | "closeOnOutside" | "resizable" | "onExited" | "onEntered"> & {
+            container?: any;
             size?: any;
+            showCloseButton?: boolean | undefined;
             overlay?: boolean | undefined;
-            container?: any;
             position?: DrawerPosition | undefined;
         } & {} & import("packages/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>, "children" | "disabled" | "onHide" | "closeOnEsc" | "width" | "height" | "closeOnOutside" | "show" | "onExited" | "onEntered" | "bodyClassName" | "resizable"> & {
-            showCloseButton?: boolean | undefined;
+        readonly props: Readonly<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "children" | "closeOnEsc" | "show" | "disabled" | "bodyClassName" | "onHide" | "width" | "height" | "closeOnOutside" | "resizable" | "onExited" | "onEntered"> & {
+            container?: any;
             size?: any;
+            showCloseButton?: boolean | undefined;
             overlay?: boolean | undefined;
-            container?: any;
             position?: DrawerPosition | undefined;
         } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps>;
         state: Readonly<{}>;
@@ -92,57 +92,57 @@ declare const _default: {
             [key: string]: React.ReactInstance;
         };
         componentDidMount?(): void;
-        shouldComponentUpdate?(nextProps: Readonly<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "children" | "disabled" | "onHide" | "closeOnEsc" | "width" | "height" | "closeOnOutside" | "show" | "onExited" | "onEntered" | "bodyClassName" | "resizable"> & {
-            showCloseButton?: boolean | undefined;
+        shouldComponentUpdate?(nextProps: Readonly<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "children" | "closeOnEsc" | "show" | "disabled" | "bodyClassName" | "onHide" | "width" | "height" | "closeOnOutside" | "resizable" | "onExited" | "onEntered"> & {
+            container?: any;
             size?: any;
+            showCloseButton?: boolean | undefined;
             overlay?: boolean | undefined;
-            container?: any;
             position?: DrawerPosition | undefined;
         } & {} & import("packages/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>, "children" | "disabled" | "onHide" | "closeOnEsc" | "width" | "height" | "closeOnOutside" | "show" | "onExited" | "onEntered" | "bodyClassName" | "resizable"> & {
-            showCloseButton?: boolean | undefined;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "children" | "closeOnEsc" | "show" | "disabled" | "bodyClassName" | "onHide" | "width" | "height" | "closeOnOutside" | "resizable" | "onExited" | "onEntered"> & {
+            container?: any;
             size?: any;
+            showCloseButton?: boolean | undefined;
             overlay?: boolean | undefined;
-            container?: any;
             position?: DrawerPosition | undefined;
         } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps>, prevState: Readonly<{}>): any;
-        componentDidUpdate?(prevProps: Readonly<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "children" | "disabled" | "onHide" | "closeOnEsc" | "width" | "height" | "closeOnOutside" | "show" | "onExited" | "onEntered" | "bodyClassName" | "resizable"> & {
-            showCloseButton?: boolean | undefined;
+        componentDidUpdate?(prevProps: Readonly<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "children" | "closeOnEsc" | "show" | "disabled" | "bodyClassName" | "onHide" | "width" | "height" | "closeOnOutside" | "resizable" | "onExited" | "onEntered"> & {
+            container?: any;
             size?: any;
+            showCloseButton?: boolean | undefined;
             overlay?: boolean | undefined;
-            container?: any;
             position?: DrawerPosition | undefined;
         } & {} & import("packages/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>, "children" | "disabled" | "onHide" | "closeOnEsc" | "width" | "height" | "closeOnOutside" | "show" | "onExited" | "onEntered" | "bodyClassName" | "resizable"> & {
-            showCloseButton?: boolean | undefined;
+        componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "children" | "closeOnEsc" | "show" | "disabled" | "bodyClassName" | "onHide" | "width" | "height" | "closeOnOutside" | "resizable" | "onExited" | "onEntered"> & {
+            container?: any;
             size?: any;
+            showCloseButton?: boolean | undefined;
             overlay?: boolean | undefined;
-            container?: any;
             position?: DrawerPosition | undefined;
         } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps>, nextContext: any): void;
-        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "children" | "disabled" | "onHide" | "closeOnEsc" | "width" | "height" | "closeOnOutside" | "show" | "onExited" | "onEntered" | "bodyClassName" | "resizable"> & {
-            showCloseButton?: boolean | undefined;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "children" | "closeOnEsc" | "show" | "disabled" | "bodyClassName" | "onHide" | "width" | "height" | "closeOnOutside" | "resizable" | "onExited" | "onEntered"> & {
+            container?: any;
             size?: any;
+            showCloseButton?: boolean | undefined;
             overlay?: boolean | undefined;
-            container?: any;
             position?: DrawerPosition | undefined;
         } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "children" | "disabled" | "onHide" | "closeOnEsc" | "width" | "height" | "closeOnOutside" | "show" | "onExited" | "onEntered" | "bodyClassName" | "resizable"> & {
-            showCloseButton?: boolean | undefined;
+        componentWillUpdate?(nextProps: Readonly<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "children" | "closeOnEsc" | "show" | "disabled" | "bodyClassName" | "onHide" | "width" | "height" | "closeOnOutside" | "resizable" | "onExited" | "onEntered"> & {
+            container?: any;
             size?: any;
+            showCloseButton?: boolean | undefined;
             overlay?: boolean | undefined;
-            container?: any;
             position?: DrawerPosition | undefined;
         } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "children" | "disabled" | "onHide" | "closeOnEsc" | "width" | "height" | "closeOnOutside" | "show" | "onExited" | "onEntered" | "bodyClassName" | "resizable"> & {
-            showCloseButton?: boolean | undefined;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "children" | "closeOnEsc" | "show" | "disabled" | "bodyClassName" | "onHide" | "width" | "height" | "closeOnOutside" | "resizable" | "onExited" | "onEntered"> & {
+            container?: any;
             size?: any;
+            showCloseButton?: boolean | undefined;
             overlay?: boolean | undefined;
-            container?: any;
             position?: DrawerPosition | undefined;
         } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
     };

package/esm/components/Drawer.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.1.1
+ * amis-ui v3.3.0
  * Copyright 2018-2023 fex
  */