@qn-pandora/pandora-component 4.0.12 → 4.0.13

package/es/index.less

@@ -1,16 +1,16 @@
 @import './style\mixin.less';
 @import './style\theme.less';
-@import './components\Breadcrumb\style.less';
-@import './components\AutoComplete\style.less';
-@import './components\Card\style.less';
 @import './components\Button\style.less';
-@import './components\CheckboxList\style.less';
+@import './components\AutoComplete\style.less';
+@import './components\Breadcrumb\style.less';
 @import './components\Checkbox\style.less';
+@import './components\CheckboxList\style.less';
+@import './components\Card\style.less';
+@import './components\CollapsiblePanel\style.less';
 @import './components\Collapse\style.less';
+@import './components\Drawer\style.less';
 @import './components\CheckTransformList\style.less';
-@import './components\CollapsiblePanel\style.less';
 @import './components\DateTimePicker\style.less';
-@import './components\Drawer\style.less';
 @import './components\FileResumable\style.less';
 @import './components\Input\style.less';
 @import './components\KeyValuePair\style.less';
@@ -18,33 +18,33 @@
 @import './components\Modal\style.less';
 @import './components\NameExplainTooltip\style.less';
 @import './components\NameLimiter\style.less';
-@import './components\RadioGroup\style.less';
 @import './components\OptionList\style.less';
+@import './components\RadioGroup\style.less';
 @import './components\RangeInput\style.less';
 @import './components\RemarkName\style.less';
 @import './components\Selector\style.less';
 @import './components\Spin\style.less';
 @import './components\Steps\style.less';
-@import './components\Tabs\style.less';
 @import './components\Table\style.less';
-@import './components\TagList\style.less';
+@import './components\Tabs\style.less';
 @import './components\Timeline\style.less';
 @import './components\TreeSelector\style.less';
 @import './components\Transfer\style.less';
+@import './components\TagList\style.less';
 @import './components\Card\SearchInput\style.less';
 @import './components\Card\RowExtra\style.less';
 @import './components\DateTimePicker\Base\style.less';
-@import './components\DateTimePicker\BaseMobile\style.less';
 @import './components\DateTimePicker\DisplayInput\style.less';
+@import './components\DateTimePicker\BaseMobile\style.less';
 @import './components\OptionList\OptionItem\style.less';
-@import './components\OptionList\PopoverOptionList\style.less';
 @import './components\OptionList\InlineOptionList\style.less';
-@import './components\Steps\ControlButton\style.less';
+@import './components\OptionList\PopoverOptionList\style.less';
 @import './components\Table\ColumnTag\style.less';
-@import './components\TagList\Tag\style.less';
-@import './components\TagList\TagSwitch\style.less';
-@import './components\Timeline\TimelineItem\style.less';
+@import './components\Steps\ControlButton\style.less';
 @import './components\Transfer\List\style.less';
+@import './components\Timeline\TimelineItem\style.less';
 @import './components\Transfer\ListBody\style.less';
-@import './components\DateTimePicker\BaseMobile\Absolute\style.less';
-@import './components\DateTimePicker\Collapse\Panel\style.less';
+@import './components\TagList\Tag\style.less';
+@import './components\TagList\TagSwitch\style.less';
+@import './components\DateTimePicker\Collapse\Panel\style.less';
+@import './components\DateTimePicker\BaseMobile\Absolute\style.less';

package/es/style/theme.less

@@ -388,5 +388,5 @@
 @editor_nav_border_color: #d8d8d8;
 @editor_nav_line_color: #fcce72;
 @image-operator-hover-bg: rgba(51, 51, 51, 0.7);
-@agent-user-color: #853ee8; // 智能机器人智能鼓用户头像颜色
-@agent-user-message-background-color: #f7f7f8; // 用户框背景色
+@agent-agent-message-background-color: #f7f7f8; // 用户框背景色
+@agent-user-avatar-color: #e6902d; // 机器人用户头像颜色;

package/es/utils/dom.d.ts

@@ -0,0 +1 @@
+export declare function doesDOMMatchSelector(selector: string, element: HTMLElement): boolean;

package/es/utils/dom.js

