[WIP]: Ad custom validation demo in Dropzone demo page

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

+import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
+const CodeDemoDropzoneCustomValidation = ({ splittedOnly = false }) => {
+  return (
+    <ShowDemoCode
+      splittedOnly={splittedOnly}
+      codeCompleteJS={completeCodeJS}
+      codeCompleteTS={completeCodeTS}
+      codeSandboxJS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
+      codeSandboxTS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
+      codeSplittedJS={splittedCodeJS}
+      codeSplittedTS={splittedCodeTS}
+    />
+  );
+};
+export default CodeDemoDropzoneCustomValidation;
+
+const splittedCodeJS = `<Dropzone
+  onChange={updateFiles}
+  value={files}
+>
+  {files.length > 0 &&
+    files.map((file) => (
+      <FileMosaic key={file.id} {...file} onDelete={removeFile} info/>
+    ))}
+</Dropzone>`;
+const splittedCodeTS = `<Dropzone
+  onChange={updateFiles}
+  value={files}
+>
+  {files.length > 0 &&
+    files.map((file: ExtFile) => (
+      <FileMosaic key={file.id} {...file} onDelete={removeFile} info={true}/>
+    ))}
+</Dropzone>`;
+const completeCodeJS = `import { Dropzone,FileMosaic } from "@files-ui/react";
+import * as React from "react";
+
+export default function App() {
+  const [files, setFiles] = React.useState([]);
+  const updateFiles = (incommingFiles) => {
+    //do something with the files
+    setFiles(incommingFiles);
+    //even your own upload implementation
+  };
+  const removeFile = (id) => {
+    setFiles(files.filter((x) => x.id !== id));
+  };
+  return (
+    <Dropzone
+      onChange={updateFiles}
+      value={files}
+    >
+      {files.length > 0 &&
+        files.map((file) => (
+          <FileMosaic key={file.id} {...file} onDelete={removeFile} info />
+        ))}
+    </Dropzone>
+  );
+}`;
+
+const completeCodeTS = `import { Dropzone, FileMosaic, ExtFile } from "@files-ui/react";
+import * as React from "react";
+
+export default function App() {
+  const [files, setFiles] = React.useState<ExtFile[]>([]);
+  const updateFiles = (incommingFiles:ExtFile[]) => {
+    //do something with the files
+    setFiles(incommingFiles);
+    //even your own upload implementation
+  };
+  const removeFile = (id: string | number | undefined) => {
+    setFiles(files.filter((x: ExtFile) => x.id !== id));
+  };
+  return (
+    <Dropzone
+      onChange={updateFiles}
+      value={files}
+    >
+      {files.length > 0 &&
+        files.map((file:ExtFile) => (
+          <FileMosaic key={file.id} {...file} onDelete={removeFile} info={true} />
+        ))}
+    </Dropzone>
+  );
+}`;

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

+import * as React from "react";
+import {
+  Dropzone,
+  ExtFile,
+  FileMosaic,
+  FileMosaicProps,
+} from "../../../files-ui";
+import { CustomValidateFileResponse } from "../../../files-ui/core";
+const myOwnValidation = (file: File): CustomValidateFileResponse => {
+  let errorList: string[] = [];
+  let validResult: boolean = false;
+  return { valid: validResult, errors: errorList };
+};
+const DemoDropzoneCustomValidation = () => {
+  const [files, setFiles] = React.useState<ExtFile[]>([]);
+  const updateFiles = (incommingFiles: ExtFile[]) => {
+    //do something with the files
+    setFiles(incommingFiles);
+    //even your own upload implementation
+  };
+  const removeFile = (id: FileMosaicProps["id"]) => {
+    setFiles(files.filter((x) => x.id !== id));
+  };
+  return (
+    <Dropzone
+      onChange={updateFiles}
+      value={files}
+      accept={"image/*"}
+      maxFileSize={28 * 1024}
+      maxFiles={2}
+      //cleanFiles
+      actionButtons={{ position: "bottom", cleanButton: {} }}
+      validator={myOwnValidation}
+    >
+      {files.length > 0 &&
+        files.map((file: ExtFile) => (
+          <FileMosaic key={file.id} {...file} onDelete={removeFile} info />
+        ))}
+    </Dropzone>
+  );
+};
+export default DemoDropzoneCustomValidation;

