[FEAT]: Localization feature for English, Spanish and French added

Author: JinSSJ3

.npmignore

@@ -16,4 +16,6 @@ CHANGELOG.md
 rollup.config.js
 ./.travis.yml
 tempackage.json
-Dropzone-ui.txt
+Dropzone-ui.txt
+CODE_OF_CONDICT.md
+CONTRIBUTING.md

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dropzone-ui/react",
-  "version": "2.1.1",
-  "description": "Elegant React Library Component for drag’n’drop files. Simple to use with little code. Material design guidelines considered.",
+  "version": "2.8.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",
   "types": "./build/index.d.ts",
@@ -30,6 +30,7 @@
     "unlimited-react-components",
     "front-end",
     "framework",
+    "localization",
     "kamui"
   ],
   "author": "JinSSJ3",

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

@@ -16,6 +16,11 @@ import { FileItemContainer } from "../../../../components/file-item";
 import { FileItemContainerProps } from "../../../file-item/components/FileItemContainer/FileItemContainerProps";
 import DropzoneLabel from "../DropzoneLabel/DropzoneLabel";
 import { uploadPromiseAxios } from "../utils/dropzone-ui.upload.utils";
+import { DropzoneLocalizerSelector } from "../../../../localization";
+import {
+  FunctionLabel,
+  LocalLabels,
+} from "../../../../localization/localization";
 
 const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
   const {
@@ -50,6 +55,9 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
     fakeUploading,
     localization,
   } = mergeProps(props, DropzonePropsDefault);
+
+  const DropzoneLocalizer: LocalLabels =
+    DropzoneLocalizerSelector(localization);
   //console.log("color:", color);
   //ref to the hidden input tag
   const inputRef = useRef<HTMLInputElement>(null);
@@ -97,7 +105,8 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
   }, [uploadingMessage]);
 
   /**
-   * Method for uploading FIles
+   * Method for uploading Files
+   * It will set all odd file id's as valid
    * @param files
    */
   const fakeUpload = (file: FileValidated): Promise<FileValidated> => {
@@ -107,19 +116,19 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
           resolve({
             ...file,
             uploadStatus: "success",
-            uploadMessage:
-              localization === "ES-es"
+            uploadMessage: DropzoneLocalizer.fakeuploadsuccess as string,
+            /*  localization === "ES-es"
                 ? "EL archivo se subió correctamente"
-                : "File was succesfully uploaded",
+                : "File was succesfully uploaded", */
           });
         } else {
           resolve({
             ...file,
             uploadStatus: "error",
-            uploadMessage:
-              localization === "ES-es"
+            uploadMessage: DropzoneLocalizer.fakeUploadError as string,
+            /* localization === "ES-es"
                 ? "Erro al subir el archivo"
-                : "Error on Uploading",
+                : "Error on Uploading", */
           });
         }
       }, 1500);
@@ -136,12 +145,16 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
     ).length;
     let totalRejected: number = 0;
     let currentCountUpload: number = 0;
