@qn-pandora/pandora-component 4.2.0 → 4.3.1

package/CHANGELOG.json

@@ -1,10 +1,50 @@
 {
   "name": "@qn-pandora/pandora-component",
   "entries": [
+    {
+      "version": "4.3.1",
+      "tag": "@qn-pandora/pandora-component_v4.3.1",
+      "date": "Mon, 30 Oct 2023 08:56:57 GMT",
+      "comments": {
+        "patch": [
+          {
+            "comment": "2023-10-30发包"
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@qn-pandora/pandora-component-icons\" from `^3.3.0` to `^3.3.1`"
+          },
+          {
+            "comment": "Updating dependency \"@qn-pandora/app-sdk\" from `^3.3.0` to `^3.3.1`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "4.3.0",
+      "tag": "@qn-pandora/pandora-component_v4.3.0",
+      "date": "Tue, 24 Oct 2023 08:06:30 GMT",
+      "comments": {
+        "minor": [
+          {
+            "comment": "2023-10-24发包"
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@qn-pandora/pandora-component-icons\" from `^3.2.0` to `^3.3.0`"
+          },
+          {
+            "comment": "Updating dependency \"@qn-pandora/app-sdk\" from `^3.2.0` to `^3.3.0`"
+          }
+        ]
+      }
+    },
     {
       "version": "4.2.0",
       "tag": "@qn-pandora/pandora-component_v4.2.0",
-      "date": "Mon, 25 Sep 2023 06:36:41 GMT",
+      "date": "Mon, 25 Sep 2023 07:36:39 GMT",
       "comments": {
         "minor": [
           {

package/CHANGELOG.md

@@ -1,9 +1,23 @@
 # Change Log - @qn-pandora/pandora-component
 
-This log was last generated on Mon, 25 Sep 2023 06:36:41 GMT and should not be manually modified.
+This log was last generated on Mon, 30 Oct 2023 08:56:57 GMT and should not be manually modified.
+
+## 4.3.1
+Mon, 30 Oct 2023 08:56:57 GMT
+
+### Patches
+
+- 2023-10-30发包
+
+## 4.3.0
+Tue, 24 Oct 2023 08:06:30 GMT
+
+### Minor changes
+
+- 2023-10-24发包
 
 ## 4.2.0
-Mon, 25 Sep 2023 06:36:41 GMT
+Mon, 25 Sep 2023 07:36:39 GMT
 
 ### Minor changes
 

package/es/components/DateTimePicker/Base/index.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as moment from 'moment';
 import { ICompositedTime } from './relativeTimePicker';
-import { EPresetMode, IPreset, RangePreset, IRelativeTime, IQuarterTime, IBaseProps, TimeType } from '../constants';
+import { EPresetMode, IPreset, RangePreset, IRelativeTime, IQuarterTime, IBaseProps, TimeType, IRelativeTimeUnit } from '../constants';
 declare enum RelativeInvalid {
     Valid = 0,
     From = 1,
@@ -51,6 +51,11 @@ export default class Base extends React.Component<IBaseProps, any> {
     getYears(): number[];
     constructor(props: IBaseProps);
     UNSAFE_componentWillReceiveProps(nextProps: IBaseProps): void;
+    getRelativeMap(relativeTimeUnits: IRelativeTimeUnit[]): IKeyValues<{
+        text: string;
+        value: string;
+        time: (num: number) => moment.Moment;
+    }>;
     isRelativeTimeValidFunc(from: ICompositedTime, to: ICompositedTime): boolean;
     getAllPresetItems(): JSX.Element[];
     handlePresetClick(preset: IPreset): void;

package/es/components/DateTimePicker/Base/index.js

@@ -50,7 +50,7 @@ import Selector from '../../Selector';
 import NameLimiter from '../../NameLimiter';
 import RelativeTimePicker from './relativeTimePicker';
 import Time from '../time';
-import { defaultPresets, EPresetMode, relativeMap, RangePreset, rangePresetOptions, TimeType, RelativeUnitValue } from '../constants';
+import { defaultPresets, EPresetMode, RangePreset, rangePresetOptions, TimeType, RelativeUnitValue, RELATIVE_TIME_UNITS } from '../constants';
 import { Quarters } from './constants';
 var Panel = Collapse.Panel;
 var RelativeInvalid;
@@ -71,17 +71,22 @@ export var RELATIVE_DEFAULT_VALUE = {
 var Base = /** @class */ (function (_super) {
     __extends(Base, _super);
     function Base(props) {
+        var _a, _b, _c, _d;
         var _this = _super.call(this, props) || this;
         _this.range = [undefined, undefined];
         _this.rangePreset = RangePreset.BetweenTime;
         _this.relative = {
             from: {
-                num: RELATIVE_DEFAULT_VALUE.FROM_NUM,
-                unit: RELATIVE_DEFAULT_VALUE.FROM_UNIT
+                num: ((_a = _this.props.defaultRelativeValue) === null || _a === void 0 ? void 0 : _a.from.num) ||
+                    RELATIVE_DEFAULT_VALUE.FROM_NUM,
+                unit: ((_b = _this.props.defaultRelativeValue) === null || _b === void 0 ? void 0 : _b.from.unit) ||
+                    RELATIVE_DEFAULT_VALUE.FROM_UNIT
             },
             to: {
-                num: RELATIVE_DEFAULT_VALUE.TO_NUM,
-                unit: RELATIVE_DEFAULT_VALUE.TO_UNIT
+                num: ((_c = _this.props.defaultRelativeValue) === null || _c === void 0 ? void 0 : _c.to.num) ||
+                    RELATIVE_DEFAULT_VALUE.TO_NUM,
+                unit: ((_d = _this.props.defaultRelativeValue) === null || _d === void 0 ? void 0 : _d.to.unit) ||
+                    RELATIVE_DEFAULT_VALUE.TO_UNIT
             }
         };
         _this.relativeTimeInValid = RelativeInvalid.Valid;
@@ -233,9 +238,21 @@ var Base = /** @class */ (function (_super) {
             }
         }
     };
+    Base.prototype.getRelativeMap = function (relativeTimeUnits) {
+        var res = {};
+        relativeTimeUnits.forEach(function (relative) {
+            res[relative.value] = relative;
+        });
+        return res;
+    };
     Base.prototype.isRelativeTimeValidFunc = function (from, to) {
-        var fromDate = relativeMap[from.unit].time(from.num).valueOf();
-        var toDate = relativeMap[to.unit].time(to.num).valueOf();
+        var _a = this.props, relativeTimeUnits = _a.relativeTimeUnits, relativeStartTimeUnits = _a.relativeStartTimeUnits, relativeEndTimeUnits = _a.relativeEndTimeUnits;
+        var start = relativeStartTimeUnits || relativeTimeUnits || RELATIVE_TIME_UNITS;
+        var end = relativeEndTimeUnits || relativeTimeUnits || RELATIVE_TIME_UNITS;
+        var startRelativeMap = this.getRelativeMap(start);
+        var endRelativeMap = this.getRelativeMap(end);
+        var fromDate = startRelativeMap["" + from.unit].time(from.num).valueOf();
+        var toDate = endRelativeMap["" + to.unit].time(to.num).valueOf();
         return fromDate < toDate;
     };
     Base.prototype.getAllPresetItems = function () {
@@ -262,14 +279,14 @@ var Base = /** @class */ (function (_super) {
         }
     };
     Base.prototype.handlePickerOk = function () {
-        var onChange = this.props.onChange;
+        var _a = this.props, onChange = _a.onChange, showTime = _a.showTime;
         if (onChange) {
             var start = this.range[0];
             var end = this.range[1];
             onChange(new Time({
                 // 赋值时将毫秒数清零
-                start: start === null || start === void 0 ? void 0 : start.milliseconds(0),
-                end: end === null || end === void 0 ? void 0 : end.milliseconds(0),
+                start: showTime === false ? start === null || start === void 0 ? void 0 : start.startOf('day') : start === null || start === void 0 ? void 0 : start.milliseconds(0),
+                end: showTime === false ? end === null || end === void 0 ? void 0 : end.startOf('day') : end === null || end === void 0 ? void 0 : end.milliseconds(0),
                 rangePreset: this.rangePreset
             }));
         }
@@ -328,22 +345,26 @@ var Base = /** @class */ (function (_super) {
     };
     Base.prototype.renderRelativeContent = function () {
         var _a;
+        var _b, _c, _d, _e;
         var locale = this.context.locale;
-        var fromNum = _.get(this.relative, 'from.num', RELATIVE_DEFAULT_VALUE.FROM_NUM);
-        var fromUnit = _.get(this.relative, 'from.unit', RELATIVE_DEFAULT_VALUE.FROM_UNIT);
-        var toNum = _.get(this.relative, 'to.num', RELATIVE_DEFAULT_VALUE.TO_NUM);
-        var toUnit = _.get(this.relative, 'to.unit', RELATIVE_DEFAULT_VALUE.TO_UNIT);
+        var fromNum = _.get(this.relative, 'from.num', ((_b = this.props.defaultRelativeValue) === null || _b === void 0 ? void 0 : _b.from.num) ||
+            RELATIVE_DEFAULT_VALUE.FROM_NUM);
+        var fromUnit = _.get(this.relative, 'from.unit', ((_c = this.props.defaultRelativeValue) === null || _c === void 0 ? void 0 : _c.from.unit) ||
+            RELATIVE_DEFAULT_VALUE.FROM_UNIT);
+        var toNum = _.get(this.relative, 'to.num', ((_d = this.props.defaultRelativeValue) === null || _d === void 0 ? void 0 : _d.to.num) || RELATIVE_DEFAULT_VALUE.TO_NUM);
+        var toUnit = _.get(this.relative, 'to.unit', ((_e = this.props.defaultRelativeValue) === null || _e === void 0 ? void 0 : _e.to.unit) || RELATIVE_DEFAULT_VALUE.TO_UNIT);
+        var _f = this.props, relativeStartTimeUnits = _f.relativeStartTimeUnits, relativeEndTimeUnits = _f.relativeEndTimeUnits, relativeTimeUnits = _f.relativeTimeUnits;
         if (!this.isRangePicker()) {
             return (React.createElement("div", { className: SDK_PREFIX + "-datetime-pick-content" },
                 React.createElement("div", { className: SDK_PREFIX + "-datetime-pick-relative-container" },
-                    React.createElement(RelativeTimePicker, { className: SDK_PREFIX + "-datetime-pick-relative", num: fromNum, unit: fromUnit, onChange: this.handleRetiveTimeFromChange, relativeTimeUnits: this.props.relativeTimeUnits }),
+                    React.createElement(RelativeTimePicker, { className: SDK_PREFIX + "-datetime-pick-relative", num: fromNum, unit: fromUnit, onChange: this.handleRetiveTimeFromChange, relativeTimeUnits: relativeStartTimeUnits || relativeTimeUnits }),
                     React.createElement(Button, { disabled: !this.isRelativeTimeValid, className: SDK_PREFIX + "-datetime-pick-relative-confirm", onClick: this.handleRelativeChange }, formatString(DateTimeLocale.confirm, locale)))));
         }
         return (React.createElement("div", { className: SDK_PREFIX + "-datetime-pick-content" },
             React.createElement("div", { className: SDK_PREFIX + "-datetime-pick-relative-container" },
-                React.createElement(RelativeTimePicker, { className: SDK_PREFIX + "-datetime-pick-relative-timepicker", num: fromNum, unit: fromUnit, onChange: this.handleRetiveTimeFromChange, relativeTimeUnits: this.props.relativeTimeUnits, withoutNow: true }),
+                React.createElement(RelativeTimePicker, { className: SDK_PREFIX + "-datetime-pick-relative-timepicker", num: fromNum, unit: fromUnit, onChange: this.handleRetiveTimeFromChange, relativeTimeUnits: relativeStartTimeUnits || relativeTimeUnits, withoutNow: true }),
                 React.createElement("span", { className: SDK_PREFIX + "-datetime-pick-relative-container-to" }, formatString(DateTimeLocale.to, locale)),
-                React.createElement(RelativeTimePicker, { className: SDK_PREFIX + "-datetime-pick-relative-timepicker", num: toNum, unit: toUnit, onChange: this.handleRetiveTimeToChange, relativeTimeUnits: this.props.relativeTimeUnits })),
+                React.createElement(RelativeTimePicker, { className: SDK_PREFIX + "-datetime-pick-relative-timepicker", num: toNum, unit: toUnit, onChange: this.handleRetiveTimeToChange, relativeTimeUnits: relativeEndTimeUnits || relativeTimeUnits })),
             React.createElement("div", { className: classnames(SDK_PREFIX + "-datetime-pick-relative-footer", (_a = {},
                     _a[SDK_PREFIX + "-datetime-pick-relative-footer-witNow"] = toUnit === RelativeUnitValue.NowStatic,
                     _a)) },
@@ -521,6 +542,12 @@ var Base = /** @class */ (function (_super) {
         __metadata("design:paramtypes", [Object]),
         __metadata("design:returntype", void 0)
     ], Base.prototype, "setRelative", null);
+    __decorate([
+        bind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Array]),
+        __metadata("design:returntype", void 0)
+    ], Base.prototype, "getRelativeMap", null);
     __decorate([
         bind,
         __metadata("design:type", Function),

package/es/components/DateTimePicker/Base/relativeTimePicker.js

@@ -14,14 +14,14 @@ var __extends = (this && this.__extends) || (function () {
 import * as React from 'react';
 import { InputNumber } from 'antd';
 import { ConfigContext } from 'antd/es/config-provider';
-import { isNil } from 'lodash';
+import { isNil, find } from 'lodash';
 import classnames from 'classnames';
 import { formatString } from '../../../utils/language';
 import { SDK_PREFIX } from '../../../constants/style';
 import { DateTimeLocale } from '../../../constants/language/datetime/type';
 import { toFormatTime } from '../../../utils/time';
 import Selector from '../../Selector';
-import { relativeTimeUnits, RelativeUnitValue } from '../constants';
+import { RELATIVE_TIME_UNITS, RelativeUnitValue } from '../constants';
 var RetiveTimePicker = /** @class */ (function (_super) {
     __extends(RetiveTimePicker, _super);
     function RetiveTimePicker() {
@@ -60,16 +60,19 @@ var RetiveTimePicker = /** @class */ (function (_super) {
             return _this.containerRef.current || document.body;
         };
         _this.shouldShowInput = function () {
-            var unit = _this.props.unit;
-            return (unit !== RelativeUnitValue.Now && unit !== RelativeUnitValue.NowStatic);
+            var _a;
+            var _b = _this.props, unit = _b.unit, relativeTimeUnits = _b.relativeTimeUnits;
+            return (unit !== RelativeUnitValue.Now &&
+                unit !== RelativeUnitValue.NowStatic &&
+                ((_a = find(relativeTimeUnits || RELATIVE_TIME_UNITS, function (item) { return item.value === unit; })) === null || _a === void 0 ? void 0 : _a.static) !== true);
         };
         return _this;
     }
     RetiveTimePicker.prototype.render = function () {
-        var _a = this.props, num = _a.num, unit = _a.unit, className = _a.className, withoutNow = _a.withoutNow;
+        var _a = this.props, num = _a.num, unit = _a.unit, className = _a.className, withoutNow = _a.withoutNow, relativeTimeUnits = _a.relativeTimeUnits;
         var locale = this.context.locale;
-        var options = this.props.relativeTimeUnits ||
-            relativeTimeUnits.map(function (option) {
+        var options = relativeTimeUnits ||
+            RELATIVE_TIME_UNITS.map(function (option) {
                 return {
                     text: formatString(option.text, locale),
                     value: option.value,

package/es/components/DateTimePicker/constants.d.ts

@@ -32,6 +32,28 @@ export interface IPreset {
 export interface IRelativeTimeUnit {
     text: string;
     value: string;
+    /**
+     * 是否是一个能完整表达的静态时间，例如昨天、前天、上个月，不需要用户再额外输入数字
+     *
+     * 例:
+     * 像两天前，或者几天前，需要用户输入一个数字来确定具体的时间，就是不完整时间。
+     * {
+        text: '天前',
+        value: 'day',
+        static: false,
+        time: (num: number) => moment().startOf('day').subtract(num, 'days')
+      }
+     *
+  
+     * 像 昨天、前天、上个月，不需要用户再额外输入数字。
+     * {
+        text: '昨天',
+        value: 'yesterday',
+        static: true,
+        time: (_: number) => moment().startOf('day').subtract(1, 'days')
+      }
+     */
+    static?: boolean;
     time: (num: number) => moment.Moment;
 }
 export declare const defaultPresets: IPreset[];
@@ -55,10 +77,32 @@ export declare enum RelativeUnitValue {
     Quarter = "Q",
     Year = "y"
 }
-export declare const relativeTimeUnits: IRelativeTimeUnit[];
+export declare const RELATIVE_TIME_UNITS: IRelativeTimeUnit[];
 export declare const relativeTimeUnitsWithoutNowStatic: {
     text: string;
     value: string;
+    /**
+     * 是否是一个能完整表达的静态时间，例如昨天、前天、上个月，不需要用户再额外输入数字
+     *
+     * 例:
+     * 像两天前，或者几天前，需要用户输入一个数字来确定具体的时间，就是不完整时间。
+     * {
+        text: '天前',
+        value: 'day',
+        static: false,
+        time: (num: number) => moment().startOf('day').subtract(num, 'days')
+      }
+     *
+  
+     * 像 昨天、前天、上个月，不需要用户再额外输入数字。
+     * {
+        text: '昨天',
+        value: 'yesterday',
+        static: true,
+        time: (_: number) => moment().startOf('day').subtract(1, 'days')
+      }
+     */
+    static?: boolean | undefined;
     time: (num: number) => moment.Moment;
 }[];
 export declare const relativeMap: IKeyValues<{
@@ -114,6 +158,14 @@ export interface IBaseProps {
      * 预设
      */
     presets?: IPreset[];
+    /**
+     * 自定义相对时间单位(开始)
+     */
+    relativeStartTimeUnits?: IRelativeTimeUnit[];
+    /**
+     * 自定义相对时间单位(结束)
+     */
+    relativeEndTimeUnits?: IRelativeTimeUnit[];
     /**
      * 自定义相对时间单位
      */
@@ -196,6 +248,10 @@ export interface IBaseProps {
      * 语言
      */
     locale?: string;
+    /**
+     * 默认的相对时间
+     */
+    defaultRelativeValue?: IRelativeTime;
 }
 export interface ITimeRange {
     relative?: IRelativeTime;

package/es/components/DateTimePicker/constants.js

@@ -242,7 +242,7 @@ export var RelativeUnitValue;
     RelativeUnitValue["Quarter"] = "Q";
     RelativeUnitValue["Year"] = "y";
 })(RelativeUnitValue || (RelativeUnitValue = {}));
-export var relativeTimeUnits = [
+export var RELATIVE_TIME_UNITS = [
     {
         text: DateTimeLocale.relative.now,
         value: RelativeUnitValue.Now,
@@ -294,15 +294,13 @@ export var relativeTimeUnits = [
         time: function (num) { return moment().subtract(num, 'years'); }
     }
 ];
-export var relativeTimeUnitsWithoutNowStatic = relativeTimeUnits
-    .filter(function (item) { return item.value !== RelativeUnitValue.NowStatic; })
-    .map(function (item) {
+export var relativeTimeUnitsWithoutNowStatic = RELATIVE_TIME_UNITS.filter(function (item) { return item.value !== RelativeUnitValue.NowStatic; }).map(function (item) {
     return item.value === RelativeUnitValue.Now
         ? __assign(__assign({}, item), { text: DateTimeLocale.relative.now_text }) : __assign({}, item);
 });
 export var relativeMap = (function () {
     var res = {};
-    relativeTimeUnits.forEach(function (relative) {
+    RELATIVE_TIME_UNITS.forEach(function (relative) {
         res[relative.value] = relative;
     });
     return res;

package/es/components/DateTimePicker/time.js

@@ -2,7 +2,7 @@ import moment from 'moment';
 import { isEmpty, isEqual } from 'lodash';
 import zhCN from 'antd/es/locale-provider/zh_CN';
 import { toFormatTime } from '../../utils/time';
-import { defaultPresets, relativeTimeUnits, RelativeUnitValue, RangePreset, QuartersMap } from './constants';
+import { defaultPresets, RELATIVE_TIME_UNITS, RelativeUnitValue, RangePreset, QuartersMap } from './constants';
 import { formatString } from '../../utils/language';
 import { DateTimeLocale } from '../../constants/language/datetime/type';
 var Time = /** @class */ (function () {
@@ -34,7 +34,7 @@ var Time = /** @class */ (function () {
         this.isPointPicker = options.isPointPicker;
         this.quarterTime = time.quarterTime;
         this.presetMap = this.getPresetMap(isEmpty(options.presets) ? defaultPresets : options.presets);
-        this.relativeMap = this.getRelativeMap(isEmpty(options.relatives) ? relativeTimeUnits : options.relatives);
+        this.relativeMap = this.getRelativeMap(isEmpty(options.relatives) ? RELATIVE_TIME_UNITS : options.relatives);
     }
     Time.toMoment = function (time) {
         try {

package/es/components/DateTimePicker/transform.d.ts

@@ -4,7 +4,11 @@ export declare function transformToTime(time: ITimeRange): ITime;
 export declare function transformToTimeRange(time: ITime): ITimeRange;
 export declare function getTimeShiftUnit(time: string): TimeShiftUnit.Second | TimeShiftUnit;
 export declare function getRelativeTime(timeShift: string, time: moment.Moment): moment.Moment | undefined;
-export declare function calcFullTime(time?: ITimeRange): {
+export declare function calcFullTime(time?: ITimeRange, options?: {
+    presets?: any;
+    relatives?: any;
+    isPointPicker?: boolean;
+}): {
     start: number | undefined;
     end: number | undefined;
 } | undefined;

package/es/components/DateTimePicker/transform.js

@@ -59,12 +59,13 @@ export function getRelativeTime(timeShift, time) {
         return moment(time).subtract(timeShiftValue, timeShiftUnit);
     }
 }
-export function calcFullTime(time) {
+export function calcFullTime(time, options) {
+    if (options === void 0) { options = {}; }
     if (!time) {
         return;
     }
     var timeShift = time.timeShift;
-    var _a = new Time(transformToTime(time)).toDate(), start = _a.start, end = _a.end;
+    var _a = new Time(transformToTime(time), options).toDate(), start = _a.start, end = _a.end;
     var relativeStart = timeShift && start ? getRelativeTime(timeShift, start) : start;
     var relativeEnd = timeShift && end ? getRelativeTime(timeShift, end) : end;
     return {

package/es/components/Drawer/CloseIcon/index.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 export interface IProps {
     className?: string;
+    getPopupContainer?: () => HTMLElement;
     onClick?: (e: any) => void;
 }
 export declare const CloseIcon: React.FC<IProps>;

package/es/components/Drawer/CloseIcon/index.js

@@ -8,8 +8,8 @@ import { formatString } from '../../../utils/language';
 import { ModalLocale } from '../../../constants/language/modal/type';
 export var CloseIcon = function (props) {
     var locale = useContext(ConfigContext).locale;
-    var className = props.className, onClick = props.onClick;
-    return (React.createElement(Tooltip, { title: formatString(ModalLocale.close_tooltip, locale) },
+    var className = props.className, onClick = props.onClick, getPopupContainer = props.getPopupContainer;
+    return (React.createElement(Tooltip, { title: formatString(ModalLocale.close_tooltip, locale), getPopupContainer: getPopupContainer },
         React.createElement(Close, { className: classnames(SDK_PREFIX + "-modal-close-icon", className), onClick: onClick })));
 };
 export default CloseIcon;

package/es/components/Drawer/index.d.ts

@@ -78,6 +78,7 @@ export declare class Drawer extends React.Component<React.PropsWithChildren<IDra
     realWidth: React.ReactText;
     isFullscreen: boolean;
     throttleMouseMove: import("lodash").DebouncedFunc<(e: any) => void>;
+    static contextType: React.Context<import("antd/es/config-provider").ConfigConsumerProps>;
     get closable(): boolean | undefined;
     get extra(): JSX.Element;
     setIsResizing(isResizing?: boolean): void;
@@ -89,6 +90,7 @@ export declare class Drawer extends React.Component<React.PropsWithChildren<IDra
     onMouseMove(e: any): void;
     onMouseClick(e: MouseEvent): void;
     initWidth(width?: string | number, size?: string): React.ReactText;
+    handleClose(e: EventType | null): void;
     componentDidMount(): void;
     UNSAFE_componentWillUpdate(nextProps: Readonly<React.PropsWithChildren<IDrawerProps>>): void;
     componentWillUnmount(): void;

package/es/components/Drawer/index.js

@@ -47,14 +47,16 @@ import classnames from 'classnames';
 import { throttle } from 'lodash';
 import { observer } from 'mobx-react';
 import { observable, action, computed } from 'mobx';
-import { Drawer as BaseDrawer } from 'antd';
-import screenfull from 'screenfull';
+import { Drawer as BaseDrawer, Tooltip } from 'antd';
+import { ConfigContext } from 'antd/es/config-provider';
 import { FullscreenExitOutlined, FullscreenOutlined } from '@qn-pandora/pandora-component-icons';
 import { doesDOMMatchSelector } from '../../utils/dom';
 import { SDK_PREFIX, ANT_PREFIX } from '../../constants/style';
 import modalPopupContainerWrapper from '../../hoc/modalPopupContainer';
 import bind from '../../utils/bind';
 import CloseIcon from './CloseIcon';
+import { formatString } from '../../utils/language';
+import { ModalLocale } from '../../constants/language/modal/type';
 var DEFAULT_WIDTH = '50%';
 var SMALL_WIDTH = '38%';
 var LARGE_WIDTH = '75%';
@@ -85,13 +87,15 @@ var Drawer = /** @class */ (function (_super) {
     });
     Object.defineProperty(Drawer.prototype, "extra", {
         get: function () {
-            var _a = this.props, closable = _a.closable, closeIconPlacement = _a.closeIconPlacement, onClose = _a.onClose, showFullScreen = _a.showFullScreen;
-            var fullIcon = showFullScreen === true ? (this.isFullscreen ? (React.createElement(FullscreenExitOutlined, { onClick: this.handleFull, className: SDK_PREFIX + "-drawer-header-full-icon" })) : (React.createElement(FullscreenOutlined, { onClick: this.handleFull, className: SDK_PREFIX + "-drawer-header-full-icon" }))) : null;
+            var _a = this.props, closable = _a.closable, closeIconPlacement = _a.closeIconPlacement, showFullScreen = _a.showFullScreen;
+            var fullIcon = showFullScreen === true ? (this.isFullscreen ? (React.createElement(Tooltip, { title: formatString(ModalLocale.exit_full, this.context.locale) },
+                React.createElement(FullscreenExitOutlined, { onClick: this.handleFull, className: SDK_PREFIX + "-drawer-header-full-icon" }))) : (React.createElement(Tooltip, { title: formatString(ModalLocale.full, this.context.locale) },
+                React.createElement(FullscreenOutlined, { onClick: this.handleFull, className: SDK_PREFIX + "-drawer-header-full-icon" })))) : null;
             if (closable !== false && closeIconPlacement === 'right') {
                 return (React.createElement(React.Fragment, null,
                     this.props.extra,
                     fullIcon,
-                    React.createElement(CloseIcon, { className: SDK_PREFIX + "-drawer-close-icon", onClick: onClose })));
+                    React.createElement(CloseIcon, { className: SDK_PREFIX + "-drawer-close-icon", onClick: this.handleClose })));
             }
             return (React.createElement(React.Fragment, null,
                 fullIcon,
@@ -111,12 +115,7 @@ var Drawer = /** @class */ (function (_super) {
         this.isFullscreen = isFullscreen;
     };
     Drawer.prototype.handleFull = function () {
-        var draw = document.querySelector("." + this.drawerId);
-        if (!screenfull || !draw) {
-            return;
-        }
         this.setIsFullscreen(!this.isFullscreen);
-        screenfull.toggle(draw);
     };
     Drawer.prototype.onMouseDown = function () {
         this.setIsResizing(true);
@@ -136,7 +135,8 @@ var Drawer = /** @class */ (function (_super) {
         }
     };
     Drawer.prototype.onMouseClick = function (e) {
-        var _a = this.props, mask = _a.mask, maskClosable = _a.maskClosable, nonCloseSelector = _a.nonCloseSelector, onClose = _a.onClose, visible = _a.visible;
+        var _a;
+        var _b = this.props, mask = _b.mask, maskClosable = _b.maskClosable, nonCloseSelector = _b.nonCloseSelector, visible = _b.visible;
         if (this.isResizing)
             return;
         if (mask === false && maskClosable && visible) {
@@ -157,7 +157,7 @@ var Drawer = /** @class */ (function (_super) {
                 currentEl = currentEl.parentElement;
             }
             if (shouldClose) {
-                onClose === null || onClose === void 0 ? void 0 : onClose(null);
+                (_a = this.handleClose) === null || _a === void 0 ? void 0 : _a.call(this, null);
             }
         }
     };
@@ -171,18 +171,18 @@ var Drawer = /** @class */ (function (_super) {
             return LARGE_WIDTH;
         return DEFAULT_WIDTH;
     };
-    Drawer.prototype.componentDidMount = function () {
-        document.body.addEventListener('mousedown', this.onMouseClick);
-        var onScreenFullChange = this.props.onScreenFullChange;
-        if (this.props.showFullScreen) {
-            if (screenfull && onScreenFullChange) {
-                screenfull.on('change', function () {
-                    if (screenfull) {
-                        onScreenFullChange(screenfull.isFullscreen);
-                    }
-                });
+    Drawer.prototype.handleClose = function (e) {
+        var _a = this.props, onClose = _a.onClose, showFullScreen = _a.showFullScreen;
+        if (onClose) {
+            onClose(e);
+            // 如果在全屏的状态下关闭抽屉，需要将关闭全屏
+            if (showFullScreen && this.isFullscreen) {
+                this.handleFull();
             }
         }
+    };
+    Drawer.prototype.componentDidMount = function () {
+        document.body.addEventListener('mousedown', this.onMouseClick);
         if (this.props.canDrag) {
             document.addEventListener('mousemove', this.throttleMouseMove);
             document.addEventListener('mouseup', this.onMouseUp);
@@ -204,10 +204,11 @@ var Drawer = /** @class */ (function (_super) {
         var _b = this.props, width = _b.width, className = _b.className, children = _b.children, canDrag = _b.canDrag, visible = _b.visible, closable = _b.closable, extra = _b.extra, size = _b.size, onClose = _b.onClose, other = __rest(_b, ["width", "className", "children", "canDrag", "visible", "closable", "extra", "size", "onClose"]);
         return (React.createElement(BaseDrawer, __assign({ className: classnames(this.drawerId, SDK_PREFIX + "-drawer", className, (_a = {},
                 _a[SDK_PREFIX + "-drawer-no-mask"] = this.props.mask === false,
-                _a)), width: this.realWidth || 800, zIndex: 1200, visible: visible, closable: this.closable, extra: this.extra, closeIcon: React.createElement(CloseIcon, { className: SDK_PREFIX + "-drawer-close-icon", onClick: onClose }), onClose: onClose }, other),
+                _a)), width: this.isFullscreen ? '100%' : this.realWidth || 800, zIndex: 1200, visible: visible, closable: this.closable, extra: this.extra, closeIcon: React.createElement(CloseIcon, { className: SDK_PREFIX + "-drawer-close-icon", onClick: this.handleClose }), onClose: this.handleClose }, other),
             canDrag && (React.createElement("div", { className: SDK_PREFIX + "-scroll-handler", onMouseDown: this.onMouseDown })),
             children));
     };
+    Drawer.contextType = ConfigContext;
     __decorate([
         observable,
         __metadata("design:type", Object)
@@ -287,6 +288,12 @@ var Drawer = /** @class */ (function (_super) {
         __metadata("design:paramtypes", [Object, String]),
         __metadata("design:returntype", void 0)
     ], Drawer.prototype, "initWidth", null);
+    __decorate([
+        bind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], Drawer.prototype, "handleClose", null);
     Drawer = __decorate([
         observer
     ], Drawer);

package/es/components/Drawer/style.css

@@ -296,3 +296,6 @@
   color: #333;
   font-size: 14px;
 }
+.pandora-sdk-drawer-no-mask {
+  background-color: #ffffff;
+}

package/es/components/Drawer/style.less

@@ -55,3 +55,7 @@
   color: @font-color-7;
   font-size: 14px;
 }
+
+.@{sdk-prefix}-drawer-no-mask {
+  background-color: @normal-color;
+}

package/es/constants/language/modal/en.js

@@ -1,3 +1,5 @@
 export var modal_en = {
-    close_tooltip: 'close modal'
+    close_tooltip: 'close modal',
+    full: 'Full',
+    exit_full: 'Exit Full Screen'
 };

package/es/constants/language/modal/type.d.ts

@@ -1,4 +1,6 @@
 export interface IModalLocale {
     close_tooltip: string;
+    full: string;
+    exit_full: string;
 }
 export declare const ModalLocale: IModalLocale;

package/es/constants/language/modal/zh.js

@@ -1,3 +1,5 @@
 export var modal_zh = {
-    close_tooltip: '关闭弹窗'
+    close_tooltip: '关闭弹窗',
+    full: '全屏',
+    exit_full: '退出全屏'
 };