amis-ui 2.0.0 → 2.1.0

package/lib/components/DateRangePicker.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v2.0.0
+ * amis-ui v2.1.0
  * Copyright 2018-2022 fex
  */
 
@@ -361,7 +361,8 @@ var DateRangePicker = /** @class */ (function (_super) {
         var _this = _super.call(this, props) || this;
         // 是否是第一次点击，如果是第一次点击就可以点任意地址
         _this.isFirstClick = true;
-        _this.nextMonth = moment__default["default"]().add(1, 'months');
+        _this.nextMonth = moment__default["default"]().add(1, 'months').startOf('day');
+        _this.currentMonth = moment__default["default"]().startOf('day');
         _this.startInputRef = React__default["default"].createRef();
         _this.endInputRef = React__default["default"].createRef();
         _this.calendarRef = React__default["default"].createRef();
@@ -373,7 +374,7 @@ var DateRangePicker = /** @class */ (function (_super) {
         _this.endInputChange = _this.endInputChange.bind(_this);
         _this.handleDateChange = _this.handleDateChange.bind(_this);
         _this.handleStartDateChange = _this.handleStartDateChange.bind(_this);
-        _this.handeleEndDateChange = _this.handeleEndDateChange.bind(_this);
+        _this.handelEndDateChange = _this.handelEndDateChange.bind(_this);
         _this.handleTimeStartChange = _this.handleTimeStartChange.bind(_this);
         _this.handleTimeEndChange = _this.handleTimeEndChange.bind(_this);
         _this.handleFocus = _this.handleFocus.bind(_this);
@@ -400,8 +401,11 @@ var DateRangePicker = /** @class */ (function (_super) {
             editState: 'start',
             startDate: startDate,
             endDate: endDate,
+            oldStartDate: startDate,
+            oldEndDate: endDate,
             startInputValue: startDate === null || startDate === void 0 ? void 0 : startDate.format(inputFormat),
-            endInputValue: endDate === null || endDate === void 0 ? void 0 : endDate.format(inputFormat)
+            endInputValue: endDate === null || endDate === void 0 ? void 0 : endDate.format(inputFormat),
+            endDateOpenedFirst: false
         };
         return _this;
     }
@@ -515,13 +519,32 @@ var DateRangePicker = /** @class */ (function (_super) {
         }
         this.setState({
             isOpened: true,
-            editState: 'end'
+            editState: 'end',
+            endDateOpenedFirst: true
         });
     };
-    DateRangePicker.prototype.close = function () {
+    DateRangePicker.prototype.close = function (isConfirm) {
+        if (isConfirm === void 0) { isConfirm = false; }
+        if (!isConfirm) {
+            var _a = this.state, oldEndDate = _a.oldEndDate, oldStartDate = _a.oldStartDate;
+            var inputFormat = this.props.inputFormat;
+            this.setState({
+                endDate: oldEndDate,
+                endInputValue: oldEndDate ? oldEndDate.format(inputFormat) : '',
+                startDate: oldStartDate,
+                startInputValue: oldStartDate ? oldStartDate.format(inputFormat) : ''
+            });
+        }
+        else {
+            this.setState({
+                oldStartDate: this.state.startDate,
+                oldEndDate: this.state.endDate
+            });
+        }
         this.setState({
             isOpened: false,
-            editState: undefined
+            editState: undefined,
+            endDateOpenedFirst: false
         }, this.blur);
     };
     DateRangePicker.prototype.handleClick = function () {
@@ -542,7 +565,8 @@ var DateRangePicker = /** @class */ (function (_super) {
         if (!this.state.startDate && !this.state.endDate) {
             return;
         }
-        else if ((_a = this.state.startDate) === null || _a === void 0 ? void 0 : _a.isAfter(this.state.endDate)) {
+        else if (this.state.endDate &&
+            ((_a = this.state.startDate) === null || _a === void 0 ? void 0 : _a.isAfter(this.state.endDate))) {
             return;
         }
         this.props.onChange(DateRangePicker.formatValue({
@@ -550,10 +574,10 @@ var DateRangePicker = /** @class */ (function (_super) {
             endDate: this.state.endDate
         }, this.props.format, this.props.joinValues, this.props.delimiter, this.props.utc));
         if (this.state.startDate && !this.state.endDate) {
-            this.setState({ editState: 'end' });
+            this.setState({ editState: 'end', endDateOpenedFirst: false });
         }
         else {
-            this.close();
+            this.close(true);
         }
     };
     DateRangePicker.prototype.filterDate = function (date, originValue, timeFormat, type) {
@@ -586,12 +610,12 @@ var DateRangePicker = /** @class */ (function (_super) {
             this.handleStartDateChange(newValue);
         }
         else if (editState === 'end') {
-            this.handeleEndDateChange(newValue);
+            this.handelEndDateChange(newValue);
         }
     };
     DateRangePicker.prototype.handleStartDateChange = function (newValue) {
         var _a = this.props, timeFormat = _a.timeFormat, minDate = _a.minDate, inputFormat = _a.inputFormat, type = _a.type;
-        var startDate = this.state.startDate;
+        var _b = this.state, startDate = _b.startDate, endDateOpenedFirst = _b.endDateOpenedFirst;
         if (minDate && newValue.isBefore(minDate)) {
             newValue = minDate;
         }
@@ -601,26 +625,21 @@ var DateRangePicker = /** @class */ (function (_super) {
             startInputValue: date.format(inputFormat)
         };
         // 这些没有时间的选择点第一次后第二次就是选结束时间
-        if (type === 'input-date-range' ||
-            type === 'input-year-range' ||
-            type === 'input-quarter-range' ||
-            type === 'input-month-range') {
+        if (!endDateOpenedFirst &&
+            (type === 'input-date-range' ||
+                type === 'input-year-range' ||
+                type === 'input-quarter-range' ||
+                type === 'input-month-range')) {
             newState.editState = 'end';
         }
         this.setState(newState);
     };
-    DateRangePicker.prototype.handeleEndDateChange = function (newValue) {
+    DateRangePicker.prototype.handelEndDateChange = function (newValue) {
         var _this = this;
-        var _a = this.props, embed = _a.embed, timeFormat = _a.timeFormat, inputFormat = _a.inputFormat;
-        var _b = this.state, startDate = _b.startDate, endDate = _b.endDate;
+        var _a = this.props, embed = _a.embed, timeFormat = _a.timeFormat, inputFormat = _a.inputFormat, type = _a.type;
+        var _b = this.state; _b.startDate; var endDate = _b.endDate, endDateOpenedFirst = _b.endDateOpenedFirst;
         newValue = this.getEndDateByDuration(newValue);
-        // 如果结束时间在前面，需要清空开始时间
-        if (newValue.isBefore(startDate)) {
-            this.setState({
-                startDate: undefined,
-                startInputValue: ''
-            });
-        }
+        var editState = endDateOpenedFirst ? 'start' : 'end';
         var date = this.filterDate(newValue, endDate, timeFormat, 'end');
         this.setState({
             endDate: date,
@@ -628,6 +647,9 @@ var DateRangePicker = /** @class */ (function (_super) {
         }, function () {
             embed && _this.confirm();
         });
+        if (type !== 'input-datetime-range') {
+            this.setState({ editState: editState });
+        }
     };
     // 手动控制输入时间
     DateRangePicker.prototype.startInputChange = function (e) {
@@ -741,12 +763,12 @@ var DateRangePicker = /** @class */ (function (_super) {
         }
         if (startDate &&
             minDuration &&
-            newValue.isAfter(startDate.clone().add(minDuration))) {
+            newValue.isBefore(startDate.clone().add(minDuration))) {
             newValue = startDate.clone().add(minDuration);
         }
         if (startDate &&
             maxDuration &&
-            newValue.isBefore(startDate.clone().add(maxDuration))) {
+            newValue.isAfter(startDate.clone().add(maxDuration))) {
             newValue = startDate.clone().add(maxDuration);
         }
         this.setState({
@@ -908,13 +930,21 @@ var DateRangePicker = /** @class */ (function (_super) {
         return true;
     };
     DateRangePicker.prototype.renderDay = function (props, currentDate) {
-        var _a = this.state, startDate = _a.startDate, endDate = _a.endDate;
+        var _a = this.state, startDate = _a.startDate, endDate = _a.endDate; _a.endDateOpenedFirst; _a.editState;
         if (startDate &&
             endDate &&
             currentDate.isBetween(startDate, endDate, 'day', '[]')) {
             props.className += ' rdtBetween';
         }
-        return (React__default["default"].createElement("td", tslib.__assign({}, props),
+        if (startDate && currentDate.isSame(startDate, 'day')) {
+            props.className += ' rdtActive rdtStartDay';
+        }
+        if (endDate && currentDate.isSame(endDate, 'day')) {
+            props.className += ' rdtActive rdtEndDay';
+        }
+        var _b = this.getDisabledElementProps(currentDate), 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, currentDate.date())));
     };
     DateRangePicker.prototype.renderMonth = function (props, month, year, date) {
@@ -929,7 +959,9 @@ var DateRangePicker = /** @class */ (function (_super) {
             currentDate.isBetween(startDate, endDate, 'month', '[]')) {
             props.className += ' rdtBetween';
         }
-        return (React__default["default"].createElement("td", tslib.__assign({}, props),
+        var _b = this.getDisabledElementProps(currentDate), 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, monthStrFixedLength)));
     };
     DateRangePicker.prototype.renderQuarter = function (props, quarter, year) {
@@ -940,7 +972,9 @@ var DateRangePicker = /** @class */ (function (_super) {
             currentDate.isBetween(startDate, endDate, 'quarter', '[]')) {
             props.className += ' rdtBetween';
         }
-        return (React__default["default"].createElement("td", tslib.__assign({}, props),
+        var _b = this.getDisabledElementProps(currentDate), 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,
                 "Q",
                 quarter)));
@@ -953,45 +987,67 @@ var DateRangePicker = /** @class */ (function (_super) {
             currentDate.isBetween(startDate, endDate, 'year', '[]')) {
             props.className += ' rdtBetween';
         }
-        return (React__default["default"].createElement("td", tslib.__assign({}, props),
+        var _b = this.getDisabledElementProps(currentDate), 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)));
     };
     DateRangePicker.prototype.renderCalendar = function () {
+        var _this = this;
         var _a;
-        var _b = this.props, ns = _b.classPrefix, cx = _b.classnames, dateFormat = _b.dateFormat, timeFormat = _b.timeFormat, inputFormat = _b.inputFormat, ranges = _b.ranges, locale = _b.locale, embed = _b.embed, type = _b.type, _c = _b.viewMode, viewMode = _c === void 0 ? 'days' : _c;
+        var _b = this.props, ns = _b.classPrefix, cx = _b.classnames, dateFormat = _b.dateFormat, timeFormat = _b.timeFormat, inputFormat = _b.inputFormat, ranges = _b.ranges, locale = _b.locale, embed = _b.embed, type = _b.type, _c = _b.viewMode, viewMode = _c === void 0 ? 'days' : _c; _b.useMobileUI;
         var __ = this.props.translate;
         var _d = this.state, startDate = _d.startDate, endDate = _d.endDate, editState = _d.editState;
+        var isDateTimeRange = type === 'input-datetime-range';
         // timeRange需要单独选择范围
-        var isTimeRange = type === 'input-datetime-range' || viewMode === 'time';
-        return (React__default["default"].createElement("div", { className: "".concat(ns, "DateRangePicker-wrap"), ref: this.calendarRef },
+        var isTimeRange = isDateTimeRange || viewMode === 'time';
+        return (React__default["default"].createElement("div", { className: cx("".concat(ns, "DateRangePicker-wrap")), ref: this.calendarRef },
             this.renderRanges(ranges),
-            (!isTimeRange || (editState === 'start' && !embed)) && (React__default["default"].createElement(Calendar["default"], { className: "".concat(ns, "DateRangePicker-start"), value: startDate, 
-                // 区分的原因是 time-range 左侧就只能选起始时间，而其它都能在左侧同时同时选择起始和结束
-                // TODO: 后续得把 time-range 代码拆分出来
-                onChange: type === 'input-datetime-range'
-                    ? 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: type === 'input-datetime-range'
-                    ? this.handeleEndDateChange
-                    : viewMode === 'time'
-                        ? this.handleTimeEndChange
-                        : this.handleDateChange, requiredConfirm: false, dateFormat: dateFormat, inputFormat: inputFormat, timeFormat: timeFormat, viewDate: this.nextMonth, isEndDate: true, 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" })),
+            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 左侧就只能选起始时间，而其它都能在左侧同时同时选择起始和结束
+                    // 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.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("a", { className: cx('Button', 'Button--default'), onClick: this.close }, __('cancel')),
+                React__default["default"].createElement("a", { className: cx('Button', 'Button--default'), onClick: function () { return _this.close(); } }, __('cancel')),
                 React__default["default"].createElement("a", { className: cx('Button', 'Button--primary', 'm-l-sm', {
                         'is-disabled': (!this.state.startDate &&
                             isTimeRange &&
                             editState === 'start') ||
                             (!this.state.endDate && isTimeRange && editState === 'end') ||
-                            ((_a = this.state.endDate) === null || _a === void 0 ? void 0 : _a.isBefore(this.state.startDate))
+                            (this.state.startDate &&
+                                ((_a = this.state.endDate) === null || _a === void 0 ? void 0 : _a.isBefore(this.state.startDate)))
                     }), onClick: this.confirm }, __('confirm'))))));
     };
+    DateRangePicker.prototype.getDisabledElementProps = function (currentDate) {
+        var _a = this.state; _a.endDateOpenedFirst; var endDate = _a.endDate, startDate = _a.startDate, editState = _a.editState;
+        var afterEndDate = editState === 'start' && currentDate > endDate;
+        var beforeStartDate = editState === 'end' && currentDate < startDate;
+        if (afterEndDate || beforeStartDate) {
+            return {
+                className: ' is-disabled',
+                onClick: undefined
+            };
+        }
+        return {
+            className: ''
+        };
+    };
     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;
+        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;
         var useCalendarMobile = useMobileUI &&
             amisCore.isMobile() &&
             ['days', 'months', 'quarters'].indexOf(viewMode) > -1;
@@ -1003,7 +1059,7 @@ var DateRangePicker = /** @class */ (function (_super) {
                     'is-disabled': disabled
                 }, className) }, useCalendarMobile ? calendarMobile : this.renderCalendar()));
         }
-        var CalendarMobileTitle = (React__default["default"].createElement("div", { className: "".concat(ns, "CalendarMobile-title") }, __('Calendar.datepicker')));
+        var CalendarMobileTitle = (React__default["default"].createElement("div", { className: "".concat(ns, "CalendarMobile-title") }, label && typeof label === 'string' ? label : __('Calendar.datepicker')));
         return (React__default["default"].createElement("div", { tabIndex: 0, onKeyPress: this.handleKeyPress, onFocus: this.handleFocus, onBlur: this.handleBlur, className: cx("".concat(ns, "DateRangePicker"), (_a = {
                     'is-disabled': disabled,
                     'is-focused': isFocused
@@ -1014,7 +1070,8 @@ var DateRangePicker = /** @class */ (function (_super) {
             React__default["default"].createElement(Input["default"], { className: cx('DateRangePicker-input', {
                     isActive: this.state.editState === 'start' && isOpened
                 }), onChange: this.startInputChange, onClick: this.openStart, ref: this.startInputRef, placeholder: __(startPlaceholder), autoComplete: "off", value: this.state.startInputValue || '', disabled: disabled }),
-            React__default["default"].createElement("span", { className: cx('DateRangePicker-input-separator') }, "-"),
+            React__default["default"].createElement("span", { className: cx('DateRangePicker-input-separator') },
+                React__default["default"].createElement("span", { className: cx('DateRangePicker-input-separator-line') })),
             React__default["default"].createElement(Input["default"], { className: cx('DateRangePicker-input', {
                     isActive: this.state.editState === 'end' && isOpened
                 }), onChange: this.endInputChange, onClick: this.openEnd, ref: this.endInputRef, placeholder: __(endPlaceholder), autoComplete: "off", value: this.state.endInputValue || '', disabled: disabled }),
@@ -1022,7 +1079,7 @@ var DateRangePicker = /** @class */ (function (_super) {
                 React__default["default"].createElement(icons.Icon, { icon: "input-clear", className: "icon" }))) : null,
             React__default["default"].createElement("a", { className: "".concat(ns, "DateRangePicker-toggler") },
                 React__default["default"].createElement(icons.Icon, { icon: viewMode === 'time' ? 'clock' : 'date', className: "icon" })),
-            isOpened ? (useMobileUI && amisCore.isMobile() ? (React__default["default"].createElement(PopUp["default"], { isShow: isOpened, container: popOverContainer, className: cx("".concat(ns, "CalendarMobile-pop")), 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 },
+            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));
     };
     DateRangePicker.defaultProps = {
@@ -1036,7 +1093,8 @@ var DateRangePicker = /** @class */ (function (_super) {
         ranges: 'yesterday,7daysago,prevweek,thismonth,prevmonth,prevquarter',
         resetValue: '',
         closeOnSelect: true,
-        overlayPlacement: 'auto'
+        overlayPlacement: 'auto',
+        endDateOpenedFirst: false
     };
     return DateRangePicker;
 }(React__default["default"].Component));

package/lib/components/Drawer.d.ts

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

package/lib/components/Drawer.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v2.0.0
+ * amis-ui v2.1.0
  * Copyright 2018-2022 fex
  */