[Avatar] Allow the customization of how the "+x" is calculated

[Berhart]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

At the moment AvatarGroup solely relies on the amount of Avatar children to internally calculate how many Avatars are left so that it is displayed on the "+X" Avatar.

The AvatarGroup component should expose an API that allows to "override" said calculation by ignoring the amount of children and, instead, consider a provided total amount.

Examples 🌈

Current implementation (docs example):

export default function GroupAvatars() {
  return (
    <AvatarGroup max={4}>
      <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
      <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
      <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
      <Avatar alt="Agnes Walker" src="/static/images/avatar/4.jpg" />
      <Avatar alt="Trevor Henderson" src="/static/images/avatar/5.jpg" />
    </AvatarGroup>
  );
}

Suggested implementation:

export default function GroupAvatars() {
  return (
    <AvatarGroup max={4} total={5}>
      <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
      <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
      <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
    </AvatarGroup>
  );
}

Motivation 🔦

Use case:

• Huge paginated list of N users fetched from the backend server
• Show said list as an AvatarGroup but only the first 3 should be shown and the remaining ones should be displayed as "+N-3"
• Backend server also exposes the total number of users (N) in the db

Problem:

• It's unfeasible to ask for all the users at once to fulfill the requirement of the AvatarGroup since it needs N Avatars as children to calculate the "+x"

[michaldudak]

@Berhart it's a sensible request. Would you be willing to work on this feature?

[Berhart]

@michaldudak Sure! Whenever possible I'll try to come up with a solution.

[eduardomcv]

@Berhart do you mind if I work on this? Or have you already started?

[Berhart]

@eduardomcv I don't! I haven't started yet so tyvm for your time and effort!

[siriwatknp]

I doubt that the new prop total won't help much. I guess you can just array.slice(0, total)?

https://codesandbox.io/s/mui-issue-latest-forked-rg5zw?file=/src/Demo.tsx

As you mentioned, the use case is the data from the server so I assume that you have to write .map. Is this sufficient for your use case?

export default function GroupAvatars({ data }) {
  const total = 5;
  return (
    <AvatarGroup max={4}>
      {data.people.slice(0, total).map(src => {
          return <Avatar key={src} alt="Remy Sharp" src={src} />
      })}
    </AvatarGroup>
  );
}

https://codesandbox.io/s/mui-issue-latest-forked-rg5zw?file=/src/Demo.tsx

[eduardomcv]

No, the use case isn't just limiting the avatars. Let's say there is a list of 100+ users (or any kind of paginated list). Currently, the AvatarGroup relies on children.length, so in order to calculate the "+x" we would have to either:

• Request the whole list from the server and map it to children
• Generate a fake list of children, based on the total count provided by the server

Both could be avoided by providing the developer with an option to override the internal children.length calculation.

[siriwatknp]

No, the use case isn't just limiting the avatars. Let's say there is a list of 100+ users (or any kind of paginated list). Currently, the AvatarGroup relies on children.length, so in order to calculate the "+x" we would have to either:

• Request the whole list from the server and map it to children
• Generate a fake list of children, based on the total count provided by the server

Both could be avoided by providing the developer with an option to override the internal children.length calculation.

Got it, now it makes sense. The server can send 2 users and the total as a number, let's say 30. On the front end, you would like to show something like (person 1)(person 2)(+28).

[eduardomcv]

Got it, now it makes sense. The server can send 2 users and the total as a number, let's say 30. On the front end, you would like to show something like (person 1)(person 2)(+28).

Yep, exactly!