fixed console errors from avatar comp

raheeliftikhar5 · raheeliftikhar5 · commit 03478a551eac · 2025-02-20T00:17:14.000+05:00
diff --git a/client/packages/lowcoder/src/comps/comps/avatar.tsx b/client/packages/lowcoder/src/comps/comps/avatar.tsx
@@ -41,12 +41,12 @@ const AvatarWrapper = styled(Avatar) <AvatarProps & { $cursorPointer?: boolean,
   cursor: ${(props) => props.$cursorPointer ? 'pointer' : ''};
 `;
 
-const Wrapper = styled.div <{ iconSize: number, labelPosition: string,$style: AvatarContainerStyleType}>`
+const Wrapper = styled.div <{ $iconSize: number, $labelPosition: string,$style: AvatarContainerStyleType}>`
 display: flex;
 width: 100%;
 height: 100%;
 align-items: center;
-flex-direction: ${(props) => props.labelPosition === 'left' ? 'row' : 'row-reverse'};
+flex-direction: ${(props) => props.$labelPosition === 'left' ? 'row' : 'row-reverse'};
 ${(props) => {
     return (
       props.$style && {
@@ -57,14 +57,14 @@ ${(props) => {
   }}
 `
 
-const LabelWrapper = styled.div<{ iconSize: number, alignmentPosition: string }>`
-width: calc(100% - ${(props) => props.iconSize}px);
+const LabelWrapper = styled.div<{ $iconSize: number, $alignmentPosition: string }>`
+width: calc(100% - ${(props) => props.$iconSize}px);
 display: flex;
 padding-left: 5px;
 padding-right: 5px;
 flex-direction: column;
 justify-content: flex-end;
-align-items: ${(props) => props.alignmentPosition === 'left' ? 'flex-start' : 'flex-end'};
+align-items: ${(props) => props.$alignmentPosition === 'left' ? 'flex-start' : 'flex-end'};
 `
 const LabelSpan = styled.span<{ $style:AvatarLabelStyleType }>`
 max-width: 100%;
@@ -166,7 +166,7 @@ const AvatarView = (props: RecordConstructorToView<typeof childrenMap>) => {
       disabled={!props.enableDropdownMenu}
       dropdownRender={() => menu}
     >
-      <Wrapper iconSize={props.iconSize} labelPosition={props.labelPosition} $style={props.style}>
+      <Wrapper $iconSize={props.iconSize} $labelPosition={props.labelPosition} $style={props.style}>
         <Badge
           count={props.badgeCount.value}
           dot={props.badgeType === 'dot'}
@@ -187,7 +187,7 @@ const AvatarView = (props: RecordConstructorToView<typeof childrenMap>) => {
             {title.value}
           </AvatarWrapper>
         </Badge>
-        <LabelWrapper iconSize={props.iconSize} alignmentPosition={props.alignmentPosition}>
+        <LabelWrapper $iconSize={props.iconSize} $alignmentPosition={props.alignmentPosition}>
           <LabelSpan $style={props.labelStyle}>{props.avatarLabel.value}</LabelSpan>
           <CaptionSpan $style={props.captionStyle}>{props.avatarCatption.value}</CaptionSpan>
         </LabelWrapper>
diff --git a/client/packages/lowcoder/src/comps/comps/avatarGroup.tsx b/client/packages/lowcoder/src/comps/comps/avatarGroup.tsx
@@ -111,11 +111,11 @@ const AvatarGroupView = (props: RecordConstructorToView<typeof childrenMap> & {
       alignment={props.alignment}
     >
       {
-        <Avatar.Group maxCount={props.maxCount} size={props.avatarSize}>
+        <Avatar.Group max={{ count: props.maxCount }} size={props.avatarSize}>
           {
             props.avatars.map((item, index) => {
               return (
-                <Tooltip title={item.Tooltip}>
+                <Tooltip title={item.Tooltip} key={index}>
                   <Avatar
                     src={item.src ?? undefined}
                     icon={(item.AvatarIcon as ReactElement)?.props.value === '' || item.label.trim() !== '' ? undefined : item.AvatarIcon}

Original file line number	Diff line number	Diff line change
`@@ -111,11 +111,11 @@ const AvatarGroupView = (props: RecordConstructorToView<typeof childrenMap> & {`
`111`	`111`	`alignment={props.alignment}`
`112`	`112`	`>`
`113`	`113`	`{`
`114`		`- <Avatar.Group maxCount={props.maxCount} size={props.avatarSize}>`
	`114`	`+ <Avatar.Group max={{ count: props.maxCount }} size={props.avatarSize}>`
`115`	`115`	`{`
`116`	`116`	`props.avatars.map((item, index) => {`
`117`	`117`	`return (`
`118`		`- <Tooltip title={item.Tooltip}>`
	`118`	`+ <Tooltip title={item.Tooltip} key={index}>`
`119`	`119`	`<Avatar`
`120`	`120`	`src={item.src ?? undefined}`
`121`	`121`	`icon={(item.AvatarIcon as ReactElement)?.props.value === '' \|\| item.label.trim() !== '' ? undefined : item.AvatarIcon}`