From b44baaf6361588f97b1602d09390ad926248a1aa Mon Sep 17 00:00:00 2001
From: Jose Manuel Serrano Amaut <a20122128@pucp.pe>
Date: Thu, 16 Mar 2023 18:19:51 -0500
Subject: [PATCH] [FEAT]: Add demo and code components for dropOnLayer section
on DropzoneDemopage
---
.../CodeDemoDropzoneDropLayer.tsx | 45 +++++++++++++++++
.../dropzone-demo/DemoDropzoneDropLayer.jsx | 39 ++++-----------
src/pages/demo/DropzoneDemoPage.jsx | 50 ++++++++++---------
3 files changed, 83 insertions(+), 51 deletions(-)
create mode 100644 src/components/demo-components/dropzone-demo/CodeDemoDropzoneDropLayer.tsx
diff --git a/src/components/demo-components/dropzone-demo/CodeDemoDropzoneDropLayer.tsx b/src/components/demo-components/dropzone-demo/CodeDemoDropzoneDropLayer.tsx
new file mode 100644
index 0000000..1a9fff8
--- /dev/null
+++ b/src/components/demo-components/dropzone-demo/CodeDemoDropzoneDropLayer.tsx
@@ -0,0 +1,45 @@
+import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
+const CodeDemoDropzoneDropLayer = ({ 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 CodeDemoDropzoneDropLayer;
+
+const splittedCodeJS = `<Dropzone style={{ width: "300px" }}>{/**Files */}</Dropzone>
+<Dropzone style={{ width: "300px" }} dropOnLayer={false}>
+ {/**Files */}
+</Dropzone>`;
+
+const splittedCodeTS = splittedCodeJS;
+const completeCodeJS = `import * as React from "react";
+import { Dropzone } from "@files-ui/react";
+
+const DemoDropzoneRipple = () => {
+ return (
+ <div
+ style={{
+ display: "flex",
+ justifyContent: "space-evenly",
+ gap: "40px",
+ flexWrap: "wrap",
+ }}
+ >
+ <Dropzone style={{ width: "300px" }}>{/**Files */}</Dropzone>
+ <Dropzone style={{ width: "300px" }} dropOnLayer={false}>
+ {/**Files */}
+ </Dropzone>
+ </div>
+ );
+ };
+ export default DemoDropzoneRipple;`;
+
+const completeCodeTS = completeCodeJS;
diff --git a/src/components/demo-components/dropzone-demo/DemoDropzoneDropLayer.jsx b/src/components/demo-components/dropzone-demo/DemoDropzoneDropLayer.jsx
index d5f983e..3a6edfc 100644
--- a/src/components/demo-components/dropzone-demo/DemoDropzoneDropLayer.jsx
+++ b/src/components/demo-components/dropzone-demo/DemoDropzoneDropLayer.jsx
@@ -1,34 +1,17 @@
import * as React from "react";
-import { Dropzone, FileMosaic } from "../../../files-ui";
+import { Dropzone } from "../../../files-ui";
-const DemoDropzoneDropLayer = (props) => {
- 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));
- };
+const DemoDropzoneDropLayer = () => {
return (
- <div style={{ display: "flex" }}>
- <Dropzone style={{ width: "300px" }} onChange={updateFiles} value={files}>
- {files.length > 0 &&
- files.map((file) => (
- <FileMosaic key={file.id} {...file} onDelete={removeFile} info />
- ))}
- </Dropzone>
- <Dropzone
- style={{ width: "300px" }}
- onChange={updateFiles}
- value={files}
- dropOnLayer={false}
- >
- {files.length > 0 &&
- files.map((file) => (
- <FileMosaic key={file.id} {...file} onDelete={removeFile} info />
- ))}
+ <div style={{
+ display: "flex",
+ justifyContent: "space-evenly",
+ gap: "40px",
+ flexWrap: "wrap",
+ }}>
+ <Dropzone style={{ width: "300px" }}>{/**Files */}</Dropzone>
+ <Dropzone style={{ width: "300px" }} dropOnLayer={false}>
+ {/**Files */}
</Dropzone>
</div>
);
diff --git a/src/pages/demo/DropzoneDemoPage.jsx b/src/pages/demo/DropzoneDemoPage.jsx
index ed41342..bcfc979 100644
--- a/src/pages/demo/DropzoneDemoPage.jsx
+++ b/src/pages/demo/DropzoneDemoPage.jsx
@@ -34,6 +34,10 @@ import DemoDropzoneRipple from "../../components/demo-components/dropzone-demo/D
import CodeDemoDropzoneStyling from "../../components/demo-components/dropzone-demo/CodeDropzoneDemoStyling";
import CodeDemoDropzoneRipple from "../../components/demo-components/dropzone-demo/CodeDemoDropzoneRipple";
import CodeDemoDropzoneDisabled from "../../components/demo-components/dropzone-demo/CodeDemoDropzoneDisabled";
+import CodeDemoDropzoneClickable from "../../components/demo-components/dropzone-demo/CodeDemoDropzoneClickable";
+import CodeDemoDropzoneDropLayer from "../../components/demo-components/dropzone-demo/CodeDemoDropzoneDropLayer";
+import CodeDemoDropzoneBehaviour from "../../components/demo-components/dropzone-demo/CodeDemoDropzoneBehaviour";
+import CodeDemoDropzoneLabel from "../../components/demo-components/dropzone-demo/CodeDropzoneDemoLabel";
const DropzoneDemoPage = (props) => {
return (
@@ -467,6 +471,21 @@ const DropzoneDemoPage = (props) => {
<CodeDemoDropzoneStyling />
</section>
+ <section id="label">
+ <SubTitle content="Label" />
+ <DescParagraph>
+ You can specify a fixed label for{" "}
+ <CodeHighlight>{"<Dropzone/>"}</CodeHighlight> component to display
+ when there isn't any files.
+ </DescParagraph>
+
+ <Paper variant="outlined" style={{ padding: "25px" }}>
+ <DemoDropzoneLabel />
+ </Paper>
+
+ <CodeDemoDropzoneLabel />
+ </section>
+
<section id="ripple">
<SubTitle content="Ripple" />
<DescParagraph>
@@ -525,7 +544,7 @@ const DropzoneDemoPage = (props) => {
<DemoDropzoneClickable />
</Paper>
- <CodeDemoDropzoneFooterConfig />
+ <CodeDemoDropzoneClickable />
</section>
<section id="drop-layer">
@@ -544,22 +563,7 @@ const DropzoneDemoPage = (props) => {
<DemoDropzoneDropLayer />
</Paper>
- <CodeDemoDropzoneFooterConfig />
- </section>
-
- <section id="label">
- <SubTitle content="Label" />
- <DescParagraph>
- You can specify a fixed label for{" "}
- <CodeHighlight>{"<Dropzone/>"}</CodeHighlight> component to display
- when there isn't any files.
- </DescParagraph>
-
- <Paper variant="outlined" style={{ padding: "25px" }}>
- <DemoDropzoneLabel />
- </Paper>
-
- <CodeDemoDropzoneFooterConfig />
+ <CodeDemoDropzoneDropLayer />
</section>
<section id="add-or-replace">
@@ -587,7 +591,7 @@ const DropzoneDemoPage = (props) => {
<DemoDropzoneBehaviour />
</Paper>
- <CodeDemoDropzoneFooterConfig />
+ <CodeDemoDropzoneBehaviour />
</section>
<section id="localization">
@@ -683,6 +687,11 @@ const rightMenuItems = [
label: "Styling",
referTo: "/components/dropzone#styling",
},
+ {
+ id: 14,
+ label: "Label",
+ referTo: "/components/dropzone#label",
+ },
{
id: 8,
label: "Ripple",
@@ -703,11 +712,6 @@ const rightMenuItems = [
label: "Drop Layer",
referTo: "/components/dropzone#drop-layer",
},
- {
- id: 14,
- label: "Label",
- referTo: "/components/dropzone#label",
- },
{
id: 15,
label: "Add or replace",
--
GitLab