From 59c746cae4e8145547c6873c9fd4e5e27ab76b6f Mon Sep 17 00:00:00 2001
From: Jose Manuel Serrano Amaut <a20122128@pucp.pe>
Date: Wed, 15 Mar 2023 00:14:16 -0500
Subject: [PATCH] [REF]: Refactor ActionButotns container to recive extra prop
to determ,ine whether is a top otr bottom padding that is required
---
.../DropzoneButtons/DropzoneButtons.scss | 9 ++++++-
.../DropzoneButtons/DropzoneButtons.tsx | 6 +++--
.../dropzone/components/dropzone/Dropzone.tsx | 24 ++-----------------
3 files changed, 14 insertions(+), 25 deletions(-)
diff --git a/src/files-ui/components/dropzone/components/DropzoneButtons/DropzoneButtons.scss b/src/files-ui/components/dropzone/components/DropzoneButtons/DropzoneButtons.scss
index 4c00f2a..491b334 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 0493ac2..4fc7681 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 733721a..4c3dd5b 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>
--
GitLab