@aloudata/aloudata-design 1.4.2 → 1.5.0

package/dist/MemberPicker/index.js

@@ -0,0 +1,207 @@
+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 _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 _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("Cannot destructure undefined"); }
+
+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 = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import { FoldDownFill } from '@aloudata/icons-react';
+import { useRequest } from 'ahooks';
+import classNames from 'classnames';
+import _ from 'lodash';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import ConfigProvider from "../ConfigProvider";
+import Dropdown from "../Dropdown";
+import message from "../message";
+import NickLabel from "./components/NickLabel";
+import Panel from "./components/Panel";
+import { isUser } from "./utils/getUsersWithUserId";
+
+var MemberSelector = function MemberSelector(_ref) {
+  var value = _ref.value,
+      onChange = _ref.onChange,
+      multiple = _ref.multiple,
+      dropdownWidth = _ref.dropdownWidth,
+      children = _ref.children,
+      open = _ref.open,
+      onOpenChange = _ref.onOpenChange,
+      className = _ref.className;
+
+  var _ConfigProvider$useGe = ConfigProvider.useGetUserList(),
+      getUsersByIds = _ConfigProvider$useGe.getUsersByIds,
+      getUsersByKeywords = _ConfigProvider$useGe.getUsersByKeywords;
+
+  var _useState = useState([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      selectedUserList = _useState2[0],
+      setSelectedUserList = _useState2[1];
+
+  var _useState3 = useState([]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      searchUserList = _useState4[0],
+      setSearchUserList = _useState4[1];
+
+  var _useState5 = useState(''),
+      _useState6 = _slicedToArray(_useState5, 2),
+      searchString = _useState6[0],
+      setSearchString = _useState6[1];
+
+  var onSearchValueChange = useCallback(function (v) {
+    setSearchString(v);
+  }, []);
+
+  var _useState7 = useState(!!open),
+      _useState8 = _slicedToArray(_useState7, 2),
+      dropdownOpen = _useState8[0],
+      setDropdownOpen = _useState8[1];
+
+  var queryByKeywords = useMemo(function () {
+    if (getUsersByKeywords) {
+      return getUsersByKeywords;
+    }
+
+    return function (_ref2) {
+      _objectDestructuringEmpty(_ref2);
+
+      return Promise.reject({
+        message: '请在ConfigProvider中配置queryByKeywords方法'
+      });
+    };
+  }, [getUsersByKeywords]);
+  var queryByIds = useMemo(function () {
+    if (getUsersByIds) {
+      return getUsersByIds;
+    }
+
+    return function (_ref3) {
+      _objectDestructuringEmpty(_ref3);
+
+      return Promise.reject({
+        message: '请在ConfigProvider中配置queryByIds方法'
+      });
+    };
+  }, [getUsersByIds]);
+
+  var _useRequest = useRequest(function () {
+    return queryByKeywords(searchString);
+  }, {
+    refreshDeps: [searchString],
+    manual: true,
+    cacheKey: 'member-selector',
+    cacheTime: 1000 * 60 * 2,
+    // 2分钟内不重复请求
+    onSuccess: function onSuccess(result) {
+      setSearchUserList(result);
+    },
+    onError: function onError(error) {
+      message.error(error.message);
+    }
+  }),
+      loading = _useRequest.loading,
+      run = _useRequest.run;
+
+  var totalUserList = useMemo(function () {
+    var totalUsers = searchUserList.concat(selectedUserList);
+    return _.uniqBy(totalUsers, 'userId');
+  }, [searchUserList, selectedUserList]);
+  useEffect(function () {
+    if (!dropdownOpen) return;
+    run();
+  }, [dropdownOpen, run, searchString]);
+  useEffect(function () {
+    if (Array.isArray(value) && isUser(value[0])) {
+      setSelectedUserList(value);
+    } else if (isUser(value)) {
+      setSelectedUserList([value]);
+    } else {
+      var id = [];
+      if (!value) return;
+      if (Array.isArray(value) && value.length === 0) return;
+
+      if (!Array.isArray(value)) {
+        id = [value];
+      } else {
+        id = value;
+      }
+
+      queryByIds(id).then(function (result) {
+        setSelectedUserList(result);
+      });
+    }
+  }, [value, queryByIds]);
+  var onSelectedChange = useCallback(function (users) {
+    if (multiple) {
+      onChange === null || onChange === void 0 ? void 0 : onChange(users);
+    } else {
+      onChange === null || onChange === void 0 ? void 0 : onChange(users[0]);
+    }
+
+    setDropdownOpen(false);
+  }, [multiple, onChange, setDropdownOpen]);
+  useEffect(function () {
+    if (typeof open === 'boolean') {
+      setDropdownOpen(open);
+    }
+  }, [open]);
+  var onDropdownOpenChange = useCallback(function (open) {
+    setDropdownOpen(open);
+    onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(open);
+  }, [onOpenChange]);
+  return /*#__PURE__*/React.createElement(Dropdown, {
+    open: dropdownOpen,
+    trigger: ['click'],
+    onOpenChange: onDropdownOpenChange,
+    destroyPopupOnHide: true,
+    dropdownRender: function dropdownRender() {
+      return /*#__PURE__*/React.createElement(Panel, {
+        value: selectedUserList,
+        userList: totalUserList,
+        multiple: multiple,
+        loading: loading,
+        dropdownWidth: dropdownWidth,
+        onSearchValueChange: onSearchValueChange,
+        onChange: onSelectedChange,
+        onCancel: setDropdownOpen.bind(null, false)
+      });
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames(className, 'ald-member-picker-trigger')
+  }, children || /*#__PURE__*/React.createElement("div", {
+    className: "ald-member-picker-content-wrap"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: 'ald-member-picker-content'
+  }, selectedUserList.reduce(function (prev, cur) {
+    if (prev.length > 0) {
+      return [].concat(_toConsumableArray(prev), [',', /*#__PURE__*/React.createElement(NickLabel, _extends({
+        key: cur.userId
+      }, cur))]);
+    } else {
+      return [/*#__PURE__*/React.createElement(NickLabel, _extends({
+        key: cur.userId
+      }, cur))];
+    }
+  }, [])), /*#__PURE__*/React.createElement(FoldDownFill, {
+    size: 20,
+    className: 'ald-member-picker-trigger-icon',
+    fill: "#858585"
+  }))));
+};
+
+export default MemberSelector;

package/dist/MemberPicker/interface.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { IUser } from '../ConfigProvider/getUserList';
+export declare type MemberPickerValue = IUser | IUser[] | string | string[];
+export interface IBaseMemberSelectorProps {
+    value: MemberPickerValue;
+    className?: string;
+    dropdownWidth?: number;
+    children?: React.ReactNode;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+export interface IMultipleMemberSelectorProps extends IBaseMemberSelectorProps {
+    multiple: true;
+    onChange(v: IUser[]): void;
+}
+export interface ISingleMemberSelectorProps extends IBaseMemberSelectorProps {
+    multiple?: false;
+    onChange(v: IUser): void;
+}
+export declare type IMemberPickerProps = IMultipleMemberSelectorProps | ISingleMemberSelectorProps;
+export type { IUser };

package/dist/MemberPicker/interface.js

@@ -0,0 +1 @@
+export {};

package/dist/MemberPicker/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style';
+import './index.less';

package/dist/MemberPicker/style/index.js

@@ -0,0 +1,2 @@
+import "../../style";
+import "./index.less";

package/dist/MemberPicker/style/index.less

@@ -0,0 +1,187 @@
+@import '../../style/index.less';
+@import '../../Dropdown/style/index.less';
+@import '../../Input/style/index.less';
+@import '../../Avatar/style/index.less';
+@import '../../ScrollArea/style/index.less';
+@import '../../Empty/style/index.less';
+@import '../../message/style/index.less';
+@import '../../Spin/style/index.less';
+
+.ald-member-picker-wrapper {
+  border: 1px solid var(--colors-gray-400, #dbdbdb);
+  background: var(--colors-neutral-white, #fff);
+  box-shadow: 0 20px 24px -4px rgb(16 24 40 / 8%),
+    0 8px 8px -4px rgb(16 24 40 / 3%);
+
+  &.ald-member-picker-multiple {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: 320px 56px;
+    border-radius: 4px;
+    // .memberSelection {
+    // }
+    .ald-member-picker-selected-member-tags {
+      border-left: 1px solid var(--colors-gray-400, #dbdbdb);
+    }
+
+    .ald-member-picker-selector-footer {
+      grid-column: 1 / 3;
+    }
+  }
+}
+
+.ald-member-picker-member-list-wrap {
+  .ald-member-picker-search-input {
+    border: none;
+    border-bottom: 1px solid var(--colors-gray-300, #e8e8e8);
+  }
+
+  .ald-member-picker-member-list {
+    height: calc(100% - 32px);
+    min-height: 180px;
+
+    .ald-member-picker-member-scroll {
+      max-height: 288px;
+    }
+  }
+}
+
+.ald-member-picker-selected-member-tags-wrap {
+  max-height: 320px;
+  padding: 8px;
+  display: grid;
+  grid-template-columns: auto;
+  grid-template-rows: 20px auto;
+  gap: 8px;
+
+  .ald-member-picker-has-selected {
+    color: var(--colors-gray-900, #171717);
+    font-size: 13px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px;
+  }
+
+  .ald-member-picker-tags {
+    display: flex;
+    flex-wrap: wrap;
+    align-content: flex-start;
+    gap: 8px;
+
+    .ald-member-picker-selected-member-tag {
+      display: flex;
+      padding: 1px 5px;
+      justify-content: center;
+      gap: var(--global-number-spacing-spacing-xxs, 4px);
+      border-radius: var(--global-number-radius-radius-sm, 2px);
+      border: 1px solid var(--colors-gray-300, #e8e8e8);
+      font-size: 13px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 20px;
+      height: 24px;
+
+      .ald-member-picker-close {
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.ald-member-picker-footer {
+  display: flex;
+  padding: var(--global-number-spacing-spacing-sm, 12px)
+    var(--global-number-spacing-spacing-lg, 24px);
+  justify-content: flex-end;
+  align-items: center;
+  gap: var(--global-number-spacing-spacing-sm, 12px);
+  align-self: stretch;
+  border-top: 1px solid var(--colors-gray-300, #e8e8e8);
+  background: var(--colors-gray-97, #f8f8f8);
+}
+
+.ald-member-picker-option {
+  padding: 0 8px;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  height: 32px;
+  line-height: 20px;
+  gap: 4px;
+  cursor: pointer;
+
+  &:hover {
+    background: var(--colors-gray-98, #f4f4f4);
+  }
+
+  &.ald-member-picker-single-option-selected {
+    background: var(--colors-blue-100, #f0f6ff);
+  }
+
+  .ald-member-picker-checkbox {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+  }
+
+  .ald-member-picker-name {
+    color: var(--colors-gray-900, #171717);
+    font-size: 13px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+.ald-member-picker-trigger {
+  display: flex;
+  align-items: center;
+  width: auto;
+  height: 32px;
+  box-sizing: border-box;
+  padding: 0 8px;
+  background: var(--colors-neutral-white, #fff);
+  justify-content: space-between;
+
+  .ald-member-picker-content-wrap {
+    border-radius: 2px;
+    border: 1px solid var(--colors-gray-400, #dbdbdb);
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .ald-member-picker-content {
+      height: 100%;
+      display: flex;
+      align-items: center;
+      flex-grow: 0;
+      flex-shrink: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+}
+
+.ald-member-picker-nick-label {
+  font-size: 0;
+  display: inline-flex;
+  gap: 4px;
+  flex-wrap: nowrap;
+  align-items: center;
+
+  .ald-member-picker-nick-label-name {
+    color: var(--colors-gray-900, #171717);
+    font-size: 13px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px;
+    white-space: nowrap;
+  }
+}

package/dist/MemberPicker/utils/getUsersWithUserId.d.ts

@@ -0,0 +1,2 @@
+import { IUser } from '../interface';
+export declare function isUser(value: any): value is IUser;

package/dist/MemberPicker/utils/getUsersWithUserId.js

@@ -0,0 +1,5 @@
+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); }
+
+export function isUser(value) {
+  return value && _typeof(value) === 'object' && 'userId' in value;
+}

package/dist/Radio/components/Group/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IRadioGroupProps } from '../../interface/radioGroup';
-export declare const RadioGroupContext: React.Context<Omit<IRadioGroupProps, "className" | "children"> & {
+export declare const RadioGroupContext: React.Context<Omit<IRadioGroupProps, "children" | "className"> & {
     sliderRef?: React.RefObject<HTMLDivElement> | undefined;
 }>;
 export default function RadioGroup(props: IRadioGroupProps): JSX.Element;

package/dist/Radio/components/Group/index.js

@@ -15,6 +15,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import classNames from 'classnames';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import React, { createContext, useRef } from 'react';
+import DisabledContext from 'antd/lib/config-provider/DisabledContext';
 export var RadioGroupContext = /*#__PURE__*/createContext({});
 export default function RadioGroup(props) {
   var children = props.children,
@@ -25,8 +26,7 @@ export default function RadioGroup(props) {
       _props$type = props.type,
       type = _props$type === void 0 ? 'radio' : _props$type,
       className = props.className,
-      _props$disabled = props.disabled,
-      disabled = _props$disabled === void 0 ? false : _props$disabled; // 滑块的ref
+      customDisabled = props.disabled; // 滑块的ref
 
   var sliderRef = useRef(null); // 该hooks与useState相同，但是当props中有value值时，优先使用value的值
 
@@ -35,9 +35,12 @@ export default function RadioGroup(props) {
   }),
       _useMergedState2 = _slicedToArray(_useMergedState, 2),
       value = _useMergedState2[0],
-      setValue = _useMergedState2[1]; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      setValue = _useMergedState2[1]; // ===================== Disabled =====================
 
 
+  var disabled = React.useContext(DisabledContext);
+  var mergedDisabled = customDisabled !== null && customDisabled !== void 0 ? customDisabled : disabled; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
   var onRadioChange = function onRadioChange(selectedValue) {
     var lastValue = value; // const val = ev.target.value;
     // console.log(selectValue);
@@ -66,7 +69,7 @@ export default function RadioGroup(props) {
       size: size,
       type: type,
       sliderRef: sliderRef,
-      disabled: disabled
+      disabled: mergedDisabled
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: getWrapperClass()

package/dist/ScrollArea/index.d.ts

@@ -6,6 +6,7 @@ interface Props extends ScrollAreaProps {
     horizontalScrollBarClassName?: string;
     verticalScrollBarClassName?: string;
     onViewportScroll?: (event: React.UIEvent<HTMLDivElement>) => void;
+    innerClassName?: string;
 }
 declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>>;
 export default _default;

package/dist/ScrollArea/index.js

@@ -1,4 +1,4 @@
-var _excluded = ["children", "className", "horizontalScrollBarClassName", "verticalScrollBarClassName", "onViewportScroll"];
+var _excluded = ["children", "className", "innerClassName", "horizontalScrollBarClassName", "verticalScrollBarClassName", "onViewportScroll"];
 
 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); }
 
@@ -13,6 +13,7 @@ import React, { forwardRef, memo } from 'react';
 var ScrollArea = function ScrollArea(props, ref) {
   var children = props.children,
       className = props.className,
+      innerClassName = props.innerClassName,
       horizontalScrollBarClassName = props.horizontalScrollBarClassName,
       verticalScrollBarClassName = props.verticalScrollBarClassName,
       onViewportScroll = props.onViewportScroll,
@@ -22,7 +23,7 @@ var ScrollArea = function ScrollArea(props, ref) {
     scrollHideDelay: 50,
     className: classNames('ald-scroll-area', className)
   }), /*#__PURE__*/React.createElement(ScrollAreaComponent.Viewport, {
-    className: "ald-scroll-area-inner",
+    className: classNames('ald-scroll-area-inner', innerClassName),
     onScroll: function onScroll(event) {
       onViewportScroll === null || onViewportScroll === void 0 ? void 0 : onViewportScroll(event);
     },

package/dist/Select/index.js

@@ -1,4 +1,4 @@
-var _excluded = ["mode", "options", "dropdownRender", "onDropdownVisibleChange", "defaultValue", "onChange", "open", "defaultOpen", "prefix", "className", "popupClassName", "listHeight", "listItemHeight", "notFoundContent", "value", "tagRender", "style", "autoFocus", "showSearch", "showAllOption"];
+var _excluded = ["mode", "options", "dropdownRender", "onDropdownVisibleChange", "defaultValue", "onChange", "open", "defaultOpen", "prefix", "className", "popupClassName", "listHeight", "listItemHeight", "notFoundContent", "value", "tagRender", "style", "autoFocus", "showSearch", "showAllOption", "size", "status", "disabled"];
 
 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); }
 
@@ -30,9 +30,13 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 import { FoldDownFill } from '@aloudata/icons-react';
 import { Select as AntdSelect } from 'antd';
+import DisabledContext from 'antd/lib/config-provider/DisabledContext';
+import { FormItemInputContext } from 'antd/lib/form/context';
+import { getMergedStatus } from 'antd/lib/_util/statusUtils';
 import classNames from 'classnames';
 import List from 'rc-virtual-list';
-import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
+import React, { forwardRef, useContext, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
+import SizeContext from "../ConfigProvider/sizeContext";
 import Empty from "../Empty";
 import theme from "../style/themes/default/themeColor.module.less";
 import MultipleOption from "./components/MultipleOption";
@@ -116,8 +120,21 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
       _props$showSearch = props.showSearch,
       showSearch = _props$showSearch === void 0 ? false : _props$showSearch,
       showAllOption = props.showAllOption,
+      customSize = props.size,
+      customStatus = props.status,
+      customDisabled = props.disabled,
       restProps = _objectWithoutProperties(props, _excluded);
 
+  var contentSize = useContext(SizeContext);
+
+  var _React$useContext = React.useContext(FormItemInputContext),
+      contextStatus = _React$useContext.status;
+
+  var mergedStatus = getMergedStatus(contextStatus, customStatus);
+  var size = customSize || contentSize || 'middle'; // ===================== Disabled =====================
+
+  var disabled = React.useContext(DisabledContext);
+  var mergedDisabled = customDisabled !== null && customDisabled !== void 0 ? customDisabled : disabled;
   var isMultiple = mode === 'multiple';
   var innerOptions = useMemo(function () {
     if (showAllOption && isMultiple && options) {
@@ -222,7 +239,6 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
     }
 
     if (typeof value === 'undefined') {
-      console.log(newOptions, 'newOptions');
       setSelectedOptions(newOptions);
     }
 
@@ -353,14 +369,14 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
 
       return (_selectedOptions$ = selectedOptions[0]) === null || _selectedOptions$ === void 0 ? void 0 : _selectedOptions$.value;
     }
-  }, [selectedOptions]);
+  }, [selectedOptions, isMultiple]);
   useEffect(function () {
     if (prefixRef.current && prefix) {
       setPrefixWidth(prefixRef.current.offsetWidth);
     } else {
       setPrefixWidth(0);
     }
-  }, [props.size, prefix]);
+  }, [size, prefix]);
   var styleVar = {
     '--ald-select-prefix-width': "".concat(prefixWidth, "px")
   };
@@ -384,16 +400,16 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
     }
   }, [value, innerOptions, isMultiple]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames('ald-select', className, {
+    className: classNames('ald-select', className, _defineProperty({
       'ald-select-multiple': isMultiple,
       'ald-select-single': !isMultiple,
-      'ald-select-large': props.size === 'large',
-      'ald-select-small': props.size === 'small',
-      'ald-select-disabled': props.disabled,
-      'ald-select-middle': props.size !== 'large' && props.size !== 'small',
+      'ald-select-large': size === 'large',
+      'ald-select-small': size === 'small',
+      'ald-select-disabled': mergedDisabled,
+      'ald-select-middle': size !== 'large' && size !== 'small',
       'ald-select-open': typeof _open === 'boolean' ? _open : isOpen,
       'ald-select-focus': isFocus
-    }),
+    }, "ald-select-status-".concat(mergedStatus), mergedStatus)),
     spellCheck: false,
     style: Object.assign(styleVar, style)
   }, !!prefix && /*#__PURE__*/React.createElement("span", {
@@ -405,11 +421,14 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
       }
     }
   }, prefix), /*#__PURE__*/React.createElement(AntdSelect, _extends({}, restProps, {
+    // @ts-ignore
+    status: mergedStatus,
     showSearch: showSearch,
     options: innerOptions,
     mode: isMultiple ? 'multiple' : undefined,
     bordered: false,
     open: typeof _open === 'boolean' ? _open : isOpen,
+    disabled: mergedDisabled,
     maxTagCount: "responsive",
     ref: selectRef,
     tagRender: tagRender || defaultTagRender,
@@ -423,7 +442,7 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
       width: '100%'
     },
     suffixIcon: /*#__PURE__*/React.createElement(FoldDownFill, {
-      size: suffixIconSizeMap[props.size || 'middle'],
+      size: suffixIconSizeMap[size || 'middle'],
       fill: theme.NL50
     }),
     onDropdownVisibleChange: function onDropdownVisibleChange(open) {

package/dist/Select/style/index.less

@@ -30,6 +30,10 @@
   cursor: pointer;
   width: 100%;
 
+  &.ald-select-status-error {
+    border-color: @error-color;
+  }
+
   .ald-select-prefix {
     color: @NL40;
     display: inline-flex;

package/dist/Spin/index.js

@@ -7,6 +7,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 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 { Spin } from 'antd';
+import classNames from 'classnames';
 import React from 'react';
 import CustomIcon from "./CustomIcon";
 
@@ -21,7 +22,7 @@ function CustomSpin(props) {
   }
 
   return /*#__PURE__*/React.createElement(Spin, _extends({
-    className: "ald-spin",
+    className: classNames('ald-spin', props.className),
     indicator: /*#__PURE__*/React.createElement(CustomIcon, {
       size: props.size
     })