Skip to content

Commit 956661b

Browse files
committed
Update Modal.react.js
1 parent 19cb235 commit 956661b

File tree

1 file changed

+41
-20
lines changed

1 file changed

+41
-20
lines changed

src/components/Modal/Modal.react.js

Lines changed: 41 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -47,33 +47,42 @@ const Modal = ({
4747
}) => {
4848
const modalRef = useRef(null);
4949
const [currentWidth, setCurrentWidth] = useState(initialWidth);
50-
const resizing = useRef(false);
50+
const resizing = useRef({ active: false, side: null, startX: 0, startWidth: 0 });
5151

52-
const handleMouseDown = e => {
52+
// Helper to get min width
53+
const minWidth = initialWidth;
54+
55+
const handleMouseDown = (side) => (e) => {
5356
e.preventDefault();
54-
resizing.current = true;
55-
if (modalRef.current) {
56-
modalRef.current.classList.add(styles.noTransition);
57-
}
57+
if (!modalRef.current) return;
58+
resizing.current = {
59+
active: true,
60+
side,
61+
startX: e.clientX,
62+
startWidth: currentWidth,
63+
};
64+
modalRef.current.classList.add(styles.noTransition);
5865
};
5966

6067
const handleMouseMove = useCallback(
61-
e => {
62-
if (!resizing.current || !modalRef.current) {
63-
return;
68+
(e) => {
69+
if (!resizing.current.active || !modalRef.current) return;
70+
const { side, startX, startWidth } = resizing.current;
71+
if (side === 'right') {
72+
let newWidth = startWidth + 2 * (e.clientX - startX);
73+
newWidth = Math.max(minWidth, newWidth);
74+
setCurrentWidth(newWidth);
75+
} else if (side === 'left') {
76+
let newWidth = startWidth - 2 * (e.clientX - startX);
77+
newWidth = Math.max(minWidth, newWidth);
78+
setCurrentWidth(newWidth);
6479
}
65-
66-
const modalLeft = modalRef.current.getBoundingClientRect().left;
67-
const newWidth = e.clientX - modalLeft;
68-
69-
const clampedWidth = Math.min(window.innerWidth, Math.max(initialWidth, newWidth));
70-
setCurrentWidth(clampedWidth);
7180
},
72-
[initialWidth]
81+
[minWidth]
7382
);
7483

7584
const handleMouseUp = useCallback(() => {
76-
resizing.current = false;
85+
resizing.current = { active: false, side: null, startX: 0, startWidth: 0 };
7786
if (modalRef.current) {
7887
modalRef.current.classList.remove(styles.noTransition);
7988
}
@@ -82,7 +91,6 @@ const Modal = ({
8291
useEffect(() => {
8392
document.addEventListener('mousemove', handleMouseMove);
8493
document.addEventListener('mouseup', handleMouseUp);
85-
8694
return () => {
8795
document.removeEventListener('mousemove', handleMouseMove);
8896
document.removeEventListener('mouseup', handleMouseUp);
@@ -129,8 +137,22 @@ const Modal = ({
129137
<div
130138
ref={modalRef}
131139
className={[styles.modal, styles[type]].join(' ')}
132-
style={{ width: currentWidth }}
140+
style={{
141+
width: currentWidth,
142+
}}
133143
>
144+
{/* Left resize handle */}
145+
<div
146+
className={styles.resizeHandleLeft}
147+
style={{ position: 'absolute', left: 0, top: 0, width: 8, height: '100%', cursor: 'ew-resize', zIndex: 10 }}
148+
onMouseDown={handleMouseDown('left')}
149+
/>
150+
{/* Right resize handle */}
151+
<div
152+
className={styles.resizeHandleRight}
153+
style={{ position: 'absolute', right: 0, top: 0, width: 8, height: '100%', cursor: 'ew-resize', zIndex: 10 }}
154+
onMouseDown={handleMouseDown('right')}
155+
/>
134156
<div className={styles.header}>
135157
<div
136158
style={{
@@ -149,7 +171,6 @@ const Modal = ({
149171
</div>
150172
{wrappedChildren}
151173
{footer}
152-
<div className={styles.resizeHandle} onMouseDown={handleMouseDown} />
153174
</div>
154175
</Popover>
155176
);

0 commit comments

Comments
 (0)