-
Notifications
You must be signed in to change notification settings - Fork 4.2k
/
use-dimension-handler.js
73 lines (67 loc) · 1.99 KB
/
use-dimension-handler.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
/**
* WordPress dependencies
*/
import { useEffect, useState } from '@wordpress/element';
export default function useDimensionHandler(
customHeight,
customWidth,
defaultHeight,
defaultWidth,
onChange
) {
const [ currentWidth, setCurrentWidth ] = useState(
customWidth ?? defaultWidth ?? ''
);
const [ currentHeight, setCurrentHeight ] = useState(
customHeight ?? defaultHeight ?? ''
);
// When an image is first inserted, the default dimensions are initially
// undefined. This effect updates the dimensions when the default values
// come through.
useEffect( () => {
if ( customWidth === undefined && defaultWidth !== undefined ) {
setCurrentWidth( defaultWidth );
}
if ( customHeight === undefined && defaultHeight !== undefined ) {
setCurrentHeight( defaultHeight );
}
}, [ defaultWidth, defaultHeight ] );
// If custom values change, it means an outsider has resized the image using some other method (eg resize box)
// this keeps track of these values too. We need to parse before comparing; custom values can be strings.
useEffect( () => {
if (
customWidth !== undefined &&
Number.parseInt( customWidth ) !== Number.parseInt( currentWidth )
) {
setCurrentWidth( customWidth );
}
if (
customHeight !== undefined &&
Number.parseInt( customHeight ) !== Number.parseInt( currentHeight )
) {
setCurrentHeight( customHeight );
}
}, [ customWidth, customHeight ] );
const updateDimension = ( dimension, value ) => {
const parsedValue = value === '' ? undefined : parseInt( value, 10 );
if ( dimension === 'width' ) {
setCurrentWidth( parsedValue );
} else {
setCurrentHeight( parsedValue );
}
onChange( {
[ dimension ]: parsedValue,
} );
};
const updateDimensions = ( nextHeight, nextWidth ) => {
setCurrentHeight( nextHeight ?? defaultHeight );
setCurrentWidth( nextWidth ?? defaultWidth );
onChange( { height: nextHeight, width: nextWidth } );
};
return {
currentHeight,
currentWidth,
updateDimension,
updateDimensions,
};
}