Page MenuHomePhabricator
Differential D7792

[native] Don’t display edit mode when user changes thread
ClosedPublic
Actions

Authored by • kuba on May 11 2023, 2:53 AM.
Tags
None
Referenced Files
Unknown Object (File)
Wed, Apr 9, 1:10 AM
Unknown Object (File)
Tue, Apr 8, 11:12 PM
Unknown Object (File)
Tue, Apr 8, 11:06 PM
Unknown Object (File)
Mar 18 2025, 1:53 AM
Unknown Object (File)
Mar 15 2025, 5:14 PM
Unknown Object (File)
Mar 15 2025, 2:04 AM
Unknown Object (File)
Mar 13 2025, 9:03 PM
Unknown Object (File)
Mar 13 2025, 9:03 PM
View All Files
Subscribers
atul
tomek

Details

Reviewers
ashoat
inka
michal
Commits
rCOMM39c9b031b3ed: [native] Don’t display edit mode when user changes thread
Summary

When user enters the sidebar the editing box should not be visible anymore.

Test Plan

Run the app. Enter edit mode. Enter sidebar. The box and highlight is not visible.

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Revision Contents
Changeset List

PathSize
native/
chat/
4 lines
6 lines

Diff 26790

View Options

native/chat/chat-input-bar.react.js

