@qn-pandora/pandora-component 4.3.0 → 4.3.2

package/es/index.less

@@ -4,13 +4,13 @@
 @import './components/Breadcrumb/style.less';
 @import './components/Button/style.less';
 @import './components/Card/style.less';
-@import './components/CheckTransformList/style.less';
 @import './components/Checkbox/style.less';
+@import './components/CheckTransformList/style.less';
 @import './components/CheckboxList/style.less';
-@import './components/Collapse/style.less';
 @import './components/CollapsiblePanel/style.less';
-@import './components/DateTimePicker/style.less';
+@import './components/Collapse/style.less';
 @import './components/Descriptions/style.less';
+@import './components/DateTimePicker/style.less';
 @import './components/Drawer/style.less';
 @import './components/FileResumable/style.less';
 @import './components/Input/style.less';
@@ -18,18 +18,18 @@
 @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/RadioGroup/style.less';
-@import './components/RangeInput/style.less';
-@import './components/RemarkName/style.less';
+@import './components/OptionList/style.less';
+@import './components/NameLimiter/style.less';
 @import './components/Selector/style.less';
+@import './components/RemarkName/style.less';
+@import './components/RangeInput/style.less';
 @import './components/Spin/style.less';
 @import './components/Steps/style.less';
-@import './components/Table/style.less';
 @import './components/Tabs/style.less';
-@import './components/TagList/style.less';
+@import './components/Table/style.less';
 @import './components/Timeline/style.less';
+@import './components/TagList/style.less';
 @import './components/Transfer/style.less';
 @import './components/TreeSelector/style.less';
 @import './components/Card/RowExtra/style.less';
@@ -45,9 +45,9 @@
 @import './components/Table/ColumnSetting/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/Transfer/List/style.less';
+@import './components/TagList/TagSwitch/style.less';
 @import './components/Transfer/ListBody/style.less';
-@import './components/DateTimePicker/BaseMobile/Absolute/style.less';
-@import './components/DateTimePicker/Collapse/Panel/style.less';
+@import './components/Transfer/List/style.less';
+@import './components/DateTimePicker/Collapse/Panel/style.less';
+@import './components/DateTimePicker/BaseMobile/Absolute/style.less';

package/es/style/theme.less

@@ -390,7 +390,10 @@
 @agent-session-title-color: #595959;
 @close-icon-hover-color: #f4f5f6;
 
-@agent-markdown-scorll-bar-color: #c9cdd4;
+@scroll-bar-color: #c9cdd4;
+@scroll-bar-hover-color: #86909c;
+
+@agent-scene-icon-color: #c9cdd4;
 @agent-markdown-header-background-color: rgb(52, 53, 65);
 @agent-box-shadow-color: rgba(53, 53, 53, 0.07);
 @agent-cursor-color: #282828;
@@ -398,8 +401,12 @@
 @agent-example-desc-color: #595959;
 @agent-input-border-color: #e9e9e9;
 @agent-border-color: #e8e8e8;
+@agent-scene-name-color: #86909c;
 @background-color-fa: #fafafa;
 @background-color-f5: #f5f5f5;
 @background-color-f4: #f4f5f6;
 @background-linear-color: rgba(244, 245, 246, 0);
 @background-color-e2: #e2e4e6;
+@color-error-bg: #fff2f0;
+@color-error: #fd4345;
+@agent-scene-background-color: rgba(0, 0, 0, 0.06);

package/lib/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/lib/components/Drawer/CloseIcon/index.js

@@ -20,8 +20,8 @@ var language_1 = require("../../../utils/language");
 var type_1 = require("../../../constants/language/modal/type");
 exports.CloseIcon = function (props) {
     var locale = react_1.useContext(config_provider_1.ConfigContext).locale;
-    var className = props.className, onClick = props.onClick;
-    return (react_1.default.createElement(antd_1.Tooltip, { title: language_1.formatString(type_1.ModalLocale.close_tooltip, locale) },
+    var className = props.className, onClick = props.onClick, getPopupContainer = props.getPopupContainer;
+    return (react_1.default.createElement(antd_1.Tooltip, { title: language_1.formatString(type_1.ModalLocale.close_tooltip, locale), getPopupContainer: getPopupContainer },
         react_1.default.createElement(pandora_component_icons_1.Close, { className: classnames_1.default(style_1.SDK_PREFIX + "-modal-close-icon", className), onClick: onClick })));
 };
 exports.default = exports.CloseIcon;

package/lib/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;

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%';
@@ -91,7 +93,9 @@ var Drawer = /** @class */ (function (_super) {
     Object.defineProperty(Drawer.prototype, "extra", {
         get: function () {
             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;
+            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,
@@ -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);
@@ -189,16 +188,6 @@ var Drawer = /** @class */ (function (_super) {
     };
     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);
@@ -220,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: this.handleClose }), onClose: this.handleClose }, 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)

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import type { TooltipPlacement } from 'antd/es/tooltip';
 /**
  * 对于超出容器宽度的名称进行省略，使用Tooltip展示。
  */
@@ -7,5 +8,6 @@ export interface INameLimiterProps {
     name: string;
     /** 用于显示Tooltip的title */
     title?: string;
+    placement?: TooltipPlacement;
 }
-export default function NameLimiter({ name, title }: INameLimiterProps): JSX.Element;
+export default function NameLimiter({ name, title, placement }: INameLimiterProps): JSX.Element;

package/lib/components/NameLimiter/index.js

@@ -27,7 +27,7 @@ var react_1 = __importStar(require("react"));
 var antd_1 = require("antd");
 var style_1 = require("../../constants/style");
 function NameLimiter(_a) {
-    var name = _a.name, title = _a.title;
+    var name = _a.name, title = _a.title, placement = _a.placement;
     var _b = __read(react_1.useState(false), 2), ellipsis = _b[0], setEllipsis = _b[1];
     var _c = __read(react_1.useState(false), 2), visible = _c[0], setVisible = _c[1];
     var ref = react_1.useRef(null);
@@ -38,7 +38,7 @@ function NameLimiter(_a) {
         }
         setEllipsis(ref.current.clientWidth < ref.current.scrollWidth);
     });
-    return (react_1.default.createElement(antd_1.Tooltip, { overlayClassName: style_1.SDK_PREFIX + "-name-limit-tooltip", placement: "top", title: title || name, visible: (!!title || ellipsis) && visible, onVisibleChange: setVisible },
+    return (react_1.default.createElement(antd_1.Tooltip, { overlayClassName: style_1.SDK_PREFIX + "-name-limit-tooltip", placement: placement || 'top', title: title || name, visible: (!!title || ellipsis) && visible, onVisibleChange: setVisible },
         react_1.default.createElement("span", { className: style_1.SDK_PREFIX + "-name-limit", ref: ref }, name)));
 }
 exports.default = NameLimiter;

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: '退出全屏'
 };