Handled ESC to go from stories to chats
This commit is contained in:
parent
5ed5483dd7
commit
ec454a9419
|
@ -24,6 +24,7 @@ import { MyStories } from './MyStories';
|
||||||
import { StoriesPane } from './StoriesPane';
|
import { StoriesPane } from './StoriesPane';
|
||||||
import { Theme, themeClassName } from '../util/theme';
|
import { Theme, themeClassName } from '../util/theme';
|
||||||
import { getWidthFromPreferredWidth } from '../util/leftPaneWidth';
|
import { getWidthFromPreferredWidth } from '../util/leftPaneWidth';
|
||||||
|
import { useEscapeHandling } from '../hooks/useEscapeHandling';
|
||||||
|
|
||||||
export type PropsType = {
|
export type PropsType = {
|
||||||
deleteStoryForEveryone: (story: StoryViewType) => unknown;
|
deleteStoryForEveryone: (story: StoryViewType) => unknown;
|
||||||
|
@ -45,6 +46,8 @@ export type PropsType = {
|
||||||
toggleStoriesView: () => unknown;
|
toggleStoriesView: () => unknown;
|
||||||
viewUserStories: ViewUserStoriesActionCreatorType;
|
viewUserStories: ViewUserStoriesActionCreatorType;
|
||||||
viewStory: ViewStoryActionCreatorType;
|
viewStory: ViewStoryActionCreatorType;
|
||||||
|
isViewingStory: boolean;
|
||||||
|
isStoriesSettingsVisible: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
type AddStoryType =
|
type AddStoryType =
|
||||||
|
@ -75,6 +78,8 @@ export const Stories = ({
|
||||||
toggleStoriesView,
|
toggleStoriesView,
|
||||||
viewUserStories,
|
viewUserStories,
|
||||||
viewStory,
|
viewStory,
|
||||||
|
isViewingStory,
|
||||||
|
isStoriesSettingsVisible,
|
||||||
}: PropsType): JSX.Element => {
|
}: PropsType): JSX.Element => {
|
||||||
const width = getWidthFromPreferredWidth(preferredWidthFromStorage, {
|
const width = getWidthFromPreferredWidth(preferredWidthFromStorage, {
|
||||||
requiresFullWidth: true,
|
requiresFullWidth: true,
|
||||||
|
@ -83,6 +88,15 @@ export const Stories = ({
|
||||||
const [addStoryData, setAddStoryData] = useState<AddStoryType>();
|
const [addStoryData, setAddStoryData] = useState<AddStoryType>();
|
||||||
const [isMyStories, setIsMyStories] = useState(false);
|
const [isMyStories, setIsMyStories] = useState(false);
|
||||||
|
|
||||||
|
// only handle ESC if not showing a child that handles their own ESC
|
||||||
|
useEscapeHandling(
|
||||||
|
(isMyStories && myStories.length) ||
|
||||||
|
isViewingStory ||
|
||||||
|
isStoriesSettingsVisible
|
||||||
|
? undefined
|
||||||
|
: toggleStoriesView
|
||||||
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={classNames('Stories', themeClassName(Theme.Dark))}>
|
<div className={classNames('Stories', themeClassName(Theme.Dark))}>
|
||||||
{addStoryData &&
|
{addStoryData &&
|
||||||
|
|
|
@ -13,7 +13,11 @@ import { getMe } from '../selectors/conversations';
|
||||||
import { getIntl } from '../selectors/user';
|
import { getIntl } from '../selectors/user';
|
||||||
import { getPreferredBadgeSelector } from '../selectors/badges';
|
import { getPreferredBadgeSelector } from '../selectors/badges';
|
||||||
import { getPreferredLeftPaneWidth } from '../selectors/items';
|
import { getPreferredLeftPaneWidth } from '../selectors/items';
|
||||||
import { getStories, shouldShowStoriesView } from '../selectors/stories';
|
import {
|
||||||
|
getSelectedStoryData,
|
||||||
|
getStories,
|
||||||
|
shouldShowStoriesView,
|
||||||
|
} from '../selectors/stories';
|
||||||
import { saveAttachment } from '../../util/saveAttachment';
|
import { saveAttachment } from '../../util/saveAttachment';
|
||||||
import { useConversationsActions } from '../ducks/conversations';
|
import { useConversationsActions } from '../ducks/conversations';
|
||||||
import { useGlobalModalActions } from '../ducks/globalModals';
|
import { useGlobalModalActions } from '../ducks/globalModals';
|
||||||
|
@ -49,6 +53,12 @@ export function SmartStories(): JSX.Element | null {
|
||||||
|
|
||||||
const me = useSelector(getMe);
|
const me = useSelector(getMe);
|
||||||
|
|
||||||
|
const selectedStoryData = useSelector(getSelectedStoryData);
|
||||||
|
|
||||||
|
const isStoriesSettingsVisible = useSelector(
|
||||||
|
(state: StateType) => state.globalModals.isStoriesSettingsVisible
|
||||||
|
);
|
||||||
|
|
||||||
if (!isShowingStoriesView) {
|
if (!isShowingStoriesView) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
@ -75,6 +85,8 @@ export function SmartStories(): JSX.Element | null {
|
||||||
showToast={showToast}
|
showToast={showToast}
|
||||||
stories={stories}
|
stories={stories}
|
||||||
toggleHideStories={toggleHideStories}
|
toggleHideStories={toggleHideStories}
|
||||||
|
isViewingStory={selectedStoryData !== undefined}
|
||||||
|
isStoriesSettingsVisible={isStoriesSettingsVisible}
|
||||||
{...storiesActions}
|
{...storiesActions}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in New Issue