-
Notifications
You must be signed in to change notification settings - Fork 4.1k
/
resizable-editor.js
82 lines (78 loc) · 1.89 KB
/
resizable-editor.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
/**
* WordPress dependencies
*/
import { useState, useRef, useCallback } from '@wordpress/element';
import { ResizableBox } from '@wordpress/components';
/**
* Internal dependencies
*/
import ResizeHandle from './resize-handle';
// Removes the inline styles in the drag handles.
const HANDLE_STYLES_OVERRIDE = {
position: undefined,
userSelect: undefined,
cursor: undefined,
width: undefined,
height: undefined,
top: undefined,
right: undefined,
bottom: undefined,
left: undefined,
};
function ResizableEditor( { enableResizing, height, children } ) {
const [ width, setWidth ] = useState( '100%' );
const resizableRef = useRef();
const resizeWidthBy = useCallback( ( deltaPixels ) => {
if ( resizableRef.current ) {
setWidth( resizableRef.current.offsetWidth + deltaPixels );
}
}, [] );
return (
<ResizableBox
ref={ ( api ) => {
resizableRef.current = api?.resizable;
} }
size={ {
width: enableResizing ? width : '100%',
height: enableResizing && height ? height : '100%',
} }
onResizeStop={ ( event, direction, element ) => {
setWidth( element.style.width );
} }
minWidth={ 300 }
maxWidth="100%"
maxHeight="100%"
enable={ {
right: enableResizing,
left: enableResizing,
} }
showHandle={ enableResizing }
// The editor is centered horizontally, resizing it only
// moves half the distance. Hence double the ratio to correctly
// align the cursor to the resizer handle.
resizeRatio={ 2 }
handleComponent={ {
left: (
<ResizeHandle
direction="left"
resizeWidthBy={ resizeWidthBy }
/>
),
right: (
<ResizeHandle
direction="right"
resizeWidthBy={ resizeWidthBy }
/>
),
} }
handleClasses={ undefined }
handleStyles={ {
left: HANDLE_STYLES_OVERRIDE,
right: HANDLE_STYLES_OVERRIDE,
} }
>
{ children }
</ResizableBox>
);
}
export default ResizableEditor;