src/files-ui/components/dropzone/components/dropzone/DropzoneProps.ts

@@ -254,11 +254,11 @@ export type FooterConfig =
 
 
 export type DropzoneActionButton = {
-  children: React.ReactNode;
-  label: string;
+  children?: React.ReactNode;
+  label?: string;
   style?: React.CSSProperties;
   className?: string;
-  resetStyles: boolean;
+  resetStyles?: boolean;
   onClick?: Function;
 }
 

src/pages/demo/DropzoneDemoPage.jsx

@@ -4,7 +4,9 @@ import CodeHighlight from "../../components/codeHighlight/CodeHighlight";
 import DescParagraph from "../../components/demo-components/desc-paragraph/DescParagraph";
 import BasicDropzoneCodeJS from "../../components/demo-components/dropzone-demo/BasicDropzoneCodeJS";
 import BasicDemoDropzone from "../../components/demo-components/dropzone-demo/BasicDropzoneDemo";
+import CodeDemoDropzoneCustomValidation from "../../components/demo-components/dropzone-demo/CodeDemoDropzoneCustomValidation";
 import CodeDemoDropzoneValidation from "../../components/demo-components/dropzone-demo/CodeDemoDropzoneValidation";
+import DemoDropzoneCustomValidation from "../../components/demo-components/dropzone-demo/DemoDropzoneCustomValidation";
 import DemoDropzoneValidation from "../../components/demo-components/dropzone-demo/DemoDropzoneValidation";
 import SubTitle from "../../components/demo-components/sub-title/SubTitle";
 import MainContentContainer from "../../components/layout-pages/MainContentContainer";
@@ -178,7 +180,7 @@ const DropzoneDemoPage = (props) => {
         <section id="custom-validation">
           <SubTitle content="Custom validation" />
           <DescParagraph>
-            You can also "override the Dropzone validation operation by giving a
+            You can also override the Dropzone validation operation by giving a
             custom validation function that must fit the following signature:{" "}
             <CodeHighlight>
               {"validator?: (f: "}
@@ -194,10 +196,10 @@ const DropzoneDemoPage = (props) => {
           </DescParagraph>
 
           <Paper variant="outlined" style={{ padding: "25px" }}>
-            <BasicDemoDropzone />
+            <DemoDropzoneCustomValidation />
           </Paper>
 
-          <BasicDropzoneCodeJS />
+          <CodeDemoDropzoneCustomValidation />
         </section>
         {/* 
       <section id="dropzone-events">
@@ -226,26 +228,30 @@ const DropzoneDemoPage = (props) => {
 
         <p></p>
         <BasicDropzoneCodeJS />
-      </section>
-      <section id="api">
-        <SubTitle content="API" />
-        <DescParagraph>
-          See the documentation below for a complete reference to all of the
-          props and classes available to the components mentioned here.
-          <ul>
-            <li>
-              <CodeHighlight>
-                <a href="/api/dropzone">{"<Dropzone />"}</a>
-              </CodeHighlight>
-            </li>
-            <li>
-              <CodeHighlight>
-                <a href="/api/filemosaic">{"<FileMosaic />"}</a>
-              </CodeHighlight>
-            </li>
-          </ul>
-        </DescParagraph>
-      </section> */}
+      </section>*/}
+        <section id="api">
+          <SubTitle content="API" />
+          <DescParagraph>
+            See the documentation below for a complete reference to all of the
+            props and classes available to the components mentioned here.
+            <ul>
+              <li>
+                <CodeHighlight>
+                  <AnchorToTab href="/api/dropzone">
+                    {"<Dropzone />"}
+                  </AnchorToTab>
+                </CodeHighlight>
+              </li>
+              <li>
+                <CodeHighlight>
+                  <AnchorToTab href="/api/filemosaic">
+                    {"<FileMosaic />"}
+                  </AnchorToTab>
+                </CodeHighlight>
+              </li>
+            </ul>
+          </DescParagraph>
+        </section>
       </MainContentContainer>
 
       <RightMenuContainer>