| 1 |
/** |
| 2 |
* Vendor dependencies |
| 3 |
*/ |
| 4 |
import PropTypes from 'prop-types'; |
| 5 |
|
| 6 |
/** |
| 7 |
* WordPress dependencies |
| 8 |
*/ |
| 9 |
const {useInstanceId} = wp.compose; |
| 10 |
const {BaseControl, Button} = wp.components; |
| 11 |
const {MediaUpload} = wp.blockEditor; |
| 12 |
import { __ } from '@wordpress/i18n' |
| 13 |
|
| 14 |
const ImageControl = ({name, label, help, className, value, hideLabelFromVision, onChange = null}) => { |
| 15 |
const instanceId = useInstanceId(ImageControl); |
| 16 |
const id = `give-image-control-${name}-${instanceId}`; |
| 17 |
return ( |
| 18 |
<BaseControl label={label} hideLabelFromVision={hideLabelFromVision} id={id} help={help} className={className}> |
| 19 |
<MediaUpload |
| 20 |
allowedTypes={['image']} |
| 21 |
onSelect={(media) => onChange(media.sizes.full.url)} |
| 22 |
render={({open}) => { |
| 23 |
return value ? ( |
| 24 |
<div> |
| 25 |
<img src={value} onClick={open} style={{cursor: 'pointer'}} /> |
| 26 |
<Button isPrimary isSmall onClick={open} id={id}> |
| 27 |
{__('Change Image', 'give')} |
| 28 |
</Button> |
| 29 |
<Button isSecondary isSmall onClick={() => onChange('')} id={id}> |
| 30 |
{__('Remove Image', 'give')} |
| 31 |
</Button> |
| 32 |
</div> |
| 33 |
) : ( |
| 34 |
<div> |
| 35 |
<Button isPrimary onClick={open} id={id}> |
| 36 |
{__('Select an Image', 'give')} |
| 37 |
</Button> |
| 38 |
</div> |
| 39 |
); |
| 40 |
}} |
| 41 |
/> |
| 42 |
</BaseControl> |
| 43 |
); |
| 44 |
}; |
| 45 |
|
| 46 |
ImageControl.propTypes = { |
| 47 |
label: PropTypes.string, |
| 48 |
value: PropTypes.any.isRequired, |
| 49 |
onChange: PropTypes.func, |
| 50 |
name: PropTypes.string.isRequired, |
| 51 |
help: PropTypes.string, |
| 52 |
className: PropTypes.string, |
| 53 |
hideLabelFromVision: PropTypes.bool, |
| 54 |
}; |
| 55 |
|
| 56 |
export default ImageControl; |
| 57 |
|
