in packages/roosterjs-react-emoji/lib/plugins/EmojiPlugin.tsx [332:366]
private _getCallout(): JSX.Element {
const { calloutClassName, emojiPaneProps = {} } = this.options;
const cursorRect = this._editor.getCursorRect();
const point = {
x: cursorRect.left,
y: (cursorRect.top + cursorRect.bottom) / 2
};
const gap = (cursorRect.bottom - cursorRect.top) / 2 + 5;
return (
<Callout
className={calloutClassName}
target={point}
directionalHint={DirectionalHint.bottomAutoEdge}
isBeakVisible={false}
gapSpace={gap}
onDismiss={this._calloutOnDismissInternal}
ref={this._calloutRef}
>
<EmojiPane
{...emojiPaneProps}
ref={this._paneRef}
onSelect={this._onSelectFromPane}
strings={this._strings || {}}
onLayoutChanged={this._refreshCalloutDebounced}
onModeChanged={this._onModeChanged}
navBarProps={emojiPaneProps.navBarProps}
statusBarProps={emojiPaneProps.statusBarProps}
searchDisabled={!this._strings || emojiPaneProps.searchDisabled}
hideStatusBar={!this._strings}
/>
</Callout>
);
}