[WIP]: Add custom validation demo component and sample code

src/components/demo-components/dropzone-demo/CodeDemoDropzoneCustomValidation.jsx

@@ -15,26 +15,48 @@ const CodeDemoDropzoneCustomValidation = ({ splittedOnly = false }) => {
 export default CodeDemoDropzoneCustomValidation;
 
 const splittedCodeJS = `<Dropzone
-  onChange={updateFiles}
-  value={files}
->
+    onChange={updateFiles}
+    value={files}
+    accept={"image/*"}
+    maxFileSize={28 * 1024}
+    maxFiles={2}
+    cleanFiles
+    validator={myOwnValidation}
+  >
   {files.length > 0 &&
     files.map((file) => (
-      <FileMosaic key={file.id} {...file} onDelete={removeFile} info/>
+      <FileMosaic key={file.id} {...file} onDelete={removeFile} info />
     ))}
 </Dropzone>`;
 const splittedCodeTS = `<Dropzone
-  onChange={updateFiles}
-  value={files}
->
+    onChange={updateFiles}
+    value={files}
+    accept={"image/*"}
+    maxFileSize={28 * 1024}
+    maxFiles={2}
+    cleanFiles
+    validator={myOwnValidation}
+  >
   {files.length > 0 &&
     files.map((file: ExtFile) => (
-      <FileMosaic key={file.id} {...file} onDelete={removeFile} info={true}/>
+      <FileMosaic key={file.id} {...file} onDelete={removeFile} info />
     ))}
 </Dropzone>`;
-const completeCodeJS = `import { Dropzone,FileMosaic } from "@files-ui/react";
+const completeCodeJS = `import { Dropzone, FileMosaic } from "@files-ui/react";
 import * as React from "react";
-
+//validate files
+// file name must start with the following prefix: "test_file"
+// (e.g. a valid file name could be "test_file_photo.png")
+const myOwnValidation = (file) => {
+  let errorList= [];
+  let validResult = true;
+  const regExPrefix = /\btest_file\w+/;
+  if (!file.name.match(regExPrefix)) {
+    validResult = false;
+    errorList.push('Prefix "test_file" was not present in the file name');
+  }
+  return { valid: validResult, errors: errorList };
+};
 export default function App() {
   const [files, setFiles] = React.useState([]);
   const updateFiles = (incommingFiles) => {
@@ -49,6 +71,8 @@ export default function App() {
     <Dropzone
       onChange={updateFiles}
       value={files}
+      cleanFiles
+      validator={myOwnValidation}
     >
       {files.length > 0 &&
         files.map((file) => (
@@ -58,9 +82,23 @@ export default function App() {
   );
 }`;
 
-const completeCodeTS = `import { Dropzone, FileMosaic, ExtFile } from "@files-ui/react";
+const completeCodeTS = `import { Dropzone, FileMosaic, ExtFile, CustomValidateFileResponse } from "@files-ui/react";
 import * as React from "react";
 
+//validate files
+// file name must start with the following prefix: "test_file"
+// (e.g. a valid file name could be "test_file_photo.png")
+const myOwnValidation = (file: File): CustomValidateFileResponse => {
+  let errorList: string[] = [];
+  let validResult: boolean = true;
+  const regExPrefix: RegExp = /\btest_file\w+/;
+  if (!file.name.match(regExPrefix)) {
+    validResult = false;
+    errorList.push('Prefix "test_file" was not present in the file name');
+  }
+  return { valid: validResult, errors: errorList };
+};
+
 export default function App() {
   const [files, setFiles] = React.useState<ExtFile[]>([]);
   const updateFiles = (incommingFiles:ExtFile[]) => {
@@ -75,6 +113,8 @@ export default function App() {
     <Dropzone
       onChange={updateFiles}
       value={files}
+      cleanFiles
+      validator={myOwnValidation}
     >
       {files.length > 0 &&
         files.map((file:ExtFile) => (

src/components/demo-components/dropzone-demo/DemoDropzoneCustomValidation.tsx

@@ -4,11 +4,20 @@ import {
   ExtFile,
   FileMosaic,
   FileMosaicProps,
+  CustomValidateFileResponse,
 } from "../../../files-ui";
-import { CustomValidateFileResponse } from "../../../files-ui/core";
+
+//validate files
+// file name must start with the following prefix: "test_file"
+// (e.g. a valid file name could be "test_file_photo.png")
 const myOwnValidation = (file: File): CustomValidateFileResponse => {
   let errorList: string[] = [];
-  let validResult: boolean = false;
+  let validResult: boolean = true;
+  const regExPrefix: RegExp = /\btest_file\w+/;
+  if (!file.name.match(regExPrefix)) {
+    validResult = false;
+    errorList.push('Prefix "test_file" was not present in the file name');
+  }
   return { valid: validResult, errors: errorList };
 };
 const DemoDropzoneCustomValidation = () => {
@@ -28,8 +37,7 @@ const DemoDropzoneCustomValidation = () => {
       accept={"image/*"}
       maxFileSize={28 * 1024}
       maxFiles={2}
-      //cleanFiles
-      actionButtons={{ position: "bottom", cleanButton: {} }}
+      cleanFiles
       validator={myOwnValidation}
     >
       {files.length > 0 &&

src/pages/demo/DropzoneDemoPage.jsx

@@ -29,15 +29,10 @@ const rightMenuItems = [
     referTo: "/components/dropzone#validation",
   },
   {
-    id: 1,
+    id: 2,
     label: "Custom validation",
     referTo: "/components/dropzone#custom-validation",
   },
-  {
-    id: 2,
-    label: "Dropzone events",
-    referTo: "/components/dropzone#dropzone-events",
-  },
   {
     id: 3,
     label: "Uploading",
@@ -45,18 +40,18 @@ const rightMenuItems = [
   },
   {
     id: 4,
-    label: "Styling",
-    referTo: "/components/dropzone#styling",
+    label: "Dropzone events",
+    referTo: "/components/dropzone#dropzone-events",
   },
   {
     id: 5,
-    label: "Localization",
-    referTo: "/components/dropzone#localization",
+    label: "Styling",
+    referTo: "/components/dropzone#styling",
   },
   {
     id: 6,
-    label: "Dark mode",
-    referTo: "/components/dropzone#dark-mode",
+    label: "Localization",
+    referTo: "/components/dropzone#localization",
   },
 ];
 const DropzoneDemoPage = (props) => {
@@ -143,7 +138,7 @@ const DropzoneDemoPage = (props) => {
             <ol>
               <li>Accepting specific file types.</li>
               <li>Accepting an specific number of files.</li>
-              <li>Accepting an specific size (in bytes) for files.</li>
+              <li>Accepting files with an specific size (in bytes).</li>
             </ol>
           </DescParagraph>
 
@@ -153,9 +148,9 @@ const DropzoneDemoPage = (props) => {
           <CodeDemoDropzoneValidation />
           <Alert severity="info">
             <AlertTitle> Removing non valid Files </AlertTitle>
-            We call "clean" the operation of removing non valid files. Apart
-            from deleting them individually there are some other ways in wich
-            you can delete them. You can try the following props in the{" "}
+            We call "clean" to the operation of removing non valid files. Apart
+            from deleting them individually, there are some other ways in which
+            you can remove all of them. You can try the following props in the{" "}
             {"<Dropzone/>"} component:
             <ul>
               <li>
@@ -170,7 +165,7 @@ const DropzoneDemoPage = (props) => {
               </li>
               <li>
                 <TypeHighlight>autoClean</TypeHighlight> : By setting this prop,
-                non valid files will automatically discarted and will not be
+                non valid files will be automatically discarted and will not be
                 given in the <CodeHighlight>onChange</CodeHighlight> event.
               </li>
             </ul>
@@ -192,7 +187,10 @@ const DropzoneDemoPage = (props) => {
                 CustomValidateFileResponse
               </AnchorToTab>
             </CodeHighlight>
-            .
+            . Custom validator can work together with{" "}
+            <TypeHighlight>accept</TypeHighlight>,{" "}
+            <TypeHighlight>maxFileSize</TypeHighlight> and{" "}
+            <TypeHighlight>maxFiles</TypeHighlight> props.
           </DescParagraph>
 
           <Paper variant="outlined" style={{ padding: "25px" }}>