@qn-pandora/pandora-component 5.1.0 → 5.1.2

package/es/components/Drawer/style.less

@@ -1,61 +1,69 @@
-@import 'antd/lib/drawer/style/index.less';
-@import '../../style/theme.less';
-
-.@{sdk-prefix}-drawer {
-  .@{ant-prefix}-drawer-content-wrapper {
-    width: 50%;
-    min-width: 300px;
-  }
-  .@{ant-prefix}-drawer-content > div {
-    position: relative;
-  }
-  .@{ant-prefix}-drawer-close-x {
-    width: 60px;
-    height: 60px;
-    line-height: 60px;
-  }
-  .@{ant-prefix}-drawer-header-title {
-    overflow: hidden;
-  }
-}
-
-.@{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%;
-  }
-}
-
-.@{sdk-prefix}-scroll-handler {
-  position: absolute;
-  width: 5px;
-  padding: 4px 0 0;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  z-index: 100;
-  cursor: ew-resize;
-}
-
-.@{sdk-prefix}-drawer-close-icon {
-  margin-left: 24px;
-}
-
-.@{sdk-prefix}-drawer-header-full-icon {
-  margin-left: 24px;
-  color: @font-color-7;
-  font-size: 14px;
-}
-
-.@{sdk-prefix}-drawer-no-mask {
-  background-color: @normal-color;
-}
+@import 'antd/lib/drawer/style/index.less';
+@import '../../style/theme.less';
+
+.@{sdk-prefix}-drawer.@{sdk-prefix}-drawer-no-mask {
+  background-color: transparent;
+}
+
+.@{sdk-prefix}-drawer {
+  .@{ant-prefix}-drawer-content-wrapper {
+    width: 50%;
+    min-width: 300px;
+  }
+  .@{ant-prefix}-drawer-content > div {
+    position: relative;
+  }
+  .@{ant-prefix}-drawer-close-x {
+    width: 60px;
+    height: 60px;
+    line-height: 60px;
+  }
+  .@{ant-prefix}-drawer-header-title {
+    overflow: hidden;
+  }
+
+  .@{ant-prefix}-drawer-body {
+    font-size: 14px; // 原来的版本直接设置了font-size,升级后没有了，导致字号不对，暂时先使用此方案
+  }
+}
+
+.@{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%;
+  }
+}
+
+.@{sdk-prefix}-scroll-handler {
+  position: absolute;
+  width: 5px;
+  padding: 4px 0 0;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  z-index: 100;
+  cursor: ew-resize;
+}
+
+.@{sdk-prefix}-drawer-close-icon {
+  margin-left: 24px;
+}
+
+.@{sdk-prefix}-drawer-header-full-icon {
+  margin-left: 24px;
+  color: @font-color-7;
+  font-size: 14px;
+}
+
+.@{sdk-prefix}-drawer-no-mask {
+  background-color: @normal-color;
+}

package/es/components/FileResumable/index.js

@@ -266,6 +266,7 @@ export default function FileResumable(props) {
             switch (_d.label) {
                 case 0:
                     params = __assign(__assign({}, query), { persistence: persistence });
+                    setShowTool(true);
                     if (!(fileList.length === 1)) return [3 /*break*/, 6];
                     realFile = fileList[0];
                     extension = realFile.name.split('.').pop().toLowerCase();
@@ -309,9 +310,7 @@ export default function FileResumable(props) {
                         (_c = resumable.current) === null || _c === void 0 ? void 0 : _c.cancel();
                     }
                     _d.label = 6;
-                case 6:
-                    setShowTool(true);
-                    return [2 /*return*/];
+                case 6: return [2 /*return*/];
             }
         });
     }); }, [

package/es/components/FileResumable/style.css

@@ -31,6 +31,7 @@
   display: inline-block;
 }
 .ant-upload.ant-upload-disabled {
+  color: rgba(0, 0, 0, 0.25);
   cursor: not-allowed;
 }
 .ant-upload.ant-upload-select-picture-card {
@@ -61,7 +62,7 @@
   text-align: center;
 }
 .ant-upload.ant-upload-select-picture-card:hover {
-  border-color: #7a869a;
+  border-color: #436bff;
 }
 .ant-upload-disabled.ant-upload.ant-upload-select-picture-card:hover {
   border-color: #e5e5e5;
@@ -82,7 +83,7 @@
   padding: 16px 0;
 }
 .ant-upload.ant-upload-drag.ant-upload-drag-hover:not(.ant-upload-disabled) {
-  border-color: #555f73;
+  border-color: #2e4dd9;
 }
 .ant-upload.ant-upload-drag.ant-upload-disabled {
   cursor: not-allowed;
@@ -96,13 +97,13 @@
   vertical-align: middle;
 }
 .ant-upload.ant-upload-drag:not(.ant-upload-disabled):hover {
-  border-color: #9ca0a6;
+  border-color: #6b90ff;
 }
 .ant-upload.ant-upload-drag p.ant-upload-drag-icon {
   margin-bottom: 20px;
 }
 .ant-upload.ant-upload-drag p.ant-upload-drag-icon .anticon {
-  color: #9ca0a6;
+  color: #6b90ff;
   font-size: 48px;
 }
 .ant-upload.ant-upload-drag p.ant-upload-text {
@@ -184,8 +185,9 @@
   opacity: 0;
 }
 .ant-upload-list-item-card-actions-btn.ant-btn-sm {
-  height: 20px;
+  height: 22.001px;
   line-height: 1;
+  vertical-align: top;
 }
 .ant-upload-list-item-card-actions.picture {
   top: 22px;
@@ -197,10 +199,14 @@
 }
 .ant-upload-list-item-card-actions .anticon {
   color: rgba(0, 0, 0, 0.45);
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
+}
+.ant-upload-list-item-card-actions:hover .anticon {
+  color: rgba(0, 0, 0, 0.65);
 }
 .ant-upload-list-item-info {
   height: 100%;
-  padding: 0 4px;
   -webkit-transition: background-color 0.3s;
   transition: background-color 0.3s;
 }
