From 13c9c79aeec77edc33b1a926843b005c14acccc7 Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Wed, 2 Oct 2024 22:21:59 +0300 Subject: move files around (#5576) --- .../Messages/components/MessageInput.web.tsx | 238 +++++++++++++++++++++ 1 file changed, 238 insertions(+) create mode 100644 src/screens/Messages/components/MessageInput.web.tsx (limited to 'src/screens/Messages/components/MessageInput.web.tsx') diff --git a/src/screens/Messages/components/MessageInput.web.tsx b/src/screens/Messages/components/MessageInput.web.tsx new file mode 100644 index 000000000..b15cd2492 --- /dev/null +++ b/src/screens/Messages/components/MessageInput.web.tsx @@ -0,0 +1,238 @@ +import React from 'react' +import {Pressable, StyleSheet, View} from 'react-native' +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import Graphemer from 'graphemer' +import TextareaAutosize from 'react-textarea-autosize' + +import {isSafari, isTouchDevice} from '#/lib/browser' +import {MAX_DM_GRAPHEME_LENGTH} from '#/lib/constants' +import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' +import { + useMessageDraft, + useSaveMessageDraft, +} from '#/state/messages/message-drafts' +import {textInputWebEmitter} from '#/view/com/composer/text-input/textInputWebEmitter' +import { + Emoji, + EmojiPickerPosition, +} from '#/view/com/composer/text-input/web/EmojiPicker.web' +import * as Toast from '#/view/com/util/Toast' +import {atoms as a, useTheme} from '#/alf' +import {Button} from '#/components/Button' +import {useSharedInputStyles} from '#/components/forms/TextField' +import {EmojiArc_Stroke2_Corner0_Rounded as EmojiSmile} from '#/components/icons/Emoji' +import {PaperPlane_Stroke2_Corner0_Rounded as PaperPlane} from '#/components/icons/PaperPlane' +import {useExtractEmbedFromFacets} from './MessageInputEmbed' + +export function MessageInput({ + onSendMessage, + hasEmbed, + setEmbed, + children, + openEmojiPicker, +}: { + onSendMessage: (message: string) => void + hasEmbed: boolean + setEmbed: (embedUrl: string | undefined) => void + children?: React.ReactNode + openEmojiPicker?: (pos: EmojiPickerPosition) => void +}) { + const {isTabletOrDesktop} = useWebMediaQueries() + const {_} = useLingui() + const t = useTheme() + const {getDraft, clearDraft} = useMessageDraft() + const [message, setMessage] = React.useState(getDraft) + + const inputStyles = useSharedInputStyles() + const isComposing = React.useRef(false) + const [isFocused, setIsFocused] = React.useState(false) + const [isHovered, setIsHovered] = React.useState(false) + const [textAreaHeight, setTextAreaHeight] = React.useState(38) + const textAreaRef = React.useRef(null) + + const onSubmit = React.useCallback(() => { + if (!hasEmbed && message.trim() === '') { + return + } + if (new Graphemer().countGraphemes(message) > MAX_DM_GRAPHEME_LENGTH) { + Toast.show(_(msg`Message is too long`), 'xmark') + return + } + clearDraft() + onSendMessage(message) + setMessage('') + setEmbed(undefined) + }, [message, onSendMessage, _, clearDraft, hasEmbed, setEmbed]) + + const onKeyDown = React.useCallback( + (e: React.KeyboardEvent) => { + // Don't submit the form when the Japanese or any other IME is composing + if (isComposing.current) return + + // see https://github.com/bluesky-social/social-app/issues/4178 + // see https://www.stum.de/2016/06/24/handling-ime-events-in-javascript/ + // see https://lists.w3.org/Archives/Public/www-dom/2010JulSep/att-0182/keyCode-spec.html + // + // On Safari, the final keydown event to dismiss the IME - which is the enter key - is also "Enter" below. + // Obviously, this causes problems because the final dismissal should _not_ submit the text, but should just + // stop the IME editing. This is the behavior of Chrome and Firefox, but not Safari. + // + // Keycode is deprecated, however the alternative seems to only be to compare the timestamp from the + // onCompositionEnd event to the timestamp of the keydown event, which is not reliable. For example, this hack + // uses that method: https://github.com/ProseMirror/prosemirror-view/pull/44. However, from my 500ms resulted in + // far too long of a delay, and a subsequent enter press would often just end up doing nothing. A shorter time + // frame was also not great, since it was too short to be reliable (i.e. an older system might have a larger + // time gap between the two events firing. + if (isSafari && e.key === 'Enter' && e.keyCode === 229) { + return + } + + if (e.key === 'Enter') { + if (e.shiftKey) return + e.preventDefault() + onSubmit() + } + }, + [onSubmit], + ) + + const onChange = React.useCallback( + (e: React.ChangeEvent) => { + setMessage(e.target.value) + }, + [], + ) + + const onEmojiInserted = React.useCallback( + (emoji: Emoji) => { + const position = textAreaRef.current?.selectionStart ?? 0 + setMessage( + message => + message.slice(0, position) + emoji.native + message.slice(position), + ) + }, + [setMessage], + ) + React.useEffect(() => { + textInputWebEmitter.addListener('emoji-inserted', onEmojiInserted) + return () => { + textInputWebEmitter.removeListener('emoji-inserted', onEmojiInserted) + } + }, [onEmojiInserted]) + + useSaveMessageDraft(message) + useExtractEmbedFromFacets(message, setEmbed) + + return ( + + {children} + setIsHovered(true)} + onMouseLeave={() => setIsHovered(false)}> + + setIsFocused(true)} + onBlur={() => setIsFocused(false)} + onCompositionStart={() => { + isComposing.current = true + }} + onCompositionEnd={() => { + isComposing.current = false + }} + onHeightChange={height => setTextAreaHeight(height)} + onChange={onChange} + // On mobile web phones, we want to keep the same behavior as the native app. Do not submit the message + // in these cases. + onKeyDown={isTouchDevice && isTabletOrDesktop ? undefined : onKeyDown} + /> + + + + + + ) +} -- cgit 1.4.1