in packages/roosterjs-react-emoji/lib/components/EmojiStatusBar.tsx [16:53]
public render() {
const { emoji, strings, className, hasResult } = this.props;
if (!hasResult) {
const noResultDescription = strings["emjDNoSuggetions"];
return (
<div className={css(StatusBarStyles.statusBar, className)}>
<div style={{ display: "none" }} aria-live="polite">
{noResultDescription}
</div>
<div className={StatusBarStyles.statusBarNoResultDetailsContainer}>
<TooltipHost content={noResultDescription} overflowMode={TooltipOverflowMode.Parent}>
<span role="alert">{noResultDescription}</span>
</TooltipHost>
</div>
</div>
);
}
const icon = emoji ? emoji.codePoint : "";
const description = emoji ? strings[emoji.description] : "";
return (
<div className={css(StatusBarStyles.statusBar, className)}>
<i className={StatusBarStyles.statusBarIcon} role="presentation" aria-hidden="true">
{icon}
</i>
<div className={StatusBarStyles.statusBarDetailsContainer}>
<div className={StatusBarStyles.statusBarDetails}>
<TooltipHost content={description} overflowMode={TooltipOverflowMode.Parent}>
{description}
</TooltipHost>
</div>
</div>
</div>
);
}