diff --git a/native/chat/composed-message.react.js b/native/chat/composed-message.react.js
--- a/native/chat/composed-message.react.js
+++ b/native/chat/composed-message.react.js
@@ -23,6 +23,7 @@
import SwipeableMessage from './swipeable-message.react.js';
import { useContentAndHeaderOpacity, useDeliveryIconOpacity } from './utils.js';
import UserAvatar from '../avatars/user-avatar.react.js';
+import CommIcon from '../components/comm-icon.react.js';
import { type InputState, InputStateContext } from '../input/input-state.js';
import { type Colors, useColors } from '../themes/colors.js';
import type { ChatMessageInfoItemWithHeight } from '../types/chat-types.js';
@@ -40,6 +41,7 @@
+sendFailed: boolean,
+focused: boolean,
+swipeOptions: SwipeOptions,
+ +shouldDisplayPinIndicator: boolean,
+children: React.Node,
};
type Props = {
@@ -62,6 +64,7 @@
sendFailed,
focused,
swipeOptions,
+ shouldDisplayPinIndicator,
children,
composedMessageMaxWidth,
colors,
@@ -73,7 +76,7 @@
...viewProps
} = this.props;
const { id, creator } = item.messageInfo;
- const { hasBeenEdited } = item;
+ const { hasBeenEdited, isPinned } = item;
const { isViewer } = creator;
const alignStyle = isViewer
@@ -147,23 +150,46 @@
avatar = ;
}
+ const pinIconPositioning = isViewer ? 'left' : 'right';
+ const pinIconName = pinIconPositioning === 'left' ? 'pin-mirror' : 'pin';
+ const messageBoxTopLevelContainerStyle =
+ pinIconPositioning === 'left'
+ ? styles.rightMessageBoxTopLevelContainerStyle
+ : styles.leftMessageBoxTopLevelContainerStyle;
+
+ let pinIcon;
+ if (isPinned && shouldDisplayPinIndicator) {
+ pinIcon = (
+
+
+
+ );
+ }
+
const messageBoxStyle = {
opacity: contentAndHeaderOpacity,
maxWidth: composedMessageMaxWidth,
};
const messageBox = (
-
-
- {avatar}
- {children}
-
+
+ {pinIcon}
+
+
+ {avatar}
+ {children}
+
+
);
@@ -245,16 +271,25 @@
leftChatContainer: {
alignItems: 'flex-start',
},
+ leftMessageBoxTopLevelContainerStyle: {
+ flexDirection: 'row-reverse',
+ },
messageBoxContainer: {
- flex: 1,
marginRight: 5,
},
+ pinIconContainer: {
+ marginRight: 4,
+ marginTop: 4,
+ },
rightChatBubble: {
justifyContent: 'flex-start',
},
rightChatContainer: {
alignItems: 'flex-end',
},
+ rightMessageBoxTopLevelContainerStyle: {
+ flexDirection: 'row',
+ },
swipeableContainer: {
alignItems: 'flex-end',
flexDirection: 'row',
diff --git a/native/chat/message-list.react.js b/native/chat/message-list.react.js
--- a/native/chat/message-list.react.js
+++ b/native/chat/message-list.react.js
@@ -194,6 +194,7 @@
route={route}
toggleFocus={this.toggleMessageFocus}
verticalBounds={messageListVerticalBounds}
+ shouldDisplayPinIndicator={true}
/>
);
};
diff --git a/native/chat/message-result.react.js b/native/chat/message-result.react.js
--- a/native/chat/message-result.react.js
+++ b/native/chat/message-result.react.js
@@ -43,6 +43,7 @@
route={props.route}
toggleFocus={onToggleFocus}
verticalBounds={props.messageVerticalBounds}
+ shouldDisplayPinIndicator={false}
/>
{longAbsoluteDate(props.item.messageInfo.time)}
diff --git a/native/chat/message.react.js b/native/chat/message.react.js
--- a/native/chat/message.react.js
+++ b/native/chat/message.react.js
@@ -39,6 +39,7 @@
| NavigationRoute<'MessageResultsScreen'>,
+toggleFocus: (messageKey: string) => void,
+verticalBounds: ?VerticalBounds,
+ shouldDisplayPinIndicator: boolean,
};
type Props = {
...BaseProps,
@@ -71,6 +72,7 @@
focused={this.props.focused}
toggleFocus={this.props.toggleFocus}
verticalBounds={this.props.verticalBounds}
+ shouldDisplayPinIndicator={this.props.shouldDisplayPinIndicator}
/>
);
} else if (this.props.item.messageShapeType === 'multimedia') {
@@ -80,6 +82,7 @@
focused={this.props.focused}
toggleFocus={this.props.toggleFocus}
verticalBounds={this.props.verticalBounds}
+ shouldDisplayPinIndicator={this.props.shouldDisplayPinIndicator}
/>
);
} else {
diff --git a/native/chat/multimedia-message.react.js b/native/chat/multimedia-message.react.js
--- a/native/chat/multimedia-message.react.js
+++ b/native/chat/multimedia-message.react.js
@@ -45,6 +45,7 @@
+focused: boolean,
+toggleFocus: (messageKey: string) => void,
+verticalBounds: ?VerticalBounds,
+ +shouldDisplayPinIndicator: boolean,
};
type Props = {
...BaseProps,
@@ -198,6 +199,7 @@
focused,
toggleFocus,
verticalBounds,
+ shouldDisplayPinIndicator,
navigation,
route,
overlayContext,
@@ -212,6 +214,7 @@
sendFailed={multimediaMessageSendFailed(item)}
focused={focused}
swipeOptions={this.canNavigateToSidebar() ? 'sidebar' : 'none'}
+ shouldDisplayPinIndicator={shouldDisplayPinIndicator}
{...viewProps}
>
diff --git a/native/chat/text-message.react.js b/native/chat/text-message.react.js
--- a/native/chat/text-message.react.js
+++ b/native/chat/text-message.react.js
@@ -49,6 +49,7 @@
+focused: boolean,
+toggleFocus: (messageKey: string) => void,
+verticalBounds: ?VerticalBounds,
+ +shouldDisplayPinIndicator: boolean,
};
type Props = {
...BaseProps,
@@ -83,6 +84,7 @@
focused,
toggleFocus,
verticalBounds,
+ shouldDisplayPinIndicator,
overlayContext,
chatContext,
isLinkModalActive,
@@ -115,6 +117,7 @@
sendFailed={textMessageSendFailed(item)}
focused={focused}
swipeOptions={swipeOptions}
+ shouldDisplayPinIndicator={shouldDisplayPinIndicator}
{...viewProps}
>