From 38dca17ced9e71fbd13b50d5d0a72532757ee0d8 Mon Sep 17 00:00:00 2001
From: Jose Manuel Serrano Amaut <a20122128@pucp.pe>
Date: Mon, 27 Feb 2023 11:50:08 -0500
Subject: [PATCH] [WIP]: Refactor some components that shpuld be in the return
statement instead of being created every render. Missing refactor code that
is too large
---
.../DropzoneActionButtons.tsx | 8 ++++
.../DropzoneButtons/DropzoneButtons.tsx | 1 +
.../dropzone/components/dropzone/Dropzone.tsx | 38 ++++++++++++++++++-
.../FileMosaicUploadLayer.tsx | 33 ++++++++++++++--
.../material-button/MaterialButton.tsx | 1 +
.../hooks/useMaterialButtonClassName.ts | 2 +
6 files changed, 78 insertions(+), 5 deletions(-)
create mode 100644 src/files-ui/components/dropzone/components/DropzoneActionButtons/DropzoneActionButtons.tsx
diff --git a/src/files-ui/components/dropzone/components/DropzoneActionButtons/DropzoneActionButtons.tsx b/src/files-ui/components/dropzone/components/DropzoneActionButtons/DropzoneActionButtons.tsx
new file mode 100644
index 0000000..f9fbe0f
--- /dev/null
+++ b/src/files-ui/components/dropzone/components/DropzoneActionButtons/DropzoneActionButtons.tsx
@@ -0,0 +1,8 @@
+import * as React from "react";
+interface DropzoneActionButtonsProps {}
+const DropzoneActionButtons: React.FC<DropzoneActionButtonsProps> = (
+ props: DropzoneActionButtonsProps
+) => {
+ return <div>DropzoneActionButtons</div>;
+};
+export default DropzoneActionButtons;
diff --git a/src/files-ui/components/dropzone/components/DropzoneButtons/DropzoneButtons.tsx b/src/files-ui/components/dropzone/components/DropzoneButtons/DropzoneButtons.tsx
index 600d0b3..0493ac2 100644
--- a/src/files-ui/components/dropzone/components/DropzoneButtons/DropzoneButtons.tsx
+++ b/src/files-ui/components/dropzone/components/DropzoneButtons/DropzoneButtons.tsx
@@ -53,6 +53,7 @@ const DropzoneButtons: React.FC<DropzoneButtonsProps> = (
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 9510b27..3282af7 100644
--- a/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx
+++ b/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx
@@ -675,7 +675,24 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
if (!dropzoneClassName) return <></>;
return (
<React.Fragment>
- <DropzoneActionButtons visible={actionButtonsPosition === "top"} />
+ {actionButtonsPosition === "top" && (
+ <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}
+ />
+ )}
<div
style={style}
className={dropzoneClassName}
@@ -752,7 +769,24 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
<DropzoneDisabledLayer open={disabled} />
</div>
- <DropzoneActionButtons visible={actionButtonsPosition === "bottom"} />
+ {actionButtonsPosition === "bottom" && (
+ <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}
+ />
+ )}
</React.Fragment>
);
};
diff --git a/src/files-ui/components/file-mosaic/components/FileMosaicUploadLayer/FileMosaicUploadLayer.tsx b/src/files-ui/components/file-mosaic/components/FileMosaicUploadLayer/FileMosaicUploadLayer.tsx
index 96ee3f9..4db3c99 100644
--- a/src/files-ui/components/file-mosaic/components/FileMosaicUploadLayer/FileMosaicUploadLayer.tsx
+++ b/src/files-ui/components/file-mosaic/components/FileMosaicUploadLayer/FileMosaicUploadLayer.tsx
@@ -135,10 +135,10 @@ const FileMosaicUploadLayer: React.FC<FileMosaicUploadLayerProps> = (
const StatusSelector = (status: UPLOADSTATUS | undefined) => {
switch (status) {
- case "preparing":
+ /* case "preparing":
return <PreparingStatus />;
case "uploading":
- return <UploadingStatus />;
+ return <UploadingStatus />; */
case "error":
return <ErrorStatus />;
case "success":
@@ -157,7 +157,34 @@ const FileMosaicUploadLayer: React.FC<FileMosaicUploadLayerProps> = (
{statusHistory.map((status, index) => {
return (
<div className="elevation-item" key={index + 1}>
- {StatusSelector(status)}
+ {status === "preparing" ? (
+ <React.Fragment>
+ <InfiniteLoader onClick={onCancel} size={65} />
+ <span>{FileItemStatusLocalizer.preparing as string}</span>
+ </React.Fragment>
+ ) : status === "uploading" ? (
+ <React.Fragment>
+ {progress !== undefined ? (
+ <DynamicLoader
+ size={70}
+ x={35}
+ y={35}
+ radius={32}
+ percentage={progress}
+ width={6}
+ hidePerncentage={
+ progress === undefined || onAbort !== undefined
+ }
+ onClick={onAbort}
+ />
+ ) : (
+ <InfiniteLoader onClick={onAbort} size={70} />
+ )}
+ <span> {FileItemStatusLocalizer.uploading as string}</span>
+ </React.Fragment>
+ ) : (
+ StatusSelector(status)
+ )}
</div>
);
})}
diff --git a/src/files-ui/components/material-button/MaterialButton.tsx b/src/files-ui/components/material-button/MaterialButton.tsx
index 478d1de..2768a30 100644
--- a/src/files-ui/components/material-button/MaterialButton.tsx
+++ b/src/files-ui/components/material-button/MaterialButton.tsx
@@ -47,6 +47,7 @@ const MaterialButton: React.FC<MaterialButtonProps> = (
onClick?.(e as React.MouseEvent<HTMLButtonElement, MouseEvent>);
}
+
if (materialButtonClassName!==undefined || resetStyles)
return React.createElement(href ? "a" : "button", {
className: resetStyles && className ? className : materialButtonClassName,
diff --git a/src/files-ui/components/material-button/hooks/useMaterialButtonClassName.ts b/src/files-ui/components/material-button/hooks/useMaterialButtonClassName.ts
index 9972a55..2110306 100644
--- a/src/files-ui/components/material-button/hooks/useMaterialButtonClassName.ts
+++ b/src/files-ui/components/material-button/hooks/useMaterialButtonClassName.ts
@@ -12,6 +12,8 @@ const useMaterialButtonClassName = (
idClassName?: number | string,
resetStyles?: boolean
): string | undefined => {
+ console.log("useMaterialButtonClassName", variant, disabled, color, textColor,
+ textDecoration, className, idClassName, resetStyles);
const baseClassName: string = "material-button-root material-button";
--
GitLab