usememos/memos
1
1
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-11-10 01:10:52 +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 Picker, { IEmojiPickerProps } from "emoji-picker-react";
import { useEffect } from "react"; import { useEffect, useState } from "react";
interface Props { interface Props {
shouldShow: boolean; shouldShow: boolean;
@ -7,8 +7,15 @@ interface Props {
onShouldShowEmojiPickerChange: (status: boolean) => void; onShouldShowEmojiPickerChange: (status: boolean) => void;
} }
interface State {
hasShown: boolean;
}
export const EmojiPicker: React.FC<Props> = (props: Props) => { export const EmojiPicker: React.FC<Props> = (props: Props) => {
const { shouldShow, onEmojiClick, onShouldShowEmojiPickerChange } = props; const { shouldShow, onEmojiClick, onShouldShowEmojiPickerChange } = props;
const [state, setState] = useState<State>({
hasShown: false,
});
useEffect(() => { useEffect(() => {
if (shouldShow) { if (shouldShow) {
@ -25,13 +32,20 @@ export const EmojiPicker: React.FC<Props> = (props: Props) => {
capture: true, capture: true,
once: true, once: true,
}); });
setState({
hasShown: true,
});
} }
}, [shouldShow]); }, [shouldShow]);
return ( return (
<div className={`emoji-picker ${shouldShow ? "" : "hidden"}`}> <>
<Picker onEmojiClick={onEmojiClick} disableSearchBar /> {state.hasShown && (
</div> <div className={`emoji-picker ${shouldShow ? "" : "hidden"}`}>
<Picker onEmojiClick={onEmojiClick} disableSearchBar />
</div>
)}
</>
); );
}; };