@@ -216,26 +222,8 @@
   color: rgba(0, 0, 0, 0.45);
   font-size: 14px;
 }
-.ant-upload-list-item .anticon-close {
-  position: absolute;
-  top: 6px;
-  right: 4px;
-  color: rgba(0, 0, 0, 0.45);
-  font-size: 10px;
-  line-height: 0;
-  cursor: pointer;
-  opacity: 0;
-  -webkit-transition: all 0.3s;
-  transition: all 0.3s;
-}
-.ant-upload-list-item .anticon-close:hover {
-  color: rgba(0, 0, 0, 0.65);
-}
 .ant-upload-list-item:hover .ant-upload-list-item-info {
-  background-color: rgba(44, 109, 210, 0.05);
-}
-.ant-upload-list-item:hover .anticon-close {
-  opacity: 1;
+  background-color: rgba(67, 107, 255, 0.05);
 }
 .ant-upload-list-item:hover .ant-upload-list-item-card-actions-btn {
   opacity: 1;
@@ -358,14 +346,6 @@
   margin-top: 0;
   padding-left: 56px;
 }
-.ant-upload-list-picture .anticon-close,
-.ant-upload-list-picture-card .anticon-close {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  line-height: 1;
-  opacity: 1;
-}
 .ant-upload-list-picture-card-container {
   display: inline-block;
   width: 104px;
@@ -373,9 +353,6 @@
   margin: 0 8px 8px 0;
   vertical-align: top;
 }
