@qn-pandora/pandora-component 4.0.13 → 4.1.0

package/es/components/Drawer/index.js

@@ -48,11 +48,14 @@ import { throttle } from 'lodash';
 import { observer } from 'mobx-react';
 import { observable, action, computed } from 'mobx';
 import { Drawer as BaseDrawer } from 'antd';
-import { CloseOutlined } from '@ant-design/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';
+var DEFAULT_WIDTH = 640;
+var SMALL_WIDTH = 480;
+var LARGE_WIDTH = 960;
 var MAX_WIDTH = 6000;
 var MIN_WIDTH = 300;
 var Drawer = /** @class */ (function (_super) {
@@ -61,13 +64,13 @@ var Drawer = /** @class */ (function (_super) {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.drawerId = "drawer-id-" + Math.floor(Math.random() * 10000);
         _this.isResizing = false;
-        _this.realWidth = _this.props.width;
+        _this.realWidth = _this.initWidth(_this.props.width, _this.props.size);
         _this.throttleMouseMove = throttle(function (e) { return _this.onMouseMove(e); }, 100);
         return _this;
     }
     Object.defineProperty(Drawer.prototype, "closable", {
         get: function () {
-            if (this.props.closable &&
+            if (this.props.closable !== false &&
                 this.props.closeIconPlacement &&
                 this.props.closeIconPlacement === 'right') {
                 return false;
@@ -79,10 +82,11 @@ var Drawer = /** @class */ (function (_super) {
     });
     Object.defineProperty(Drawer.prototype, "extra", {
         get: function () {
-            if (this.props.closable && this.props.closeIconPlacement === 'right') {
+            var _a = this.props, closable = _a.closable, closeIconPlacement = _a.closeIconPlacement, onClose = _a.onClose;
+            if (closable !== false && closeIconPlacement === 'right') {
                 return (React.createElement(React.Fragment, null,
                     this.props.extra,
-                    React.createElement(CloseOutlined, { onClick: this.props.onClose, className: SDK_PREFIX + "-drawer-right-close-icon" })));
+                    React.createElement(CloseIcon, { className: SDK_PREFIX + "-drawer-close-icon", onClick: onClose })));
             }
             return this.props.extra;
         },
@@ -105,7 +109,10 @@ var Drawer = /** @class */ (function (_super) {
     Drawer.prototype.onMouseMove = function (e) {
         if (this.isResizing) {
             var offsetRight = document.body.offsetWidth - (e.clientX - document.body.offsetLeft);
-            if (offsetRight > MIN_WIDTH && offsetRight < MAX_WIDTH) {
+            if (offsetRight > MIN_WIDTH &&
+                offsetRight < MAX_WIDTH &&
+                offsetRight < document.body.offsetWidth - 10 // 10表示宽度至少比body小10，防止出现把抽屉拖出body的情况
+            ) {
                 this.setRealWidth(offsetRight);
             }
         }
@@ -123,7 +130,7 @@ var Drawer = /** @class */ (function (_super) {
                     }
                 }
                 if (doesDOMMatchSelector("." + this.drawerId, currentEl) ||
-                    doesDOMMatchSelector("." + ANT_PREFIX + "-modal-root, .ant-modal-root", currentEl)) {
+                    doesDOMMatchSelector("." + ANT_PREFIX + "-modal-root, .ant-modal-root, ." + ANT_PREFIX + "-drawer, .ant-drawer, ." + ANT_PREFIX + "-popover, .ant-popover", currentEl)) {
                     shouldClose = false;
                     break;
                 }
@@ -134,6 +141,16 @@ var Drawer = /** @class */ (function (_super) {
             }
         }
     };
+    Drawer.prototype.initWidth = function (width, size) {
+        if (width) {
+            return width;
+        }
+        if (size && size === 'small')
+            return SMALL_WIDTH;
+        if (size && size === 'large')
+            return LARGE_WIDTH;
+        return DEFAULT_WIDTH;
+    };
     Drawer.prototype.componentDidMount = function () {
         if (this.props.canDrag) {
             document.addEventListener('mousemove', this.throttleMouseMove);
@@ -154,10 +171,13 @@ var Drawer = /** @class */ (function (_super) {
     };
     Drawer.prototype.render = function () {
         var _a;
-        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, other = __rest(_b, ["width", "className", "children", "canDrag", "visible", "closable", "extra"]);
+        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 || 'auto', zIndex: 1200, visible: visible, closable: this.closable, extra: this.extra }, other),
+                _a[SDK_PREFIX + "-drawer-size-small"] = size === 'small',
+                _a[SDK_PREFIX + "-drawer-size-default"] = size === 'default',
+                _a[SDK_PREFIX + "-drawer-size-large"] = size === 'large',
+                _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),
             canDrag && (React.createElement("div", { className: SDK_PREFIX + "-scroll-handler", onMouseDown: this.onMouseDown })),
             children));
     };
@@ -217,6 +237,12 @@ var Drawer = /** @class */ (function (_super) {
         __metadata("design:paramtypes", [MouseEvent]),
         __metadata("design:returntype", void 0)
     ], Drawer.prototype, "onMouseClick", null);
+    __decorate([
+        bind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object, String]),
+        __metadata("design:returntype", void 0)
+    ], Drawer.prototype, "initWidth", null);
     Drawer = __decorate([
         observer
     ], Drawer);

package/es/components/Drawer/style.css

@@ -269,6 +269,15 @@
   height: 60px;
   line-height: 60px;
 }
+.pandora-sdk-drawer-size-small {
+  max-width: 38%;
+}
+.pandora-sdk-drawer-size-default {
+  max-width: 50%;
+}
+.pandora-sdk-drawer-size-large {
+  max-width: 75%;
+}
 .pandora-sdk-drawer-no-mask .ant-drawer-content-wrapper {
   width: 100%;
 }
@@ -282,7 +291,6 @@
   z-index: 100;
   cursor: ew-resize;
 }
-.pandora-sdk-drawer-right-close-icon {
-  margin-left: 8px;
-  font-size: 16px;
+.pandora-sdk-drawer-close-icon {
+  margin-left: 24px;
 }

package/es/components/Drawer/style.less

@@ -16,6 +16,16 @@
   }
 }
 
+.@{sdk-prefix}-drawer-size-small {
+  max-width: 38%;
+}
+.@{sdk-prefix}-drawer-size-default {
+  max-width: 50%;
+}
+.@{sdk-prefix}-drawer-size-large {
+  max-width: 75%;
+}
+
 .@{sdk-prefix}-drawer-no-mask {
   .@{ant-prefix}-drawer-content-wrapper {
     width: 100%;
@@ -33,7 +43,6 @@
   cursor: ew-resize;
 }
 
-.@{sdk-prefix}-drawer-right-close-icon {
-  margin-left: 8px;
-  font-size: 16px;
+.@{sdk-prefix}-drawer-close-icon {
+  margin-left: 24px;
 }

package/es/components/Modal/index.js

@@ -49,6 +49,7 @@ import { Modal as BaseModal, ConfigProvider } from 'antd';
 import { ConfigConsumer } from 'antd/es/config-provider';
 import { SDK_PREFIX } from '../../constants/style';
 import bind from '../../utils/bind';
+import CloseIcon from '../Drawer/CloseIcon';
 /**
  * 全局弹窗组件样式封装
  */
@@ -72,8 +73,8 @@ var Modal = /** @class */ (function (_super) {
     };
     Modal.prototype.render = function () {
         var _this = this;
-        var _a = this.props, wrapClassName = _a.wrapClassName, children = _a.children, bodyStyle = _a.bodyStyle, title = _a.title, otherProps = __rest(_a, ["wrapClassName", "children", "bodyStyle", "title"]);
-        return (React.createElement(BaseModal, __assign({ wrapClassName: classnames(SDK_PREFIX + "-modal", wrapClassName), maskClosable: false, title: title }, otherProps),
+        var _a = this.props, wrapClassName = _a.wrapClassName, children = _a.children, bodyStyle = _a.bodyStyle, title = _a.title, onCancel = _a.onCancel, otherProps = __rest(_a, ["wrapClassName", "children", "bodyStyle", "title", "onCancel"]);
+        return (React.createElement(BaseModal, __assign({ wrapClassName: classnames(SDK_PREFIX + "-modal", wrapClassName), maskClosable: false, title: title, closeIcon: React.createElement(CloseIcon, { onClick: onCancel }), onCancel: onCancel }, otherProps),
             React.createElement("div", { ref: this.setContainerRef, style: bodyStyle },
                 React.createElement(ConfigConsumer, null, function (config) { return (React.createElement(ConfigProvider, __assign({}, config, { getPopupContainer: _this.childrenGetPopupContainer }), children)); }))));
     };

package/es/components/Table/style.css

@@ -1572,10 +1572,18 @@ textarea.ant-pagination-options-quick-jumper input {
 .pandora-sdk-table-wrapper .pandora-sdk-odd-table-row + .ant-table-expanded-row {
   background: #fafafa;
 }
+.pandora-sdk-table-wrapper .pandora-sdk-odd-table-row td,
+.pandora-sdk-table-wrapper .pandora-sdk-odd-table-row + .ant-table-expanded-row td {
+  background-color: inherit;
+}
 .pandora-sdk-table-wrapper .pandora-sdk-even-table-row,
 .pandora-sdk-table-wrapper .pandora-sdk-even-table-row + .ant-table-expanded-row {
   background: #ffffff;
 }
+.pandora-sdk-table-wrapper .pandora-sdk-even-table-row td,
+.pandora-sdk-table-wrapper .pandora-sdk-even-table-row + .ant-table-expanded-row td {
+  background-color: inherit;
+}
 .pandora-sdk-table-wrapper .ant-table-row:hover {
   background: #f3f7fd;
 }

package/es/components/Table/style.less

@@ -139,10 +139,16 @@
   .@{sdk-prefix}-odd-table-row,
   .@{sdk-prefix}-odd-table-row + .@{ant-prefix}-table-expanded-row {
     background: @table-row-even-bg;
+    td {
+      background-color: inherit;
+    }
   }
   .@{sdk-prefix}-even-table-row,
   .@{sdk-prefix}-even-table-row + .@{ant-prefix}-table-expanded-row {
     background: @table-row-odd-bg;
+    td {
+      background-color: inherit;
+    }
   }
 
   .@{ant-prefix}-table-row {

package/es/constants/language/en.js

@@ -4,6 +4,7 @@ import { range_input_en } from './range_input/en';
 import { steps_en } from './steps/en';
 import { table_en } from './table/en';
 import { transfer_en } from './transfer/en';
+import { modal_en } from './modal/en';
 import upload_en from './upload/en';
 export var component_en = {
     check_transform_list: check_transform_list_en,
@@ -12,5 +13,6 @@ export var component_en = {
     steps: steps_en,
     table: table_en,
     transfer: transfer_en,
-    upload: upload_en
+    upload: upload_en,
+    modal: modal_en
 };

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

@@ -0,0 +1,2 @@
+import { IModalLocale } from './type';
+export declare const modal_en: IModalLocale;

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

@@ -0,0 +1,3 @@
+export var modal_en = {
+    close_tooltip: 'close modal'
+};

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

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

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

@@ -0,0 +1,3 @@
+import { languageLocale } from '../../../utils/languageLocale';
+import { modal_zh } from './zh';
+export var ModalLocale = languageLocale('modal.', modal_zh);

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

@@ -0,0 +1,2 @@
+import { IModalLocale } from './type';
+export declare const modal_zh: IModalLocale;

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

@@ -0,0 +1,3 @@
+export var modal_zh = {
+    close_tooltip: '关闭弹窗'
+};

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

@@ -5,6 +5,7 @@ import { IStepsLocale } from './steps/type';
 import { ITableLocale } from './table/type';
 import { ITransferLocale } from './transfer/type';
 import { IUploadLocale } from './upload/type';
+import { IModalLocale } from './modal/type';
 export interface IComponentLocal {
     check_transform_list: ICheckTransformListLocale;
     datetime: IDateTimeLocale;
@@ -13,5 +14,6 @@ export interface IComponentLocal {
     table: ITableLocale;
     transfer: ITransferLocale;
     upload: IUploadLocale;
+    modal: IModalLocale;
 }
 export declare const ComponentLocale: IComponentLocal;

package/es/constants/language/zh.js

@@ -4,6 +4,7 @@ import { range_input_zh } from './range_input/zh';
 import { steps_zh } from './steps/zh';
 import { table_zh } from './table/zh';
 import { transfer_zh } from './transfer/zh';
+import { modal_zh } from './modal/zh';
 import upload_zh from './upload/zh';
 export var component_zh = {
     check_transform_list: check_transform_list_zh,
@@ -12,5 +13,6 @@ export var component_zh = {
     steps: steps_zh,
     table: table_zh,
     transfer: transfer_zh,
-    upload: upload_zh
+    upload: upload_zh,
+    modal: modal_zh
 };

package/es/hoc/modalPopupContainer.d.ts

@@ -3,4 +3,5 @@ export default function modalPopupContainerWrapper<T>(Comp: React.ComponentType<
     bodyStyle?: React.CSSProperties | undefined;
     children: React.ReactNode;
     title?: React.ReactNode;
+    extra?: React.ReactNode;
 }) => JSX.Element;

package/es/hoc/modalPopupContainer.js

@@ -27,15 +27,20 @@ export default function modalPopupContainerWrapper(Comp) {
     return function (props) {
         var containerRef = useRef(null);
         var titleRef = useRef(null);
-        var _a = props.bodyStyle, bodyStyle = _a === void 0 ? {} : _a, children = props.children, title = props.title, rest = __rest(props, ["bodyStyle", "children", "title"]);
+        var extraRef = useRef(null);
+        var _a = props.bodyStyle, bodyStyle = _a === void 0 ? {} : _a, children = props.children, title = props.title, extra = props.extra, rest = __rest(props, ["bodyStyle", "children", "title", "extra"]);
         var childrenGetPopupContainer = useCallback(function () {
             return (containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) || document.body;
         }, []);
         var titleGetPopupContainer = useCallback(function () {
-            return (containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) || document.body;
+            return (titleRef === null || titleRef === void 0 ? void 0 : titleRef.current) || document.body;
+        }, []);
+        var extraGetPopupContainer = useCallback(function () {
+            return (extraRef === null || extraRef === void 0 ? void 0 : extraRef.current) || document.body;
         }, []);
-        return (React.createElement(Comp, __assign({}, rest, { title: React.createElement("div", { ref: titleRef },
-                React.createElement(ConfigConsumer, null, function (config) { return (React.createElement(ConfigProvider, __assign({}, config, { getPopupContainer: titleGetPopupContainer }), title)); })) }),
+        return (React.createElement(Comp, __assign({}, rest, { title: title ? (React.createElement("div", { ref: titleRef },
+                React.createElement(ConfigConsumer, null, function (config) { return (React.createElement(ConfigProvider, __assign({}, config, { getPopupContainer: titleGetPopupContainer }), title)); }))) : undefined, extra: extra ? (React.createElement("div", { ref: extraRef },
+                React.createElement(ConfigConsumer, null, function (config) { return (React.createElement(ConfigProvider, __assign({}, config, { getPopupContainer: extraGetPopupContainer }), extra)); }))) : undefined }),
             React.createElement("div", { className: SDK_PREFIX + "-drawer-container", ref: containerRef, style: bodyStyle },
                 React.createElement(ConfigConsumer, null, function (config) { return (React.createElement(ConfigProvider, __assign({}, config, { getPopupContainer: childrenGetPopupContainer }), children)); }))));
     };