@qn-pandora/pandora-component 4.1.7 → 4.3.0

package/es/index.less

@@ -2,24 +2,24 @@
 @import './style/theme.less';
 @import './components/AutoComplete/style.less';
 @import './components/Breadcrumb/style.less';
-@import './components/Card/style.less';
 @import './components/Button/style.less';
+@import './components/Card/style.less';
 @import './components/CheckTransformList/style.less';
 @import './components/Checkbox/style.less';
 @import './components/CheckboxList/style.less';
 @import './components/Collapse/style.less';
 @import './components/CollapsiblePanel/style.less';
-@import './components/Descriptions/style.less';
 @import './components/DateTimePicker/style.less';
-@import './components/FileResumable/style.less';
+@import './components/Descriptions/style.less';
 @import './components/Drawer/style.less';
+@import './components/FileResumable/style.less';
 @import './components/Input/style.less';
 @import './components/KeyValuePair/style.less';
 @import './components/Menu/style.less';
 @import './components/Modal/style.less';
+@import './components/NameExplainTooltip/style.less';
 @import './components/NameLimiter/style.less';
 @import './components/OptionList/style.less';
-@import './components/NameExplainTooltip/style.less';
 @import './components/RadioGroup/style.less';
 @import './components/RangeInput/style.less';
 @import './components/RemarkName/style.less';
@@ -42,6 +42,7 @@
 @import './components/OptionList/OptionItem/style.less';
 @import './components/OptionList/PopoverOptionList/style.less';
 @import './components/Steps/ControlButton/style.less';
+@import './components/Table/ColumnSetting/style.less';
 @import './components/Table/ColumnTag/style.less';
 @import './components/TagList/Tag/style.less';
 @import './components/TagList/TagSwitch/style.less';

package/es/style/theme.less

@@ -72,6 +72,7 @@
 @font-color-6: #666;
 @font-color-9: #999;
 @font-color-7: #333;
+@font-color-8: #8c8c8c;
 @secondary-font-color: #c1c7d0; // phoenix
 @disabled-text-color: #9eaec5; // pandora-visualization pheonix
 @log-font-family: 'Droid Sans Mono', 'Consolas', 'Monaco', 'Courier New',
@@ -394,7 +395,11 @@
 @agent-box-shadow-color: rgba(53, 53, 53, 0.07);
 @agent-cursor-color: #282828;
 @agent-spl-background-color: #edeff2;
+@agent-example-desc-color: #595959;
 @agent-input-border-color: #e9e9e9;
 @agent-border-color: #e8e8e8;
 @background-color-fa: #fafafa;
 @background-color-f5: #f5f5f5;
+@background-color-f4: #f4f5f6;
+@background-linear-color: rgba(244, 245, 246, 0);
+@background-color-e2: #e2e4e6;

package/lib/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/lib/components/DateTimePicker/Base/index.js

@@ -83,17 +83,22 @@ exports.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 = constants_1.RangePreset.BetweenTime;
         _this.relative = {
             from: {
-                num: exports.RELATIVE_DEFAULT_VALUE.FROM_NUM,
-                unit: exports.RELATIVE_DEFAULT_VALUE.FROM_UNIT
+                num: ((_a = _this.props.defaultRelativeValue) === null || _a === void 0 ? void 0 : _a.from.num) ||
+                    exports.RELATIVE_DEFAULT_VALUE.FROM_NUM,
+                unit: ((_b = _this.props.defaultRelativeValue) === null || _b === void 0 ? void 0 : _b.from.unit) ||
+                    exports.RELATIVE_DEFAULT_VALUE.FROM_UNIT
             },
             to: {
-                num: exports.RELATIVE_DEFAULT_VALUE.TO_NUM,
-                unit: exports.RELATIVE_DEFAULT_VALUE.TO_UNIT
+                num: ((_c = _this.props.defaultRelativeValue) === null || _c === void 0 ? void 0 : _c.to.num) ||
+                    exports.RELATIVE_DEFAULT_VALUE.TO_NUM,
+                unit: ((_d = _this.props.defaultRelativeValue) === null || _d === void 0 ? void 0 : _d.to.unit) ||
+                    exports.RELATIVE_DEFAULT_VALUE.TO_UNIT
             }
         };
         _this.relativeTimeInValid = RelativeInvalid.Valid;
