fix(channel header): fix action callbacks

This commit is contained in:
Paul Makles 2021-12-30 19:44:15 +00:00
parent b065fba6a4
commit 4773b76ea9
2 changed files with 32 additions and 15 deletions

View file

@ -1 +1,11 @@
/**
* Schedule a task at the end of the Event Loop
* @param cb Callback
*/
export const defer = (cb: () => void) => setTimeout(cb, 0);
/**
* Schedule a task at the end of the second Event Loop
* @param cb Callback
*/
export const chainedDefer = (cb: () => void) => defer(() => defer(cb));

View file

@ -10,6 +10,7 @@ import {
import { observer } from "mobx-react-lite";
import { useHistory } from "react-router-dom";
import { chainedDefer, defer } from "../../../lib/defer";
import { internalEmit } from "../../../lib/eventEmitter";
import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
import { voiceState, VoiceStatus } from "../../../lib/vortex/VoiceState";
@ -29,7 +30,8 @@ export default function HeaderActions({ channel }: ChannelHeaderProps) {
const { openScreen } = useIntermediate();
const history = useHistory();
function openRightSidebar() {
function slideOpen() {
if (!isTouchscreenDevice) return;
const panels = document.querySelector("#app > div > div > div");
panels?.scrollTo({
behavior: "smooth",
@ -37,12 +39,25 @@ export default function HeaderActions({ channel }: ChannelHeaderProps) {
});
}
function openSidebar() {
if (isTouchscreenDevice) {
openRightSidebar();
} else {
function openSearch() {
if (
!isTouchscreenDevice &&
!layout.getSectionState(SIDEBAR_MEMBERS, true)
) {
layout.toggleSectionState(SIDEBAR_MEMBERS, true);
}
slideOpen();
chainedDefer(() => internalEmit("RightSidebar", "open", "search"));
}
function openMembers() {
if (!isTouchscreenDevice) {
layout.toggleSectionState(SIDEBAR_MEMBERS, true);
}
slideOpen();
chainedDefer(() => internalEmit("RightSidebar", "open", undefined));
}
return (
@ -74,21 +89,13 @@ export default function HeaderActions({ channel }: ChannelHeaderProps) {
)}
<VoiceActions channel={channel} />
{channel.channel_type !== "VoiceChannel" && (
<IconButton
onClick={() => {
internalEmit("RightSidebar", "open", "search");
openRightSidebar();
}}>
<IconButton onClick={openSearch}>
<Search size={25} />
</IconButton>
)}
{(channel.channel_type === "Group" ||
channel.channel_type === "TextChannel") && (
<IconButton
onClick={() => {
internalEmit("RightSidebar", "open", undefined);
openRightSidebar();
}}>
<IconButton onClick={openMembers}>
<Group size={25} />
</IconButton>
)}