// @flow // @flow
import Icon from '@expo/vector-icons/Feather.js'; import Icon from '@expo/vector-icons/Feather.js';
import invariant from 'invariant'; import invariant from 'invariant';
import * as React from 'react'; import * as React from 'react';
import { StyleSheet, View } from 'react-native'; import { StyleSheet, View } from 'react-native';
import Animated from 'react-native-reanimated'; import Animated, {
useDerivedValue,
withTiming,
interpolateColor,
useAnimatedStyle,
} from 'react-native-reanimated';
import { getMessageLabel } from 'lib/shared/edit-messages-utils.js'; import { getMessageLabel } from 'lib/shared/edit-messages-utils.js';
import { createMessageReply } from 'lib/shared/message-utils.js'; import { createMessageReply } from 'lib/shared/message-utils.js';
import { assertComposableMessageType } from 'lib/types/message-types.js'; import { assertComposableMessageType } from 'lib/types/message-types.js';
import { import {
clusterEndHeight, clusterEndHeight,
composedMessageStyle, composedMessageStyle,
Show All 34 Linestype Props = {
+composedMessageMaxWidth: number, +composedMessageMaxWidth: number,
+colors: Colors, +colors: Colors,
+contentAndHeaderOpacity: number | Node, +contentAndHeaderOpacity: number | Node,
+deliveryIconOpacity: number | Node, +deliveryIconOpacity: number | Node,
// withInputState // withInputState
+inputState: ?InputState, +inputState: ?InputState,
+navigateToSidebar: () => mixed, +navigateToSidebar: () => mixed,
+shouldRenderAvatars: boolean, +shouldRenderAvatars: boolean,
+editedMessageStyle: AnimatedStyleObj,
}; };
class ComposedMessage extends React.PureComponent<Props> { class ComposedMessage extends React.PureComponent<Props> {
render() { render() {
assertComposableMessageType(this.props.item.messageInfo.type); assertComposableMessageType(this.props.item.messageInfo.type);
const { const {
item, item,
sendFailed, sendFailed,
focused, focused,
swipeOptions, swipeOptions,
shouldDisplayPinIndicator, shouldDisplayPinIndicator,
children, children,
composedMessageMaxWidth, composedMessageMaxWidth,
colors, colors,
inputState, inputState,
navigateToSidebar, navigateToSidebar,
contentAndHeaderOpacity, contentAndHeaderOpacity,
deliveryIconOpacity, deliveryIconOpacity,
shouldRenderAvatars, shouldRenderAvatars,
editedMessageStyle,
...viewProps ...viewProps
} = this.props; } = this.props;
const { id, creator } = item.messageInfo; const { id, creator } = item.messageInfo;
const { hasBeenEdited, isPinned } = item; const { hasBeenEdited, isPinned } = item;
const { isViewer } = creator; const { isViewer } = creator;
const alignStyle = isViewer const alignStyle = isViewer
? styles.rightChatBubble ? styles.rightChatBubble
: styles.leftChatBubble; : styles.leftChatBubble;
let containerMarginBottom = 5; let containerMarginBottom = 5;
if (item.endsCluster) { if (item.endsCluster) {
containerMarginBottom += clusterEndHeight; containerMarginBottom += clusterEndHeight;
} }
const containerStyle = { marginBottom: containerMarginBottom };
const highlightStyle =
id && this.props.inputState?.editState.editedMessage?.id === id
? { backgroundColor: `#${item.threadInfo.color}40` }
: null;
const containerStyle = [
{ marginBottom: containerMarginBottom },
highlightStyle,
];
const messageBoxContainerStyle = [styles.messageBoxContainer]; const messageBoxContainerStyle = [styles.messageBoxContainer];
const positioningStyle = isViewer const positioningStyle = isViewer
? styles.rightChatContainer ? styles.rightChatContainer
: styles.leftChatContainer; : styles.leftChatContainer;
messageBoxContainerStyle.push(positioningStyle); messageBoxContainerStyle.push(positioningStyle);
let deliveryIcon = null; let deliveryIcon = null;
▲ Show 20 Lines • Show All 104 Lines • ▼ Show 20 Lines ) {
); );
} }
return ( return (
<View {...viewProps}> <View {...viewProps}>
<AnimatedView style={{ opacity: contentAndHeaderOpacity }}> <AnimatedView style={{ opacity: contentAndHeaderOpacity }}>
<MessageHeader item={item} focused={focused} display="lowContrast" /> <MessageHeader item={item} focused={focused} display="lowContrast" />
</AnimatedView> </AnimatedView>
<View style={containerStyle}> <AnimatedView style={[containerStyle, editedMessageStyle]}>
<View style={styles.alignment}> <View style={styles.alignment}>
<View style={[styles.content, alignStyle]}> <View style={[styles.content, alignStyle]}>
{deliveryIcon} {deliveryIcon}
{messageBox} {messageBox}
</View> </View>
{failedSendInfo} {failedSendInfo}
{inlineEngagement} {inlineEngagement}
</View> </View>
</View> </AnimatedView>
</View> </View>
); );
} }
reply = () => { reply = () => {
const { inputState, item } = this.props; const { inputState, item } = this.props;
invariant(inputState, 'inputState should be set in reply'); invariant(inputState, 'inputState should be set in reply');
invariant(item.messageInfo.text, 'text should be set in reply'); invariant(item.messageInfo.text, 'text should be set in reply');
▲ Show 20 Lines • Show All 62 Lines • ▼ Show 20 Linesconst ConnectedComposedMessage: React.ComponentType<BaseProps> =
React.memo<BaseProps>(function ConnectedComposedMessage(props: BaseProps) { React.memo<BaseProps>(function ConnectedComposedMessage(props: BaseProps) {
const composedMessageMaxWidth = useComposedMessageMaxWidth(); const composedMessageMaxWidth = useComposedMessageMaxWidth();
const colors = useColors(); const colors = useColors();
const inputState = React.useContext(InputStateContext); const inputState = React.useContext(InputStateContext);
const navigateToSidebar = useNavigateToSidebar(props.item); const navigateToSidebar = useNavigateToSidebar(props.item);
const contentAndHeaderOpacity = useContentAndHeaderOpacity(props.item); const contentAndHeaderOpacity = useContentAndHeaderOpacity(props.item);
const deliveryIconOpacity = useDeliveryIconOpacity(props.item); const deliveryIconOpacity = useDeliveryIconOpacity(props.item);
const shouldRenderAvatars = useShouldRenderAvatars(); const shouldRenderAvatars = useShouldRenderAvatars();
const progress = useDerivedValue(() => {
const isHighlighted =
inputState?.editState.editedMessage?.id === props.item.messageInfo.id;
return withTiming(isHighlighted ? 1 : 0);
});
const editedMessageStyle = useAnimatedStyle(() => {
const backgroundColor = interpolateColor(
progress.value,
[0, 1],
['transparent', `#${props.item.threadInfo.color}40`],
);
return {
backgroundColor,
};
});
return ( return (
<ComposedMessage <ComposedMessage
{...props} {...props}
composedMessageMaxWidth={composedMessageMaxWidth} composedMessageMaxWidth={composedMessageMaxWidth}
colors={colors} colors={colors}
inputState={inputState} inputState={inputState}
navigateToSidebar={navigateToSidebar} navigateToSidebar={navigateToSidebar}
contentAndHeaderOpacity={contentAndHeaderOpacity} contentAndHeaderOpacity={contentAndHeaderOpacity}
deliveryIconOpacity={deliveryIconOpacity} deliveryIconOpacity={deliveryIconOpacity}
shouldRenderAvatars={shouldRenderAvatars} shouldRenderAvatars={shouldRenderAvatars}
editedMessageStyle={editedMessageStyle}
/> />
); );
}); });
export default ConnectedComposedMessage; export default ConnectedComposedMessage;
View Options

native/chat/composed-message.react.js

// @flow // @flow
import Icon from '@expo/vector-icons/Feather.js'; import Icon from '@expo/vector-icons/Feather.js';
import invariant from 'invariant'; import invariant from 'invariant';
import * as React from 'react'; import * as React from 'react';
import { StyleSheet, View } from 'react-native'; import { StyleSheet, View } from 'react-native';
import Animated from 'react-native-reanimated'; import Animated, {
useDerivedValue,
withTiming,
interpolateColor,
useAnimatedStyle,
} from 'react-native-reanimated';
import { getMessageLabel } from 'lib/shared/edit-messages-utils.js'; import { getMessageLabel } from 'lib/shared/edit-messages-utils.js';
import { createMessageReply } from 'lib/shared/message-utils.js'; import { createMessageReply } from 'lib/shared/message-utils.js';
import { assertComposableMessageType } from 'lib/types/message-types.js'; import { assertComposableMessageType } from 'lib/types/message-types.js';
import { import {
clusterEndHeight, clusterEndHeight,
composedMessageStyle, composedMessageStyle,
Show All 34 Linestype Props = {
+composedMessageMaxWidth: number, +composedMessageMaxWidth: number,
+colors: Colors, +colors: Colors,
+contentAndHeaderOpacity: number | Node, +contentAndHeaderOpacity: number | Node,
+deliveryIconOpacity: number | Node, +deliveryIconOpacity: number | Node,
// withInputState // withInputState
+inputState: ?InputState, +inputState: ?InputState,
+navigateToSidebar: () => mixed, +navigateToSidebar: () => mixed,
+shouldRenderAvatars: boolean, +shouldRenderAvatars: boolean,
+editedMessageStyle: AnimatedStyleObj,
}; };
class ComposedMessage extends React.PureComponent<Props> { class ComposedMessage extends React.PureComponent<Props> {
render() { render() {
assertComposableMessageType(this.props.item.messageInfo.type); assertComposableMessageType(this.props.item.messageInfo.type);
const { const {
item, item,
sendFailed, sendFailed,
focused, focused,
swipeOptions, swipeOptions,
shouldDisplayPinIndicator, shouldDisplayPinIndicator,
children, children,
composedMessageMaxWidth, composedMessageMaxWidth,
colors, colors,
inputState, inputState,
navigateToSidebar, navigateToSidebar,
contentAndHeaderOpacity, contentAndHeaderOpacity,
deliveryIconOpacity, deliveryIconOpacity,
shouldRenderAvatars, shouldRenderAvatars,
editedMessageStyle,
...viewProps ...viewProps
} = this.props; } = this.props;
const { id, creator } = item.messageInfo; const { id, creator } = item.messageInfo;
const { hasBeenEdited, isPinned } = item; const { hasBeenEdited, isPinned } = item;
const { isViewer } = creator; const { isViewer } = creator;
const alignStyle = isViewer const alignStyle = isViewer
? styles.rightChatBubble ? styles.rightChatBubble
: styles.leftChatBubble; : styles.leftChatBubble;
let containerMarginBottom = 5; let containerMarginBottom = 5;
if (item.endsCluster) { if (item.endsCluster) {
containerMarginBottom += clusterEndHeight; containerMarginBottom += clusterEndHeight;
} }
const containerStyle = { marginBottom: containerMarginBottom };
const highlightStyle =
id && this.props.inputState?.editState.editedMessage?.id === id
? { backgroundColor: `#${item.threadInfo.color}40` }
: null;
const containerStyle = [
{ marginBottom: containerMarginBottom },
highlightStyle,
];
const messageBoxContainerStyle = [styles.messageBoxContainer]; const messageBoxContainerStyle = [styles.messageBoxContainer];
const positioningStyle = isViewer const positioningStyle = isViewer
? styles.rightChatContainer ? styles.rightChatContainer
: styles.leftChatContainer; : styles.leftChatContainer;
messageBoxContainerStyle.push(positioningStyle); messageBoxContainerStyle.push(positioningStyle);
let deliveryIcon = null; let deliveryIcon = null;
▲ Show 20 Lines • Show All 104 Lines • ▼ Show 20 Lines ) {
); );
} }
return ( return (
<View {...viewProps}> <View {...viewProps}>
<AnimatedView style={{ opacity: contentAndHeaderOpacity }}> <AnimatedView style={{ opacity: contentAndHeaderOpacity }}>
<MessageHeader item={item} focused={focused} display="lowContrast" /> <MessageHeader item={item} focused={focused} display="lowContrast" />
</AnimatedView> </AnimatedView>
<View style={containerStyle}> <AnimatedView style={[containerStyle, editedMessageStyle]}>
<View style={styles.alignment}> <View style={styles.alignment}>
<View style={[styles.content, alignStyle]}> <View style={[styles.content, alignStyle]}>
{deliveryIcon} {deliveryIcon}
{messageBox} {messageBox}
</View> </View>
{failedSendInfo} {failedSendInfo}
{inlineEngagement} {inlineEngagement}
</View> </View>
</View> </AnimatedView>
</View> </View>
); );
} }
reply = () => { reply = () => {
const { inputState, item } = this.props; const { inputState, item } = this.props;
invariant(inputState, 'inputState should be set in reply'); invariant(inputState, 'inputState should be set in reply');
invariant(item.messageInfo.text, 'text should be set in reply'); invariant(item.messageInfo.text, 'text should be set in reply');
▲ Show 20 Lines • Show All 62 Lines • ▼ Show 20 Linesconst ConnectedComposedMessage: React.ComponentType<BaseProps> =
React.memo<BaseProps>(function ConnectedComposedMessage(props: BaseProps) { React.memo<BaseProps>(function ConnectedComposedMessage(props: BaseProps) {
const composedMessageMaxWidth = useComposedMessageMaxWidth(); const composedMessageMaxWidth = useComposedMessageMaxWidth();
const colors = useColors(); const colors = useColors();
const inputState = React.useContext(InputStateContext); const inputState = React.useContext(InputStateContext);
const navigateToSidebar = useNavigateToSidebar(props.item); const navigateToSidebar = useNavigateToSidebar(props.item);
const contentAndHeaderOpacity = useContentAndHeaderOpacity(props.item); const contentAndHeaderOpacity = useContentAndHeaderOpacity(props.item);
const deliveryIconOpacity = useDeliveryIconOpacity(props.item); const deliveryIconOpacity = useDeliveryIconOpacity(props.item);
const shouldRenderAvatars = useShouldRenderAvatars(); const shouldRenderAvatars = useShouldRenderAvatars();
const progress = useDerivedValue(() => {
const isHighlighted =
inputState?.editState.editedMessage?.id === props.item.messageInfo.id;
return withTiming(isHighlighted ? 1 : 0);
});
const editedMessageStyle = useAnimatedStyle(() => {
const backgroundColor = interpolateColor(
progress.value,
[0, 1],
['transparent', `#${props.item.threadInfo.color}40`],
);
return {
backgroundColor,
};
});
return ( return (
<ComposedMessage <ComposedMessage
{...props} {...props}
composedMessageMaxWidth={composedMessageMaxWidth} composedMessageMaxWidth={composedMessageMaxWidth}
colors={colors} colors={colors}
inputState={inputState} inputState={inputState}
navigateToSidebar={navigateToSidebar} navigateToSidebar={navigateToSidebar}
contentAndHeaderOpacity={contentAndHeaderOpacity} contentAndHeaderOpacity={contentAndHeaderOpacity}
deliveryIconOpacity={deliveryIconOpacity} deliveryIconOpacity={deliveryIconOpacity}
shouldRenderAvatars={shouldRenderAvatars} shouldRenderAvatars={shouldRenderAvatars}
editedMessageStyle={editedMessageStyle}
/> />
); );
}); });
export default ConnectedComposedMessage; export default ConnectedComposedMessage;