MM-58521 Hide emoji categories while searching emoji picker (#30562)
* hide categories while searching * add tests and update snapshots * fix height changes on emoji picker * fixed off-centered empty state * fix linter issues in css * Update webapp/channels/src/components/emoji_picker/constants/index.ts --------- Co-authored-by: Harrison Healey <harrisonmhealey@gmail.com>
Этот коммит содержится в:
Matthew Birtch
коммит произвёл
GitHub
GitHub
родитель
7999239ccf
Коммит
c03f339eca
@@ -36,6 +36,7 @@ exports[`components/emoji_picker/EmojiPicker should match snapshot 1`] = `
|
||||
</div>
|
||||
<div
|
||||
class="emoji-picker__categories"
|
||||
data-testid="emojiPickerCategories"
|
||||
id="emojiPickerCategories"
|
||||
>
|
||||
<button
|
||||
|
||||
@@ -70,6 +70,7 @@ function EmojiPickerCategories({
|
||||
id='emojiPickerCategories'
|
||||
className='emoji-picker__categories'
|
||||
onKeyDown={handleKeyDown}
|
||||
data-testid='emojiPickerCategories'
|
||||
>
|
||||
{categoryNames.map((categoryName) => {
|
||||
const category = categories[categoryName];
|
||||
|
||||
@@ -13,7 +13,7 @@ import type {Emoji, EmojiCategory, CustomEmoji, SystemEmoji} from '@mattermost/t
|
||||
import type {ActionResult} from 'mattermost-redux/types/actions';
|
||||
|
||||
import EmojiPickerCategoryOrEmojiRow from 'components/emoji_picker/components/emoji_picker_category_or_emoji_row';
|
||||
import {ITEM_HEIGHT, EMOJI_ROWS_OVERSCAN_COUNT, EMOJI_CONTAINER_HEIGHT, CUSTOM_EMOJIS_PER_PAGE, EMOJI_SCROLL_THROTTLE_DELAY} from 'components/emoji_picker/constants';
|
||||
import {ITEM_HEIGHT, EMOJI_ROWS_OVERSCAN_COUNT, EMOJI_CONTAINER_HEIGHT, CUSTOM_EMOJIS_PER_PAGE, EMOJI_SCROLL_THROTTLE_DELAY, CATEGORIES_CONTAINER_HEIGHT} from 'components/emoji_picker/constants';
|
||||
import type {CategoryOrEmojiRow, EmojiCursor} from 'components/emoji_picker/types';
|
||||
import {isCategoryHeaderRow} from 'components/emoji_picker/utils';
|
||||
|
||||
@@ -89,7 +89,7 @@ const EmojiPickerCurrentResults = forwardRef<InfiniteLoader, Props>(({categoryOr
|
||||
return (
|
||||
<div
|
||||
className='emoji-picker__items'
|
||||
style={{height: EMOJI_CONTAINER_HEIGHT}}
|
||||
style={{height: isFiltering ? EMOJI_CONTAINER_HEIGHT + CATEGORIES_CONTAINER_HEIGHT : EMOJI_CONTAINER_HEIGHT}}
|
||||
>
|
||||
<div
|
||||
className='emoji-picker__container'
|
||||
|
||||
@@ -128,6 +128,7 @@ export const CATEGORIES: Categories = Emoji.CategoryNames.
|
||||
export const EMOJI_PER_ROW = 9; // needs to match variable `$emoji-per-row` in _variables.scss
|
||||
export const ITEM_HEIGHT = 36; //as per .emoji-picker__item height in _emoticons.scss
|
||||
export const EMOJI_CONTAINER_HEIGHT = 290; // If this changes, the spaceRequiredAbove and spaceRequiredBelow props passed to the EmojiPickerOverlay must be updated
|
||||
export const CATEGORIES_CONTAINER_HEIGHT = 36; // height of categories container (28px) + margin (8px)
|
||||
|
||||
export const CATEGORY_HEADER_ROW = 'categoryHeaderRow';
|
||||
export const EMOJIS_ROW = 'emojisRow';
|
||||
|
||||
@@ -79,4 +79,30 @@ describe('components/emoji_picker/EmojiPicker', () => {
|
||||
|
||||
expect(screen.queryByText('Preview for wave emoji')).not.toBeNull();
|
||||
});
|
||||
|
||||
test('Categories should be hidden when filter has text', () => {
|
||||
const props = {
|
||||
...baseProps,
|
||||
filter: 'smile',
|
||||
};
|
||||
|
||||
renderWithContext(
|
||||
<EmojiPicker {...props}/>,
|
||||
);
|
||||
|
||||
expect(screen.queryByTestId('emojiPickerCategories')).toBeNull();
|
||||
});
|
||||
|
||||
test('Categories should be visible when filter is empty', () => {
|
||||
const props = {
|
||||
...baseProps,
|
||||
filter: '',
|
||||
};
|
||||
|
||||
renderWithContext(
|
||||
<EmojiPicker {...props}/>,
|
||||
);
|
||||
|
||||
expect(screen.queryByTestId('emojiPickerCategories')).not.toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -25,6 +25,8 @@ import {
|
||||
SEARCH_RESULTS,
|
||||
EMOJI_PER_ROW,
|
||||
CUSTOM_EMOJI_SEARCH_THROTTLE_TIME_MS,
|
||||
EMOJI_CONTAINER_HEIGHT,
|
||||
CATEGORIES_CONTAINER_HEIGHT,
|
||||
} from 'components/emoji_picker/constants';
|
||||
import {NavigationDirection} from 'components/emoji_picker/types';
|
||||
import type {CategoryOrEmojiRow, Categories, EmojiCursor, EmojiPosition, EmojiRow} from 'components/emoji_picker/types';
|
||||
@@ -409,19 +411,26 @@ const EmojiPicker = ({
|
||||
onSkinSelected={setUserSkinTone}
|
||||
/>
|
||||
</div>
|
||||
<EmojiPickerCategories
|
||||
isFiltering={filter.length > 0}
|
||||
active={activeCategory}
|
||||
categories={categories}
|
||||
onClick={handleCategoryClick}
|
||||
onKeyDown={handleKeyboardEmojiNavigation}
|
||||
focusOnSearchInput={focusOnSearchInput}
|
||||
/>
|
||||
{areSearchResultsEmpty ? (
|
||||
<NoResultsIndicator
|
||||
variant={NoResultsVariant.Search}
|
||||
titleValues={{channelName: `${filter}`}}
|
||||
{filter.length === 0 && (
|
||||
<EmojiPickerCategories
|
||||
isFiltering={filter.length > 0}
|
||||
active={activeCategory}
|
||||
categories={categories}
|
||||
onClick={handleCategoryClick}
|
||||
onKeyDown={handleKeyboardEmojiNavigation}
|
||||
focusOnSearchInput={focusOnSearchInput}
|
||||
/>
|
||||
)}
|
||||
{areSearchResultsEmpty ? (
|
||||
<div
|
||||
className='emoji-picker__items'
|
||||
style={{height: EMOJI_CONTAINER_HEIGHT + CATEGORIES_CONTAINER_HEIGHT}}
|
||||
>
|
||||
<NoResultsIndicator
|
||||
variant={NoResultsVariant.Search}
|
||||
titleValues={{channelName: `${filter}`}}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<EmojiPickerCurrentResults
|
||||
ref={infiniteLoaderRef}
|
||||
|
||||
@@ -485,6 +485,13 @@ $emoji-footer-height: $emoji-footer-border-width + $emoji-half-height + $emoji-
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
|
||||
&:has(.no-results__wrapper) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&.gif-picker__items {
|
||||
display: flex;
|
||||
height: 380px;
|
||||
|
||||
Ссылка в новой задаче
Block a user