[FEAT]: Add disableScroll prop to work together with resultOnTooltip prop of FileItem component

Author: JinSSJ3

src/components/dropzone/components/Dropzone/Dropzone.scss

@@ -3,6 +3,34 @@
 @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap");
 
 .dropzone-ui {
+  .dropzone-ui-ripple {
+    position: absolute;
+    width: 0%;
+    height: 0%;
+    //background-color: aqua;
+    top: 0;
+    left: 0;
+    overflow: hidden;
+    //padding-left: 15px;
+    //z-index: -1;
+    span.ripple {
+      // width: 100%;
+      //height: 100%;
+      // overflow: hidden;
+      position: absolute;
+      border-radius: 50%;
+      transform: scale(0);
+      animation: ripple 500ms linear;
+      background-color: rgba(255, 255, 255, 0.7);
+    }
+
+    @keyframes ripple {
+      to {
+        transform: scale(4);
+        opacity: 0;
+      }
+    }
+  }
   color: #646c7f;
   position: relative;
   min-height: 280px;
@@ -16,15 +44,15 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  overflow: hidden;
+  //overflow: hidden;
   padding: 24px 0;
   &.drag {
     border: none;
   }
   &.clickable {
     cursor: pointer;
   }
-  span.ripple {
+/*   span.ripple {
     // width: 100%;
     //height: 100%;
     // overflow: hidden;
@@ -40,7 +68,7 @@
       transform: scale(4);
       opacity: 0;
     }
-  }
+  } */
 
   //verflow: hidden;
   .dz-ui-header {

src/components/dropzone/components/Dropzone/Dropzone.tsx

@@ -10,7 +10,10 @@ import {
   validateFile,
 } from "../utils/validation.utils";
 import { DropzoneProps, DropzonePropsDefault } from "./DropzoneProps";
-import { createRipple } from "../utils/dropzone-ui.utils";
+import {
+  createRipple,
+  createRippleFromElement,
+} from "../utils/dropzone-ui.utils";
 import DropzoneHeader from "../DropzoneHeader/DropzoneHeader";
 import DropzoneFooter from "../DropzoneFooter.tsx/DropzoneFooter";
 import { FileItemContainer } from "../../../../components/file-item";
@@ -66,9 +69,10 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
     label,
     fakeUploading,
     localization,
+    disableScroll,
   } = mergeProps(props, DropzonePropsDefault);
-
-
+  //ref for ripple
+  const dz_ui_ripple_ref = useRef<HTMLDivElement>(null);
   //re-validation: for development purposes and for preventing clean fileList in web page code generator
   useEffect(() => {
     if (files.length > 0) {
@@ -103,14 +107,14 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
   const [localView, setLocalView] =
     useState<FileItemContainerProps["view"]>("grid");
   const [localMessage, setLocalMessage] = useState<string>("");
-  
+
   //ClassName for dynamic style
   const [onUploadingStart, setOnUploadingStart] = useState<boolean>(false);
   // const [queueFiles, setQueueFiles] = useState<FileValidated[]>([]);
   const classNameCreated: string = useDropzoneStyles(
     color,
     backgroundColor,
-    maxHeight,
+    disableScroll ? undefined : maxHeight,
     minHeight
   );
   const finalClassName: string = `dropzone-ui${classNameCreated}${
@@ -126,10 +130,12 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
     }
   }, [value]);
   useEffect(() => {
-    if (view) {
+    if (disableScroll) {
+      setLocalView("grid");
+    } else if (view) {
       setLocalView(view);
     }
-  }, [view]);
+  }, [view, disableScroll]);
   useEffect(() => {
     if (uploadingMessage) {
       setLocalMessage(uploadingMessage);
@@ -267,12 +273,10 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
         DropzoneLocalizer.uploadFinished as FunctionLabel;
       setLocalMessage(
         finishUploadMessenger(missingUpload - totalRejected, totalRejected)
-
       );
       setTimeout(() => {
         setOnUploadingStart(false);
       }, 2300);
-      
     } else {
       setLocalMessage(
         DropzoneLocalizer.noFilesMessage as string
@@ -322,7 +326,9 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
       localValidator
     );
     if (!disableRipple) {
-      createRipple(evt, color as string);
+      createRippleFromElement(dz_ui_ripple_ref.current, color as string);
+
+     // createRipple(evt, color as string);
     }
     setIsDragging(false);
     handleFilesChange(output);
@@ -411,7 +417,8 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
     let referenceInput = inputRef.current;
     referenceInput?.click();
     if (!disableRipple) {
-      createRipple(e, color as string);
+      createRippleFromElement(dz_ui_ripple_ref.current, color as string);
+      //createRipple(e, color as string);
     }
     onClick?.(e);
   }
@@ -422,7 +429,6 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
     //onDrop?.([]);
   };
   const handleChangeView = (newView: "grid" | "list") => {
-  
     setLocalView(newView);
     onChangeView?.(newView);
   };
@@ -435,6 +441,7 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
       onClick={clickable ? handleClick : () => {}}
       // onDragLeave={handleDragLeave}
     >
+      <div className="dropzone-ui-ripple" ref={dz_ui_ripple_ref}></div>
       {header && (
         <DropzoneHeader
           maxFileSize={maxFileSize}
@@ -444,7 +451,7 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
           //handleReset={handleReset}
           onUploadingStart={onUploadingStart}
           view={localView}
-          hideViewIcon={view ? true : false}
+          hideViewIcon={view || disableScroll ? true : false}
           onChangeView={handleChangeView}
           onUploadStart={!uploadOnDrop ? handleUploadStart : undefined}
           onClean={onClean && !onUploadingStart ? handleCleanFiles : undefined}
@@ -453,7 +460,14 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
         />
       )}
       {children && value && files && files.length > 0 ? (
-        <FileItemContainer view={localView} style={{ minHeight, maxHeight }}>
+        <FileItemContainer
+          view={localView}
+          style={{
+            minHeight: minHeight,
+            maxHeight: disableScroll ? undefined : maxHeight,
+          }}
+          disableScroll={disableScroll}
+        >
           {children}
         </FileItemContainer>
       ) : (

src/components/dropzone/components/Dropzone/DropzoneProps.ts

@@ -194,9 +194,14 @@ export interface DropzoneProps extends OverridableProps {
   /**
   * language to be used
   * for now
-  * only English, French , Portuguese and Spanish are supported
+  * only English, French , Portuguese, Chinnese (traditional and simplyfied) and Spanish are supported
   */
   localization?: Localization;
+  /**
+   * if present or true, removes scrolls
+   * and sets the Dropzone in a grid view
+   */
+  disableScroll?: boolean;
 }
 
 export const DropzonePropsDefault: DropzoneProps = {
@@ -225,7 +230,8 @@ export const DropzonePropsDefault: DropzoneProps = {
   onClean: undefined,
   behaviour: "add",
   label: undefined,
-  localization: "EN-en"
+  localization: "EN-en",
+  disableScroll:undefined
 };
 
 

src/components/dropzone/components/utils/dropzone-ui.utils.ts

@@ -10,12 +10,11 @@ export function createRipple<
     buttonAnchorDiv.clientWidth,
     buttonAnchorDiv.clientHeight
   );
-  const radius = diameter / 2;
+  const radius: number = diameter / 2;
 
   circle.style.width = circle.style.height = `${diameter}px`;
-  circle.style.left = `${
-    event.clientX - buttonAnchorDiv.offsetLeft - radius
-  }px`;
+  circle.style.left = `${event.clientX - buttonAnchorDiv.offsetLeft - radius
+    }px`;
   circle.style.top = `${event.clientY - buttonAnchorDiv.offsetTop - radius}px`;
   circle.classList.add("ripple");
 
@@ -29,4 +28,41 @@ export function createRipple<
     ripple.remove();
   }
   buttonAnchorDiv.appendChild(circle);
-}
+}
+
+
+export function createRippleFromElement(element: HTMLDivElement | null, color: string) {
+  if (!element) {
+    return;
+  }
+  const buttonAnchorDiv = element;
+  buttonAnchorDiv.style.height="100%";
+  buttonAnchorDiv.style.width="100%";
+  const circle: HTMLSpanElement = document.createElement("span");
+  const diameter = Math.max(
+    buttonAnchorDiv.clientWidth,
+    buttonAnchorDiv.clientHeight
+  );
+  const radius: number = diameter / 2;
+
+  circle.style.width = circle.style.height = `${diameter}px`;
+  circle.style.left = `${buttonAnchorDiv.offsetLeft - radius
+    }px`;
+  circle.style.top = `${buttonAnchorDiv.offsetTop - radius}px`;
+  circle.classList.add("ripple");
+
+  circle.style.backgroundColor = hexColorToRGB(
+    asureColor(colourNameToHex(color)),
+    0.4
+  );
+
+  const ripple = buttonAnchorDiv.getElementsByClassName("ripple")[0];
+  if (ripple) {
+    ripple.remove();
+  }
+  buttonAnchorDiv.appendChild(circle);
+  setTimeout(()=>{
+    buttonAnchorDiv.style.height="0%";
+    buttonAnchorDiv.style.width="0%";
+  },500);
+}