mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Move FocusTrap into the parent to allow scrolling list

Browse source
This commit is contained in:
Josh Perez 2022-04-12 10:45:20 -04:00 • committed by GitHub
parent 302604f67e
commit 0ccbf5e4bd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 68 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
ts/components/Stories.tsx
View file

@ -1,6 +1,7 @@
// Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import FocusTrap from 'focus-trap-react';
import React, { useState } from 'react';
import classNames from 'classnames';
import type { ConversationStoryType, StoryViewType } from './StoryListItem';
@ -83,28 +84,30 @@ export const Stories = ({
stories: storiesToView.stories,
})}
<div className="Stories__pane" style={{ width }}>
<StoriesPane
hiddenStories={hiddenStories}
i18n={i18n}
onBack={toggleStoriesView}
onStoryClicked={conversationId => {
const storyIndex = stories.findIndex(
x => x.conversationId === conversationId
);
const foundStory = stories[storyIndex];
<FocusTrap focusTrapOptions={{ allowOutsideClick: true }}>
<StoriesPane
hiddenStories={hiddenStories}
i18n={i18n}
onBack={toggleStoriesView}
onStoryClicked={conversationId => {
const storyIndex = stories.findIndex(
x => x.conversationId === conversationId
);
const foundStory = stories[storyIndex];
if (foundStory) {
setStoriesToView({
conversationId,
stories: foundStory.stories,
});
}
}}
openConversationInternal={openConversationInternal}
queueStoryDownload={queueStoryDownload}
stories={stories}
toggleHideStories={toggleHideStories}
/>
if (foundStory) {
setStoriesToView({
conversationId,
stories: foundStory.stories,
});
}
}}
openConversationInternal={openConversationInternal}
queueStoryDownload={queueStoryDownload}
stories={stories}
toggleHideStories={toggleHideStories}
/>
</FocusTrap>
</div>
<div className="Stories__placeholder">
<div className="Stories__placeholder__stories" />

91
ts/components/StoriesPane.tsx
View file

@ -1,7 +1,6 @@
// Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import FocusTrap from 'focus-trap-react';
import Fuse from 'fuse.js';
import React, { useEffect, useState } from 'react';
import classNames from 'classnames';
@ -83,54 +82,52 @@ export const StoriesPane = ({
}, [searchTerm, stories]);
return (
<FocusTrap focusTrapOptions={{ allowOutsideClick: true }}>
<div>
<div className="Stories__pane__header">
<button
aria-label={i18n('back')}
className="Stories__pane__header--back"
onClick={onBack}
tabIndex={0}
type="button"
/>
<div className="Stories__pane__header--title">
{i18n('Stories__title')}
</div>
</div>
<SearchInput
i18n={i18n}
moduleClassName="Stories__search"
onChange={event => {
setSearchTerm(event.target.value);
}}
placeholder={i18n('search')}
value={searchTerm}
<>
<div className="Stories__pane__header">
<button
aria-label={i18n('back')}
className="Stories__pane__header--back"
onClick={onBack}
tabIndex={0}
type="button"
/>
<div
className={classNames('Stories__pane__list', {
'Stories__pane__list--empty': !stories.length,
})}
>
{renderedStories.map(story => (
<StoryListItem
key={getNewestStory(story).timestamp}
i18n={i18n}
onClick={() => {
onStoryClicked(story.conversationId);
}}
onHideStory={() => {
toggleHideStories(getNewestStory(story).sender.id);
}}
onGoToConversation={conversationId => {
openConversationInternal({ conversationId });
}}
queueStoryDownload={queueStoryDownload}
story={getNewestStory(story)}
/>
))}
{!stories.length && i18n('Stories__list-empty')}
<div className="Stories__pane__header--title">
{i18n('Stories__title')}
</div>
</div>
</FocusTrap>
<SearchInput
i18n={i18n}
moduleClassName="Stories__search"
onChange={event => {
setSearchTerm(event.target.value);
}}
placeholder={i18n('search')}
value={searchTerm}
/>
<div
className={classNames('Stories__pane__list', {
'Stories__pane__list--empty': !stories.length,
})}
>
{renderedStories.map(story => (
<StoryListItem
key={getNewestStory(story).timestamp}
i18n={i18n}
onClick={() => {
onStoryClicked(story.conversationId);
}}
onHideStory={() => {
toggleHideStories(getNewestStory(story).sender.id);
}}
onGoToConversation={conversationId => {
openConversationInternal({ conversationId });
}}
queueStoryDownload={queueStoryDownload}
story={getNewestStory(story)}
/>
))}
{!stories.length && i18n('Stories__list-empty')}
</div>
</>
);
};