@lobehub/ui/es/Avatar/AvatarGroup/index.mjs.map

Lobe UI is an open-source UI component library for building AIGC web apps

{"version":3,"file":"index.mjs","names":["Flexbox","Avatar"],"sources":["../../../src/Avatar/AvatarGroup/index.tsx"],"sourcesContent":["'use client';\n\nimport { cssVar, cx } from 'antd-style';\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport Avatar from '../Avatar';\nimport type { AvatarGroupProps } from '../type';\nimport { styles } from './style';\n\nconst AvatarGroup = memo<AvatarGroupProps>(\n  ({\n    items,\n    max,\n    gap,\n    variant = 'borderless',\n    bordered,\n    shadow,\n    size = 48,\n    background,\n    animation,\n    draggable,\n    classNames,\n    shape,\n    styles: customStyles,\n    onClick,\n    ref,\n    zIndexReverse,\n    ...rest\n  }) => {\n    const avatars = max ? items.slice(0, max) : items;\n    const restAvatars = items.slice(max, items.length);\n    const gapValue = gap ?? Math.floor(-size / 4);\n\n    const avatarProps = {\n      animation,\n      background,\n      bordered,\n      draggable,\n      shadow,\n      shape,\n      size,\n      variant,\n    };\n\n    return (\n      <Flexbox\n        gap={gap}\n        horizontal\n        ref={ref}\n        style={{\n          position: 'relative',\n        }}\n        {...rest}\n      >\n        {avatars.map((avatar, index) => {\n          const {\n            key,\n            style: avatarStyle,\n            className: avatarClassName,\n            ...restAvatarProps\n          } = avatar;\n          return (\n            <Avatar\n              className={cx(classNames?.avatar, avatarClassName, styles.avatar)}\n              key={key}\n              onClick={() => onClick?.({ item: avatar, key })}\n              style={{\n                marginLeft: index === 0 ? 0 : gapValue,\n                zIndex: zIndexReverse ? items.length - index : index,\n                ...customStyles?.avatar,\n                ...avatarStyle,\n              }}\n              {...avatarProps}\n              {...restAvatarProps}\n            />\n          );\n        })}\n        {max && restAvatars.length > 0 && (\n          <Avatar\n            {...avatarProps}\n            avatar={`+${restAvatars.length}`}\n            background={cssVar.colorText}\n            className={cx(styles.avatar, styles.count, classNames?.count)}\n            sliceText={false}\n            style={{\n              marginLeft: gapValue,\n              zIndex: zIndexReverse ? 0 : avatars.length,\n              ...customStyles?.count,\n            }}\n          />\n        )}\n      </Flexbox>\n    );\n  },\n);\n\nAvatarGroup.displayName = 'AvatarGroup';\n\nexport default AvatarGroup;\n"],"mappings":";;;;;;;;;;AAWA,MAAM,cAAc,MACjB,EACC,OACA,KACA,KACA,UAAU,cACV,UACA,QACA,OAAO,IACP,YACA,WACA,WACA,YACA,OACA,QAAQ,cACR,SACA,KACA,eACA,GAAG,WACC;CACJ,MAAM,UAAU,MAAM,MAAM,MAAM,GAAG,IAAI,GAAG;CAC5C,MAAM,cAAc,MAAM,MAAM,KAAK,MAAM,OAAO;CAClD,MAAM,WAAW,OAAO,KAAK,MAAM,CAAC,OAAO,EAAE;CAE7C,MAAM,cAAc;EAClB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;AAED,QACE,qBAACA;EACM;EACL;EACK;EACL,OAAO,EACL,UAAU,YACX;EACD,GAAI;aAEH,QAAQ,KAAK,QAAQ,UAAU;GAC9B,MAAM,EACJ,KACA,OAAO,aACP,WAAW,iBACX,GAAG,oBACD;AACJ,UACE,oBAACC;IACC,WAAW,GAAG,YAAY,QAAQ,iBAAiB,OAAO,OAAO;IAEjE,eAAe,UAAU;KAAE,MAAM;KAAQ;KAAK,CAAC;IAC/C,OAAO;KACL,YAAY,UAAU,IAAI,IAAI;KAC9B,QAAQ,gBAAgB,MAAM,SAAS,QAAQ;KAC/C,GAAG,cAAc;KACjB,GAAG;KACJ;IACD,GAAI;IACJ,GAAI;MATC,IAUL;IAEJ,EACD,OAAO,YAAY,SAAS,KAC3B,oBAACA;GACC,GAAI;GACJ,QAAQ,IAAI,YAAY;GACxB,YAAY,OAAO;GACnB,WAAW,GAAG,OAAO,QAAQ,OAAO,OAAO,YAAY,MAAM;GAC7D,WAAW;GACX,OAAO;IACL,YAAY;IACZ,QAAQ,gBAAgB,IAAI,QAAQ;IACpC,GAAG,cAAc;IAClB;IACD;GAEI;EAGf;AAED,YAAY,cAAc;AAE1B,0BAAe"}