Add resizing provider (#31)

This commit is contained in:
Maria Rushkova 2021-10-04 08:49:21 +02:00 committed by GitHub
parent 34ce0c4c87
commit aa034e963f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 77 additions and 14 deletions

View File

@ -1,10 +1,10 @@
import { ReactChat } from "@dappconnect/react-chat"; import { community, lightTheme, ReactChat } from "@dappconnect/react-chat";
import React from "react"; import React from "react";
import ReactDOM from "react-dom"; import ReactDOM from "react-dom";
ReactDOM.render( ReactDOM.render(
<div style={{ height: "100%" }}> <div style={{ height: "100%" }}>
<ReactChat /> <ReactChat theme={lightTheme} community={community} />
</div>, </div>,
document.getElementById("root") document.getElementById("root")
); );

View File

@ -1,6 +1,7 @@
import React, { useState } from "react"; import React, { useState } from "react";
import styled from "styled-components"; import styled from "styled-components";
import { useNarrow } from "../contexts/narrowProvider";
import { ChannelData, channels } from "../helpers/channelsMock"; import { ChannelData, channels } from "../helpers/channelsMock";
import { CommunityData } from "../helpers/communityMock"; import { CommunityData } from "../helpers/communityMock";
import { useMessenger } from "../hooks/useMessenger"; import { useMessenger } from "../hooks/useMessenger";
@ -18,7 +19,9 @@ interface ChatProps {
export function Chat({ theme, community }: ChatProps) { export function Chat({ theme, community }: ChatProps) {
const [activeChannel, setActiveChannel] = useState<ChannelData>(channels[0]); const [activeChannel, setActiveChannel] = useState<ChannelData>(channels[0]);
const [showMembers, setShowMembers] = useState(true); const [showMembers, setShowMembers] = useState(true);
const [showChannels, setShowChannels] = useState(false); const [showChannels, setShowChannels] = useState(true);
const narrow = useNarrow();
// const className = useMemo(() => (narrow ? 'narrow' : ''), [narrow]);
const { const {
messenger, messenger,
@ -33,7 +36,7 @@ export function Chat({ theme, community }: ChatProps) {
return ( return (
<ChatWrapper> <ChatWrapper>
{showChannels && ( {showChannels && !narrow && (
<Channels <Channels
notifications={notifications} notifications={notifications}
clearNotifications={clearNotifications} clearNotifications={clearNotifications}
@ -57,7 +60,7 @@ export function Chat({ theme, community }: ChatProps) {
) : ( ) : (
<Loading>Connecting to waku</Loading> <Loading>Connecting to waku</Loading>
)} )}
{showMembers && ( {showMembers && !narrow && (
<Members <Members
theme={theme} theme={theme}
channel={activeChannel} channel={activeChannel}

View File

@ -1,16 +1,25 @@
import React from "react"; import React, { useRef } from "react";
import { community } from "../helpers/communityMock"; import { NarrowProvider } from "../contexts/narrowProvider";
import { CommunityData } from "../helpers/communityMock";
import { GlobalStyle } from "../styles/GlobalStyle"; import { GlobalStyle } from "../styles/GlobalStyle";
import { lightTheme } from "../styles/themes"; import { Theme } from "../styles/themes";
import { Chat } from "./Chat"; import { Chat } from "./Chat";
export function ReactChat() { interface ReactChatProps {
theme: Theme;
community: CommunityData;
}
export function ReactChat({ theme, community }: ReactChatProps) {
const ref = useRef<HTMLHeadingElement>(null);
return ( return (
<div> <NarrowProvider myRef={ref}>
<GlobalStyle /> <div ref={ref}>
<Chat theme={lightTheme} community={community} /> <GlobalStyle />
</div> <Chat theme={theme} community={community} />
</div>
</NarrowProvider>
); );
} }

View File

@ -0,0 +1,19 @@
import React, { createContext, useContext } from "react";
import { useRefWidthBreak } from "../hooks/useRefWidthBreak";
const NarrowContext = createContext<boolean>(false);
export function useNarrow() {
return useContext(NarrowContext);
}
interface NarrowProviderProps {
children: React.ReactNode;
myRef: React.RefObject<HTMLHeadingElement>;
}
export function NarrowProvider({ children, myRef }: NarrowProviderProps) {
const narrow = useRefWidthBreak(myRef, 735);
return <NarrowContext.Provider value={narrow} children={children} />;
}

View File

@ -0,0 +1,30 @@
import React, { useEffect, useState } from "react";
export function useRefWidthBreak(
myRef: React.RefObject<HTMLHeadingElement>,
sizeThreshold: number
) {
const [widthBreak, setWidthBreak] = useState(false);
useEffect(() => {
const checkDimensions = () => {
const width = myRef?.current?.offsetWidth ?? 0;
if (width && width < sizeThreshold && width > 0) {
if (widthBreak === false) {
setWidthBreak(true);
}
} else {
if (widthBreak === true) {
setWidthBreak(false);
}
}
};
checkDimensions();
window.addEventListener("resize", checkDimensions);
return () => {
window.removeEventListener("resize", checkDimensions);
};
}, [myRef, widthBreak, myRef?.current?.offsetWidth]);
return widthBreak;
}

View File

@ -1,3 +1,5 @@
import { ReactChat } from "./components/ReactChat"; import { ReactChat } from "./components/ReactChat";
import { community } from "./helpers/communityMock";
import { darkTheme, lightTheme } from "./styles/themes";
export { ReactChat }; export { ReactChat, lightTheme, darkTheme, community };