ehscan-react-components 0.1.11 → 0.1.14

package/dist/Components.d.ts

@@ -1 +1,2 @@
 export { Button } from './Button';
+export { Window } from './Window';

package/dist/Components.js

@@ -2,3 +2,4 @@
 //     return <Button />
 // }
 export { Button } from './Button';
+export { Window } from './Window';

package/dist/Window.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+export interface Props {
+    trackMove?: (args?: any) => void;
+    open: boolean;
+    initialPosition?: {
+        x: number;
+        y: number;
+    };
+    initialWidth?: number;
+    initialBodyPadding?: number;
+    header?: React.ReactNode;
+    body?: React.ReactNode;
+    footer?: React.ReactNode;
+    onClose?: () => void;
+}
+export declare const Window: React.FC<Props>;

package/dist/Window.js

@@ -0,0 +1,116 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// import React, { useRef, useEffect, useState } from "react";
+// import { useDraggable } from "./tools/useDraggable"; // adjust path as needed
+// export interface WindowProps {
+//     trackMove?: (args?: any) => void;
+//     open: boolean;
+//     initialPosition?: { x: number; y: number };
+//     initialWidth?: number;
+//     initialBodyPadding?: number;
+//     header?: React.ReactNode;
+//     body?: React.ReactNode;
+//     footer?: React.ReactNode;
+//     onClose?: () => void;
+// }
+// export default function Window({
+//     trackMove,
+//     open,
+//     initialPosition = { x: 600, y: 100 },
+//     initialWidth = 400,
+//     initialBodyPadding = 20,
+//     header,
+//     body,
+//     footer,
+//     onClose,
+// }: WindowProps) {
+//     const targetRef = useRef<HTMLDivElement>(null);
+//     const headerRef = useRef<HTMLDivElement>(null);
+//     const resizeHandleRef = useRef<HTMLDivElement>(null);
+//     const bodyRef = useRef<HTMLDivElement>(null);
+//     const footerRef = useRef<HTMLDivElement>(null);
+//     const [maxHeight] = useState("auto");
+//     const [bodyPadding] = useState(initialBodyPadding);
+//     const [windowWidth] = useState(initialWidth);
+//     useDraggable(open, targetRef, headerRef, bodyRef, resizeHandleRef, bodyPadding, trackMove);
+//     useEffect(() => { //init
+//         if (!bodyRef.current || !targetRef.current || !headerRef.current) return;
+//         const headerHeight = headerRef.current.offsetHeight;
+//         const topPosition = targetRef.current.getBoundingClientRect().top;
+//         const availableHeight = window.innerHeight - topPosition - 20; // 20px bottom margin
+//         const bodyMaxHeight = Math.max(100, availableHeight - headerHeight - 2 * bodyPadding);
+//         bodyRef.current.style.maxHeight = `${bodyMaxHeight}px`;
+//         bodyRef.current.style.overflowY = "auto";
+//     }, [bodyPadding]);
+//     const [fadeIn, setFadeIn] = useState(false)
+//     useEffect(() => {
+//         if (open === undefined) return;
+//         setTimeout(() => {
+//             setFadeIn(open)
+//         }, 0)
+//     }, [open])
+//     if (!open) return null;
+//     return (
+//         <div ref={targetRef} className={`ext-window${fadeIn ? ' fadein' : ''}`} style={{ left: `${initialPosition.x}px`, top: `${initialPosition.y}px`, minWidth: `${windowWidth}px` }}>
+//             {/* Header */}
+//             <div ref={headerRef} className="ext-window-header">
+//                 {header ?? (
+//                     <>
+//                         <div className="ext-window-drag-handle">||</div>
+//                         <div className="ext-window-header-title">Header</div>
+//                         <div onClick={onClose}>close</div>
+//                     </>
+//                 )}
+//             </div>
+//             {/* Body */}
+//             <div
+//                 ref={bodyRef}
+//                 className="ext-window-body _ewb"
+//                 style={{ padding: `${bodyPadding}px` }}
+//             >
+//                 {body ?? <>Body</>}
+//             </div>
+//             {/* Footer */}
+//             {footer && (
+//                 <div ref={footerRef} className="ext-window-footer">
+//                     {footer}
+//                 </div>
+//             )}
+//             {/* Resize handle */}
+//             <div className="resize-handle" ref={resizeHandleRef} />
+//         </div>
+//     );
+// }
+import { useRef, useEffect, useState } from "react";
+import { useDraggable } from "./tools/useDraggable"; // adjust path as needed
+export const Window = ({ trackMove, open, initialPosition = { x: 600, y: 100 }, initialWidth = 400, initialBodyPadding = 20, header, body, footer, onClose, }) => {
+    const targetRef = useRef(null);
+    const headerRef = useRef(null);
+    const resizeHandleRef = useRef(null);
+    const bodyRef = useRef(null);
+    const footerRef = useRef(null);
+    const [maxHeight] = useState("auto");
+    const [bodyPadding] = useState(initialBodyPadding);
+    const [windowWidth] = useState(initialWidth);
+    useDraggable(open, targetRef, headerRef, bodyRef, resizeHandleRef, bodyPadding, trackMove);
+    useEffect(() => {
+        if (!bodyRef.current || !targetRef.current || !headerRef.current)
+            return;
+        const headerHeight = headerRef.current.offsetHeight;
+        const topPosition = targetRef.current.getBoundingClientRect().top;
+        const availableHeight = window.innerHeight - topPosition - 20; // 20px bottom margin
+        const bodyMaxHeight = Math.max(100, availableHeight - headerHeight - 2 * bodyPadding);
+        bodyRef.current.style.maxHeight = `${bodyMaxHeight}px`;
+        bodyRef.current.style.overflowY = "auto";
+    }, [bodyPadding]);
+    const [fadeIn, setFadeIn] = useState(false);
+    useEffect(() => {
+        if (open === undefined)
+            return;
+        setTimeout(() => {
+            setFadeIn(open);
+        }, 0);
+    }, [open]);
+    if (!open)
+        return null;
+    return (_jsxs("div", { ref: targetRef, className: `ext-window${fadeIn ? ' fadein' : ''}`, style: { left: `${initialPosition.x}px`, top: `${initialPosition.y}px`, minWidth: `${windowWidth}px` }, children: [_jsx("div", { ref: headerRef, className: "ext-window-header", children: header !== null && header !== void 0 ? header : (_jsxs(_Fragment, { children: [_jsx("div", { className: "ext-window-drag-handle", children: "||" }), _jsx("div", { className: "ext-window-header-title", children: "Header" }), _jsx("div", { onClick: onClose, children: "close" })] })) }), _jsx("div", { ref: bodyRef, className: "ext-window-body _ewb", style: { padding: `${bodyPadding}px` }, children: body !== null && body !== void 0 ? body : _jsx(_Fragment, { children: "Body" }) }), footer && (_jsx("div", { ref: footerRef, className: "ext-window-footer", children: footer })), _jsx("div", { className: "resize-handle", ref: resizeHandleRef })] }));
+};

