[FIX]: Convert hyphen cased props on icons to camelCased props

JinSSJ3 · JinSSJ3 · commit 38e729359729 · 2021-10-22T03:45:00.000-05:00
diff --git a/README.md b/README.md
@@ -20,7 +20,7 @@
 [![Average time to resolve an issue](http://isitmaintained.com/badge/resolution/dropzone-ui/react.svg)](http://isitmaintained.com/project/dropzone-ui/react)
 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
 
-[React](https://reactjs.org/) set of components for a complete file upload management awith image previews on user inteface. There already exists some very good libraries; However, **inspired** in those ones, there was created something **new** and **more powerful**. Google's Material design principles were also considered in development. Indeed, icons come from [Material design icons](https://fonts.google.com/icons).
+[React](https://reactjs.org/) set of components for a complete file upload management with image previews on user inteface. There already exists some very good libraries; However, **inspired** in those ones, there was created something **new** and **more powerful**. Google's Material design principles were also considered in development. Indeed, icons come from [Material design icons](https://fonts.google.com/icons).
 
 ## Sample result:
 
diff --git a/build/components/dropzone/components/utils/index.d.ts b/build/components/dropzone/components/utils/index.d.ts
@@ -1,3 +1,2 @@
 import { createRipple } from "./dropzone-ui.utils";
-import { uploadMultipleSecuential } from "./dropzone-ui.upload.utils";
-export { createRipple, uploadMultipleSecuential };
+export { createRipple, };
diff --git a/build/components/file-item/components/FileItemFullInfoLayer/FileItemFullInfoLayer.d.ts b/build/components/file-item/components/FileItemFullInfoLayer/FileItemFullInfoLayer.d.ts
@@ -16,5 +16,5 @@ export interface FileItemFullInfoLayerProps {
      * for now
      * only English and Spanish is supported
      */
-    localization: Localization;
+    localization?: Localization;
 }
diff --git a/build/index.es.js b/build/index.es.js
diff --git a/build/index.es.js.map b/build/index.es.js.map
diff --git a/build/index.js b/build/index.js
diff --git a/build/index.js.map b/build/index.js.map
diff --git a/build/localization/dropzone.localization.d.ts b/build/localization/dropzone.localization.d.ts
@@ -12,4 +12,4 @@ export declare const DropzoneLocalizer: ComponentLocalizer;
  * @param local the Localization
  * @returns a ComponentLocalizer object that contains the translation
  */
-export declare const DropzoneLocalizerSelector: (local: Localization) => LocalLabels;
+export declare const DropzoneLocalizerSelector: (local: Localization | undefined) => LocalLabels;
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@dropzone-ui/react",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "Elegant React Library Component for drag’n’drop files. Simple to use with little code. Material design guidelines considered. Multilanguage support.",
   "main": "./build/index.js",
   "module": "./build/index.es.js",
diff --git a/src/components/dropzone/components/Dropzone/DropzoneProps.ts b/src/components/dropzone/components/Dropzone/DropzoneProps.ts
@@ -160,7 +160,7 @@ export const DropzonePropsDefault: DropzoneProps = {
   disableRipple: false,
   clickable: true,
   view: "grid",
-  maxHeight: "500px",
+  maxHeight: "450px",
   footer: true,
   header: true,
   config:
diff --git a/src/components/dropzone/components/DropzoneHeader/DropzoneHeader.tsx b/src/components/dropzone/components/DropzoneHeader/DropzoneHeader.tsx
@@ -28,7 +28,7 @@ export interface DropzoneHeaderProps {
 }
 
 const DropzoneHeader: FC<DropzoneHeaderProps> = (
-  props: DropzoneHeaderProps,
+  props: DropzoneHeaderProps
 ) => {
   const {
     maxFileSize,
@@ -44,7 +44,7 @@ const DropzoneHeader: FC<DropzoneHeaderProps> = (
   } = props;
 
   const DropzoneHeaderLocalizer: LocalLabels = DropzoneLocalizerSelector(
-    localization,
+    localization
   ).header as LocalLabels;
 
   const handleStartUploading = () => {
@@ -58,16 +58,16 @@ const DropzoneHeader: FC<DropzoneHeaderProps> = (
           {DropzoneHeaderLocalizer.uploadFilesMessage}
           {/* localization === "ES-es" ? `Subir archivos` : "Upload files" */}
           <Upload color="#646c7f" onClick={handleStartUploading} />
-          {" | "}
-        </>,
+          {", "}
+        </>
       );
     }
 
     const maxFileSizeMessenger: FunctionLabel =
       DropzoneHeaderLocalizer.maxSizeMessage as FunctionLabel;
     if (maxFileSize) {
       result.push(
-        maxFileSizeMessenger(fileSizeFormater(maxFileSize)),
+        maxFileSizeMessenger(fileSizeFormater(maxFileSize))
 
         /* localization === "ES-es"
           ? `Tam. máximo de archivo ${fileSizeFormater(maxFileSize)} | `
@@ -79,7 +79,7 @@ const DropzoneHeader: FC<DropzoneHeaderProps> = (
 
     if (maxFiles) {
       result.push(
-        validFileSizeMessenger(numberOfValidFiles, maxFiles),
+        validFileSizeMessenger(numberOfValidFiles as number, maxFiles)
         /*  localization === "ES-es"
           ? `Archivos ${numberOfValidFiles}/${maxFiles} | Válidos: ${numberOfValidFiles} | `
           : `Files ${numberOfValidFiles}/${maxFiles} | Valid: ${numberOfValidFiles} | `, */
@@ -104,7 +104,7 @@ const DropzoneHeader: FC<DropzoneHeaderProps> = (
               color="#646c7f"
             />
           )}
-        </>,
+        </>
       );
     }
 
@@ -115,7 +115,7 @@ const DropzoneHeader: FC<DropzoneHeaderProps> = (
           //color="rgba(255,255,255,0.8)"
           onClick={handleReset}
           colorFill="rgba(255,255,255,0.8)"
-        />,
+        />
       );
     }
     return result;
@@ -127,8 +127,12 @@ const DropzoneHeader: FC<DropzoneHeaderProps> = (
         e.stopPropagation();
       }}
     >
-      {makeHeader().map((HeaderItem) => (
-        <>{HeaderItem}</>
+      {makeHeader().map((HeaderItem, index) => (
+        <span key={index} 
+        style={{ display: "flex" }}
+        >
+          {HeaderItem}
+        </span>
       ))}
     </div>
   );
diff --git a/src/components/dropzone/components/utils/index.ts b/src/components/dropzone/components/utils/index.ts
@@ -4,7 +4,7 @@
 import {
     createRipple
 } from "./dropzone-ui.utils";
-import { uploadMultipleSecuential } from "./dropzone-ui.upload.utils";
+//import { uploadMultipleSecuential } from "./dropzone-ui.upload.utils";
 /* export {
 
     validateFile, createRipple, customValidateFile
@@ -14,5 +14,5 @@ export {
 
 }  */
 export {
-    createRipple, uploadMultipleSecuential
+    createRipple, //uploadMultipleSecuential
 }
diff --git a/src/components/file-item/components/FileItemFullInfoLayer/FileItemFullInfoLayer.tsx b/src/components/file-item/components/FileItemFullInfoLayer/FileItemFullInfoLayer.tsx
@@ -23,7 +23,7 @@ const FileItemFullInfoLayer: FC<FileItemFullInfoLayerProps> = (
     localization,
   } = props;
   const FileItemFullInfoLocalizer: LocalLabels = FileItemLocalizerSelector(
-    localization,
+    localization as Localization,
   ).fullInfoLayer as LocalLabels;
   const handleCloseInfo = () => {
     onClose?.();
@@ -48,12 +48,12 @@ const FileItemFullInfoLayer: FC<FileItemFullInfoLayerProps> = (
           <div className={"file-status"}>
             <FileItemStatus
               uploadStatus={uploadStatus}
-              localization={localization}
+              localization={localization as Localization}
             />
           </div>
         ) : (
           <div className="file-status">
-            <FileItemStatus valid={valid} localization={localization} />
+            <FileItemStatus valid={valid} localization={localization as Localization} />
           </div>
         )}
       </span>
@@ -101,5 +101,5 @@ export interface FileItemFullInfoLayerProps {
    * for now
    * only English and Spanish is supported
    */
-  localization: Localization;
+  localization?: Localization;
 }
diff --git a/src/components/file-item/components/FileItemMainLayer/FileItemMainLayer.tsx b/src/components/file-item/components/FileItemMainLayer/FileItemMainLayer.tsx
@@ -85,7 +85,7 @@ const FileItemMainLayer: FC<FileItemMainLayerProps> = (
         <div className={uploadComplete ? "file-status hide" : "file-status"}>
           <FileItemStatus
             uploadStatus={uploadStatus}
-            localization={localization}
+            localization={localization as Localization}
           />
         </div>
       )}
@@ -97,13 +97,13 @@ const FileItemMainLayer: FC<FileItemMainLayerProps> = (
               <FileItemStatus
                 uploadStatus={uploadStatus}
                 //message={localization==="ES-es"?"subido":"uploaded"}
-                localization={localization}
+                localization={localization as Localization}
               />
             </div>
           </div>
         ) : (
           <div className={showInfo ? "file-status hide" : "file-status"}>
-            <FileItemStatus valid={valid} localization={localization} />
+            <FileItemStatus valid={valid} localization={localization as Localization} />
           </div>
         )}
 
diff --git a/src/components/icons/Upload/Upload.tsx b/src/components/icons/Upload/Upload.tsx
@@ -11,7 +11,7 @@ const Upload: FC<UploadProps> = (props: UploadProps) => {
       style={onClick ? { ...{ cursor: "pointer", ...finalStyle } } : finalStyle}
       onClick={() => onClick?.()}
       xmlns="http://www.w3.org/2000/svg"
-      enable-background="new 0 0 24 24"
+      enableBackground="new 0 0 24 24"
       height={`${finalSize}px`}
       viewBox="0 0 24 24"
       width={`${finalSize}px`}
diff --git a/src/components/icons/UploadDone/UploadDone.tsx b/src/components/icons/UploadDone/UploadDone.tsx
@@ -12,7 +12,7 @@ const UploadDone: FC<UploadDoneProps> = (props: UploadDoneProps) => {
       style={onClick ? { ...{ cursor: "pointer", ...finalStyle } } : finalStyle}
       onClick={() => onClick?.()}
       xmlns="http://www.w3.org/2000/svg"
-      enable-background="new 0 0 24 24"
+      enableBackground="new 0 0 24 24"
       height={`${finalSize}px`}
       viewBox="0 0 24 24"
       width={`${finalSize}px`}
diff --git a/src/components/icons/ViewGrid/ViewGrid.tsx b/src/components/icons/ViewGrid/ViewGrid.tsx
@@ -13,7 +13,7 @@ const ViewGrid: FC<ViewGridProps> = (props: ViewGridProps) => {
     style={onClick ? { ...{ cursor: "pointer", ...finalStyle } } : finalStyle}
     onClick={() => onClick?.()}
       xmlns="http://www.w3.org/2000/svg"
-      enable-background="new 0 0 24 24"
+      enableBackground="new 0 0 24 24"
       height={`${finalSize}px`}
       viewBox="0 0 24 24"
       width={`${finalSize}px`}
diff --git a/src/components/icons/ViewList/ViewList.tsx b/src/components/icons/ViewList/ViewList.tsx
@@ -11,7 +11,7 @@ const ViewList: FC<ViewListProps> = (props: ViewListProps) => {
       style={onClick ? { ...{ cursor: "pointer", ...finalStyle } } : finalStyle}
       onClick={() => onClick?.()}
       xmlns="http://www.w3.org/2000/svg"
-      enable-background="new 0 0 24 24"
+      enableBackground="new 0 0 24 24"
       height={`${finalSize}px`}
       viewBox="0 0 24 24"
       width={`${finalSize}px`}
diff --git a/src/localization/dropzone.localization.ts b/src/localization/dropzone.localization.ts
@@ -62,17 +62,17 @@ export const DropzoneSpanish: LocalLabels = {
 export const DropzoneFrench: LocalLabels = {
     defaultLabel: "Déposez vos fichiers ici",
 
-    uploadingMessage: (amountOfFiles: string) => { return `Envoi de ${amountOfFiles} fichiers`; },
-    uploadFinished: (uploaded: string, rejected: string) => `Fichiers téléchargés : ${uploaded}, Fichiers rejetés: ${rejected}`,
+    uploadingMessage: (amountOfFiles) => { return `Envoi de ${amountOfFiles} fichiers`; },
+    uploadFinished: (uploaded, rejected) => `Fichiers téléchargés : ${uploaded}, Fichiers rejetés: ${rejected}`,
     noFilesMessage: `Aucun fichier valide ne manque`,
     footer: {
         acceptAll: `Tous types de fichiers acceptés `,
-        acceptCustom: (accept: string) => `Types de fichier: ${accept}`
+        acceptCustom: (accept) => `Types de fichier: ${accept}`
     },
     header: {
         uploadFilesMessage: "Envoyer les fichiers",
-        maxSizeMessage: (maxFileSize: number) => `Taille maximale du fichier  ${maxFileSize} | `,
-        validFilesMessage: (numberOfValidFiles: number, maxFiles: number) => `Fichiers  ${numberOfValidFiles}/${maxFiles} | Valides: ${numberOfValidFiles} | `
+        maxSizeMessage: (maxFileSize) => `Taille maximale du fichier  ${maxFileSize} | `,
+        validFilesMessage: (numberOfValidFiles, maxFiles) => `Fichiers  ${numberOfValidFiles}/${maxFiles} | Valides: ${numberOfValidFiles} | `
     },
     fakeuploadsuccess: "Le fichier a été téléchargé avec succès",
     fakeUploadError: "Erreur lors du téléchargement ",
@@ -90,7 +90,7 @@ export const DropzoneLocalizer: ComponentLocalizer = {
  * @param local the Localization
  * @returns a ComponentLocalizer object that contains the translation
  */
-export const DropzoneLocalizerSelector = (local: Localization): LocalLabels => {
+export const DropzoneLocalizerSelector = (local: Localization | undefined): LocalLabels => {
     switch (local) {
         case "ES-es": return DropzoneLocalizer["ES-es"];
         case "EN-en": return DropzoneLocalizer["EN-en"];
diff --git a/src/utils/loader.tsx b/src/utils/loader.tsx
@@ -29,13 +29,13 @@ const Loader: FC<loaderProps> = (props: loaderProps) => {
       <path
         fill="none"
         ng-attr-stroke="{{config.cf}}"
-        stroke-width="2.7928"
+        strokeWidth="2.7928"
         d="M82,63H18c-7.2,0-13-5.8-13-13v0c0-7.2,5.8-13,13-13h64c7.2,0,13,5.8,13,13v0C95,57.2,89.2,63,82,63z"
         stroke="#5d5d5d"
       ></path>
       <g
         ng-attr-clip-path="url(#{{config.cpid}})"
-        clip-path="url(#lds-colorbar-cpid-9d2a9cfa91489)"
+        clipPath="url(#lds-colorbar-cpid-9d2a9cfa91489)"
       >
         <g transform="translate(10 0)">
           <rect

Original file line number	Diff line number	Diff line change
`@@ -16,5 +16,5 @@ export interface FileItemFullInfoLayerProps {`
`16`	`16`	`* for now`
`17`	`17`	`* only English and Spanish is supported`
`18`	`18`	`*/`
`19`		`- localization: Localization;`
	`19`	`+ localization?: Localization;`
`20`	`20`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@dropzone-ui/react",`
`3`		`- "version": "3.2.0",`
	`3`	`+ "version": "3.3.0",`
`4`	`4`	`"description": "Elegant React Library Component for drag’n’drop files. Simple to use with little code. Material design guidelines considered. Multilanguage support.",`
`5`	`5`	`"main": "./build/index.js",`
`6`	`6`	`"module": "./build/index.es.js",`