AvatarGroup.js 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. "use client";
  2. import * as React from 'react';
  3. import classNames from 'classnames';
  4. import toArray from "rc-util/es/Children/toArray";
  5. import { cloneElement } from '../_util/reactNode';
  6. import { devUseWarning } from '../_util/warning';
  7. import { ConfigContext } from '../config-provider';
  8. import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
  9. import Popover from '../popover';
  10. import Avatar from './Avatar';
  11. import AvatarContext from './AvatarContext';
  12. import useStyle from './style';
  13. const AvatarContextProvider = props => {
  14. const {
  15. size,
  16. shape
  17. } = React.useContext(AvatarContext);
  18. const avatarContextValue = React.useMemo(() => ({
  19. size: props.size || size,
  20. shape: props.shape || shape
  21. }), [props.size, props.shape, size, shape]);
  22. return /*#__PURE__*/React.createElement(AvatarContext.Provider, {
  23. value: avatarContextValue
  24. }, props.children);
  25. };
  26. const AvatarGroup = props => {
  27. var _a, _b, _c, _d;
  28. const {
  29. getPrefixCls,
  30. direction
  31. } = React.useContext(ConfigContext);
  32. const {
  33. prefixCls: customizePrefixCls,
  34. className,
  35. rootClassName,
  36. style,
  37. maxCount,
  38. maxStyle,
  39. size,
  40. shape,
  41. maxPopoverPlacement,
  42. maxPopoverTrigger,
  43. children,
  44. max
  45. } = props;
  46. if (process.env.NODE_ENV !== 'production') {
  47. const warning = devUseWarning('Avatar.Group');
  48. [['maxCount', 'max={{ count: number }}'], ['maxStyle', 'max={{ style: CSSProperties }}'], ['maxPopoverPlacement', 'max={{ popover: PopoverProps }}'], ['maxPopoverTrigger', 'max={{ popover: PopoverProps }}']].forEach(([deprecatedName, newName]) => {
  49. warning.deprecated(!(deprecatedName in props), deprecatedName, newName);
  50. });
  51. }
  52. const prefixCls = getPrefixCls('avatar', customizePrefixCls);
  53. const groupPrefixCls = `${prefixCls}-group`;
  54. const rootCls = useCSSVarCls(prefixCls);
  55. const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
  56. const cls = classNames(groupPrefixCls, {
  57. [`${groupPrefixCls}-rtl`]: direction === 'rtl'
  58. }, cssVarCls, rootCls, className, rootClassName, hashId);
  59. const childrenWithProps = toArray(children).map((child, index) => cloneElement(child, {
  60. // eslint-disable-next-line react/no-array-index-key
  61. key: `avatar-key-${index}`
  62. }));
  63. const mergeCount = (max === null || max === void 0 ? void 0 : max.count) || maxCount;
  64. const numOfChildren = childrenWithProps.length;
  65. if (mergeCount && mergeCount < numOfChildren) {
  66. const childrenShow = childrenWithProps.slice(0, mergeCount);
  67. const childrenHidden = childrenWithProps.slice(mergeCount, numOfChildren);
  68. const mergeStyle = (max === null || max === void 0 ? void 0 : max.style) || maxStyle;
  69. const mergePopoverTrigger = ((_a = max === null || max === void 0 ? void 0 : max.popover) === null || _a === void 0 ? void 0 : _a.trigger) || maxPopoverTrigger || 'hover';
  70. const mergePopoverPlacement = ((_b = max === null || max === void 0 ? void 0 : max.popover) === null || _b === void 0 ? void 0 : _b.placement) || maxPopoverPlacement || 'top';
  71. const mergeProps = Object.assign(Object.assign({
  72. content: childrenHidden
  73. }, max === null || max === void 0 ? void 0 : max.popover), {
  74. classNames: {
  75. root: classNames(`${groupPrefixCls}-popover`, (_d = (_c = max === null || max === void 0 ? void 0 : max.popover) === null || _c === void 0 ? void 0 : _c.classNames) === null || _d === void 0 ? void 0 : _d.root)
  76. },
  77. placement: mergePopoverPlacement,
  78. trigger: mergePopoverTrigger
  79. });
  80. childrenShow.push(/*#__PURE__*/React.createElement(Popover, Object.assign({
  81. key: "avatar-popover-key",
  82. destroyOnHidden: true
  83. }, mergeProps), /*#__PURE__*/React.createElement(Avatar, {
  84. style: mergeStyle
  85. }, `+${numOfChildren - mergeCount}`)));
  86. return wrapCSSVar(/*#__PURE__*/React.createElement(AvatarContextProvider, {
  87. shape: shape,
  88. size: size
  89. }, /*#__PURE__*/React.createElement("div", {
  90. className: cls,
  91. style: style
  92. }, childrenShow)));
  93. }
  94. return wrapCSSVar(/*#__PURE__*/React.createElement(AvatarContextProvider, {
  95. shape: shape,
  96. size: size
  97. }, /*#__PURE__*/React.createElement("div", {
  98. className: cls,
  99. style: style
  100. }, childrenWithProps)));
  101. };
  102. export default AvatarGroup;