ehscan-react-components 0.1.10 → 0.1.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Window.d.ts +16 -0
- package/dist/Window.js +116 -0
- package/dist/style/button.css +31 -118
- package/dist/style/window.css +95 -0
- package/dist/tools/useDraggable.d.ts +1 -0
- package/dist/tools/useDraggable.js +91 -0
- package/package.json +1 -1
package/dist/Window.d.ts
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
export interface WindowProps {
|
|
3
|
+
trackMove?: (args?: any) => void;
|
|
4
|
+
open: boolean;
|
|
5
|
+
initialPosition?: {
|
|
6
|
+
x: number;
|
|
7
|
+
y: number;
|
|
8
|
+
};
|
|
9
|
+
initialWidth?: number;
|
|
10
|
+
initialBodyPadding?: number;
|
|
11
|
+
header?: React.ReactNode;
|
|
12
|
+
body?: React.ReactNode;
|
|
13
|
+
footer?: React.ReactNode;
|
|
14
|
+
onClose?: () => void;
|
|
15
|
+
}
|
|
16
|
+
export default function Window({ trackMove, open, initialPosition, initialWidth, initialBodyPadding, header, body, footer, onClose, }: WindowProps): import("react/jsx-runtime").JSX.Element | null;
|
package/dist/Window.js
ADDED
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
// import React, { useRef, useEffect, useState } from "react";
|
|
3
|
+
// import { useDraggable } from "./tools/useDraggable"; // adjust path as needed
|
|
4
|
+
// export interface WindowProps {
|
|
5
|
+
// trackMove?: (args?: any) => void;
|
|
6
|
+
// open: boolean;
|
|
7
|
+
// initialPosition?: { x: number; y: number };
|
|
8
|
+
// initialWidth?: number;
|
|
9
|
+
// initialBodyPadding?: number;
|
|
10
|
+
// header?: React.ReactNode;
|
|
11
|
+
// body?: React.ReactNode;
|
|
12
|
+
// footer?: React.ReactNode;
|
|
13
|
+
// onClose?: () => void;
|
|
14
|
+
// }
|
|
15
|
+
// export default function Window({
|
|
16
|
+
// trackMove,
|
|
17
|
+
// open,
|
|
18
|
+
// initialPosition = { x: 600, y: 100 },
|
|
19
|
+
// initialWidth = 400,
|
|
20
|
+
// initialBodyPadding = 20,
|
|
21
|
+
// header,
|
|
22
|
+
// body,
|
|
23
|
+
// footer,
|
|
24
|
+
// onClose,
|
|
25
|
+
// }: WindowProps) {
|
|
26
|
+
// const targetRef = useRef<HTMLDivElement>(null);
|
|
27
|
+
// const headerRef = useRef<HTMLDivElement>(null);
|
|
28
|
+
// const resizeHandleRef = useRef<HTMLDivElement>(null);
|
|
29
|
+
// const bodyRef = useRef<HTMLDivElement>(null);
|
|
30
|
+
// const footerRef = useRef<HTMLDivElement>(null);
|
|
31
|
+
// const [maxHeight] = useState("auto");
|
|
32
|
+
// const [bodyPadding] = useState(initialBodyPadding);
|
|
33
|
+
// const [windowWidth] = useState(initialWidth);
|
|
34
|
+
// useDraggable(open, targetRef, headerRef, bodyRef, resizeHandleRef, bodyPadding, trackMove);
|
|
35
|
+
// useEffect(() => { //init
|
|
36
|
+
// if (!bodyRef.current || !targetRef.current || !headerRef.current) return;
|
|
37
|
+
// const headerHeight = headerRef.current.offsetHeight;
|
|
38
|
+
// const topPosition = targetRef.current.getBoundingClientRect().top;
|
|
39
|
+
// const availableHeight = window.innerHeight - topPosition - 20; // 20px bottom margin
|
|
40
|
+
// const bodyMaxHeight = Math.max(100, availableHeight - headerHeight - 2 * bodyPadding);
|
|
41
|
+
// bodyRef.current.style.maxHeight = `${bodyMaxHeight}px`;
|
|
42
|
+
// bodyRef.current.style.overflowY = "auto";
|
|
43
|
+
// }, [bodyPadding]);
|
|
44
|
+
// const [fadeIn, setFadeIn] = useState(false)
|
|
45
|
+
// useEffect(() => {
|
|
46
|
+
// if (open === undefined) return;
|
|
47
|
+
// setTimeout(() => {
|
|
48
|
+
// setFadeIn(open)
|
|
49
|
+
// }, 0)
|
|
50
|
+
// }, [open])
|
|
51
|
+
// if (!open) return null;
|
|
52
|
+
// return (
|
|
53
|
+
// <div ref={targetRef} className={`ext-window${fadeIn ? ' fadein' : ''}`} style={{ left: `${initialPosition.x}px`, top: `${initialPosition.y}px`, minWidth: `${windowWidth}px` }}>
|
|
54
|
+
// {/* Header */}
|
|
55
|
+
// <div ref={headerRef} className="ext-window-header">
|
|
56
|
+
// {header ?? (
|
|
57
|
+
// <>
|
|
58
|
+
// <div className="ext-window-drag-handle">||</div>
|
|
59
|
+
// <div className="ext-window-header-title">Header</div>
|
|
60
|
+
// <div onClick={onClose}>close</div>
|
|
61
|
+
// </>
|
|
62
|
+
// )}
|
|
63
|
+
// </div>
|
|
64
|
+
// {/* Body */}
|
|
65
|
+
// <div
|
|
66
|
+
// ref={bodyRef}
|
|
67
|
+
// className="ext-window-body _ewb"
|
|
68
|
+
// style={{ padding: `${bodyPadding}px` }}
|
|
69
|
+
// >
|
|
70
|
+
// {body ?? <>Body</>}
|
|
71
|
+
// </div>
|
|
72
|
+
// {/* Footer */}
|
|
73
|
+
// {footer && (
|
|
74
|
+
// <div ref={footerRef} className="ext-window-footer">
|
|
75
|
+
// {footer}
|
|
76
|
+
// </div>
|
|
77
|
+
// )}
|
|
78
|
+
// {/* Resize handle */}
|
|
79
|
+
// <div className="resize-handle" ref={resizeHandleRef} />
|
|
80
|
+
// </div>
|
|
81
|
+
// );
|
|
82
|
+
// }
|
|
83
|
+
import { useRef, useEffect, useState } from "react";
|
|
84
|
+
import { useDraggable } from "./tools/useDraggable"; // adjust path as needed
|
|
85
|
+
export default function Window({ trackMove, open, initialPosition = { x: 600, y: 100 }, initialWidth = 400, initialBodyPadding = 20, header, body, footer, onClose, }) {
|
|
86
|
+
const targetRef = useRef(null);
|
|
87
|
+
const headerRef = useRef(null);
|
|
88
|
+
const resizeHandleRef = useRef(null);
|
|
89
|
+
const bodyRef = useRef(null);
|
|
90
|
+
const footerRef = useRef(null);
|
|
91
|
+
const [maxHeight] = useState("auto");
|
|
92
|
+
const [bodyPadding] = useState(initialBodyPadding);
|
|
93
|
+
const [windowWidth] = useState(initialWidth);
|
|
94
|
+
useDraggable(open, targetRef, headerRef, bodyRef, resizeHandleRef, bodyPadding, trackMove);
|
|
95
|
+
useEffect(() => {
|
|
96
|
+
if (!bodyRef.current || !targetRef.current || !headerRef.current)
|
|
97
|
+
return;
|
|
98
|
+
const headerHeight = headerRef.current.offsetHeight;
|
|
99
|
+
const topPosition = targetRef.current.getBoundingClientRect().top;
|
|
100
|
+
const availableHeight = window.innerHeight - topPosition - 20; // 20px bottom margin
|
|
101
|
+
const bodyMaxHeight = Math.max(100, availableHeight - headerHeight - 2 * bodyPadding);
|
|
102
|
+
bodyRef.current.style.maxHeight = `${bodyMaxHeight}px`;
|
|
103
|
+
bodyRef.current.style.overflowY = "auto";
|
|
104
|
+
}, [bodyPadding]);
|
|
105
|
+
const [fadeIn, setFadeIn] = useState(false);
|
|
106
|
+
useEffect(() => {
|
|
107
|
+
if (open === undefined)
|
|
108
|
+
return;
|
|
109
|
+
setTimeout(() => {
|
|
110
|
+
setFadeIn(open);
|
|
111
|
+
}, 0);
|
|
112
|
+
}, [open]);
|
|
113
|
+
if (!open)
|
|
114
|
+
return null;
|
|
115
|
+
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 })] }));
|
|
116
|
+
}
|
package/dist/style/button.css
CHANGED
|
@@ -1,9 +1,24 @@
|
|
|
1
|
-
/* EHSCAN Base Button */
|
|
1
|
+
/* EHSCAN Base Button - Refactored */
|
|
2
2
|
.ext-btn {
|
|
3
|
+
/* Core variables with fallbacks */
|
|
4
|
+
/* --btn-bg: #007aff;
|
|
5
|
+
--btn-color: #fff;
|
|
6
|
+
--btn-radius: 18px;
|
|
7
|
+
--btn-padding: 0.5rem;
|
|
8
|
+
--btn-width: fit-content;
|
|
9
|
+
--btn-height: auto;
|
|
10
|
+
--btn-font-size: 1rem;
|
|
11
|
+
--btn-font-weight: 500;
|
|
12
|
+
--btn-transition: all 0.2s ease;
|
|
13
|
+
--btn-line-height: 1.5;
|
|
14
|
+
--btn-gap: 0.5rem;
|
|
15
|
+
--ripple-box-shadow: rgb(100 100 111 / 20%) 0px 7px 29px 0px;
|
|
16
|
+
--ripple-effect-bck: rgb(0 0 0 / 15%); */
|
|
17
|
+
|
|
3
18
|
display: inline-flex;
|
|
4
19
|
align-items: center;
|
|
5
20
|
justify-content: center;
|
|
6
|
-
gap: 0.5rem;
|
|
21
|
+
gap: var(--btn-gap, 0.5rem);
|
|
7
22
|
font-family: inherit;
|
|
8
23
|
font-size: var(--btn-font-size, 1rem);
|
|
9
24
|
font-weight: var(--btn-font-weight, 500);
|
|
@@ -11,7 +26,7 @@
|
|
|
11
26
|
background-color: var(--btn-bg, #007aff);
|
|
12
27
|
border: none;
|
|
13
28
|
border-radius: var(--btn-radius, 18px);
|
|
14
|
-
padding: var(--btn-padding
|
|
29
|
+
padding: var(--btn-padding, 0.5rem);
|
|
15
30
|
width: var(--btn-width, fit-content);
|
|
16
31
|
height: var(--btn-height, auto);
|
|
17
32
|
cursor: pointer;
|
|
@@ -41,54 +56,39 @@
|
|
|
41
56
|
transform: scale(0.97);
|
|
42
57
|
}
|
|
43
58
|
|
|
44
|
-
/* Sizes */
|
|
45
|
-
.ext-btn--sm {
|
|
46
|
-
padding: var(--btn-padding-y-sm, 0.25rem) var(--btn-padding-x-sm, 0.75rem);
|
|
47
|
-
font-size: var(--btn-font-size-sm, 0.85rem);
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
.ext-btn--md {
|
|
51
|
-
padding: var(--btn-padding-y-md, 0.5rem) var(--btn-padding-x-md, 1rem);
|
|
52
|
-
font-size: var(--btn-font-size-md, 1rem);
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
.ext-btn--lg {
|
|
56
|
-
padding: var(--btn-padding-y-lg, 0.75rem) var(--btn-padding-x-lg, 1.5rem);
|
|
57
|
-
font-size: var(--btn-font-size-lg, 1.1rem);
|
|
58
|
-
}
|
|
59
|
-
|
|
60
59
|
/* Variants */
|
|
61
60
|
.ext-btn--primary {
|
|
62
|
-
|
|
63
|
-
|
|
61
|
+
--btn-bg: #007aff;
|
|
62
|
+
--btn-color: #fff;
|
|
64
63
|
}
|
|
65
64
|
|
|
66
65
|
.ext-btn--secondary {
|
|
67
|
-
|
|
68
|
-
|
|
66
|
+
--btn-bg: #e5e5ea;
|
|
67
|
+
--btn-color: #111;
|
|
69
68
|
}
|
|
70
69
|
|
|
71
70
|
.ext-btn--outline {
|
|
72
|
-
|
|
73
|
-
|
|
71
|
+
--btn-bg: transparent;
|
|
72
|
+
--btn-color: #007aff;
|
|
74
73
|
}
|
|
75
74
|
|
|
76
75
|
.ext-btn--ghost {
|
|
77
|
-
|
|
78
|
-
|
|
76
|
+
--btn-bg: transparent;
|
|
77
|
+
--btn-color: #007aff;
|
|
79
78
|
}
|
|
80
79
|
|
|
81
80
|
.ext-btn--danger {
|
|
82
|
-
|
|
83
|
-
|
|
81
|
+
--btn-bg: #ff3b30;
|
|
82
|
+
--btn-color: #fff;
|
|
84
83
|
}
|
|
85
84
|
|
|
85
|
+
/* Loading state */
|
|
86
86
|
.ext-btn--loading {
|
|
87
87
|
pointer-events: none;
|
|
88
88
|
opacity: 0.8;
|
|
89
89
|
}
|
|
90
90
|
|
|
91
|
-
/*
|
|
91
|
+
/* Icon and label wrappers */
|
|
92
92
|
.ext-btn-icon {
|
|
93
93
|
display: flex;
|
|
94
94
|
align-items: center;
|
|
@@ -101,30 +101,7 @@
|
|
|
101
101
|
white-space: nowrap;
|
|
102
102
|
}
|
|
103
103
|
|
|
104
|
-
/*
|
|
105
|
-
.closeBtn {
|
|
106
|
-
width: var(--btn-width-close, 35px);
|
|
107
|
-
height: var(--btn-height-close, 35px);
|
|
108
|
-
padding: 0;
|
|
109
|
-
background-color: var(--btn-bg-close, lightgray);
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
.saveBtn {
|
|
113
|
-
height: var(--btn-height-save, 35px);
|
|
114
|
-
padding-left: var(--btn-padding-x-save, 30px);
|
|
115
|
-
padding-right: var(--btn-padding-x-save, 30px);
|
|
116
|
-
background-color: var(--btn-bg-save, #007aff);
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
.trashBtn {
|
|
120
|
-
height: var(--btn-height-trash, 35px);
|
|
121
|
-
padding-left: var(--btn-padding-x-trash, 10px);
|
|
122
|
-
padding-right: var(--btn-padding-x-trash, 10px);
|
|
123
|
-
border-radius: var(--btn-radius-trash, 4px);
|
|
124
|
-
background-color: var(--btn-bg-trash, lightgray);
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
/* Ripple Effect */
|
|
104
|
+
/* Ripple effect */
|
|
128
105
|
._ripple {
|
|
129
106
|
font-weight: var(--btn-font-weight, 500);
|
|
130
107
|
box-shadow: var(--ripple-box-shadow, rgb(100 100 111 / 20%) 0px 7px 29px 0px);
|
|
@@ -147,73 +124,9 @@
|
|
|
147
124
|
will-change: transform, opacity;
|
|
148
125
|
}
|
|
149
126
|
|
|
150
|
-
@media (hover: hover) and (pointer: fine) {
|
|
151
|
-
._ripple {
|
|
152
|
-
cursor: pointer;
|
|
153
|
-
}
|
|
154
|
-
}
|
|
155
|
-
|
|
156
127
|
@keyframes ripple-animation {
|
|
157
128
|
to {
|
|
158
129
|
transform: scale(4);
|
|
159
130
|
opacity: 0;
|
|
160
131
|
}
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
/* Loader */
|
|
164
|
-
.lds-ripple,
|
|
165
|
-
.lds-ripple div {
|
|
166
|
-
box-sizing: border-box;
|
|
167
|
-
}
|
|
168
|
-
|
|
169
|
-
.lds-ripple {
|
|
170
|
-
position: absolute;
|
|
171
|
-
top: 50%;
|
|
172
|
-
left: 50%;
|
|
173
|
-
transform: translate(-50%, -50%);
|
|
174
|
-
height: var(--image-sync-wh, 100%);
|
|
175
|
-
width: var(--image-sync-wh, 100%);
|
|
176
|
-
z-index: 9999;
|
|
177
|
-
}
|
|
178
|
-
|
|
179
|
-
.lds-ripple div {
|
|
180
|
-
position: absolute;
|
|
181
|
-
border: var(--bw, 5px) solid white;
|
|
182
|
-
opacity: 1;
|
|
183
|
-
border-radius: 50%;
|
|
184
|
-
animation: lds-ripple 1s cubic-bezier(0, 0.4, 0.8, 1) infinite;
|
|
185
|
-
}
|
|
186
|
-
|
|
187
|
-
.lds-ripple div:nth-child(2) {
|
|
188
|
-
animation-delay: -0.5s;
|
|
189
|
-
border: var(--bw, 5px) solid whitesmoke;
|
|
190
|
-
}
|
|
191
|
-
|
|
192
|
-
@keyframes lds-ripple {
|
|
193
|
-
0% {
|
|
194
|
-
top: 50%;
|
|
195
|
-
left: 50%;
|
|
196
|
-
width: 8%;
|
|
197
|
-
height: 8%;
|
|
198
|
-
opacity: 0.2;
|
|
199
|
-
transform: translate(-50%, -50%);
|
|
200
|
-
}
|
|
201
|
-
|
|
202
|
-
5% {
|
|
203
|
-
top: 50%;
|
|
204
|
-
left: 50%;
|
|
205
|
-
width: 8%;
|
|
206
|
-
height: 8%;
|
|
207
|
-
opacity: 1;
|
|
208
|
-
transform: translate(-50%, -50%);
|
|
209
|
-
}
|
|
210
|
-
|
|
211
|
-
100% {
|
|
212
|
-
top: 50%;
|
|
213
|
-
left: 50%;
|
|
214
|
-
width: var(--image-sync-wh, 100%);
|
|
215
|
-
height: var(--image-sync-wh, 100%);
|
|
216
|
-
opacity: 0.2;
|
|
217
|
-
transform: translate(-50%, -50%);
|
|
218
|
-
}
|
|
219
132
|
}
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
/* 🪟 ExtWindow Base */
|
|
2
|
+
.ext-window {
|
|
3
|
+
/* --ext-window-bck-color: white;
|
|
4
|
+
--ext-window-border-radius: 12px;
|
|
5
|
+
--ext-window-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
|
|
6
|
+
--ext-window-opacity: 0;
|
|
7
|
+
--ext-window-transition: opacity 0.4s ease-in-out;
|
|
8
|
+
--ext-window-width: 400px;
|
|
9
|
+
--ext-window-min-height: 300px; */
|
|
10
|
+
|
|
11
|
+
background-color: var(--ext-window-bck-color, white);
|
|
12
|
+
position: absolute;
|
|
13
|
+
width: var(--ext-window-width, 400px);
|
|
14
|
+
min-height: var(--ext-window-min-height, 300px);
|
|
15
|
+
border-radius: var(--ext-window-border-radius, 12px);
|
|
16
|
+
box-shadow: var(--ext-window-shadow);
|
|
17
|
+
opacity: var(--ext-window-opacity, 0);
|
|
18
|
+
transition: var(--ext-window-transition);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.ext-window.fadein {
|
|
22
|
+
opacity: 1;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
/* Header */
|
|
26
|
+
.ext-window-header {
|
|
27
|
+
--ext-window-header-bck-color: var(--ext-window-bck-color, white);
|
|
28
|
+
padding: 0 10px;
|
|
29
|
+
border-radius: var(--ext-window-border-radius, 12px) var(--ext-window-border-radius, 12px) 0 0;
|
|
30
|
+
background-color: var(--ext-window-header-bck-color);
|
|
31
|
+
align-items: center;
|
|
32
|
+
justify-content: center;
|
|
33
|
+
height: 50px;
|
|
34
|
+
display: flex;
|
|
35
|
+
user-select: none;
|
|
36
|
+
gap: 10px;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.ext-window-header-title {
|
|
40
|
+
flex: 1;
|
|
41
|
+
line-height: 1.4;
|
|
42
|
+
display: flex;
|
|
43
|
+
align-items: center;
|
|
44
|
+
padding: 5px 0 2px 0;
|
|
45
|
+
cursor: move;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.ext-window-header-close {
|
|
49
|
+
display: flex;
|
|
50
|
+
align-items: center;
|
|
51
|
+
justify-content: center;
|
|
52
|
+
background-color: var(--ext-window-close-bck, aqua);
|
|
53
|
+
width: 40px;
|
|
54
|
+
height: 40px;
|
|
55
|
+
border-radius: var(--ext-window-border-radius, 12px);
|
|
56
|
+
cursor: pointer;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
/* Body */
|
|
60
|
+
.ext-window-body {
|
|
61
|
+
background-color: var(--ext-window-body-bck, transparent);
|
|
62
|
+
min-height: var(--ext-window-min-height, 300px);
|
|
63
|
+
overflow: auto;
|
|
64
|
+
user-select: none;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
._ewb::-webkit-scrollbar {
|
|
68
|
+
width: 0;
|
|
69
|
+
background-color: var(--ext-window-bck-color, white);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
._ewb:hover::-webkit-scrollbar {
|
|
73
|
+
width: 6px;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
._ewb::-webkit-scrollbar-thumb {
|
|
77
|
+
background-color: var(--ext-window-scrollbar-thumb, white);
|
|
78
|
+
border-radius: 12px;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
._ewb:hover::-webkit-scrollbar-thumb {
|
|
82
|
+
background-color: var(--ext-window-scrollbar-thumb-hover, #555);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
/* Resize handle */
|
|
86
|
+
.resize-handle {
|
|
87
|
+
width: 20px;
|
|
88
|
+
height: 20px;
|
|
89
|
+
position: absolute;
|
|
90
|
+
bottom: 0;
|
|
91
|
+
right: 0;
|
|
92
|
+
cursor: se-resize;
|
|
93
|
+
background: var(--ext-window-resize-bck, darkgreen);
|
|
94
|
+
border-radius: 12px 0 12px 0;
|
|
95
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
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;
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
import { useEffect, useRef } from "react";
|
|
2
|
+
export const useDraggable = (open, targetRef, handleRef, bodyRef, resizeHandleRef, bodyPadding = 0, // used in max-height calculation
|
|
3
|
+
trackMove) => {
|
|
4
|
+
const isDragging = useRef(false);
|
|
5
|
+
const isResizing = useRef(false);
|
|
6
|
+
const offset = useRef({ x: 0, y: 0 });
|
|
7
|
+
const initialMouseX = useRef(0);
|
|
8
|
+
const initialWidth = useRef(0);
|
|
9
|
+
useEffect(() => {
|
|
10
|
+
var _a;
|
|
11
|
+
if (!open)
|
|
12
|
+
return;
|
|
13
|
+
const target = targetRef.current;
|
|
14
|
+
const handleElement = (_a = handleRef === null || handleRef === void 0 ? void 0 : handleRef.current) !== null && _a !== void 0 ? _a : target;
|
|
15
|
+
const resizeHandle = resizeHandleRef === null || resizeHandleRef === void 0 ? void 0 : resizeHandleRef.current;
|
|
16
|
+
if (!target || !handleElement || !resizeHandle)
|
|
17
|
+
return;
|
|
18
|
+
// --- Drag start ---
|
|
19
|
+
const handleMouseDown = (e) => {
|
|
20
|
+
const rect = target.getBoundingClientRect();
|
|
21
|
+
offset.current = { x: e.clientX - rect.left, y: e.clientY - rect.top };
|
|
22
|
+
isDragging.current = true;
|
|
23
|
+
trackMove === null || trackMove === void 0 ? void 0 : trackMove(offset.current);
|
|
24
|
+
};
|
|
25
|
+
// --- Resize start (horizontal only) ---
|
|
26
|
+
const handleResizeStart = (e) => {
|
|
27
|
+
e.stopPropagation(); // prevent dragging
|
|
28
|
+
isResizing.current = true;
|
|
29
|
+
initialMouseX.current = e.clientX;
|
|
30
|
+
initialWidth.current = target.offsetWidth;
|
|
31
|
+
trackMove === null || trackMove === void 0 ? void 0 : trackMove({ x: initialWidth.current });
|
|
32
|
+
};
|
|
33
|
+
// --- Mouse move ---
|
|
34
|
+
const handleMouseMove = (e) => {
|
|
35
|
+
if (!target)
|
|
36
|
+
return;
|
|
37
|
+
// --- Dragging ---
|
|
38
|
+
if (isDragging.current) {
|
|
39
|
+
const windowWidth = window.innerWidth;
|
|
40
|
+
const windowHeight = window.innerHeight;
|
|
41
|
+
let newX = e.clientX - offset.current.x;
|
|
42
|
+
let newY = e.clientY - offset.current.y;
|
|
43
|
+
newX = Math.max(0, Math.min(newX, windowWidth - target.offsetWidth));
|
|
44
|
+
newY = Math.max(0, Math.min(newY, windowHeight - target.offsetHeight));
|
|
45
|
+
target.style.left = `${newX}px`;
|
|
46
|
+
target.style.top = `${newY}px`;
|
|
47
|
+
}
|
|
48
|
+
// --- Horizontal resizing ---
|
|
49
|
+
if (isResizing.current) {
|
|
50
|
+
const rect = target.getBoundingClientRect();
|
|
51
|
+
const diffX = e.clientX - initialMouseX.current;
|
|
52
|
+
// Maximum width so window doesn't go off the right edge
|
|
53
|
+
const maxWidthByScreen = window.innerWidth - rect.left;
|
|
54
|
+
// Enforce both screen limit and 1000px max
|
|
55
|
+
const newWidth = Math.max(200, Math.min(initialWidth.current + diffX, maxWidthByScreen, 1000));
|
|
56
|
+
target.style.width = `${newWidth}px`;
|
|
57
|
+
// Recalculate body max-height
|
|
58
|
+
if ((bodyRef === null || bodyRef === void 0 ? void 0 : bodyRef.current) && handleElement) {
|
|
59
|
+
const availableHeight = target.offsetHeight - handleElement.offsetHeight - 2 * bodyPadding;
|
|
60
|
+
bodyRef.current.style.maxHeight = `${availableHeight}px`;
|
|
61
|
+
bodyRef.current.style.overflowY = "auto";
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
};
|
|
65
|
+
// --- Mouse up ---
|
|
66
|
+
const handleMouseUp = () => {
|
|
67
|
+
isDragging.current = false;
|
|
68
|
+
isResizing.current = false;
|
|
69
|
+
// recalc body max-height after drag stops
|
|
70
|
+
if ((bodyRef === null || bodyRef === void 0 ? void 0 : bodyRef.current) && target) {
|
|
71
|
+
const headerHeight = handleElement.offsetHeight;
|
|
72
|
+
const windowRect = target.getBoundingClientRect();
|
|
73
|
+
const availableHeight = window.innerHeight - windowRect.top - 20; // bottom margin
|
|
74
|
+
const bodyMaxHeight = Math.max(100, availableHeight - headerHeight - 2 * bodyPadding);
|
|
75
|
+
bodyRef.current.style.maxHeight = `${bodyMaxHeight}px`;
|
|
76
|
+
bodyRef.current.style.overflowY = "auto";
|
|
77
|
+
}
|
|
78
|
+
};
|
|
79
|
+
// Attach listeners
|
|
80
|
+
handleElement.addEventListener("mousedown", handleMouseDown);
|
|
81
|
+
resizeHandle.addEventListener("mousedown", handleResizeStart);
|
|
82
|
+
window.addEventListener("mousemove", handleMouseMove);
|
|
83
|
+
window.addEventListener("mouseup", handleMouseUp);
|
|
84
|
+
return () => {
|
|
85
|
+
handleElement.removeEventListener("mousedown", handleMouseDown);
|
|
86
|
+
resizeHandle.removeEventListener("mousedown", handleResizeStart);
|
|
87
|
+
window.removeEventListener("mousemove", handleMouseMove);
|
|
88
|
+
window.removeEventListener("mouseup", handleMouseUp);
|
|
89
|
+
};
|
|
90
|
+
}, [open, targetRef, handleRef, bodyRef, resizeHandleRef, bodyPadding]);
|
|
91
|
+
};
|