LemmyNet/lemmy-ui
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-11-23 04:41:14 +00:00
Code Issues Projects Releases Wiki Activity

fix: Fix some emoji escape logic

Browse source
This commit is contained in:
Jay Sitter 2023-06-24 16:27:55 -04:00
parent b2ef79f5e4
commit b98939dd0f
1 changed files with 11 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/shared/components/common/emoji-picker.tsx
View file

@ -12,6 +12,10 @@ interface EmojiPickerState {
showPicker: boolean; showPicker: boolean;
} }
function closeEmojiMartOnEsc(i, event): void {
event.key === "Escape" && i.setState({ showPicker: false });
}
export class EmojiPicker extends Component<EmojiPickerProps, EmojiPickerState> { export class EmojiPicker extends Component<EmojiPickerProps, EmojiPickerState> {
private emptyState: EmojiPickerState = { private emptyState: EmojiPickerState = {
showPicker: false, showPicker: false,
@ -24,10 +28,6 @@ export class EmojiPicker extends Component<EmojiPickerProps, EmojiPickerState> {
this.handleEmojiClick = this.handleEmojiClick.bind(this); this.handleEmojiClick = this.handleEmojiClick.bind(this);
} }
closeEmojiMartOnEsc(i, event) {
event.key === "Escape" && i.setState({ showPicker: false });
}
render() { render() {
return ( return (
<span className="emoji-picker"> <span className="emoji-picker">
@ -44,7 +44,7 @@ export class EmojiPicker extends Component<EmojiPickerProps, EmojiPickerState> {
{this.state.showPicker && ( {this.state.showPicker && (
<> <>
<div className="position-relative" role="dialog"> <div className="position-relative" role="dialog">
<div className="emoji-picker-container z-3"> <div className="emoji-picker-container">
<EmojiMart <EmojiMart
onEmojiClick={this.handleEmojiClick} onEmojiClick={this.handleEmojiClick}
pickerOptions={{}} pickerOptions={{}}
@ -61,13 +61,17 @@ export class EmojiPicker extends Component<EmojiPickerProps, EmojiPickerState> {
); );
} }
componentWillUnmount() {
document.removeEventListener("keyup", e => closeEmojiMartOnEsc(this, e));
}
togglePicker(i: EmojiPicker, e: any) { togglePicker(i: EmojiPicker, e: any) {
e.preventDefault(); e.preventDefault();
i.setState({ showPicker: !i.state.showPicker }); i.setState({ showPicker: !i.state.showPicker });
i.state.showPicker i.state.showPicker
? document.addEventListener("keyup", e => i.closeEmojiMartOnEsc(i, e)) ? document.addEventListener("keyup", e => closeEmojiMartOnEsc(i, e))
: document.removeEventListener("keyup", e => i.closeEmojiMartOnEsc(i, e)); : document.removeEventListener("keyup", e => closeEmojiMartOnEsc(i, e));
} }
handleEmojiClick(e: any) { handleEmojiClick(e: any) {