From eeb30b54924e3a12c6424f6960b78941a860b63b Mon Sep 17 00:00:00 2001 From: ewwwwwwww Date: Sat, 25 Jun 2022 20:55:17 -0700 Subject: [PATCH] migrated emoji picker to typescript --- .../components/emoji_picker_dropdown.js | Bin 7837 -> 0 bytes .../components/emoji_picker_dropdown.tsx | 188 ++++++++++++++++++ .../{emoji_picker.js => emoji_picker.tsx} | Bin 521 -> 580 bytes app/styles/emoji_picker.scss | 1 - types/emoji-mart/index.d.ts | 26 +++ 5 files changed, 214 insertions(+), 1 deletion(-) delete mode 100644 app/soapbox/features/compose/components/emoji_picker_dropdown.js create mode 100644 app/soapbox/features/compose/components/emoji_picker_dropdown.tsx rename app/soapbox/features/emoji/{emoji_picker.js => emoji_picker.tsx} (63%) create mode 100644 types/emoji-mart/index.d.ts diff --git a/app/soapbox/features/compose/components/emoji_picker_dropdown.js b/app/soapbox/features/compose/components/emoji_picker_dropdown.js deleted file mode 100644 index bec0261aac273ac220e5cce5eca223f92535fbf1..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 7837 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 void, + onSkinTone: () => void, + skinTone: () => void, +} + +const listenerOptions = supportsPassiveEvents ? { passive: true } : false; + +const EmojiPickerDropdown: React.FC = ({ custom_emojis, frequentlyUsedEmojis, onPickEmoji, onSkinTone, skinTone }) => { + const intl = useIntl(); + const settings = useSettings(); + const title = intl.formatMessage(messages.emoji); + const userTheme = settings.get('themeMode'); + const theme = (userTheme === 'dark' || userTheme === 'light') ? userTheme : 'auto'; + + const [popperElement, setPopperElement] = useState(null); + const [referenceElement, setReferenceElement] = useState(null); + const [containerElement, setContainerElement] = useState(null); + + const [visible, setVisible] = useState(false); + const [loading, setLoading] = useState(false); + + const { styles, attributes } = usePopper(referenceElement, popperElement, { + placement: 'top-start', + }); + + const handleToggle = () => { + setVisible(!visible); + }; + + const handleHide = () => { + setVisible(false); + }; + + const handleDocClick = (e: any) => { + if (!containerElement?.contains(e.target) && !popperElement?.contains(e.target)) { + setVisible(false); + } + } + + const handlePick = (emoji: any) => { + if (!emoji.native) { + emoji.native = emoji.shortcodes; + } + + setVisible(false); + onPickEmoji(emoji); + } + + const getI18n = () => { + return { + search: intl.formatMessage(messages.emoji_search), + notfound: intl.formatMessage(messages.emoji_not_found), + categories: { + search: intl.formatMessage(messages.search_results), + recent: intl.formatMessage(messages.recent), + people: intl.formatMessage(messages.people), + nature: intl.formatMessage(messages.nature), + foods: intl.formatMessage(messages.food), + activity: intl.formatMessage(messages.activity), + places: intl.formatMessage(messages.travel), + objects: intl.formatMessage(messages.objects), + symbols: intl.formatMessage(messages.symbols), + flags: intl.formatMessage(messages.flags), + custom: intl.formatMessage(messages.custom), + }, + }; + }; + + useEffect(() => { + document.addEventListener('click', handleDocClick, false); + document.addEventListener('touchend', handleDocClick, listenerOptions); + + return function cleanup() { + document.removeEventListener('click', handleDocClick); + document.removeEventListener('touchend', handleDocClick); + } + }); + + useEffect(() => { + if (!EmojiPicker) { + setLoading(true); + + EmojiPickerAsync().then(EmojiMart => { + EmojiPicker = EmojiMart.Picker; + + setLoading(false); + }).catch(() => { + setLoading(false); + }); + } + }, [visible]); + + let Popup; + + if (loading) { + Popup = () =>
; + } else { + Popup = () =>
+ +
+ } + + return ( +
+ + + {createPortal( +
+ {visible && ()} +
, + document.body + )} +
+ ); +}; + +export default EmojiPickerDropdown; diff --git a/app/soapbox/features/emoji/emoji_picker.js b/app/soapbox/features/emoji/emoji_picker.tsx similarity index 63% rename from app/soapbox/features/emoji/emoji_picker.js rename to app/soapbox/features/emoji/emoji_picker.tsx index 4dda1de0794c913cd698ae908eb041f0cf001b50..691af4a13771b388e1f8e29824462483b67e2d08 100644 GIT binary patch delta 170 zcmeBVIl?kQ$w|LBwWL_z&_utaJhP-EwMZ|kI6qIFD>Jtszo&&8EinwMOXnV$!h(c^IsTBqJMI{O;scDI&IVB2drFqFEnfZAN0h!6!sYMzE mMfnBAnhMoi3JS^jdBr6PMX6~DwhE=isX?h}8k3hXb^-vk+Z_7< diff --git a/app/styles/emoji_picker.scss b/app/styles/emoji_picker.scss index 7bef34d271..0b94fcfb7d 100644 --- a/app/styles/emoji_picker.scss +++ b/app/styles/emoji_picker.scss @@ -1,4 +1,3 @@ -.emoji-mart, .emoji-mart * { box-sizing: border-box; line-height: 1.15; diff --git a/types/emoji-mart/index.d.ts b/types/emoji-mart/index.d.ts new file mode 100644 index 0000000000..2f0daf1ab1 --- /dev/null +++ b/types/emoji-mart/index.d.ts @@ -0,0 +1,26 @@ +declare module 'emoji-mart' { + export type PickerProps = { + custom?: { emojis: any[] }[], + set?: string, + title?: string, + theme?: string, + onEmojiSelect?: any, + recent?: any, + skin?: any, + perLine?: number, + emojiSize?: number, + emojiButtonSize?: number, + navPosition?: string, + set?: string, + theme?: string, + autoFocus?: boolean, + i18n?: any, + } + + export class Picker { + + constructor(props: PickerProps); + + } + +}