ant-design/ant-design

Avatar groups should only display the n overflow element when n>1, otherwise use the space to display the final item

オープン

#31,233 opened on 2021/07/01

 (2 件のコメント) (1 件のリアクション) (0 人の担当者)TypeScript (54,612 件のフォーク)batch import
Inactivehelp wanted

Repository metrics

Stars
 (98,031 個のスター)
PR merge metrics
 (平均マージ 3d 4h) (30d で 248 merged PRs)

説明

  • [X ] I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

Avatar groups should only display the n overflow element when n>1, otherwise use the space to display the final item. The current behavior is to display a number of item specified by maxCount, plus an additional item with the n value when the number of children exceeds max count.

What does the proposed API look like?

Not sure how to express this idea concisely in the prop name, but backwards compatibility could be maintained by adding a boolean prop to determine whether to follow a new pattern in which the final item is either put in the max position if it is the last item, or that position is used to display the count of remaining items

Current behavior is like

maxCount = 3
(A)
(A)(B)
(A)(B)(C)
(A)(B)(C)( 1) <-- Note that we're not only displaying more than the user has asked for, and the last position is used inefficiently.
(A)(B)(C)( 2)
...

Proposed behavior with overFlowInFinal === true:
maxCount = 3
(A)
(A)(B)
(A)(B)(C) <-- We limit the total number of elements to the maxCount and correctly display the final item in slot 3
(A)(B)( 2)
...

Props would look like this:

export interface GroupProps {
  className?: string;
  children?: React.ReactNode;
  style?: React.CSSProperties;
  prefixCls?: string;
  maxCount?: number;
  overflowInFinal?: boolean; // <-- Add this prop
  maxStyle?: React.CSSProperties;
  maxPopoverPlacement?: 'top' | 'bottom';
  /*
   * Size of avatar, options: `large`, `small`, `default`
   * or a custom number size
   * */
  size?: AvatarSize;
}

コントリビューターガイド