amis-ui 2.9.0 → 3.1.0

package/lib/components/DateRangePicker.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v2.9.0
+ * amis-ui v3.1.0
  * Copyright 2018-2023 fex
  */
 
@@ -9,12 +9,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var React = require('react');
+var ReactDOM = require('react-dom');
 var moment = require('moment');
 var omit = require('lodash/omit');
 var kebabCase = require('lodash/kebabCase');
-var ReactDOM = require('react-dom');
-var icons = require('./icons.js');
 var amisCore = require('amis-core');
+var icons = require('./icons.js');
 var Calendar = require('./calendar/Calendar.js');
 var PopUp = require('./PopUp.js');
 var CalendarMobile = require('./CalendarMobile.js');
@@ -33,7 +33,7 @@ var kebabCase__default = /*#__PURE__*/_interopDefaultLegacy(kebabCase);
  * @description 自定义日期范围时间选择器组件
  * @author fex
  */
-var availableRanges = {
+var availableShortcuts = {
     'today': {
         label: 'Date.today',
         startDate: function (now) {
@@ -804,41 +804,48 @@ var DateRangePicker = /** @class */ (function (_super) {
             endDate: data.endDate
         }, callback);
     };
-    DateRangePicker.prototype.selectRannge = function (range) {
-        var _a = this.props, closeOnSelect = _a.closeOnSelect, minDate = _a.minDate, maxDate = _a.maxDate;
+    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 now = moment__default["default"]();
+        /** minDate和maxDate要实时计算，因为用户可能设置为${NOW()}，暂时不考虑毫秒级的时间差 */
+        var minDate = minDateRaw
+            ? amisCore.filterDate(minDateRaw, data, format)
+            : undefined;
+        var maxDate = maxDateRaw
+            ? amisCore.filterDate(maxDateRaw, data, format)
+            : undefined;
+        var startDate = shortcut.startDate(now.clone());
+        var endDate = shortcut.endDate(now.clone());
         this.setState({
-            startDate: minDate && minDate.isValid()
-                ? moment__default["default"].max(range.startDate(now.clone()), minDate)
-                : range.startDate(now.clone()),
-            endDate: maxDate && maxDate.isValid()
-                ? moment__default["default"].min(maxDate, range.endDate(now.clone()))
-                : range.endDate(now.clone())
+            startDate: minDate && (minDate === null || minDate === void 0 ? void 0 : minDate.isValid())
+                ? moment__default["default"].max(startDate, minDate)
+                : startDate,
+            endDate: maxDate && (maxDate === null || maxDate === void 0 ? void 0 : maxDate.isValid()) ? moment__default["default"].min(maxDate, endDate) : endDate
         }, closeOnSelect ? this.confirm : amisCore.noop);
     };
-    DateRangePicker.prototype.renderRanges = function (ranges) {
+    DateRangePicker.prototype.renderShortcuts = function (shortcuts) {
         var _this = this;
-        if (!ranges) {
+        if (!shortcuts) {
             return null;
         }
-        var ns = this.props.classPrefix;
-        var rangeArr;
-        if (typeof ranges === 'string') {
-            rangeArr = ranges.split(',');
+        var _a = this.props, ns = _a.classPrefix, format = _a.format, data = _a.data;
+        var shortcutArr;
+        if (typeof shortcuts === 'string') {
+            shortcutArr = shortcuts.split(',');
         }
         else {
-            rangeArr = ranges;
+            shortcutArr = shortcuts;
         }
         var __ = this.props.translate;
-        return (React__default["default"].createElement("ul", { className: "".concat(ns, "DateRangePicker-rangers") }, rangeArr.map(function (item) {
+        return (React__default["default"].createElement("ul", { className: "".concat(ns, "DateRangePicker-rangers") }, shortcutArr.map(function (item, index) {
             if (!item) {
                 return null;
             }
-            var range = {};
+            var shortcut = {};
             if (typeof item === 'string') {
-                if (availableRanges[item]) {
-                    range = availableRanges[item];
-                    range.key = item;
+                if (availableShortcuts[item]) {
+                    shortcut = availableShortcuts[item];
+                    shortcut.key = item;
                 }
                 else {
                     // 通过正则尝试匹配
@@ -846,19 +853,36 @@ var DateRangePicker = /** @class */ (function (_super) {
                         var value = advancedRanges[i];
                         var m = value.regexp.exec(item);
                         if (m) {
-                            range = value.resolve.apply(item, tslib.__spreadArray([__], tslib.__read(m), false));
-                            range.key = item;
+                            shortcut = value.resolve.apply(item, tslib.__spreadArray([__], tslib.__read(m), false));
+                            shortcut.key = item;
                         }
                     }
                 }
             }
             else if (item.startDate &&
                 item.endDate) {
-                range = tslib.__assign(tslib.__assign({}, item), { startDate: function () { return item.startDate; }, endDate: function () { return item.endDate; } });
+                var shortcutRaw_1 = tslib.__assign({}, item);
+                shortcut = tslib.__assign(tslib.__assign({}, item), { startDate: function () {
+                        var startDate = amisCore.isExpression(shortcutRaw_1.startDate)
+                            ? moment__default["default"](amisCore.FormulaExec['formula'](shortcutRaw_1.startDate, data), format)
+                            : shortcutRaw_1.startDate;
+                        return startDate &&
+                            moment__default["default"].isMoment(startDate) &&
+                            (startDate === null || startDate === void 0 ? void 0 : startDate.isValid())
+                            ? startDate
+                            : item.startDate;
+                    }, endDate: function () {
+                        var endDate = amisCore.isExpression(shortcutRaw_1.endDate)
+                            ? moment__default["default"](amisCore.FormulaExec['formula'](shortcutRaw_1.endDate, data), format)
+                            : shortcutRaw_1.startDate;
+                        return endDate && moment__default["default"].isMoment(endDate) && (endDate === null || endDate === void 0 ? void 0 : endDate.isValid())
+                            ? endDate
+                            : item.endDate;
+                    } });
             }
-            if (Object.keys(range).length) {
-                return (React__default["default"].createElement("li", { className: "".concat(ns, "DateRangePicker-ranger"), onClick: function () { return _this.selectRannge(range); }, key: range.key || range.label },
-                    React__default["default"].createElement("a", null, __(range.label))));
+            if (Object.keys(shortcut).length) {
+                return (React__default["default"].createElement("li", { className: "".concat(ns, "DateRangePicker-ranger"), onClick: function () { return _this.selectShortcut(shortcut); }, key: index },
+                    React__default["default"].createElement("a", null, __(shortcut.label))));
             }
             else {
                 return null;
@@ -972,12 +996,14 @@ var DateRangePicker = /** @class */ (function (_super) {
             React__default["default"].createElement("span", null, currentDate.date())));
     };
     DateRangePicker.prototype.renderMonth = function (props, month, year, date) {
-        var m = moment__default["default"]();
-        var currentDate = m.year(year).month(month);
+        var currentDate = props.viewDate.year(year).month(month);
         var _a = this.state, startDate = _a.startDate, endDate = _a.endDate;
-        var localMoment = m.localeData().monthsShort(m.month(month));
+        var __ = this.props.translate;
+        var monthStr = currentDate.format(__('MMM'));
         var strLength = 3;
-        var monthStrFixedLength = localMoment.substring(0, strLength);
+        // 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);
         if (startDate &&
             endDate &&
             currentDate.isBetween(startDate, endDate, 'month', '[]')) {
@@ -985,7 +1011,7 @@ var DateRangePicker = /** @class */ (function (_super) {
         }
         var _b = this.getDisabledElementProps(currentDate, 'month'), className = _b.className, others = tslib.__rest(_b, ["className"]);
         props.className += className;
-        return (React__default["default"].createElement("td", tslib.__assign({}, props, others),
+        return (React__default["default"].createElement("td", tslib.__assign({}, omit__default["default"](props, 'viewDate'), others),
             React__default["default"].createElement("span", null, monthStrFixedLength)));
     };
     DateRangePicker.prototype.renderQuarter = function (props, quarter, year) {
@@ -1018,7 +1044,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, 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;
         var __ = this.props.translate;
         var _c = this.state, startDate = _c.startDate, endDate = _c.endDate, editState = _c.editState;
         var isDateTimeRange = type === 'input-datetime-range';
@@ -1035,7 +1061,7 @@ var DateRangePicker = /** @class */ (function (_super) {
                     !(startDate === null || startDate === void 0 ? void 0 : startDate.isValid()) ||
                     !(endDate === null || endDate === void 0 ? void 0 : endDate.isValid())));
         return (React__default["default"].createElement("div", { className: cx("".concat(ns, "DateRangePicker-wrap")), ref: this.calendarRef },
-            this.renderRanges(ranges),
+            this.renderShortcuts(shortcuts !== null && shortcuts !== void 0 ? shortcuts : ranges),
             React__default["default"].createElement("div", { className: cx("".concat(ns, "DateRangePicker-picker-wrap")) },
                 (!isTimeRange || (editState === 'start' && !embed)) && (React__default["default"].createElement(Calendar["default"], { className: "".concat(ns, "DateRangePicker-start"), value: startDate, 
                     // 区分的原因是 time-range 左侧就只能选起始时间，而其它都能在左侧同时同时选择起始和结束
@@ -1058,8 +1084,11 @@ var DateRangePicker = /** @class */ (function (_super) {
     };
     DateRangePicker.prototype.getDisabledElementProps = function (currentDate, granularity) {
         var _a = this.state; _a.endDateOpenedFirst; var endDate = _a.endDate, startDate = _a.startDate, editState = _a.editState;
-        var afterEndDate = editState === 'start' && currentDate.isAfter(endDate, granularity);
+        var afterEndDate = editState === 'start' &&
+            endDate &&
+            currentDate.isAfter(endDate, granularity);
         var beforeStartDate = editState === 'end' &&
+            startDate &&
             !currentDate.isSameOrAfter(startDate, granularity);
         if (afterEndDate || beforeStartDate) {
             return {
@@ -1117,13 +1146,13 @@ var DateRangePicker = /** @class */ (function (_super) {
     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, animation = _b.animation;
+        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, shortcuts = _b.shortcuts, label = _b.label, animation = _b.animation;
         var useCalendarMobile = useMobileUI &&
             amisCore.isMobile() &&
             ['days', 'months', 'quarters'].indexOf(viewMode) > -1;
         var _d = this.state, isOpened = _d.isOpened, isFocused = _d.isFocused, startDate = _d.startDate, endDate = _d.endDate;
         var __ = this.props.translate;
-        var calendarMobile = (React__default["default"].createElement(CalendarMobile["default"], { 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.renderRanges(ranges), showViewMode: viewMode === 'quarters' || viewMode === 'months' ? 'years' : 'months' }));
+        var calendarMobile = (React__default["default"].createElement(CalendarMobile["default"], { 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(shortcuts !== null && shortcuts !== void 0 ? shortcuts : ranges), showViewMode: viewMode === 'quarters' || viewMode === 'months' ? 'years' : 'months' }));
         if (embed) {
             return (React__default["default"].createElement("div", { className: cx("".concat(ns, "DateRangeCalendar"), {
                     'is-disabled': disabled
@@ -1141,12 +1170,12 @@ var DateRangePicker = /** @class */ (function (_super) {
                 _a), className), ref: this.dom },
             React__default["default"].createElement(Input["default"], { className: cx('DateRangePicker-input', {
                     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 }),
+                }), onChange: this.startInputChange, onClick: this.openStart, ref: this.startInputRef, placeholder: __(startPlaceholder), autoComplete: "off", value: this.state.startInputValue || '', disabled: disabled, readOnly: useMobileUI && amisCore.isMobile() }),
             React__default["default"].createElement("span", { className: cx('DateRangePicker-input-separator'), ref: this.separatorRef },
                 React__default["default"].createElement("span", { className: cx('DateRangePicker-input-separator-line') })),
             React__default["default"].createElement(Input["default"], { className: cx('DateRangePicker-input', {
                     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 }),
+                }), onChange: this.endInputChange, onClick: this.openEnd, ref: this.endInputRef, placeholder: __(endPlaceholder), autoComplete: "off", value: this.state.endInputValue || '', disabled: disabled, readOnly: useMobileUI && amisCore.isMobile() }),
             useAnimation ? this.renderActiveCursor() : null,
             clearable && !disabled && value ? (React__default["default"].createElement("a", { className: "".concat(ns, "DateRangePicker-clear"), onClick: this.clearValue },
                 React__default["default"].createElement(icons.Icon, { icon: "input-clear", className: "icon" }))) : null,
@@ -1166,6 +1195,7 @@ var DateRangePicker = /** @class */ (function (_super) {
         clearable: true,
         delimiter: ',',
         ranges: 'yesterday,7daysago,prevweek,thismonth,prevmonth,prevquarter',
+        shortcuts: 'yesterday,7daysago,prevweek,thismonth,prevmonth,prevquarter',
         resetValue: '',
         closeOnSelect: true,
         overlayPlacement: 'auto',
@@ -1177,5 +1207,5 @@ var DateRangePicker$1 = amisCore.themeable(amisCore.localeable(DateRangePicker))
 
 exports.DateRangePicker = DateRangePicker;
 exports.advancedRanges = advancedRanges;
-exports.availableRanges = availableRanges;
+exports.availableShortcuts = availableShortcuts;
 exports["default"] = DateRangePicker$1;

package/lib/components/DndContainer.d.ts

@@ -51,7 +51,7 @@ declare const _default: {
         ref: any;
         childRef(ref: any): void;
         getWrappedInstance(): any;
-        render(): JSX.Element;
+        render(): React.JSX.Element;
         context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Omit<Omit<DndContainerProps, keyof ThemeProps> & import("packages/amis-core/lib/theme").ThemeOutterProps, keyof LocaleProps> & {
             locale?: string | undefined;
@@ -107,7 +107,7 @@ declare const _default: {
             ref: any;
             childRef(ref: any): void;
             getWrappedInstance(): any;
-            render(): JSX.Element;
+            render(): React.JSX.Element;
             context: unknown;
             setState<K_1 extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Omit<DndContainerProps, keyof ThemeProps> & import("packages/amis-core/lib/theme").ThemeOutterProps>) => {} | Pick<{}, K_1> | null) | Pick<{}, K_1> | null, callback?: (() => void) | undefined): void;
             forceUpdate(callback?: (() => void) | undefined): void;
@@ -140,7 +140,7 @@ declare const _default: {
         ref: any;
         childRef(ref: any): void;
         getWrappedInstance(): any;
-        render(): JSX.Element;
+        render(): React.JSX.Element;
         context: unknown;
         setState<K_1 extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Omit<DndContainerProps, keyof ThemeProps> & import("packages/amis-core/lib/theme").ThemeOutterProps>) => {} | Pick<{}, K_1> | null) | Pick<{}, K_1> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
@@ -173,7 +173,7 @@ declare const _default: {
             ref: any;
             childRef(ref: any): void;
             getWrappedInstance(): any;
-            render(): JSX.Element;
+            render(): React.JSX.Element;
             context: unknown;
             setState<K_1 extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Omit<DndContainerProps, keyof ThemeProps> & import("packages/amis-core/lib/theme").ThemeOutterProps>) => {} | Pick<{}, K_1> | null) | Pick<{}, K_1> | null, callback?: (() => void) | undefined): void;
             forceUpdate(callback?: (() => void) | undefined): void;

package/lib/components/DndContainer.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v2.9.0
+ * amis-ui v3.1.0
  * Copyright 2018-2023 fex
  */
 

package/lib/components/Drawer.d.ts

@@ -46,8 +46,9 @@ export declare class Drawer extends React.Component<DrawerProps, DrawerState> {
     handleEntered: () => void;
     handleExited: () => void;
     modalRef: (ref: any) => void;
-    handleRootClickCapture(e: MouseEvent): void;
-    handleRootClick(e: MouseEvent): void;
+    handleRootMouseDownCapture(e: MouseEvent): void;
+    handleRootMouseUpCapture(e: MouseEvent): void;
+    handleRootMouseUp(e: MouseEvent): void;
     getDrawerStyle(): {
         width?: string | number | undefined;
         height?: string | number | undefined;
@@ -55,35 +56,35 @@ export declare class Drawer extends React.Component<DrawerProps, DrawerState> {
     resizeMouseDown(e: React.MouseEvent<any>): void;
     bindResize(e: any): void;
     removeResize(): void;
-    renderResizeCtrl(): JSX.Element;
-    render(): JSX.Element;
+    renderResizeCtrl(): React.JSX.Element;
+    render(): React.JSX.Element;
 }
 declare const _default: {
-    new (props: Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "children" | "width" | "height" | "onHide" | "closeOnEsc" | "closeOnOutside" | "show" | "disabled" | "onExited" | "onEntered" | "bodyClassName" | "resizable"> & {
-        showCloseButton?: boolean | undefined;
-        size?: any;
+    new (props: Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "children" | "disabled" | "closeOnEsc" | "show" | "bodyClassName" | "onHide" | "width" | "height" | "closeOnOutside" | "resizable" | "onExited" | "onEntered"> & {
         overlay?: boolean | undefined;
         container?: any;
+        size?: any;
+        showCloseButton?: boolean | undefined;
         position?: DrawerPosition | undefined;
     } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps): {
         ref: any;
         childRef(ref: any): void;
         getWrappedInstance(): any;
-        render(): JSX.Element;
+        render(): React.JSX.Element;
         context: unknown;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "children" | "width" | "height" | "onHide" | "closeOnEsc" | "closeOnOutside" | "show" | "disabled" | "onExited" | "onEntered" | "bodyClassName" | "resizable"> & {
-            showCloseButton?: boolean | undefined;
-            size?: any;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "children" | "disabled" | "closeOnEsc" | "show" | "bodyClassName" | "onHide" | "width" | "height" | "closeOnOutside" | "resizable" | "onExited" | "onEntered"> & {
             overlay?: boolean | undefined;
             container?: any;
+            size?: any;
+            showCloseButton?: boolean | undefined;
             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" | "width" | "height" | "onHide" | "closeOnEsc" | "closeOnOutside" | "show" | "disabled" | "onExited" | "onEntered" | "bodyClassName" | "resizable"> & {
-            showCloseButton?: boolean | undefined;
-            size?: any;
+        readonly props: Readonly<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "children" | "disabled" | "closeOnEsc" | "show" | "bodyClassName" | "onHide" | "width" | "height" | "closeOnOutside" | "resizable" | "onExited" | "onEntered"> & {
             overlay?: boolean | undefined;
             container?: any;
+            size?: any;
+            showCloseButton?: boolean | undefined;
             position?: DrawerPosition | undefined;
         } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps>;
         state: Readonly<{}>;
@@ -91,57 +92,57 @@ declare const _default: {
             [key: string]: React.ReactInstance;
         };
         componentDidMount?(): void;
-        shouldComponentUpdate?(nextProps: Readonly<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "children" | "width" | "height" | "onHide" | "closeOnEsc" | "closeOnOutside" | "show" | "disabled" | "onExited" | "onEntered" | "bodyClassName" | "resizable"> & {
-            showCloseButton?: boolean | undefined;
-            size?: any;
+        shouldComponentUpdate?(nextProps: Readonly<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "children" | "disabled" | "closeOnEsc" | "show" | "bodyClassName" | "onHide" | "width" | "height" | "closeOnOutside" | "resizable" | "onExited" | "onEntered"> & {
             overlay?: boolean | undefined;
             container?: any;
+            size?: any;
+            showCloseButton?: boolean | undefined;
             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" | "width" | "height" | "onHide" | "closeOnEsc" | "closeOnOutside" | "show" | "disabled" | "onExited" | "onEntered" | "bodyClassName" | "resizable"> & {
-            showCloseButton?: boolean | undefined;
-            size?: any;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "children" | "disabled" | "closeOnEsc" | "show" | "bodyClassName" | "onHide" | "width" | "height" | "closeOnOutside" | "resizable" | "onExited" | "onEntered"> & {
             overlay?: boolean | undefined;
             container?: any;
+            size?: any;
+            showCloseButton?: boolean | undefined;
             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" | "width" | "height" | "onHide" | "closeOnEsc" | "closeOnOutside" | "show" | "disabled" | "onExited" | "onEntered" | "bodyClassName" | "resizable"> & {
-            showCloseButton?: boolean | undefined;
-            size?: any;
+        componentDidUpdate?(prevProps: Readonly<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "children" | "disabled" | "closeOnEsc" | "show" | "bodyClassName" | "onHide" | "width" | "height" | "closeOnOutside" | "resizable" | "onExited" | "onEntered"> & {
             overlay?: boolean | undefined;
             container?: any;
+            size?: any;
+            showCloseButton?: boolean | undefined;
             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" | "width" | "height" | "onHide" | "closeOnEsc" | "closeOnOutside" | "show" | "disabled" | "onExited" | "onEntered" | "bodyClassName" | "resizable"> & {
-            showCloseButton?: boolean | undefined;
-            size?: any;
+        componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "children" | "disabled" | "closeOnEsc" | "show" | "bodyClassName" | "onHide" | "width" | "height" | "closeOnOutside" | "resizable" | "onExited" | "onEntered"> & {
             overlay?: boolean | undefined;
             container?: any;
+            size?: any;
+            showCloseButton?: boolean | undefined;
             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" | "width" | "height" | "onHide" | "closeOnEsc" | "closeOnOutside" | "show" | "disabled" | "onExited" | "onEntered" | "bodyClassName" | "resizable"> & {
-            showCloseButton?: boolean | undefined;
-            size?: any;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "children" | "disabled" | "closeOnEsc" | "show" | "bodyClassName" | "onHide" | "width" | "height" | "closeOnOutside" | "resizable" | "onExited" | "onEntered"> & {
             overlay?: boolean | undefined;
             container?: any;
+            size?: any;
+            showCloseButton?: boolean | undefined;
             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" | "width" | "height" | "onHide" | "closeOnEsc" | "closeOnOutside" | "show" | "disabled" | "onExited" | "onEntered" | "bodyClassName" | "resizable"> & {
-            showCloseButton?: boolean | undefined;
-            size?: any;
+        componentWillUpdate?(nextProps: Readonly<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "children" | "disabled" | "closeOnEsc" | "show" | "bodyClassName" | "onHide" | "width" | "height" | "closeOnOutside" | "resizable" | "onExited" | "onEntered"> & {
             overlay?: boolean | undefined;
             container?: any;
+            size?: any;
+            showCloseButton?: boolean | undefined;
             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" | "width" | "height" | "onHide" | "closeOnEsc" | "closeOnOutside" | "show" | "disabled" | "onExited" | "onEntered" | "bodyClassName" | "resizable"> & {
-            showCloseButton?: boolean | undefined;
-            size?: any;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "children" | "disabled" | "closeOnEsc" | "show" | "bodyClassName" | "onHide" | "width" | "height" | "closeOnOutside" | "resizable" | "onExited" | "onEntered"> & {
             overlay?: boolean | undefined;
             container?: any;
+            size?: any;
+            showCloseButton?: boolean | undefined;
             position?: DrawerPosition | undefined;
         } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
     };

package/lib/components/Drawer.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v2.9.0
+ * amis-ui v3.1.0
  * Copyright 2018-2023 fex
  */
 
@@ -53,12 +53,18 @@ var Drawer = /** @class */ (function (_super) {
         };
         _this.handleEntered = function () {
             var onEntered = _this.props.onEntered;
+            document.body.addEventListener('mousedown', _this.handleRootMouseDownCapture, true);
+            document.body.addEventListener('mouseup', _this.handleRootMouseUpCapture, true);
+            document.body.addEventListener('mouseup', _this.handleRootMouseUp);
             onEntered && onEntered();
         };
         _this.handleExited = function () {
             var _a, _b;
             var onExited = _this.props.onExited;
             document.activeElement && ((_b = (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.blur) === null || _b === void 0 ? void 0 : _b.call(_a));
+            document.body.removeEventListener('mouseup', _this.handleRootMouseUp);
+            document.body.removeEventListener('mouseup', _this.handleRootMouseUpCapture, true);
+            document.body.removeEventListener('mousedown', _this.handleRootMouseDownCapture, true);
             onExited && onExited();
             setTimeout(function () {
                 if (!document.querySelector('.amis-dialog-widget')) {
@@ -83,8 +89,6 @@ var Drawer = /** @class */ (function (_super) {
         if (this.props.show) {
             this.handleEntered();
         }
-        document.body.addEventListener('click', this.handleRootClickCapture, true);
-        document.body.addEventListener('click', this.handleRootClick);
     };
     Drawer.prototype.componentDidUpdate = function (prevProps) {
         var _this = this;
@@ -102,10 +106,8 @@ var Drawer = /** @class */ (function (_super) {
         if (this.props.show) {
             this.handleExited();
         }
-        document.body.removeEventListener('click', this.handleRootClick);
-        document.body.removeEventListener('click', this.handleRootClickCapture, true);
     };
-    Drawer.prototype.handleRootClickCapture = function (e) {
+    Drawer.prototype.handleRootMouseDownCapture = function (e) {
         var target = e.target;
         var _a = this.props, closeOnOutside = _a.closeOnOutside, ns = _a.classPrefix;
         var isLeftButton = (e.button === 1 && window.event !== null) || e.button === 0;
@@ -117,7 +119,15 @@ var Drawer = /** @class */ (function (_super) {
                 (target.matches(".".concat(ns, "Drawer-overlay")) &&
                     target.parentElement === this.modalDom))); // 干脆过滤掉来自弹框里面的点击
     };
-    Drawer.prototype.handleRootClick = function (e) {
+    Drawer.prototype.handleRootMouseUpCapture = function (e) {
+        // mousedown 的时候不在弹窗里面，则不需要判断了
+        if (!this.isRootClosed) {
+            return;
+        }
+        // 再判断 mouseup 的时候是不是在弹窗里面
+        this.handleRootMouseDownCapture(e);
+    };
+    Drawer.prototype.handleRootMouseUp = function (e) {
         var onHide = this.props.onHide;
         this.isRootClosed && !e.defaultPrevented && onHide(e);
     };
@@ -212,7 +222,7 @@ var Drawer = /** @class */ (function (_super) {
                     overlay ? (React__default["default"].createElement("div", { className: cx__default["default"]("".concat(ns, "Drawer-overlay"), fadeStyles[status]) })) : null,
                     React__default["default"].createElement("div", { ref: _this.contentRef, style: bodyStyle, className: cx__default["default"]("".concat(ns, "Drawer-content"), bodyClassName, fadeStyles[status]) },
                         show && showCloseButton ? (React__default["default"].createElement("a", { onClick: disabled ? undefined : onHide, className: "".concat(ns, "Drawer-close") },
-                            React__default["default"].createElement(icons.Icon, { icon: "close", className: "icon" }))) : null,
+                            React__default["default"].createElement(icons.Icon, { icon: "close", className: "icon", iconContent: "Drawer-close" }))) : null,
                         status === Transition.EXITED ? null : children,
                         resizable ? _this.renderResizeCtrl() : null)));
             })));
@@ -229,13 +239,19 @@ var Drawer = /** @class */ (function (_super) {
         tslib.__metadata("design:type", Function),
         tslib.__metadata("design:paramtypes", [MouseEvent]),
         tslib.__metadata("design:returntype", void 0)
-    ], Drawer.prototype, "handleRootClickCapture", null);
+    ], Drawer.prototype, "handleRootMouseDownCapture", null);
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [MouseEvent]),
+        tslib.__metadata("design:returntype", void 0)
+    ], Drawer.prototype, "handleRootMouseUpCapture", null);
     tslib.__decorate([
         amisCore.autobind,
         tslib.__metadata("design:type", Function),
         tslib.__metadata("design:paramtypes", [MouseEvent]),
         tslib.__metadata("design:returntype", void 0)
-    ], Drawer.prototype, "handleRootClick", null);
+    ], Drawer.prototype, "handleRootMouseUp", null);
     tslib.__decorate([
         amisCore.autobind,
         tslib.__metadata("design:type", Function),