@aloudata/aloudata-design 1.10.9 → 1.10.11

package/dist/ConfigProvider/getUserList.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { TUserGroupValue, TUserValue } from '../MemberPicker/interface';
 export declare enum EUserType {
     USER = "USER",
     USER_GROUP = "USER_GROUP"
@@ -24,7 +25,8 @@ export interface IGetUserListParams {
     name?: string;
     id?: string;
 }
-export type getUsersByIdsType = ((params: string[]) => Promise<TUser>) | undefined;
+export type { TUserValue, TUserGroupValue };
+export type getUsersByIdsType = ((params: Array<TUserValue | TUserGroupValue>) => Promise<TUser>) | undefined;
 export type getUsersByKeywordsType = ((params: string) => Promise<TUser>) | undefined;
 export type getUserListType = {
     getUsersByIds?: getUsersByIdsType;

package/dist/IconButton/index.js

@@ -1,10 +1,4 @@
 var _excluded = ["icon", "onClick", "disabled", "size", "menu", "className", "onOpenChange", "tooltip", "id", "overlay", "showArrow", "mode"];
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-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; }
 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; }
 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); }
@@ -73,10 +67,6 @@ var DropdownButton = /*#__PURE__*/forwardRef(function (props, ref) {
   var sizeMemo = React.useMemo(function () {
     return getSizeType(size);
   }, [size]);
-  var _React$useState = React.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    dropdownOpen = _React$useState2[0],
-    setDropdownOpen = _React$useState2[1];
   var onButtonClick = function onButtonClick(e) {
     if (disabled) {
       e.stopPropagation();
@@ -85,12 +75,6 @@ var DropdownButton = /*#__PURE__*/forwardRef(function (props, ref) {
     }
     onClick(e);
   };
-  var onDropdownOpenChange = function onDropdownOpenChange(open) {
-    setDropdownOpen(open);
-    if (onOpenChange) {
-      onOpenChange(open);
-    }
-  };
   var canDropdown = useMemo(function () {
     var hasMenu = menu && menu.items && menu.items.length > 0;
     return (hasMenu || overlay) && !disabled;
@@ -102,7 +86,6 @@ var DropdownButton = /*#__PURE__*/forwardRef(function (props, ref) {
       id: id,
       className: classnames(className, 'ald-icon-button-dropdown', "ald-icon-button-".concat(getSizeType(size)), {
         'ald-icon-button-disabled': disabled,
-        'ald-icon-button-dropdown-open': dropdownOpen,
         'ald-icon-button-dark': mode === 'dark'
       }),
       type: "button",
@@ -118,12 +101,11 @@ var DropdownButton = /*#__PURE__*/forwardRef(function (props, ref) {
     title: tooltip === null || tooltip === void 0 ? void 0 : tooltip.title
   }), /*#__PURE__*/React.createElement(Dropdown, _extends({
     menu: menu,
-    onOpenChange: onDropdownOpenChange
+    onOpenChange: onOpenChange
   }, restDropdownProps), /*#__PURE__*/React.createElement("button", {
     id: id,
     className: classnames(className, 'ald-icon-button-dropdown', "ald-icon-button-".concat(getSizeType(size)), {
       'ald-icon-button-disabled': disabled,
-      'ald-icon-button-dropdown-open': dropdownOpen,
       'ald-icon-button-dark': mode === 'dark'
     }),
     type: "button",

package/dist/IconButton/style/index.less

@@ -56,7 +56,7 @@
     background: var(--colors-gray-100, #f4f4f4);
   }
 
-  &.ald-icon-button-dropdown-open {
+  &.ant-dropdown-open {
     background: var(--colors-gray-98, #f4f4f4);
   }
 
@@ -72,7 +72,7 @@
       background: fade(#f4f4f4, 10%);
     }
 
-    &.ald-icon-button-dropdown-open {
+    &.ant-dropdown-open {
       background: fade(#f4f4f4, 10%);
     }
 

package/dist/MemberPicker/index.js

@@ -1,7 +1,3 @@
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
 function _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("Cannot destructure " + obj); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -16,14 +12,11 @@ import _ from 'lodash';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import ConfigProvider from "../ConfigProvider";
 import { EUserType } from "../ConfigProvider/getUserList";
-import Dropdown from "../Dropdown";
-import { FoldDownFill } from "../Icon";
+import Select from "../Select";
 import message from "../message";
-import NickLabel from "./components/NickLabel";
 import Panel from "./components/Panel";
 import MemberPanel from "./components/PanelWrapper";
 import { EMemberPicker } from "./interface";
-import { getId, getPhoto } from "./utils";
 import { isUser, isUserGroup } from "./utils/getUsersWithUserId";
 var Component = function Component(_ref) {
   var value = _ref.value,
@@ -32,12 +25,16 @@ var Component = function Component(_ref) {
     onChange = _ref.onChange,
     multiple = _ref.multiple,
     dropdownWidth = _ref.dropdownWidth,
-    children = _ref.children,
     open = _ref.open,
     onOpenChange = _ref.onOpenChange,
     _ref$placeholder = _ref.placeholder,
     placeholder = _ref$placeholder === void 0 ? '选择' : _ref$placeholder,
-    className = _ref.className;
+    className = _ref.className,
+    prefix = _ref.prefix,
+    allowClear = _ref.allowClear,
+    disabled = _ref.disabled,
+    _onClear = _ref.onClear,
+    size = _ref.size;
   var _ConfigProvider$useGe = ConfigProvider.useGetUserList(),
     getUsersByIds = _ConfigProvider$useGe.getUsersByIds,
     getUsersByKeywords = _ConfigProvider$useGe.getUsersByKeywords;
@@ -124,27 +121,28 @@ var Component = function Component(_ref) {
     } else if (isUser(value) || isUserGroup(value)) {
       setSelectedUserList([value]);
     } else {
-      var id = [];
+      var param = [];
       if (!value) return;
       if (Array.isArray(value) && value.length === 0) {
         setSelectedUserList([]);
         return;
       }
       if (!Array.isArray(value)) {
-        id = [value];
+        param = [value];
       } else {
-        id = value;
+        param = value;
       }
-      queryByIds(id).then(function (result) {
+      queryByIds(param).then(function (result) {
         setSelectedUserList(result);
       });
     }
   }, [value, queryByIds]);
   var onSelectedChange = useCallback(function (users) {
     if (multiple) {
-      onChange === null || onChange === void 0 ? void 0 : onChange(users);
       setSelectedUserList(users);
+      onChange === null || onChange === void 0 ? void 0 : onChange(users);
     } else {
+      setSelectedUserList(users);
       onChange === null || onChange === void 0 ? void 0 : onChange(users[0]);
     }
     setDropdownOpen(false);
@@ -176,65 +174,67 @@ var Component = function Component(_ref) {
     return function () {
       resizeObserver.unobserve(resizeEle);
     };
-  }, [triggerRef]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [triggerRef.current, triggerRef]);
   var onDropdownOpenChange = useCallback(function (open) {
     setDropdownOpen(open);
     onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(open);
   }, [onOpenChange]);
-  return /*#__PURE__*/React.createElement(Dropdown, {
+  return /*#__PURE__*/React.createElement(Select, {
+    prefix: prefix,
+    size: size,
+    className: classNames('ald-member-picker-select', className),
+    value: selectedUserList.map(function (item) {
+      if (item.type === EUserType.USER_GROUP) {
+        return item.groupId;
+      } else {
+        return item.userId;
+      }
+    }),
+    disabled: disabled,
+    allowClear: allowClear,
+    onClear: function onClear() {
+      setSelectedUserList([]);
+      if (multiple) {
+        onChange === null || onChange === void 0 ? void 0 : onChange([]);
+      } else {
+        onChange === null || onChange === void 0 ? void 0 : onChange();
+      }
+      _onClear === null || _onClear === void 0 ? void 0 : _onClear();
+    },
+    popupClassName: "ald-member-picker-popup",
+    mode: multiple ? 'multiple' : undefined,
+    options: selectedUserList.map(function (item) {
+      if (item.type === EUserType.USER_GROUP) return {
+        label: item.name,
+        value: item.groupId
+      };
+      return {
+        label: item.nickname || item.name,
+        value: item.userId
+      };
+    }),
+    optionLabelProp: "label",
     open: dropdownOpen,
-    trigger: ['click'],
-    onOpenChange: onDropdownOpenChange,
-    destroyPopupOnHide: true,
+    onDropdownVisibleChange: onDropdownOpenChange,
+    dropdownMatchSelectWidth: false,
+    placeholder: placeholder,
     dropdownRender: function dropdownRender() {
-      return /*#__PURE__*/React.createElement(Panel, {
+      return /*#__PURE__*/React.createElement("div", {
+        ref: triggerRef
+      }, /*#__PURE__*/React.createElement(Panel, {
         type: type,
         value: selectedUserList,
         dataList: totalUserList,
         multiple: multiple,
         loading: loading,
-        dropdownWidth: dropdownWidth || dropdownContentWidth,
+        dropdownWidth: dropdownContentWidth,
         onSearchValueChange: onSearchValueChange,
         onChange: onSelectedChange,
         onCancel: setDropdownOpen.bind(null, false)
-      });
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(className, 'ald-member-picker-trigger', {
-      'ald-member-picker-trigger-open': dropdownOpen
-    }),
-    ref: triggerRef
-  }, children || /*#__PURE__*/React.createElement("div", {
-    className: classNames('ald-member-picker-content-wrap', {
-      'ald-member-picker-content-wrap-open': dropdownOpen
-    })
-  }, /*#__PURE__*/React.createElement("div", {
-    className: 'ald-member-picker-content'
-  }, selectedUserList.length === 0 ? /*#__PURE__*/React.createElement("div", {
-    className: "ald-member-picker-placeholder"
-  }, placeholder) : selectedUserList.reduce(function (prev, cur) {
-    if (prev.length > 0) {
-      return [].concat(_toConsumableArray(prev), [',', /*#__PURE__*/React.createElement(NickLabel, {
-        key: getId(cur),
-        id: getId(cur),
-        photo: getPhoto(cur),
-        name: cur.name,
-        account: cur.type === EUserType.USER ? cur.account : ''
-      })]);
-    } else {
-      return [/*#__PURE__*/React.createElement(NickLabel, {
-        key: getId(cur),
-        id: getId(cur),
-        photo: getPhoto(cur),
-        name: cur.name,
-        account: cur.type === EUserType.USER ? cur.account : ''
-      })];
+      }));
     }
-  }, [])), /*#__PURE__*/React.createElement(FoldDownFill, {
-    size: 20,
-    className: 'ald-member-picker-trigger-icon',
-    fill: "#858585"
-  }))));
+  });
 };
 var MemberSelector = Component;
 MemberSelector.MemberPanel = MemberPanel;

package/dist/MemberPicker/interface.d.ts

@@ -1,19 +1,19 @@
-import React from 'react';
 import { IUser, IUserGroup, TUser } from '../ConfigProvider/getUserList';
-export type MemberPickerValue = IUser | IUser[] | string | string[] | IUserGroup | IUserGroup[];
+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 declare enum EMemberPicker {
     GROUP = "GROUP",
     USER = "USER",
     BOTH = "BOTH"
 }
-export interface IBaseMemberSelectorProps {
-    value?: MemberPickerValue;
-    className?: string;
+export interface IBaseMemberSelectorProps extends Pick<ISelectProps, 'allowClear' | 'disabled' | 'prefix' | 'placeholder' | 'className' | 'size' | 'onClear' | 'prefixWidth'> {
+    value?: TMemberPickerValue;
     dropdownWidth?: number;
-    children?: React.ReactNode;
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
-    placeholder?: string;
     type?: EMemberPicker;
 }
 export interface IMultipleMemberSelectorProps extends IBaseMemberSelectorProps {
@@ -22,7 +22,7 @@ export interface IMultipleMemberSelectorProps extends IBaseMemberSelectorProps {
 }
 export interface ISingleMemberSelectorProps extends IBaseMemberSelectorProps {
     multiple?: false;
-    onChange?(v: IUser | IUserGroup): void;
+    onChange?(v?: IUser | IUserGroup): void;
 }
 export type IMemberPickerProps = IMultipleMemberSelectorProps | ISingleMemberSelectorProps;
 export type { IUser };

package/dist/MemberPicker/style/index.less

@@ -1,5 +1,5 @@
 @import '../../style/index.less';
-@import '../../Dropdown/style/index.less';
+@import '../../Select/style/index.less';
 @import '../../Input/style/index.less';
 @import '../../Avatar/style/index.less';
 @import '../../ScrollArea/style/index.less';
@@ -19,7 +19,7 @@
   &.ald-member-picker-multiple {
     display: flex;
     flex-wrap: wrap;
-    border-radius: 4px;
+    border-radius: 2px;
     // .memberSelection {
     // }
     .ald-member-picker-selected-member-tags {
@@ -50,7 +50,7 @@
 
   .ald-member-picker-search-input.ald-member-picker-search-input {
     border: none;
-    border-bottom: 1px solid var(--colors-gray-300, #e8e8e8);
+    border-bottom: 1px solid var(--colors-gray-300, #e8e8e8) !important;
     border-radius: 0;
     flex: 0 0 32px;
 
@@ -299,3 +299,9 @@
   display: flex;
   align-items: center;
 }
+
+.ald-select-popup.ald-member-picker-popup.ald-member-picker-popup {
+  border: none;
+  background-color: transparent;
+  overflow: hidden;
+}

package/dist/MemberPicker/utils/getUsersWithUserId.js

@@ -1,10 +1,10 @@
 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); }
 import { EUserType } from "../../ConfigProvider/getUserList";
 export function isUser(value) {
-  return value && _typeof(value) === 'object' && value.type === EUserType.USER;
+  return value && _typeof(value) === 'object' && value.type === EUserType.USER && (value.nickname || value.name);
 }
 export function isUserGroup(value) {
-  return value && _typeof(value) === 'object' && value.type === EUserType.USER_GROUP;
+  return value && _typeof(value) === 'object' && value.type === EUserType.USER_GROUP && value.name;
 }
 function getUsersWithUserId(obj) {
   var users = [];

package/dist/Result/style/index.less

@@ -11,6 +11,7 @@
   align-items: center;
   justify-content: center;
   flex-direction: column;
+  height: 100%;
 
   .ald-result-icon {
     margin-bottom: 16px;

package/dist/Select/index.js

@@ -28,7 +28,7 @@ import React, { forwardRef, useContext, useEffect, useImperativeHandle, useMemo,
 import { ConfigContext } from "../ConfigProvider";
 import SizeContext from "../ConfigProvider/sizeContext";
 import Empty from "../Empty";
-import { FoldDownFill } from "../Icon";
+import { CancelCircleDuotone, FoldDownFill } from "../Icon";
 import theme from "../style/themes/default/themeColor.module.less";
 import MultipleOption from "./components/MultipleOption";
 import SingleOption from "./components/SingleOption";
@@ -406,6 +406,11 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
     className: classNames({
       'ald-select-prefix-select': !!prefix || prefix === 0
     }),
+    clearIcon: /*#__PURE__*/React.createElement(CancelCircleDuotone, {
+      color: "#858585",
+      size: 16,
+      fill: "#ffffff"
+    }),
     style: {
       width: '100%'
     },

package/dist/Select/style/size.less

@@ -175,6 +175,13 @@
     }
   }
 
+  .ant-select-clear {
+    width: 16px;
+    height: 16px;
+    transform: translateY(-50%);
+    margin-top: 0;
+  }
+
   .ald-select-prefix-select {
     .ant-select-selection-item {
       margin-left: @selector-item-margin-left-large;

package/dist/_utils/type.d.ts

@@ -7,3 +7,6 @@ export declare const tupleNum: <T extends number[]>(...args: T) => T;
 export type ElementOf<T> = T extends (infer E)[] ? E : T extends readonly (infer F)[] ? F : never;
 /** https://github.com/Microsoft/TypeScript/issues/29729 */
 export type LiteralUnion<T extends U, U> = T | (U & object);
+export type RequiredProperties<T, K extends keyof T> = {
+    [P in K]-?: T[P];
+} & Partial<T>;

package/dist/_utils/type.js

@@ -17,4 +17,6 @@ export var tupleNum = function tupleNum() {
  * performing indexing
  */
 
-/** https://github.com/Microsoft/TypeScript/issues/29729 */
+/** https://github.com/Microsoft/TypeScript/issues/29729 */
+
+// 定义一个交叉类型，包括必选属性和可选属性

package/dist/index.d.ts

@@ -45,7 +45,7 @@ export type { IInputNumberProps as InputNumberProps } from './InputNumber';
 export { default as Layout } from './Layout';
 export type { LayoutProps } from './Layout';
 export { default as MemberPicker } from './MemberPicker';
-export type { IUser, IMemberPickerProps as MemberPickerProps, MemberPickerValue, } from './MemberPicker/interface';
+export type { IUser, IMemberPickerProps as MemberPickerProps, TMemberPickerValue as MemberPickerValue, } from './MemberPicker/interface';
 export { default as Menu } from './Menu';
 export type { ItemType, IMenuProps as MenuProps } from './Menu';
 export { default as Modal } from './Modal';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aloudata/aloudata-design",
-  "version": "1.10.9",
+  "version": "1.10.11",
   "description": "",
   "license": "MIT",
   "module": "dist/index.js",