[WIP]: Refactor some components that shpuld be in the return statement instead...

[WIP]: Refactor some components that shpuld be in the return statement instead of being created every render. Missing refactor code that is too large

src/files-ui/components/dropzone/components/DropzoneActionButtons/DropzoneActionButtons.tsx

+import * as React from "react";
+interface DropzoneActionButtonsProps {}
+const DropzoneActionButtons: React.FC<DropzoneActionButtonsProps> = (
+  props: DropzoneActionButtonsProps
+) => {
+  return <div>DropzoneActionButtons</div>;
+};
+export default DropzoneActionButtons;

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(

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>
   );
 };

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>
           );
         })}

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,

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";