From 0f1e71c2b1a8cee2ccf392f4779539241f6ce0f8 Mon Sep 17 00:00:00 2001
From: Jose Manuel Serrano Amaut <a20122128@pucp.pe>
Date: Wed, 15 Mar 2023 00:40:18 -0500
Subject: [PATCH] [WIP]: Add header config and footer config section
---
src/pages/demo/DropzoneDemoPage.jsx | 119 +++++++++++++++++++++++++++-
1 file changed, 116 insertions(+), 3 deletions(-)
diff --git a/src/pages/demo/DropzoneDemoPage.jsx b/src/pages/demo/DropzoneDemoPage.jsx
index f10f006..123cbf1 100644
--- a/src/pages/demo/DropzoneDemoPage.jsx
+++ b/src/pages/demo/DropzoneDemoPage.jsx
@@ -247,10 +247,9 @@ const DropzoneDemoPage = (props) => {
<li>
Dropzone with the{" "}
<TypeHighlight>actionButtons.deleteButton</TypeHighlight> prop
- defined will display a button which deletes all files. This
- button will be visible only during the "upload" process.
+ defined will display a button which deletes all files.
<br />
- button will be visible only{" "}
+ this button will be visible only{" "}
<strong>when the "upload" process is not active</strong>.
</li>
<li>
@@ -277,6 +276,120 @@ const DropzoneDemoPage = (props) => {
<CodeDemoDropzoneActionButtons />
</section>
+
+ <section id="header-config">
+ <SubTitle content="Dropzone header config" />
+ <DescParagraph>
+ You can use the <TypeHighlight>headerConfig</TypeHighlight> prop to
+ define what will be displayed in the header. Type definition can be
+ found <AnchorToTab href="/types#header-config">here</AnchorToTab>
+ <ul>
+ <li>
+ Dropzone with the{" "}
+ <TypeHighlight>headerConfig.deleteFiles</TypeHighlight> prop set
+ to <TypeHighlight>true</TypeHighlight> will display a delete
+ button which triggers the delete process.
+ <br />
+ This button will be visible only{" "}
+ <strong>when the "upload" process is not active</strong>.
+ </li>
+ <li>
+ Dropzone with the{" "}
+ <TypeHighlight>headerConfig.cleanFiles</TypeHighlight> prop set
+ to <TypeHighlight>true</TypeHighlight> will display a "clean"
+ buton. This button will be visible only during the "upload"
+ process.
+ <br />
+ button will be visible only{" "}
+ <strong>when the "upload" process is not active</strong>.
+ </li>
+ <li>
+ Dropzone with the{" "}
+ <TypeHighlight>headerConfig.uploadFiles</TypeHighlight> prop set
+ to <TypeHighlight>true</TypeHighlight> will display a button
+ which starts the upload process.
+ </li>
+ <li>
+ Dropzone with the{" "}
+ <TypeHighlight>headerConfig.uploading</TypeHighlight> prop set
+ to <TypeHighlight>true</TypeHighlight> will display a loading
+ icon <strong>during the "upload" process</strong>.
+ </li>
+ <li>
+ Dropzone with the{" "}
+ <TypeHighlight>headerConfig.maxFileSize</TypeHighlight> prop set
+ to <TypeHighlight>true</TypeHighlight> will display the max file
+ size label.
+ </li>
+ <li>
+ Dropzone with the{" "}
+ <TypeHighlight>headerConfig.validFilesCount</TypeHighlight> prop
+ set to <TypeHighlight>true</TypeHighlight> will display the
+ current count of valid files.
+ </li>
+ </ul>
+ By default all of these values are set to{" "}
+ <TypeHighlight>true</TypeHighlight>.
+ </DescParagraph>
+
+ <Paper variant="outlined" style={{ padding: "25px" }}>
+ <DemoDropzoneActionButtons />
+ </Paper>
+
+ <CodeDemoDropzoneActionButtons />
+ </section>
+
+ <section id="footer-config">
+ <SubTitle content="Dropzone footer config" />
+ <DescParagraph>
+ You can use the <TypeHighlight>footerConfig</TypeHighlight> prop to
+ define what will be displayed in the footer. Type definition can be
+ found <AnchorToTab href="/types#footer-config">here</AnchorToTab>
+ <ul>
+ <li>
+ Dropzone with the{" "}
+ <TypeHighlight>footerConfig.allowedTypesLabel</TypeHighlight>{" "}
+ prop set to <TypeHighlight>false</TypeHighlight> will hide the
+ label that indicates the files types allowed.
+ <br />
+ This label will be hidden
+ <strong>when the "upload" process is active</strong>.
+ </li>
+ <li>
+ Dropzone with the{" "}
+ <TypeHighlight>
+ footerConfig.uploadProgressMessage
+ </TypeHighlight>{" "}
+ prop set to <TypeHighlight>false</TypeHighlight> will not
+ display the label with the upload progress. This label will be
+ visible<strong> only during the "upload" process</strong>.
+ </li>
+ <li>
+ Dropzone with the{" "}
+ <TypeHighlight>footerConfig.uploadResultMessage</TypeHighlight>{" "}
+ prop set to <TypeHighlight>false</TypeHighlight> will not
+ display a label at the end of the upload process. This label can{" "}
+ be visible for 2 seconds just{" "}
+ <strong>after the "upload" process finishes</strong>.
+ </li>
+ <li>
+ Dropzone with the{" "}
+ <TypeHighlight>footerConfig.noMissingFilesLabel</TypeHighlight>{" "}
+ prop set to <TypeHighlight>false</TypeHighlight> will not
+ display a label when upload starts with no uploadable files.
+ </li>
+ </ul>
+ By default all of these values are set to{" "}
+ <TypeHighlight>true</TypeHighlight>.
+ </DescParagraph>
+
+ <Paper variant="outlined" style={{ padding: "25px" }}>
+ <DemoDropzoneActionButtons />
+ </Paper>
+
+ <CodeDemoDropzoneActionButtons />
+ </section>
+
<section id="api">
<SubTitle content="API" />
<DescParagraph>
--
GitLab