@qn-pandora/pandora-component 3.1.1 → 4.0.1

package/lib/components/TreeSelector/style.css

@@ -2,10 +2,21 @@
 /* stylelint-disable no-duplicate-selectors */
 /* stylelint-disable */
 /* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
-.ant-tree-treenode-leaf-last .ant-tree-switcher-leaf-line::before {
-  top: auto !important;
-  bottom: auto !important;
-  height: 14px !important;
+@-webkit-keyframes ant-tree-node-fx-do-not-use {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes ant-tree-node-fx-do-not-use {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
 }
 @-webkit-keyframes antCheckboxEffect {
   0% {
@@ -92,7 +103,7 @@
 .ant-select-tree-checkbox-inner::after {
   position: absolute;
   top: 50%;
-  left: 22%;
+  left: 21.5%;
   display: table;
   width: 5.71428571px;
   height: 9.14285714px;
@@ -245,7 +256,7 @@
   border-color: rgba(0, 0, 0, 0.25);
 }
 .ant-tree-select-dropdown {
-  padding: 8px 4px 0;
+  padding: 8px 4px;
 }
 .ant-tree-select-dropdown-rtl {
   direction: rtl;
@@ -258,9 +269,6 @@
       -ms-flex-align: stretch;
           align-items: stretch;
 }
-.ant-tree-select-dropdown .ant-select-tree-list-holder-inner .ant-select-tree-treenode {
-  padding-bottom: 8px;
-}
 .ant-tree-select-dropdown .ant-select-tree-list-holder-inner .ant-select-tree-treenode .ant-select-tree-node-content-wrapper {
   -webkit-box-flex: 1;
       -ms-flex: auto;
@@ -301,6 +309,26 @@
       -ms-flex: auto;
           flex: auto;
 }
+.ant-select-tree.ant-select-tree-block-node .ant-select-tree-list-holder-inner .ant-select-tree-treenode.dragging {
+  position: relative;
+}
+.ant-select-tree.ant-select-tree-block-node .ant-select-tree-list-holder-inner .ant-select-tree-treenode.dragging::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 4px;
+  left: 0;
+  border: 1px solid #7a869a;
+  opacity: 0;
+  -webkit-animation: ant-tree-node-fx-do-not-use 0.3s;
+          animation: ant-tree-node-fx-do-not-use 0.3s;
+  -webkit-animation-play-state: running;
+          animation-play-state: running;
+  -webkit-animation-fill-mode: forwards;
+          animation-fill-mode: forwards;
+  content: '';
+  pointer-events: none;
+}
 .ant-select-tree .ant-select-tree-treenode {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -338,6 +366,17 @@
   display: inline-block;
   width: 24px;
 }
+.ant-select-tree-draggable-icon {
+  width: 24px;
+  line-height: 24px;
+  text-align: center;
+  opacity: 0.2;
+  -webkit-transition: opacity 0.3s;
+  transition: opacity 0.3s;
+}
+.ant-select-tree-treenode:hover .ant-select-tree-draggable-icon {
+  opacity: 0.45;
+}
 .ant-select-tree-switcher {
   position: relative;
   -webkit-box-flex: 0;
@@ -388,16 +427,16 @@
 .ant-select-tree-switcher-leaf-line::before {
   position: absolute;
   top: 0;
+  right: 12px;
   bottom: -4px;
   margin-left: -1px;
-  border-left: 1px solid #ffffff;
+  border-right: 1px solid #ffffff;
   content: ' ';
 }
 .ant-select-tree-switcher-leaf-line::after {
   position: absolute;
   width: 10px;
   height: 14px;
-  margin-left: -1px;
   border-bottom: 1px solid #ffffff;
   content: ' ';
 }
@@ -441,14 +480,14 @@
 .ant-select-tree-unselectable .ant-select-tree-node-content-wrapper:hover {
   background-color: transparent;
 }
-.ant-select-tree-node-content-wrapper[draggable='true'] {
+.ant-select-tree-node-content-wrapper {
   line-height: 24px;
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
 }
-.ant-select-tree-node-content-wrapper[draggable='true'] .ant-tree-drop-indicator {
+.ant-select-tree-node-content-wrapper .ant-tree-drop-indicator {
   position: absolute;
   z-index: 1;
   height: 2px;
@@ -456,7 +495,7 @@
   border-radius: 1px;
   pointer-events: none;
 }
-.ant-select-tree-node-content-wrapper[draggable='true'] .ant-tree-drop-indicator::after {
+.ant-select-tree-node-content-wrapper .ant-tree-drop-indicator::after {
   position: absolute;
   top: -3px;
   left: -6px;
@@ -490,7 +529,12 @@
   background: #ffffff;
 }
 .ant-select-tree-show-line .ant-select-tree-switcher-line-icon {
-  vertical-align: -0.225em;
+  vertical-align: -0.15em;
+}
+.ant-select-tree .ant-select-tree-treenode-leaf-last .ant-select-tree-switcher-leaf-line::before {
+  top: auto !important;
+  bottom: auto !important;
+  height: 14px !important;
 }
 .ant-tree-select-dropdown-rtl .ant-select-tree .ant-select-tree-switcher_close .ant-select-tree-switcher-icon svg {
   -webkit-transform: rotate(90deg);
@@ -515,12 +559,12 @@
 .pandora-sdk-tree-select .ant-select-selection {
   background: transparent;
 }
-.pandora-sdk-tree-select .ant-select-selection__choice {
-  color: #ffffff !important;
-  background: rgba(44, 109, 210, 0.8) !important;
+.pandora-sdk-tree-select .ant-select-multiple .ant-select-selection-item {
+  color: #ffffff;
+  background: rgba(44, 109, 210, 0.8);
 }
-.pandora-sdk-tree-select .ant-select-selection__choice__remove {
-  color: #ffffff !important;
+.pandora-sdk-tree-select .ant-select-multiple .ant-select-selection-item-remove {
+  color: #ffffff;
   opacity: 0.5;
 }
 .pandora-sdk-tree-select-dropdown {

package/lib/components/TreeSelector/style.less

@@ -1,54 +1,56 @@
-@import 'antd/lib/tree-select/style/index.less';
-@import '../../style/theme.less';
-@import '../../style//mixin.less';
-
-.@{sdk-prefix}-tree-select {
-  width: 100%;
-  color: @font-color-1;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  .@{ant-prefix}-select-selection {
-    background: @select-bg;
-  }
-  .@{ant-prefix}-select-selection__choice {
-    color: @normal-color!important;
-    background: @theme-color-080!important;
-  }
-  .@{ant-prefix}-select-selection__choice__remove {
-    color: @normal-color!important;
-    opacity: 0.5;
-  }
-}
-
-.@{sdk-prefix}-tree-select-dropdown {
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  .@{ant-prefix}-select-tree {
-    max-height: 340px;
-    padding: 0;
-    overflow: auto;
-    .scrollbar(rgba(0, 0, 0, 0.5), 8px);
-    li {
-      margin: 0;
-      color: @font-color-1;
-      .@{ant-prefix}-select-tree-node-content-wrapper {
-        -webkit-box-sizing: border-box;
-        box-sizing: border-box;
-        border-left: 2px solid transparent;
-        &:hover {
-          background-color: @tree-node-hover-bg;
-          color: @tree-node-hover-color;
-        }
-      }
-
-      .@{ant-prefix}-select-tree-node-selected {
-        border-color: @tree-node-selected-color;
-        background-color: @tree-node-selected-bg;
-        color: @tree-node-selected-color;
-      }
-    }
-  }
-  .@{ant-prefix}-empty {
-    text-align: center;
-  }
-}
+@import 'antd/lib/tree-select/style/index.less';
+@import '../../style/theme.less';
+@import '../../style//mixin.less';
+
+.@{sdk-prefix}-tree-select {
+  width: 100%;
+  color: @font-color-1;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  .@{ant-prefix}-select-selection {
+    background: @select-bg;
+  }
+  .@{ant-prefix}-select-multiple {
+    .@{ant-prefix}-select-selection-item {
+      color: @normal-color;
+      background: @theme-color-080;
+    }
+    .@{ant-prefix}-select-selection-item-remove {
+      color: @normal-color;
+      opacity: 0.5;
+    }
+  }
+}
+
+.@{sdk-prefix}-tree-select-dropdown {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  .@{ant-prefix}-select-tree {
+    max-height: 340px;
+    padding: 0;
+    overflow: auto;
+    .scrollbar(rgba(0, 0, 0, 0.5), 8px);
+    li {
+      margin: 0;
+      color: @font-color-1;
+      .@{ant-prefix}-select-tree-node-content-wrapper {
+        -webkit-box-sizing: border-box;
+        box-sizing: border-box;
+        border-left: 2px solid transparent;
+        &:hover {
+          background-color: @tree-node-hover-bg;
+          color: @tree-node-hover-color;
+        }
+      }
+
+      .@{ant-prefix}-select-tree-node-selected {
+        border-color: @tree-node-selected-color;
+        background-color: @tree-node-selected-bg;
+        color: @tree-node-selected-color;
+      }
+    }
+  }
+  .@{ant-prefix}-empty {
+    text-align: center;
+  }
+}

package/lib/hoc/popContainer.d.ts

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

package/lib/hoc/popContainer.js

@@ -0,0 +1,47 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+    result["default"] = mod;
+    return result;
+};
+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) {
+    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 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),
+            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;