@aloudata/aloudata-design 2.9.0 → 2.9.1

package/dist/Badge/index.js

@@ -1,7 +1,11 @@
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+var _excluded = ["count", "status", "size", "className", "onClick"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import classNames from 'classnames';
 import React from 'react';
 export default function Badge(props) {
@@ -11,7 +15,8 @@ export default function Badge(props) {
     status = _props$status === void 0 ? 'default' : _props$status,
     size = props.size,
     className = props.className,
-    onClick = props.onClick;
+    onClick = props.onClick,
+    rest = _objectWithoutProperties(props, _excluded);
   var status2ColorMap = {
     success: {
       color: '#15803D',
@@ -34,12 +39,12 @@ export default function Badge(props) {
       backgroundColor: '#FEF08A'
     }
   };
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
     className: classNames('ald-badge', (_classNames = {}, _defineProperty(_classNames, 'ald-badge-large', size === 'large'), _defineProperty(_classNames, 'ald-badge-clickable', typeof onClick === 'function'), _classNames), className),
     style: {
       color: status2ColorMap[status].color,
       backgroundColor: status2ColorMap[status].backgroundColor
     },
     onClick: onClick
-  }, count);
+  }), count);
 }

package/dist/MemberPicker/components/MemberSelection.js

@@ -14,6 +14,7 @@ import ScrollArea from "../../ScrollArea";
 import Spin from "../../Spin";
 import { isUser } from "../utils/getUsersWithUserId";
 import MultipleOption from "./MultipleOption";
