From f4134883eca2885d5595320eed50cf66aa331af5 Mon Sep 17 00:00:00 2001
From: Jose Manuel Serrano Amaut <a20122128@pucp.pe>
Date: Wed, 8 Mar 2023 20:19:45 -0500
Subject: [PATCH] [WIP]: Add file card demo page. Refactor container to fit
appropialy with cards. Maybe new components will be required or just only
refactor the ones that already exists
---
.../file-card-demo/CodeJSFileCardBasic.jsx | 4 +-
.../CodeJSFileMosaicDarkMode.tsx | 47 +++++------
.../CodeJSFileMosaicImagePreview.tsx | 4 +-
.../CodeJSFileMosaicUploadStatus.jsx | 66 +++++++--------
.../CodeJSFileMosaicValidation.jsx | 32 ++++----
.../DemoFileMosaicUploadStatus.tsx | 81 ++++++++++---------
src/pages/demo/FileCardDemoPage.jsx | 32 +++-----
7 files changed, 128 insertions(+), 138 deletions(-)
diff --git a/src/components/demo-components/file-card-demo/CodeJSFileCardBasic.jsx b/src/components/demo-components/file-card-demo/CodeJSFileCardBasic.jsx
index d945844..80b8e73 100644
--- a/src/components/demo-components/file-card-demo/CodeJSFileCardBasic.jsx
+++ b/src/components/demo-components/file-card-demo/CodeJSFileCardBasic.jsx
@@ -33,7 +33,7 @@ const sampleFileProps = {
};`;
const completeCodeJS = (card) => `import * as React from "react";
-import { InputButton, FileMosaic } from "@files-ui/react";
+import { InputButton, FileCard } from "@files-ui/react";
const sampleFileProps = {
id: ":0:",
@@ -83,7 +83,7 @@ const sampleFileProps: ExtFile = {
name: "file created from props.jsx",
};`;
const completeCodeTS = (card) => `import * as React from "react";
-import { InputButton, FileMosaic, ExtFile } from "@files-ui/react";
+import { InputButton, FileCard, ExtFile } from "@files-ui/react";
const sampleFileProps:ExtFile = {
id: ":0:",
diff --git a/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicDarkMode.tsx b/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicDarkMode.tsx
index bdcbb48..d9e90d7 100644
--- a/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicDarkMode.tsx
+++ b/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicDarkMode.tsx
@@ -1,31 +1,32 @@
import * as React from "react";
import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
-const CodeJSFileMosaicDarkMode = () => {
+const CodeJSFileMosaicDarkMode = (props: { card?: boolean }) => {
+ const { card } = props;
return (
<ShowDemoCode
- codeCompleteJS={completeCodeJS}
- codeCompleteTS={completeCodeTS}
+ codeCompleteJS={completeCodeJS(card)}
+ codeCompleteTS={completeCodeTS(card)}
codeSandboxJS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
codeSandboxTS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
- codeSplittedJS={splittedCodeJS}
- codeSplittedTS={splittedCodeTS}
+ codeSplittedJS={splittedCodeJS(card)}
+ codeSplittedTS={splittedCodeTS(card)}
/>
);
};
export default CodeJSFileMosaicDarkMode;
-const splittedCodeJS = `<>
- <FileMosaic {...sampleFileProps} info onDelete={removeFile} />
- <FileMosaic {...sampleFileProps} info onDelete={removeFile} darkMode/>
+const splittedCodeJS = (card?: boolean) => `<>
+ <${card?"FileCard":"FileMosaic"} {...sampleFileProps} info onDelete={removeFile} />
+ <${card?"FileCard":"FileMosaic"} {...sampleFileProps} info onDelete={removeFile} darkMode/>
</>`;
-const splittedCodeTS = `<>
-<FileMosaic {...sampleFileProps} info onDelete={removeFile} />
-<FileMosaic {...sampleFileProps} info onDelete={removeFile} darkMode/>
+const splittedCodeTS = (card?: boolean) => `<>
+<${card?"FileCard":"FileMosaic"} {...sampleFileProps} info onDelete={removeFile} />
+<${card?"FileCard":"FileMosaic"} {...sampleFileProps} info onDelete={removeFile} darkMode/>
</>`;
-const completeCodeJS = `import * as React from "react";
-import { FileMosaic } from "@files-ui/react";
+const completeCodeJS = (card?: boolean) => `import * as React from "react";
+import { ${card?"FileCard":"FileMosaic"} } from "@files-ui/react";
const sampleFileProps = {
id: "fileId",
@@ -33,7 +34,7 @@ const sampleFileProps = {
type: "text/plain",
name: "file created from props.jsx",
};
-const DemoFileMosaicDarkMode = () => {
+const Demo${card?"FileCard":"FileMosaic"}DarkMode = () => {
const removeFile = (id) => {
console.log("delete button clicked on file: " + id);
};
@@ -48,7 +49,7 @@ const DemoFileMosaicDarkMode = () => {
padding: "10px 0",
}}
>
- <FileMosaic {...sampleFileProps} info onDelete={removeFile} />
+ <${card?"FileCard":"FileMosaic"} {...sampleFileProps} info onDelete={removeFile} />
</div>
<div
style={{
@@ -59,16 +60,16 @@ const DemoFileMosaicDarkMode = () => {
padding: "10px 0",
}}
>
- <FileMosaic {...sampleFileProps} info darkMode onDelete={removeFile} />
+ <${card?"FileCard":"FileMosaic"} {...sampleFileProps} info darkMode onDelete={removeFile} />
</div>
</>
);
};
-export default DemoFileMosaicDarkMode;
+export default Demo${card?"FileCard":"FileMosaic"}DarkMode;
`;
-const completeCodeTS = `import * as React from "react";
-import { ExtFile, FileMosaic } from "@files-ui/react";
+const completeCodeTS = (card?: boolean) => `import * as React from "react";
+import { ExtFile, ${card?"FileCard":"FileMosaic"} } from "@files-ui/react";
const sampleFileProps: ExtFile = {
id: "fileId",
@@ -76,7 +77,7 @@ const sampleFileProps: ExtFile = {
type: "text/plain",
name: "file created from props.jsx",
};
-const DemoFileMosaicDarkMode = () => {
+const Demo${card?"FileCard":"FileMosaic"}DarkMode = () => {
const removeFile = (id: string | number | undefined) => {
console.log("delete button clicked on file: " + id);
};
@@ -91,7 +92,7 @@ const DemoFileMosaicDarkMode = () => {
padding: "10px 0",
}}
>
- <FileMosaic {...sampleFileProps} info onDelete={removeFile} />
+ <${card?"FileCard":"FileMosaic"} {...sampleFileProps} info onDelete={removeFile} />
</div>
<div
style={{
@@ -102,10 +103,10 @@ const DemoFileMosaicDarkMode = () => {
padding: "10px 0",
}}
>
- <FileMosaic {...sampleFileProps} info darkMode onDelete={removeFile} />
+ <${card?"FileCard":"FileMosaic"} {...sampleFileProps} info darkMode onDelete={removeFile} />
</div>
</>
);
};
-export default DemoFileMosaicDarkMode;
+export default Demo${card?"FileCard":"FileMosaic"}DarkMode;
`;
diff --git a/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicImagePreview.tsx b/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicImagePreview.tsx
index 3af3061..4ea1437 100644
--- a/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicImagePreview.tsx
+++ b/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicImagePreview.tsx
@@ -35,7 +35,7 @@ const sampleFileProps = {
};`;
const completeCodeJS = (card:boolean)=>`import * as React from "react";
-import { InputButton, FileMosaic } from "@files-ui/react";
+import { InputButton, ${card?"FileCard":"FileMosaic"} } from "@files-ui/react";
const sampleFileProps = {
id: "fileId",
@@ -85,7 +85,7 @@ const sampleFileProps: ExtFile = {
imageUrl:"https://cdn.wallpapersafari.com/0/95/1zms6H.jpg"
};`;
const completeCodeTS = (card:boolean)=>`import * as React from "react";
-import { InputButton, FileMosaic, ExtFile } from "@files-ui/react";
+import { InputButton, ${card?"FileCard":"FileMosaic"}, ExtFile } from "@files-ui/react";
const sampleFileProps: ExtFile = {
id: "fileId",
diff --git a/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicUploadStatus.jsx b/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicUploadStatus.jsx
index 0ee9725..6daac51 100644
--- a/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicUploadStatus.jsx
+++ b/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicUploadStatus.jsx
@@ -1,31 +1,31 @@
import * as React from "react";
import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
-const CodeJSFileMosaicUploadStatus = () => {
+const CodeJSFileMosaicUploadStatus = ({card}) => {
return (
<ShowDemoCode
- codeCompleteJS={completeCodeJS}
- codeCompleteTS={completeCodeTS}
+ codeCompleteJS={completeCodeJS(card)}
+ codeCompleteTS={completeCodeTS(card)}
codeSandboxJS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
codeSandboxTS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
- codeSplittedJS={splittedCodeJS}
- codeSplittedTS={splittedCodeTS}
+ codeSplittedJS={splittedCodeJS(card)}
+ codeSplittedTS={splittedCodeTS(card)}
/>
);
};
export default CodeJSFileMosaicUploadStatus;
-const splittedCodeJS = ``;
+const splittedCodeJS =(card)=> ``;
-const splittedCodeTS = ``;
+const splittedCodeTS =(card)=> ``;
-const completeCodeJS = `import * as React from "react";
+const completeCodeJS =(card)=> `import * as React from "react";
import {
- FileMosaic,
+ ${card?"FileCard":"FileMosaic"},
useFakeProgress,
} from "@files-ui/react";
-const DemoFileMosaicUploadStatus = () => {
+const Demo${card?"FileCard":"FileMosaic"}UploadStatus = () => {
const progress = useFakeProgress();
const [status1, setStatus1] = React.useState("uploading");
@@ -57,26 +57,26 @@ const DemoFileMosaicUploadStatus = () => {
return (
<>
<FlexRowContainer>
- <FileMosaic {...preparingFile} />
- <FileMosaic {...preparingFile} onCancel={handleCancel} />
+ <${card?"FileCard":"FileMosaic"} {...preparingFile} />
+ <${card?"FileCard":"FileMosaic"} {...preparingFile} onCancel={handleCancel} />
</FlexRowContainer>
<FlexRowContainer>
- <FileMosaic {...uploadingFile} />
- <FileMosaic {...uploadingFile} progress={progress} />
- <FileMosaic {...uploadingFile} onAbort={handleAbort} />
- <FileMosaic {...uploadingFile} onAbort={handleAbort} progress={progress} />
+ <${card?"FileCard":"FileMosaic"} {...uploadingFile} />
+ <${card?"FileCard":"FileMosaic"} {...uploadingFile} progress={progress} />
+ <${card?"FileCard":"FileMosaic"} {...uploadingFile} onAbort={handleAbort} />
+ <${card?"FileCard":"FileMosaic"} {...uploadingFile} onAbort={handleAbort} progress={progress} />
</FlexRowContainer>
<FlexRowContainer>
- <FileMosaic {...uploadResultFiles[0]} uploadStatus={status1} />
- <FileMosaic {...uploadResultFiles[1]} uploadStatus={status2} />
- <FileMosaic {...uploadResultFiles[2]} uploadStatus={status3} />
+ <${card?"FileCard":"FileMosaic"} {...uploadResultFiles[0]} uploadStatus={status1} />
+ <${card?"FileCard":"FileMosaic"} {...uploadResultFiles[1]} uploadStatus={status2} />
+ <${card?"FileCard":"FileMosaic"} {...uploadResultFiles[2]} uploadStatus={status3} />
</FlexRowContainer>
</>
);
};
-export default DemoFileMosaicUploadStatus;
+export default Demo${card?"FileCard":"FileMosaic"}UploadStatus;
const FlexRowContainer = ({ children }) => {
return (
@@ -142,15 +142,15 @@ const uploadResultFiles = [
},
];`;
-const completeCodeTS = `import * as React from "react";
+const completeCodeTS =(card)=> `import * as React from "react";
import {
- FileMosaic,
+ ${card?"FileCard":"FileMosaic"},
useFakeProgress,
ExtFile,
UPLOADSTATUS,
} from "@files-ui/react";
-const DemoFileMosaicUploadStatus = () => {
+const Demo${card?"FileCard":"FileMosaic"}UploadStatus = () => {
const progress = useFakeProgress();
const [status1, setStatus1] = React.useState<UPLOADSTATUS>("uploading");
@@ -182,26 +182,26 @@ const DemoFileMosaicUploadStatus = () => {
return (
<>
<FlexRowContainer>
- <FileMosaic {...preparingFile} />
- <FileMosaic {...preparingFile} onCancel={handleCancel} />
+ <${card?"FileCard":"FileMosaic"} {...preparingFile} />
+ <${card?"FileCard":"FileMosaic"} {...preparingFile} onCancel={handleCancel} />
</FlexRowContainer>
<FlexRowContainer>
- <FileMosaic {...uploadingFile} />
- <FileMosaic {...uploadingFile} progress={progress} />
- <FileMosaic {...uploadingFile} onAbort={handleAbort} />
- <FileMosaic {...uploadingFile} onAbort={handleAbort} progress={progress} />
+ <${card?"FileCard":"FileMosaic"} {...uploadingFile} />
+ <${card?"FileCard":"FileMosaic"} {...uploadingFile} progress={progress} />
+ <${card?"FileCard":"FileMosaic"} {...uploadingFile} onAbort={handleAbort} />
+ <${card?"FileCard":"FileMosaic"} {...uploadingFile} onAbort={handleAbort} progress={progress} />
</FlexRowContainer>
<FlexRowContainer>
- <FileMosaic {...uploadResultFiles[0]} uploadStatus={status1} />
- <FileMosaic {...uploadResultFiles[1]} uploadStatus={status2} />
- <FileMosaic {...uploadResultFiles[2]} uploadStatus={status3} />
+ <${card?"FileCard":"FileMosaic"} {...uploadResultFiles[0]} uploadStatus={status1} />
+ <${card?"FileCard":"FileMosaic"} {...uploadResultFiles[1]} uploadStatus={status2} />
+ <${card?"FileCard":"FileMosaic"} {...uploadResultFiles[2]} uploadStatus={status3} />
</FlexRowContainer>
</>
);
};
-export default DemoFileMosaicUploadStatus;
+export default Demo${card?"FileCard":"FileMosaic"}UploadStatus;
const FlexRowContainer = (props: { children: React.ReactNode }) => {
return (
diff --git a/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicValidation.jsx b/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicValidation.jsx
index 435488c..3bd8a47 100644
--- a/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicValidation.jsx
+++ b/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicValidation.jsx
@@ -1,36 +1,35 @@
import * as React from "react";
import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
-const CodeJSFileMosaicValidation = () => {
+const CodeJSFileMosaicValidation = (card) => {
return (
<ShowDemoCode
- codeCompleteJS={completeCodeJS}
- codeCompleteTS={completeCodeTS}
+ codeCompleteJS={completeCodeJS(card)}
+ codeCompleteTS={completeCodeTS(card)}
codeSandboxJS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
codeSandboxTS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
- codeSplittedJS={splittedCodeJS}
- codeSplittedTS={splittedCodeTS}
+ codeSplittedJS={splittedCodeJS(card)}
+ codeSplittedTS={splittedCodeTS(card)}
/>
);
};
export default CodeJSFileMosaicValidation;
-const splittedCodeJS = ``;
-const splittedCodeTS = ``;
+const splittedCodeJS = (card)=>``;
+const splittedCodeTS = (card)=>``;
-const completeCodeJS = `import * as React from "react";
-import { FileMosaic } from "../../../files-ui";
+const completeCodeJS = (card)=>`import * as React from "react";
+import { ${card?"FileCard":"FileMosaic"} } from "@files-ui/react";
-const DemoFileMosaicValidation = () => {
+export default function App() {
return (
<div style={{display:"flex", gap:"10px"}}>
{sampleFilesProps.map((extFile) => (
- <FileMosaic key={extFile.id} valid={extFile.valid} {...extFile} info/>
+ <${card?"FileCard":"FileMosaic"} key={extFile.id} valid={extFile.valid} {...extFile} info/>
))}
</div>
);
};
-export default DemoFileMosaicValidation;
const sampleFilesProps = [
{
@@ -56,19 +55,18 @@ const sampleFilesProps = [
},
];`;
-const completeCodeTS = `import * as React from "react";
-import { FileMosaic, ExtFile } from "../../../files-ui";
+const completeCodeTS = (card)=>`import * as React from "react";
+import { ${card?"FileCard":"FileMosaic"}, ExtFile } from "@files-ui/react";
-const DemoFileMosaicValidation = () => {
+export default function App() {
return (
<div style={{display:"flex", gap:"10px"}}>
{sampleFilesProps.map((extFile: ExtFile) => (
- <FileMosaic key={extFile.id} valid={extFile.valid} {...extFile} info/>
+ <${card?"FileCard":"FileMosaic"} key={extFile.id} valid={extFile.valid} {...extFile} info/>
))}
</div>
);
};
-export default DemoFileMosaicValidation;
const sampleFilesProps: ExtFile[] = [
{
diff --git a/src/components/demo-components/filemosaic-demo/DemoFileMosaicUploadStatus.tsx b/src/components/demo-components/filemosaic-demo/DemoFileMosaicUploadStatus.tsx
index de2f6b1..2a3dcc0 100644
--- a/src/components/demo-components/filemosaic-demo/DemoFileMosaicUploadStatus.tsx
+++ b/src/components/demo-components/filemosaic-demo/DemoFileMosaicUploadStatus.tsx
@@ -6,8 +6,10 @@ import {
UPLOADSTATUS,
FileCard,
} from "../../../files-ui";
+import TypeHighlight from "../../typeHighlight/TypeHighlight";
+import DemoContainerFileMosaic from "./DemoContainerFileMosaic";
-const DemoFileMosaicUploadStatus = (props:{card?:boolean}) => {
+const DemoFileMosaicUploadStatus = (props: { card?: boolean }) => {
const progress = useFakeProgress();
const [status1, setStatus1] = React.useState<UPLOADSTATUS>("uploading");
@@ -36,40 +38,40 @@ const DemoFileMosaicUploadStatus = (props:{card?:boolean}) => {
const handleAbort = (id: string | number | undefined) => {
console.log("Upload aborted in file: " + id);
};
- if(props.card)
- return (
-<>
- <FlexRowContainer card>
- <FileCard {...preparingFile} />
- <FileCard {...preparingFile} onCancel={handleCancel} />
- </FlexRowContainer>
+ if (props.card)
+ return (
+ <>
+ <FlexRowContainer card title={"preparing stage"}>
+ <FileCard {...preparingFile} />
+ <FileCard {...preparingFile} onCancel={handleCancel} />
+ </FlexRowContainer>
- <FlexRowContainer card>
- <FileCard {...uploadingFile} />
- <FileCard {...uploadingFile} progress={progress} />
- <FileCard {...uploadingFile} onAbort={handleAbort} />
- <FileCard
- {...uploadingFile}
- onAbort={handleAbort}
- progress={progress}
- />
- </FlexRowContainer>
+ <FlexRowContainer card title={"uploading stage"}>
+ <FileCard {...uploadingFile} />
+ <FileCard {...uploadingFile} progress={progress} />
+ <FileCard {...uploadingFile} onAbort={handleAbort} />
+ <FileCard
+ {...uploadingFile}
+ onAbort={handleAbort}
+ progress={progress}
+ />
+ </FlexRowContainer>
- <FlexRowContainer card>
- <FileCard {...uploadResultFiles[0]} uploadStatus={status1} />
- <FileCard {...uploadResultFiles[1]} uploadStatus={status2} />
- <FileCard {...uploadResultFiles[2]} uploadStatus={status3} />
- </FlexRowContainer>
- </>
- )
+ <FlexRowContainer card title={"upload result stage"}>
+ <FileCard {...uploadResultFiles[0]} uploadStatus={status1} />
+ <FileCard {...uploadResultFiles[1]} uploadStatus={status2} />
+ <FileCard {...uploadResultFiles[2]} uploadStatus={status3} />
+ </FlexRowContainer>
+ </>
+ );
return (
<>
- <FlexRowContainer>
+ <FlexRowContainer title={"preparing stage"}>
<FileMosaic {...preparingFile} />
<FileMosaic {...preparingFile} onCancel={handleCancel} />
</FlexRowContainer>
- <FlexRowContainer>
+ <FlexRowContainer title={"uploading stage"}>
<FileMosaic {...uploadingFile} />
<FileMosaic {...uploadingFile} progress={progress} />
<FileMosaic {...uploadingFile} onAbort={handleAbort} />
@@ -80,7 +82,7 @@ const DemoFileMosaicUploadStatus = (props:{card?:boolean}) => {
/>
</FlexRowContainer>
- <FlexRowContainer>
+ <FlexRowContainer title={"upload result stage"}>
<FileMosaic {...uploadResultFiles[0]} uploadStatus={status1} />
<FileMosaic {...uploadResultFiles[1]} uploadStatus={status2} />
<FileMosaic {...uploadResultFiles[2]} uploadStatus={status3} />
@@ -90,19 +92,18 @@ const DemoFileMosaicUploadStatus = (props:{card?:boolean}) => {
};
export default DemoFileMosaicUploadStatus;
-const FlexRowContainer = (props: { children: React.ReactNode, card?:boolean }) => {
+const FlexRowContainer = (props: {
+ children: React.ReactNode;
+ card?: boolean;
+ title?:string
+}) => {
return (
- <div
- style={{
- display: "flex",
- flexWrap: "wrap",
- justifyContent: "space-evenly",
- width: "100%",
- flexDirection:props.card?"column":"row"
- }}
- >
- {props.children}
- </div>
+ <React.Fragment>
+ <TypeHighlight>{props.title}</TypeHighlight>
+ <DemoContainerFileMosaic card={props.card}>
+ {props.children}
+ </DemoContainerFileMosaic>
+ </React.Fragment>
);
};
diff --git a/src/pages/demo/FileCardDemoPage.jsx b/src/pages/demo/FileCardDemoPage.jsx
index 1e21a89..641e39c 100644
--- a/src/pages/demo/FileCardDemoPage.jsx
+++ b/src/pages/demo/FileCardDemoPage.jsx
@@ -65,7 +65,7 @@ const FileCardDemoPage = (props) => {
<DemoContainerFileMosaic>
<DemoFileCardBasic />
</DemoContainerFileMosaic>
- <CodeJSFileCardBasic card/>
+ <CodeJSFileCardBasic card />
<Alert severity="info">
<AlertTitle> FileInputButton </AlertTitle>
@@ -137,7 +137,8 @@ const FileCardDemoPage = (props) => {
<DemoFileMosaicValidation card />
</DemoContainerFileMosaic>
- <CodeJSFileMosaicValidation card/>
+ <CodeJSFileMosaicValidation card />
+
<Alert severity="info">
Typically, <CodeHighlight>{"<Dropzone/>"}</CodeHighlight> or{" "}
<CodeHighlight>{"<FileInputButton/>"}</CodeHighlight> components set
@@ -176,27 +177,16 @@ const FileCardDemoPage = (props) => {
the FileMosaic component.
</DescParagraph>
- <Paper
- variant="outlined"
- style={{
- padding: "25px",
- display: "flex",
- alignItems: "center",
- justifyContent: "center",
- flexDirection: "row",
- gap: "7px",
- flexWrap: "wrap",
- }}
- >
+ <DemoContainerFileMosaic card>
<DemoFileMosaicUploadStatus card />
- </Paper>
+ </DemoContainerFileMosaic>
<CodeJSFileMosaicUploadStatus card />
<Alert severity="info">
- As you can see, you have full control of the FileCard upload
- props. You can take advantage of them to ake your own upload
- function and show the user the progress.
+ As you can see, you have full control of the FileCard upload props.
+ You can take advantage of them to ake your own upload function and
+ show the user the progress.
<br /> On the other hand, you can also leverage the capability of{" "}
<CodeHighlight>{"<Dropzone/>"}</CodeHighlight> and{" "}
<CodeHighlight>{"<FileInputButton/>"}</CodeHighlight> components
@@ -230,12 +220,12 @@ const FileCardDemoPage = (props) => {
<Paper
variant="outlined"
style={{
- //padding: "25px",
+ padding: "25px",
display: "flex",
alignItems: "center",
justifyContent: "center",
- width: "100%",
- flexWrap:"wrap"
+ flexDirection: "column",
+ gap: "20px",
}}
>
<DemoFileMosaicDarkMode card />
--
GitLab