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

91
ts/components/StoriesPane.tsx
View file

@ -1,7 +1,6 @@
// Copyright 2022 Signal Messenger, LLC // Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
import FocusTrap from 'focus-trap-react';
import Fuse from 'fuse.js'; import Fuse from 'fuse.js';
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
@ -83,54 +82,52 @@ export const StoriesPane = ({
}, [searchTerm, stories]); }, [searchTerm, stories]);
return ( return (
<FocusTrap focusTrapOptions={{ allowOutsideClick: true }}> <>
<div> <div className="Stories__pane__header">
<div className="Stories__pane__header"> <button
<button aria-label={i18n('back')}
aria-label={i18n('back')} className="Stories__pane__header--back"
className="Stories__pane__header--back" onClick={onBack}
onClick={onBack} tabIndex={0}
tabIndex={0} type="button"
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 <div className="Stories__pane__header--title">
className={classNames('Stories__pane__list', { {i18n('Stories__title')}
'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> </div>
</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>
</>
); );
}; };