From 4794cd8cd2e1300a1e298a93210c7bc493470ed2 Mon Sep 17 00:00:00 2001
From: Jose Manuel Serrano Amaut <a20122128@pucp.pe>
Date: Mon, 13 Mar 2023 19:44:11 -0500
Subject: [PATCH] [WIP]: Ad custom validation demo in Dropzone demo page
---
.../CodeDemoDropzoneCustomValidation.jsx | 85 +++++++++++++++++++
.../DemoDropzoneCustomValidation.tsx | 42 +++++++++
.../components/dropzone/DropzoneProps.ts | 6 +-
src/pages/demo/DropzoneDemoPage.jsx | 52 +++++++-----
4 files changed, 159 insertions(+), 26 deletions(-)
create mode 100644 src/components/demo-components/dropzone-demo/CodeDemoDropzoneCustomValidation.jsx
create mode 100644 src/components/demo-components/dropzone-demo/DemoDropzoneCustomValidation.tsx
diff --git a/src/components/demo-components/dropzone-demo/CodeDemoDropzoneCustomValidation.jsx b/src/components/demo-components/dropzone-demo/CodeDemoDropzoneCustomValidation.jsx
new file mode 100644
index 0000000..d173f4c
--- /dev/null
+++ b/src/components/demo-components/dropzone-demo/CodeDemoDropzoneCustomValidation.jsx
@@ -0,0 +1,85 @@
+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>
+ );
+}`;
diff --git a/src/components/demo-components/dropzone-demo/DemoDropzoneCustomValidation.tsx b/src/components/demo-components/dropzone-demo/DemoDropzoneCustomValidation.tsx
new file mode 100644
index 0000000..e86964e
--- /dev/null
+++ b/src/components/demo-components/dropzone-demo/DemoDropzoneCustomValidation.tsx
@@ -0,0 +1,42 @@
+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;
diff --git a/src/files-ui/components/dropzone/components/dropzone/DropzoneProps.ts b/src/files-ui/components/dropzone/components/dropzone/DropzoneProps.ts
index bba187d..22b0c26 100644
--- a/src/files-ui/components/dropzone/components/dropzone/DropzoneProps.ts
+++ b/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;
}
diff --git a/src/pages/demo/DropzoneDemoPage.jsx b/src/pages/demo/DropzoneDemoPage.jsx
index 09dc603..e600605 100644
--- a/src/pages/demo/DropzoneDemoPage.jsx
+++ b/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>
--
GitLab