@aloudata/aloudata-design 1.10.13 → 2.0.0-beta.1

package/dist/Input/style/status.less

@@ -0,0 +1,105 @@
+// 光标颜色
+@input-caret-color: var(
+  --alias-colors-border-accent-gray-stronger-default,
+  #4b5563
+);
+// color enabled
+@input-enabled-border-color: var(
+  --alias-colors-border-accent-gray-subtle-default,
+  #d1d5db
+);
+@input-enabled-bg-color: var(--alias-colors-bg-skeleton-subtler, #fff);
+@input-enabled-text-color: var(--alias-colors-text-default, #1f2937);
+@input-enabled-placeholder-color: var(--alias-colors-text-subtlest, #9ca3af);
+// color hover
+@input-hover-border-color: var(
+  --alias-colors-border-accent-gray-subtle-hover,
+  #9ca3af
+);
+@input-hover-bg-color: var(--alias-colors-bg-skeleton-subtler, #fff);
+@input-hover-text-color: var(--alias-colors-text-default, #1f2937);
+@input-hover-placeholder-color: var(--alias-colors-text-subtlest, #9ca3af);
+
+//color focus
+@input-focus-border-color: var(--alias-colors-border-selected, #126fdd);
+@input-focus-bg-color: var(--alias-colors-bg-skeleton-subtler, #fff);
+@input-focus-text-color: var(--alias-colors-text-default, #1f2937);
+@input-focus-placeholder-color: var(--alias-colors-text-subtlest, #9ca3af);
+
+//color disabled
+@input-disabled-border-color: var(
+  --alias-colors-border-disabled,
+  rgba(0, 0, 0, 0.1)
+);
+@input-disabled-bg-color: var(--alias-colors-bg-transp, rgba(0, 0, 0, 0));
+@input-disabled-text-color: var(
+  --alias-colors-text-disabled,
+  rgba(0, 0, 0, 0.25)
+);
+@input-disabled-placeholder-color: var(
+  --alias-colors-text-disabled,
+  rgba(0, 0, 0, 0.25)
+);
+
+.input-color(@border-color,@text-color,@bg-color,@placeholder-color) {
+  border-color: @border-color;
+  color: @text-color;
+  background-color: @bg-color;
+
+  &::placeholder {
+    color: @placeholder-color;
+  }
+}
+
+.ald-input.ald-input {
+  // 纯input 输入框，比如普通的<Input /> <Input.textarea />
+  &:not(.ant-input-affix-wrapper) {
+    .input-color(@input-enabled-border-color,@input-enabled-text-color,@input-enabled-bg-color,@input-enabled-placeholder-color);
+
+    &:hover {
+      .input-color(@input-hover-border-color,@input-hover-text-color,@input-hover-bg-color,@input-hover-placeholder-color);
+    }
+
+    &:focus {
+      .input-color(@input-focus-border-color,@input-focus-text-color,@input-focus-bg-color,@input-focus-placeholder-color);
+    }
+
+    &.ald-input-disabled {
+      cursor: default;
+      .input-color(@input-disabled-border-color,@input-disabled-text-color,@input-disabled-bg-color,@input-disabled-placeholder-color);
+    }
+  }
+  // 带有其他内容的输入框，比如带 allowClear图标、prefix、suffix、密码图标等。
+  &.ant-input-affix-wrapper {
+    // 纯input 输入框，比如普通的<Input /> <Input.textarea />
+    .input-color(@input-enabled-border-color,@input-enabled-text-color,@input-enabled-bg-color,@input-enabled-placeholder-color);
+
+    &:hover {
+      .input-color(@input-hover-border-color,@input-hover-text-color,@input-hover-bg-color,@input-hover-placeholder-color);
+    }
+    // 激活状态
+    &.ant-input-affix-wrapper-focused,
+    &:active {
+      .input-color(@input-focus-border-color,@input-focus-text-color,@input-focus-bg-color,@input-focus-placeholder-color);
+    }
+
+    &.ald-input-disabled {
+      cursor: default;
+      .input-color(@input-disabled-border-color,@input-disabled-text-color,@input-disabled-bg-color,@input-disabled-placeholder-color);
+
+      .ant-input-disabled {
+        cursor: default;
+      }
+    }
+    // 前缀
+    .ant-input-prefix {
+      color: var(--alias-colors-text-subtle, #4b5563);
+    }
+    // 后缀
+    .ant-input-suffix {
+      .ant-input-clear-icon {
+        color: var(--alias-colors-icon-subtle, #6b7280);
+      }
+    }
+  }
+}

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { IUser } from '../interface';
+import { IUser, TUserGroupValue, TUserValue } from '../interface';
 interface IMemberSelectionProps {
     className?: string;
     userList: IUser[];
@@ -9,6 +9,7 @@ interface IMemberSelectionProps {
     onSearchValueChange?: (value: string) => void;
     loading: boolean;
     width: number;
+    lockedIds: Array<TUserValue | TUserGroupValue>;
 }
 export default function MemberSelection(props: IMemberSelectionProps): React.JSX.Element;
 export {};

package/dist/MemberPicker/components/MemberSelection.js

@@ -5,6 +5,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 _ from 'lodash';
 import React, { useDeferredValue, useEffect, useState } from 'react';
 import Empty from "../../Empty";
 import { SearchLine } from "../../Icon";
@@ -22,7 +23,8 @@ export default function MemberSelection(props) {
     selectedUsers = props.selectedUsers,
     onSearchValueChange = props.onSearchValueChange,
     loading = props.loading,
-    width = props.width;
+    width = props.width,
+    lockedIds = props.lockedIds;
   var _useState = useState(''),
     _useState2 = _slicedToArray(_useState, 2),
     searchValue = _useState2[0],
@@ -71,9 +73,15 @@ export default function MemberSelection(props) {
     var isSelected = selectedUsers.some(function (selectedUser) {
       return selectedUser.userId === user.userId;
     });
+    var index = _.findIndex(lockedIds, {
+      userId: user.userId,
+      type: user.type
+    });
+    var disabled = index !== -1;
     return multiple ? /*#__PURE__*/React.createElement(MultipleOption, {
       key: user.userId,
       user: user,
+      disabled: disabled,
       selected: isSelected,
       onChange: function onChange(selected, user) {
         if (isUser(user)) _onChange(selected, user);

package/dist/MemberPicker/components/MultipleOption.js

@@ -23,7 +23,7 @@ export default function MultipleList(params) {
     onChange === null || onChange === void 0 ? void 0 : onChange(!selected, user);
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: classnames('ald-member-picker-option', className, _defineProperty({}, 'ald-member-picker-optionDisabled', disabled)),
+    className: classnames('ald-member-picker-option', className, _defineProperty({}, 'ald-member-picker-option-disabled', disabled)),
     onClick: onClick
   }, /*#__PURE__*/React.createElement("div", {
     className: 'ald-member-picker-label'

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

@@ -1,4 +1,4 @@
-import { IUserGroup, TUser } from "../../ConfigProvider/getUserList";
+import { IUserGroup, TUser, TUserGroupValue, TUserValue } from "../../ConfigProvider/getUserList";
 import React from 'react';
 import { EMemberPicker, IUser } from '../interface';
 interface IPanelProps {
@@ -12,6 +12,7 @@ interface IPanelProps {
     onCancel?: () => void;
     loading: boolean;
     className?: string;
+    lockedIds: Array<TUserValue | TUserGroupValue>;
 }
 export default function Panel(props: IPanelProps): React.JSX.Element;
 export {};

package/dist/MemberPicker/components/Panel.js

@@ -31,7 +31,8 @@ export default function Panel(props) {
     onChange = props.onChange,
     dataList = props.dataList,
     onSearchValueChange = props.onSearchValueChange,
-    className = props.className;
+    className = props.className,
+    lockedIds = props.lockedIds;
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
     selectedUsers = _useState2[0],
@@ -90,6 +91,7 @@ export default function Panel(props) {
       onChange: onSelectionChange,
       onSearchValueChange: onSearchValueChange,
       multiple: true,
+      lockedIds: lockedIds,
       loading: props.loading
     });
     var userGroupSelection = /*#__PURE__*/React.createElement(UserGroupSelection, {
@@ -100,6 +102,7 @@ export default function Panel(props) {
       onChange: onSelectionChange,
       onSearchValueChange: onSearchValueChange,
       multiple: true,
+      lockedIds: lockedIds,
       loading: props.loading
     });
     if (type === EMemberPicker.USER) {
@@ -124,7 +127,7 @@ export default function Panel(props) {
         className: "ald-member-tabs"
       });
     }
-  }, [onSearchValueChange, onSelectionChange, panelWidth, props.loading, selectedUsers, type, dataList]);
+  }, [dataList, panelWidth, selectedUsers, onSelectionChange, onSearchValueChange, lockedIds, props.loading, type]);
   return /*#__PURE__*/React.createElement("div", {
     className: classNames(className, 'ald-member-picker-wrapper', (_classNames = {}, _defineProperty(_classNames, 'ald-member-picker-multiple', multiple), _defineProperty(_classNames, 'ald-member-picker-single', !multiple), _classNames)),
     style: {
@@ -136,7 +139,8 @@ export default function Panel(props) {
     className: 'ald-member-picker-selected-member-tags',
     selectedUsers: selectedUsers,
     width: (panelWidth - 3) / 2,
-    onRemove: onRemove
+    onRemove: onRemove,
+    lockedIds: lockedIds
   }), /*#__PURE__*/React.createElement(SelectorFooter, {
     className: 'ald-member-picker-selector-footer',
     onCancel: props.onCancel,
@@ -149,6 +153,7 @@ export default function Panel(props) {
     selectedUsers: selectedUsers.filter(isUser),
     onSearchValueChange: onSearchValueChange,
     multiple: false && multiple,
+    lockedIds: lockedIds,
     loading: props.loading
   }), type === EMemberPicker.GROUP && /*#__PURE__*/React.createElement(UserGroupSelection, {
     className: 'ald-member-picker-member-selection-multiple',
@@ -158,6 +163,7 @@ export default function Panel(props) {
     onChange: onSelectionChange,
     onSearchValueChange: onSearchValueChange,
     multiple: false,
+    lockedIds: lockedIds,
     loading: props.loading
   })));
 }

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

@@ -1,4 +1,4 @@
-import { IUserGroup, TUser } from "../../ConfigProvider/getUserList";
+import { IUserGroup, TUser, TUserGroupValue, TUserValue } from "../../ConfigProvider/getUserList";
 import React from 'react';
 import { EMemberPicker, IUser, MemberPickerValue } from '../interface';
 interface IProps {
@@ -9,6 +9,7 @@ interface IProps {
     value?: MemberPickerValue;
     className?: string;
     onCancel?: () => void;
+    lockedIds?: Array<TUserValue | TUserGroupValue>;
 }
-export declare const PanelWrapper: ({ type, value, multiple, dropdownWidth, onChange, onCancel, className, }: IProps) => React.JSX.Element;
+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

@@ -20,7 +20,9 @@ export var PanelWrapper = function PanelWrapper(_ref) {
     dropdownWidth = _ref.dropdownWidth,
     onChange = _ref.onChange,
     onCancel = _ref.onCancel,
-    className = _ref.className;
+    className = _ref.className,
+    _ref$lockedIds = _ref.lockedIds,
+    lockedIds = _ref$lockedIds === void 0 ? [] : _ref$lockedIds;
   var _ConfigProvider$useGe = ConfigProvider.useGetUserList(),
     getUsersByIds = _ConfigProvider$useGe.getUsersByIds,
     getUsersByKeywords = _ConfigProvider$useGe.getUsersByKeywords;
@@ -127,7 +129,8 @@ export var PanelWrapper = function PanelWrapper(_ref) {
     onSearchValueChange: onSearchValueChange,
     onChange: onSelectedChange,
     className: className,
-    onCancel: onCancel
+    onCancel: onCancel,
+    lockedIds: lockedIds
   });
 };
 export default PanelWrapper;

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

@@ -1,11 +1,12 @@
 import React from 'react';
-import { IUserGroup, TUser } from '../../ConfigProvider/getUserList';
+import { IUserGroup, TUser, TUserGroupValue, TUserValue } from '../../ConfigProvider/getUserList';
 import { IUser } from '../interface';
 interface ISelectedMemberTagsProps {
     className?: string;
     selectedUsers: TUser;
     onRemove?: (user: IUser | IUserGroup) => void;
     width: number;
+    lockedIds: Array<TUserValue | TUserGroupValue>;
 }
 export default function SelectedMemberTags(props: ISelectedMemberTagsProps): React.JSX.Element;
 export {};

package/dist/MemberPicker/components/SelectedMemberTags.js

@@ -1,4 +1,5 @@
 import classNames from 'classnames';
+import _ from 'lodash';
 import React from 'react';
 import { CloseMLine } from "../../Icon";
 import ScrollArea from "../../ScrollArea";
@@ -7,7 +8,9 @@ import NickLabel from "./NickLabel";
 export default function SelectedMemberTags(props) {
   var className = props.className,
     selectedUsers = props.selectedUsers,
-    width = props.width;
+    width = props.width,
+    _props$lockedIds = props.lockedIds,
+    lockedIds = _props$lockedIds === void 0 ? [] : _props$lockedIds;
   return /*#__PURE__*/React.createElement("div", {
     className: classNames(className, 'ald-member-picker-selected-member-tags-wrap')
   }, /*#__PURE__*/React.createElement("div", {
@@ -23,6 +26,20 @@ export default function SelectedMemberTags(props) {
       width: width - 17
     }
   }, selectedUsers.map(function (user) {
+    var hasLocked = false;
+    if (user && user.hasOwnProperty('groupId')) {
+      var index = _.findIndex(lockedIds, {
+        groupId: user.groupId,
+        type: user.type
+      });
+      hasLocked = index !== -1;
+    } else {
+      var _index = _.findIndex(lockedIds, {
+        userId: user.userId,
+        type: user.type
+      });
+      hasLocked = _index !== -1;
+    }
     return /*#__PURE__*/React.createElement("div", {
       className: 'ald-member-picker-selected-member-tag',
       key: getId(user)
@@ -31,7 +48,7 @@ export default function SelectedMemberTags(props) {
       name: user.name,
       photo: getPhoto(user),
       account: getAccount(user)
-    }), /*#__PURE__*/React.createElement(CloseMLine, {
+    }), !hasLocked && /*#__PURE__*/React.createElement(CloseMLine, {
       size: 20,
       className: 'ald-member-picker-close',
       color: "#98A2B3",

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { IUserGroup } from '../../ConfigProvider/getUserList';
+import { IUserGroup, TUserGroupValue, TUserValue } from '../../ConfigProvider/getUserList';
 interface IProps {
     className?: string;
     userGroupList: IUserGroup[];
@@ -9,6 +9,7 @@ interface IProps {
     loading: boolean;
     onSearchValueChange?: (value: string) => void;
     width: number;
+    lockedIds: Array<TUserValue | TUserGroupValue>;
 }
-declare const UserGroupSelection: ({ className, userGroupList, multiple, onChange, selectedUsersGroup: selectedUsersGroups, loading, width, }: IProps) => React.JSX.Element;
+declare const UserGroupSelection: ({ className, userGroupList, multiple, onChange, selectedUsersGroup: selectedUsersGroups, loading, width, lockedIds, }: IProps) => React.JSX.Element;
 export default UserGroupSelection;

package/dist/MemberPicker/components/UserGroupSelection.js

@@ -23,7 +23,8 @@ var UserGroupSelection = function UserGroupSelection(_ref) {
     _onChange = _ref.onChange,
     selectedUsersGroups = _ref.selectedUsersGroup,
     loading = _ref.loading,
-    width = _ref.width;
+    width = _ref.width,
+    lockedIds = _ref.lockedIds;
   var _useState = useState(''),
     _useState2 = _slicedToArray(_useState, 2),
     searchKey = _useState2[0],
@@ -121,9 +122,15 @@ var UserGroupSelection = function UserGroupSelection(_ref) {
     var isSelected = selectedUsersGroups.some(function (selectUserGroup) {
       return selectUserGroup.groupId === userGroup.groupId;
     });
+    var index = _.findIndex(lockedIds, {
+      groupId: userGroup.groupId,
+      type: userGroup.type
+    });
+    var disabled = index !== -1;
     return multiple ? /*#__PURE__*/React.createElement(MultipleOption, {
       key: userGroup.groupId,
       user: userGroup,
+      disabled: disabled,
       selected: isSelected,
       onChange: function onChange(selected, userGroup) {
         if (isUserGroup(userGroup)) {

package/dist/MemberPicker/index.js

@@ -34,7 +34,9 @@ var Component = function Component(_ref) {
     allowClear = _ref.allowClear,
     disabled = _ref.disabled,
     _onClear = _ref.onClear,
-    size = _ref.size;
+    size = _ref.size,
+    _ref$lockedIds = _ref.lockedIds,
+    lockedIds = _ref$lockedIds === void 0 ? [] : _ref$lockedIds;
   var _ConfigProvider$useGe = ConfigProvider.useGetUserList(),
     getUsersByIds = _ConfigProvider$useGe.getUsersByIds,
     getUsersByKeywords = _ConfigProvider$useGe.getUsersByKeywords;
@@ -226,6 +228,7 @@ var Component = function Component(_ref) {
         type: type,
         value: selectedUserList,
         dataList: totalUserList,
+        lockedIds: lockedIds,
         multiple: multiple,
         loading: loading,
         dropdownWidth: dropdownContentWidth,

package/dist/MemberPicker/interface.d.ts

@@ -15,6 +15,7 @@ export interface IBaseMemberSelectorProps extends Pick<ISelectProps, 'allowClear
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
     type?: EMemberPicker;
+    lockedIds?: Array<TUserValue | TUserGroupValue>;
 }
 export interface IMultipleMemberSelectorProps extends IBaseMemberSelectorProps {
     multiple: true;

package/dist/MemberPicker/style/index.less

@@ -12,7 +12,7 @@
 .ald-member-picker-wrapper {
   box-sizing: border-box;
   border: 1px solid var(--colors-gray-400, #dbdbdb);
-  background: var(--colors-neutral-white, #fff);
+  background: var(--global-colors-base-white-950a, #fff);
   box-shadow: 0 20px 24px -4px rgb(16 24 40 / 0.08),
     0 8px 8px -4px rgb(16 24 40 / 0.03);
 
@@ -159,6 +159,14 @@
     background: var(--colors-blue-100, #f0f6ff);
   }
 
+  &.ald-member-picker-option-disabled {
+    cursor: not-allowed;
+
+    .ald-member-picker-nick-label-name {
+      color: var(--colors-gray-900, #8b8b8b);
+    }
+  }
+
   .ald-member-picker-checkbox {
     display: flex;
     align-items: center;
@@ -184,7 +192,7 @@
   width: auto;
   height: 32px;
   box-sizing: border-box;
-  background: var(--colors-neutral-white, #fff);
+  background: var(--global-colors-base-white-950a, #fff);
   justify-content: space-between;
   min-width: 0;
 

package/dist/Menu/index.js

@@ -1,4 +1,4 @@
-var _excluded = ["className", "expandIcon", "items"];
+var _excluded = ["className", "items"];
 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); }
 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 _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; }
@@ -12,7 +12,6 @@ import { Menu as AntdMenu } from 'antd';
 import classNames from 'classnames';
 import React from 'react';
 import { ChevronRightLine } from "../Icon";
-import theme from "../style/themes/default/themeColor.module.less";
 import Divider from "./Divider";
 import MenuItem from "./MenuItem";
 import SubMenu from "./SubMenu";
@@ -30,7 +29,10 @@ export function addPopupOffset(items) {
       return _objectSpread(_objectSpread({
         popupOffset: [OFFSET_WIDTH, OFFSET_HEIGHT]
       }, item), {}, {
-        children: addPopupOffset(item.children)
+        children: addPopupOffset(item.children),
+        expandIcon: /*#__PURE__*/React.createElement(ChevronRightLine, {
+          size: 16
+        })
       });
     }
     return item;
@@ -38,15 +40,10 @@ export function addPopupOffset(items) {
 }
 export default function Menu(props) {
   var className = props.className,
-    expandIcon = props.expandIcon,
     items = props.items,
     otherProps = _objectWithoutProperties(props, _excluded);
   return /*#__PURE__*/React.createElement(AntdMenu, _extends({
-    className: classNames(className, 'ald-menu'),
-    expandIcon: expandIcon || /*#__PURE__*/React.createElement(ChevronRightLine, {
-      color: theme.NL50,
-      size: 16
-    })
+    className: classNames(className, 'ald-menu')
   }, otherProps, {
     items: addPopupOffset(items),
     theme: "light"