diff --git a/packages/react-chat-example/src/index.tsx b/packages/react-chat-example/src/index.tsx index 27277e1b..c8e6f8d4 100644 --- a/packages/react-chat-example/src/index.tsx +++ b/packages/react-chat-example/src/index.tsx @@ -1,10 +1,10 @@ -import { ReactChat } from "@dappconnect/react-chat"; +import { community, lightTheme, ReactChat } from "@dappconnect/react-chat"; import React from "react"; import ReactDOM from "react-dom"; ReactDOM.render(
- +
, document.getElementById("root") ); diff --git a/packages/react-chat/src/components/Chat.tsx b/packages/react-chat/src/components/Chat.tsx index b16d9234..b2b63410 100644 --- a/packages/react-chat/src/components/Chat.tsx +++ b/packages/react-chat/src/components/Chat.tsx @@ -1,6 +1,7 @@ import React, { useState } from "react"; import styled from "styled-components"; +import { useNarrow } from "../contexts/narrowProvider"; import { ChannelData, channels } from "../helpers/channelsMock"; import { CommunityData } from "../helpers/communityMock"; import { useMessenger } from "../hooks/useMessenger"; @@ -18,7 +19,9 @@ interface ChatProps { export function Chat({ theme, community }: ChatProps) { const [activeChannel, setActiveChannel] = useState(channels[0]); 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 { messenger, @@ -33,7 +36,7 @@ export function Chat({ theme, community }: ChatProps) { return ( - {showChannels && ( + {showChannels && !narrow && ( Connecting to waku )} - {showMembers && ( + {showMembers && !narrow && ( (null); return ( -
- - -
+ +
+ + +
+
); } diff --git a/packages/react-chat/src/contexts/narrowProvider.tsx b/packages/react-chat/src/contexts/narrowProvider.tsx new file mode 100644 index 00000000..0c5d3c28 --- /dev/null +++ b/packages/react-chat/src/contexts/narrowProvider.tsx @@ -0,0 +1,19 @@ +import React, { createContext, useContext } from "react"; + +import { useRefWidthBreak } from "../hooks/useRefWidthBreak"; + +const NarrowContext = createContext(false); + +export function useNarrow() { + return useContext(NarrowContext); +} + +interface NarrowProviderProps { + children: React.ReactNode; + myRef: React.RefObject; +} + +export function NarrowProvider({ children, myRef }: NarrowProviderProps) { + const narrow = useRefWidthBreak(myRef, 735); + return ; +} diff --git a/packages/react-chat/src/hooks/useRefWidthBreak.ts b/packages/react-chat/src/hooks/useRefWidthBreak.ts new file mode 100644 index 00000000..bfa1295c --- /dev/null +++ b/packages/react-chat/src/hooks/useRefWidthBreak.ts @@ -0,0 +1,30 @@ +import React, { useEffect, useState } from "react"; + +export function useRefWidthBreak( + myRef: React.RefObject, + 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; +} diff --git a/packages/react-chat/src/index.ts b/packages/react-chat/src/index.ts index d9665932..36b9ddfe 100644 --- a/packages/react-chat/src/index.ts +++ b/packages/react-chat/src/index.ts @@ -1,3 +1,5 @@ import { ReactChat } from "./components/ReactChat"; +import { community } from "./helpers/communityMock"; +import { darkTheme, lightTheme } from "./styles/themes"; -export { ReactChat }; +export { ReactChat, lightTheme, darkTheme, community };