Skip to content

Commit

Permalink
WIP: migrate away from Portal
Browse files Browse the repository at this point in the history
  • Loading branch information
@lourou
lourou committed Jan 7, 2025
1 parent 2b6b24b commit c00780c
Show file tree
Hide file tree
Showing 2 changed files with 75 additions and 159 deletions.
5 changes: 4 additions & 1 deletion ...-message/conversation-message-context-menu/conversation-message-context-menu-backdrop.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { BlurView } from "@/design-system/BlurView";
import { memo } from "react";
import { TouchableWithoutFeedback } from "react-native";
import { useAppTheme } from "@theme/useAppTheme";

export const MessageContextMenuBackdrop = memo(
function MessageContextMenuBackdrop({
Expand All @@ -10,8 +11,10 @@ export const MessageContextMenuBackdrop = memo(
children: React.ReactNode;
handlePressBackdrop: () => void;
}) {
const { theme } = useAppTheme();

return (
<BlurView isAbsolute>
<BlurView isAbsolute tint={theme.isDark ? "dark" : "light"}>
<TouchableWithoutFeedback onPress={handlePressBackdrop}>
{children}
</TouchableWithoutFeedback>
Expand Down
229 changes: 71 additions & 158 deletions ...versation-message/conversation-message-context-menu/conversation-message-context-menu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,13 @@ import { useRemoveReactionOnMessage } from "@/features/conversation/hooks/use-re
import { messageIsFromCurrentAccountInboxId } from "@/features/conversation/utils/message-is-from-current-user";
import { useConversationQuery } from "@/queries/useConversationQuery";
import { calculateMenuHeight } from "@design-system/ContextMenu/ContextMenu.utils";
import { Portal } from "@gorhom/portal";
import { memo, useCallback } from "react";
import { StyleSheet } from "react-native";
import { StyleSheet, Modal, View, Platform } from "react-native";
import { MessageContextMenuAboveMessageReactions } from "./conversation-message-context-menu-above-message-reactions";
import { MessageContextMenuContainer } from "./conversation-message-context-menu-container";
import { useMessageContextMenuItems } from "./conversation-message-context-menu.utils";
import { useAppTheme } from "@theme/useAppTheme";
import Animated, { FadeIn, FadeOut } from "react-native-reanimated";

export const MESSAGE_CONTEXT_MENU_SPACE_BETWEEN_ABOVE_MESSAGE_REACTIONS_AND_MESSAGE = 16;

Expand All @@ -53,6 +54,7 @@ const Content = memo(function Content(props: {
>;
}) {
const { messageContextMenuData } = props;
const { theme } = useAppTheme();

const { messageId, itemRectX, itemRectY, itemRectHeight, itemRectWidth } =
messageContextMenuData;
Expand Down Expand Up @@ -124,165 +126,76 @@ const Content = memo(function Content(props: {

return (
<>
<Portal>
<ConversationStoreProvider
topic={topic}
conversationId={conversation!.id}
<Modal
visible={true}
transparent={true}
onRequestClose={handlePressBackdrop}
animationType="fade"
statusBarTranslucent={Platform.OS === "android"}
supportedOrientations={["portrait", "landscape"]}
>
<Animated.View
entering={FadeIn.duration(200)}
exiting={FadeOut.duration(200)}
style={StyleSheet.absoluteFill}
>
<MessageContextMenuBackdrop handlePressBackdrop={handlePressBackdrop}>
<AnimatedVStack style={StyleSheet.absoluteFill}>
{!!bySender && <MessageContextMenuReactors reactors={bySender} />}
<MessageContextMenuContainer
itemRectY={itemRectY}
itemRectX={itemRectX}
itemRectHeight={itemRectHeight}
itemRectWidth={itemRectWidth}
menuHeight={menuHeight}
fromMe={fromMe}
hasReactions={hasReactions}
>
<MessageContextMenuAboveMessageReactions
topic={topic}
reactors={bySender ?? {}}
messageId={messageId}
onChooseMoreEmojis={handleChooseMoreEmojis}
onSelectReaction={handleSelectReaction}
originX={fromMe ? itemRectX + itemRectWidth : itemRectX}
originY={itemRectHeight}
/>

{/* Replace with rowGap when we refactored menu items and not using rn-paper TableView */}
<VStack
style={{
height:
MESSAGE_CONTEXT_MENU_SPACE_BETWEEN_ABOVE_MESSAGE_REACTIONS_AND_MESSAGE,
}}
/>

<MessageContextStoreProvider
message={message}
nextMessage={undefined}
previousMessage={undefined}
<ConversationStoreProvider
topic={topic}
conversationId={conversation!.id}
>
<MessageContextMenuBackdrop
handlePressBackdrop={handlePressBackdrop}
>
<AnimatedVStack style={StyleSheet.absoluteFill}>
{!!bySender && (
<MessageContextMenuReactors reactors={bySender} />
)}
<MessageContextMenuContainer
itemRectY={itemRectY}
itemRectX={itemRectX}
itemRectHeight={itemRectHeight}
itemRectWidth={itemRectWidth}
menuHeight={menuHeight}
fromMe={fromMe}
hasReactions={hasReactions}
>
{/* TODO: maybe make ConversationMessage more dumb to not need any context? */}
<ConversationMessage message={message} />
</MessageContextStoreProvider>

{/* Put back once we refactor the menu items */}
{/* <VStack style={{ height: 16 }}></VStack> */}

<MessageContextMenuItems
originX={fromMe ? itemRectX + itemRectWidth : itemRectX}
originY={itemRectHeight}
menuItems={menuItems}
/>
</MessageContextMenuContainer>
</AnimatedVStack>
</MessageContextMenuBackdrop>
</ConversationStoreProvider>
</Portal>
<MessageContextMenuAboveMessageReactions
topic={topic}
reactors={bySender ?? {}}
messageId={messageId}
onChooseMoreEmojis={handleChooseMoreEmojis}
onSelectReaction={handleSelectReaction}
originX={fromMe ? itemRectX + itemRectWidth : itemRectX}
originY={itemRectHeight}
/>

<VStack
style={{
height:
MESSAGE_CONTEXT_MENU_SPACE_BETWEEN_ABOVE_MESSAGE_REACTIONS_AND_MESSAGE,
}}
/>

<MessageContextStoreProvider
message={message}
nextMessage={undefined}
previousMessage={undefined}
>
<ConversationMessage message={message} />
</MessageContextStoreProvider>

<MessageContextMenuItems
originX={fromMe ? itemRectX + itemRectWidth : itemRectX}
originY={itemRectHeight}
menuItems={menuItems}
/>
</MessageContextMenuContainer>
</AnimatedVStack>
</MessageContextMenuBackdrop>
</ConversationStoreProvider>
</Animated.View>
</Modal>
<MessageContextMenuEmojiPicker onSelectReaction={handleSelectReaction} />
</>
);
});

/**
* Tried different approaches to implement native context menu, but it's not
* working as expected. Still missing some pieces from libraries to achieve what we want
*/

// import { MessageContextMenu } from "@/components/Chat/Message/MessageContextMenu";
// import ContextMenu from "react-native-context-menu-view";
// import * as ContextMenu from "zeego/context-menu";

{
/* <ContextMenuView
onMenuWillShow={() => {
console.log("onMenuWillShow");
}}
menuConfig={{
menuTitle: "Message Options",
menuItems: [
{
actionKey: "copy",
actionTitle: "Copy",
icon: {
type: "IMAGE_SYSTEM",
imageValue: {
systemName: "doc.on.doc",
},
},
},
{
actionKey: "delete",
actionTitle: "Delete",
menuAttributes: ["destructive"],
icon: {
type: "IMAGE_SYSTEM",
imageValue: {
systemName: "trash",
},
},
},
],
}}
auxiliaryPreviewConfig={{
transitionEntranceDelay: "RECOMMENDED",
anchorPosition: "top",
// alignmentHorizontal: "previewTrailing",
verticalAnchorPosition: "top",
// height: 600,
// preferredHeight: {
// mode: "percentRelativeToWindow",
// percent: 50,
// },
}}
previewConfig={{ previewType: "CUSTOM" }}
// renderPreview={() => (
// <BubbleContentContainer
// fromMe={fromMe}
// hasNextMessageInSeries={hasNextMessageInSeries}
// >
// <MessageText inverted={fromMe}>{textContent}</MessageText>
// </BubbleContentContainer>
// )}
isAuxiliaryPreviewEnabled={true}
renderPreview={() => (
// <VStack
// style={{
// ...debugBorder(),
// position: "absolute",
// top: 0,
// left: 0,
// width: 40,
// height: 40,
// }}
// ></VStack>
<BubbleContentContainer
fromMe={fromMe}
hasNextMessageInSeries={hasNextMessageInSeries}
>
<MessageText inverted={fromMe}>{textContent}</MessageText>
</BubbleContentContainer>
)}
renderAuxiliaryPreview={() => (
<HStack
style={{
...debugBorder(),
columnGap: 10,
padding: 10,
paddingHorizontal: 20,
backgroundColor: "white",
borderRadius: 10,
}}
>
<Text>😅</Text>
<Text>🤣</Text>
<Text>😂</Text>
<Text>🤩</Text>
<Text>🤗</Text>
<Text>🤔</Text>
</HStack>
)}
></ContextMenuView> */
}

0 comments on commit c00780c

Please sign in to comment.