@qn-pandora/pandora-component 2.2.1 → 3.0.2

package/es/components/DateTimePicker/style.css

@@ -113,100 +113,198 @@
   display: block;
   width: 8.48528137px;
   height: 8.48528137px;
+  overflow: hidden;
   background: transparent;
-  border-style: solid;
-  border-width: 4.24264069px;
-  -webkit-transform: rotate(45deg);
-          transform: rotate(45deg);
-}
-.ant-popover-placement-top > .ant-popover-content > .ant-popover-arrow,
-.ant-popover-placement-topLeft > .ant-popover-content > .ant-popover-arrow,
-.ant-popover-placement-topRight > .ant-popover-content > .ant-popover-arrow {
-  bottom: 6.2px;
-  border-top-color: transparent;
-  border-right-color: #ffffff;
-  border-bottom-color: #ffffff;
-  border-left-color: transparent;
+  pointer-events: none;
+}
+.ant-popover-arrow-content {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: block;
+  width: 6px;
+  height: 6px;
+  margin: auto;
+  background-color: #ffffff;
+  content: '';
+  pointer-events: auto;
+}
+.ant-popover-placement-top .ant-popover-arrow,
+.ant-popover-placement-topLeft .ant-popover-arrow,
+.ant-popover-placement-topRight .ant-popover-arrow {
+  bottom: 1.51471863px;
+}
+.ant-popover-placement-top .ant-popover-arrow-content,
+.ant-popover-placement-topLeft .ant-popover-arrow-content,
+.ant-popover-placement-topRight .ant-popover-arrow-content {
   -webkit-box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07);
           box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07);
+  -webkit-transform: translateY(-4.24264069px) rotate(45deg);
+          transform: translateY(-4.24264069px) rotate(45deg);
 }
