| 1 |
import { arrayToClassName, isOneOf } from 'elementor-app/utils/utils.js'; |
| 2 |
|
| 3 |
import UploadFile from 'elementor-app/molecules/upload-file'; |
| 4 |
import DragDrop from 'elementor-app/ui/atoms/drag-drop'; |
| 5 |
import Icon from 'elementor-app/ui/atoms/icon'; |
| 6 |
import Heading from 'elementor-app/ui/atoms/heading'; |
| 7 |
import Text from 'elementor-app/ui/atoms/text'; |
| 8 |
|
| 9 |
import './drop-zone.scss'; |
| 10 |
|
| 11 |
export default function DropZone( props ) { |
| 12 |
const classes = [ 'e-app-drop-zone', props.className ], |
| 13 |
dragDropEvents = { |
| 14 |
onDrop: ( event ) => { |
| 15 |
if ( ! props.isLoading ) { |
| 16 |
const file = event.dataTransfer.files[ 0 ]; |
| 17 |
|
| 18 |
if ( file && isOneOf( file.type, props.filetypes ) ) { |
| 19 |
props.onFileSelect( file, event, 'drop' ); |
| 20 |
} else { |
| 21 |
props.onError( { |
| 22 |
id: 'file_not_allowed', |
| 23 |
message: __( 'This file type is not allowed', 'elementor' ), |
| 24 |
} ); |
| 25 |
} |
| 26 |
} |
| 27 |
}, |
| 28 |
}; |
| 29 |
|
| 30 |
return ( |
| 31 |
<section className={ arrayToClassName( classes ) }> |
| 32 |
<DragDrop { ...dragDropEvents } isLoading={ props.isLoading }> |
| 33 |
{ props.icon && <Icon className={ `e-app-drop-zone__icon ${ props.icon }` } /> } |
| 34 |
|
| 35 |
{ props.heading && <Heading variant="display-3">{ props.heading }</Heading> } |
| 36 |
|
| 37 |
{ props.text && <Text variant="xl" className="e-app-drop-zone__text">{ props.text }</Text> } |
| 38 |
|
| 39 |
{ props.secondaryText && <Text variant="xl" className="e-app-drop-zone__secondary-text">{ props.secondaryText }</Text> } |
| 40 |
|
| 41 |
{ props.showButton && |
| 42 |
<UploadFile |
| 43 |
isLoading={ props.isLoading } |
| 44 |
type={ props.type } |
| 45 |
onButtonClick={ props.onButtonClick } |
| 46 |
onFileSelect={ props.onFileSelect } |
| 47 |
onWpMediaSelect={ ( frame ) => props.onWpMediaSelect( frame ) } |
| 48 |
onError={ ( error ) => props.onError( error ) } |
| 49 |
text={ props.buttonText } |
| 50 |
filetypes={ props.filetypes } |
| 51 |
variant={ props.buttonVariant } |
| 52 |
color={ props.buttonColor } |
| 53 |
onFileChoose={ props.onFileChoose } |
| 54 |
/> } |
| 55 |
|
| 56 |
{ props.description && <Text variant="xl" className="e-app-drop-zone__description">{ props.description }</Text> } |
| 57 |
</DragDrop> |
| 58 |
</section> |
| 59 |
); |
| 60 |
} |
| 61 |
|
| 62 |
DropZone.propTypes = { |
| 63 |
className: PropTypes.string, |
| 64 |
children: PropTypes.any, |
| 65 |
type: PropTypes.string, |
| 66 |
onFileSelect: PropTypes.func.isRequired, |
| 67 |
onWpMediaSelect: PropTypes.func, |
| 68 |
heading: PropTypes.string, |
| 69 |
text: PropTypes.string, |
| 70 |
secondaryText: PropTypes.string, |
| 71 |
buttonText: PropTypes.string, |
| 72 |
buttonVariant: PropTypes.string, |
| 73 |
buttonColor: PropTypes.string, |
| 74 |
icon: PropTypes.string, |
| 75 |
showButton: PropTypes.bool, |
| 76 |
showIcon: PropTypes.bool, |
| 77 |
isLoading: PropTypes.bool, |
| 78 |
filetypes: PropTypes.array.isRequired, |
| 79 |
onError: PropTypes.func, |
| 80 |
description: PropTypes.string, |
| 81 |
onButtonClick: PropTypes.func, |
| 82 |
onFileChoose: PropTypes.func, |
| 83 |
}; |
| 84 |
|
| 85 |
DropZone.defaultProps = { |
| 86 |
className: '', |
| 87 |
type: 'file-explorer', |
| 88 |
icon: 'eicon-library-upload', |
| 89 |
showButton: true, |
| 90 |
showIcon: true, |
| 91 |
onError: () => {}, |
| 92 |
}; |
| 93 |
|