@@ -0,0 +1,42 @@
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
+// 判断css选择器selector是否命中element
+export function doesDOMMatchSelector(selector, element) {
+    var e_1, _a;
+    var _b;
+    // Check if the browser supports matches() method
+    if (typeof element.matches === 'function') {
+        return element.matches(selector);
+    }
+    // Check if the browser supports webkitMatchesSelector() method
+    if (typeof element.webkitMatchesSelector === 'function') {
+        return element.webkitMatchesSelector(selector);
+    }
+    // If none of the above methods are supported, fall back to querySelectorAll()
+    var matches = ((_b = element.ownerDocument) === null || _b === void 0 ? void 0 : _b.querySelectorAll(selector)) || [];
+    try {
+        for (var _c = __values(Array.from(matches)), _d = _c.next(); !_d.done; _d = _c.next()) {
+            var el = _d.value;
+            if (el === element) {
+                return true;
+            }
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    return false;
+}

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

@@ -51,15 +51,20 @@ export declare type IDrawerProps = Overwrite<DrawerProps, {
      */
     zIndex?: number;
     getContainer?: string | HTMLElement | getContainerFunc | false;
-    onClose?: (e: EventType) => void;
+    onClose?: (e: EventType | null) => void;
     afterVisibleChange?: (visible: boolean) => void;
     /**
      * 是否允许拖拽
      */
     canDrag?: boolean;
     closeIconPlacement?: 'left' | 'right';
+    /**
+     * 无遮罩时点击空白处中的哪些元素不关闭
+     */
+    nonCloseSelector?: string;
 }>;
 export declare class Drawer extends React.Component<React.PropsWithChildren<IDrawerProps>, any> {
+    drawerId: string;
     isResizing: boolean;
     realWidth: string | number | undefined;
     throttleMouseMove: import("lodash").DebouncedFunc<(e: any) => void>;
@@ -70,6 +75,7 @@ export declare class Drawer extends React.Component<React.PropsWithChildren<IDra
     onMouseDown(): void;
     onMouseUp(): void;
     onMouseMove(e: any): void;
+    onMouseClick(e: MouseEvent): void;
     componentDidMount(): void;
     UNSAFE_componentWillUpdate(nextProps: Readonly<React.PropsWithChildren<IDrawerProps>>): void;
     componentWillUnmount(): void;
@@ -122,17 +128,22 @@ declare const _default: (props: {
      */
     zIndex?: number | undefined;
     getContainer?: string | false | HTMLElement | getContainerFunc | undefined;
-    onClose?: ((e: EventType) => void) | undefined;
+    onClose?: ((e: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement | HTMLButtonElement, MouseEvent> | null) => void) | undefined;
     afterVisibleChange?: ((visible: boolean) => void) | undefined;
     /**
      * 是否允许拖拽
      */
     canDrag?: boolean | undefined;
     closeIconPlacement?: import("antd/es/collapse/Collapse").ExpandIconPosition;
+    /**
+     * 无遮罩时点击空白处中的哪些元素不关闭
+     */
+    nonCloseSelector?: string | undefined;
 } & Pick<DrawerProps, "style" | "autoFocus" | "size" | "prefixCls" | "footer" | "extra" | "bodyStyle" | "forceRender" | "keyboard" | "destroyOnClose" | "closeIcon" | "drawerStyle" | "headerStyle" | "contentWrapperStyle" | "push" | "handler" | "footerStyle" | "level" | "levelMove"> & {
     children?: React.ReactNode;
 } & {
     bodyStyle?: React.CSSProperties | undefined;
     children: React.ReactNode;
+    title?: React.ReactNode;
 }) => JSX.Element;
 export default _default;

package/lib/components/Drawer/index.js

@@ -54,8 +54,9 @@ var mobx_react_1 = require("mobx-react");
 var mobx_1 = require("mobx");
 var antd_1 = require("antd");
 var icons_1 = require("@ant-design/icons");
+var dom_1 = require("../../utils/dom");
 var style_1 = require("../../constants/style");
-var popContainer_1 = __importDefault(require("../../hoc/popContainer"));
+var modalPopupContainer_1 = __importDefault(require("../../hoc/modalPopupContainer"));
 var bind_1 = __importDefault(require("../../utils/bind"));
 var MAX_WIDTH = 6000;
 var MIN_WIDTH = 300;
@@ -63,6 +64,7 @@ var Drawer = /** @class */ (function (_super) {
     __extends(Drawer, _super);
     function Drawer() {
         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.throttleMouseMove = lodash_1.throttle(function (e) { return _this.onMouseMove(e); }, 100);
@@ -113,11 +115,36 @@ 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;
+        if (mask === false && maskClosable && visible) {
+            var currentEl = e.target;
+            var shouldClose = true;
+            while (currentEl) {
+                if (nonCloseSelector) {
+                    if (dom_1.doesDOMMatchSelector(nonCloseSelector, currentEl)) {
+                        shouldClose = false;
+                        break;
+                    }
+                }
+                if (dom_1.doesDOMMatchSelector("." + this.drawerId, currentEl) ||
+                    dom_1.doesDOMMatchSelector("." + style_1.ANT_PREFIX + "-modal-root, .ant-modal-root", currentEl)) {
+                    shouldClose = false;
+                    break;
+                }
+                currentEl = currentEl.parentElement;
+            }
+            if (shouldClose) {
+                onClose === null || onClose === void 0 ? void 0 : onClose(null);
+            }
+        }
+    };
     Drawer.prototype.componentDidMount = function () {
         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) {
@@ -128,11 +155,12 @@ var Drawer = /** @class */ (function (_super) {
     Drawer.prototype.componentWillUnmount = function () {
         document.removeEventListener('mousemove', this.throttleMouseMove);
         document.removeEventListener('mouseup', this.onMouseUp);
+        document.body.removeEventListener('click', this.onMouseClick);
     };
     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"]);
-        return (react_1.default.createElement(antd_1.Drawer, __assign({ className: classnames_1.default(style_1.SDK_PREFIX + "-drawer", className, (_a = {},
+        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 || 'auto', zIndex: 1200, visible: visible, closable: this.closable, extra: this.extra }, other),
             canDrag && (react_1.default.createElement("div", { className: style_1.SDK_PREFIX + "-scroll-handler", onMouseDown: this.onMouseDown })),
@@ -188,10 +216,16 @@ var Drawer = /** @class */ (function (_super) {
         __metadata("design:paramtypes", [Object]),
         __metadata("design:returntype", void 0)
     ], Drawer.prototype, "onMouseMove", null);
+    __decorate([
+        bind_1.default,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [MouseEvent]),
+        __metadata("design:returntype", void 0)
+    ], Drawer.prototype, "onMouseClick", null);
     Drawer = __decorate([
         mobx_react_1.observer
     ], Drawer);
     return Drawer;
 }(react_1.default.Component));
 exports.Drawer = Drawer;
-exports.default = popContainer_1.default(Drawer);
+exports.default = modalPopupContainer_1.default(Drawer);

package/lib/components/Table/index.d.ts

@@ -29,6 +29,7 @@ export interface ITableProps<T> extends TableProps<T> {
     selectedRows?: T[];
     /** 如果支持多选，则batchOptions为多选时的一些批量操作，如删除、添加等 */
     batchOptions?: IOptionItem[];
+    emptyText?: React.ReactNode;
 }
 /**
  * pandora2.0风格的表格
@@ -48,6 +49,7 @@ declare class Table<T = any> extends React.Component<ITableProps<T>, any> {
     get rowSelection(): TableRowSelection<T> | undefined;
     get undisabledData(): readonly T[];
     get keysOfCurrentPage(): any[];
+    get emptyTextComp(): {};
     getRowKey(row: any, index: number): any;
     setIndeterminate(indeterminate: boolean): void;
     setCheckAll(checkAll: boolean): void;

package/lib/components/Table/index.js

@@ -166,6 +166,26 @@ var Table = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(Table.prototype, "emptyTextComp", {
+        get: function () {
+            var emptyText = this.props.emptyText;
+            if (!emptyText) {
+                return (React.createElement("div", { className: style_1.SDK_PREFIX + "-table-empty" },
+                    React.createElement("div", { className: style_1.SDK_PREFIX + "-table-empty-icon" },
+                        React.createElement(pandora_component_icons_1.EmptyIcon, null)),
+                    React.createElement("div", { className: style_1.SDK_PREFIX + "-table-empty-text" }, language_1.formatString(type_1.TableLocale.empty, this.context.locale))));
+            }
+            if (typeof emptyText === 'string' || typeof emptyText === 'number') {
+                return (React.createElement("div", { className: style_1.SDK_PREFIX + "-table-empty" },
+                    React.createElement("div", { className: style_1.SDK_PREFIX + "-table-empty-icon" },
+                        React.createElement(pandora_component_icons_1.EmptyIcon, null)),
+                    React.createElement("div", { className: style_1.SDK_PREFIX + "-table-empty-text" }, emptyText)));
+            }
+            return emptyText;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Table.prototype.getRowKey = function (row, index) {
         var rowKey = this.props.rowKey;
         if (typeof rowKey === 'function') {
@@ -250,12 +270,9 @@ var Table = /** @class */ (function (_super) {
     Table.prototype.render = function () {
         var _a, _b;
         var _this = this;
-        var _c = this.props, className = _c.className, batchOptions = _c.batchOptions, scroll = _c.scroll, locale = _c.locale, restProps = __rest(_c, ["className", "batchOptions", "scroll", "locale"]);
+        var _c = this.props, className = _c.className, batchOptions = _c.batchOptions, scroll = _c.scroll, locale = _c.locale, emptyText = _c.emptyText, restProps = __rest(_c, ["className", "batchOptions", "scroll", "locale", "emptyText"]);
         return (React.createElement("div", null,
-            React.createElement(antd_1.Table, __assign({ scroll: scroll, locale: __assign({ emptyText: (React.createElement("div", { className: style_1.SDK_PREFIX + "-table-empty" },
-                        React.createElement("div", { className: style_1.SDK_PREFIX + "-table-empty-icon" },
-                            React.createElement(pandora_component_icons_1.EmptyIcon, null)),
-                        React.createElement("div", { className: style_1.SDK_PREFIX + "-table-empty-text" }, language_1.formatString(type_1.TableLocale.empty, this.context.locale)))) }, locale) }, restProps, { className: classnames_1.default(style_1.SDK_PREFIX + "-table-wrapper", (_a = {}, _a[style_1.SDK_PREFIX + "-table-scrollX"] = lodash_1.get(scroll, 'x'), _a), (_b = {}, _b[style_1.SDK_PREFIX + "-table-scrollY"] = lodash_1.get(scroll, 'y'), _b), className), 
+            React.createElement(antd_1.Table, __assign({ scroll: scroll, locale: __assign({ emptyText: this.emptyTextComp }, locale) }, restProps, { className: classnames_1.default(style_1.SDK_PREFIX + "-table-wrapper", (_a = {}, _a[style_1.SDK_PREFIX + "-table-scrollX"] = lodash_1.get(scroll, 'x'), _a), (_b = {}, _b[style_1.SDK_PREFIX + "-table-scrollY"] = lodash_1.get(scroll, 'y'), _b), className), 
                 // 涉及到权限
                 // getCheckboxProps只能放到tableBatchWrapper里，因为selectedRowKeys在那个组件计算
                 rowSelection: batchOptions && this.props.rowSelection
@@ -309,6 +326,11 @@ var Table = /** @class */ (function (_super) {
         __metadata("design:type", Object),
         __metadata("design:paramtypes", [])
     ], Table.prototype, "keysOfCurrentPage", null);
+    __decorate([
+        mobx_1.computed,
+        __metadata("design:type", Object),
+        __metadata("design:paramtypes", [])
+    ], Table.prototype, "emptyTextComp", null);
     __decorate([
         bind_1.default,
         __metadata("design:type", Function),

package/lib/components/Tabs/index.d.ts

@@ -21,6 +21,10 @@ export interface IOption {
      * 当用户点击刷新的回调函数，此项不存在时表示不显示刷新 Icon
      */
     onRefresh?: () => void;
+    /**
+     * tab对应内容
+     */
+    children?: React.ReactNode;
 }
 export interface ITabsProps extends TabsProps {
     /**

package/lib/components/Tabs/index.js

@@ -37,7 +37,7 @@ function Tabs(props) {
     var className = props.className, active = props.active, options = props.options, onChange = props.onChange, refreshText = props.refreshText, onRefresh = props.onRefresh, restProps = __rest(props, ["className", "active", "options", "onChange", "refreshText", "onRefresh"]);
     var panes = options.map(function (_a) {
         var _b;
-        var key = _a.key, text = _a.text, hidden = _a.hidden, refreshTextCur = _a.refreshText, onRefreshCur = _a.onRefresh;
+        var key = _a.key, text = _a.text, children = _a.children, hidden = _a.hidden, refreshTextCur = _a.refreshText, onRefreshCur = _a.onRefresh;
         if (hidden) {
             return null;
         }
@@ -49,7 +49,7 @@ function Tabs(props) {
                 _b)) },
             text,
             refresh));
-        return react_1.default.createElement(antd_1.Tabs.TabPane, { key: key, tab: tab });
+        return (react_1.default.createElement(antd_1.Tabs.TabPane, { key: key, tab: tab }, children));
     });
     return (react_1.default.createElement(antd_1.Tabs, __assign({ className: classnames_1.default(style_1.SDK_PREFIX + "-tabs", className), tabBarGutter: 16, activeKey: active, onChange: onChange }, restProps), panes));
 }

package/lib/constants/style.d.ts

@@ -1 +1,2 @@
 export declare const SDK_PREFIX = "pandora-sdk";
+export declare const ANT_PREFIX = "pandora-antd";

package/lib/constants/style.js

@@ -1,3 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SDK_PREFIX = 'pandora-sdk';
+exports.ANT_PREFIX = 'pandora-antd';

package/lib/hoc/modalPopupContainer.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export default function modalPopupContainerWrapper<T>(Comp: React.ComponentType<T>): (props: T & {
+    bodyStyle?: React.CSSProperties | undefined;
+    children: React.ReactNode;
+    title?: React.ReactNode;
+}) => JSX.Element;

package/lib/hoc/{popContainer.js → modalPopupContainer.js}

@@ -32,16 +32,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var config_provider_1 = __importStar(require("antd/es/config-provider"));
 var style_1 = require("../constants/style");
-function popContainerWrapper(Comp) {
+function modalPopupContainerWrapper(Comp) {
     return function (props) {
         var containerRef = react_1.useRef(null);
-        var _a = props.bodyStyle, bodyStyle = _a === void 0 ? {} : _a, children = props.children, rest = __rest(props, ["bodyStyle", "children"]);
+        var titleRef = react_1.useRef(null);
+        var _a = props.bodyStyle, bodyStyle = _a === void 0 ? {} : _a, children = props.children, title = props.title, rest = __rest(props, ["bodyStyle", "children", "title"]);
         var childrenGetPopupContainer = react_1.useCallback(function () {
             return (containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) || document.body;
         }, []);
-        return (react_1.default.createElement(Comp, __assign({}, rest),
+        var titleGetPopupContainer = react_1.useCallback(function () {
+            return (containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) || document.body;
+        }, []);
+        return (react_1.default.createElement(Comp, __assign({}, rest, { title: react_1.default.createElement("div", { ref: titleRef },
+                react_1.default.createElement(config_provider_1.ConfigConsumer, null, function (config) { return (react_1.default.createElement(config_provider_1.default, __assign({}, config, { getPopupContainer: titleGetPopupContainer }), title)); })) }),
             react_1.default.createElement("div", { className: style_1.SDK_PREFIX + "-drawer-container", ref: containerRef, style: bodyStyle },
                 react_1.default.createElement(config_provider_1.ConfigConsumer, null, function (config) { return (react_1.default.createElement(config_provider_1.default, __assign({}, config, { getPopupContainer: childrenGetPopupContainer }), children)); }))));
     };
 }
-exports.default = popContainerWrapper;
+exports.default = modalPopupContainerWrapper;