diff --git a/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicDarkMode.tsx b/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicDarkMode.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..bdcbb484ce16bc7fc4909584fca2b957666c800d
--- /dev/null
+++ b/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicDarkMode.tsx
@@ -0,0 +1,111 @@
+import * as React from "react";
+import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
+
+const CodeJSFileMosaicDarkMode = () => {
+ 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 CodeJSFileMosaicDarkMode;
+
+const splittedCodeJS = `<>
+ <FileMosaic {...sampleFileProps} info onDelete={removeFile} />
+ <FileMosaic {...sampleFileProps} info onDelete={removeFile} darkMode/>
+</>`;
+const splittedCodeTS = `<>
+<FileMosaic {...sampleFileProps} info onDelete={removeFile} />
+<FileMosaic {...sampleFileProps} info onDelete={removeFile} darkMode/>
+</>`;
+
+const completeCodeJS = `import * as React from "react";
+import { FileMosaic } from "@files-ui/react";
+
+const sampleFileProps = {
+ id: "fileId",
+ size: 28 * 1024 * 1024,
+ type: "text/plain",
+ name: "file created from props.jsx",
+};
+const DemoFileMosaicDarkMode = () => {
+ const removeFile = (id) => {
+ console.log("delete button clicked on file: " + id);
+ };
+ return (
+ <>
+ <div
+ style={{
+ display: "flex",
+ justifyContent: "center",
+ width: "50%",
+ backgroundColor: "white",
+ padding: "10px 0",
+ }}
+ >
+ <FileMosaic {...sampleFileProps} info onDelete={removeFile} />
+ </div>
+ <div
+ style={{
+ display: "flex",
+ justifyContent: "center",
+ width: "50%",
+ backgroundColor: "#121212",
+ padding: "10px 0",
+ }}
+ >
+ <FileMosaic {...sampleFileProps} info darkMode onDelete={removeFile} />
+ </div>
+ </>
+ );
+};
+export default DemoFileMosaicDarkMode;
+`;
+
+const completeCodeTS = `import * as React from "react";
+import { ExtFile, FileMosaic } from "@files-ui/react";
+
+const sampleFileProps: ExtFile = {
+ id: "fileId",
+ size: 28 * 1024 * 1024,
+ type: "text/plain",
+ name: "file created from props.jsx",
+};
+const DemoFileMosaicDarkMode = () => {
+ const removeFile = (id: string | number | undefined) => {
+ console.log("delete button clicked on file: " + id);
+ };
+ return (
+ <>
+ <div
+ style={{
+ display: "flex",
+ justifyContent: "center",
+ width: "50%",
+ backgroundColor: "white",
+ padding: "10px 0",
+ }}
+ >
+ <FileMosaic {...sampleFileProps} info onDelete={removeFile} />
+ </div>
+ <div
+ style={{
+ display: "flex",
+ justifyContent: "center",
+ width: "50%",
+ backgroundColor: "#121212",
+ padding: "10px 0",
+ }}
+ >
+ <FileMosaic {...sampleFileProps} info darkMode onDelete={removeFile} />
+ </div>
+ </>
+ );
+};
+export default DemoFileMosaicDarkMode;
+`;
diff --git a/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicLocalization.jsx b/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicLocalization.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..a4d570d98170ed6cfeb3917a65597e1776ea5f9b
--- /dev/null
+++ b/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicLocalization.jsx
@@ -0,0 +1,266 @@
+import * as React from "react";
+import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
+
+const CodeJSFileMosaicLocalization = (props) => {
+ 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 CodeJSFileMosaicLocalization;
+
+const splittedCodeJS = ``;
+const splittedCodeTS = ``;
+
+
+const completeCodeJS = `import * as React from "react";
+import { FileMosaic } from "@files-ui/react";
+import { Autocomplete, TextField } from "@mui/material";
+
+const DemoFileMosaicLocalization = () => {
+ const [localization, setLocalization] = React.useState(undefined);
+
+ const hadleSelect = (value) => {
+ console.log(value);
+ setLocalization(value?.value);
+ };
+ return (
+ <>
+ <Autocomplete
+ disablePortal
+ autoSelect
+ size="small"
+ onChange={(e, value) => hadleSelect(value)}
+ id="combo-box-demo"
+ options={languages}
+ sx={{ width: 300 }}
+ getOptionLabel={(option) => option.language}
+ renderInput={(params) => <TextField {...params} label="Localization" />}
+ />
+ <div
+ style={{
+ display: "flex",
+ flexWrap: "wrap",
+ justifyContent: "space-evenly",
+ width: "100%",
+ gap: "50px",
+ }}
+ >
+ {extFiles.map((extFile, index) => (
+ <FileMosaic
+ key={index}
+ {...extFile}
+ localization={localization}
+ onDelete={() => {}}
+ info
+ />
+ ))}
+ </div>
+ </>
+ );
+};
+export default DemoFileMosaicLocalization;
+
+const languages = [
+ { language: "Español: ES-es", value: "ES-es" },
+ { language: "English: EN-en", value: "EN-en" },
+ { language: "French: FR-fr", value: "FR-fr" },
+ { language: "Italian: IT-it", value: "IT-it" },
+ { language: "Portuguese: PT-pt", value: "PT-pt" },
+ { language: "Russian: RU-ru", value: "RU-ru" },
+ { language: "Chinese(simplified): ZH-cn", value: "ZH-cn" },
+ { language: "Chinese(traditional): ZH-hk", value: "ZH-hk" },
+];
+const extFiles = [
+ {
+ id: 0,
+ name: "file_localization.docx",
+ size: 28 * 1024,
+ errors: ["pdf not allowed", "file is too big"],
+ },
+ {
+ id: 1,
+ valid: false,
+ name: "file_localization.docx",
+
+ size: 28 * 1024,
+ errors: ["pdf not allowed", "file is too big"],
+ },
+ {
+ id: 2,
+ valid: true,
+ name: "file_localization.docx",
+ size: 28 * 1024,
+ },
+ {
+ id: 3,
+ valid: true,
+ name: "file_localization.docx",
+ size: 28 * 1024,
+ uploadStatus: "preparing",
+ },
+ {
+ id: 4,
+ name: "file_localization.docx",
+ size: 28 * 1024,
+ uploadStatus: "uploading",
+ progress: 28,
+ },
+ {
+ id: 5,
+ valid: true,
+ name: "file_localization.docx",
+ size: 28 * 1024,
+ uploadStatus: "aborted",
+ uploadMessage: "Upload was aborted",
+ },
+ {
+ id: 6,
+ valid: false,
+ name: "file_localization.docx",
+ size: 28 * 1024,
+ uploadStatus: "error",
+ uploadMessage: "there was an error on the server",
+ },
+ {
+ id: 7,
+ valid: true,
+ name: "file_localization.docx",
+ size: 28 * 1024,
+ uploadStatus: "success",
+ uploadMessage: "files-ui <3",
+ },
+];`;
+
+const completeCodeTS = `import * as React from "react";
+import { ExtFile, FileMosaic, Localization } from "@files-ui/react";
+import { Autocomplete, TextField } from "@mui/material";
+
+const DemoFileMosaicLocalization = () => {
+ const [localization, setLocalization] = React.useState<
+ Localization | undefined
+ >(undefined);
+
+ const hadleSelect = (value: LanguageItem | null) => {
+ console.log(value);
+ setLocalization(value?.value);
+ };
+
+ return (
+ <>
+ <Autocomplete
+ disablePortal
+ autoSelect
+ size="small"
+ onChange={(e, value) => hadleSelect(value as LanguageItem)}
+ id="combo-box-demo"
+ options={languages}
+ sx={{ width: 300 }}
+ getOptionLabel={(option) => option.language}
+ renderInput={(params) => <TextField {...params} label="Localization" />}
+ />
+ <div
+ style={{
+ display: "flex",
+ flexWrap: "wrap",
+ justifyContent: "space-evenly",
+ width: "100%",
+ gap: "50px",
+ }}
+ >
+ {extFiles.map((extFile, index) => (
+ <FileMosaic
+ key={index}
+ {...extFile}
+ localization={localization}
+ onDelete={() => {}}
+ info
+ />
+ ))}
+ </div>
+ </>
+ );
+};
+export default DemoFileMosaicLocalization;
+
+interface LanguageItem {
+ language: string;
+ value: Localization;
+}
+
+const languages = [
+ { language: "Español: ES-es", value: "ES-es" },
+ { language: "English: EN-en", value: "EN-en" },
+ { language: "French: FR-fr", value: "FR-fr" },
+ { language: "Italian: IT-it", value: "IT-it" },
+ { language: "Portuguese: PT-pt", value: "PT-pt" },
+ { language: "Russian: RU-ru", value: "RU-ru" },
+ { language: "Chinese(simplified): ZH-cn", value: "ZH-cn" },
+ { language: "Chinese(traditional): ZH-hk", value: "ZH-hk" },
+];
+const extFiles: ExtFile[] = [
+ {
+ id: 0,
+ name: "file_localization.docx",
+ size: 28 * 1024,
+ errors: ["pdf not allowed", "file is too big"],
+ },
+ {
+ id: 1,
+ valid: false,
+ name: "file_localization.docx",
+
+ size: 28 * 1024,
+ errors: ["pdf not allowed", "file is too big"],
+ },
+ {
+ id: 2,
+ valid: true,
+ name: "file_localization.docx",
+ size: 28 * 1024,
+ },
+ {
+ id: 3,
+ valid: true,
+ name: "file_localization.docx",
+ size: 28 * 1024,
+ uploadStatus: "preparing",
+ },
+ {
+ id: 4,
+ name: "file_localization.docx",
+ size: 28 * 1024,
+ uploadStatus: "uploading",
+ progress: 28,
+ },
+ {
+ id: 5,
+ valid: true,
+ name: "file_localization.docx",
+ size: 28 * 1024,
+ uploadStatus: "aborted",
+ uploadMessage: "Upload was aborted",
+ },
+ {
+ id: 6,
+ valid: false,
+ name: "file_localization.docx",
+ size: 28 * 1024,
+ uploadStatus: "error",
+ uploadMessage: "there was an error on the server",
+ },
+ {
+ id: 7,
+ valid: true,
+ name: "file_localization.docx",
+ size: 28 * 1024,
+ uploadStatus: "success",
+ uploadMessage: "files-ui <3",
+ },
+];`;
diff --git a/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicUploadStatus.jsx b/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicUploadStatus.jsx
index 855cda4175db0e14c2e939b12b0d20a9799f00c7..0ee972514373b1bef851907506b6c5d59c6c71eb 100644
--- a/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicUploadStatus.jsx
+++ b/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicUploadStatus.jsx
@@ -15,135 +15,254 @@ const CodeJSFileMosaicUploadStatus = () => {
};
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: "text/plain",
- 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 splittedCodeJS = ``;
+
+const splittedCodeTS = ``;
const completeCodeJS = `import * as React from "react";
-import { FileMosaic } from "../../../files-ui";
+import {
+ FileMosaic,
+ useFakeProgress,
+} from "@files-ui/react";
-const sampleFilesProps = [
- {
- id: "fileId-1",
- size: 28 * 1024 * 1024,
- type: "text/plain",
- name: "file created from props.jsx",
- },
+const DemoFileMosaicUploadStatus = () => {
+ const progress = useFakeProgress();
+
+ const [status1, setStatus1] = React.useState("uploading");
+ const [status2, setStatus2] = React.useState("uploading");
+ const [status3, setStatus3] = React.useState("uploading");
+
+ React.useEffect(() => {
+ //schedule an interval
+ const _myInterval = setInterval(() => {
+ //set the uploadstatus result
+ setStatus1((_status) => setNextUploadState(_status, "aborted"));
+ setStatus2((_status) => setNextUploadState(_status, "error"));
+ setStatus3((_status) => setNextUploadState(_status, "success"));
+ }, 5000);
+
+ //clean
+ return () => {
+ console.log("clear interval", _myInterval);
+ clearInterval(_myInterval);
+ };
+ }, []);
+
+ const handleCancel = (id) => {
+ console.log("Upload canceled in file: " + id);
+ };
+ const handleAbort = (id) => {
+ console.log("Upload aborted in file: " + id);
+ };
+ return (
+ <>
+ <FlexRowContainer>
+ <FileMosaic {...preparingFile} />
+ <FileMosaic {...preparingFile} onCancel={handleCancel} />
+ </FlexRowContainer>
+
+ <FlexRowContainer>
+ <FileMosaic {...uploadingFile} />
+ <FileMosaic {...uploadingFile} progress={progress} />
+ <FileMosaic {...uploadingFile} onAbort={handleAbort} />
+ <FileMosaic {...uploadingFile} onAbort={handleAbort} progress={progress} />
+ </FlexRowContainer>
+
+ <FlexRowContainer>
+ <FileMosaic {...uploadResultFiles[0]} uploadStatus={status1} />
+ <FileMosaic {...uploadResultFiles[1]} uploadStatus={status2} />
+ <FileMosaic {...uploadResultFiles[2]} uploadStatus={status3} />
+ </FlexRowContainer>
+ </>
+ );
+};
+export default DemoFileMosaicUploadStatus;
+
+const FlexRowContainer = ({ children }) => {
+ return (
+ <div
+ style={{
+ display: "flex",
+ flexWrap: "wrap",
+ justifyContent: "space-evenly",
+ width: "100%",
+ }}
+ >
+ {children}
+ </div>
+ );
+};
+
+const setNextUploadState = (
+ prevState,
+ nextStatus
+) => {
+ if (prevState === "uploading") return nextStatus;
+ else return "uploading";
+};
+
+const preparingFile = {
+ id: "fileId-0",
+ size: 28 * 1024 * 1024,
+ type: "text/plain",
+ name: "preparing file.jsx",
+ uploadStatus: "preparing",
+};
+
+const uploadingFile = {
+ id: "fileId-1",
+ size: 28 * 1024 * 1024,
+ type: "image/png",
+ name: "uploading file.png",
+ uploadStatus: "uploading",
+};
+
+const uploadResultFiles = [
{
id: "fileId-2",
size: 28 * 1024 * 1024,
- type: "image/png",
- name: "valid file created from props.png",
- valid: true,
+ type: "image/gif",
+ name: "upload aborted file.gif",
+ uploadMessage: "Upload was aborted by the user",
},
{
id: "fileId-3",
size: 28 * 1024 * 1024,
type: "image/jpeg",
- name: "non valid file created from props.jpg",
- valid: false,
+ name: "upload with error file.jpg",
+ uploadMessage:
+ "File couldn't be uploaded to Files-ui earthquakes. File was too big.",
+ },
+ {
+ id: "fileId-4",
+ size: 28 * 1024 * 1024,
+ type: "image/png",
+ name: "successfully uploaded file.png",
+ uploadMessage: "File was uploaded correctly to Files-ui earthquakes",
},
-];
+];`;
+
+const completeCodeTS = `import * as React from "react";
+import {
+ FileMosaic,
+ useFakeProgress,
+ ExtFile,
+ UPLOADSTATUS,
+} from "@files-ui/react";
+
+const DemoFileMosaicUploadStatus = () => {
+ const progress = useFakeProgress();
+
+ const [status1, setStatus1] = React.useState<UPLOADSTATUS>("uploading");
+ const [status2, setStatus2] = React.useState<UPLOADSTATUS>("uploading");
+ const [status3, setStatus3] = React.useState<UPLOADSTATUS>("uploading");
+
+ React.useEffect(() => {
+ //schedule an interval
+ const _myInterval = setInterval(() => {
+ //set the uploadstatus result
+ setStatus1((_status) => setNextUploadState(_status, "aborted"));
+ setStatus2((_status) => setNextUploadState(_status, "error"));
+ setStatus3((_status) => setNextUploadState(_status, "success"));
+ }, 5000);
+
+ //clean
+ return () => {
+ console.log("clear interval", _myInterval);
+ clearInterval(_myInterval as NodeJS.Timer);
+ };
+ }, []);
-const DemoFileMosaicValidation = () => {
+ const handleCancel = (id: string | number | undefined) => {
+ console.log("Upload canceled in file: " + id);
+ };
+ const handleAbort = (id: string | number | undefined) => {
+ console.log("Upload aborted in file: " + id);
+ };
return (
<>
- {sampleFilesProps.map((extFile) => (
- <FileMosaic key={extFile.id} {...extFile} alwaysActive info preview />
- ))}
+ <FlexRowContainer>
+ <FileMosaic {...preparingFile} />
+ <FileMosaic {...preparingFile} onCancel={handleCancel} />
+ </FlexRowContainer>
+
+ <FlexRowContainer>
+ <FileMosaic {...uploadingFile} />
+ <FileMosaic {...uploadingFile} progress={progress} />
+ <FileMosaic {...uploadingFile} onAbort={handleAbort} />
+ <FileMosaic {...uploadingFile} onAbort={handleAbort} progress={progress} />
+ </FlexRowContainer>
+
+ <FlexRowContainer>
+ <FileMosaic {...uploadResultFiles[0]} uploadStatus={status1} />
+ <FileMosaic {...uploadResultFiles[1]} uploadStatus={status2} />
+ <FileMosaic {...uploadResultFiles[2]} uploadStatus={status3} />
+ </FlexRowContainer>
</>
);
};
-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: "text/plain",
- 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";
+export default DemoFileMosaicUploadStatus;
-const sampleFilesProps: ExtFile[] = [
- {
- id: "fileId-1",
- size: 28 * 1024 * 1024,
- type: "text/plain",
- name: "file created from props.jsx",
- },
+const FlexRowContainer = (props: { children: React.ReactNode }) => {
+ return (
+ <div
+ style={{
+ display: "flex",
+ flexWrap: "wrap",
+ justifyContent: "space-evenly",
+ width: "100%",
+ }}
+ >
+ {props.children}
+ </div>
+ );
+};
+
+const setNextUploadState = (
+ prevState: UPLOADSTATUS,
+ nextStatus: UPLOADSTATUS
+): UPLOADSTATUS => {
+ if (prevState === "uploading") return nextStatus;
+ else return "uploading";
+};
+
+const preparingFile: ExtFile = {
+ id: "fileId-0",
+ size: 28 * 1024 * 1024,
+ type: "text/plain",
+ name: "preparing file.jsx",
+ uploadStatus: "preparing",
+};
+
+const uploadingFile: ExtFile = {
+ id: "fileId-1",
+ size: 28 * 1024 * 1024,
+ type: "image/png",
+ name: "uploading file.png",
+ uploadStatus: "uploading",
+};
+
+const uploadResultFiles: ExtFile[] = [
{
id: "fileId-2",
size: 28 * 1024 * 1024,
- type: "image/png",
- name: "valid file created from props.png",
- valid: true,
+ type: "image/gif",
+ name: "upload aborted file.gif",
+ uploadMessage: "Upload was aborted by the user",
},
{
id: "fileId-3",
size: 28 * 1024 * 1024,
type: "image/jpeg",
- name: "non valid file created from props.jpg",
- valid: false,
+ name: "upload with error file.jpg",
+ uploadMessage:
+ "File couldn't be uploaded to Files-ui earthquakes. File was too big.",
},
-];
-
-const DemoFileMosaicValidation = () => {
- return (
- <>
- {sampleFilesProps.map((extFile: ExtFile) => (
- <FileMosaic key={extFile.id} {...extFile} alwaysActive info preview />
- ))}
- </>
- );
-};
-export default DemoFileMosaicValidation;`;
+ {
+ id: "fileId-4",
+ size: 28 * 1024 * 1024,
+ type: "image/png",
+ name: "successfully uploaded file.png",
+ uploadMessage: "File was uploaded correctly to Files-ui earthquakes",
+ },
+];`;
diff --git a/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicValidation.jsx b/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicValidation.jsx
index c368ea5578b973180ee9484da7e82ed76d23e448..435488cb7cc7f0dadaeffbd45acee903c758b373 100644
--- a/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicValidation.jsx
+++ b/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicValidation.jsx
@@ -15,15 +15,23 @@ const CodeJSFileMosaicValidation = () => {
};
export default CodeJSFileMosaicValidation;
-const splittedCodeJS = `<>
- {sampleFilesProps.map((extFile) => (
- <FileMosaic key={extFile.id} {...extFile} info/>
- ))}
-</>`;
+const splittedCodeJS = ``;
+const splittedCodeTS = ``;
const completeCodeJS = `import * as React from "react";
import { FileMosaic } from "../../../files-ui";
+const DemoFileMosaicValidation = () => {
+ return (
+ <div style={{display:"flex", gap:"10px"}}>
+ {sampleFilesProps.map((extFile) => (
+ <FileMosaic key={extFile.id} valid={extFile.valid} {...extFile} info/>
+ ))}
+ </div>
+ );
+};
+export default DemoFileMosaicValidation;
+
const sampleFilesProps = [
{
id: "fileId-1",
@@ -36,35 +44,31 @@ const sampleFilesProps = [
size: 28 * 1024 * 1024,
type: "image/png",
name: "valid file created from props.png",
- valid: true,
+ valid: false,
+ errors: ["File is too big", "File type is not allowed"]
},
{
id: "fileId-3",
size: 28 * 1024 * 1024,
type: "image/jpeg",
name: "non valid file created from props.jpg",
- valid: false,
+ valid: true,
},
-];
+];`;
+
+const completeCodeTS = `import * as React from "react";
+import { FileMosaic, ExtFile } from "../../../files-ui";
const DemoFileMosaicValidation = () => {
return (
- <>
- {sampleFilesProps.map((extFile) => (
- <FileMosaic key={extFile.id} {...extFile} info/>
+ <div style={{display:"flex", gap:"10px"}}>
+ {sampleFilesProps.map((extFile: ExtFile) => (
+ <FileMosaic key={extFile.id} valid={extFile.valid} {...extFile} info/>
))}
- </>
+ </div>
);
};
-export default DemoFileMosaicValidation;`;
-
-const splittedCodeTS = `<>
- {sampleFilesProps.map((extFile:ExtFile) => (
- <FileMosaic key={extFile.id} {...extFile} info/>
- ))}
-</>`;
-const completeCodeTS = `import * as React from "react";
-import { FileMosaic, ExtFile } from "../../../files-ui";
+export default DemoFileMosaicValidation;
const sampleFilesProps: ExtFile[] = [
{
@@ -78,24 +82,14 @@ const sampleFilesProps: ExtFile[] = [
size: 28 * 1024 * 1024,
type: "image/png",
name: "valid file created from props.png",
- valid: true,
+ valid: false,
+ errors: ["File is too big", "File type is not allowed"]
},
{
id: "fileId-3",
size: 28 * 1024 * 1024,
type: "image/jpeg",
name: "non valid file created from props.jpg",
- valid: false,
+ valid: true,
},
-];
-
-const DemoFileMosaicValidation = () => {
- return (
- <>
- {sampleFilesProps.map((extFile: ExtFile) => (
- <FileMosaic key={extFile.id} {...extFile} info/>
- ))}
- </>
- );
-};
-export default DemoFileMosaicValidation;`;
+];`;
diff --git a/src/components/demo-components/filemosaic-demo/DemoFileMosaicDarkMode.tsx b/src/components/demo-components/filemosaic-demo/DemoFileMosaicDarkMode.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..565af61e31f529b6cbeb4aebb9a1952472cd0a0e
--- /dev/null
+++ b/src/components/demo-components/filemosaic-demo/DemoFileMosaicDarkMode.tsx
@@ -0,0 +1,41 @@
+import * as React from "react";
+import { ExtFile, FileMosaic } from "../../../files-ui";
+
+const sampleFileProps: ExtFile = {
+ id: "fileId",
+ size: 28 * 1024 * 1024,
+ type: "text/plain",
+ name: "file created from props.jsx",
+};
+const DemoFileMosaicDarkMode = () => {
+ const removeFile = (id: string | number | undefined) => {
+ console.log("delete button clicked on file: " + id);
+ };
+ return (
+ <>
+ <div
+ style={{
+ display: "flex",
+ justifyContent: "center",
+ width: "50%",
+ backgroundColor: "white",
+ padding: "10px 0",
+ }}
+ >
+ <FileMosaic {...sampleFileProps} info onDelete={removeFile} />
+ </div>
+ <div
+ style={{
+ display: "flex",
+ justifyContent: "center",
+ width: "50%",
+ backgroundColor: "#121212",
+ padding: "10px 0",
+ }}
+ >
+ <FileMosaic {...sampleFileProps} info darkMode onDelete={removeFile} />
+ </div>
+ </>
+ );
+};
+export default DemoFileMosaicDarkMode;
diff --git a/src/components/demo-components/filemosaic-demo/DemoFileMosaicFileIcons.jsx b/src/components/demo-components/filemosaic-demo/DemoFileMosaicFileIcons.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..3432c4c1646342f936e9c0de7a45dc416810fdb9
--- /dev/null
+++ b/src/components/demo-components/filemosaic-demo/DemoFileMosaicFileIcons.jsx
@@ -0,0 +1,37 @@
+import * as React from "react";
+import { FileMosaic,createListOfMultiTypeFile } from "../../../files-ui";
+
+/* const sampleFileProps = {
+ id: "fileId",
+ size: 28 * 1024 * 1024,
+ type: "text/plain",
+ name: "file created from props.jsx",
+}; */
+const DemoFileMosaicFileIcons = () => {
+ const [files, setFiles] = React.useState([]);
+
+ const removeFile = (id) => {
+ console.log("delete button clicked on file: " + id);
+ };
+
+ React.useEffect(() => {
+ const validateFiles = createListOfMultiTypeFile(28*1024*1024).map((x, index) => {
+ return {
+ id:index,
+ size: 28 * 1024 * 1024,
+ type: x.type,
+ name: x.name,
+ };
+ });
+ //console.log(validateFiles);
+ setFiles(validateFiles);
+ }, []);
+ return (
+ <>
+ {files.map((f, index) => (
+ <FileMosaic {...f} key={f.id} onDelete={removeFile} info />
+ ))}
+ </>
+ );
+};
+export default DemoFileMosaicFileIcons;
diff --git a/src/components/demo-components/filemosaic-demo/DemoFileMosaicLocalization.tsx b/src/components/demo-components/filemosaic-demo/DemoFileMosaicLocalization.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..6354a3d637a5e50fd7009958a3ae2802f32c7651
--- /dev/null
+++ b/src/components/demo-components/filemosaic-demo/DemoFileMosaicLocalization.tsx
@@ -0,0 +1,126 @@
+import * as React from "react";
+import { ExtFile, FileMosaic, Localization } from "../../../files-ui";
+import { Autocomplete, TextField } from "@mui/material";
+
+const DemoFileMosaicLocalization = () => {
+ const [localization, setLocalization] = React.useState<
+ Localization | undefined
+ >(undefined);
+
+ const hadleSelect = (value: LanguageItem | null) => {
+ console.log(value);
+ setLocalization(value?.value);
+ };
+
+ return (
+ <>
+ <Autocomplete
+ disablePortal
+ autoSelect
+ size="small"
+ onChange={(e, value) => hadleSelect(value as LanguageItem)}
+ id="combo-box-demo"
+ options={languages}
+ sx={{ width: 300 }}
+ getOptionLabel={(option) => option.language}
+ renderInput={(params) => <TextField {...params} label="Localization" />}
+ />
+ <div
+ style={{
+ display: "flex",
+ flexWrap: "wrap",
+ justifyContent: "space-evenly",
+ width: "100%",
+ gap: "50px",
+ }}
+ >
+ {extFiles.map((extFile, index) => (
+ <FileMosaic
+ key={index}
+ {...extFile}
+ localization={localization}
+ onDelete={() => {}}
+ info
+ />
+ ))}
+ </div>
+ </>
+ );
+};
+export default DemoFileMosaicLocalization;
+
+interface LanguageItem {
+ language: string;
+ value: Localization;
+}
+
+const languages = [
+ { language: "Español: ES-es", value: "ES-es" },
+ { language: "English: EN-en", value: "EN-en" },
+ { language: "French: FR-fr", value: "FR-fr" },
+ { language: "Italian: IT-it", value: "IT-it" },
+ { language: "Portuguese: PT-pt", value: "PT-pt" },
+ { language: "Russian: RU-ru", value: "RU-ru" },
+ { language: "Chinese(simplified): ZH-cn", value: "ZH-cn" },
+ { language: "Chinese(traditional): ZH-hk", value: "ZH-hk" },
+];
+const extFiles: ExtFile[] = [
+ {
+ id: 0,
+ name: "file_localization.docx",
+ size: 28 * 1024,
+ errors: ["pdf not allowed", "file is too big"],
+ },
+ {
+ id: 1,
+ valid: false,
+ name: "file_localization.docx",
+
+ size: 28 * 1024,
+ errors: ["pdf not allowed", "file is too big"],
+ },
+ {
+ id: 2,
+ valid: true,
+ name: "file_localization.docx",
+ size: 28 * 1024,
+ },
+ {
+ id: 3,
+ valid: true,
+ name: "file_localization.docx",
+ size: 28 * 1024,
+ uploadStatus: "preparing",
+ },
+ {
+ id: 4,
+ name: "file_localization.docx",
+ size: 28 * 1024,
+ uploadStatus: "uploading",
+ progress: 28,
+ },
+ {
+ id: 5,
+ valid: true,
+ name: "file_localization.docx",
+ size: 28 * 1024,
+ uploadStatus: "aborted",
+ uploadMessage: "Upload was aborted",
+ },
+ {
+ id: 6,
+ valid: false,
+ name: "file_localization.docx",
+ size: 28 * 1024,
+ uploadStatus: "error",
+ uploadMessage: "there was an error on the server",
+ },
+ {
+ id: 7,
+ valid: true,
+ name: "file_localization.docx",
+ size: 28 * 1024,
+ uploadStatus: "success",
+ uploadMessage: "files-ui <3",
+ },
+];
diff --git a/src/components/demo-components/filemosaic-demo/DemoFileMosaicUploadStatus.tsx b/src/components/demo-components/filemosaic-demo/DemoFileMosaicUploadStatus.tsx
index 4763b93d2ebf0619f2f8319c8a5d097edefbe448..ed044dff66fa76e7a871647996712dd8e1c5edb2 100644
--- a/src/components/demo-components/filemosaic-demo/DemoFileMosaicUploadStatus.tsx
+++ b/src/components/demo-components/filemosaic-demo/DemoFileMosaicUploadStatus.tsx
@@ -1,196 +1,128 @@
import * as React from "react";
-import { FileMosaic } from "../../../files-ui";
-import { ExtFile, getRandomInt, UPLOADSTATUS } from "../../../files-ui/core";
-const preparingFiles: ExtFile[] = [
- {
- id: "fileId-1",
- size: 28 * 1024 * 1024,
- type: "text/plain",
- name: "default preparing file.jsx",
- uploadStatus: "preparing",
- },
- {
- id: "fileId-2",
- size: 28 * 1024 * 1024,
- type: "text/plain",
- 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/gif",
- name: "non valid file created from props.gif",
- //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/png",
- name: "non valid file created from props.png",
- //uploadStatus: "success",
- uploadMessage: "File was uploaded correctly to Files-ui earthquakes",
- },
-];
+import {
+ FileMosaic,
+ useFakeProgress,
+ ExtFile,
+ UPLOADSTATUS,
+} from "../../../files-ui";
-const FlexRowContainer = (props: { children: React.ReactNode }) => {
- return (
- <div
- style={{
- display: "flex",
- flexWrap: "wrap",
- justifyContent: "space-evenly",
- width: "100%",
- }}
- >
- {props.children}
- </div>
- );
-};
const DemoFileMosaicUploadStatus = () => {
- const [progress, setProgress] = React.useState(28);
- const [progress2, setProgress2] = React.useState(28);
- const [status1, setStatus1] = React.useState<UPLOADSTATUS | undefined>(
- "uploading"
- );
- const [status2, setStatus2] = React.useState<UPLOADSTATUS | undefined>(
- "uploading"
- );
- const [status3, setStatus3] = React.useState<UPLOADSTATUS | undefined>(
- "uploading"
- );
+ const progress = useFakeProgress();
+
+ const [status1, setStatus1] = React.useState<UPLOADSTATUS>("uploading");
+ const [status2, setStatus2] = React.useState<UPLOADSTATUS>("uploading");
+ const [status3, setStatus3] = React.useState<UPLOADSTATUS>("uploading");
React.useEffect(() => {
- const _myInterval2 = setInterval(() => {
+ //schedule an interval
+ const _myInterval = setInterval(() => {
//set the uploadstatus result
setStatus1((_status) => setNextUploadState(_status, "aborted"));
setStatus2((_status) => setNextUploadState(_status, "error"));
setStatus3((_status) => setNextUploadState(_status, "success"));
}, 5000);
- const _myInterval = setInterval(() => {
- setProgress((_progress) => {
- if (_progress === 100) {
- return 0;
- }
- const offset = getRandomInt(5, 14);
- const newProgress = _progress + offset;
- if (newProgress > 100) {
- return 100;
- } else {
- return newProgress;
- }
- });
- setProgress2((_progress) => {
- if (_progress === 100) {
- return 0;
- }
- const offset = getRandomInt(10, 24);
- const newProgress = _progress + offset;
- if (newProgress > 100) {
- return 100;
- } else {
- return newProgress;
- }
- });
- }, 2000);
+ //clean
return () => {
console.log("clear interval", _myInterval);
- console.log("clear interval", _myInterval2);
clearInterval(_myInterval as NodeJS.Timer);
- clearInterval(_myInterval2 as NodeJS.Timer);
};
}, []);
+
+ const handleCancel = (id: string | number | undefined) => {
+ console.log("Upload canceled in file: " + id);
+ };
+ const handleAbort = (id: string | number | undefined) => {
+ console.log("Upload aborted in file: " + id);
+ };
return (
<>
<FlexRowContainer>
- <FileMosaic {...preparingFiles[0]} />
- <FileMosaic {...preparingFiles[1]} onCancel={() => {}} />
+ <FileMosaic {...preparingFile} />
+ <FileMosaic {...preparingFile} onCancel={handleCancel} />
</FlexRowContainer>
<FlexRowContainer>
- <FileMosaic {...uploadingFiles[0]} />
- <FileMosaic {...uploadingFiles[0]} progress={progress} />
- <FileMosaic {...uploadingFiles[2]} onAbort={() => {}} />
+ <FileMosaic {...uploadingFile} />
+ <FileMosaic {...uploadingFile} progress={progress} />
+ <FileMosaic {...uploadingFile} onAbort={handleAbort} />
<FileMosaic
- {...uploadingFiles[3]}
- onAbort={() => {}}
- progress={progress2}
+ {...uploadingFile}
+ onAbort={handleAbort}
+ progress={progress}
/>
</FlexRowContainer>
<FlexRowContainer>
- <FileMosaic
- {...uploadResulFiles[0]}
- resultOnTooltip
- uploadStatus={status1}
- />
- <FileMosaic
- {...uploadResulFiles[1]}
- resultOnTooltip
- uploadStatus={status2}
- />
- <FileMosaic
- {...uploadResulFiles[2]}
- resultOnTooltip
- uploadStatus={status3}
- />
+ <FileMosaic {...uploadResultFiles[0]} uploadStatus={status1} />
+ <FileMosaic {...uploadResultFiles[1]} uploadStatus={status2} />
+ <FileMosaic {...uploadResultFiles[2]} uploadStatus={status3} />
</FlexRowContainer>
</>
);
};
export default DemoFileMosaicUploadStatus;
+const FlexRowContainer = (props: { children: React.ReactNode }) => {
+ return (
+ <div
+ style={{
+ display: "flex",
+ flexWrap: "wrap",
+ justifyContent: "space-evenly",
+ width: "100%",
+ }}
+ >
+ {props.children}
+ </div>
+ );
+};
+
const setNextUploadState = (
- prevState: UPLOADSTATUS | undefined,
- nextStatus: UPLOADSTATUS | undefined
-): UPLOADSTATUS | undefined => {
- if (prevState === "uploading") {
- return nextStatus;
- } else if (prevState === nextStatus) {
- return undefined;
- } else {
- return "uploading";
- }
+ prevState: UPLOADSTATUS,
+ nextStatus: UPLOADSTATUS
+): UPLOADSTATUS => {
+ if (prevState === "uploading") return nextStatus;
+ else return "uploading";
+};
+
+const preparingFile: ExtFile = {
+ id: "fileId-0",
+ size: 28 * 1024 * 1024,
+ type: "text/plain",
+ name: "preparing file.jsx",
+ uploadStatus: "preparing",
+};
+
+const uploadingFile: ExtFile = {
+ id: "fileId-1",
+ size: 28 * 1024 * 1024,
+ type: "image/png",
+ name: "uploading file.png",
+ uploadStatus: "uploading",
};
+
+const uploadResultFiles: ExtFile[] = [
+ {
+ id: "fileId-2",
+ size: 28 * 1024 * 1024,
+ type: "image/gif",
+ name: "upload aborted file.gif",
+ uploadMessage: "Upload was aborted by the user",
+ },
+ {
+ id: "fileId-3",
+ size: 28 * 1024 * 1024,
+ type: "image/jpeg",
+ name: "upload with error file.jpg",
+ uploadMessage:
+ "File couldn't be uploaded to Files-ui earthquakes. File was too big.",
+ },
+ {
+ id: "fileId-4",
+ size: 28 * 1024 * 1024,
+ type: "image/png",
+ name: "successfully uploaded file.png",
+ uploadMessage: "File was uploaded correctly to Files-ui earthquakes",
+ },
+];
diff --git a/src/components/demo-components/filemosaic-demo/DemoFileMosaicValidation.jsx b/src/components/demo-components/filemosaic-demo/DemoFileMosaicValidation.jsx
index 9b23115484a671188e122c5033f0a485779d0eda..0c3d1a9fb6c579ab89d21074d52a30fa0ef0053d 100644
--- a/src/components/demo-components/filemosaic-demo/DemoFileMosaicValidation.jsx
+++ b/src/components/demo-components/filemosaic-demo/DemoFileMosaicValidation.jsx
@@ -14,6 +14,7 @@ const sampleFilesProps = [
type: "image/png",
name: "valid file created from props.png",
valid: false,
+ errors: ["File is too big", "File type is not allowed"]
},
{
id: "fileId-3",
@@ -28,7 +29,7 @@ const DemoFileMosaicValidation = () => {
return (
<>
{sampleFilesProps.map((extFile) => (
- <FileMosaic key={extFile.id} {...extFile} alwaysActive info preview />
+ <FileMosaic key={extFile.id} {...extFile} info />
))}
</>
);
diff --git a/src/components/show-demo-code/ShowDemoCode.tsx b/src/components/show-demo-code/ShowDemoCode.tsx
index 6920473eba486864aff560b7167a20d3ca56a060..5de73c8596f5e434c43c24c00253a17240164317 100644
--- a/src/components/show-demo-code/ShowDemoCode.tsx
+++ b/src/components/show-demo-code/ShowDemoCode.tsx
@@ -13,22 +13,24 @@ interface ShowDemoCodeProps {
codeSplittedTS?: string;
codeCompleteJS?: string;
codeCompleteTS?: string;
- splittedOnly?:boolean;
+ splittedOnly?: boolean;
}
-const ShowDemoCode: React.FC<ShowDemoCodeProps> = (props: ShowDemoCodeProps) => {
+const ShowDemoCode: React.FC<ShowDemoCodeProps> = (
+ props: ShowDemoCodeProps
+) => {
const {
codeSandboxJS = "https://codesandbox.io/s/dropzone-ui-basic-3j01v",
codeSandboxTS = "https://codesandbox.io/s/dropzone-ui-basic-3j01v",
- codeCompleteJS,
- codeCompleteTS,
- codeSplittedJS,
- codeSplittedTS,
- splittedOnly=false
+ codeCompleteJS = "",
+ codeCompleteTS = "",
+ codeSplittedJS = "",
+ codeSplittedTS = "",
+ splittedOnly = false,
} = props;
const [showComplete, setShowComplete] = React.useState(false);
const [showJS, setShowJS] = React.useState(true);
- const code = showComplete
+ const code: string = showComplete
? showJS
? codeCompleteJS
: codeCompleteTS
@@ -38,61 +40,73 @@ const ShowDemoCode: React.FC<ShowDemoCodeProps> = (props: ShowDemoCodeProps) =>
return (
<React.Fragment>
- {!splittedOnly && <Stack
- direction={"row"}
- justifyContent="space-between"
- style={{ marginTop: "20px" }}
- >
- <Stack direction={"row"} justifyContent="flex-start">
- <ButtonGroup variant="outlined" aria-label="outlined button group">
- <Button
- size="small"
- style={showJS ? { backgroundColor: "rgba(4, 35, 84, 0.09)" } : {}}
- //startIcon={}
- onClick={() => setShowJS(true)}
- >
- <JSIcon />
- </Button>
- <Button
- size="small"
- style={
- !showJS ? { backgroundColor: "rgba(4, 35, 84, 0.09)" } : {}
- }
- // endIcon={}
- onClick={() => setShowJS(false)}
- >
- <TSIcon />
- </Button>
- </ButtonGroup>
- </Stack>
+ {!splittedOnly && (
+ <Stack
+ direction={"row"}
+ justifyContent="space-between"
+ style={{ margin: "20px 0" }}
+ >
+ <Stack direction={"row"} justifyContent="flex-start">
+ {code.length > 0 && (
+ <ButtonGroup
+ variant="outlined"
+ aria-label="outlined button group"
+ >
+ <Button
+ size="small"
+ style={
+ showJS ? { backgroundColor: "rgba(4, 35, 84, 0.09)" } : {}
+ }
+ //startIcon={}
+ onClick={() => setShowJS(true)}
+ >
+ <JSIcon />
+ </Button>
+ <Button
+ size="small"
+ style={
+ !showJS ? { backgroundColor: "rgba(4, 35, 84, 0.09)" } : {}
+ }
+ // endIcon={}
+ onClick={() => setShowJS(false)}
+ >
+ <TSIcon />
+ </Button>
+ </ButtonGroup>
+ )}
+ </Stack>
- <Stack direction={"row"} justifyContent="flex-end">
- <Tooltip title={showComplete ? "Hide full code" : "Show full code"}>
- <IconButton
- style={{ borderRadius: "50%", border: "0.5px solid #eaeef3" }}
- onClick={() => setShowComplete((showComplete) => !showComplete)}
- //color="secondary"
- aria-label="upload picture"
- component="label"
- >
- <CodeIcon /* htmlColor="white" */ />
- </IconButton>
- </Tooltip>
- <Tooltip title={"Edit in CodeSandBox"}>
- <IconButton
- style={{ borderRadius: "50%", border: "0.5px solid #eaeef3" }}
- onClick={() => {
- window?.open(showJS ? codeSandboxJS : codeSandboxTS, "_blank");
- }}
- //color="secondary"
- aria-label="upload picture"
- component="label"
- >
- <ViewInArIcon /* htmlColor="white" */ />
- </IconButton>
- </Tooltip>
+ <Stack direction={"row"} justifyContent="flex-end" spacing={1}>
+ <Tooltip title={showComplete ? "Hide full code" : "Show full code"}>
+ <IconButton
+ style={{ borderRadius: "50%", border: "0.5px solid #eaeef3" }}
+ onClick={() => setShowComplete((showComplete) => !showComplete)}
+ //color="secondary"
+ aria-label="upload picture"
+ component="label"
+ >
+ <CodeIcon /* htmlColor="white" */ />
+ </IconButton>
+ </Tooltip>
+ <Tooltip title={"Edit in CodeSandBox"}>
+ <IconButton
+ style={{ borderRadius: "50%", border: "0.5px solid #eaeef3" }}
+ onClick={() => {
+ window?.open(
+ showJS ? codeSandboxJS : codeSandboxTS,
+ "_blank"
+ );
+ }}
+ //color="secondary"
+ aria-label="upload picture"
+ component="label"
+ >
+ <ViewInArIcon /* htmlColor="white" */ />
+ </IconButton>
+ </Tooltip>
+ </Stack>
</Stack>
- </Stack>}
+ )}
<Highlighter
onCopyToClipboard={(code_) => {
console.log("code copied to clipboard: ");
diff --git a/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.tsx b/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.tsx
index 7de77cee9629d3227f0daaa041fbac8374689ac4..0ce316027b59cd38e516a3185340df3c0ffd7b0c 100644
--- a/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.tsx
+++ b/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.tsx
@@ -43,7 +43,7 @@ const FileMosaic: React.FC<FileMosaicProps> = (props: FileMosaicProps) => {
alwaysActive = true,
- resultOnTooltip,
+ resultOnTooltip = true,
downloadUrl,
diff --git a/src/files-ui/hooks/index.ts b/src/files-ui/hooks/index.ts
index f3cc8bea4866823871c61ccd094764fa0a9c8c6d..2125e76a07cf23b6ef24b3f94fed4b7e2f0c91f4 100644
--- a/src/files-ui/hooks/index.ts
+++ b/src/files-ui/hooks/index.ts
@@ -1,2 +1,5 @@
import {useDropzoneValidation} from "./useDropzoneValidation";
-export {useDropzoneValidation};
\ No newline at end of file
+export {useDropzoneValidation};
+
+
+export {useFakeProgress} from "./useFakeProgress";
\ No newline at end of file
diff --git a/src/files-ui/hooks/useFakeProgress.ts b/src/files-ui/hooks/useFakeProgress.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9660e290fa3ad8fbbbcf9c3c81dc348b4d840baf
--- /dev/null
+++ b/src/files-ui/hooks/useFakeProgress.ts
@@ -0,0 +1,38 @@
+import * as React from "react";
+import { getRandomInt } from "../core";
+
+export const useFakeProgress = (time = 1500) => {
+ const [progress, setProgress] = React.useState(28);
+
+ React.useEffect(() => {
+
+ const updateProgress = (currProgress: number): number => {
+ if (currProgress === 100) {
+ return 0;
+ }
+ const offset = getRandomInt(5, 24);
+
+ const newProgress = currProgress + offset;
+ if (newProgress > 100) {
+ return 100;
+ } else {
+ return newProgress;
+ }
+ };
+
+ const _myInterval = setInterval(() => {
+ setProgress((_progress) => updateProgress(_progress));
+ }, time);
+ console.log("useFakeProgress SET interval", _myInterval);
+
+ return () => {
+ console.log("useFakeProgress CLEAR interval", _myInterval);
+ clearInterval(_myInterval as NodeJS.Timer);
+ };
+ // eslint-disable-next-line
+ }, []);
+
+ return progress;
+}
+
+
diff --git a/src/files-ui/index.ts b/src/files-ui/index.ts
index bcd99d84d18e9d4bcb262ca2f3bfab40a7d88f3f..b158ee2e8e1478225b62d5c5b732bd72cea45f67 100644
--- a/src/files-ui/index.ts
+++ b/src/files-ui/index.ts
@@ -21,4 +21,10 @@ export { ImagePreview } from "./components/previews";
export * from "./components/previews";
export { VideoPreview } from "./components/previews";
-export * from "./components/previews";
\ No newline at end of file
+export * from "./components/previews";
+
+export { useFakeProgress } from "./hooks";
+
+
+export {createListOfMultiTypeFile} from "./core";
+export type { ExtFile, ExtFileInstance, ExtFileListMap, ExtFileManager, UPLOADSTATUS, Localization } from "./core";
\ No newline at end of file
diff --git a/src/pages/demo/FileMosaicDemoPage.jsx b/src/pages/demo/FileMosaicDemoPage.jsx
index 5d5d25304118f6ef1bfab48bb7974a25103857d6..c203bff007879d6447e6112cf1b22d7ff4087c1b 100644
--- a/src/pages/demo/FileMosaicDemoPage.jsx
+++ b/src/pages/demo/FileMosaicDemoPage.jsx
@@ -1,6 +1,5 @@
import Alert from "@mui/material/Alert";
import Paper from "@mui/material/Paper";
-import Stack from "@mui/material/Stack";
import AlertTitle from "@mui/material/AlertTitle";
import * as React from "react";
import CodeHighlight from "../../components/codeHighlight/CodeHighlight";
@@ -23,6 +22,11 @@ import CodeJSFileMosaicValidation from "../../components/demo-components/filemos
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";
+import DemoFileMosaicLocalization from "../../components/demo-components/filemosaic-demo/DemoFileMosaicLocalization";
+import CodeJSFileMosaicLocalization from "../../components/demo-components/filemosaic-demo/CodeJSFileMosaicLocalization";
+import DemoFileMosaicDarkMode from "../../components/demo-components/filemosaic-demo/DemoFileMosaicDarkMode";
+import CodeJSFileMosaicDarkMode from "../../components/demo-components/filemosaic-demo/CodeJSFileMosaicDarkMode";
+import DemoFileMosaicFileIcons from "../../components/demo-components/filemosaic-demo/DemoFileMosaicFileIcons";
const FileMosaicDemoPage = (props) => {
return (
@@ -92,7 +96,7 @@ const FileMosaicDemoPage = (props) => {
<DescParagraph>
By setting the <CodeHighlight>preview</CodeHighlight> prop to{" "}
<TypeHighlight>true</TypeHighlight> the component will show an image
- preview instead of a file icons. To acomplish this task this
+ preview instead of a file icon. To acomplish this task this
component will take the <CodeHighlight>imageUrl</CodeHighlight>
prop or will read the <TypeHighlight>File</TypeHighlight> object if
given and if it is an image.
@@ -160,7 +164,7 @@ const FileMosaicDemoPage = (props) => {
<TypeHighlight>"error"</TypeHighlight> or{" "}
<TypeHighlight>"success"</TypeHighlight>. Also the{" "}
<CodeHighlight>uploadMessage</CodeHighlight> prop is used for
- displaying the error or success message and the{" "}
+ displaying the error or success message. Finally, the{" "}
<CodeHighlight>progress</CodeHighlight> prop can be used to show the
current progress of the upload process.
<br />
@@ -188,8 +192,7 @@ const FileMosaicDemoPage = (props) => {
As you can see, you have full control of the FileMosaic 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{" "}
+ <br /> On the other hand, you can also leverage the capability of{" "}
<CodeHighlight>{"<Dropzone/>"}</CodeHighlight> and{" "}
<CodeHighlight>{"<FileInputButton/>"}</CodeHighlight> components
since they also manage the{" "}
@@ -198,18 +201,109 @@ const FileMosaicDemoPage = (props) => {
mentioned in the following demos:
<ul>
<li>
- <AnchorToTab href="/components/dropzone#">
+ <AnchorToTab href="/components/dropzone#uploading">
Dropzone upload
</AnchorToTab>
</li>
<li>
- <AnchorToTab href="/components/fileinputbutton#validation">
+ <AnchorToTab href="/components/fileinputbutton#uploading">
FileInputButton upload
</AnchorToTab>
</li>
</ul>
</Alert>
</section>
+ <section id="dark mode">
+ <SubTitle content="Dark mode" />
+ <DescParagraph>
+ The <CodeHighlight>FileMosaic</CodeHighlight> component supports
+ dark mode by setting the prop{" "}
+ <TypeHighlight>darkMode</TypeHighlight> to{" "}
+ <TypeHighlight>true</TypeHighlight>.
+ </DescParagraph>
+
+ <Paper
+ variant="outlined"
+ style={{
+ padding: "25px",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ width: "100%",
+ }}
+ >
+ <DemoFileMosaicDarkMode />
+ </Paper>
+
+ <CodeJSFileMosaicDarkMode />
+ </section>
+ <section id="localization">
+ <SubTitle content="Localization" />
+ <DescParagraph>
+ The <CodeHighlight>FileMosaic</CodeHighlight> component has
+ multilanguage support. You can change the language in wich labels
+ are displayed by setting the{" "}
+ <CodeHighlight>{"localization"}</CodeHighlight> prop. So far only
+ the following languages are supported:
+ <ul>
+ <li>
+ <TypeHighlight>English</TypeHighlight>
+ </li>
+ <li>
+ <TypeHighlight>Spanish</TypeHighlight>
+ </li>
+ <li>
+ <TypeHighlight>French</TypeHighlight>
+ </li>
+ <li>
+ <TypeHighlight>Italian</TypeHighlight>
+ </li>
+ <li>
+ <TypeHighlight>Portuguese</TypeHighlight>
+ </li>
+ <li>
+ <TypeHighlight>Russian</TypeHighlight>
+ </li>
+ <li>
+ <TypeHighlight>Chinnese (simplified)</TypeHighlight>
+ </li>
+ <li>
+ <TypeHighlight>Chinnese (traditional)</TypeHighlight>
+ </li>
+ </ul>
+ </DescParagraph>
+
+ <Paper
+ variant="outlined"
+ style={{
+ padding: "25px",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ flexDirection: "column",
+ gap: "20px",
+ }}
+ >
+ <DemoFileMosaicLocalization />
+ </Paper>
+
+ <CodeJSFileMosaicLocalization />
+ </section>
+
+ <section id="file icon">
+ <SubTitle content="File Icons (extensive list)" />
+ <DescParagraph>
+ The <CodeHighlight>FileMosaic</CodeHighlight> component supports
+ aseveral file types to properly set a file icon. The complete list of file icons is the following:
+ </DescParagraph>
+
+ <DemoContainerFileMosaic
+ >
+ <DemoFileMosaicFileIcons />
+ </DemoContainerFileMosaic>
+
+
+ </section>
</MainContentContainer>
<RightMenuContainer>
<RightMenu width="240px" items={rightMenuItems} />