From ccaf24c4a0ec8bfe180a235bfd18f3f508e28afc Mon Sep 17 00:00:00 2001
From: Jose Manuel Serrano Amaut <a20122128@pucp.pe>
Date: Thu, 16 Mar 2023 18:13:41 -0500
Subject: [PATCH] [FEAT]: Add demo and code components for clickable and Label
sections
---
.../CodeDemoDropzoneClickable.tsx | 45 ++++++++++++++++
.../dropzone-demo/CodeDropzoneDemoLabel.tsx | 52 +++++++++++++++++++
.../dropzone-demo/DemoDropzoneClickable.jsx | 39 +++++---------
.../dropzone-demo/DemoDropzoneLabel.jsx | 38 +++++---------
4 files changed, 122 insertions(+), 52 deletions(-)
create mode 100644 src/components/demo-components/dropzone-demo/CodeDemoDropzoneClickable.tsx
create mode 100644 src/components/demo-components/dropzone-demo/CodeDropzoneDemoLabel.tsx
diff --git a/src/components/demo-components/dropzone-demo/CodeDemoDropzoneClickable.tsx b/src/components/demo-components/dropzone-demo/CodeDemoDropzoneClickable.tsx
new file mode 100644
index 0000000..db3c823
--- /dev/null
+++ b/src/components/demo-components/dropzone-demo/CodeDemoDropzoneClickable.tsx
@@ -0,0 +1,45 @@
+import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
+const CodeDemoDropzoneClickable = ({ 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 CodeDemoDropzoneClickable;
+
+const splittedCodeJS = `<Dropzone style={{ width: "300px" }}>{/**Files */}</Dropzone>
+<Dropzone style={{ width: "300px" }} clickable={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" }} clickable={false}>
+ {/**Files */}
+ </Dropzone>
+ </div>
+ );
+ };
+ export default DemoDropzoneRipple;`;
+
+const completeCodeTS = completeCodeJS;
diff --git a/src/components/demo-components/dropzone-demo/CodeDropzoneDemoLabel.tsx b/src/components/demo-components/dropzone-demo/CodeDropzoneDemoLabel.tsx
new file mode 100644
index 0000000..3de75d3
--- /dev/null
+++ b/src/components/demo-components/dropzone-demo/CodeDropzoneDemoLabel.tsx
@@ -0,0 +1,52 @@
+import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
+const CodeDemoDropzoneLabel = ({ 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 CodeDemoDropzoneLabel;
+
+
+const splittedCodeJS = `<Dropzone style={{ width: "300px" }}>{/**Files */}</Dropzone>
+<Dropzone
+ style={{ width: "300px" }}
+ label={"Files ui â¤ï¸"}
+>
+ {/**Files */}
+</Dropzone>`;
+const splittedCodeTS = splittedCodeJS;
+const completeCodeJS = `import * as React from "react";
+import { Dropzone } from "@files-ui/react";
+
+const DemoDropzoneLabel = () => {
+ return (
+ <div
+ style={{
+ display: "flex",
+ justifyContent: "space-evenly",
+ gap: "40px",
+ flexWrap: "wrap",
+ }}
+ >
+ <Dropzone style={{ width: "300px" }}>{/**Files */}</Dropzone>
+ <Dropzone
+ style={{ width: "300px" }}
+ label={"Files ui â¤ï¸"}
+ >
+ {/**Files */}
+ </Dropzone>
+ </div>
+ );
+ };
+ export default DemoDropzoneLabel;`;
+
+const completeCodeTS = completeCodeJS;
+
diff --git a/src/components/demo-components/dropzone-demo/DemoDropzoneClickable.jsx b/src/components/demo-components/dropzone-demo/DemoDropzoneClickable.jsx
index 626eb14..4037a97 100644
--- a/src/components/demo-components/dropzone-demo/DemoDropzoneClickable.jsx
+++ b/src/components/demo-components/dropzone-demo/DemoDropzoneClickable.jsx
@@ -1,34 +1,19 @@
import * as React from "react";
-import { Dropzone, FileMosaic } from "../../../files-ui";
+import { Dropzone } from "../../../files-ui";
const DemoDropzoneClickable = (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}>
- {files.length > 0 &&
- files.map((file) => (
- <FileMosaic key={file.id} {...file} onDelete={removeFile} info />
- ))}
- </Dropzone>
- <Dropzone
- style={{ width: "300px" }}
- onChange={updateFiles}
- value={files}
- clickable={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" }} clickable={false}>
+ {/**Files */}
</Dropzone>
</div>
);
diff --git a/src/components/demo-components/dropzone-demo/DemoDropzoneLabel.jsx b/src/components/demo-components/dropzone-demo/DemoDropzoneLabel.jsx
index 744a243..a5a4446 100644
--- a/src/components/demo-components/dropzone-demo/DemoDropzoneLabel.jsx
+++ b/src/components/demo-components/dropzone-demo/DemoDropzoneLabel.jsx
@@ -1,34 +1,22 @@
import * as React from "react";
-import { Dropzone, FileMosaic } from "../../../files-ui";
+import { Dropzone } from "../../../files-ui";
-const DemoDropzoneLabel = (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 DemoDropzoneLabel = () => {
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>
+ <div
+ style={{
+ display: "flex",
+ justifyContent: "space-evenly",
+ gap: "40px",
+ flexWrap: "wrap",
+ }}
+ >
+ <Dropzone style={{ width: "300px" }}>{/**Files */}</Dropzone>
<Dropzone
style={{ width: "300px" }}
- onChange={updateFiles}
- value={files}
- label={"You better have already installed files-ui for your project XD"}
+ label={"Files ui â¤ï¸"}
>
- {files.length > 0 &&
- files.map((file) => (
- <FileMosaic key={file.id} {...file} onDelete={removeFile} info />
- ))}
+ {/**Files */}
</Dropzone>
</div>
);
--
GitLab