[FIX]: Fix custom children and replace behaviour='replace' in Dropzone

Author: JinSSJ3

README.md

@@ -1,6 +1,6 @@
 {
   "name": "@dropzone-ui/react",
-  "version": "6.5.5",
+  "version": "6.7.10",
   "description": "The best and most complete React library for managing file uploads. Multilanguage support. Server side support. Material design styles. Code generator on webpage.",
   "main": "./build/index.js",
   "module": "./build/index.es.js",
@@ -35,16 +35,14 @@
   "bugs": {
     "url": "https://github.com/dropzone-ui/dropzone-ui-react/issues"
   },
-  "homepage": "http://www.dropzone-ui.com",
+  "homepage": "https://dropzone-ui.herokuapp.com/",
   "dependencies": {
-    "@dynamicss/dynamicss": "^2.2.0",
-    "@unlimited-react-components/kernel": "^1.0.2",
-    "@unlimited-react-components/material-button": "^1.2.8"
+  
   },
   "peerDependencies": {
-    "axios": "^0.24.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "axios": "latest",
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^21.0.1",

build/index.es.js

@@ -293,8 +293,14 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
     }
   };
   const handleFilesChange = (output: FileValidated[]) => {
+    //console.log("handleFilesChange:", output);
     //setNumberOfValidFiles(output.filter((x:FileValidated) => x.valid).length);
     onDrop?.(output);
+
+    // onChange fix: when adding more files when max amount was reached
+    // and behaviour is set to  "replace", prevent replacing the current selection
+    // with a list of non valid files
+
     onChange?.(behaviour === "replace" ? output : [...files, ...output]);
 
     setFiles(output);
@@ -318,19 +324,19 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
       return;
     }
     let fileList: FileList = evt.dataTransfer.files;
+
     const remainingValids: number = (maxFiles || Infinity) - numberOfValidFiles;
     const localValidator: FileValidator = {
       accept: accept,
       maxFileSize: maxFileSize,
     };
     const output: FileValidated[] = fileListvalidator(
       fileList,
-      remainingValids,
+      behaviour === "replace" ? maxFiles || Infinity : remainingValids,
       localValidator
     );
     if (!disableRipple) {
       createRippleFromElement(dz_ui_ripple_ref.current, evt, color as string);
-
       // createRipple(evt, color as string);
     }
     setIsDragging(false);
@@ -351,7 +357,7 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
     };
     const output: FileValidated[] = fileListvalidator(
       fileList,
-      remainingValids,
+      behaviour === "replace" ? maxFiles || Infinity : remainingValids,
       localValidator
     );
     // Clean input element to trigger onChange event on input
@@ -467,6 +473,7 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
           localization={localization}
         />
       )}
+
       {children && value && files && files.length > 0 ? (
         <FileItemContainer
           view={localView}
@@ -481,9 +488,15 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
           {children}
         </FileItemContainer>
       ) : (
-        <DropzoneLabel>
-          {label || (DropzoneLocalizer.defaultLabel as string)}
-        </DropzoneLabel>
+        <>
+          {children ? (
+            <>{children}</>
+          ) : (
+            <DropzoneLabel>
+              {label || (DropzoneLocalizer.defaultLabel as string)}
+            </DropzoneLabel>
+          )}
+        </>
       )}
 
       {footer && (

build/index.es.js.map

@@ -7,31 +7,24 @@ import {
 import { DropzoneFooterProps } from "./DropzoneFooterProps";
 
 const DropzoneFooter: FC<DropzoneFooterProps> = (
-  props: DropzoneFooterProps,
+  props: DropzoneFooterProps
 ) => {
   const { accept, message, localization } = props;
 
   const DropzoneFooterLocalizer: LocalLabels = DropzoneLocalizerSelector(
-    localization,
+    localization
   ).footer as LocalLabels;
   const accepCustomMessenger: FunctionLabel =
     DropzoneFooterLocalizer.acceptCustom as FunctionLabel;
   return (
     <div className="dz-ui-footer" onClick={undefined}>
-      {/* message
-        ? message
-        : !accept
-        ? localization === "ES-es"
-          ? `Todos los tipos de archivo aceptados`
-          : `All file types accepted`
-        : localization === "ES-es"
-        ? `Archivos aceptados: ${accept}`
-        : `File types: ${accept}` */}
-      {message
-        ? message
-        : !accept
-        ? DropzoneFooterLocalizer.acceptAll
-        : accepCustomMessenger(accept)}
+      <>
+        {message
+          ? message
+          : !accept
+          ? DropzoneFooterLocalizer.acceptAll
+          : accepCustomMessenger(accept)}
+      </>
     </div>
   );
 };

build/index.js

@@ -32,7 +32,7 @@ export interface DropzoneHeaderProps {
    * only English and Spanish is supported
    */
   localization?: Localization;
-  hideViewIcon?:boolean;
+  hideViewIcon?: boolean;
 }
 
 const DropzoneHeader: FC<DropzoneHeaderProps> = (
@@ -71,10 +71,12 @@ const DropzoneHeader: FC<DropzoneHeaderProps> = (
       } else {
         result.push(
           <Fragment>
-            {DropzoneHeaderLocalizer.uploadFilesMessage}
-            {/* localization === "ES-es" ? `Subir archivos` : "Upload files" */}
+            <>
+              {DropzoneHeaderLocalizer.uploadFilesMessage}
+              {/* localization === "ES-es" ? `Subir archivos` : "Upload files" */}
 
-            <Upload color="#646c7f" onClick={handleStartUploading} />
+              <Upload color="#646c7f" onClick={handleStartUploading} />
+            </>
           </Fragment>
         );
       }

build/index.js.map

@@ -1,6 +1,7 @@
 import { OverridableProps } from "@unlimited-react-components/kernel";
 
 
+
 export interface PaperProps extends OverridableProps {
     /**
      * The elevation of the paper to produce a shadow
@@ -25,7 +26,7 @@ export interface PaperProps extends OverridableProps {
     component?: "div" | "span";
 }
 export const PaperPropsDefault: PaperProps = {
-    children: () => { },
+    children: undefined,
     shadow: 2,
     className: "",
     style: {},