From 0ed55c80a71e312084fa82690dba117a0d692ed2 Mon Sep 17 00:00:00 2001
From: Jose Manuel Serrano Amaut <a20122128@pucp.pe>
Date: Tue, 14 Mar 2023 13:41:53 -0500
Subject: [PATCH] [WIP]: Refactor demo dropzone page. Finished upload demo
page. Missing actions demo, ripple demo? or maybe just a prop, header demo,
footer demo, action buttons demo
---
src/pages/demo/DropzoneDemoPage.jsx | 110 +++++++++++++++-------------
1 file changed, 58 insertions(+), 52 deletions(-)
diff --git a/src/pages/demo/DropzoneDemoPage.jsx b/src/pages/demo/DropzoneDemoPage.jsx
index 752f322..25c2e47 100644
--- a/src/pages/demo/DropzoneDemoPage.jsx
+++ b/src/pages/demo/DropzoneDemoPage.jsx
@@ -82,9 +82,9 @@ const DropzoneDemoPage = (props) => {
<li>
The file(s) must be validated or not. If validation is required,
it can be done by taking into account a predefined set of allowed{" "}
- <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept">
+ <AnchorToTab href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept">
Common MIME Types
- </a>
+ </AnchorToTab>
; specifiying the max file size (in bytes) and/or the max amount
of files.
</li>
@@ -114,7 +114,10 @@ const DropzoneDemoPage = (props) => {
<CodeHighlight>{`<FileMosaic/>`} </CodeHighlight>
component for showing the files selected by the user with minimun
props too. For further information of this component check out the{" "}
- <a href="/components/filemosaic">FileMosaic</a> page.
+ <AnchorToTab href="/components/filemosaic">
+ FileMosaic
+ </AnchorToTab>{" "}
+ page.
</Alert>
<br />
<Alert severity="info">
@@ -127,7 +130,7 @@ const DropzoneDemoPage = (props) => {
<strong>Javascript</strong> example for handling the metadata that
makes possible the information exchange between components. For
further information about this data type check out the{" "}
- <a href="/types#ext-file">ExtFile-API. </a>
+ <AnchorToTab href="/types#ext-file">ExtFile-API. </AnchorToTab>
</Alert>
</section>
@@ -203,73 +206,76 @@ const DropzoneDemoPage = (props) => {
<section id="uploading">
<SubTitle content="Uploading" />
<DescParagraph>
- For uploading the prop{" "}
- <AnchorToTab href="/types#UploadConfig">uploadConfig</AnchorToTab>{" "}
- must be given. In this prop you can specify the method, the url,
- headers and also extra upload data. The type definition for the prop
- mmentioned can be found{" "}
+ For uploading , the prop <TypeHighlight>uploadConfig</TypeHighlight>{" "}
+ must be given. This prop recieves an object in which you can specify
+ the HTTP method, the url, the headers and also extra data to be
+ uploaded. The type definition for the prop mentioned can be found{" "}
<AnchorToTab href="/types#UploadConfig">here</AnchorToTab>.
</DescParagraph>
-
<Paper variant="outlined" style={{ padding: "25px" }}>
<DemoDropzoneUploading />
</Paper>
<CodeDemoDropzoneUploading />
<Alert severity="info">
- <AlertTitle> Removing non valid Files </AlertTitle>
- 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:
+ <AlertTitle> Fake uploading </AlertTitle>
+ By giving this prop, the {"<Dropzone/>"} component will simulate the
+ upload operation by randomly set the upload status and message in
+ ech uploadable <TypeHighlight>ExtFile</TypeHighlight>. It also will
+ set a fake progress.
+ </Alert>
+ <br />
+ <Alert severity="info">
+ <AlertTitle> Upload config properties </AlertTitle>
+ Apart from the properties you can see in the example above, there
+ are more of them that can make the upload process to behave
+ differently.
<ul>
<li>
- <TypeHighlight>cleanFiles</TypeHighlight> : This will make
- dropzone header to dislay the "clean" icon which can trigger the
- "clean" operation.
- </li>
- <li>
- <TypeHighlight>actionButtons</TypeHighlight> : By setting this
- prop properly, a button will be visible and will trigger the
- "clean" operation (This is the way used in this demo).
+ <TypeHighlight>autoUpload</TypeHighlight> : By setting this prop
+ to true, the upload process will start automatically just after
+ the user drops or selects files.
</li>
<li>
- <TypeHighlight>autoClean</TypeHighlight> : By setting this prop,
- non valid files will be automatically discarted and will not be
- given in the <CodeHighlight>onChange</CodeHighlight> event.
+ <TypeHighlight>cleanOnUpload</TypeHighlight> : By setting this
+ prop, you can control whether the upload process should "clean"
+ the non valid files before uploading or not By default this
+ value is true.
</li>
</ul>
+ More information about the uploadConfig type structure can be found{" "}
+ <AnchorToTab href="/types#UploadConfig">here</AnchorToTab>.
</Alert>
</section>
- {/*
- <section id="dropzone-events">
- <SubTitle content="Dropzone events" />
- <DescParagraph>
- You can handle the following events:
- <ul>
- <li>
- Dropzone with the <code className="code">onDelete</code> prop
- defined can delete all the files associated with the{" "}
- <code className="code">value</code> prop.
- </li>
- <li>
- {" "}
- Dropzone with the <code className="code">onDelete</code> prop
- defined can delete all the files associated with the{" "}
- <code className="code">value</code> prop..
- </li>
- <li>Accept an specific size (in bytes) of files.</li>
- </ul>
- </DescParagraph>
- <Paper variant="outlined" style={{ padding: "25px" }}>
- <BasicDemoDropzone />
- </Paper>
+ <section id="dropzone-events">
+ <SubTitle content="Dropzone events" />
+ <DescParagraph>
+ You can handle the following events:
+ <ul>
+ <li>
+ Dropzone with the <code className="code">onDelete</code> prop
+ defined can delete all the files associated with the{" "}
+ <code className="code">value</code> prop.
+ </li>
+ <li>
+ {" "}
+ Dropzone with the <code className="code">onDelete</code> prop
+ defined can delete all the files associated with the{" "}
+ <code className="code">value</code> prop..
+ </li>
+ <li>Accept an specific size (in bytes) of files.</li>
+ </ul>
+ </DescParagraph>
+
+ <Paper variant="outlined" style={{ padding: "25px" }}>
+ <BasicDemoDropzone />
+ </Paper>
- <p></p>
- <BasicDropzoneCodeJS />
- </section>*/}
+ <p></p>
+ <BasicDropzoneCodeJS />
+ </section>
<section id="api">
<SubTitle content="API" />
<DescParagraph>
--
GitLab