Changeset View
Changeset View
Standalone View
Standalone View
native/chat/inline-engagement.react.js
Show All 11 Lines | |||||
import type { ReactionInfo } from 'lib/selectors/chat-selectors.js'; | import type { ReactionInfo } from 'lib/selectors/chat-selectors.js'; | ||||
import { stringForReactionList } from 'lib/shared/reaction-utils.js'; | import { stringForReactionList } from 'lib/shared/reaction-utils.js'; | ||||
import type { ThreadInfo } from 'lib/types/thread-types.js'; | import type { ThreadInfo } from 'lib/types/thread-types.js'; | ||||
import { | import { | ||||
inlineEngagementStyle, | inlineEngagementStyle, | ||||
inlineEngagementCenterStyle, | inlineEngagementCenterStyle, | ||||
inlineEngagementRightStyle, | inlineEngagementRightStyle, | ||||
inlineEngagementLeftStyle, | |||||
composedMessageStyle, | composedMessageStyle, | ||||
} from './chat-constants.js'; | } from './chat-constants.js'; | ||||
import { useNavigateToThread } from './message-list-types.js'; | import { useNavigateToThread } from './message-list-types.js'; | ||||
import CommIcon from '../components/comm-icon.react.js'; | import CommIcon from '../components/comm-icon.react.js'; | ||||
import GestureTouchableOpacity from '../components/gesture-touchable-opacity.react.js'; | import GestureTouchableOpacity from '../components/gesture-touchable-opacity.react.js'; | ||||
import { MessageReactionsModalRouteName } from '../navigation/route-names.js'; | import { MessageReactionsModalRouteName } from '../navigation/route-names.js'; | ||||
import { useStyles } from '../themes/colors.js'; | import { useStyles } from '../themes/colors.js'; | ||||
import type { ChatMessageInfoItemWithHeight } from '../types/chat-types.js'; | import type { ChatMessageInfoItemWithHeight } from '../types/chat-types.js'; | ||||
type Props = { | type Props = { | ||||
+threadInfo: ?ThreadInfo, | +threadInfo: ?ThreadInfo, | ||||
+reactions?: ReactionInfo, | +reactions?: ReactionInfo, | ||||
+disabled?: boolean, | +disabled?: boolean, | ||||
+positioning?: 'left' | 'right', | |||||
}; | }; | ||||
function InlineEngagement(props: Props): React.Node { | function InlineEngagement(props: Props): React.Node { | ||||
const { disabled = false, reactions, threadInfo } = props; | const { disabled = false, reactions, threadInfo, positioning } = props; | ||||
const repliesText = useInlineEngagementText(threadInfo); | const repliesText = useInlineEngagementText(threadInfo); | ||||
const navigateToThread = useNavigateToThread(); | const navigateToThread = useNavigateToThread(); | ||||
const { navigate } = useNavigation(); | const { navigate } = useNavigation(); | ||||
const styles = useStyles(unboundStyles); | const styles = useStyles(unboundStyles); | ||||
const unreadStyle = threadInfo?.currentUser.unread ? styles.unread : null; | const unreadStyle = threadInfo?.currentUser.unread ? styles.unread : null; | ||||
▲ Show 20 Lines • Show All 63 Lines • ▼ Show 20 Lines | function InlineEngagement(props: Props): React.Node { | ||||
}, [ | }, [ | ||||
marginLeft, | marginLeft, | ||||
onPressReactions, | onPressReactions, | ||||
reactions, | reactions, | ||||
styles.reaction, | styles.reaction, | ||||
styles.reactionsContainer, | styles.reactionsContainer, | ||||
]); | ]); | ||||
const container = React.useMemo(() => { | |||||
return ( | return ( | ||||
<View style={styles.container}> | <View style={styles.container}> | ||||
{sidebarItem} | {sidebarItem} | ||||
{reactionList} | {reactionList} | ||||
</View> | </View> | ||||
); | ); | ||||
}, [reactionList, sidebarItem, styles.container]); | |||||
const inlineEngagementPositionStyle = | |||||
positioning === 'left' | |||||
? styles.leftInlineEngagement | |||||
: styles.rightInlineEngagement; | |||||
return ( | |||||
<View style={[styles.inlineEngagement, inlineEngagementPositionStyle]}> | |||||
{container} | |||||
</View> | |||||
); | |||||
} | } | ||||
const unboundStyles = { | const unboundStyles = { | ||||
container: { | container: { | ||||
flexDirection: 'row', | flexDirection: 'row', | ||||
height: inlineEngagementStyle.height, | height: inlineEngagementStyle.height, | ||||
borderRadius: 16, | borderRadius: 16, | ||||
backgroundColor: 'inlineEngagementBackground', | backgroundColor: 'inlineEngagementBackground', | ||||
alignSelf: 'baseline', | alignSelf: 'baseline', | ||||
alignItems: 'center', | alignItems: 'center', | ||||
padding: 8, | padding: 8, | ||||
}, | }, | ||||
unread: { | unread: { | ||||
color: 'listForegroundLabel', | color: 'listForegroundLabel', | ||||
fontWeight: 'bold', | fontWeight: 'bold', | ||||
}, | }, | ||||
rightInlineEngagement: { | |||||
alignSelf: 'flex-end', | |||||
position: 'relative', | |||||
right: inlineEngagementRightStyle.marginRight, | |||||
top: inlineEngagementRightStyle.topOffset, | |||||
}, | |||||
leftInlineEngagement: { | |||||
justifyContent: 'flex-start', | |||||
position: 'relative', | |||||
top: inlineEngagementLeftStyle.topOffset, | |||||
}, | |||||
sidebar: { | sidebar: { | ||||
flexDirection: 'row', | flexDirection: 'row', | ||||
alignItems: 'center', | alignItems: 'center', | ||||
}, | }, | ||||
inlineEngagement: { | |||||
flexDirection: 'row', | |||||
marginBottom: inlineEngagementStyle.marginBottom, | |||||
marginTop: inlineEngagementStyle.marginTop, | |||||
alignItems: 'center', | |||||
}, | |||||
icon: { | icon: { | ||||
color: 'inlineEngagementLabel', | color: 'inlineEngagementLabel', | ||||
marginRight: 4, | marginRight: 4, | ||||
}, | }, | ||||
repliesText: { | repliesText: { | ||||
color: 'inlineEngagementLabel', | color: 'inlineEngagementLabel', | ||||
fontSize: 14, | fontSize: 14, | ||||
lineHeight: 22, | lineHeight: 22, | ||||
Show All 38 Lines | const { | ||||
initialCoordinates, | initialCoordinates, | ||||
positioning, | positioning, | ||||
} = props; | } = props; | ||||
const inlineEngagementStyles = React.useMemo(() => { | const inlineEngagementStyles = React.useMemo(() => { | ||||
if (positioning === 'left') { | if (positioning === 'left') { | ||||
return { | return { | ||||
position: 'absolute', | position: 'absolute', | ||||
top: | top: | ||||
inlineEngagementStyle.marginTop + | inlineEngagementStyle.marginTop + inlineEngagementLeftStyle.topOffset, | ||||
inlineEngagementRightStyle.topOffset, | |||||
left: composedMessageStyle.marginLeft, | left: composedMessageStyle.marginLeft, | ||||
}; | }; | ||||
} else if (positioning === 'right') { | } else if (positioning === 'right') { | ||||
return { | return { | ||||
position: 'absolute', | position: 'absolute', | ||||
right: | right: | ||||
inlineEngagementRightStyle.marginRight + | inlineEngagementRightStyle.marginRight + | ||||
composedMessageStyle.marginRight, | composedMessageStyle.marginRight, | ||||
▲ Show 20 Lines • Show All 43 Lines • Show Last 20 Lines |