+import { userDisplayNameIsRepeated } from "./Panel";
 import SingleOption from "./SingleOption";
 export default function MemberSelection(props) {
   var className = props.className,
@@ -83,6 +84,7 @@ export default function MemberSelection(props) {
       user: user,
       disabled: disabled,
       selected: isSelected,
+      showUserId: userDisplayNameIsRepeated(userList, user.nickname),
       onChange: function onChange(selected, user) {
         if (isUser(user)) _onChange(selected, user);
       }
@@ -90,6 +92,7 @@ export default function MemberSelection(props) {
       key: user.userId,
       user: user,
       selected: isSelected,
+      showUserId: userDisplayNameIsRepeated(userList, user.nickname),
       onChange: function onChange(selected, user) {
         if (isUser(user)) _onChange(selected, user);
       }

package/dist/MemberPicker/components/MultipleOption.d.ts

@@ -9,6 +9,7 @@ interface IMultipleOptionProps {
     className?: string;
     onNextLevel?: (userGroup: IUserGroup) => void;
     hasNextLevel?: boolean;
+    showUserId?: boolean;
 }
 export default function MultipleList(params: IMultipleOptionProps): React.JSX.Element;
 export {};

package/dist/MemberPicker/components/MultipleOption.js

@@ -5,6 +5,7 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
 import classnames from 'classnames';
 import React from 'react';
 import Checkbox from "../../Checkbox";
+import { EUserType } from "../../ConfigProvider/getUserList";
 import TextLink from "../../TextLink/index";
 import { getAccount, getId, getPhoto } from "../utils";
 import { isUserGroup } from "../utils/getUsersWithUserId";
@@ -17,7 +18,9 @@ export default function MultipleList(params) {
     className = params.className,
     onNextLevel = params.onNextLevel,
     _params$hasNextLevel = params.hasNextLevel,
-    hasNextLevel = _params$hasNextLevel === void 0 ? true : _params$hasNextLevel;
+    hasNextLevel = _params$hasNextLevel === void 0 ? true : _params$hasNextLevel,
+    _params$showUserId = params.showUserId,
+    showUserId = _params$showUserId === void 0 ? false : _params$showUserId;
   var onClick = function onClick() {
     if (disabled) return;
     onChange === null || onChange === void 0 ? void 0 : onChange(!selected, user);
@@ -31,13 +34,17 @@ export default function MultipleList(params) {
     className: 'ald-member-picker-checkbox',
     checked: selected,
     disabled: disabled
-  }), /*#__PURE__*/React.createElement(NickLabel, {
+  }), /*#__PURE__*/React.createElement("div", {
+    className: 'ald-member-picker-option-content'
+  }, /*#__PURE__*/React.createElement(NickLabel, {
     type: user.type,
     id: getId(user),
     name: user.name,
     photo: getPhoto(user),
     account: getAccount(user)
-  })), isUserGroup(user) && hasNextLevel && /*#__PURE__*/React.createElement(TextLink, {
+  }), showUserId && user.type === EUserType.USER && /*#__PURE__*/React.createElement("div", {
+    className: 'ald-member-picker-option-id'
+  }, user.userId))), isUserGroup(user) && hasNextLevel && /*#__PURE__*/React.createElement(TextLink, {
     className: "ald-member-picker-btn",
     size: "small",
     disabled: disabled,

package/dist/MemberPicker/components/Panel.d.ts

@@ -14,5 +14,6 @@ interface IPanelProps {
     className?: string;
     lockedIds: Array<TUserValue | TUserGroupValue>;
 }
+export declare const userDisplayNameIsRepeated: (userList: TUser, displayName?: string) => boolean;
 export default function Panel(props: IPanelProps): React.JSX.Element;
 export {};

package/dist/MemberPicker/components/Panel.js

@@ -13,6 +13,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import classNames from 'classnames';
+import { EUserType } from "../../ConfigProvider/getUserList";
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import Tabs from "../../Tabs";
 import { EMemberPicker } from "../interface";
@@ -22,6 +23,11 @@ import MemberSelection from "./MemberSelection";
 import SelectedMemberTags from "./SelectedMemberTags";
 import SelectorFooter from "./SelectorFooter";
 import UserGroupSelection from "./UserGroupSelection";
+export var userDisplayNameIsRepeated = function userDisplayNameIsRepeated(userList, displayName) {
+  return userList.filter(function (user) {
+    return user.type === EUserType.USER && user.nickname === displayName;
+  }).length > 1;
+};
 export default function Panel(props) {
   var _classNames;
   var type = props.type,
@@ -140,7 +146,8 @@ export default function Panel(props) {
     selectedUsers: selectedUsers,
     width: (panelWidth - 3) / 2,
     onRemove: onRemove,
-    lockedIds: lockedIds
+    lockedIds: lockedIds,
+    userList: dataList
   }), /*#__PURE__*/React.createElement(SelectorFooter, {
     className: 'ald-member-picker-selector-footer',
     onCancel: props.onCancel,

package/dist/MemberPicker/components/PanelWrapper.d.ts

@@ -10,6 +10,7 @@ interface IProps {
     className?: string;
     onCancel?: () => void;
     lockedIds?: Array<TUserValue | TUserGroupValue>;
+    showUserId?: boolean;
 }
 export declare const PanelWrapper: ({ type, value, multiple, dropdownWidth, onChange, onCancel, className, lockedIds, }: IProps) => React.JSX.Element;
 export default PanelWrapper;

package/dist/MemberPicker/components/PanelWrapper.js

@@ -72,6 +72,7 @@ export var PanelWrapper = function PanelWrapper(_ref) {
       cacheTime: 1000 * 60 * 2,
       // 2分钟内不重复请求
       onSuccess: function onSuccess(result) {
+        console.log('%c [ result ]-73', 'font-size:13px; background:#c324a4; color:#ff68e8;', 1433223, result);
         setSearchUserList(result);
       },
       onError: function onError(error) {

package/dist/MemberPicker/components/SelectedMemberTags.d.ts

@@ -7,6 +7,7 @@ interface ISelectedMemberTagsProps {
     onRemove?: (user: IUser | IUserGroup) => void;
     width: number;
     lockedIds: Array<TUserValue | TUserGroupValue>;
+    userList: TUser;
 }
 export default function SelectedMemberTags(props: ISelectedMemberTagsProps): React.JSX.Element;
 export {};

package/dist/MemberPicker/components/SelectedMemberTags.js

@@ -5,12 +5,14 @@ import { CloseMLine } from "../../Icon";
 import ScrollArea from "../../ScrollArea";
 import { getAccount, getId, getPhoto } from "../utils";
 import NickLabel from "./NickLabel";
+import { userDisplayNameIsRepeated } from "./Panel";
 export default function SelectedMemberTags(props) {
   var className = props.className,
     selectedUsers = props.selectedUsers,
     width = props.width,
     _props$lockedIds = props.lockedIds,
-    lockedIds = _props$lockedIds === void 0 ? [] : _props$lockedIds;
+    lockedIds = _props$lockedIds === void 0 ? [] : _props$lockedIds,
+    userList = props.userList;
   return /*#__PURE__*/React.createElement("div", {
     className: classNames(className, 'ald-member-picker-selected-member-tags-wrap')
   }, /*#__PURE__*/React.createElement("div", {
@@ -27,6 +29,7 @@ export default function SelectedMemberTags(props) {
     }
   }, selectedUsers.map(function (user) {
     var hasLocked = false;
+    var isDisplayNameRepeat = false;
     if (user && user.hasOwnProperty('groupId')) {
       var index = _.findIndex(lockedIds, {
         groupId: user.groupId,
@@ -38,6 +41,7 @@ export default function SelectedMemberTags(props) {
         userId: user.userId,
         type: user.type
       });
+      isDisplayNameRepeat = userDisplayNameIsRepeated(userList, user.nickname);
       hasLocked = _index !== -1;
     }
     return /*#__PURE__*/React.createElement("div", {
@@ -51,7 +55,9 @@ export default function SelectedMemberTags(props) {
       name: user.name,
       photo: getPhoto(user),
       account: getAccount(user)
-    })), !hasLocked && /*#__PURE__*/React.createElement(CloseMLine, {
+    }), isDisplayNameRepeat && user.type === 'USER' && /*#__PURE__*/React.createElement("div", {
+      className: "ald-member-picker-option-id"
+    }, user.userId)), !hasLocked && /*#__PURE__*/React.createElement(CloseMLine, {
       size: 20,
       className: 'ald-member-picker-close',
       color: "#98A2B3",

package/dist/MemberPicker/components/SingleOption.d.ts

@@ -9,6 +9,7 @@ interface IMultipleOptionProps {
     className?: string;
     onNextLevel?: (userGroup: IUserGroup) => void;
     hasNextLevel?: boolean;
+    showUserId?: boolean;
 }
 export default function SingleOption(params: IMultipleOptionProps): React.JSX.Element;
 export {};

package/dist/MemberPicker/components/SingleOption.js

@@ -4,6 +4,7 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _ty
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 import classnames from 'classnames';
 import React from 'react';
+import { EUserType } from "../../ConfigProvider/getUserList";
 import TextLink from "../../TextLink/index";
 import { getAccount, getId, getPhoto } from "../utils";
 import { isUserGroup } from "../utils/getUsersWithUserId";
@@ -16,7 +17,8 @@ export default function SingleOption(params) {
     className = params.className,
     onNextLevel = params.onNextLevel,
     _params$hasNextLevel = params.hasNextLevel,
-    hasNextLevel = _params$hasNextLevel === void 0 ? true : _params$hasNextLevel;
+    hasNextLevel = _params$hasNextLevel === void 0 ? true : _params$hasNextLevel,
+    showUserId = params.showUserId;
   var onClick = function onClick() {
     if (disabled) return;
     onChange === null || onChange === void 0 ? void 0 : onChange(!selected, user);
@@ -26,13 +28,17 @@ export default function SingleOption(params) {
     onClick: onClick
   }, /*#__PURE__*/React.createElement("div", {
     className: 'ald-member-picker-label'
+  }, /*#__PURE__*/React.createElement("div", {
+    className: 'ald-member-picker-option-content'
   }, /*#__PURE__*/React.createElement(NickLabel, {
     type: user.type,
     id: getId(user),
     name: user.name,
     photo: getPhoto(user),
     account: getAccount(user)
-  })), isUserGroup(user) && hasNextLevel && /*#__PURE__*/React.createElement(TextLink, {
+  }), showUserId && user.type === EUserType.USER && /*#__PURE__*/React.createElement("div", {
+    className: 'ald-member-picker-option-id'
+  }, user.userId))), isUserGroup(user) && hasNextLevel && /*#__PURE__*/React.createElement(TextLink, {
     className: "ald-member-picker-btn",
     size: "small",
     disabled: disabled,

package/dist/MemberPicker/interface.d.ts

@@ -3,7 +3,7 @@ import { ISelectProps } from '../Select';
 import { RequiredProperties } from '../_utils/type';
 export type TUserValue = RequiredProperties<IUser, 'type' | 'userId'>;
 export type TUserGroupValue = RequiredProperties<IUserGroup, 'type' | 'groupId'>;
-export type TMemberPickerValue = TUserValue | TUserGroupValue | Array<TUserValue | TUserGroupValue>;
+export type TMemberPickerValue = TUserGroupValue | Array<TUserValue | TUserGroupValue>;
 export declare enum EMemberPicker {
     GROUP = "GROUP",
     USER = "USER",

package/dist/MemberPicker/style/index.less

@@ -101,6 +101,7 @@
     gap: 8px;
 
     .ald-member-picker-selected-member-tag {
+      max-width: 100%;
       display: flex;
       justify-content: center;
       align-items: center;
@@ -115,6 +116,7 @@
       line-height: 20px; /* 142.857% */
 
       .ald-member-picker-close {
+        flex: 0 0 20px;
         border-left: 1px solid
           var(--alias-colors-border-accent-gray-subtler-default, #e5e7eb);
         cursor: pointer;
@@ -148,9 +150,22 @@
   justify-content: space-between;
 
   .ald-member-picker-label {
+    width: 100%;
     flex: 1;
     display: flex;
     gap: 4px;
+
+    .ald-member-picker-option-content {
+      min-width: 0;
+      flex: 1;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+
+      .ald-member-picker-nick-label {
+        flex-grow: 1;
+      }
+    }
   }
 
   &:hover {
@@ -170,6 +185,7 @@
   }
 
   .ald-member-picker-checkbox {
+    flex: 0 0 20px;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -188,6 +204,16 @@
   }
 }
 
+.ald-member-picker-option-id {
+  max-width: 50%;
+  white-space: nowrap; /* 防止内容换行，保持内容长度 */
+  text-overflow: ellipsis;
+  overflow: hidden;
+  color: var(--alias-colors-text-subtle, #4b5563);
+  font-size: 12px;
+  line-height: 16px; /* 133.333% */
+}
+
 .ald-member-picker-trigger {
   display: flex;
   align-items: center;
@@ -237,6 +263,8 @@
   padding: 2px 6px;
   display: flex;
   align-items: center;
+  gap: 6px;
+  min-width: 0;
 }
 
 .ald-member-picker-nick-label {