Skip to content

Instantly share code, notes, and snippets.

@dfenerski
Last active July 14, 2024 15:55
Show Gist options
  • Save dfenerski/dd7c3fac1c17423404ef9c7f79b0e27b to your computer and use it in GitHub Desktop.
Save dfenerski/dd7c3fac1c17423404ef9c7f79b0e27b to your computer and use it in GitHub Desktop.
`sap.f.AvatarGroupItem` enhanced with `badgeIcon` & `badgeTooltip` properties
import FAvatarGroupItem from 'sap/f/AvatarGroupItem';
import Avatar from 'sap/m/Avatar';
import type AvatarColor from 'sap/m/AvatarColor';
import type Event from 'sap/ui/base/Event';
import { ValueState } from 'sap/ui/core/library';
@namespace('your.namespace')
export default class AvatarGroupItem extends FAvatarGroupItem {
public static readonly metadata = {
library: 'your.namespace',
properties: {
badgeIcon: {
type: 'sap.ui.core.URI',
defaultValue: '',
},
badgeTooltip: {
type: 'string',
defaultValue: null,
},
},
};
public static readonly renderer = {};
private _oAvatar: Avatar;
// @ts-expect-error _getAvatar is untyped
public override _getAvatar(): Avatar {
if (!this._oAvatar) {
this._oAvatar = new Avatar({
src: this.getSrc(),
initials: this.getInitials(),
fallbackIcon: this.getFallbackIcon(),
backgroundColor: <AvatarColor>this.getAvatarColor(),
showBorder: true,
// @ts-expect-error _getDisplaySize is untyped
displaySize: this._getDisplaySize(),
// @ts-expect-error _getCustomDisplaySize is untyped
customDisplaySize: this._getCustomDisplaySize(),
// @ts-expect-error _getCustomFontSize is untyped
customFontSize: this._getCustomFontSize(),
badgeIcon: this.getBadgeIcon(),
badgeTooltip: this.getBadgeTooltip(),
badgeValueState: ValueState.Success,
});
// Enable badge rendering (https://github.com/SAP/openui5/blob/541177fe17f89b0194276e59cde9e1caee375095/src/sap.m/src/sap/m/AvatarRenderer.js#L151)
// And forward the press event of the avatar as avatar group item press event to the avatar group (https://github.com/SAP/openui5/blob/541177fe17f89b0194276e59cde9e1caee375095/src/sap.f/src/sap/f/AvatarGroup.js#L417)
this._oAvatar.attachPress((event: Event) => {
const parent = <any>this.getParent();
if (!parent) {
return;
}
parent.firePress(<any>{
groupType: parent.getGroupType(),
eventSource: this,
overflowButtonPressed: this === parent._oShowMoreButton,
avatarsDisplayed: parent._iAvatarsToShow,
});
});
}
return this._oAvatar;
}
public setBadgeIcon(badgeIcon: string): this {
this.setProperty('badgeIcon', badgeIcon, true);
// Forward badge icon set call to internal avatar
this._getAvatar().setBadgeIcon(badgeIcon);
return this;
}
public setBadgeTooltip(badgeTooltip: string): this {
this.setProperty('badgeTooltip', badgeTooltip, true);
// Forward badge tooltip set call to internal avatar
this._getAvatar().setBadgeTooltip(badgeTooltip);
return this;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment