@qn-pandora/pandora-component 4.2.0 → 4.3.1

package/lib/components/Drawer/index.js

@@ -53,13 +53,15 @@ 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 config_provider_1 = require("antd/es/config-provider");
 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 language_1 = require("../../utils/language");
+var type_1 = require("../../constants/language/modal/type");
 var DEFAULT_WIDTH = '50%';
 var SMALL_WIDTH = '38%';
 var LARGE_WIDTH = '75%';
@@ -90,13 +92,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_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;
+            var _a = this.props, closable = _a.closable, closeIconPlacement = _a.closeIconPlacement, showFullScreen = _a.showFullScreen;
+            var fullIcon = showFullScreen === true ? (this.isFullscreen ? (react_1.default.createElement(antd_1.Tooltip, { title: language_1.formatString(type_1.ModalLocale.exit_full, this.context.locale) },
+                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(antd_1.Tooltip, { title: language_1.formatString(type_1.ModalLocale.full, this.context.locale) },
+                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,
                     fullIcon,
-                    react_1.default.createElement(CloseIcon_1.default, { className: style_1.SDK_PREFIX + "-drawer-close-icon", onClick: onClose })));
+                    react_1.default.createElement(CloseIcon_1.default, { className: style_1.SDK_PREFIX + "-drawer-close-icon", onClick: this.handleClose })));
             }
             return (react_1.default.createElement(react_1.default.Fragment, null,
                 fullIcon,
@@ -116,12 +120,7 @@ var Drawer = /** @class */ (function (_super) {
         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);
@@ -141,7 +140,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) {
@@ -162,7 +162,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);
             }
         }
     };
@@ -176,18 +176,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_1.default && onScreenFullChange) {
-                screenfull_1.default.on('change', function () {
-                    if (screenfull_1.default) {
-                        onScreenFullChange(screenfull_1.default.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);
@@ -209,10 +209,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_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)), 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.isFullscreen ? '100%' : 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));
     };
+    Drawer.contextType = config_provider_1.ConfigContext;
     __decorate([
         mobx_1.observable,
         __metadata("design:type", Object)
@@ -292,6 +293,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

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

package/lib/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/lib/constants/language/modal/en.js

@@ -1,5 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.modal_en = {
-    close_tooltip: 'close modal'
+    close_tooltip: 'close modal',
+    full: 'Full',
+    exit_full: 'Exit Full Screen'
 };

package/lib/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/lib/constants/language/modal/zh.js

@@ -1,5 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.modal_zh = {
-    close_tooltip: '关闭弹窗'
+    close_tooltip: '关闭弹窗',
+    full: '全屏',
+    exit_full: '退出全屏'
 };