diff --git a/src/files-ui/components/dropzone/components/DropzoneButtons/DropzoneButtons.scss b/src/files-ui/components/dropzone/components/DropzoneButtons/DropzoneButtons.scss index 4c00f2ac660f04be1b549ddafc4099a17b2858b6..491b334f6f5abe3094adc0c7f2a304e4e2cba1bb 100644 --- a/src/files-ui/components/dropzone/components/DropzoneButtons/DropzoneButtons.scss +++ b/src/files-ui/components/dropzone/components/DropzoneButtons/DropzoneButtons.scss @@ -7,6 +7,13 @@ align-items: center; justify-content: flex-end; box-sizing: border-box; - padding: 10px 0; + //padding: 10px 0; gap: 10px; + + &.top { + padding-bottom: 10px; + } + &.bottom { + padding-top: 10px; + } } diff --git a/src/files-ui/components/dropzone/components/DropzoneButtons/DropzoneButtons.tsx b/src/files-ui/components/dropzone/components/DropzoneButtons/DropzoneButtons.tsx index 0493ac2fd0df500c75c4690dd75579a6111f31f0..4fc768150e5e4301e5143eeb147c7000c56ba8f2 100644 --- a/src/files-ui/components/dropzone/components/DropzoneButtons/DropzoneButtons.tsx +++ b/src/files-ui/components/dropzone/components/DropzoneButtons/DropzoneButtons.tsx @@ -6,12 +6,14 @@ import { DropzoneActions, } from "../dropzone/DropzoneProps"; import "./DropzoneButtons.scss"; + interface DropzoneButtonsProps extends DropzoneActions { localization?: Localization; onAbort?: Function; onDelete?: Function; onUpload?: Function; onClean?: Function; + top?: boolean; } const DropzoneButtons: React.FC<DropzoneButtonsProps> = ( @@ -29,6 +31,7 @@ const DropzoneButtons: React.FC<DropzoneButtonsProps> = ( onClean, onDelete, onUpload, + top } = props; const actionButtonsList: DropzoneActionButton[] = [ @@ -49,11 +52,10 @@ const DropzoneButtons: React.FC<DropzoneButtonsProps> = ( ) as DropzoneActionButton[]; const finalClassName = addClassName( - "files-ui-buttons-container", + "files-ui-buttons-container" + `${top ? " top" : " bottom"}`, containerClassName ); - return ( <div className={finalClassName} style={containerStyle}> {actionButtonsList.map( diff --git a/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx b/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx index 733721a67359c1233fd8752c44dfc7e49aa797a1..4c3dd5bcd5fc698f7c3e9ceb90c7d0bea8aca9c9 100644 --- a/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx +++ b/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx @@ -611,28 +611,6 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => { } }; - const DropzoneActionButtons = ({ visible = true }) => { - if (!visible) return <></>; - else - return ( - <DropzoneButtons - abortButton={isUploading ? abortButton : undefined} - onAbort={handleAbortUpload} - deleteButton={deleteButton} - onDelete={!isUploading ? handleReset : undefined} - uploadButton={!isUploading && !autoUpload ? uploadButton : undefined} - onUpload={!autoUpload ? () => uploadfiles(localFiles) : undefined} - cleanButton={ - validateFilesFlag && !isUploading && !autoClean - ? cleanButton - : undefined - } - onClean={handleClean} - style={containerStyle} - className={containerClassName} - /> - ); - }; if (!dropzoneClassName) return <></>; return ( <React.Fragment> @@ -652,6 +630,7 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => { onClean={handleClean} style={containerStyle} className={containerClassName} + top={true} /> )} <div @@ -746,6 +725,7 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => { onClean={handleClean} style={containerStyle} className={containerClassName} + top={false} /> )} </React.Fragment>