+    const uploadingMessenger: FunctionLabel =
+      DropzoneLocalizer.uploadingMessage as FunctionLabel;
+
     setOnUploadStart(true);
     if (missingUpload > 0 && url) {
       setLocalMessage(
-        localization === "ES-es"
+        uploadingMessenger(`${missingUpload}/${totalNumber}`),
+        /* localization === "ES-es"
           ? `Subiendo ${missingUpload}/${totalNumber} archivos`
-          : `uploading ${missingUpload}/${totalNumber} files`,
+          : `uploading ${missingUpload}/${totalNumber} files`, */
       );
 
       let uploadStartFiles: FileValidated[] = files.map((f: FileValidated) => {
@@ -158,9 +171,11 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
         let currentFile: FileValidated = uploadStartFiles[i];
         if (currentFile.uploadStatus === "uploading") {
           setLocalMessage(
-            localization === "ES-es"
+            uploadingMessenger(`${++currentCountUpload}/${missingUpload}`),
+
+            /*  localization === "ES-es"
               ? `Subiendo ${++currentCountUpload}/${missingUpload} archivos`
-              : `Uploading ${++currentCountUpload}/${missingUpload} files...`,
+              : `Uploading ${++currentCountUpload}/${missingUpload} files...`, */
           );
           //  const uploadedFile = await fakeUpload(currentFile);
 
@@ -181,24 +196,25 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
         }
       }
       // upload group finished :D
+      const finishUploadMessenger: FunctionLabel =
+        DropzoneLocalizer.uploadFinished as FunctionLabel;
       setLocalMessage(
-        localization === "ES-es"
-          ? `Archivos subidos: ${
-              missingUpload - totalRejected
-            }, Rechazados: ${totalRejected}`
-          : `Uloaded files: ${
-              missingUpload - totalRejected
-            }, Rejected: ${totalRejected}`,
+        finishUploadMessenger(missingUpload - totalRejected, totalRejected),
+        /*   localization === "ES-es"
+          ? `Archivos subidos: ${missingUpload - totalRejected}, Rechazados: ${totalRejected}`
+          : `Uloaded files: ${missingUpload - totalRejected}, Rejected: ${totalRejected}`,
+      */
       );
       setTimeout(() => {
         setOnUploadStart(false);
       }, 2300);
       //console.log("queueFiles files:", queueFiles);
     } else {
       setLocalMessage(
-        localization === "ES-es"
+        DropzoneLocalizer.noFilesMessage as string,
+        /* localization === "ES-es"
           ? `No hay archivos válidos pendientes por subir`
-          : `There is not any missing valid file for uploading`,
+          : `There is not any missing valid file for uploading`, */
       );
       setTimeout(() => {
         setOnUploadStart(false);
@@ -317,7 +333,7 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
     //onDrop?.([]);
   };
   const handleChangeView = (newView: "grid" | "list") => {
-   // console.log("new View", newView);
+    // console.log("new View", newView);
     setLocalView(newView);
     onChangeView?.(newView);
   };
@@ -341,7 +357,7 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
           onChangeView={handleChangeView}
           onUploadStart={!uploadOnDrop ? handleUploadStart : undefined}
           urlPresent={url !== undefined}
-          localization={localization!=="ES-es"?"EN-en":"ES-es"}
+          localization={localization}
         />
       )}
       {value && files && files.length > 0 ? (
@@ -354,7 +370,7 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
         <DropzoneFooter
           accept={accept}
           message={onUploadStart ? localMessage : undefined}
-          localization={localization!=="ES-es"?"EN-en":"ES-es"}
+          localization={localization}
         />
       )}
       <div

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

@@ -145,7 +145,7 @@ export interface DropzoneProps extends OverridableProps {
   /**
   * language to be used
   * for now
-  * only English and Spanish is supported
+  * only English, French and Spanish are supported
   */
   localization?: Localization;
 }

src/components/dropzone/components/DropzoneFooter.tsx/DropzoneFooter.tsx

@@ -1,10 +1,21 @@
 import React, { FC } from "react";
+import { DropzoneLocalizerSelector } from "../../../../localization";
+import {
+  FunctionLabel,
+  LocalLabels,
+} from "../../../../localization/localization";
 import { DropzoneFooterProps } from "./DropzoneFooterProps";
 
 const DropzoneFooter: FC<DropzoneFooterProps> = (
   props: DropzoneFooterProps,
 ) => {
   const { accept, message, localization } = props;
+
+  const DropzoneFooterLocalizer: LocalLabels = DropzoneLocalizerSelector(
+    localization,
+  ).footer as LocalLabels;
+  const accepCustomMessenger: FunctionLabel =
+    DropzoneFooterLocalizer.acceptCustom as FunctionLabel;
   return (
     <div className="dz-ui-footer" onClick={undefined}>
       {message
@@ -16,6 +27,11 @@ const DropzoneFooter: FC<DropzoneFooterProps> = (
         : localization === "ES-es"
         ? `Archivos aceptados: ${accept}`
         : `File types: ${accept}`}
+      {message
+        ? message
+        : !accept
+        ? DropzoneFooterLocalizer.acceptAll
+        : accepCustomMessenger(accept)}
     </div>
   );
 };

src/components/dropzone/components/DropzoneHeader/DropzoneHeader.tsx

@@ -1,5 +1,10 @@
 import React, { FC } from "react";
-import { Localization } from "../../../../localization/localization";
+import { DropzoneLocalizerSelector } from "../../../../localization";
+import {
+  FunctionLabel,
+  Localization,
+  LocalLabels,
+} from "../../../../localization/localization";
 import { FileItemContainerProps } from "../../../file-item/components/FileItemContainer/FileItemContainerProps";
 import { fileSizeFormater } from "../../../file-item/utils";
 import { Cancel, ViewGrid, ViewList } from "../../../icons";
@@ -38,6 +43,10 @@ const DropzoneHeader: FC<DropzoneHeaderProps> = (
     localization,
   } = props;
 
+  const DropzoneHeaderLocalizer: LocalLabels = DropzoneLocalizerSelector(
+    localization,
+  ).header as LocalLabels;
+
   const handleStartUploading = () => {
     onUploadStart?.();
   };
@@ -46,25 +55,34 @@ const DropzoneHeader: FC<DropzoneHeaderProps> = (
     if (onUploadStart && urlPresent && numberOfValidFiles) {
       result.push(
         <>
-          {localization === "ES-es" ? `Subir archivos` : "Upload files"}
+          {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(
-        localization === "ES-es"
+        maxFileSizeMessenger(fileSizeFormater(maxFileSize)),
+
+        /* localization === "ES-es"
           ? `Tam. máximo de archivo ${fileSizeFormater(maxFileSize)} | `
-          : `Max File size: ${fileSizeFormater(maxFileSize)} | `,
+          : `Max File size: ${fileSizeFormater(maxFileSize)} | `, */
       );
     }
+    const validFileSizeMessenger: FunctionLabel =
+      DropzoneHeaderLocalizer.validFilesMessage as FunctionLabel;
 
     if (maxFiles) {
       result.push(
-        localization === "ES-es"
+        validFileSizeMessenger(numberOfValidFiles, maxFiles),
+        /*  localization === "ES-es"
           ? `Archivos ${numberOfValidFiles}/${maxFiles} | Válidos: ${numberOfValidFiles} | `
-          : `Files ${numberOfValidFiles}/${maxFiles} | Valid: ${numberOfValidFiles} | `,
+          : `Files ${numberOfValidFiles}/${maxFiles} | Valid: ${numberOfValidFiles} | `, */
       );
     }
 

src/components/dropzone/components/DropzoneUI/DropzoneUI.tsx

@@ -1,2 +1,2 @@
-export { default as DropzoneUI } from "./components/Dropzone/Dropzone";
+export { default as Dropzone } from "./components/Dropzone/Dropzone";
 export * from "./components/Dropzone/Dropzone";

src/components/dropzone/components/DropzoneUI/DropzoneUIProps.ts

@@ -124,7 +124,7 @@ const FileItem: FC<FileItemProps> = (props: FileItemProps) => {
                 sizeFormatted={sizeFormatted}
                 //fileNamePosition={undefined}
                 uploadStatus={uploadStatus}
-                localization={localization!=="ES-es"?"EN-en":"ES-es"}
+                localization={localization}
               />
 
               <FileItemFullInfoLayer
@@ -136,7 +136,7 @@ const FileItem: FC<FileItemProps> = (props: FileItemProps) => {
                 onClose={handleCloseInfo}
                 uploadStatus={uploadStatus}
                 uploadMessage={uploadMessage}
-                localization={localization!=="ES-es"?"EN-en":"ES-es"}
+                localization={localization}
               />
             </Paper>