@@ -245,9 +250,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 = constants_1.relativeMap[from.unit].time(from.num).valueOf();
-        var toDate = constants_1.relativeMap[to.unit].time(to.num).valueOf();
+        var _a = this.props, relativeTimeUnits = _a.relativeTimeUnits, relativeStartTimeUnits = _a.relativeStartTimeUnits, relativeEndTimeUnits = _a.relativeEndTimeUnits;
+        var start = relativeStartTimeUnits || relativeTimeUnits || constants_1.RELATIVE_TIME_UNITS;
+        var end = relativeEndTimeUnits || relativeTimeUnits || constants_1.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 () {
@@ -274,14 +291,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_2.default({
                 // 赋值时将毫秒数清零
-                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
             }));
         }
@@ -340,22 +357,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', exports.RELATIVE_DEFAULT_VALUE.FROM_NUM);
-        var fromUnit = _.get(this.relative, 'from.unit', exports.RELATIVE_DEFAULT_VALUE.FROM_UNIT);
-        var toNum = _.get(this.relative, 'to.num', exports.RELATIVE_DEFAULT_VALUE.TO_NUM);
-        var toUnit = _.get(this.relative, 'to.unit', exports.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) ||
+            exports.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) ||
+            exports.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) || exports.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) || exports.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: style_1.SDK_PREFIX + "-datetime-pick-content" },
                 React.createElement("div", { className: style_1.SDK_PREFIX + "-datetime-pick-relative-container" },
-                    React.createElement(relativeTimePicker_1.default, { className: style_1.SDK_PREFIX + "-datetime-pick-relative", num: fromNum, unit: fromUnit, onChange: this.handleRetiveTimeFromChange, relativeTimeUnits: this.props.relativeTimeUnits }),
+                    React.createElement(relativeTimePicker_1.default, { className: style_1.SDK_PREFIX + "-datetime-pick-relative", num: fromNum, unit: fromUnit, onChange: this.handleRetiveTimeFromChange, relativeTimeUnits: relativeStartTimeUnits || relativeTimeUnits }),
                     React.createElement(Button_1.default, { disabled: !this.isRelativeTimeValid, className: style_1.SDK_PREFIX + "-datetime-pick-relative-confirm", onClick: this.handleRelativeChange }, language_1.formatString(type_1.DateTimeLocale.confirm, locale)))));
         }
         return (React.createElement("div", { className: style_1.SDK_PREFIX + "-datetime-pick-content" },
             React.createElement("div", { className: style_1.SDK_PREFIX + "-datetime-pick-relative-container" },
-                React.createElement(relativeTimePicker_1.default, { className: style_1.SDK_PREFIX + "-datetime-pick-relative-timepicker", num: fromNum, unit: fromUnit, onChange: this.handleRetiveTimeFromChange, relativeTimeUnits: this.props.relativeTimeUnits, withoutNow: true }),
+                React.createElement(relativeTimePicker_1.default, { className: style_1.SDK_PREFIX + "-datetime-pick-relative-timepicker", num: fromNum, unit: fromUnit, onChange: this.handleRetiveTimeFromChange, relativeTimeUnits: relativeStartTimeUnits || relativeTimeUnits, withoutNow: true }),
                 React.createElement("span", { className: style_1.SDK_PREFIX + "-datetime-pick-relative-container-to" }, language_1.formatString(type_1.DateTimeLocale.to, locale)),
-                React.createElement(relativeTimePicker_1.default, { className: style_1.SDK_PREFIX + "-datetime-pick-relative-timepicker", num: toNum, unit: toUnit, onChange: this.handleRetiveTimeToChange, relativeTimeUnits: this.props.relativeTimeUnits })),
+                React.createElement(relativeTimePicker_1.default, { className: style_1.SDK_PREFIX + "-datetime-pick-relative-timepicker", num: toNum, unit: toUnit, onChange: this.handleRetiveTimeToChange, relativeTimeUnits: relativeEndTimeUnits || relativeTimeUnits })),
             React.createElement("div", { className: classnames_1.default(style_1.SDK_PREFIX + "-datetime-pick-relative-footer", (_a = {},
                     _a[style_1.SDK_PREFIX + "-datetime-pick-relative-footer-witNow"] = toUnit === constants_1.RelativeUnitValue.NowStatic,
                     _a)) },
@@ -533,6 +554,12 @@ var Base = /** @class */ (function (_super) {
         __metadata("design:paramtypes", [Object]),
         __metadata("design:returntype", void 0)
     ], Base.prototype, "setRelative", null);
+    __decorate([
+        bind_1.default,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Array]),
+        __metadata("design:returntype", void 0)
+    ], Base.prototype, "getRelativeMap", null);
     __decorate([
         bind_1.default,
         __metadata("design:type", Function),

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

@@ -72,16 +72,19 @@ var RetiveTimePicker = /** @class */ (function (_super) {
             return _this.containerRef.current || document.body;
         };
         _this.shouldShowInput = function () {
-            var unit = _this.props.unit;
-            return (unit !== constants_1.RelativeUnitValue.Now && unit !== constants_1.RelativeUnitValue.NowStatic);
+            var _a;
+            var _b = _this.props, unit = _b.unit, relativeTimeUnits = _b.relativeTimeUnits;
+            return (unit !== constants_1.RelativeUnitValue.Now &&
+                unit !== constants_1.RelativeUnitValue.NowStatic &&
+                ((_a = lodash_1.find(relativeTimeUnits || constants_1.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 ||
-            constants_1.relativeTimeUnits.map(function (option) {
+        var options = relativeTimeUnits ||
+            constants_1.RELATIVE_TIME_UNITS.map(function (option) {
                 return {
                     text: language_1.formatString(option.text, locale),
                     value: option.value,

package/lib/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/lib/components/DateTimePicker/constants.js

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

package/lib/components/DateTimePicker/time.js

@@ -39,7 +39,7 @@ var Time = /** @class */ (function () {
         this.isPointPicker = options.isPointPicker;
         this.quarterTime = time.quarterTime;
         this.presetMap = this.getPresetMap(lodash_1.isEmpty(options.presets) ? constants_1.defaultPresets : options.presets);
-        this.relativeMap = this.getRelativeMap(lodash_1.isEmpty(options.relatives) ? constants_1.relativeTimeUnits : options.relatives);
+        this.relativeMap = this.getRelativeMap(lodash_1.isEmpty(options.relatives) ? constants_1.RELATIVE_TIME_UNITS : options.relatives);
     }
     Time.toMoment = function (time) {
         try {

package/lib/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/lib/components/DateTimePicker/transform.js

@@ -68,12 +68,13 @@ function getRelativeTime(timeShift, time) {
     }
 }
 exports.getRelativeTime = getRelativeTime;
-function calcFullTime(time) {
+function calcFullTime(time, options) {
+    if (options === void 0) { options = {}; }
     if (!time) {
         return;
     }
     var timeShift = time.timeShift;
-    var _a = new time_1.default(transformToTime(time)).toDate(), start = _a.start, end = _a.end;
+    var _a = new time_1.default(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/lib/components/Drawer/index.d.ts

@@ -57,27 +57,39 @@ export declare type IDrawerProps = Overwrite<DrawerProps, {
      * 是否允许拖拽
      */
     canDrag?: boolean;
+    /**
+     * 关闭按钮显示的位置，默认left
+     */
     closeIconPlacement?: 'left' | 'right';
     /**
      * 无遮罩时点击空白处中的哪些元素不关闭
      */
     nonCloseSelector?: string;
     size?: 'small' | 'default' | 'large';
+    /**
+     * 是否显示全屏按钮
+     */
+    showFullScreen?: boolean;
+    onScreenFullChange?: (showFullScreen: boolean) => void;
 }>;
 export declare class Drawer extends React.Component<React.PropsWithChildren<IDrawerProps>, any> {
     drawerId: string;
     isResizing: boolean;
     realWidth: React.ReactText;
+    isFullscreen: boolean;
     throttleMouseMove: import("lodash").DebouncedFunc<(e: any) => void>;
     get closable(): boolean | undefined;
-    get extra(): {} | null | undefined;
+    get extra(): JSX.Element;
     setIsResizing(isResizing?: boolean): void;
     setRealWidth(realWidth: string | number): void;
+    setIsFullscreen(isFullscreen: boolean): void;
+    handleFull(): void;
     onMouseDown(): void;
     onMouseUp(): void;
     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;
@@ -136,12 +148,20 @@ declare const _default: (props: {
      * 是否允许拖拽
      */
     canDrag?: boolean | undefined;
+    /**
+     * 关闭按钮显示的位置，默认left
+     */
     closeIconPlacement?: import("antd/es/collapse/Collapse").ExpandIconPosition;
     /**
      * 无遮罩时点击空白处中的哪些元素不关闭
      */
     nonCloseSelector?: string | undefined;
     size?: "small" | "default" | "large" | undefined;
+    /**
+     * 是否显示全屏按钮
+     */
+    showFullScreen?: boolean | undefined;
+    onScreenFullChange?: ((showFullScreen: boolean) => void) | undefined;
 } & Pick<DrawerProps, "style" | "autoFocus" | "prefixCls" | "footer" | "extra" | "bodyStyle" | "forceRender" | "keyboard" | "destroyOnClose" | "closeIcon" | "drawerStyle" | "headerStyle" | "contentWrapperStyle" | "push" | "handler" | "footerStyle" | "level" | "levelMove"> & {
     children?: React.ReactNode;
 } & {

package/lib/components/Drawer/index.js

@@ -53,14 +53,16 @@ var lodash_1 = require("lodash");
 var mobx_react_1 = require("mobx-react");
 var mobx_1 = require("mobx");
 var antd_1 = require("antd");
+var screenfull_1 = __importDefault(require("screenfull"));
+var pandora_component_icons_1 = require("@qn-pandora/pandora-component-icons");
 var dom_1 = require("../../utils/dom");
 var style_1 = require("../../constants/style");
 var modalPopupContainer_1 = __importDefault(require("../../hoc/modalPopupContainer"));
 var bind_1 = __importDefault(require("../../utils/bind"));
 var CloseIcon_1 = __importDefault(require("./CloseIcon"));
-var DEFAULT_WIDTH = 640;
-var SMALL_WIDTH = 480;
-var LARGE_WIDTH = 960;
+var DEFAULT_WIDTH = '50%';
+var SMALL_WIDTH = '38%';
+var LARGE_WIDTH = '75%';
 var MAX_WIDTH = 6000;
 var MIN_WIDTH = 300;
 var Drawer = /** @class */ (function (_super) {
@@ -70,6 +72,7 @@ var Drawer = /** @class */ (function (_super) {
         _this.drawerId = "drawer-id-" + Math.floor(Math.random() * 10000);
         _this.isResizing = false;
         _this.realWidth = _this.initWidth(_this.props.width, _this.props.size);
+        _this.isFullscreen = false;
         _this.throttleMouseMove = lodash_1.throttle(function (e) { return _this.onMouseMove(e); }, 100);
         return _this;
     }
@@ -87,13 +90,17 @@ 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;
+            var _a = this.props, closable = _a.closable, closeIconPlacement = _a.closeIconPlacement, showFullScreen = _a.showFullScreen;
+            var fullIcon = showFullScreen === true ? (this.isFullscreen ? (react_1.default.createElement(pandora_component_icons_1.FullscreenExitOutlined, { onClick: this.handleFull, className: style_1.SDK_PREFIX + "-drawer-header-full-icon" })) : (react_1.default.createElement(pandora_component_icons_1.FullscreenOutlined, { onClick: this.handleFull, className: style_1.SDK_PREFIX + "-drawer-header-full-icon" }))) : null;
             if (closable !== false && closeIconPlacement === 'right') {
                 return (react_1.default.createElement(react_1.default.Fragment, null,
                     this.props.extra,
-                    react_1.default.createElement(CloseIcon_1.default, { className: style_1.SDK_PREFIX + "-drawer-close-icon", onClick: onClose })));
+                    fullIcon,
+                    react_1.default.createElement(CloseIcon_1.default, { className: style_1.SDK_PREFIX + "-drawer-close-icon", onClick: this.handleClose })));
             }
-            return this.props.extra;
+            return (react_1.default.createElement(react_1.default.Fragment, null,
+                fullIcon,
+                this.props.extra));
         },
         enumerable: true,
         configurable: true
@@ -105,6 +112,17 @@ var Drawer = /** @class */ (function (_super) {
     Drawer.prototype.setRealWidth = function (realWidth) {
         this.realWidth = realWidth;
     };
+    Drawer.prototype.setIsFullscreen = function (isFullscreen) {
+        this.isFullscreen = isFullscreen;
+    };
+    Drawer.prototype.handleFull = function () {
+        var draw = document.querySelector("." + this.drawerId);
+        if (!screenfull_1.default || !draw) {
+            return;
+        }
+        this.setIsFullscreen(!this.isFullscreen);
+        screenfull_1.default.toggle(draw);
+    };
     Drawer.prototype.onMouseDown = function () {
         this.setIsResizing(true);
     };
@@ -123,7 +141,10 @@ 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) {
             var currentEl = e.target;
             var shouldClose = true;
@@ -142,7 +163,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);
             }
         }
     };
@@ -156,12 +177,32 @@ var Drawer = /** @class */ (function (_super) {
             return LARGE_WIDTH;
         return DEFAULT_WIDTH;
     };
+    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);
+        var onScreenFullChange = this.props.onScreenFullChange;
+        if (this.props.showFullScreen) {
+            if (screenfull_1.default && onScreenFullChange) {
+                screenfull_1.default.on('change', function () {
+                    if (screenfull_1.default) {
+                        onScreenFullChange(screenfull_1.default.isFullscreen);
+                    }
+                });
+            }
+        }
         if (this.props.canDrag) {
             document.addEventListener('mousemove', this.throttleMouseMove);
             document.addEventListener('mouseup', this.onMouseUp);
         }
-        document.body.addEventListener('click', this.onMouseClick);
     };
     Drawer.prototype.UNSAFE_componentWillUpdate = function (nextProps) {
         if (nextProps.canDrag && !this.props.canDrag) {
@@ -179,10 +220,7 @@ 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_1.default.createElement(antd_1.Drawer, __assign({ className: classnames_1.default(this.drawerId, style_1.SDK_PREFIX + "-drawer", className, (_a = {},
                 _a[style_1.SDK_PREFIX + "-drawer-no-mask"] = this.props.mask === false,
-                _a[style_1.SDK_PREFIX + "-drawer-size-small"] = size === 'small',
-                _a[style_1.SDK_PREFIX + "-drawer-size-default"] = size === 'default',
-                _a[style_1.SDK_PREFIX + "-drawer-size-large"] = size === 'large',
-                _a)), width: this.realWidth || 800, zIndex: 1200, visible: visible, closable: this.closable, extra: this.extra, closeIcon: react_1.default.createElement(CloseIcon_1.default, { className: style_1.SDK_PREFIX + "-drawer-close-icon", onClick: onClose }), onClose: onClose }, other),
+                _a)), width: this.realWidth || 800, zIndex: 1200, visible: visible, closable: this.closable, extra: this.extra, closeIcon: react_1.default.createElement(CloseIcon_1.default, { className: style_1.SDK_PREFIX + "-drawer-close-icon", onClick: this.handleClose }), onClose: this.handleClose }, other),
             canDrag && (react_1.default.createElement("div", { className: style_1.SDK_PREFIX + "-scroll-handler", onMouseDown: this.onMouseDown })),
             children));
     };
@@ -194,6 +232,10 @@ var Drawer = /** @class */ (function (_super) {
         mobx_1.observable,
         __metadata("design:type", Object)
     ], Drawer.prototype, "realWidth", void 0);
+    __decorate([
+        mobx_1.observable,
+        __metadata("design:type", Boolean)
+    ], Drawer.prototype, "isFullscreen", void 0);
     __decorate([
         mobx_1.computed,
         __metadata("design:type", Object),
@@ -218,6 +260,19 @@ var Drawer = /** @class */ (function (_super) {
         __metadata("design:paramtypes", [Object]),
         __metadata("design:returntype", void 0)
     ], Drawer.prototype, "setRealWidth", null);
+    __decorate([
+        bind_1.default,
+        mobx_1.action,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Boolean]),
+        __metadata("design:returntype", void 0)
+    ], Drawer.prototype, "setIsFullscreen", null);
+    __decorate([
+        bind_1.default,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], Drawer.prototype, "handleFull", null);
     __decorate([
         bind_1.default,
         __metadata("design:type", Function),
@@ -248,6 +303,12 @@ var Drawer = /** @class */ (function (_super) {
         __metadata("design:paramtypes", [Object, String]),
         __metadata("design:returntype", void 0)
     ], Drawer.prototype, "initWidth", null);
+    __decorate([
+        bind_1.default,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], Drawer.prototype, "handleClose", null);
     Drawer = __decorate([
         mobx_react_1.observer
     ], Drawer);

package/lib/components/Drawer/style.css

@@ -263,6 +263,9 @@
   height: 60px;
   line-height: 60px;
 }
+.pandora-sdk-drawer .ant-drawer-header-title {
+  overflow: hidden;
+}
 .pandora-sdk-drawer-size-small {
   max-width: 38%;
 }
@@ -288,3 +291,11 @@
 .pandora-sdk-drawer-close-icon {
   margin-left: 24px;
 }
+.pandora-sdk-drawer-header-full-icon {
+  margin-left: 24px;
+  color: #333;
+  font-size: 14px;
+}
+.pandora-sdk-drawer-no-mask {
+  background-color: #ffffff;
+}