Skip to content

CompactAvatar + multi-select rows #99421

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
roryabraham merged 9 commits into from
Sep 4, 2026
Merged

CompactAvatar + multi-select rows #99421

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
d75a23e
CompactAvatar + multi-select rows
jmusial Aug 25, 2026
e7108cf
Merge branch 'main' into chore/compact-avatar-and-multi-select-rows
jmusial Aug 26, 2026
8b34242
Merge branch 'main' into chore/compact-avatar-and-multi-select-rows
jmusial Sep 1, 2026
5281709
Merge branch 'main' into chore/compact-avatar-and-multi-select-rows
jmusial Sep 2, 2026
daf8893
self review
jmusial Sep 2, 2026
cc1fda2
fix consistency comments
jmusial Sep 2, 2026
f643670
Merge branch 'main' into chore/compact-avatar-and-multi-select-rows
jmusial Sep 3, 2026
e53da70
Merge branch 'main' into chore/compact-avatar-and-multi-select-rows
jmusial Sep 4, 2026
ba50bf5
fix ts
jmusial Sep 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 54 additions & 0 deletions src/components/EmojiSuggestions/EmojiSuggestionItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import type {Emoji} from '@assets/emojis/types';

import Text from '@components/Text';

import useStyleUtils from '@hooks/useStyleUtils';
import useThemeStyles from '@hooks/useThemeStyles';

import {getEmojiCodeWithSkinColor} from '@libs/EmojiUtils';
import getStyledTextArray from '@libs/GetStyledTextArray';

import React from 'react';
import {View} from 'react-native';

type EmojiSuggestionItemProps = {
/** The emoji to render */
item: Emoji;

/** Emoji prefix that follows the colon, highlighted within the rendered name */
prefix: string;

/** Stores user's preferred skin tone */
preferredSkinToneIndex: number;

@roryabraham roryabraham Sep 4, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

NAB: I'm wondering if this should be a normal prop or if leaf nodes should subscribe directly. I think as useOnyx becomes more lightweight/efficient it will be increasingly a best practice to bring subscriptions lower in the tree so that only the leaves that need it re-render on changes, rather than larger subtrees.

};

/** A single row of the emoji suggester: the emoji glyph followed by its `:name:`. */
function EmojiSuggestionItem({item, prefix, preferredSkinToneIndex}: EmojiSuggestionItemProps) {
const styles = useThemeStyles();
const StyleUtils = useStyleUtils();

const styledTextArray = getStyledTextArray(item.name, prefix);

return (
<View style={styles.autoCompleteSuggestionContainer}>
<Text style={styles.emojiSuggestionsEmoji}>{getEmojiCodeWithSkinColor(item, preferredSkinToneIndex)}</Text>
<Text
numberOfLines={2}
style={styles.emojiSuggestionsText}
>
:
{styledTextArray.map(({text, isColored}) => (
<Text
key={`${text}+${isColored}`}
style={StyleUtils.getColoredBackgroundStyle(isColored)}
>
{text}
</Text>
))}
:
</Text>
</View>
);
}

export default EmojiSuggestionItem;
58 changes: 11 additions & 47 deletions src/components/EmojiSuggestions.tsx → src/components/EmojiSuggestions/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,11 @@
import type {Emoji} from '@assets/emojis/types';

import useStyleUtils from '@hooks/useStyleUtils';
import useThemeStyles from '@hooks/useThemeStyles';
import AutoCompleteSuggestions from '@components/AutoCompleteSuggestions';
import type {MeasureParentContainerAndCursorCallback} from '@components/AutoCompleteSuggestions/types';

import * as EmojiUtils from '@libs/EmojiUtils';
import getStyledTextArray from '@libs/GetStyledTextArray';
import React from 'react';

import type {ReactElement} from 'react';

import React, {useCallback} from 'react';
import {View} from 'react-native';

import type {MeasureParentContainerAndCursorCallback} from './AutoCompleteSuggestions/types';

import AutoCompleteSuggestions from './AutoCompleteSuggestions';
import Text from './Text';
import EmojiSuggestionItem from './EmojiSuggestionItem';

type EmojiSuggestionsProps = {
/** The index of the highlighted emoji */
Expand Down Expand Up @@ -60,43 +51,16 @@ function EmojiSuggestions({
measureParentContainerAndReportCursor = () => {},
resetSuggestions,
}: EmojiSuggestionsProps) {
const styles = useThemeStyles();
const StyleUtils = useStyleUtils();
/**
* Render an emoji suggestion menu item component.
*/
const renderSuggestionMenuItem = useCallback(
(item: Emoji): ReactElement => {
const styledTextArray = getStyledTextArray(item.name, prefix);

return (
<View style={styles.autoCompleteSuggestionContainer}>
<Text style={styles.emojiSuggestionsEmoji}>{EmojiUtils.getEmojiCodeWithSkinColor(item, preferredSkinToneIndex)}</Text>
<Text
numberOfLines={2}
style={styles.emojiSuggestionsText}
>
:
{styledTextArray.map(({text, isColored}) => (
<Text
key={`${text}+${isColored}`}
style={StyleUtils.getColoredBackgroundStyle(isColored)}
>
{text}
</Text>
))}
:
</Text>
</View>
);
},
[prefix, styles.autoCompleteSuggestionContainer, styles.emojiSuggestionsEmoji, styles.emojiSuggestionsText, preferredSkinToneIndex, StyleUtils],
);

return (
<AutoCompleteSuggestions
suggestions={emojis}
renderSuggestionMenuItem={renderSuggestionMenuItem}
renderSuggestionMenuItem={(item: Emoji) => (
<EmojiSuggestionItem
item={item}
prefix={prefix}
preferredSkinToneIndex={preferredSkinToneIndex}
/>
)}
keyExtractor={keyExtractor}
highlightedSuggestionIndex={highlightedEmojiIndex}
onSelect={onSelect}
Expand Down
186 changes: 0 additions & 186 deletions src/components/MentionSuggestions.tsx
View file
Open in desktop

This file was deleted.

Loading
Loading