diff --git a/native/chat/inner-text-message.react.js b/native/chat/inner-text-message.react.js --- a/native/chat/inner-text-message.react.js +++ b/native/chat/inner-text-message.react.js @@ -13,6 +13,7 @@ import { useColors, colors } from '../themes/colors'; import type { ChatTextMessageInfoItemWithHeight } from '../types/chat-types'; import { useComposedMessageMaxWidth } from './composed-message-width'; +import { MessageContext } from './message-context.react'; import { MessageListContext } from './message-list-types'; import { allCorners, @@ -101,6 +102,10 @@ return [styles.text, textStyle]; }, [darkColor]); + const contextValue = { + messageID: item.messageInfo.id ?? '', + }; + const message = ( @@ -111,9 +116,11 @@ style={[styles.message, cornerStyle]} animatedStyle={messageStyle} > - - {text} - + + + {text} + + diff --git a/native/markdown/markdown-context.js b/native/markdown/markdown-context.js --- a/native/markdown/markdown-context.js +++ b/native/markdown/markdown-context.js @@ -9,6 +9,7 @@ +linkModalActive: { [key: string]: boolean }, +setLinkPressActive: SetState<{ [key: string]: boolean }>, +linkPressActive: { [key: string]: boolean }, + +setSpoilerRevealed: SetState<{ [key: string]: { [key: number]: boolean } }>, +spoilerRevealed: { [key: string]: { [key: number]: boolean } }, +setSpoilerPressActive: SetState, diff --git a/native/markdown/markdown-spoiler.react.js b/native/markdown/markdown-spoiler.react.js --- a/native/markdown/markdown-spoiler.react.js +++ b/native/markdown/markdown-spoiler.react.js @@ -20,47 +20,58 @@ const messageContext = React.useContext(MessageContext); const styles = useStyles(unboundStyles); - const [styleBasedOnState, setStyleBasedOnState] = React.useState( - styles.spoilerHidden, - ); - const { messageID } = messageContext; const { text, identifier } = props; + const castedIdentifier = identifier ? parseInt(identifier) : identifier; + const setSpoilerRevealed = markdownContext?.setSpoilerRevealed; const spoilerRevealed = markdownContext?.spoilerRevealed; const setSpoilerPressActive = markdownContext?.setSpoilerPressActive; + const styleBasedOnSpoilerState = React.useMemo(() => { + return castedIdentifier && spoilerRevealed?.[messageID]?.[castedIdentifier] + ? null + : styles.spoilerHidden; + }, [castedIdentifier, spoilerRevealed, messageID, styles.spoilerHidden]); + const onSpoilerClick = React.useCallback(() => { - if (styleBasedOnState === null) { + if (styleBasedOnSpoilerState === null) { setSpoilerPressActive && setSpoilerPressActive(false); return; } - if (spoilerRevealed && setSpoilerRevealed && messageID && identifier) { + if ( + spoilerRevealed && + setSpoilerRevealed && + messageID && + castedIdentifier + ) { setSpoilerRevealed({ ...spoilerRevealed, - [messageID]: { ...spoilerRevealed[messageID], [identifier]: true }, + [messageID]: { + ...spoilerRevealed[messageID], + [castedIdentifier]: true, + }, }); } setSpoilerPressActive && setSpoilerPressActive(true); - setStyleBasedOnState(null); }, [ + styleBasedOnSpoilerState, setSpoilerPressActive, spoilerRevealed, setSpoilerRevealed, messageID, - identifier, - styleBasedOnState, + castedIdentifier, ]); const memoizedSpoiler = React.useMemo(() => { return ( - + {text} ); - }, [onSpoilerClick, styleBasedOnState, text]); + }, [onSpoilerClick, styleBasedOnSpoilerState, text]); return memoizedSpoiler; }