Stackable/src/block-components/image/use-image.js at a67e1f565e5be277019c526648ef880acceb775f · gambitph/Stackable · GitHub

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
83
84
85
86
87
88
89
90
91
92
93
94
95
/**
 * WordPress Dependencies
 */
import { useBlockSetAttributesContext } from '~stackable/hooks'

export const useImage = () => {
	const setAttributes = useBlockSetAttributesContext()

	const onChange = image => {
		setAttributes( {
			imageUrl: image.url,
			imageId: image.id,
			imageHeightAttribute: image.height,
			imageWidthAttribute: image.width,
			imageExternalUrl: '',
			...( image.alt ? { imageAlt: image.alt || '' } : {} ), // Only overwrite current alt if new alt is not empty.
		} )
	}

	const onChangeSizeDesktop = ( {
		width, height, widthUnit, heightUnit,
	} ) => {
		const size = {}
		if ( typeof width !== 'undefined' ) {
			size.imageWidth = width
		}
		if ( typeof height !== 'undefined' ) {
			size.imageHeight = height
		}
		if ( typeof heightUnit !== 'undefined' ) {
			size.imageHeightUnit = heightUnit
		}
		if ( typeof widthUnit !== 'undefined' ) {
			size.imageWidthUnit = widthUnit
		}
		setAttributes( size )
	}

	const onChangeSizeTablet = ( {
		width, height, widthUnit, heightUnit,
	} ) => {
		const size = {}
		if ( typeof width !== 'undefined' ) {
			size.imageWidthTablet = width
		}
		if ( typeof height !== 'undefined' ) {
			size.imageHeightTablet = height
		}
		if ( typeof heightUnit !== 'undefined' ) {
			size.imageHeightUnitTablet = heightUnit
		}
		if ( typeof widthUnit !== 'undefined' ) {
			size.imageWidthUnitTablet = widthUnit
		}
		setAttributes( size )
	}

	const onChangeSizeMobile = ( {
		width, height, widthUnit, heightUnit,
	} ) => {
		const size = {}
		if ( typeof width !== 'undefined' ) {
			size.imageWidthMobile = width
		}
		if ( typeof height !== 'undefined' ) {
			size.imageHeightMobile = height
		}
		if ( typeof heightUnit !== 'undefined' ) {
			size.imageHeightUnitMobile = heightUnit
		}
		if ( typeof widthUnit !== 'undefined' ) {
			size.imageWidthUnitMobile = widthUnit
		}
		setAttributes( size )
	}

	const onRemove = () => {
		setAttributes( {
			imageUrl: '',
			imageId: '',
			imageHeightAttribute: '',
			imageWidthAttribute: '',
		} )
	}

	return {
		setImage: {
			onChange,
			onChangeSizeDesktop,
			onChangeSizeTablet,
			onChangeSizeMobile,
			onRemove,
		},
	}
}