-.ant-popover-placement-top > .ant-popover-content > .ant-popover-arrow {
+.ant-popover-placement-top .ant-popover-arrow {
   left: 50%;
-  -webkit-transform: translateX(-50%) rotate(45deg);
-          transform: translateX(-50%) rotate(45deg);
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
 }
-.ant-popover-placement-topLeft > .ant-popover-content > .ant-popover-arrow {
+.ant-popover-placement-topLeft .ant-popover-arrow {
   left: 16px;
 }
-.ant-popover-placement-topRight > .ant-popover-content > .ant-popover-arrow {
+.ant-popover-placement-topRight .ant-popover-arrow {
   right: 16px;
 }
-.ant-popover-placement-right > .ant-popover-content > .ant-popover-arrow,
-.ant-popover-placement-rightTop > .ant-popover-content > .ant-popover-arrow,
-.ant-popover-placement-rightBottom > .ant-popover-content > .ant-popover-arrow {
-  left: 6px;
-  border-top-color: transparent;
-  border-right-color: transparent;
-  border-bottom-color: #ffffff;
-  border-left-color: #ffffff;
+.ant-popover-placement-right .ant-popover-arrow,
+.ant-popover-placement-rightTop .ant-popover-arrow,
+.ant-popover-placement-rightBottom .ant-popover-arrow {
+  left: 1.51471863px;
+}
+.ant-popover-placement-right .ant-popover-arrow-content,
+.ant-popover-placement-rightTop .ant-popover-arrow-content,
+.ant-popover-placement-rightBottom .ant-popover-arrow-content {
   -webkit-box-shadow: -3px 3px 7px rgba(0, 0, 0, 0.07);
           box-shadow: -3px 3px 7px rgba(0, 0, 0, 0.07);
+  -webkit-transform: translateX(4.24264069px) rotate(45deg);
+          transform: translateX(4.24264069px) rotate(45deg);
 }
-.ant-popover-placement-right > .ant-popover-content > .ant-popover-arrow {
+.ant-popover-placement-right .ant-popover-arrow {
   top: 50%;
-  -webkit-transform: translateY(-50%) rotate(45deg);
-          transform: translateY(-50%) rotate(45deg);
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
 }
-.ant-popover-placement-rightTop > .ant-popover-content > .ant-popover-arrow {
+.ant-popover-placement-rightTop .ant-popover-arrow {
   top: 12px;
 }
-.ant-popover-placement-rightBottom > .ant-popover-content > .ant-popover-arrow {
+.ant-popover-placement-rightBottom .ant-popover-arrow {
   bottom: 12px;
 }
-.ant-popover-placement-bottom > .ant-popover-content > .ant-popover-arrow,
-.ant-popover-placement-bottomLeft > .ant-popover-content > .ant-popover-arrow,
-.ant-popover-placement-bottomRight > .ant-popover-content > .ant-popover-arrow {
-  top: 6px;
-  border-top-color: #ffffff;
-  border-right-color: transparent;
-  border-bottom-color: transparent;
-  border-left-color: #ffffff;
+.ant-popover-placement-bottom .ant-popover-arrow,
+.ant-popover-placement-bottomLeft .ant-popover-arrow,
+.ant-popover-placement-bottomRight .ant-popover-arrow {
+  top: 1.51471863px;
+}
+.ant-popover-placement-bottom .ant-popover-arrow-content,
+.ant-popover-placement-bottomLeft .ant-popover-arrow-content,
+.ant-popover-placement-bottomRight .ant-popover-arrow-content {
   -webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.06);
           box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.06);
+  -webkit-transform: translateY(4.24264069px) rotate(45deg);
+          transform: translateY(4.24264069px) rotate(45deg);
 }
-.ant-popover-placement-bottom > .ant-popover-content > .ant-popover-arrow {
+.ant-popover-placement-bottom .ant-popover-arrow {
   left: 50%;
-  -webkit-transform: translateX(-50%) rotate(45deg);
-          transform: translateX(-50%) rotate(45deg);
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
 }
-.ant-popover-placement-bottomLeft > .ant-popover-content > .ant-popover-arrow {
+.ant-popover-placement-bottomLeft .ant-popover-arrow {
   left: 16px;
 }
-.ant-popover-placement-bottomRight > .ant-popover-content > .ant-popover-arrow {
+.ant-popover-placement-bottomRight .ant-popover-arrow {
   right: 16px;
 }
-.ant-popover-placement-left > .ant-popover-content > .ant-popover-arrow,
-.ant-popover-placement-leftTop > .ant-popover-content > .ant-popover-arrow,
-.ant-popover-placement-leftBottom > .ant-popover-content > .ant-popover-arrow {
-  right: 6px;
-  border-top-color: #ffffff;
-  border-right-color: #ffffff;
-  border-bottom-color: transparent;
-  border-left-color: transparent;
+.ant-popover-placement-left .ant-popover-arrow,
+.ant-popover-placement-leftTop .ant-popover-arrow,
+.ant-popover-placement-leftBottom .ant-popover-arrow {
+  right: 1.51471863px;
+}
+.ant-popover-placement-left .ant-popover-arrow-content,
+.ant-popover-placement-leftTop .ant-popover-arrow-content,
+.ant-popover-placement-leftBottom .ant-popover-arrow-content {
   -webkit-box-shadow: 3px -3px 7px rgba(0, 0, 0, 0.07);
           box-shadow: 3px -3px 7px rgba(0, 0, 0, 0.07);
+  -webkit-transform: translateX(-4.24264069px) rotate(45deg);
+          transform: translateX(-4.24264069px) rotate(45deg);
 }
-.ant-popover-placement-left > .ant-popover-content > .ant-popover-arrow {
+.ant-popover-placement-left .ant-popover-arrow {
   top: 50%;
-  -webkit-transform: translateY(-50%) rotate(45deg);
-          transform: translateY(-50%) rotate(45deg);
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
 }
-.ant-popover-placement-leftTop > .ant-popover-content > .ant-popover-arrow {
+.ant-popover-placement-leftTop .ant-popover-arrow {
   top: 12px;
 }
-.ant-popover-placement-leftBottom > .ant-popover-content > .ant-popover-arrow {
+.ant-popover-placement-leftBottom .ant-popover-arrow {
   bottom: 12px;
 }
+.ant-popover-pink .ant-popover-inner {
+  background-color: #eb2f96;
+}
+.ant-popover-pink .ant-popover-arrow-content {
+  background-color: #eb2f96;
+}
+.ant-popover-magenta .ant-popover-inner {
+  background-color: #eb2f96;
+}
+.ant-popover-magenta .ant-popover-arrow-content {
+  background-color: #eb2f96;
+}
+.ant-popover-red .ant-popover-inner {
+  background-color: #f5222d;
+}
+.ant-popover-red .ant-popover-arrow-content {
+  background-color: #f5222d;
+}
+.ant-popover-volcano .ant-popover-inner {
+  background-color: #fa541c;
+}
+.ant-popover-volcano .ant-popover-arrow-content {
+  background-color: #fa541c;
+}
+.ant-popover-orange .ant-popover-inner {
+  background-color: #fa8c16;
+}
+.ant-popover-orange .ant-popover-arrow-content {
+  background-color: #fa8c16;
+}
+.ant-popover-yellow .ant-popover-inner {
+  background-color: #fadb14;
+}
+.ant-popover-yellow .ant-popover-arrow-content {
+  background-color: #fadb14;
+}
+.ant-popover-gold .ant-popover-inner {
+  background-color: #faad14;
+}
+.ant-popover-gold .ant-popover-arrow-content {
+  background-color: #faad14;
+}
+.ant-popover-cyan .ant-popover-inner {
+  background-color: #13c2c2;
+}
+.ant-popover-cyan .ant-popover-arrow-content {
+  background-color: #13c2c2;
+}
+.ant-popover-lime .ant-popover-inner {
+  background-color: #a0d911;
+}
+.ant-popover-lime .ant-popover-arrow-content {
+  background-color: #a0d911;
+}
+.ant-popover-green .ant-popover-inner {
+  background-color: #52c41a;
+}
+.ant-popover-green .ant-popover-arrow-content {
+  background-color: #52c41a;
+}
+.ant-popover-blue .ant-popover-inner {
+  background-color: #1890ff;
+}
+.ant-popover-blue .ant-popover-arrow-content {
+  background-color: #1890ff;
+}
+.ant-popover-geekblue .ant-popover-inner {
+  background-color: #2f54eb;
+}
+.ant-popover-geekblue .ant-popover-arrow-content {
+  background-color: #2f54eb;
+}
+.ant-popover-purple .ant-popover-inner {
+  background-color: #722ed1;
+}
+.ant-popover-purple .ant-popover-arrow-content {
+  background-color: #722ed1;
+}
 .ant-popover-rtl {
   direction: rtl;
   text-align: right;

package/es/components/Input/index.js

@@ -27,7 +27,7 @@ import { Password } from './Password';
 import { TextArea } from './TextArea';
 import NumberInput from './NumberInput';
 var useCallback = React.useCallback;
-export default function Input(props) {
+function Input(props) {
     var onChange = props.onChange, restProps = __rest(props, ["onChange"]);
     var handleChange = useCallback(function (e) {
         if (onChange) {
@@ -40,3 +40,4 @@ Input.DebounceInput = debounceWrapper(Input);
 Input.Password = Password;
 Input.TextArea = TextArea;
 Input.NumberInput = NumberInput;
+export default Input;

package/es/components/Input/style.css

@@ -132,8 +132,8 @@ textarea.ant-input-affix-wrapper {
   outline: none;
 }
 .ant-input-affix-wrapper > input.ant-input:focus {
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  -webkit-box-shadow: none !important;
+          box-shadow: none !important;
 }
 .ant-input-affix-wrapper::before {
   width: 0;
@@ -158,7 +158,7 @@ textarea.ant-input-affix-wrapper {
 .ant-input-suffix {
   margin-left: 4px;
 }
-.ant-input-clear-icon {
+.anticon.ant-input-clear-icon {
   margin: 0 4px;
   color: rgba(0, 0, 0, 0.25);
   font-size: 12px;
@@ -167,16 +167,16 @@ textarea.ant-input-affix-wrapper {
   -webkit-transition: color 0.3s;
   transition: color 0.3s;
 }
-.ant-input-clear-icon:hover {
+.anticon.ant-input-clear-icon:hover {
   color: rgba(0, 0, 0, 0.45);
 }
-.ant-input-clear-icon:active {
+.anticon.ant-input-clear-icon:active {
   color: rgba(0, 0, 0, 0.65);
 }
-.ant-input-clear-icon-hidden {
+.anticon.ant-input-clear-icon-hidden {
   visibility: hidden;
 }
-.ant-input-clear-icon:last-child {
+.anticon.ant-input-clear-icon:last-child {
   margin-right: 0;
 }
 .ant-input-affix-wrapper-textarea-with-clear-btn {
@@ -391,6 +391,16 @@ textarea.ant-input {
 .ant-input-group-addon .ant-select-focused .ant-select-selector {
   color: #7a869a;
 }
+.ant-input-group-addon .ant-cascader-picker {
+  margin: -9px -12px;
+  background-color: transparent;
+}
+.ant-input-group-addon .ant-cascader-picker .ant-cascader-input {
+  text-align: left;
+  border: 0;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
 .ant-input-group > .ant-input:first-child,
 .ant-input-group-addon:first-child {
   border-top-right-radius: 0;

package/es/components/InputNumber/style.css

@@ -113,6 +113,7 @@ textarea.ant-input-number {
   font-weight: bold;
   line-height: 0;
   text-align: center;
+  border-left: 1px solid #e5e5e5;
   -webkit-transition: all 0.1s linear;
   transition: all 0.1s linear;
 }
@@ -255,7 +256,6 @@ textarea.ant-input-number {
   width: 22px;
   height: 100%;
   background: #ffffff;
-  border-left: 1px solid #e5e5e5;
   border-radius: 0 2px 2px 0;
   opacity: 0;
   -webkit-transition: opacity 0.24s linear 0.1s;

package/es/components/Menu/Option.d.ts

@@ -8,7 +8,7 @@ export interface IOption {
     /**
      * 路由
      */
-    weburl: string;
+    weburl?: string;
     /**
      *子节点
      */

package/es/components/Menu/index.d.ts

@@ -13,9 +13,9 @@ export interface IMenuProps extends Omit<MenuProps, 'options' | 'mode'> {
 }
 export declare function Menue(props: React.PropsWithChildren<IMenuProps>): JSX.Element;
 export declare namespace Menue {
-    var Divider: typeof import("rc-menu").Divider;
+    var Divider;
     var Item: typeof import("antd/lib/menu/MenuItem").default;
     var SubMenu: typeof import("antd/lib/menu/SubMenu").default;
-    var ItemGroup: typeof import("rc-menu").MenuItemGroup;
+    var ItemGroup;
 }
 export default Menue;

package/es/components/Menu/style.css

@@ -121,6 +121,10 @@
   -webkit-transition: background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
   transition: background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
 }
+.ant-menu-title-content {
+  -webkit-transition: color 0.3s;
+  transition: color 0.3s;
+}
 .ant-menu-item a {
   color: #7a869a;
 }

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

@@ -1,21 +1,11 @@
-import * as React from 'react';
-export declare enum SplitType {
-    End = "end",
-    Between = "between"
-}
+/// <reference types="react" />
 /**
- * 对于过长的名称进行format，并增加Tooltip。
+ * 对于超出容器宽度的名称进行省略，使用Tooltip展示。
  */
 export interface INameLimiterProps {
     /** 资源名称 */
     name: string;
-    /** 展示的最大长度，资源名称超过该长度会展示前后个一半的资源名称，中间使用省略号 */
-    length: number;
     /** 用于显示Tooltip的title */
     title?: string;
-    /** 省略号位置 */
-    type?: SplitType;
-}
-export default class NameLimiter extends React.PureComponent<INameLimiterProps, any> {
-    render(): JSX.Element;
 }
+export default function NameLimiter({ name, title }: INameLimiterProps): JSX.Element;

package/es/components/NameLimiter/index.js

@@ -1,42 +1,34 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-import * as React from 'react';
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import React, { useLayoutEffect, useRef, useState } from 'react';
 import { Tooltip } from 'antd';
 import { SDK_PREFIX } from '../../constants/style';
-import { getBytes, getTransformerString } from './transformer';
-export var SplitType;
-(function (SplitType) {
-    SplitType["End"] = "end";
-    SplitType["Between"] = "between";
-})(SplitType || (SplitType = {}));
-var NameLimiter = /** @class */ (function (_super) {
-    __extends(NameLimiter, _super);
-    function NameLimiter() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    NameLimiter.prototype.render = function () {
-        var _a = this.props, name = _a.name, length = _a.length, title = _a.title, type = _a.type;
-        var displayName = name;
-        var needFormat = getBytes(displayName) > length;
-        var nameSpan = (React.createElement("span", null, needFormat
-            ? getTransformerString(displayName, length, type)
-            : displayName));
-        if (title || needFormat) {
-            return (React.createElement(Tooltip, { overlayClassName: SDK_PREFIX + "-name-tooltip", placement: "top", title: title || displayName }, nameSpan));
+export default function NameLimiter(_a) {
+    var name = _a.name, title = _a.title;
+    var _b = __read(useState(false), 2), ellipsis = _b[0], setEllipsis = _b[1];
+    var _c = __read(useState(false), 2), visible = _c[0], setVisible = _c[1];
+    var ref = useRef(null);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useLayoutEffect(function () {
+        if (!ref.current) {
+            return;
         }
-        return nameSpan;
-    };
-    return NameLimiter;
-}(React.PureComponent));
-export default NameLimiter;
+        setEllipsis(ref.current.clientWidth < ref.current.scrollWidth);
+    });
+    return (React.createElement(Tooltip, { overlayClassName: SDK_PREFIX + "-name-limit-tooltip", placement: "top", title: title || name, visible: (!!title || ellipsis) && visible, onVisibleChange: setVisible },
+        React.createElement("span", { className: SDK_PREFIX + "-name-limit", ref: ref }, name)));
+}

package/es/components/NameLimiter/style.css

@@ -268,7 +268,15 @@
 .ant-btn-sm {
   padding: 0 7px;
 }
-.pandora-sdk-name-tooltip .ant-tooltip-inner {
+.pandora-sdk-name-limit {
+  max-width: 100%;
+  display: inline-block;
+  vertical-align: top;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.pandora-sdk-name-limit-tooltip .ant-tooltip-inner {
   max-width: 400px !important;
   max-height: 200px !important;
   overflow: auto;

package/es/components/NameLimiter/style.less

@@ -1,7 +1,16 @@
 @import 'antd/lib/tooltip/style/index.less';
 @import '../../style/theme.less';
 
-.@{sdk-prefix}-name-tooltip {
+.@{sdk-prefix}-name-limit {
+  max-width: 100%;
+  display: inline-block;
+  vertical-align: top;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.@{sdk-prefix}-name-limit-tooltip {
   .@{ant-prefix}-tooltip-inner {
     max-width: 400px !important;
     max-height: 200px !important;