@@ -13,6 +13,7 @@ import Position from 'lib/Position';
13
13
import React from 'react' ;
14
14
import PropTypes from 'lib/PropTypes' ;
15
15
import styles from 'components/Modal/Modal.scss' ;
16
+ import { useState , useEffect , useRef } from 'react' ;
16
17
17
18
const origin = new Position ( 0 , 0 ) ;
18
19
const buttonColors = {
@@ -38,12 +39,55 @@ const Modal = ({
38
39
progress = false ,
39
40
customFooter,
40
41
textModal = false ,
41
- width,
42
+ width : initialWidth = 500 ,
42
43
continueText,
43
44
onContinue,
44
45
showContinue,
45
46
buttonsInCenter = React . Children . count ( children ) === 0 ,
46
47
} ) => {
48
+
49
+ const modalRef = useRef ( null ) ;
50
+
51
+ const [ currentWidth , setCurrentWidth ] = useState ( initialWidth ) ;
52
+ const resizing = useRef ( false ) ;
53
+
54
+ const handleMouseDown = ( e ) => {
55
+ e . preventDefault ( ) ;
56
+ resizing . current = true ;
57
+ if ( modalRef . current ) {
58
+ modalRef . current . classList . add ( styles . noTransition ) ;
59
+ }
60
+ } ;
61
+
62
+ const handleMouseMove = ( e ) => {
63
+ if ( ! resizing . current || ! modalRef . current ) {
64
+ return ;
65
+ }
66
+
67
+ const modalLeft = modalRef . current . getBoundingClientRect ( ) . left ;
68
+ const newWidth = e . clientX - modalLeft ;
69
+
70
+ const clampedWidth = Math . min ( window . innerWidth , Math . max ( initialWidth , newWidth ) ) ;
71
+ setCurrentWidth ( clampedWidth ) ;
72
+ } ;
73
+
74
+ const handleMouseUp = ( ) => {
75
+ resizing . current = false ;
76
+ if ( modalRef . current ) {
77
+ modalRef . current . classList . remove ( styles . noTransition ) ;
78
+ }
79
+ } ;
80
+
81
+ useEffect ( ( ) => {
82
+ document . addEventListener ( 'mousemove' , handleMouseMove ) ;
83
+ document . addEventListener ( 'mouseup' , handleMouseUp ) ;
84
+
85
+ return ( ) => {
86
+ document . removeEventListener ( 'mousemove' , handleMouseMove ) ;
87
+ document . removeEventListener ( 'mouseup' , handleMouseUp ) ;
88
+ } ;
89
+ } , [ ] ) ;
90
+
47
91
if ( children ) {
48
92
children = React . Children . map ( children , c => {
49
93
if ( c && c . type === Field && c . props . label ) {
@@ -81,7 +125,7 @@ const Modal = ({
81
125
82
126
return (
83
127
< Popover fadeIn = { true } fixed = { true } position = { origin } modal = { true } color = "rgba(17,13,17,0.8)" >
84
- < div className = { [ styles . modal , styles [ type ] ] . join ( ' ' ) } style = { { width } } >
128
+ < div ref = { modalRef } className = { [ styles . modal , styles [ type ] ] . join ( ' ' ) } style = { { width : currentWidth } } >
85
129
< div className = { styles . header } >
86
130
< div
87
131
style = { {
@@ -100,6 +144,7 @@ const Modal = ({
100
144
</ div >
101
145
{ wrappedChildren }
102
146
{ footer }
147
+ < div className = { styles . resizeHandle } onMouseDown = { handleMouseDown } />
103
148
</ div >
104
149
</ Popover >
105
150
) ;
0 commit comments