amis-ui 3.1.1 → 3.3.0

package/lib/components/DateRangePicker.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.1.1
+ * amis-ui v3.3.0
  * Copyright 2018-2023 fex
  */
 
@@ -28,11 +28,9 @@ var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
 var omit__default = /*#__PURE__*/_interopDefaultLegacy(omit);
 var kebabCase__default = /*#__PURE__*/_interopDefaultLegacy(kebabCase);
 
-/**
- * @file DateRangePicker
- * @description 自定义日期范围时间选择器组件
- * @author fex
- */
+var __react_jsx__ = require('react');
+var _J$X_ = (__react_jsx__["default"] || __react_jsx__).createElement;
+(__react_jsx__["default"] || __react_jsx__).Fragment;
 var availableShortcuts = {
     'today': {
         label: 'Date.today',
@@ -805,7 +803,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 && amisCore.isMobile();
         var now = moment__default["default"]();
         /** minDate和maxDate要实时计算，因为用户可能设置为${NOW()}，暂时不考虑毫秒级的时间差 */
         var minDate = minDateRaw
@@ -821,7 +820,7 @@ var DateRangePicker = /** @class */ (function (_super) {
                 ? 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);
+        }, closeOnSelect && !mobileUI ? this.confirm : amisCore.noop);
     };
     DateRangePicker.prototype.renderShortcuts = function (shortcuts) {
         var _this = this;
@@ -837,7 +836,7 @@ var DateRangePicker = /** @class */ (function (_super) {
             shortcutArr = shortcuts;
         }
         var __ = this.props.translate;
-        return (React__default["default"].createElement("ul", { className: "".concat(ns, "DateRangePicker-rangers") }, shortcutArr.map(function (item, index) {
+        return (_J$X_("ul", { className: "".concat(ns, "DateRangePicker-rangers") }, shortcutArr.map(function (item, index) {
             if (!item) {
                 return null;
             }
@@ -865,24 +864,28 @@ var DateRangePicker = /** @class */ (function (_super) {
                 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;
+                            : typeof shortcutRaw_1.startDate === 'string'
+                                ? moment__default["default"](shortcutRaw_1.startDate, format)
+                                : shortcutRaw_1.startDate;
                         return startDate &&
                             moment__default["default"].isMoment(startDate) &&
-                            (startDate === null || startDate === void 0 ? void 0 : startDate.isValid())
+                            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())
+                            : typeof shortcutRaw_1.endDate === 'string'
+                                ? moment__default["default"](shortcutRaw_1.endDate, format)
+                                : shortcutRaw_1.endDate;
+                        return endDate && moment__default["default"].isMoment(endDate) && endDate.isValid()
                             ? endDate
                             : item.endDate;
                     } });
             }
             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))));
+                return (_J$X_("li", { className: "".concat(ns, "DateRangePicker-ranger"), onClick: function () { return _this.selectShortcut(shortcut); }, key: index },
+                    _J$X_("a", null, __(shortcut.label))));
             }
             else {
                 return null;
@@ -992,8 +995,8 @@ var DateRangePicker = /** @class */ (function (_super) {
         }
         var _b = this.getDisabledElementProps(currentDate, 'day'), className = _b.className, others = tslib.__rest(_b, ["className"]);
         props.className += className;
-        return (React__default["default"].createElement("td", tslib.__assign({}, omit__default["default"](props, ['todayActiveStyle']), others),
-            React__default["default"].createElement("span", null, currentDate.date())));
+        return (_J$X_("td", tslib.__assign({}, omit__default["default"](props, ['todayActiveStyle']), others),
+            _J$X_("span", null, currentDate.date())));
     };
     DateRangePicker.prototype.renderMonth = function (props, month, year, date) {
         var currentDate = props.viewDate.year(year).month(month);
@@ -1011,8 +1014,8 @@ 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({}, omit__default["default"](props, 'viewDate'), others),
-            React__default["default"].createElement("span", null, monthStrFixedLength)));
+        return (_J$X_("td", tslib.__assign({}, omit__default["default"](props, 'viewDate'), others),
+            _J$X_("span", null, monthStrFixedLength)));
     };
     DateRangePicker.prototype.renderQuarter = function (props, quarter, year) {
         var currentDate = moment__default["default"]().year(year).quarter(quarter);
@@ -1024,8 +1027,8 @@ var DateRangePicker = /** @class */ (function (_super) {
         }
         var _b = this.getDisabledElementProps(currentDate, 'quarter'), className = _b.className, others = tslib.__rest(_b, ["className"]);
         props.className += className;
-        return (React__default["default"].createElement("td", tslib.__assign({}, props, others),
-            React__default["default"].createElement("span", null,
+        return (_J$X_("td", tslib.__assign({}, props, others),
+            _J$X_("span", null,
                 "Q",
                 quarter)));
     };
@@ -1039,12 +1042,12 @@ var DateRangePicker = /** @class */ (function (_super) {
         }
         var _b = this.getDisabledElementProps(currentDate, 'year'), className = _b.className, others = tslib.__rest(_b, ["className"]);
         props.className += className;
-        return (React__default["default"].createElement("td", tslib.__assign({}, props, others),
-            React__default["default"].createElement("span", null, year)));
+        return (_J$X_("td", tslib.__assign({}, props, others),
+            _J$X_("span", null, year)));
     };
     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';
@@ -1060,27 +1063,40 @@ 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["default"].createElement("div", { className: cx("".concat(ns, "DateRangePicker-wrap")), ref: this.calendarRef },
+        var mobileUI = useMobileUI && amisCore.isMobile();
+        return (_J$X_("div", { className: cx("".concat(ns, "DateRangePicker-wrap"), { 'is-mobile': mobileUI }), ref: this.calendarRef },
+            mobileUI && !embed ? (_J$X_("div", { className: cx('PickerColumns-header') },
+                _J$X_(Button["default"], { className: "PickerColumns-cancel", level: "link", onClick: function () { return _this.close(false); } }, __('cancel')),
+                label && typeof label === 'string'
+                    ? label
+                    : __('Calendar.datepicker'),
+                _J$X_(Button["default"], { className: "PickerColumns-confirm", level: "link", disabled: isConfirmBtnDisbaled || !startDate || !endDate, onClick: this.confirm }, __('confirm')))) : null,
             this.renderShortcuts(ranges || shortcuts),
-            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, 
+            _J$X_("div", { className: cx("".concat(ns, "DateRangePicker-picker-wrap"), {
+                    'is-vertical': embed
+                }) },
+                (!isTimeRange ||
+                    (editState === 'start' && !embed) ||
+                    (mobileUI && isTimeRange)) && (_J$X_(Calendar["default"], { 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["default"].createElement(Calendar["default"], { 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)) && (_J$X_(Calendar["default"], { 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["default"].createElement("div", { key: "button", className: "".concat(ns, "DateRangePicker-actions") },
-                React__default["default"].createElement(Button["default"], { size: "sm", onClick: function () { return _this.close(); } }, __('cancel')),
-                React__default["default"].createElement(Button["default"], { level: "primary", size: "sm", className: cx('m-l-sm'), disabled: isConfirmBtnDisbaled, onClick: this.confirm }, __('confirm'))))));
+                    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 : (_J$X_("div", { key: "button", className: "".concat(ns, "DateRangePicker-actions") },
+                _J$X_(Button["default"], { size: "sm", onClick: function () { return _this.close(); } }, __('cancel')),
+                _J$X_(Button["default"], { level: "primary", size: "sm", className: cx('m-l-sm'), disabled: isConfirmBtnDisbaled, onClick: this.confirm }, __('confirm'))))));
     };
     DateRangePicker.prototype.getDisabledElementProps = function (currentDate, granularity) {
         var _a = this.state; _a.endDateOpenedFirst; var endDate = _a.endDate, startDate = _a.startDate, editState = _a.editState;
@@ -1137,7 +1153,7 @@ var DateRangePicker = /** @class */ (function (_super) {
                 cursorWidth = 0;
             }
         }
-        return (React__default["default"].createElement("div", { className: cx('DateRangePicker-activeCursor', { isFocused: isFocused }), style: {
+        return (_J$X_("div", { className: cx('DateRangePicker-activeCursor', { isFocused: isFocused }), style: {
                 position: 'absolute',
                 left: cursorLeft,
                 width: cursorWidth
@@ -1152,39 +1168,42 @@ var DateRangePicker = /** @class */ (function (_super) {
             ['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.renderShortcuts(ranges || shortcuts), showViewMode: viewMode === 'quarters' || viewMode === 'months' ? 'years' : 'months' }));
+        var calendarMobile = (_J$X_(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(ranges || shortcuts), showViewMode: viewMode === 'quarters' || viewMode === 'months' ? 'years' : 'months' }));
+        var mobileUI = useMobileUI && amisCore.isMobile();
         if (embed) {
-            return (React__default["default"].createElement("div", { className: cx("".concat(ns, "DateRangeCalendar"), {
+            return (_J$X_("div", { className: cx("".concat(ns, "DateRangeCalendar"), {
+                    'is-mobile': mobileUI
+                }, {
                     'is-disabled': disabled
                 }, className) }, useCalendarMobile ? calendarMobile : this.renderCalendar()));
         }
-        var CalendarMobileTitle = (React__default["default"].createElement("div", { className: "".concat(ns, "CalendarMobile-title") }, label && typeof label === 'string' ? label : __('Calendar.datepicker')));
+        var CalendarMobileTitle = (_J$X_("div", { className: "".concat(ns, "CalendarMobile-title") }, label && typeof label === 'string' ? label : __('Calendar.datepicker')));
         /** 是否启用游标动画 */
         var useAnimation = animation !== false;
-        return (React__default["default"].createElement("div", { tabIndex: 0, onKeyPress: this.handleKeyPress, onFocus: this.handleFocus, onBlur: this.handleBlur, className: cx("".concat(ns, "DateRangePicker"), (_a = {
+        return (_J$X_("div", { tabIndex: 0, onKeyPress: this.handleKeyPress, onFocus: this.handleFocus, onBlur: this.handleBlur, className: cx("".concat(ns, "DateRangePicker"), (_a = {
                     'is-disabled': disabled,
                     'is-focused': isFocused
                 },
                 _a["".concat(ns, "DateRangePicker--border").concat(amisCore.ucFirst(borderMode))] = borderMode,
                 _a['is-mobile'] = useMobileUI && amisCore.isMobile(),
                 _a), className), ref: this.dom },
-            React__default["default"].createElement(Input["default"], { className: cx('DateRangePicker-input', {
+            _J$X_(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, 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', {
+            _J$X_("span", { className: cx('DateRangePicker-input-separator'), ref: this.separatorRef },
+                _J$X_("span", { className: cx('DateRangePicker-input-separator-line') })),
+            _J$X_(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, 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,
-            React__default["default"].createElement("a", { className: cx("DateRangePicker-toggler") },
-                React__default["default"].createElement(icons.Icon, { icon: viewMode === 'time' ? 'clock' : 'date', className: "icon", iconContent: viewMode === 'time'
+            clearable && !disabled && value ? (_J$X_("a", { className: "".concat(ns, "DateRangePicker-clear"), onClick: this.clearValue },
+                _J$X_(icons.Icon, { icon: "input-clear", className: "icon" }))) : null,
+            _J$X_("a", { className: cx("DateRangePicker-toggler") },
+                _J$X_(icons.Icon, { icon: viewMode === 'time' ? 'clock' : 'date', className: "icon", iconContent: viewMode === 'time'
                         ? 'DatePicker-toggler-clock'
                         : 'DatePicker-toggler-date' })),
-            isOpened ? (useMobileUI && amisCore.isMobile() ? (React__default["default"].createElement(PopUp["default"], { 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["default"].createElement(amisCore.Overlay, { target: function () { return _this.dom.current; }, onHide: this.close, container: popOverContainer || (function () { return ReactDOM.findDOMNode(_this); }), rootClose: false, placement: overlayPlacement, show: true },
-                React__default["default"].createElement(amisCore.PopOver, { classPrefix: ns, className: cx("".concat(ns, "DateRangePicker-popover"), popoverClassName), onHide: this.close, onClick: this.handlePopOverClick }, this.renderCalendar())))) : null));
+            isOpened ? (useMobileUI && amisCore.isMobile() ? (_J$X_(PopUp["default"], { 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())) : (_J$X_(amisCore.Overlay, { target: function () { return _this.dom.current; }, onHide: this.close, container: popOverContainer || (function () { return ReactDOM.findDOMNode(_this); }), rootClose: false, placement: overlayPlacement, show: true },
+                _J$X_(amisCore.PopOver, { classPrefix: ns, className: cx("".concat(ns, "DateRangePicker-popover"), popoverClassName), onHide: this.close, onClick: this.handlePopOverClick }, this.renderCalendar())))) : null));
     };
     DateRangePicker.defaultProps = {
         startPlaceholder: 'Calendar.startPick',

package/lib/components/DndContainer.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.1.1
+ * amis-ui v3.3.0
  * Copyright 2018-2023 fex
  */
 
@@ -7,22 +7,20 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
+require('react');
 var Draggable = require('react-draggable');
 var amisCore = require('amis-core');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var Draggable__default = /*#__PURE__*/_interopDefaultLegacy(Draggable);
 
-/**
- * @file DndContainer
- * @desc 可拖拽容器
- */
+var __react_jsx__ = require('react');
+var _J$X_ = (__react_jsx__["default"] || __react_jsx__).createElement;
+(__react_jsx__["default"] || __react_jsx__).Fragment;
 var DndContainer = function (props) {
     var className = props.className, cx = props.classnames, children = props.children, axis = props.axis, position = props.position, defaultPosition = props.defaultPosition, bounds = props.bounds, grid = props.grid, handle = props.handle, cancel = props.cancel, draggable = props.draggable, scale = props.scale, enableUserSelect = props.enableUserSelect, nodeRef = props.nodeRef, onDrag = props.onDrag, onStart = props.onStart, onStop = props.onStop;
-    return (React__default["default"].createElement(Draggable__default["default"], { axis: axis, position: position, defaultPosition: defaultPosition, bounds: bounds, grid: grid, handle: handle, cancel: cancel, disabled: !draggable, scale: scale, enableUserSelectHack: !enableUserSelect, nodeRef: nodeRef, defaultClassName: cx(className), defaultClassNameDragging: cx('DndContainer--dragging'), defaultClassNameDragged: cx('DndContainer--dragged'), onStart: onStart, onDrag: onDrag, onStop: onStop }, children));
+    return (_J$X_(Draggable__default["default"], { axis: axis, position: position, defaultPosition: defaultPosition, bounds: bounds, grid: grid, handle: handle, cancel: cancel, disabled: !draggable, scale: scale, enableUserSelectHack: !enableUserSelect, nodeRef: nodeRef, defaultClassName: cx(className), defaultClassNameDragging: cx('DndContainer--dragging'), defaultClassNameDragged: cx('DndContainer--dragged'), onStart: onStart, onDrag: onDrag, onStop: onStop }, children));
 };
 DndContainer.defaultProps = {
     axis: 'both',

package/lib/components/Drawer.d.ts

@@ -60,90 +60,90 @@ 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>, "disabled" | "children" | "width" | "height" | "onHide" | "show" | "onEntered" | "onExited" | "closeOnEsc" | "bodyClassName" | "closeOnOutside" | "resizable"> & {
-        position?: DrawerPosition | undefined;
+    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;
         overlay?: boolean | undefined;
         container?: any;
-        showCloseButton?: boolean | undefined;
+        position?: DrawerPosition | undefined;
     } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps): {
         ref: any;
         childRef(ref: any): void;
         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>, "disabled" | "children" | "width" | "height" | "onHide" | "show" | "onEntered" | "onExited" | "closeOnEsc" | "bodyClassName" | "closeOnOutside" | "resizable"> & {
-            position?: DrawerPosition | undefined;
+        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;
             overlay?: boolean | undefined;
             container?: 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>, "disabled" | "children" | "width" | "height" | "onHide" | "show" | "onEntered" | "onExited" | "closeOnEsc" | "bodyClassName" | "closeOnOutside" | "resizable"> & {
-            position?: DrawerPosition | undefined;
+        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;
             overlay?: boolean | undefined;
             container?: any;
-            showCloseButton?: boolean | undefined;
+            position?: DrawerPosition | undefined;
         } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps>;
         state: Readonly<{}>;
         refs: {
             [key: string]: React.ReactInstance;
         };
         componentDidMount?(): void;
-        shouldComponentUpdate?(nextProps: Readonly<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "disabled" | "children" | "width" | "height" | "onHide" | "show" | "onEntered" | "onExited" | "closeOnEsc" | "bodyClassName" | "closeOnOutside" | "resizable"> & {
-            position?: DrawerPosition | undefined;
+        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;
             overlay?: boolean | undefined;
             container?: 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>, "disabled" | "children" | "width" | "height" | "onHide" | "show" | "onEntered" | "onExited" | "closeOnEsc" | "bodyClassName" | "closeOnOutside" | "resizable"> & {
-            position?: DrawerPosition | undefined;
+        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;
             overlay?: boolean | undefined;
             container?: any;
-            showCloseButton?: boolean | undefined;
-        } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps>, prevState: Readonly<{}>): any;
-        componentDidUpdate?(prevProps: Readonly<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "disabled" | "children" | "width" | "height" | "onHide" | "show" | "onEntered" | "onExited" | "closeOnEsc" | "bodyClassName" | "closeOnOutside" | "resizable"> & {
             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;
             overlay?: boolean | undefined;
             container?: 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>, "disabled" | "children" | "width" | "height" | "onHide" | "show" | "onEntered" | "onExited" | "closeOnEsc" | "bodyClassName" | "closeOnOutside" | "resizable"> & {
-            position?: DrawerPosition | undefined;
+        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;
             overlay?: boolean | undefined;
             container?: any;
-            showCloseButton?: boolean | undefined;
-        } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps>, nextContext: any): void;
-        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "disabled" | "children" | "width" | "height" | "onHide" | "show" | "onEntered" | "onExited" | "closeOnEsc" | "bodyClassName" | "closeOnOutside" | "resizable"> & {
             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;
             overlay?: boolean | undefined;
             container?: any;
-            showCloseButton?: boolean | undefined;
-        } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<Pick<Omit<DrawerProps, keyof import("amis-core").ThemeProps>, "disabled" | "children" | "width" | "height" | "onHide" | "show" | "onEntered" | "onExited" | "closeOnEsc" | "bodyClassName" | "closeOnOutside" | "resizable"> & {
             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;
             overlay?: boolean | undefined;
             container?: any;
-            showCloseButton?: boolean | 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>, "disabled" | "children" | "width" | "height" | "onHide" | "show" | "onEntered" | "onExited" | "closeOnEsc" | "bodyClassName" | "closeOnOutside" | "resizable"> & {
             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;
             overlay?: boolean | undefined;
             container?: any;
-            showCloseButton?: boolean | undefined;
+            position?: DrawerPosition | undefined;
         } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
     };
     displayName: string;

package/lib/components/Drawer.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.1.1
+ * amis-ui v3.3.0
  * Copyright 2018-2023 fex
  */
 
@@ -23,11 +23,9 @@ var Transition__default = /*#__PURE__*/_interopDefaultLegacy(Transition);
 var Portal__default = /*#__PURE__*/_interopDefaultLegacy(Portal);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-/**
- * @file Drawer
- * @description
- * @author fex
- */
+var __react_jsx__ = require('react');
+var _J$X_ = (__react_jsx__["default"] || __react_jsx__).createElement;
+(__react_jsx__["default"] || __react_jsx__).Fragment;
 var _a;
 var fadeStyles = (_a = {},
     _a[Transition.ENTERING] = 'in',
@@ -198,15 +196,15 @@ var Drawer = /** @class */ (function (_super) {
     };
     Drawer.prototype.renderResizeCtrl = function () {
         var cx = this.props.classnames;
-        return (React__default["default"].createElement("div", { className: cx('Drawer-resizeCtrl'), ref: this.resizer, onMouseDown: this.resizeMouseDown },
-            React__default["default"].createElement("div", { className: cx('Drawer-resizeIcon') }, "\u00B7\u00B7\u00B7")));
+        return (_J$X_("div", { className: cx('Drawer-resizeCtrl'), ref: this.resizer, onMouseDown: this.resizeMouseDown },
+            _J$X_("div", { className: cx('Drawer-resizeIcon') }, "\u00B7\u00B7\u00B7")));
     };
     Drawer.prototype.render = function () {
         var _this = this;
         var _a = this.props, ns = _a.classPrefix, className = _a.className, children = _a.children, container = _a.container, show = _a.show, showCloseButton = _a.showCloseButton, position = _a.position, size = _a.size, onHide = _a.onHide, disabled = _a.disabled, overlay = _a.overlay, bodyClassName = _a.bodyClassName, resizable = _a.resizable;
         var bodyStyle = this.getDrawerStyle();
-        return (React__default["default"].createElement(Portal__default["default"], { container: container },
-            React__default["default"].createElement(Transition__default["default"], { mountOnEnter: true, unmountOnExit: true, appear: true, in: show, timeout: 500, onEnter: this.handleEnter, onExited: this.handleExited, onEntered: this.handleEntered }, function (status) {
+        return (_J$X_(Portal__default["default"], { container: container },
+            _J$X_(Transition__default["default"], { mountOnEnter: true, unmountOnExit: true, appear: true, in: show, timeout: 500, onEnter: this.handleEnter, onExited: this.handleExited, onEntered: this.handleEntered }, function (status) {
                 var _a;
                 if (status === Transition.ENTERING) {
                     // force reflow
@@ -214,15 +212,15 @@ var Drawer = /** @class */ (function (_super) {
                     // 否则看不到动画。
                     _this.contentDom.offsetWidth;
                 }
-                return (React__default["default"].createElement("div", { ref: _this.modalRef, role: "dialog", className: cx__default["default"]("amis-dialog-widget ".concat(ns, "Drawer"), (_a = {},
+                return (_J$X_("div", { ref: _this.modalRef, role: "dialog", className: cx__default["default"]("amis-dialog-widget ".concat(ns, "Drawer"), (_a = {},
                         _a["".concat(ns, "Drawer--").concat(position)] = position,
                         _a["".concat(ns, "Drawer--").concat(size)] = size,
                         _a["".concat(ns, "Drawer--noOverlay")] = !overlay,
                         _a), className) },
-                    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", iconContent: "Drawer-close" }))) : null,
+                    overlay ? (_J$X_("div", { className: cx__default["default"]("".concat(ns, "Drawer-overlay"), fadeStyles[status]) })) : null,
+                    _J$X_("div", { ref: _this.contentRef, style: bodyStyle, className: cx__default["default"]("".concat(ns, "Drawer-content"), bodyClassName, fadeStyles[status]) },
+                        show && showCloseButton ? (_J$X_("a", { onClick: disabled ? undefined : onHide, className: "".concat(ns, "Drawer-close") },
+                            _J$X_(icons.Icon, { icon: "close", className: "icon", iconContent: "Drawer-close" }))) : null,
                         status === Transition.EXITED ? null : children,
                         resizable ? _this.renderResizeCtrl() : null)));
             })));