@@ -47,33 +47,42 @@ const Modal = ({
47
47
} ) => {
48
48
const modalRef = useRef ( null ) ;
49
49
const [ currentWidth , setCurrentWidth ] = useState ( initialWidth ) ;
50
- const resizing = useRef ( false ) ;
50
+ const resizing = useRef ( { active : false , side : null , startX : 0 , startWidth : 0 } ) ;
51
51
52
- const handleMouseDown = e => {
52
+ // Helper to get min width
53
+ const minWidth = initialWidth ;
54
+
55
+ const handleMouseDown = ( side ) => ( e ) => {
53
56
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 ) ;
58
65
} ;
59
66
60
67
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 ) ;
64
79
}
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 ) ;
71
80
} ,
72
- [ initialWidth ]
81
+ [ minWidth ]
73
82
) ;
74
83
75
84
const handleMouseUp = useCallback ( ( ) => {
76
- resizing . current = false ;
85
+ resizing . current = { active : false , side : null , startX : 0 , startWidth : 0 } ;
77
86
if ( modalRef . current ) {
78
87
modalRef . current . classList . remove ( styles . noTransition ) ;
79
88
}
@@ -82,7 +91,6 @@ const Modal = ({
82
91
useEffect ( ( ) => {
83
92
document . addEventListener ( 'mousemove' , handleMouseMove ) ;
84
93
document . addEventListener ( 'mouseup' , handleMouseUp ) ;
85
-
86
94
return ( ) => {
87
95
document . removeEventListener ( 'mousemove' , handleMouseMove ) ;
88
96
document . removeEventListener ( 'mouseup' , handleMouseUp ) ;
@@ -129,8 +137,22 @@ const Modal = ({
129
137
< div
130
138
ref = { modalRef }
131
139
className = { [ styles . modal , styles [ type ] ] . join ( ' ' ) }
132
- style = { { width : currentWidth } }
140
+ style = { {
141
+ width : currentWidth ,
142
+ } }
133
143
>
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
+ />
134
156
< div className = { styles . header } >
135
157
< div
136
158
style = { {
@@ -149,7 +171,6 @@ const Modal = ({
149
171
</ div >
150
172
{ wrappedChildren }
151
173
{ footer }
152
- < div className = { styles . resizeHandle } onMouseDown = { handleMouseDown } />
153
174
</ div >
154
175
</ Popover >
155
176
) ;
0 commit comments