From 320799526c70b00a53636fbe63c60c81def3a6c3 Mon Sep 17 00:00:00 2001
From: Jose Manuel Serrano Amaut <a20122128@pucp.pe>
Date: Mon, 27 Feb 2023 03:09:21 -0500
Subject: [PATCH] [FEAT]: Add more demos in File Mosaic DemoPage: Image
previeww, validation and upload status
---
bugs.md | 2 +
.../filemosaic-demo/CodeJSFileMosaicBasic.jsx | 61 ++++++-
.../CodeJSFileMosaicImagePreview.tsx | 117 ++++++++++++++
.../CodeJSFileMosaicUploadStatus.jsx | 149 ++++++++++++++++++
.../CodeJSFileMosaicValidation.jsx | 149 ++++++++++++++++++
.../DemoContainerFileMosaic.jsx | 27 ++++
.../filemosaic-demo/DemoFileMosaicBasic.jsx | 10 +-
.../DemoFileMosaicImagePreview.tsx | 44 ++++++
.../DemoFileMosaicUploadStatus.tsx | 114 ++++++++++++++
.../DemoFileMosaicValidation.jsx | 36 +++++
src/pages/demo/FileMosaicDemoPage.jsx | 100 ++++++++----
11 files changed, 772 insertions(+), 37 deletions(-)
create mode 100644 src/components/demo-components/filemosaic-demo/CodeJSFileMosaicImagePreview.tsx
create mode 100644 src/components/demo-components/filemosaic-demo/CodeJSFileMosaicUploadStatus.jsx
create mode 100644 src/components/demo-components/filemosaic-demo/CodeJSFileMosaicValidation.jsx
create mode 100644 src/components/demo-components/filemosaic-demo/DemoContainerFileMosaic.jsx
create mode 100644 src/components/demo-components/filemosaic-demo/DemoFileMosaicImagePreview.tsx
create mode 100644 src/components/demo-components/filemosaic-demo/DemoFileMosaicUploadStatus.tsx
create mode 100644 src/components/demo-components/filemosaic-demo/DemoFileMosaicValidation.jsx
diff --git a/bugs.md b/bugs.md
index 6ff2e90..b16d2d1 100644
--- a/bugs.md
+++ b/bugs.md
@@ -2,6 +2,8 @@
## File Item (mosaic)
+- on change progress the loader is reredered again and again, I think that the 3 states or layers must be there from the begining
+ "preparing", "uploading", "result" - on cancel, the 2nd layer will dissapear, it will not be any big deal
- After uploading, progress must be reiitialized to 0
- [SOLVED] FileiTEMmAINlAYER WORKS STRANGE AT THE TIME NEW fILEiTEM IS ADDED
- Fileptions (menu collapsed from click in option icon)
diff --git a/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicBasic.jsx b/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicBasic.jsx
index 0e787e9..87c1d8f 100644
--- a/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicBasic.jsx
+++ b/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicBasic.jsx
@@ -22,7 +22,15 @@ const splittedCodeJS = `<>
<FileInputButton onChange={updateFile} />
)}
<FileMosaic {...sampleFileProps} alwaysActive info />
-</>`;
+</>
+
+// file props
+const sampleFileProps = {
+ id: ":0:",
+ size: 28 * 1024 * 1024,
+ type: "plain/javascript",
+ name: "file created from props.jsx",
+};`;
const completeCodeJS = `import * as React from "react";
import { InputButton, FileMosaic } from "@files-ui/react";
@@ -31,7 +39,7 @@ const sampleFileProps = {
id: ":0:",
size: 28 * 1024 * 1024,
type: "plain/javascript",
- name: "fileeeeee.jsx",
+ name: "file created from props.jsx",
};
export default function App() {
@@ -56,5 +64,50 @@ export default function App() {
);
};`;
-const completeCodeTS = completeCodeJS;
-const splittedCodeTS = splittedCodeJS;
+const splittedCodeTS = `<>
+ {value ? (
+ <FileMosaic {...value} onDelete={removeFile} alwaysActive info />
+ ) : (
+ <FileInputButton onChange={updateFile} />
+ )}
+ <FileMosaic {...sampleFileProps} alwaysActive info />
+</>
+
+// file props
+const sampleFileProps: ExtFile = {
+ id: ":0:",
+ size: 28 * 1024 * 1024,
+ type: "plain/javascript",
+ name: "file created from props.jsx",
+};`;
+const completeCodeTS = `import * as React from "react";
+import { InputButton, FileMosaic, ExtFile } from "@files-ui/react";
+
+const sampleFileProps:ExtFile = {
+ id: ":0:",
+ size: 28 * 1024 * 1024,
+ type: "plain/javascript",
+ name: "file created from props.jsx",
+};
+
+export default function App() {
+ const [value, setValue] = React.useState<ExtFile | undefined>(undefined);
+
+ const updateFiles = (incommingFiles:ExtFile[]) => {
+ console.log("incomming extFiles", incommingFiles);
+ setValue(incommingFiles[0]);
+ };
+ const removeFile = () => {
+ setValue(undefined);
+ };
+ return (
+ <div style={{display:"flex", gap:"10px"}}>
+ {value ? (
+ <FileMosaic {...value} onDelete={removeFile} alwaysActive info />
+ ) : (
+ <FileInputButton onChange={updateFile} />
+ )}
+ <FileMosaic {...sampleFileProps} alwaysActive info />
+ </div>
+ );
+};`;
diff --git a/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicImagePreview.tsx b/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicImagePreview.tsx
new file mode 100644
index 0000000..2c64abf
--- /dev/null
+++ b/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicImagePreview.tsx
@@ -0,0 +1,117 @@
+import * as React from "react";
+import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
+
+const CodeJSFileMosaicImagePreview = () => {
+ return (
+ <ShowDemoCode
+ 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 CodeJSFileMosaicImagePreview;
+
+const splittedCodeJS = `<>
+ {value ? (
+ <FileMosaic {...value} onDelete={removeFile} alwaysActive info preview/>
+ ) : (
+ <FileInputButton onChange={updateFile} accept="image/*"/>
+ )}
+ <FileMosaic {...sampleFileProps} alwaysActive info />
+</>
+
+// file props
+const sampleFileProps = {
+ id: "fileId",
+ size: 28 * 1024 * 1024,
+ type: "image/gif",
+ name: "Thor arrives wakanda.jpg",
+ imageUrl:"https://cdn.wallpapersafari.com/0/95/1zms6H.jpg"
+};`;
+
+const completeCodeJS = `import * as React from "react";
+import { InputButton, FileMosaic } from "@files-ui/react";
+
+const sampleFileProps = {
+ id: "fileId",
+ size: 28 * 1024 * 1024,
+ type: "image/gif",
+ name: "Thor arrives wakanda.jpg",
+ imageUrl:"https://cdn.wallpapersafari.com/0/95/1zms6H.jpg"
+};
+
+export default function App() {
+ const [value, setValue] = React.useState(undefined);
+
+ const updateFiles = (incommingFiles) => {
+ console.log("incomming extFiles", incommingFiles);
+ setValue(incommingFiles[0]);
+ };
+ const removeFile = () => {
+ setValue(undefined);
+ };
+ return (
+ <div style={{display:"flex", gap:"10px"}}>
+ {value ? (
+ <FileMosaic {...value} onDelete={removeFile} alwaysActive info preview/>
+ ) : (
+ <FileInputButton onChange={updateFile} accept="image/*"/>
+ )}
+ <FileMosaic {...sampleFileProps} alwaysActive info />
+ </div>
+ );
+};`;
+
+const splittedCodeTS = `<>
+{value ? (
+ <FileMosaic {...value} onDelete={removeFile} alwaysActive info preview/>
+) : (
+ <FileInputButton onChange={updateFile} accept="image/*"/>
+)}
+<FileMosaic {...sampleFileProps} alwaysActive info />
+</>
+
+// file props
+const sampleFileProps: ExtFile = {
+ id: "fileId",
+ size: 28 * 1024 * 1024,
+ type: "image/gif",
+ name: "Thor arrives wakanda.jpg",
+ imageUrl:"https://cdn.wallpapersafari.com/0/95/1zms6H.jpg"
+};`;
+const completeCodeTS = `import * as React from "react";
+import { InputButton, FileMosaic, ExtFile } from "@files-ui/react";
+
+const sampleFileProps: ExtFile = {
+ id: "fileId",
+ size: 28 * 1024 * 1024,
+ type: "image/gif",
+ name: "Thor arrives wakanda.jpg",
+ imageUrl:"https://cdn.wallpapersafari.com/0/95/1zms6H.jpg"
+};
+
+export default function App() {
+ const [value, setValue] = React.useState<ExtFile | undefined>(undefined);
+
+ const updateFiles = (incommingFiles:ExtFile[]) => {
+ console.log("incomming extFiles", incommingFiles);
+ setValue(incommingFiles[0]);
+ };
+ const removeFile = () => {
+ setValue(undefined);
+ };
+ return (
+ <div style={{display:"flex", gap:"10px"}}>
+ {value ? (
+ <FileMosaic {...value} onDelete={removeFile} alwaysActive info preview/>
+ ) : (
+ <FileInputButton onChange={updateFile} accept="image/*"/>
+ )}
+ <FileMosaic {...sampleFileProps} alwaysActive info />
+ </div>
+ );
+};`;
diff --git a/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicUploadStatus.jsx b/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicUploadStatus.jsx
new file mode 100644
index 0000000..bc7027d
--- /dev/null
+++ b/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicUploadStatus.jsx
@@ -0,0 +1,149 @@
+import * as React from "react";
+import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
+
+const CodeJSFileMosaicUploadStatus = () => {
+ return (
+ <ShowDemoCode
+ 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 CodeJSFileMosaicUploadStatus;
+
+const splittedCodeJS = `<>
+ {sampleFilesProps.map((extFile) => (
+ <FileMosaic key={extFile.id} {...extFile} alwaysActive info preview />
+ ))}
+</>
+
+// file props
+const sampleFilesProps = [
+ {
+ id: "fileId-1",
+ size: 28 * 1024 * 1024,
+ type: "plain/javascript",
+ name: "file created from props.jsx",
+ },
+ {
+ id: "fileId-2",
+ size: 28 * 1024 * 1024,
+ type: "image/png",
+ name: "valid file created from props.png",
+ valid: true,
+ },
+ {
+ id: "fileId-3",
+ size: 28 * 1024 * 1024,
+ type: "image/jpeg",
+ name: "non valid file created from props.jpg",
+ valid: false,
+ },
+];`;
+
+const completeCodeJS = `import * as React from "react";
+import { FileMosaic } from "../../../files-ui";
+
+const sampleFilesProps = [
+ {
+ id: "fileId-1",
+ size: 28 * 1024 * 1024,
+ type: "plain/javascript",
+ name: "file created from props.jsx",
+ },
+ {
+ id: "fileId-2",
+ size: 28 * 1024 * 1024,
+ type: "image/png",
+ name: "valid file created from props.png",
+ valid: true,
+ },
+ {
+ id: "fileId-3",
+ size: 28 * 1024 * 1024,
+ type: "image/jpeg",
+ name: "non valid file created from props.jpg",
+ valid: false,
+ },
+];
+
+const DemoFileMosaicValidation = () => {
+ return (
+ <>
+ {sampleFilesProps.map((extFile) => (
+ <FileMosaic key={extFile.id} {...extFile} alwaysActive info preview />
+ ))}
+ </>
+ );
+};
+export default DemoFileMosaicValidation;`;
+
+const splittedCodeTS = `<>
+ {sampleFilesProps.map((extFile:ExtFile) => (
+ <FileMosaic key={extFile.id} {...extFile} alwaysActive info preview />
+ ))}
+</>
+
+// file props
+const sampleFilesProps:ExtFile[] = [
+ {
+ id: "fileId-1",
+ size: 28 * 1024 * 1024,
+ type: "plain/javascript",
+ name: "file created from props.jsx",
+ },
+ {
+ id: "fileId-2",
+ size: 28 * 1024 * 1024,
+ type: "image/png",
+ name: "valid file created from props.png",
+ valid: true,
+ },
+ {
+ id: "fileId-3",
+ size: 28 * 1024 * 1024,
+ type: "image/jpeg",
+ name: "non valid file created from props.jpg",
+ valid: false,
+ },
+];`;
+const completeCodeTS = `import * as React from "react";
+import { FileMosaic, ExtFile } from "../../../files-ui";
+
+const sampleFilesProps: ExtFile[] = [
+ {
+ id: "fileId-1",
+ size: 28 * 1024 * 1024,
+ type: "plain/javascript",
+ name: "file created from props.jsx",
+ },
+ {
+ id: "fileId-2",
+ size: 28 * 1024 * 1024,
+ type: "image/png",
+ name: "valid file created from props.png",
+ valid: true,
+ },
+ {
+ id: "fileId-3",
+ size: 28 * 1024 * 1024,
+ type: "image/jpeg",
+ name: "non valid file created from props.jpg",
+ valid: false,
+ },
+];
+
+const DemoFileMosaicValidation = () => {
+ return (
+ <>
+ {sampleFilesProps.map((extFile: ExtFile) => (
+ <FileMosaic key={extFile.id} {...extFile} alwaysActive info preview />
+ ))}
+ </>
+ );
+};
+export default DemoFileMosaicValidation;`;
diff --git a/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicValidation.jsx b/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicValidation.jsx
new file mode 100644
index 0000000..77645d3
--- /dev/null
+++ b/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicValidation.jsx
@@ -0,0 +1,149 @@
+import * as React from "react";
+import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
+
+const CodeJSFileMosaicValidation = () => {
+ return (
+ <ShowDemoCode
+ 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 CodeJSFileMosaicValidation;
+
+const splittedCodeJS = `<>
+ {sampleFilesProps.map((extFile) => (
+ <FileMosaic key={extFile.id} {...extFile} alwaysActive info preview />
+ ))}
+</>
+
+// file props
+const sampleFilesProps = [
+ {
+ id: "fileId-1",
+ size: 28 * 1024 * 1024,
+ type: "plain/javascript",
+ name: "file created from props.jsx",
+ },
+ {
+ id: "fileId-2",
+ size: 28 * 1024 * 1024,
+ type: "image/png",
+ name: "valid file created from props.png",
+ valid: true,
+ },
+ {
+ id: "fileId-3",
+ size: 28 * 1024 * 1024,
+ type: "image/jpeg",
+ name: "non valid file created from props.jpg",
+ valid: false,
+ },
+];`;
+
+const completeCodeJS = `import * as React from "react";
+import { FileMosaic } from "../../../files-ui";
+
+const sampleFilesProps = [
+ {
+ id: "fileId-1",
+ size: 28 * 1024 * 1024,
+ type: "plain/javascript",
+ name: "file created from props.jsx",
+ },
+ {
+ id: "fileId-2",
+ size: 28 * 1024 * 1024,
+ type: "image/png",
+ name: "valid file created from props.png",
+ valid: true,
+ },
+ {
+ id: "fileId-3",
+ size: 28 * 1024 * 1024,
+ type: "image/jpeg",
+ name: "non valid file created from props.jpg",
+ valid: false,
+ },
+];
+
+const DemoFileMosaicValidation = () => {
+ return (
+ <>
+ {sampleFilesProps.map((extFile) => (
+ <FileMosaic key={extFile.id} {...extFile} alwaysActive info preview />
+ ))}
+ </>
+ );
+};
+export default DemoFileMosaicValidation;`;
+
+const splittedCodeTS = `<>
+ {sampleFilesProps.map((extFile:ExtFile) => (
+ <FileMosaic key={extFile.id} {...extFile} alwaysActive info preview />
+ ))}
+</>
+
+// file props
+const sampleFilesProps:ExtFile[] = [
+ {
+ id: "fileId-1",
+ size: 28 * 1024 * 1024,
+ type: "plain/javascript",
+ name: "file created from props.jsx",
+ },
+ {
+ id: "fileId-2",
+ size: 28 * 1024 * 1024,
+ type: "image/png",
+ name: "valid file created from props.png",
+ valid: true,
+ },
+ {
+ id: "fileId-3",
+ size: 28 * 1024 * 1024,
+ type: "image/jpeg",
+ name: "non valid file created from props.jpg",
+ valid: false,
+ },
+];`;
+const completeCodeTS = `import * as React from "react";
+import { FileMosaic, ExtFile } from "../../../files-ui";
+
+const sampleFilesProps: ExtFile[] = [
+ {
+ id: "fileId-1",
+ size: 28 * 1024 * 1024,
+ type: "plain/javascript",
+ name: "file created from props.jsx",
+ },
+ {
+ id: "fileId-2",
+ size: 28 * 1024 * 1024,
+ type: "image/png",
+ name: "valid file created from props.png",
+ valid: true,
+ },
+ {
+ id: "fileId-3",
+ size: 28 * 1024 * 1024,
+ type: "image/jpeg",
+ name: "non valid file created from props.jpg",
+ valid: false,
+ },
+];
+
+const DemoFileMosaicValidation = () => {
+ return (
+ <>
+ {sampleFilesProps.map((extFile: ExtFile) => (
+ <FileMosaic key={extFile.id} {...extFile} alwaysActive info preview />
+ ))}
+ </>
+ );
+};
+export default DemoFileMosaicValidation;`;
diff --git a/src/components/demo-components/filemosaic-demo/DemoContainerFileMosaic.jsx b/src/components/demo-components/filemosaic-demo/DemoContainerFileMosaic.jsx
new file mode 100644
index 0000000..623359b
--- /dev/null
+++ b/src/components/demo-components/filemosaic-demo/DemoContainerFileMosaic.jsx
@@ -0,0 +1,27 @@
+import { Paper, Stack } from "@mui/material";
+import * as React from "react";
+
+const DemoContainerFileMosaic = ({ children }) => {
+ return (
+ <Paper
+ variant="outlined"
+ style={{
+ padding: "25px",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ }}
+ >
+ <Stack
+ spacing={4}
+ direction="row"
+ alignItems={"center"}
+ flexWrap="wrap"
+ justifyContent={"space-evenly"}
+ >
+ {children}
+ </Stack>
+ </Paper>
+ );
+};
+export default DemoContainerFileMosaic;
diff --git a/src/components/demo-components/filemosaic-demo/DemoFileMosaicBasic.jsx b/src/components/demo-components/filemosaic-demo/DemoFileMosaicBasic.jsx
index 74e1b70..3f9bf1d 100644
--- a/src/components/demo-components/filemosaic-demo/DemoFileMosaicBasic.jsx
+++ b/src/components/demo-components/filemosaic-demo/DemoFileMosaicBasic.jsx
@@ -2,10 +2,10 @@ import * as React from "react";
import { FileInputButton, FileMosaic } from "../../../files-ui";
const sampleFileProps = {
- id: ":0:",
+ id: "fileId",
size: 28 * 1024 * 1024,
type: "plain/javascript",
- name: "fileeeeee.jsx",
+ name: "file created from props.jsx",
};
const DemoFileMosaicBasic = (props) => {
const [value, setValue] = React.useState(undefined);
@@ -21,11 +21,11 @@ const DemoFileMosaicBasic = (props) => {
return (
<>
{value ? (
- <FileMosaic {...value} onDelete={removeFile} alwaysActive info />
+ <FileMosaic {...value} onDelete={removeFile} alwaysActive info preview/>
) : (
- <FileInputButton onChange={updateFile} />
+ <FileInputButton value={value?[value]:[]} onChange={updateFile} />
)}
- <FileMosaic {...sampleFileProps} alwaysActive info />
+ <FileMosaic {...sampleFileProps} alwaysActive info preview/>
</>
);
};
diff --git a/src/components/demo-components/filemosaic-demo/DemoFileMosaicImagePreview.tsx b/src/components/demo-components/filemosaic-demo/DemoFileMosaicImagePreview.tsx
new file mode 100644
index 0000000..5d57524
--- /dev/null
+++ b/src/components/demo-components/filemosaic-demo/DemoFileMosaicImagePreview.tsx
@@ -0,0 +1,44 @@
+import * as React from "react";
+import { FileInputButton, FileMosaic } from "../../../files-ui";
+import { ExtFile } from "../../../files-ui/core";
+
+interface DemoFileMosaicImagePreviewProps {}
+
+const sampleFileProps: ExtFile = {
+ id: "fileId",
+ size: 28 * 1024 * 1024,
+ type: "image/jpeg",
+ name: "Thor arrives wakanda.jpg",
+ imageUrl: "https://cdn.wallpapersafari.com/0/95/1zms6H.jpg",
+};
+const DemoFileMosaicImagePreview: React.FC<DemoFileMosaicImagePreviewProps> = (
+ props: DemoFileMosaicImagePreviewProps
+) => {
+ const [value, setValue] = React.useState<ExtFile | undefined>(undefined);
+
+ const updateFile = (incommingFiles: ExtFile[]) => {
+ console.log("incomming extFiles", incommingFiles);
+ setValue(incommingFiles[0]);
+ };
+
+ const removeFile = () => {
+ setValue(undefined);
+ };
+ return (
+ <>
+ {value ? (
+ <FileMosaic
+ {...value}
+ onDelete={removeFile}
+ alwaysActive
+ info
+ preview
+ />
+ ) : (
+ <FileInputButton value={value ? [value] : []} onChange={updateFile} />
+ )}
+ <FileMosaic {...sampleFileProps} alwaysActive info />
+ </>
+ );
+};
+export default DemoFileMosaicImagePreview;
diff --git a/src/components/demo-components/filemosaic-demo/DemoFileMosaicUploadStatus.tsx b/src/components/demo-components/filemosaic-demo/DemoFileMosaicUploadStatus.tsx
new file mode 100644
index 0000000..99f8aed
--- /dev/null
+++ b/src/components/demo-components/filemosaic-demo/DemoFileMosaicUploadStatus.tsx
@@ -0,0 +1,114 @@
+import * as React from "react";
+import { FileMosaic } from "../../../files-ui";
+import { ExtFile } from "../../../files-ui/core";
+const preparingFiles: ExtFile[] = [
+ {
+ id: "fileId-1",
+ size: 28 * 1024 * 1024,
+ type: "plain/javascript",
+ name: "default preparing file.jsx",
+ uploadStatus: "preparing",
+ },
+ {
+ id: "fileId-2",
+ size: 28 * 1024 * 1024,
+ type: "plain/javascript",
+ name: "preparing file that can be stopped.jsx",
+ uploadStatus: "preparing",
+ },
+];
+const uploadingFiles: ExtFile[] = [
+ {
+ size: 28 * 1024 * 1024,
+ type: "image/png",
+ name: "non abortable with no specific progress.png",
+ valid: true,
+ uploadStatus: "uploading",
+ },
+ {
+ size: 28 * 1024 * 1024,
+ type: "image/png",
+ name: "non abortable with specific progress.png",
+ valid: true,
+ uploadStatus: "uploading",
+ progress: 56,
+ },
+ {
+ size: 28 * 1024 * 1024,
+ type: "image/png",
+ name: "abortable with no specific progress.png",
+ valid: true,
+ uploadStatus: "uploading",
+ },
+ {
+ size: 28 * 1024 * 1024,
+ type: "image/png",
+ name: "abortable with specific progress.png",
+ valid: true,
+ uploadStatus: "uploading",
+ progress: 56,
+ },
+];
+const uploadResulFiles: ExtFile[] = [
+ {
+ size: 28 * 1024 * 1024,
+ type: "image/jpeg",
+ name: "non valid file created from props.jpg",
+ uploadStatus: "aborted",
+ uploadMessage: "Upload was aborted by the user",
+ },
+ {
+ size: 28 * 1024 * 1024,
+ type: "image/jpeg",
+ name: "non valid file created from props.jpg",
+ uploadStatus: "error",
+ uploadMessage:
+ "File couldn't be uploaded to Files-ui earthquakes. File was too big.",
+ },
+ {
+ size: 28 * 1024 * 1024,
+ type: "image/jpeg",
+ name: "non valid file created from props.jpg",
+ uploadStatus: "success",
+ uploadMessage: "File was uploaded correctly to Files-ui earthquakes",
+ },
+];
+const FlexRowContainer = (props: { children: React.ReactNode }) => {
+ return (
+ <div
+ style={{
+ display: "flex",
+ flexWrap: "wrap",
+ justifyContent: "space-evenly",
+ width: "100%",
+ }}
+ >
+ {props.children}
+ </div>
+ );
+};
+const DemoFileMosaicUploadStatus = () => {
+ return (
+ <>
+ <FlexRowContainer>
+ <FileMosaic {...preparingFiles[0]} />
+ <FileMosaic {...preparingFiles[1]} onCancel={() => {}} />
+ </FlexRowContainer>
+
+ <FlexRowContainer>
+ <FileMosaic {...uploadingFiles[0]} />
+ <FileMosaic {...uploadingFiles[0]} progress={70} />
+ <FileMosaic {...uploadingFiles[2]} onAbort={() => {}} />
+ <FileMosaic {...uploadingFiles[3]} onAbort={()=>{}}/>
+ </FlexRowContainer>
+
+ <FlexRowContainer>
+ <FileMosaic {...uploadResulFiles[0]} resultOnTooltip/>
+ <FileMosaic {...uploadResulFiles[1]} resultOnTooltip/>
+ <FileMosaic {...uploadResulFiles[2]} resultOnTooltip/>
+ <FileMosaic {...uploadResulFiles[3]} resultOnTooltip/>
+ </FlexRowContainer>
+ </>
+ );
+};
+export default DemoFileMosaicUploadStatus;
diff --git a/src/components/demo-components/filemosaic-demo/DemoFileMosaicValidation.jsx b/src/components/demo-components/filemosaic-demo/DemoFileMosaicValidation.jsx
new file mode 100644
index 0000000..6470472
--- /dev/null
+++ b/src/components/demo-components/filemosaic-demo/DemoFileMosaicValidation.jsx
@@ -0,0 +1,36 @@
+import * as React from "react";
+import { FileMosaic } from "../../../files-ui";
+
+const sampleFilesProps = [
+ {
+ id: "fileId-1",
+ size: 28 * 1024 * 1024,
+ type: "plain/javascript",
+ name: "file created from props.jsx",
+ },
+ {
+ id: "fileId-2",
+ size: 28 * 1024 * 1024,
+ type: "image/png",
+ name: "valid file created from props.png",
+ valid: true,
+ },
+ {
+ id: "fileId-3",
+ size: 28 * 1024 * 1024,
+ type: "image/jpeg",
+ name: "non valid file created from props.jpg",
+ valid: false,
+ },
+];
+
+const DemoFileMosaicValidation = () => {
+ return (
+ <>
+ {sampleFilesProps.map((extFile) => (
+ <FileMosaic key={extFile.id} {...extFile} alwaysActive info preview />
+ ))}
+ </>
+ );
+};
+export default DemoFileMosaicValidation;
diff --git a/src/pages/demo/FileMosaicDemoPage.jsx b/src/pages/demo/FileMosaicDemoPage.jsx
index 2ad4a6d..c1689c9 100644
--- a/src/pages/demo/FileMosaicDemoPage.jsx
+++ b/src/pages/demo/FileMosaicDemoPage.jsx
@@ -16,6 +16,13 @@ import AnchorToTab from "../../components/util-components/AnchorToTab";
import CodeJSFileMosaicBasic from "../../components/demo-components/filemosaic-demo/CodeJSFileMosaicBasic";
import DemoFileMosaicBasic from "../../components/demo-components/filemosaic-demo/DemoFileMosaicBasic";
+import DemoFileMosaicImagePreview from "../../components/demo-components/filemosaic-demo/DemoFileMosaicImagePreview";
+import CodeJSFileMosaicImagePreview from "../../components/demo-components/filemosaic-demo/CodeJSFileMosaicImagePreview";
+import DemoContainerFileMosaic from "../../components/demo-components/filemosaic-demo/DemoContainerFileMosaic";
+import CodeJSFileMosaicValidation from "../../components/demo-components/filemosaic-demo/CodeJSFileMosaicValidation";
+import DemoFileMosaicValidation from "../../components/demo-components/filemosaic-demo/DemoFileMosaicValidation";
+import CodeJSFileMosaicUploadStatus from "../../components/demo-components/filemosaic-demo/CodeJSFileMosaicUploadStatus";
+import DemoFileMosaicUploadStatus from "../../components/demo-components/filemosaic-demo/DemoFileMosaicUploadStatus";
const FileMosaicDemoPage = (props) => {
return (
@@ -50,21 +57,20 @@ const FileMosaicDemoPage = (props) => {
object or from individual props.
</DescParagraph>
- <Paper
- variant="outlined"
- style={{
- padding: "25px",
- display: "flex",
- alignItems: "center",
- justifyContent: "center",
- }}
- >
- <Stack spacing={10} direction="row" alignItems={"center"}>
- <DemoFileMosaicBasic />
- </Stack>
- </Paper>
+ <DemoContainerFileMosaic>
+ <DemoFileMosaicBasic />
+ </DemoContainerFileMosaic>
<CodeJSFileMosaicBasic />
+
+ <Alert severity="info">
+ <AlertTitle> FileInputButton </AlertTitle>
+ For completeness, some of these examples include{" "}
+ <CodeHighlight>{`<FileInputButton/>`} </CodeHighlight>
+ component for allowing the user to select files. For further
+ information of this component check out the{" "}
+ <a href="/components/fileinputbutton">FileInputButton</a> page.
+ </Alert>
</section>
<section id="image-preview">
@@ -77,18 +83,21 @@ const FileMosaicDemoPage = (props) => {
given.
</DescParagraph>
- <Paper variant="outlined" style={{ padding: "25px" }}>
- {/* <BasicDemoDropzone /> */}
- </Paper>
+ <DemoContainerFileMosaic>
+ <DemoFileMosaicImagePreview />
+ </DemoContainerFileMosaic>
- {/* <BasicDropzoneCodeJS /> */}
+ <CodeJSFileMosaicImagePreview />
<Alert severity="info">
- <AlertTitle> FileInputButton </AlertTitle>
- For completeness, some of these examples include{" "}
- <CodeHighlight>{`<FileInputButton/>`} </CodeHighlight>
- component for allowing the user to select files. For further
- information of this component check out the{" "}
- <a href="/components/fileinputbutton">FileInputButton</a> page.
+ As you can notice, when
+ <CodeHighlight>{`imageUrl`}</CodeHighlight> prop is present, the{" "}
+ <CodeHighlight>{`preview`}</CodeHighlight> prop is not needed since
+ it has more priority.
+ <br />
+ On the other side, for displaying an image preview as a result of
+ reading an image File it is necesary to set the{" "}
+ <CodeHighlight>{`preview`}</CodeHighlight> prop, otherwise a default
+ image preview will be shown.
</Alert>
</section>
<section id="validation">
@@ -97,14 +106,49 @@ const FileMosaicDemoPage = (props) => {
The <CodeHighlight>valid</CodeHighlight> prop can be set to{" "}
<TypeHighlight>true</TypeHighlight>,{" "}
<TypeHighlight>false</TypeHighlight> or{" "}
- <TypeHighlight>undefined</TypeHighlight>
+ <TypeHighlight>undefined</TypeHighlight>.
+ </DescParagraph>
+
+ <DemoContainerFileMosaic>
+ <DemoFileMosaicValidation />
+ </DemoContainerFileMosaic>
+
+ <CodeJSFileMosaicValidation />
+ </section>
+
+ <section id="uploading">
+ <SubTitle content="Uploading status" />
+ <DescParagraph>
+ The <CodeHighlight>uploadStatus</CodeHighlight> prop can be set to{" "}
+ <TypeHighlight>"preparing"</TypeHighlight>,{" "}
+ <TypeHighlight>"uploading"</TypeHighlight>,{" "}
+ <TypeHighlight>"aborted"</TypeHighlight>,{" "}
+ <TypeHighlight>"error"</TypeHighlight> or{" "}
+ <TypeHighlight>"success"</TypeHighlight>. Also the{" "}
+ <CodeHighlight>uploadMessage</CodeHighlight> prop is used for
+ displaying the error or success message and the{" "}
+ <CodeHighlight>progress</CodeHighlight> prop can be used to show the
+ current progress of the upload process.
+ <br />
+ Each of the following examples demonstrates one state combination of
+ the FileMosaic component.
</DescParagraph>
- <Paper variant="outlined" style={{ padding: "25px" }}>
- {/* <BasicDemoDropzone /> */}
+ <Paper
+ variant="outlined"
+ style={{
+ padding: "25px",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ flexDirection: "column",
+ gap: "7px",
+ }}
+ >
+ <DemoFileMosaicUploadStatus />
</Paper>
- <p></p>
- {/* <BasicDropzoneCodeJS /> */}
+
+ <CodeJSFileMosaicUploadStatus />
</section>
</MainContentContainer>
<RightMenuContainer>
--
GitLab