From 948b9511fbf52676bd672f6b3dcbf54c61a63090 Mon Sep 17 00:00:00 2001
From: Jose Manuel Serrano Amaut <a20122128@pucp.pe>
Date: Thu, 16 Mar 2023 13:34:34 -0500
Subject: [PATCH] [FEAT]: Add Dropzone demo styling and code
---
.../dropzone-demo/CodeDropzoneDemoStyling.jsx | 163 ++++++++++++++++++
.../dropzone-demo/DemoDropzoneStyling.jsx | 15 +-
src/pages/demo/DropzoneDemoPage.jsx | 12 +-
3 files changed, 182 insertions(+), 8 deletions(-)
create mode 100644 src/components/demo-components/dropzone-demo/CodeDropzoneDemoStyling.jsx
diff --git a/src/components/demo-components/dropzone-demo/CodeDropzoneDemoStyling.jsx b/src/components/demo-components/dropzone-demo/CodeDropzoneDemoStyling.jsx
new file mode 100644
index 0000000..9a262ca
--- /dev/null
+++ b/src/components/demo-components/dropzone-demo/CodeDropzoneDemoStyling.jsx
@@ -0,0 +1,163 @@
+import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
+const CodeDemoDropzoneStyling = ({ 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 CodeDemoDropzoneStyling;
+
+const splittedCodeJS = `<Dropzone color="#6200EE">{/** files */}</Dropzone>
+<Dropzone
+ minHeight="120px"
+ header={false}
+ footer={false}
+>
+ {/** files */}
+</Dropzone>
+<Dropzone
+ background="radial-gradient(circle at 18.7% 37.8%, rgb(250, 250, 250) 0%, rgb(225, 234, 238) 90%);"
+>
+ {/** files */}
+</Dropzone>`;
+const splittedCodeTS = `<Dropzone color="#6200EE">{/** files */}</Dropzone>
+<Dropzone
+ minHeight="120px"
+ header={false}
+ footer={false}
+>
+ {/** files */}
+</Dropzone>
+<Dropzone
+ background="radial-gradient(circle at 18.7% 37.8%, rgb(250, 250, 250) 0%, rgb(225, 234, 238) 90%);"
+>
+ {/** files */}
+</Dropzone>`;
+const completeCodeJS = `import * as React from "react";
+import { Dropzone, FileMosaic } from "@files-ui/react";
+
+export default function App() {
+ 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",
+ justifyContent: "space-evenly",
+ gap: "20px",
+ flexWrap: "wrap",
+ }}
+ >
+ <Dropzone
+ style={{ width: "300px" }}
+ onChange={updateFiles}
+ value={files}
+ color="#6200EE"
+ >
+ {files.length > 0 &&
+ files.map((file) => (
+ <FileMosaic key={file.id} {...file} onDelete={removeFile} info />
+ ))}
+ </Dropzone>
+ <Dropzone
+ style={{ width: "300px" }}
+ onChange={updateFiles}
+ value={files}
+ minHeight="120px"
+ header={false}
+ footer={false}
+ >
+ {files.length > 0 &&
+ files.map((file) => (
+ <FileMosaic key={file.id} {...file} onDelete={removeFile} info />
+ ))}
+ </Dropzone>
+ <Dropzone
+ style={{ width: "300px" }}
+ onChange={updateFiles}
+ value={files}
+ background="radial-gradient(circle at 18.7% 37.8%, rgb(250, 250, 250) 0%, rgb(225, 234, 238) 90%);"
+ >
+ {files.length > 0 &&
+ files.map((file) => (
+ <FileMosaic key={file.id} {...file} onDelete={removeFile} info />
+ ))}
+ </Dropzone>
+ </div>
+ );
+};`;
+
+const completeCodeTS = `import * as React from "react";
+import { Dropzone, FileMosaic, ExtFile } from "@files-ui/react";
+
+export default function App() {
+ const [files, setFiles] = React.useState<ExtFile[]>([]);
+ const updateFiles = (incommingFiles:ExtFile[]) => {
+ //do something with the files
+ setFiles(incommingFiles);
+ //even your own upload implementation
+ };
+ const removeFile = (id: string | number | undefined) => {
+ setFiles(files.filter((x: ExtFile) => x.id !== id));
+ };
+ return (
+ <div
+ style={{
+ display: "flex",
+ justifyContent: "space-evenly",
+ gap: "20px",
+ flexWrap: "wrap",
+ }}
+ >
+ <Dropzone
+ style={{ width: "300px" }}
+ onChange={updateFiles}
+ value={files}
+ color="#6200EE"
+ >
+ {files.length > 0 &&
+ files.map((file: ExtFile) => (
+ <FileMosaic key={file.id} {...file} onDelete={removeFile} info />
+ ))}
+ </Dropzone>
+ <Dropzone
+ style={{ width: "300px" }}
+ onChange={updateFiles}
+ value={files}
+ minHeight="120px"
+ header={false}
+ footer={false}
+ >
+ {files.length > 0 &&
+ files.map((file: ExtFile) => (
+ <FileMosaic key={file.id} {...file} onDelete={removeFile} info />
+ ))}
+ </Dropzone>
+ <Dropzone
+ style={{ width: "300px" }}
+ onChange={updateFiles}
+ value={files}
+ background="radial-gradient(circle at 18.7% 37.8%, rgb(250, 250, 250) 0%, rgb(225, 234, 238) 90%);"
+ >
+ {files.length > 0 &&
+ files.map((file: ExtFile) => (
+ <FileMosaic key={file.id} {...file} onDelete={removeFile} info />
+ ))}
+ </Dropzone>
+ </div>
+ );
+}`;
diff --git a/src/components/demo-components/dropzone-demo/DemoDropzoneStyling.jsx b/src/components/demo-components/dropzone-demo/DemoDropzoneStyling.jsx
index 5a79fe4..7ab584c 100644
--- a/src/components/demo-components/dropzone-demo/DemoDropzoneStyling.jsx
+++ b/src/components/demo-components/dropzone-demo/DemoDropzoneStyling.jsx
@@ -12,7 +12,14 @@ const DemoDropzoneStyling = (props) => {
setFiles(files.filter((x) => x.id !== id));
};
return (
- <div style={{ display: "flex" }}>
+ <div
+ style={{
+ display: "flex",
+ justifyContent: "space-evenly",
+ gap: "20px",
+ flexWrap: "wrap",
+ }}
+ >
<Dropzone
style={{ width: "300px" }}
onChange={updateFiles}
@@ -28,7 +35,9 @@ const DemoDropzoneStyling = (props) => {
style={{ width: "300px" }}
onChange={updateFiles}
value={files}
- minHeight="100px"
+ minHeight="120px"
+ header={false}
+ footer={false}
>
{files.length > 0 &&
files.map((file) => (
@@ -39,7 +48,7 @@ const DemoDropzoneStyling = (props) => {
style={{ width: "300px" }}
onChange={updateFiles}
value={files}
- backgroundColor="radial-gradient(circle at 18.7% 37.8%, rgb(250, 250, 250) 0%, rgb(225, 234, 238) 90%);"
+ background="radial-gradient(circle at 18.7% 37.8%, rgb(250, 250, 250) 0%, rgb(225, 234, 238) 90%);"
>
{files.length > 0 &&
files.map((file) => (
diff --git a/src/pages/demo/DropzoneDemoPage.jsx b/src/pages/demo/DropzoneDemoPage.jsx
index 391a00a..9a73282 100644
--- a/src/pages/demo/DropzoneDemoPage.jsx
+++ b/src/pages/demo/DropzoneDemoPage.jsx
@@ -31,6 +31,7 @@ import DemoDropzoneDropLayer from "../../components/demo-components/dropzone-dem
import DemoDropzoneClickable from "../../components/demo-components/dropzone-demo/DemoDropzoneClickable";
import DemoDropzoneDisabled from "../../components/demo-components/dropzone-demo/DemoDropzoneDisabled";
import DemoDropzoneRipple from "../../components/demo-components/dropzone-demo/DemoDropzoneRipple";
+import CodeDemoDropzoneStyling from "../../components/demo-components/dropzone-demo/CodeDropzoneDemoStyling";
const DropzoneDemoPage = (props) => {
return (
@@ -444,15 +445,16 @@ const DropzoneDemoPage = (props) => {
defined will use this color for border, drop layer, font color
and ripple.
</li>
- <li>
- Dropzone with the <TypeHighlight>backgroundColor</TypeHighlight>{" "}
- prop defined will use this color for the background.
- </li>
<li>
Dropzone with the <TypeHighlight>minHeight</TypeHighlight> prop
defined will use this value to define the minimum height of the
component.
</li>
+ <li>
+ Dropzone with the <TypeHighlight>background</TypeHighlight> prop
+ defined will use this value for the background. You can set nice
+ gradients or even a background image.
+ </li>
</ul>
</DescParagraph>
@@ -460,7 +462,7 @@ const DropzoneDemoPage = (props) => {
<DemoDropzoneStyling />
</Paper>
- <CodeDemoDropzoneFooterConfig />
+ <CodeDemoDropzoneStyling />
</section>
<section id="ripple">
--
GitLab