From e40d64fa1ec1713738e4e1356eb3ad77fb13c13d Mon Sep 17 00:00:00 2001
From: Jose Manuel Serrano Amaut <a20122128@pucp.pe>
Date: Thu, 16 Mar 2023 18:38:31 -0500
Subject: [PATCH] [MVP]: Finished Dropzone component and dropzone demo page.
Last features were behaviour code and demo components.
---
.../CodeDemoDropzoneBehaviour.tsx | 193 ++++++++++++++++++
.../dropzone-demo/DemoDropzoneBehaviour.jsx | 43 ----
.../dropzone-demo/DemoDropzoneBehaviour.tsx | 69 +++++++
3 files changed, 262 insertions(+), 43 deletions(-)
create mode 100644 src/components/demo-components/dropzone-demo/CodeDemoDropzoneBehaviour.tsx
delete mode 100644 src/components/demo-components/dropzone-demo/DemoDropzoneBehaviour.jsx
create mode 100644 src/components/demo-components/dropzone-demo/DemoDropzoneBehaviour.tsx
diff --git a/src/components/demo-components/dropzone-demo/CodeDemoDropzoneBehaviour.tsx b/src/components/demo-components/dropzone-demo/CodeDemoDropzoneBehaviour.tsx
new file mode 100644
index 0000000..c3dd1e8
--- /dev/null
+++ b/src/components/demo-components/dropzone-demo/CodeDemoDropzoneBehaviour.tsx
@@ -0,0 +1,193 @@
+import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
+const CodeDemoDropzoneBehaviour = ({ 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 CodeDemoDropzoneBehaviour;
+
+const splittedCodeJS = `<Dropzone
+ style={{ width: "min(100% , 420px)" }}
+ onChange={updateFilesAdd}
+ value={filesAdd}
+ label="Dropzone with behaviour=add"
+ behaviour={"add"}
+>
+ {filesAdd.length > 0 &&
+ filesAdd.map((file) => (
+ <FileMosaic
+ key={file.id}
+ {...file}
+ onDelete={removeFileAdd}
+ info
+ preview
+ />
+ ))}
+</Dropzone>
+<Dropzone
+ style={{ width: "min(100% , 420px)" }}
+ onChange={updateFilesReplace}
+ value={filesReplace}
+ label="Dropzone with behaviour=replace"
+ behaviour={"replace"}
+>
+ {filesReplace.length > 0 &&
+ filesReplace.map((file) => (
+ <FileMosaic
+ key={file.id}
+ {...file}
+ onDelete={removeFileReplace}
+ info
+ preview
+ />
+ ))}
+</Dropzone>`;
+
+const splittedCodeTS = splittedCodeJS;
+const completeCodeJS = `import * as React from "react";
+import { Dropzone, FileMosaic } from "@files-ui/react";
+
+const DemoDropzoneBehaviour = () => {
+ const [filesAdd, setFilesAdd] = React.useState([]);
+ const [filesReplace, setFilesReplace] = React.useState([]);
+
+ const updateFilesAdd = (incommingFiles) => {
+ setFilesAdd(incommingFiles);
+ };
+ const updateFilesReplace = (incommingFiles) => {
+ setFilesReplace(incommingFiles);
+ };
+ const removeFileAdd = (id) => {
+ setFilesAdd(filesAdd.filter((x) => x.id !== id));
+ };
+ const removeFileReplace = (id) => {
+ setFilesReplace(filesReplace.filter((x) => x.id !== id));
+ };
+
+ return (
+ <div
+ style={{
+ display: "flex",
+ justifyContent: "space-evenly",
+ gap: "40px",
+ flexWrap: "wrap",
+ }}
+ >
+ <Dropzone
+ style={{ width: "min(100% , 420px)" }}
+ onChange={updateFilesAdd}
+ value={filesAdd}
+ label="Dropzone with behaviour=add"
+ behaviour={"add"}
+ >
+ {filesAdd.length > 0 &&
+ filesAdd.map((file) => (
+ <FileMosaic
+ key={file.id}
+ {...file}
+ onDelete={removeFileAdd}
+ info
+ preview
+ />
+ ))}
+ </Dropzone>
+ <Dropzone
+ style={{ width: "min(100% , 420px)" }}
+ onChange={updateFilesReplace}
+ value={filesReplace}
+ label="Dropzone with behaviour=replace"
+ behaviour={"replace"}
+ >
+ {filesReplace.length > 0 &&
+ filesReplace.map((file) => (
+ <FileMosaic
+ key={file.id}
+ {...file}
+ onDelete={removeFileReplace}
+ info
+ preview
+ />
+ ))}
+ </Dropzone>
+ </div>
+ );
+ };
+ export default DemoDropzoneBehaviour;`;
+
+const completeCodeTS = `import * as React from "react";
+import { Dropzone, ExtFile, FileMosaic, FileMosaicProps } from "@files-ui/react";
+
+const DemoDropzoneBehaviour = () => {
+ const [filesAdd, setFilesAdd] = React.useState<ExtFile[]>([]);
+ const [filesReplace, setFilesReplace] = React.useState<ExtFile[]>([]);
+
+ const updateFilesAdd = (incommingFiles:ExtFile[]) => {
+ setFilesAdd(incommingFiles);
+ };
+ const updateFilesReplace = (incommingFiles:ExtFile[]) => {
+ setFilesReplace(incommingFiles);
+ };
+ const removeFileAdd = (id:FileMosaicProps["id"]) => {
+ setFilesAdd(filesAdd.filter((x) => x.id !== id));
+ };
+ const removeFileReplace = (id:FileMosaicProps["id"]) => {
+ setFilesReplace(filesReplace.filter((x) => x.id !== id));
+ };
+
+ return (
+ <div
+ style={{
+ display: "flex",
+ justifyContent: "space-evenly",
+ gap: "40px",
+ flexWrap: "wrap",
+ }}
+ >
+ <Dropzone
+ style={{ width: "min(100% , 420px)" }}
+ onChange={updateFilesAdd}
+ value={filesAdd}
+ label="Dropzone with behaviour=add"
+ behaviour={"add"}
+ >
+ {filesAdd.length > 0 &&
+ filesAdd.map((file) => (
+ <FileMosaic
+ key={file.id}
+ {...file}
+ onDelete={removeFileAdd}
+ info
+ preview
+ />
+ ))}
+ </Dropzone>
+ <Dropzone
+ style={{ width: "min(100% , 420px)" }}
+ onChange={updateFilesReplace}
+ value={filesReplace}
+ label="Dropzone with behaviour=replace"
+ behaviour={"replace"}
+ >
+ {filesReplace.length > 0 &&
+ filesReplace.map((file) => (
+ <FileMosaic
+ key={file.id}
+ {...file}
+ onDelete={removeFileReplace}
+ info
+ preview
+ />
+ ))}
+ </Dropzone>
+ </div>
+ );
+ };
+ export default DemoDropzoneBehaviour;`;
diff --git a/src/components/demo-components/dropzone-demo/DemoDropzoneBehaviour.jsx b/src/components/demo-components/dropzone-demo/DemoDropzoneBehaviour.jsx
deleted file mode 100644
index 8909bab..0000000
--- a/src/components/demo-components/dropzone-demo/DemoDropzoneBehaviour.jsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import * as React from "react";
-import { Dropzone, FileMosaic } from "../../../files-ui";
-
-const DemoDropzoneBehaviour = (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));
- };
- return (
- <div style={{ display: "flex" }}>
- <Dropzone
- style={{ width: "300px" }}
- onChange={updateFiles}
- value={files}
- label="Dropzone with behaviour=add"
- behaviour={"add"}
- >
- {files.length > 0 &&
- files.map((file) => (
- <FileMosaic key={file.id} {...file} onDelete={removeFile} info />
- ))}
- </Dropzone>
- <Dropzone
- style={{ width: "300px" }}
- onChange={updateFiles}
- value={files}
- label="Dropzone with behaviour=replace"
- behaviour={"replace"}
- >
- {files.length > 0 &&
- files.map((file) => (
- <FileMosaic key={file.id} {...file} onDelete={removeFile} info />
- ))}
- </Dropzone>
- </div>
- );
-};
-export default DemoDropzoneBehaviour;
diff --git a/src/components/demo-components/dropzone-demo/DemoDropzoneBehaviour.tsx b/src/components/demo-components/dropzone-demo/DemoDropzoneBehaviour.tsx
new file mode 100644
index 0000000..f14444f
--- /dev/null
+++ b/src/components/demo-components/dropzone-demo/DemoDropzoneBehaviour.tsx
@@ -0,0 +1,69 @@
+import * as React from "react";
+import { Dropzone, ExtFile, FileMosaic, FileMosaicProps } from "../../../files-ui";
+
+const DemoDropzoneBehaviour = () => {
+ const [filesAdd, setFilesAdd] = React.useState<ExtFile[]>([]);
+ const [filesReplace, setFilesReplace] = React.useState<ExtFile[]>([]);
+
+ const updateFilesAdd = (incommingFiles:ExtFile[]) => {
+ setFilesAdd(incommingFiles);
+ };
+ const updateFilesReplace = (incommingFiles:ExtFile[]) => {
+ setFilesReplace(incommingFiles);
+ };
+ const removeFileAdd = (id:FileMosaicProps["id"]) => {
+ setFilesAdd(filesAdd.filter((x) => x.id !== id));
+ };
+ const removeFileReplace = (id:FileMosaicProps["id"]) => {
+ setFilesReplace(filesReplace.filter((x) => x.id !== id));
+ };
+ return (
+ <div
+ style={{
+ display: "flex",
+ justifyContent: "space-evenly",
+ gap: "40px",
+ flexWrap: "wrap",
+ width: "100%",
+ }}
+ >
+ <Dropzone
+ style={{ width: "min(100% , 420px)" }}
+ onChange={updateFilesAdd}
+ value={filesAdd}
+ label="Dropzone with behaviour=add"
+ behaviour={"add"}
+ >
+ {filesAdd.length > 0 &&
+ filesAdd.map((file) => (
+ <FileMosaic
+ key={file.id}
+ {...file}
+ onDelete={removeFileAdd}
+ info
+ preview
+ />
+ ))}
+ </Dropzone>
+ <Dropzone
+ style={{ width: "min(100% , 420px)" }}
+ onChange={updateFilesReplace}
+ value={filesReplace}
+ label="Dropzone with behaviour=replace"
+ behaviour={"replace"}
+ >
+ {filesReplace.length > 0 &&
+ filesReplace.map((file) => (
+ <FileMosaic
+ key={file.id}
+ {...file}
+ onDelete={removeFileReplace}
+ info
+ preview
+ />
+ ))}
+ </Dropzone>
+ </div>
+ );
+};
+export default DemoDropzoneBehaviour;
--
GitLab