import {SideHeaderEvents, SideHeaderState} from "tc-shared/ui/frames/side/HeaderDefinitions"; import {Registry} from "tc-shared/events"; import React = require("react"); import {SideHeaderRenderer} from "tc-shared/ui/frames/side/HeaderRenderer"; import {ConversationPanel} from "tc-shared/ui/frames/side/AbstractConversationRenderer"; import {SideBarEvents, SideBarType, SideBarTypeData} from "tc-shared/ui/frames/SideBarDefinitions"; import {useContext, useState} from "react"; import {ClientInfoRenderer} from "tc-shared/ui/frames/side/ClientInfoRenderer"; import {PrivateConversationsPanel} from "tc-shared/ui/frames/side/PrivateConversationRenderer"; const cssStyle = require("./SideBarRenderer.scss"); const EventContent = React.createContext>(undefined); function useContentData(type: T) : SideBarTypeData[T] { const events = useContext(EventContent); const [ contentData, setContentData ] = useState(() => { events.fire("query_content_data", { content: type }); return undefined; }); events.reactUse("notify_content_data", event => event.content === type && setContentData(event.data)); return contentData; } const ContentRendererChannelConversation = () => { const contentData = useContentData("channel-chat"); if(!contentData) { return null; } return ( ); }; const ContentRendererPrivateConversation = () => { const contentData = useContentData("private-chat"); if(!contentData) { return null; } return ( ); }; const ContentRendererClientInfo = () => { const contentData = useContentData("client-info"); if(!contentData) { return null; } return ( ); }; const SideBarFrame = (props: { type: SideBarType }) => { switch (props.type) { case "channel-chat": return ; case "private-chat": return ; case "client-info": return ; case "music-manage": /* TODO! */ case "none": default: return null; } } const SideBarHeader = (props: { type: SideBarType, eventsHeader: Registry }) => { let headerState: SideHeaderState; switch (props.type) { case "none": headerState = { state: "none" }; break; case "channel-chat": headerState = { state: "conversation", mode: "channel" }; break; case "private-chat": headerState = { state: "conversation", mode: "private" }; break; case "client-info": headerState = { state: "client" }; break; case "music-manage": headerState = { state: "music-bot" }; break; } return ; } export const SideBarRenderer = (props: { events: Registry, eventsHeader: Registry }) => { const [ content, setContent ] = useState(() => { props.events.fire("query_content"); return "none"; }); props.events.reactUse("notify_content", event => setContent(event.content)); return (
) };