Add floating example (#70)

packages/react-chat-example/package.json

@@ -26,7 +26,8 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.2.0",
-    "stream-browserify": "^3.0.0"
+    "stream-browserify": "^3.0.0",
+    "styled-components": "^5.3.1"
   },
   "devDependencies": {
     "@testing-library/react-hooks": "^7.0.1",

packages/react-chat-example/src/index.tsx

@@ -1,6 +1,7 @@
 import { community, lightTheme, ReactChat } from "@dappconnect/react-chat";
-import React from "react";
+import React, { useRef, useState } from "react";
 import ReactDOM from "react-dom";
+import styled from "styled-components";
 
 const fetchMetadata = async (link: string) => {
   const response = await fetch("https://localhost:3000", {
@@ -21,13 +22,96 @@ const fetchMetadata = async (link: string) => {
   }
 };
 
-ReactDOM.render(
+function DragDiv() {
-  <div style={{ height: "100%" }}>
+  console.log();
+  const [x, setX] = useState(0);
+  const [y, setY] = useState(0);
+  const [width, setWidth] = useState(window.innerWidth - 50);
+  const [height, setHeight] = useState(window.innerHeight - 50);
+  const [showChat, setShowChat] = useState(true);
+  const ref = useRef<HTMLHeadingElement>(null);
+  const moved = useRef(false);
+  const setting = useRef("");
+
+  const onMouseMove = (e: MouseEvent) => {
+    if (setting.current === "position") {
+      e.preventDefault();
+      setX(e.x - 20);
+      setY(e.y - 20);
+    }
+    if (setting.current === "size") {
+      setWidth(e.x - x);
+      setHeight(e.y - y);
+      e.preventDefault();
+    }
+    moved.current = true;
+  };
+
+  const onMouseUp = () => {
+    document.removeEventListener("mousemove", onMouseMove);
+    document.removeEventListener("mouseup", onMouseUp);
+    if (!moved.current) [setShowChat((prev) => !prev)];
+    moved.current = false;
+  };
+
+  return (
+    <Drag style={{ left: x, top: y, width: width, height: height }} ref={ref}>
+      <Bubble
+        onMouseDown={() => {
+          setting.current = "position";
+          document.addEventListener("mousemove", onMouseMove);
+          document.addEventListener("mouseup", onMouseUp);
+        }}
+      />
+      {showChat && (
+        <>
+          <div
+            style={{ height: "calc(100% - 50px)", border: "1px solid black" }}
+          >
             <ReactChat
               theme={lightTheme}
               community={community}
               fetchMetadata={fetchMetadata}
             />
+          </div>
+          <SizeSet
+            onMouseDown={() => {
+              setting.current = "size";
+              document.addEventListener("mousemove", onMouseMove);
+              document.addEventListener("mouseup", onMouseUp);
+            }}
+          ></SizeSet>
+        </>
+      )}
+    </Drag>
+  );
+}
+
+const SizeSet = styled.div`
+  margin-left: auto;
+  margin-right: 0px;
+  width: 10px;
+  height: 10px;
+  background-color: light-grey;
+  border: 1px solid;
+`;
+
+const Bubble = styled.div`
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  background-color: lightblue;
+  border: 1px solid;
+`;
+
+const Drag = styled.div`
+  position: absolute;
+  overflow: hide;
+`;
+
+ReactDOM.render(
+  <div style={{ height: "100%" }}>
+    <DragDiv />
   </div>,
   document.getElementById("root")
 );

packages/react-chat/src/components/Chat.tsx

@@ -89,6 +89,6 @@ export function Chat({ theme, community, fetchMetadata }: ChatProps) {
 
 const ChatWrapper = styled.div`
   width: 100%;
-  height: 100vh;
+  height: 100%;
   display: flex;
 `;

packages/react-chat/src/components/ReactChat.tsx

@@ -1,5 +1,6 @@
 import React, { useRef } from "react";
 import { ThemeProvider } from "styled-components";
+import styled from "styled-components";
 
 import { NarrowProvider } from "../contexts/narrowProvider";
 import { CommunityData } from "../helpers/communityMock";
@@ -20,15 +21,20 @@ export function ReactChat({ theme, community, fetchMetadata }: ReactChatProps) {
   return (
     <ThemeProvider theme={theme}>
       <NarrowProvider myRef={ref}>
-        <div ref={ref}>
+        <Wrapper ref={ref}>
           <GlobalStyle />
           <Chat
             community={community}
             fetchMetadata={fetchMetadata}
             theme={theme}
           />
-        </div>
+        </Wrapper>
       </NarrowProvider>
     </ThemeProvider>
   );
 }
+
+const Wrapper = styled.div`
+  height: 100%;
+  overflow: hidden;
+`;

yarn.lock

@@ -258,6 +258,7 @@ __metadata:
     source-map-loader: ^3.0.0
     stream-browserify: ^3.0.0
     style-loader: ^3.3.0
+    styled-components: ^5.3.1
     ts-loader: ^9.2.5
     ts-node: ^10.1.0
     typescript: ^4.3.5