-.ant-upload-list-picture-card.ant-upload-list::after {
-  display: none;
-}
 .ant-upload-list-picture-card .ant-upload-list-item {
   height: 100%;
   margin: 0;
@@ -523,8 +500,10 @@
 .ant-upload-list .ant-upload-animate-inline-leave {
   -webkit-animation-duration: 0.3s;
           animation-duration: 0.3s;
-  -webkit-animation-fill-mode: cubic-bezier(0.78, 0.14, 0.15, 0.86);
-          animation-fill-mode: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+  -webkit-animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+          animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+  -webkit-animation-fill-mode: forwards;
+          animation-fill-mode: forwards;
 }
 .ant-upload-list .ant-upload-animate-inline-appear,
 .ant-upload-list .ant-upload-animate-inline-enter {
@@ -607,10 +586,6 @@
 .ant-upload-list-rtl .ant-upload-list-item-info {
   padding: 0 4px 0 12px;
 }
-.ant-upload-list-rtl .ant-upload-list-item .anticon-close {
-  right: auto;
-  left: 4px;
-}
 .ant-upload-list-rtl .ant-upload-list-item-error .ant-upload-list-item-card-actions .anticon {
   padding-right: 0;
   padding-left: 5px;
@@ -656,11 +631,6 @@
   padding-right: 0;
   padding-left: 0;
 }
-.ant-upload-list-rtl.ant-upload-list-picture .anticon-close,
-.ant-upload-list-rtl.ant-upload-list-picture-card .anticon-close {
-  right: auto;
-  left: 8px;
-}
 .ant-upload-list-rtl .ant-upload-list-picture-card-container {
   margin: 0 0 8px 8px;
 }
@@ -681,7 +651,7 @@
   text-align: right;
 }
 .pandora-sdk-file-resumable-run-container .pandora-sdk-file-resumable-run-container-icon {
-  color: #2c6dd2;
+  color: #436bff;
   cursor: pointer;
   font-size: 14px;
   margin: 0 6px;
@@ -697,12 +667,12 @@
   color: #bfbfbf;
 }
 .downloadIcon {
-  color: #2c6dd2;
+  color: #436bff;
   cursor: pointer;
   font-size: 20px;
 }
 .pandora-sdk-file-resumable:hover {
-  border-color: #2c6dd2;
+  border-color: #436bff;
 }
 .pandora-sdk-file-resumable-img-container {
   background: #ffffff;

package/es/components/FileResumable/style.less

@@ -1,94 +1,94 @@
-@import 'antd/lib/upload/style/index.less';
-@import '../../style/theme.less';
-
-.@{sdk-prefix}-file-resumable {
-  cursor: pointer;
-}
-
-.@{sdk-prefix}-file-resumable-run-container {
-  text-align: right;
-  .@{sdk-prefix}-file-resumable-run-container-icon {
-    color: @theme-color;
-    cursor: pointer;
-    font-size: 14px;
-    margin: 0 6px;
-  }
-
-  .@{sdk-prefix}-file-resumable-run-container-icon-disabled {
-    color: @font-disable-color;
-    &:hover {
-      cursor: not-allowed;
-    }
-  }
-}
-
-.@{sdk-prefix}-file-resumable-upload-icon {
-  font-size: 50px;
-  color: @icon-color;
-}
-
-.downloadIcon {
-  color: @theme-color;
-  cursor: pointer;
-  font-size: 20px;
-}
-
-.@{sdk-prefix}-file-resumable:hover {
-  border-color: @theme-color;
-}
-
-.@{sdk-prefix}-file-resumable-img-container {
-  background: @normal-color;
-  border: 1px dashed @border-color-1;
-  width: 50px;
-  height: 50px;
-  padding: 4px;
-  border-radius: 2px;
-  align-items: center;
-  cursor: pointer;
-  position: relative;
-  font-size: 16px;
-  display: flex;
-  justify-content: center;
-  .@{sdk-prefix}-file-resumable-img-operator {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: absolute;
-    top: 4px;
-    left: 4px;
-    right: 4px;
-    bottom: 4px;
-    .anticon {
-      font-size: 16px;
-    }
-  }
-  .@{sdk-prefix}-file-resumable-img-hidden-plus-icon {
-    display: none;
-  }
-
-  .@{sdk-prefix}-file-resumable-img-box {
-    max-width: 100%;
-    max-height: 100%;
-    padding: 4px;
-  }
-
-  &:hover {
-    .@{sdk-prefix}-file-resumable-img-operator {
-      background: @image-operator-hover-bg;
-      display: flex;
-      .anticon {
-        font-size: 16px;
-        color: @normal-color;
-      }
-    }
-  }
-}
-.@{sdk-prefix}-file-resumable-img.ant-upload.ant-upload-drag {
-  width: 50px;
-  height: 50px;
-  border: none;
-  .@{ant-prefix}-upload-btn {
-    padding: 0;
-  }
-}
+@import 'antd/lib/upload/style/index.less';
+@import '../../style/theme.less';
+
+.@{sdk-prefix}-file-resumable {
+  cursor: pointer;
+}
+
+.@{sdk-prefix}-file-resumable-run-container {
+  text-align: right;
+  .@{sdk-prefix}-file-resumable-run-container-icon {
+    color: @theme-color;
+    cursor: pointer;
+    font-size: 14px;
+    margin: 0 6px;
+  }
+
+  .@{sdk-prefix}-file-resumable-run-container-icon-disabled {
+    color: @font-disable-color;
+    &:hover {
+      cursor: not-allowed;
+    }
+  }
+}
+
+.@{sdk-prefix}-file-resumable-upload-icon {
+  font-size: 50px;
+  color: @icon-color;
+}
+
+.downloadIcon {
+  color: @theme-color;
+  cursor: pointer;
+  font-size: 20px;
+}
+
+.@{sdk-prefix}-file-resumable:hover {
+  border-color: @theme-color;
+}
+
+.@{sdk-prefix}-file-resumable-img-container {
+  background: @normal-color;
+  border: 1px dashed @border-color-1;
+  width: 50px;
+  height: 50px;
+  padding: 4px;
+  border-radius: 2px;
+  align-items: center;
+  cursor: pointer;
+  position: relative;
+  font-size: 16px;
+  display: flex;
+  justify-content: center;
+  .@{sdk-prefix}-file-resumable-img-operator {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    right: 4px;
+    bottom: 4px;
+    .anticon {
+      font-size: 16px;
+    }
+  }
+  .@{sdk-prefix}-file-resumable-img-hidden-plus-icon {
+    display: none;
+  }
+
+  .@{sdk-prefix}-file-resumable-img-box {
+    max-width: 100%;
+    max-height: 100%;
+    padding: 4px;
+  }
+
+  &:hover {
+    .@{sdk-prefix}-file-resumable-img-operator {
+      background: @image-operator-hover-bg;
+      display: flex;
+      .anticon {
+        font-size: 16px;
+        color: @normal-color;
+      }
+    }
+  }
+}
+.@{sdk-prefix}-file-resumable-img.ant-upload.ant-upload-drag {
+  width: 50px;
+  height: 50px;
+  border: none;
+  .@{ant-prefix}-upload-btn {
+    padding: 0;
+  }
+}

package/es/components/FlameGraph/customTooltip.d.ts

@@ -0,0 +1,22 @@
+declare function defaultLabel(d: any): string;
+export declare function defaultFlamegraphTooltip(): {
+    (): void;
+    show(d: any): any;
+    hide(): any;
+    /**
+     * Gets/sets a function converting the d3 data into the tooltip's textContent.
+     *
+     * Cannot be combined with tip.html().
+     */
+    text(_: any): typeof defaultLabel | any;
+    /**
+     * Gets/sets a function converting the d3 data into the tooltip's innerHTML.
+     *
+     * Cannot be combined with tip.text().
+     *
+     * @deprecated prefer tip.text().
+     */
+    html(_: any): typeof defaultLabel | any;
+    destroy(): void;
+};
+export {};

package/es/components/FlameGraph/customTooltip.js

@@ -0,0 +1,91 @@
+/**
+ * 库里面copy 出来，修改了 tooltip 的展示内容
+ * https://github.com/spiermar/d3-flame-graph/blob/master/src/tooltip.js
+ */
+import * as d3 from 'd3';
+function defaultLabel(d) {
+    if (d.data.name === 'root') {
+        return "\n    <div>\n      <span>Name:" + d.data.name + "</span>\n    </div>";
+    }
+    var percentofParent = d.parent
+        ? ((d.value / d.parent.value) * 100).toFixed(2)
+        : 100;
+    var siblingPercentage = d.data.depthPercentage.toFixed(2);
+    return "\n  <div>\n    <span>Name:" + d.data.name + "</span><br/>\n    <span>File:" + d.data.source.file + "</span><br/>\n    <span>Line:" + d.data.source.line + "</span><br/>\n    <span>" + siblingPercentage + "% of all  " + percentofParent + "% of parent</span>\n  </div>";
+}
+export function defaultFlamegraphTooltip() {
+    var rootElement = d3.select('body');
+    var tooltip = null;
+    // Function to get HTML content from data.
+    var html = defaultLabel;
+    // Function to get text content from data.
+    var text = defaultLabel;
+    // Whether to use d3's .html() to set content, otherwise use .text().
+    var contentIsHTML = true;
+    function tip() {
+        tooltip = rootElement
+            .append('div')
+            .style('display', 'none')
+            .style('position', 'absolute')
+            .style('opacity', 0)
+            .style('pointer-events', 'none')
+            .style('z-index', 2000)
+            .attr('class', 'd3-flame-graph-tip');
+    }
+    tip.show = function (d) {
+        tooltip
+            .style('display', 'block')
+            .style('left', event.pageX + 5 + 'px')
+            .style('top', event.pageY + 5 + 'px')
+            .transition()
+            .duration(200)
+            .style('opacity', 1)
+            .style('pointer-events', 'all');
+        if (contentIsHTML) {
+            tooltip.html(html(d));
+        }
+        else {
+            tooltip.text(text(d));
+        }
+        return tip;
+    };
+    tip.hide = function () {
+        tooltip
+            .style('display', 'none')
+            .transition()
+            .duration(200)
+            .style('opacity', 0)
+            .style('pointer-events', 'none');
+        return tip;
+    };
+    /**
+     * Gets/sets a function converting the d3 data into the tooltip's textContent.
+     *
+     * Cannot be combined with tip.html().
+     */
+    tip.text = function (_) {
+        if (!arguments.length)
+            return text;
+        text = _;
+        contentIsHTML = false;
+        return tip;
+    };
+    /**
+     * Gets/sets a function converting the d3 data into the tooltip's innerHTML.
+     *
+     * Cannot be combined with tip.text().
+     *
+     * @deprecated prefer tip.text().
+     */
+    tip.html = function (_) {
+        if (!arguments.length)
+            return html;
+        html = _;
+        contentIsHTML = true;
+        return tip;
+    };
+    tip.destroy = function () {
+        tooltip.remove();
+    };
+    return tip;
+}

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import 'd3-flame-graph/dist/d3-flamegraph.css';
+export interface IFlameGraphData {
+    name: string;
+    count: number;
+    source?: IKeyValues;
+    children?: IFlameGraphData[];
+}
+declare const FlameGraph: ({ data, width, height, depth, searchFilters }: {
+    data: IFlameGraphData;
+    width: number;
+    height?: number | undefined;
+    depth?: number | undefined;
+    searchFilters?: IKeyValues<any>[] | undefined;
+}) => React.JSX.Element;
+export default FlameGraph;