Last active
July 14, 2024 15:55
-
-
Save dfenerski/dd7c3fac1c17423404ef9c7f79b0e27b to your computer and use it in GitHub Desktop.
`sap.f.AvatarGroupItem` enhanced with `badgeIcon` & `badgeTooltip` properties
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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