@aloudata/aloudata-design 2.13.10 → 2.13.12

package/dist/LogicTree/style/LoginItem.less

@@ -13,24 +13,45 @@
   flex-direction: column;
   padding-left: calc(@recordLineWidth + @selectWidth / 2 + @dragIConWidth);
   position: relative;
-  cursor: pointer;
   border-radius: 6px;
   margin-left: -16px;
+  z-index: 10;
 
-  &.is-hover {
+  &:hover {
+    .ald-logic-tree-node-drag-icon,
+    .ald-logic-tree-record-node-drag-icon {
+      background: #fff !important;
+    }
+  }
+
+  &.is-hover-drag-box {
     background: rgba(244, 244, 245);
-    transition: background-color 0.3s ease-in-out;
+
+    .ald-logic-tree-node-drag-icon,
+    .ald-logic-tree-record-node-drag-icon {
+      background: rgba(244, 244, 245) !important;
+    }
   }
 
   &.is-dragging {
     background: var(--alias-colors-bg-selected-default, #e8f2fe);
+
+    .ald-logic-tree-node-drag-icon,
+    .ald-logic-tree-record-node-drag-icon {
+      background: var(--alias-colors-bg-selected-default, #e8f2fe) !important;
+    }
   }
 
-  .ald-logic-tree-node-drag-icon {
+  .ald-logic-tree-node-drag-icon-wrapper {
     position: absolute;
-    top: calc(50% + 5px);
+    cursor: pointer;
+    top: 0;
     left: 0;
-    transform: translateY(-50%);
+    height: 100%;
+    z-index: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 
   .ald-logic-tree-node-wrap {
@@ -58,7 +79,7 @@
       border-left: 1px dashed #d1d5db;
       height: calc(50% - 16px);
       width: @recordLineWidth;
-      top: 50%;
+      top: calc(50% - 4px);
       left: calc(@selectWidth / 2 + @dragIConWidth);
     }
   }
@@ -71,7 +92,7 @@
 
   .ald-logic-tree-select-relation {
     position: absolute !important;
-    top: calc(50% - 10px);
+    top: calc(50% - 12px);
     left: 16px;
     z-index: 1;
     width: @selectWidth !important;
@@ -96,16 +117,20 @@
   display: flex;
   align-items: center;
   gap: 6px;
-  cursor: pointer;
   padding-left: 16px;
   margin-left: -16px;
+  position: relative;
+  z-index: 10;
+  border-radius: 6px;
 
-  &.is-hover {
+  &.is-hover-drag-box {
     display: flex;
     align-items: center;
-    border-radius: 6px;
     background: rgba(244, 244, 245);
-    transition: background-color 0.3s ease-in-out;
+
+    .ald-logic-tree-record-node-drag-icon {
+      background: rgba(244, 244, 245) !important;
+    }
   }
 
   &.is-dragging {
@@ -113,13 +138,29 @@
     align-items: center;
     border-radius: 6px;
     background: var(--alias-colors-bg-selected-default, #e8f2fe);
+
+    .ald-logic-tree-record-node-drag-icon {
+      background: var(--alias-colors-bg-selected-default, #e8f2fe) !important;
+    }
   }
 
-  .ald-logic-tree-record-node-drag-icon {
+  .ald-logic-tree-record-node-drag-icon-wrapper {
     position: absolute;
+    cursor: pointer;
     top: calc(50%);
     left: 0;
     transform: translateY(-50%);
+    height: 100%;
+    width: 16px;
+    border-radius: 6px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 10;
+
+    .ald-logic-tree-record-node-drag-icon {
+      background-color: #fff;
+    }
   }
 
   .ald-logic-tree-render-condition-wrap {
@@ -136,8 +177,8 @@
   padding-bottom: 4px;
 }
 
-.ald-logic-tree-logic-node.is-over:last-child::after,
-.ald-logic-tree-record-node.is-over:last-child::after {
+.ald-logic-tree-logic-node.is-hover-bottom:last-child::after,
+.ald-logic-tree-record-node.is-hover-bottom:last-child::after {
   content: '';
   position: absolute;
   bottom: -1px;
@@ -146,3 +187,18 @@
   height: 2px;
   background-color: #126fdd;
 }
+
+.ald-logic-tree-logic-node.is-hover-top:last-child::after,
+.ald-logic-tree-record-node.is-hover-top:last-child::after {
+  content: '';
+  position: absolute;
+  top: -1px;
+  left: 16px;
+  width: calc(100% - 16px);
+  height: 2px;
+  background-color: #126fdd;
+}
+
+.ald-logic-tree-node-drag-icon-preview {
+  display: none;
+}

package/dist/MemberPicker/components/MultipleOption.js

@@ -6,6 +6,7 @@ import classnames from 'classnames';
 import React, { useContext } from 'react';
 import Badge from "../../Badge";
 import Checkbox from "../../Checkbox";
+import ConfigProvider from "../../ConfigProvider";
 import { EUserType } from "../../ConfigProvider/getUserList";
 import TextLink from "../../TextLink/index";
 import { LocaleContext, getTranslator } from "../../locale/default";
@@ -16,6 +17,8 @@ export default function MultipleList(params) {
   var _useContext = useContext(LocaleContext),
     locale = _useContext.locale;
   var t = getTranslator(locale);
+  var _ConfigProvider$useGe = ConfigProvider.useGetUserList(),
+    getMemberPickerItemMoreInfoKey = _ConfigProvider$useGe.getMemberPickerItemMoreInfoKey;
   var disabled = params.disabled,
     user = params.user,
     selected = params.selected,
@@ -49,7 +52,7 @@ export default function MultipleList(params) {
     account: getAccount(user),
     addonBefore: showUserId && user.type === EUserType.USER && /*#__PURE__*/React.createElement("span", {
       className: 'ald-member-picker-option-id'
-    }, user.userId)
+    }, getMemberPickerItemMoreInfoKey ? getMemberPickerItemMoreInfoKey(user) : user.userId)
   }), isUser(user) && user.ban && /*#__PURE__*/React.createElement(Badge, {
     status: "default",
     count: t.MemberPicker.ban,

package/dist/MemberPicker/components/SelectedMemberTags.js

@@ -2,6 +2,7 @@ import classNames from 'classnames';
 import _ from 'lodash';
 import React, { useContext } from 'react';
 import Badge from "../../Badge";
+import ConfigProvider from "../../ConfigProvider";
 import { CloseMLine } from "../../Icon";
 import ScrollArea from "../../ScrollArea";
 import { LocaleContext, getTranslator } from "../../locale/default";
@@ -14,6 +15,8 @@ export default function SelectedMemberTags(props) {
     width = props.width,
     _props$lockedIds = props.lockedIds,
     lockedIds = _props$lockedIds === void 0 ? [] : _props$lockedIds;
+  var _ConfigProvider$useGe = ConfigProvider.useGetUserList(),
+    memberPickerItemMoreInfoKey = _ConfigProvider$useGe.memberPickerItemMoreInfoKey;
   var _useContext = useContext(LocaleContext),
     locale = _useContext.locale;
   var t = getTranslator(locale);
@@ -56,7 +59,7 @@ export default function SelectedMemberTags(props) {
       account: getAccount(user),
       addonBefore: user.type === 'USER' && /*#__PURE__*/React.createElement("span", {
         className: "ald-member-picker-option-id"
-      }, user.userId)
+      }, user[memberPickerItemMoreInfoKey || 'userId'])
     })), isUser(user) && user.ban && /*#__PURE__*/React.createElement(Badge, {
       status: "default",
       count: t.MemberPicker.ban,

package/dist/MemberPicker/components/SingleOption.js

@@ -5,6 +5,7 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
 import classnames from 'classnames';
 import React, { useContext } from 'react';
 import Badge from "../../Badge";
+import ConfigProvider from "../../ConfigProvider";
 import { EUserType } from "../../ConfigProvider/getUserList";
 import TextLink from "../../TextLink/index";
 import { LocaleContext, getTranslator } from "../../locale/default";
@@ -15,6 +16,8 @@ export default function SingleOption(params) {
   var _useContext = useContext(LocaleContext),
     locale = _useContext.locale;
   var t = getTranslator(locale);
+  var _ConfigProvider$useGe = ConfigProvider.useGetUserList(),
+    getMemberPickerItemMoreInfoKey = _ConfigProvider$useGe.getMemberPickerItemMoreInfoKey;
   var disabled = params.disabled,
     user = params.user,
     selected = params.selected,
@@ -45,7 +48,7 @@ export default function SingleOption(params) {
     account: getAccount(user),
     addonBefore: showUserId && user.type === EUserType.USER && /*#__PURE__*/React.createElement("span", {
       className: 'ald-member-picker-option-id'
-    }, user.userId)
+    }, getMemberPickerItemMoreInfoKey ? getMemberPickerItemMoreInfoKey(user) : user.userId)
   }), isUser(user) && user.ban && /*#__PURE__*/React.createElement(Badge, {
     status: "default",
     count: t.MemberPicker.ban,