package/dist/style/window.css

@@ -0,0 +1,95 @@
+/* 🪟 ExtWindow Base */
+.ext-window {
+  /* --ext-window-bck-color: white;
+  --ext-window-border-radius: 12px;
+  --ext-window-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
+  --ext-window-opacity: 0;
+  --ext-window-transition: opacity 0.4s ease-in-out;
+  --ext-window-width: 400px;
+  --ext-window-min-height: 300px; */
+
+  background-color: var(--ext-window-bck-color, white);
+  position: absolute;
+  width: var(--ext-window-width, 400px);
+  min-height: var(--ext-window-min-height, 300px);
+  border-radius: var(--ext-window-border-radius, 12px);
+  box-shadow: var(--ext-window-shadow);
+  opacity: var(--ext-window-opacity, 0);
+  transition: var(--ext-window-transition);
+}
+
+.ext-window.fadein {
+  opacity: 1;
+}
+
+/* Header */
+.ext-window-header {
+  --ext-window-header-bck-color: var(--ext-window-bck-color, white);
+  padding: 0 10px;
+  border-radius: var(--ext-window-border-radius, 12px) var(--ext-window-border-radius, 12px) 0 0;
+  background-color: var(--ext-window-header-bck-color);
+  align-items: center;
+  justify-content: center;
+  height: 50px;
+  display: flex;
+  user-select: none;
+  gap: 10px;
+}
+
+.ext-window-header-title {
+  flex: 1;
+  line-height: 1.4;
+  display: flex;
+  align-items: center;
+  padding: 5px 0 2px 0;
+  cursor: move;
+}
+
+.ext-window-header-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--ext-window-close-bck, aqua);
+  width: 40px;
+  height: 40px;
+  border-radius: var(--ext-window-border-radius, 12px);
+  cursor: pointer;
+}
+
+/* Body */
+.ext-window-body {
+  background-color: var(--ext-window-body-bck, transparent);
+  min-height: var(--ext-window-min-height, 300px);
+  overflow: auto;
+  user-select: none;
+}
+
+._ewb::-webkit-scrollbar {
+  width: 0;
+  background-color: var(--ext-window-bck-color, white);
+}
+
+._ewb:hover::-webkit-scrollbar {
+  width: 6px;
+}
+
+._ewb::-webkit-scrollbar-thumb {
+  background-color: var(--ext-window-scrollbar-thumb, white);
+  border-radius: 12px;
+}
+
+._ewb:hover::-webkit-scrollbar-thumb {
+  background-color: var(--ext-window-scrollbar-thumb-hover, #555);
+}
+
+/* Resize handle */
+.resize-handle {
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  cursor: se-resize;
+  background: var(--ext-window-resize-bck, darkgreen);
+  border-radius: 12px 0 12px 0;
+}

package/dist/tools/useDraggable.d.ts

@@ -0,0 +1 @@
+export declare const useDraggable: (open: boolean, targetRef: React.RefObject<HTMLElement | null>, handleRef?: React.RefObject<HTMLElement | null>, bodyRef?: React.RefObject<HTMLElement | null>, resizeHandleRef?: React.RefObject<HTMLElement | null>, bodyPadding?: number, trackMove?: (arg?: any) => void) => void;

package/dist/tools/useDraggable.js

@@ -0,0 +1,91 @@
+import { useEffect, useRef } from "react";
+export const useDraggable = (open, targetRef, handleRef, bodyRef, resizeHandleRef, bodyPadding = 0, // used in max-height calculation
+trackMove) => {
+    const isDragging = useRef(false);
+    const isResizing = useRef(false);
+    const offset = useRef({ x: 0, y: 0 });
+    const initialMouseX = useRef(0);
+    const initialWidth = useRef(0);
+    useEffect(() => {
+        var _a;
+        if (!open)
+            return;
+        const target = targetRef.current;
+        const handleElement = (_a = handleRef === null || handleRef === void 0 ? void 0 : handleRef.current) !== null && _a !== void 0 ? _a : target;
+        const resizeHandle = resizeHandleRef === null || resizeHandleRef === void 0 ? void 0 : resizeHandleRef.current;
+        if (!target || !handleElement || !resizeHandle)
+            return;
+        // --- Drag start ---
+        const handleMouseDown = (e) => {
+            const rect = target.getBoundingClientRect();
+            offset.current = { x: e.clientX - rect.left, y: e.clientY - rect.top };
+            isDragging.current = true;
+            trackMove === null || trackMove === void 0 ? void 0 : trackMove(offset.current);
+        };
+        // --- Resize start (horizontal only) ---
+        const handleResizeStart = (e) => {
+            e.stopPropagation(); // prevent dragging
+            isResizing.current = true;
+            initialMouseX.current = e.clientX;
+            initialWidth.current = target.offsetWidth;
+            trackMove === null || trackMove === void 0 ? void 0 : trackMove({ x: initialWidth.current });
+        };
+        // --- Mouse move ---
+        const handleMouseMove = (e) => {
+            if (!target)
+                return;
+            // --- Dragging ---
+            if (isDragging.current) {
+                const windowWidth = window.innerWidth;
+                const windowHeight = window.innerHeight;
+                let newX = e.clientX - offset.current.x;
+                let newY = e.clientY - offset.current.y;
+                newX = Math.max(0, Math.min(newX, windowWidth - target.offsetWidth));
+                newY = Math.max(0, Math.min(newY, windowHeight - target.offsetHeight));
+                target.style.left = `${newX}px`;
+                target.style.top = `${newY}px`;
+            }
+            // --- Horizontal resizing ---
+            if (isResizing.current) {
+                const rect = target.getBoundingClientRect();
+                const diffX = e.clientX - initialMouseX.current;
+                // Maximum width so window doesn't go off the right edge
+                const maxWidthByScreen = window.innerWidth - rect.left;
+                // Enforce both screen limit and 1000px max
+                const newWidth = Math.max(200, Math.min(initialWidth.current + diffX, maxWidthByScreen, 1000));
+                target.style.width = `${newWidth}px`;
+                // Recalculate body max-height
+                if ((bodyRef === null || bodyRef === void 0 ? void 0 : bodyRef.current) && handleElement) {
+                    const availableHeight = target.offsetHeight - handleElement.offsetHeight - 2 * bodyPadding;
+                    bodyRef.current.style.maxHeight = `${availableHeight}px`;
+                    bodyRef.current.style.overflowY = "auto";
+                }
+            }
+        };
+        // --- Mouse up ---
+        const handleMouseUp = () => {
+            isDragging.current = false;
+            isResizing.current = false;
+            // recalc body max-height after drag stops
+            if ((bodyRef === null || bodyRef === void 0 ? void 0 : bodyRef.current) && target) {
+                const headerHeight = handleElement.offsetHeight;
+                const windowRect = target.getBoundingClientRect();
+                const availableHeight = window.innerHeight - windowRect.top - 20; // bottom margin
+                const bodyMaxHeight = Math.max(100, availableHeight - headerHeight - 2 * bodyPadding);
+                bodyRef.current.style.maxHeight = `${bodyMaxHeight}px`;
+                bodyRef.current.style.overflowY = "auto";
+            }
+        };
+        // Attach listeners
+        handleElement.addEventListener("mousedown", handleMouseDown);
+        resizeHandle.addEventListener("mousedown", handleResizeStart);
+        window.addEventListener("mousemove", handleMouseMove);
+        window.addEventListener("mouseup", handleMouseUp);
+        return () => {
+            handleElement.removeEventListener("mousedown", handleMouseDown);
+            resizeHandle.removeEventListener("mousedown", handleResizeStart);
+            window.removeEventListener("mousemove", handleMouseMove);
+            window.removeEventListener("mouseup", handleMouseUp);
+        };
+    }, [open, targetRef, handleRef, bodyRef, resizeHandleRef, bodyPadding]);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ehscan-react-components",
-  "version": "0.1.11",
+  "version": "0.1.14",
   "description": "components",
   "main": "dist/Components.js",
   "types": "dist/Components.d.ts",