From 1fcaf3e93b4e35ccb37e040afff2601e99ca8776 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Thu, 29 Jun 2023 12:49:39 -0300 Subject: [PATCH] fix postion --- public/index.html | 2 +- src/chatWidget/chatTrigger/index.tsx | 14 +++--- src/chatWidget/chatWindow/index.tsx | 11 +++-- src/chatWidget/index.tsx | 4 +- src/chatWidget/utils.ts | 68 ++++++++++++++++------------ 5 files changed, 56 insertions(+), 43 deletions(-) diff --git a/public/index.html b/public/index.html index 6a710e5..935cd25 100644 --- a/public/index.html +++ b/public/index.html @@ -6,6 +6,6 @@ Document - + \ No newline at end of file diff --git a/src/chatWidget/chatTrigger/index.tsx b/src/chatWidget/chatTrigger/index.tsx index 286981c..6d0beff 100644 --- a/src/chatWidget/chatTrigger/index.tsx +++ b/src/chatWidget/chatTrigger/index.tsx @@ -1,11 +1,11 @@ import { MessageSquare, X } from "lucide-react" -export default function ChatTrigger({style, open, setOpen, triggerRef}:{style?:React.CSSProperties, open:boolean, setOpen:Function, triggerRef:React.RefObject|null}){ - +export default function ChatTrigger({ style, open, setOpen, triggerRef }: { style?: React.CSSProperties, open: boolean, setOpen: Function, triggerRef: React.RefObject | null }) { + return ( -
- -
+ ) } \ No newline at end of file diff --git a/src/chatWidget/chatWindow/index.tsx b/src/chatWidget/chatWindow/index.tsx index cc44993..2161071 100644 --- a/src/chatWidget/chatWindow/index.tsx +++ b/src/chatWidget/chatWindow/index.tsx @@ -1,11 +1,14 @@ import { Send } from 'lucide-react'; import { getChatPosition } from '../utils'; +import { useRef } from 'react'; -export default function ChatWindow({ position, triggerRef}: {position: string, triggerRef: React.RefObject }) { - const relativePosition = getChatPosition(position, triggerRef.current!.getBoundingClientRect()); +export default function ChatWindow({ position, triggerRef, width=288, height=320}: +{position: string, triggerRef: React.RefObject, width?: number, height?: number }) { + const ref = useRef(null); + const {left, top} = getChatPosition(position, triggerRef.current!.getBoundingClientRect(), width,height); return ( -
-
+
+
{/* Chat messages */}
diff --git a/src/chatWidget/index.tsx b/src/chatWidget/index.tsx index 3902f59..67dde07 100644 --- a/src/chatWidget/index.tsx +++ b/src/chatWidget/index.tsx @@ -4,11 +4,11 @@ import ChatWindow from "./chatWindow"; export default function ChatWidget({ trigger }: { trigger?: React.CSSProperties }) { const [open, setOpen] = useState(false); - const triggerRef = useRef(null); + const triggerRef = useRef(null); return (
- {open && } + {open && }
) } diff --git a/src/chatWidget/utils.ts b/src/chatWidget/utils.ts index cc29dec..10a0c81 100644 --- a/src/chatWidget/utils.ts +++ b/src/chatWidget/utils.ts @@ -1,30 +1,40 @@ -export function getChatPosition(position: string,triggerPosition:DOMRect){ - if (!triggerPosition) { - return ""; // Return empty string if trigger position is not available - } - - const { top, left, width, height } = triggerPosition; - - const distance = 10; // Adjust this value to set the desired distance from the trigger +export function getChatPosition( + position: string, + triggerPosition: DOMRect, + Cwidth:number, + Cheight:number +): { top: string; left: string; } { + if (!triggerPosition) { + return { top: "0px", left: "0px" }; // Return empty string if trigger position is not available + } - switch (position) { - case "top-left": - return `top-${top - height - distance}px left-${left}px`; - case "top-center": - return `top-${top - height - distance}px left-${left + width / 2}px -translate-x-1/2`; - case "top-right": - return `top-${top - height - distance}px right-${window.innerWidth - (left + width)}px`; - case "center-left": - return `top-${top + height / 2}px left-${left - width - distance}px -translate-y-1/2`; - case "center-right": - return `top-${top + height / 2}px right-${window.innerWidth - (left + width) - distance}px -translate-y-1/2`; - case "bottom-right": - return `bottom-${window.innerHeight - top + distance}px right-${window.innerWidth - (left + width)}px`; - case "bottom-center": - return `bottom-${window.innerHeight - top + distance}px left-${left + width / 2}px -translate-x-1/2`; - case "bottom-left": - return `bottom-${window.innerHeight - top + distance}px left-${left}px`; - default: - return ""; - } - } \ No newline at end of file + const { top, left, width, height } = triggerPosition; + + const distance = 5; // Adjust this value to set the desired distance from the trigger + + switch (position) { + case "top-left": + return { top: - distance - Cheight + "px", left: -Cwidth + "px" }; + case "top-center": + return { top: - distance - Cheight + "px", left: width/2-Cwidth / 2 + "px" }; + case "top-right": + return { top: - distance - Cheight + "px", left: width+ "px" }; + case "center-left": + return { top: width/2-Cheight/2 + "px", left: -Cwidth - distance + "px" }; + case "center-right": + return { + top: width/2-Cheight/2 + "px", + left: width + distance + "px", + }; + case "bottom-right": + return { top: distance + height+ "px", left: width + "px" }; + case "bottom-center": + return { + top: distance + height+ "px", + left: width/2-Cwidth / 2 + "px", + }; + case "bottom-left": + return { top: distance + height+ "px", left: -Cwidth + "px"}; + default: + return { top: - distance - Cheight + "px", left: -Cwidth + "px" }; } +}