usememos/memos
1
1
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-11-09 17:01:36 +08:00
Code Issues Projects Releases Packages Wiki Activity

chore: update emoji picker (#483)

Browse source
This commit is contained in:
boojack 2022-11-17 21:11:58 +08:00 • committed by GitHub
parent a24b885236
commit 1690566413
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 18 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
web/src/components/Editor/EmojiPicker.tsx
View file

@ -1,5 +1,5 @@
import Picker, { IEmojiPickerProps } from "emoji-picker-react";
import { useEffect } from "react";
import { useEffect, useState } from "react";
interface Props {
shouldShow: boolean;
@ -7,8 +7,15 @@ interface Props {
onShouldShowEmojiPickerChange: (status: boolean) => void;
}
interface State {
hasShown: boolean;
}
export const EmojiPicker: React.FC<Props> = (props: Props) => {
const { shouldShow, onEmojiClick, onShouldShowEmojiPickerChange } = props;
const [state, setState] = useState<State>({
hasShown: false,
});
useEffect(() => {
if (shouldShow) {
@ -25,13 +32,20 @@ export const EmojiPicker: React.FC<Props> = (props: Props) => {
capture: true,
once: true,
});
setState({
hasShown: true,
});
}
}, [shouldShow]);
return (
<div className={`emoji-picker ${shouldShow ? "" : "hidden"}`}>
<Picker onEmojiClick={onEmojiClick} disableSearchBar />
</div>
<>
{state.hasShown && (
<div className={`emoji-picker ${shouldShow ? "" : "hidden"}`}>
<Picker onEmojiClick={onEmojiClick} disableSearchBar />
</div>
)}
</>
);
};