diff --git a/public/serverside/nodeexpress.jpg b/public/serverside/nodeexpress.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..673680a111f656712e88f41e49e5867bc73d56e0
Binary files /dev/null and b/public/serverside/nodeexpress.jpg differ
diff --git a/public/serverside/springbootjavalogo.png b/public/serverside/springbootjavalogo.png
new file mode 100644
index 0000000000000000000000000000000000000000..6fa8675befd80a2b29c332c8cd5e9784c6941a4a
Binary files /dev/null and b/public/serverside/springbootjavalogo.png differ
diff --git a/public/videodemo/NarutoEN.mp4 b/public/videodemo/NarutoEN.mp4
new file mode 100644
index 0000000000000000000000000000000000000000..4b5a4ed9b91b9b0af0af8a5985ded2944c2f6792
Binary files /dev/null and b/public/videodemo/NarutoEN.mp4 differ
diff --git a/src/components/MainMenu/MainMenuSideBar.tsx b/src/components/MainMenu/MainMenuSideBar.tsx
index 4ee5aa2db96af1d6d98e76b9268cf23eb69c1b06..5b9eda571112a5c3e98681e6b24da545fea92e70 100644
--- a/src/components/MainMenu/MainMenuSideBar.tsx
+++ b/src/components/MainMenu/MainMenuSideBar.tsx
@@ -10,6 +10,9 @@ import { MainMenuSideBarItems, MainMenuSideBarProps } from "./MenuSideBarProps";
import ElectricBoltIcon from "@mui/icons-material/ElectricBolt";
import { useNavigateToTop } from "../../hooks/useNavigateToTop";
+import ExpandLess from "@mui/icons-material/ExpandLess";
+import ExpandMore from "@mui/icons-material/ExpandMore";
+
export default function MainMenuSideBar(props: MainMenuSideBarProps) {
const { /* items, */ selectedIndex /* setSelectedIndex */ } = props;
const navigate = useNavigateToTop();
@@ -64,7 +67,6 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
index: 26,
onClick: () => navigate("/components/fullscreen"),
},
-
],
},
{
@@ -126,43 +128,31 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
index: 5,
onClick: () => navigate("/localization"),
},
- {
- label: "Server side",
- index: 6,
- onClick: () => navigate("/server-side"),
- },
- {
+ /* {
label: "Code Generator",
index: 7,
onClick: () => navigate("/code-generator"),
- },
+ }, */
{
label: "Types",
- index: 8,
+ index: 7,
onClick: () => navigate("/types"),
},
{
- label: "Utilities Methods",
+ label: "Server side",
+ index: 6,
+ onClick: () => navigate("/server-side"),
+ },
+ /* {
+ label: "File readers",
+ index: 8,
+ onClick: () => navigate("/file-reader"),
+ },
+ */
+ {
+ label: "File download",
index: 9,
- subMenu: [
- {
- label: "File readers",
- index: 81,
- onClick: () => navigate("/utilities-methods/file-reader"),
- },
-
- {
- label: "File uploader",
- index: 82,
- onClick: () => navigate("/utilities-methods/file-uploader"),
- },
-
- {
- label: "File download",
- index: 83,
- onClick: () => navigate("/utilities-methods/file-downloader"),
- },
- ],
+ onClick: () => navigate("/file-download"),
},
];
@@ -175,6 +165,7 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
})
);
+
/* const handleClick = () => {
//setOpen(!open);
}; */
@@ -187,19 +178,36 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
}; */
//const [selectedIndex, setSelectedIndex] = React.useState(1);
-
+ function handler(ev:React.MouseEvent<HTMLDivElement, MouseEvent>) {
+ console.log('CTRL pressed during click:', ev.ctrlKey);
+ }
const handleListItemClick = (
event: React.MouseEvent<HTMLDivElement, MouseEvent>,
index: number,
onClick: Function | undefined,
withSubMenu?: boolean
) => {
+ handler(event);
+
//setSelectedIndex(index);
+ console.log("newIndex",index, withSubMenu);
if (!withSubMenu) {
onClick?.();
} else {
setRegularItemsIni((arr) =>
arr.map((item) => {
+ /* if (item.subMenu) {
+ const newSubMenu = item.subMenu.map((x) => {
+ if (x.index === index) {
+ return { ...x , };
+ } else {
+ return { ...x };
+ }
+ });
+ return { ...item, subMenu: newSubMenu };
+ } else */
+
+
if (item.index === index) {
return { ...item, isOpen: !item.isOpen };
}
@@ -300,7 +308,9 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
style={{ padding: "2px 20px" }}
key={indexBase}
// selected={subMenu === undefined && selectedIndex === index}
- selected={isOpen && selectedIndex === index}
+ selected={
+ (subMenu === undefined || isOpen) && selectedIndex === index
+ }
onClick={(event) =>
handleListItemClick(
event,
@@ -321,6 +331,7 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
primary={label || ""}
primaryTypographyProps={{ fontWeight: "600" }}
/>
+ {subMenu && <>{isOpen ? <ExpandLess /> : <ExpandMore />}</>}
</ListItemButton>
{subMenu && (
@@ -336,6 +347,7 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
<ListItemButton
style={{ paddingTop: 0 }}
sx={{ pl: 4 }}
+ //selected={selectedIndex === index}
selected={selectedIndex === index}
key={index2 + indexBase}
onClick={(event) =>
diff --git a/src/components/MainPage/MainRight/FileMosaicImageVideoPreviews.tsx b/src/components/MainPage/MainRight/FileMosaicImageVideoPreviews.tsx
index 7834c69b7ee8829618c73372fdbb7443caa23445..a3c990ad865d6d2f79092ca12c0ea97bcf0db15a 100644
--- a/src/components/MainPage/MainRight/FileMosaicImageVideoPreviews.tsx
+++ b/src/components/MainPage/MainRight/FileMosaicImageVideoPreviews.tsx
@@ -40,6 +40,7 @@ const FileMosaicImageVideoPreviews: React.FC<
fileId: FileMosaicProps["id"],
downloadUrl?: string
) => {
+
console.log("Download fileId", fileId);
console.log("Download fileName", files.filter((x) => x.id === fileId)[0]);
console.log("Download downloadUrl", downloadUrl);
diff --git a/src/components/demo-components/demo-download/CodeDemoDownload.tsx b/src/components/demo-components/demo-download/CodeDemoDownload.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..45f33e3bfba31d31fc0efd0553dd84e9a4c3bfb0
--- /dev/null
+++ b/src/components/demo-components/demo-download/CodeDemoDownload.tsx
@@ -0,0 +1,66 @@
+import * as React from "react";
+import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
+
+const CodeDemoDownload1 = () => {
+ 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 CodeDemoDownload1;
+
+const splittedCodeJS = ``;
+const splittedCodeTS = ``;
+
+const completeCodeJS = `import * as React from "react";
+import { FileCard, FileMosaic } from "@files-ui/react";
+
+const outsideDownloadUrl = "https://steamuserimages-a.akamaihd.net/ugc/964219647714510750/C4D97B0E1ECCE3E8A505AFBC8EAD8945E2223C41/?imw=5000&imh=5000&ima=fit&impolicy=Letterbox&imcolor=%23000000&letterbox=false";
+
+const sampleFile = {
+ size: 28 * 1024 * 1024,
+ type: "image/jpeg",
+ name: "Thor.jpeg",
+ imageUrl: outsideDownloadUrl,
+ downloadUrl: outsideDownloadUrl,
+};
+
+const DemoDownloadDifferentOriginDownloadUrl = () => {
+ return (
+ <>
+ <FileMosaic id={4} {...sampleFile} />
+ <FileCard id={4} {...sampleFile} />
+ </>
+ );
+};
+export default DemoDownloadDifferentOriginDownloadUrl;`;
+
+
+const completeCodeTS = `import * as React from "react";
+import { FileCard, FileMosaic, ExtFile } from "../../../files-ui";
+
+const outsideDownloadUrl = "https://steamuserimages-a.akamaihd.net/ugc/964219647714510750/C4D97B0E1ECCE3E8A505AFBC8EAD8945E2223C41/?imw=5000&imh=5000&ima=fit&impolicy=Letterbox&imcolor=%23000000&letterbox=false";
+
+const sampleFile: ExtFile = {
+ size: 28 * 1024 * 1024,
+ type: "image/jpeg",
+ name: "Thor.jpeg",
+ imageUrl: outsideDownloadUrl,
+ downloadUrl: outsideDownloadUrl,
+};
+
+const DemoDownloadDifferentOriginDownloadUrl = () => {
+ return (
+ <>
+ <FileMosaic id={4} {...sampleFile} />
+ <FileCard id={4} {...sampleFile} />
+ </>
+ );
+};
+export default DemoDownloadDifferentOriginDownloadUrl;`;
diff --git a/src/components/demo-components/demo-download/CodeDemoDownload1.tsx b/src/components/demo-components/demo-download/CodeDemoDownload1.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c959332630c79ff9a10d158e56b5492a7e20ec33
--- /dev/null
+++ b/src/components/demo-components/demo-download/CodeDemoDownload1.tsx
@@ -0,0 +1,62 @@
+import * as React from "react";
+import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
+
+const CodeDemoDownload1 = () => {
+ 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 CodeDemoDownload1;
+
+const splittedCodeJS = ``;
+const splittedCodeTS = ``;
+
+const completeCodeJS = `import * as React from "react";
+import { FileCard, FileMosaic } from "@files-ui/react";
+
+const sampleFile = {
+ size: 28 * 1024 * 1024,
+ type: "video/mp4",
+ name: "NarutoAndSasukevsMomoshiiki.mp4",
+};
+
+const VIDEO_URL = "/videodemo/NarutoEN.mp4";
+
+const DemoDownloadSameOrigin = () => {
+ return (
+ <>
+ <FileMosaic id={4} {...sampleFile} downloadUrl={VIDEO_URL} />
+ <FileCard id={4} {...sampleFile} downloadUrl={VIDEO_URL} />
+ </>
+ );
+};
+export default DemoDownloadSameOrigin;`;
+
+
+const completeCodeTS = `import * as React from "react";
+import { FileCard, FileMosaic, ExtFile } from "../../../files-ui";
+
+const sampleFile: ExtFile = {
+ size: 28 * 1024 * 1024,
+ type: "video/mp4",
+ name: "NarutoAndSasukevsMomoshiiki.mp4",
+};
+
+const VIDEO_URL = "/videodemo/NarutoEN.mp4";
+
+const DemoDownloadSameOrigin = () => {
+ return (
+ <>
+ <FileMosaic id={4} {...sampleFile} downloadUrl={VIDEO_URL} />
+ <FileCard id={4} {...sampleFile} downloadUrl={VIDEO_URL} />
+ </>
+ );
+};
+export default DemoDownloadSameOrigin;`;
diff --git a/src/components/demo-components/demo-download/CodeDemoDownload3.tsx b/src/components/demo-components/demo-download/CodeDemoDownload3.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..30624c9fcb95e3817f9c3bdf64ff85ef394a35a4
--- /dev/null
+++ b/src/components/demo-components/demo-download/CodeDemoDownload3.tsx
@@ -0,0 +1,115 @@
+import * as React from "react";
+import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
+
+const CodeDemoDownload1 = () => {
+ 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 CodeDemoDownload1;
+
+const splittedCodeJS = ``;
+const splittedCodeTS = ``;
+
+const completeCodeJS = `import * as React from "react";
+import { FileCard, FileMosaic } from "@files-ui/react";
+
+const outsideDownloadUrl =
+ "https://steamuserimages-a.akamaihd.net/ugc/964219647714510750/C4D97B0E1ECCE3E8A505AFBC8EAD8945E2223C41/?imw=5000&imh=5000&ima=fit&impolicy=Letterbox&imcolor=%23000000&letterbox=false";
+
+const sampleFile = {
+ size: 28 * 1024 * 1024,
+ type: "image/jpeg",
+ name: "Thor.jpeg",
+ imageUrl: outsideDownloadUrl,
+ downloadUrl: outsideDownloadUrl,
+};
+
+const DemoDownloadDifferentOriginOnDownload = () => {
+ const handleDownload = async (fileId, downloadUrl) => {
+ console.log("Download fileId", fileId);
+ console.log("Download downloadUrl", downloadUrl);
+ if (!downloadUrl) return;
+ try {
+ const image = await fetch(downloadUrl);
+ const imageBlob = await image.blob();
+ const imageURL = URL.createObjectURL(imageBlob);
+
+ const anchor = document.createElement("a");
+ anchor.href = imageURL;
+ anchor.download = sampleFile.name || "newFile.jpeg";
+
+ document.body.appendChild(anchor);
+ anchor.click();
+ document.body.removeChild(anchor);
+ URL.revokeObjectURL(imageURL);
+ } catch (error) {
+ console.log("Download error", error);
+ console.error(error);
+ }
+ };
+ return (
+ <>
+ <FileMosaic id={4} {...sampleFile} onDownload={handleDownload} />
+ <FileCard id={4} {...sampleFile} onDownload={handleDownload} />
+ </>
+ );
+};
+export default DemoDownloadDifferentOriginOnDownload;`;
+
+
+const completeCodeTS = `import * as React from "react";
+import { FileCard, FileMosaic, ExtFile } from "../../../files-ui";
+
+const outsideDownloadUrl =
+ "https://steamuserimages-a.akamaihd.net/ugc/964219647714510750/C4D97B0E1ECCE3E8A505AFBC8EAD8945E2223C41/?imw=5000&imh=5000&ima=fit&impolicy=Letterbox&imcolor=%23000000&letterbox=false";
+
+const sampleFile: ExtFile = {
+ size: 28 * 1024 * 1024,
+ type: "image/jpeg",
+ name: "Thor.jpeg",
+ imageUrl: outsideDownloadUrl,
+ downloadUrl: outsideDownloadUrl,
+};
+
+const DemoDownloadDifferentOriginOnDownload = () => {
+ const handleDownload = async (
+ fileId: string | number | undefined,
+ downloadUrl?: string | undefined
+ ) => {
+ console.log("Download fileId", fileId);
+ console.log("Download downloadUrl", downloadUrl);
+ if (!downloadUrl) return;
+ try {
+ const image = await fetch(downloadUrl);
+ const imageBlob = await image.blob();
+ const imageURL = URL.createObjectURL(imageBlob);
+
+ const anchor = document.createElement("a");
+ anchor.href = imageURL;
+ anchor.download = sampleFile.name || "newFile.jpeg";
+
+ document.body.appendChild(anchor);
+ anchor.click();
+ document.body.removeChild(anchor);
+ URL.revokeObjectURL(imageURL);
+ } catch (error) {
+ console.log("Download error", error);
+ console.error(error);
+ }
+ };
+ return (
+ <>
+ <FileMosaic id={4} {...sampleFile} onDownload={handleDownload} />
+ <FileCard id={4} {...sampleFile} onDownload={handleDownload} />
+ </>
+ );
+};
+export default DemoDownloadDifferentOriginOnDownload;`;
diff --git a/src/components/demo-components/demo-download/DemoDownload1.tsx b/src/components/demo-components/demo-download/DemoDownload1.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ce45e9e2639c5653636e55b49c01b13b870d2017
--- /dev/null
+++ b/src/components/demo-components/demo-download/DemoDownload1.tsx
@@ -0,0 +1,20 @@
+import * as React from "react";
+import { FileCard, FileMosaic, ExtFile } from "../../../files-ui";
+
+const sampleFile: ExtFile = {
+ size: 28 * 1024 * 1024,
+ type: "video/mp4",
+ name: "NarutoAndSasukevsMomoshiiki.mp4",
+};
+
+const VIDEO_URL = "/videodemo/NarutoEN.mp4";
+
+const DemoDownloadSameOrigin = () => {
+ return (
+ <>
+ <FileMosaic id={4} {...sampleFile} downloadUrl={VIDEO_URL} />
+ <FileCard id={4} {...sampleFile} downloadUrl={VIDEO_URL} />
+ </>
+ );
+};
+export default DemoDownloadSameOrigin;
diff --git a/src/components/demo-components/demo-download/DemoDownload2.tsx b/src/components/demo-components/demo-download/DemoDownload2.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..91abeed6d408366d9cd9ec18ab33f6279d985bfb
--- /dev/null
+++ b/src/components/demo-components/demo-download/DemoDownload2.tsx
@@ -0,0 +1,22 @@
+import * as React from "react";
+import { FileCard, FileMosaic, ExtFile } from "../../../files-ui";
+
+const outsideDownloadUrl = "https://steamuserimages-a.akamaihd.net/ugc/964219647714510750/C4D97B0E1ECCE3E8A505AFBC8EAD8945E2223C41/?imw=5000&imh=5000&ima=fit&impolicy=Letterbox&imcolor=%23000000&letterbox=false";
+
+const sampleFile: ExtFile = {
+ size: 28 * 1024 * 1024,
+ type: "image/jpeg",
+ name: "Thor.jpeg",
+ imageUrl: outsideDownloadUrl,
+ downloadUrl: outsideDownloadUrl,
+};
+
+const DemoDownloadDifferentOriginDownloadUrl = () => {
+ return (
+ <>
+ <FileMosaic id={4} {...sampleFile} />
+ <FileCard id={4} {...sampleFile} />
+ </>
+ );
+};
+export default DemoDownloadDifferentOriginDownloadUrl;
diff --git a/src/components/demo-components/demo-download/DemoDownload3.tsx b/src/components/demo-components/demo-download/DemoDownload3.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..847d23b3783483cbac8885f44a4d251264cf9e9c
--- /dev/null
+++ b/src/components/demo-components/demo-download/DemoDownload3.tsx
@@ -0,0 +1,48 @@
+import * as React from "react";
+import { FileCard, FileMosaic, ExtFile } from "../../../files-ui";
+
+const outsideDownloadUrl =
+ "https://steamuserimages-a.akamaihd.net/ugc/964219647714510750/C4D97B0E1ECCE3E8A505AFBC8EAD8945E2223C41/?imw=5000&imh=5000&ima=fit&impolicy=Letterbox&imcolor=%23000000&letterbox=false";
+
+const sampleFile: ExtFile = {
+ size: 28 * 1024 * 1024,
+ type: "image/jpeg",
+ name: "Thor.jpeg",
+ imageUrl: outsideDownloadUrl,
+ downloadUrl: outsideDownloadUrl,
+};
+
+const DemoDownloadDifferentOriginOnDownload = () => {
+ const handleDownload = async (
+ fileId: string | number | undefined,
+ downloadUrl?: string | undefined
+ ) => {
+ console.log("Download fileId", fileId);
+ console.log("Download downloadUrl", downloadUrl);
+ if (!downloadUrl) return;
+ try {
+ const image = await fetch(downloadUrl);
+ const imageBlob = await image.blob();
+ const imageURL = URL.createObjectURL(imageBlob);
+
+ const anchor = document.createElement("a");
+ anchor.href = imageURL;
+ anchor.download = sampleFile.name || "newFile.jpeg";
+
+ document.body.appendChild(anchor);
+ anchor.click();
+ document.body.removeChild(anchor);
+ URL.revokeObjectURL(imageURL);
+ } catch (error) {
+ console.log("Download error", error);
+ console.error(error);
+ }
+ };
+ return (
+ <>
+ <FileMosaic id={4} {...sampleFile} onDownload={handleDownload} />
+ <FileCard id={4} {...sampleFile} onDownload={handleDownload} />
+ </>
+ );
+};
+export default DemoDownloadDifferentOriginOnDownload;
diff --git a/src/components/demo-components/demo-server-side/CodeDemoServerSideExpress.tsx b/src/components/demo-components/demo-server-side/CodeDemoServerSideExpress.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..440d97787e9845229b6f2244704efe52ec78fef3
--- /dev/null
+++ b/src/components/demo-components/demo-server-side/CodeDemoServerSideExpress.tsx
@@ -0,0 +1,58 @@
+import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
+const CodeDemoServerSideExpress = ({ splittedOnly = false }) => {
+ return (
+ <ShowDemoCode
+ splittedOnly={splittedOnly}
+ codeCompleteJS={completeCodeJS}
+ codeCompleteTS={completeCodeTS}
+ codeSandboxJS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
+ codeSandboxTS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
+ codeSplittedJS={splittedCodeJS}
+ codeSplittedTS={splittedCodeTS}
+ />
+ );
+};
+export default CodeDemoServerSideExpress;
+
+const splittedCodeJS = `const express = require("express");
+const fileUpload = require("express-fileupload");
+// ... some code
+app.post("/upload-my-file", async (req, res) => {
+ try {
+ if (!req.files) {
+ res.send({
+ success: false,
+ message: "There was no file found in request",
+ payload: {},
+ });
+ } else {
+ //Use the name of the input field (i.e. "file") to retrieve the uploaded file
+ let file = req.files.file;
+ //Use the mv() method to place the file in upload directory (i.e. "uploads")
+ file.mv("./uploads/" + file.name);
+ //send response
+ res.send({
+ success: true,
+ message: "File was uploaded successfuly",
+ payload: {
+ name: file.name,
+ mimetype: file.mimetype,
+ size: file.size,
+ path: "/files/uploads/",
+ url: "https://my-ftp-server.com/bjYJGFYgjfVGHVb",
+ },
+ });
+ }
+ } catch (err) {
+ res.status(500).send({
+ status: false,
+ message: "Unexpected problem",
+ payload: {},
+ });
+ }
+});`;
+
+const splittedCodeTS = splittedCodeJS;
+const completeCodeJS = ``;
+
+const completeCodeTS = ``;
diff --git a/src/components/demo-components/demo-server-side/CodeDemoServerSideJava.tsx b/src/components/demo-components/demo-server-side/CodeDemoServerSideJava.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..7503537907e5c657de367d458ce8bf8172f03aa5
--- /dev/null
+++ b/src/components/demo-components/demo-server-side/CodeDemoServerSideJava.tsx
@@ -0,0 +1,152 @@
+import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
+const CodeDemoServerSideJava = ({ splittedOnly = false }) => {
+ return (
+ <ShowDemoCode
+ splittedOnly={splittedOnly}
+ codeCompleteJS={completeCodeJS}
+ codeCompleteTS={completeCodeTS}
+ codeSandboxJS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
+ codeSandboxTS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
+ codeSplittedJS={splittedCodeJS}
+ codeSplittedTS={splittedCodeTS}
+ />
+ );
+};
+export default CodeDemoServerSideJava;
+
+const splittedCodeJS = `// FilesUiResponse.java
+//...imports
+public class FilesUiResponse {
+ Boolean success;
+ String message;
+ Object payload;
+//..more code
+}
+
+// FileUploadController.java
+//...imports
+@CrossOrigin(origins = "*")
+@RestController
+public class FileUploadController {
+ //..more code
+ @PostMapping("/file")
+ public ResponseEntity<FilesUiResponse> uploadFile(
+ @RequestParam("file") MultipartFile multipartFile
+ ) {
+ try {
+ FileItem resultFileItem = FileUploadUtil.saveFileInDir(multipartFile);
+ FilesUiResponse response = new FilesUiResponse(
+ true,
+ "Files upladed successfully",
+ resultFileItem);
+ return new ResponseEntity<>(response, HttpStatus.OK);
+ } catch (IOException ioe) {
+ FilesUiResponse response = new FilesUiResponse(
+ false,
+ "Error on upload",
+ null);
+ System.out.println(ioe.getMessage());
+ return new ResponseEntity<>(response, HttpStatus.INTERNAL_SERVER_ERROR);
+ }
+ }
+ //... more code
+}
+
+// FileUploadUtil.java
+public class FileUploadUtil {
+ public static String UPLOAD_PATH = "Files-Upload";
+
+ public static FileItem saveFileInDir(MultipartFile multipartFile) throws IOException {
+ Path uploadDirectory = Paths.get(UPLOAD_PATH);
+
+ String fileId = createUUID();
+ String fileName = StringUtils.cleanPath(multipartFile.getOriginalFilename());
+
+ String extention = FileUploadUtil.getExtensionByStringHandling(fileName).get();
+
+ String finalFileName = createUUIDfileName(extention);
+ String mimeType = multipartFile.getContentType();
+
+ checkDircectoryIfExists(uploadDirectory);
+ long size = multipartFile.getSize();
+
+
+ System.out.println("fileName: " + fileName);
+ System.out.println("newFIleName: " + finalFileName);
+ System.out.println("extention: " + extention);
+ System.out.println("size: " + size);
+
+ try (InputStream inputStream = multipartFile.getInputStream()) {
+ Path filePath = uploadDirectory.resolve(fileName);
+
+ Files.copy(inputStream, filePath, StandardCopyOption.REPLACE_EXISTING);
+
+ FileItem finalFileItem = new FileItem(
+ fileId,
+ finalFileName,
+ size,
+ mimeType,
+ "./UPLOAD_PATH"
+ );
+
+ // add to database here...
+
+ return finalFileItem;
+ } catch (IOException ioe) {
+ throw new IOException("Error on saving uploaded file: " + fileName, ioe);
+ }
+ }
+ public static String createUUID() {
+ UUID uuid = UUID.randomUUID();
+ String fileId = uuid.toString();
+ return fileId;
+ }
+
+ public static String createUUIDfileName(String extention) {
+ return createUUID() + "." + extention;
+ }
+
+ // more code...
+}
+
+// FileItem.java
+// ..imports
+public class FileItem {
+
+ public FileItem() { }
+
+ public FileItem(String idFileItem, String name, long size, String mimeType, String path) {
+ this.idFileItem = idFileItem;
+ this.name = name;
+ this.size=size;
+ this.mimeType = mimeType;
+ this.path = path;
+ this.creationTime = new Date();
+ this.status = true;
+ }
+ @JsonIgnore
+ private String idFileItem;
+
+ private long size;
+
+ @JsonProperty("type")
+ private String mimeType;
+
+ private String name;
+
+ @JsonIgnore
+ private String path;
+
+ private Date creationTime;
+
+ @JsonIgnore
+ private Boolean status;
+
+ //more code...
+}
+`;
+
+const splittedCodeTS = splittedCodeJS;
+const completeCodeJS = ``;
+
+const completeCodeTS = ``;
diff --git a/src/components/demo-components/dropzone-demo/DemoDropzoneUploading.jsx b/src/components/demo-components/dropzone-demo/DemoDropzoneUploading.jsx
index aa568f12f38b0719beeb3af77b375ecd842b2c60..65e6adab23f12ae923ccf736b7aaa0609c977c25 100644
--- a/src/components/demo-components/dropzone-demo/DemoDropzoneUploading.jsx
+++ b/src/components/demo-components/dropzone-demo/DemoDropzoneUploading.jsx
@@ -16,9 +16,9 @@ const DemoDropzoneUploading = ({ button }) => {
const removeFile = (id) => {
setFiles(files.filter((x) => x.id !== id));
};
- const handleFinishUpload=(uploadedFiles)=>{
+ const handleFinishUpload = (uploadedFiles) => {
console.log("Upload has finished", uploadedFiles);
- }
+ };
if (button)
return (
<div
@@ -38,7 +38,7 @@ const DemoDropzoneUploading = ({ button }) => {
maxFileSize={28 * 1024 * 1024}
maxFiles={2}
actionButtons={{
- position: "bottom",
+ position: "after",
uploadButton: {},
abortButton: {},
}}
@@ -65,7 +65,13 @@ const DemoDropzoneUploading = ({ button }) => {
}}
>
{files.map((file) => (
- <FileCard key={file.id} {...file} onDelete={removeFile} info preview/>
+ <FileCard
+ key={file.id}
+ {...file}
+ onDelete={removeFile}
+ info
+ preview
+ />
))}
</div>
)}
@@ -78,7 +84,7 @@ const DemoDropzoneUploading = ({ button }) => {
accept={"image/*"}
maxFileSize={28 * 1024 * 1024}
maxFiles={2}
- actionButtons={{ position: "bottom", uploadButton: {}, abortButton: {} }}
+ actionButtons={{ position: "after", uploadButton: {}, abortButton: {} }}
uploadConfig={{
url: "https://www.myawsomeserver.com/upload",
method: "POST",
@@ -92,8 +98,14 @@ const DemoDropzoneUploading = ({ button }) => {
fakeUpload
>
{files.map((file) => (
- <FileMosaic key={file.id} {...file} onDelete={removeFile} info preview/>
- ))}
+ <FileMosaic
+ key={file.id}
+ {...file}
+ onDelete={removeFile}
+ info
+ preview
+ />
+ ))}
</Dropzone>
);
};
diff --git a/src/components/layout-pages/FooterPage.scss b/src/components/layout-pages/FooterPage.scss
new file mode 100644
index 0000000000000000000000000000000000000000..f20e45ba0a257ec5db8e02697894ac86162f89eb
--- /dev/null
+++ b/src/components/layout-pages/FooterPage.scss
@@ -0,0 +1,28 @@
+.fui-page-footer-container {
+ display: flex;
+ width: 100%;
+ align-items: center;
+ justify-content: space-between;
+ .redirect-container {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ .like-icon-container {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ @media (max-width: "960px") {
+ .redirect-container {
+ display: none;
+ }
+ .redirect-small-container {
+ display: flex;
+ }
+ .like-icon-container {
+ width: 100%;
+ }
+ }
+}
diff --git a/src/components/layout-pages/FooterPage.tsx b/src/components/layout-pages/FooterPage.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..80baaa503062423c8a8f553372101eccc9f36453
--- /dev/null
+++ b/src/components/layout-pages/FooterPage.tsx
@@ -0,0 +1,67 @@
+import { Button, Divider } from "@mui/material";
+import * as React from "react";
+import KeyboardArrowLeftIcon from "@mui/icons-material/KeyboardArrowLeft";
+import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
+import { useNavigate } from "react-router";
+import "./FooterPage.scss";
+
+interface FooterPageProps {
+ labelBefore?: string;
+ labelAfter?: string;
+ linkBefore?: string;
+ linkAfter?: string;
+ page: string;
+}
+const FooterPage: React.FC<FooterPageProps> = (props: FooterPageProps) => {
+ const { labelAfter, labelBefore, linkAfter, linkBefore, page } = props;
+ const redirect = useNavigate();
+ return (
+ <footer>
+ <Divider style={{ width: "100%" }}></Divider>
+ <div className="fui-page-footer-container">
+ <div className="redirect-small-container">
+ {labelBefore && (
+ <Button
+ startIcon={<KeyboardArrowLeftIcon />}
+ onClick={linkBefore ? () => redirect(linkBefore) : undefined}
+ >
+ {labelBefore}
+ </Button>
+ )}
+ {labelAfter && (
+ <Button
+ endIcon={<KeyboardArrowRightIcon />}
+ onClick={labelAfter ? () => redirect(labelAfter) : undefined}
+ >
+ {labelAfter}
+ </Button>
+ )}
+ </div>
+
+ <div className="redirect-container">
+ {labelBefore && (
+ <Button
+ startIcon={<KeyboardArrowLeftIcon />}
+ onClick={linkBefore ? () => redirect(linkBefore) : undefined}
+ >
+ {labelBefore}
+ </Button>
+ )}
+ </div>
+
+ <div className="like-icon-container">like icons</div>
+ <div className="redirect-container">
+ {labelAfter && (
+ <Button
+ endIcon={<KeyboardArrowRightIcon />}
+ onClick={linkAfter ? () => redirect(linkAfter) : undefined}
+ >
+ {labelAfter}
+ </Button>
+ )}
+ </div>
+ </div>
+ </footer>
+ );
+};
+export default FooterPage;
diff --git a/src/components/layout-pages/MainContentContainer.jsx b/src/components/layout-pages/MainContentContainer.jsx
index eb002ad343a70f3e0a016b357fab44143fefb541..3d54657ec59e79cf903cf8fccf8963a5e7cb411b 100644
--- a/src/components/layout-pages/MainContentContainer.jsx
+++ b/src/components/layout-pages/MainContentContainer.jsx
@@ -22,6 +22,7 @@ const MainContentContainer = ({ children }) => {
}}
>
{children}
+
</Box>
</Box>
);
diff --git a/src/files-ui/components/dropzone/components/DropzoneHeader/DropzoneHeader.tsx b/src/files-ui/components/dropzone/components/DropzoneHeader/DropzoneHeader.tsx
index dc0d040e7a73370fbe5ab4aefdc945a74cf40318..7b3d48c48c4b33538da42cd413ce6b971e7c0d58 100644
--- a/src/files-ui/components/dropzone/components/DropzoneHeader/DropzoneHeader.tsx
+++ b/src/files-ui/components/dropzone/components/DropzoneHeader/DropzoneHeader.tsx
@@ -45,7 +45,7 @@ const DropzoneHeader: React.FC<DropzoneHeaderProps> = (
className = "",
resetStyles,
color,
- firstClassName="",
+ firstClassName = "",
} = props;
const DropzoneHeaderLocalizer: LocalLabels = DropzoneLocalizerSelector(
@@ -77,8 +77,9 @@ const DropzoneHeader: React.FC<DropzoneHeaderProps> = (
const maxFileSizeMessenger: FunctionLabel =
DropzoneHeaderLocalizer.maxSizeMessage as FunctionLabel;
- if (maxFileSize) {
- result.push(maxFileSizeMessenger(fileSizeFormater(maxFileSize)));
+ const maxFileSizeFormatted = fileSizeFormater(maxFileSize);
+ if (maxFileSizeFormatted) {
+ result.push(maxFileSizeMessenger(maxFileSizeFormatted));
result.push(<React.Fragment>{","} </React.Fragment>);
}
const validFileSizeMessenger: FunctionLabel =
diff --git a/src/files-ui/components/file-card/FileCard.tsx b/src/files-ui/components/file-card/FileCard.tsx
index 1af0ffb051556463ffd36c194c469a30a6426604..7dc71ff89002a3c34ea4ba125e2b92b5c84046fe 100644
--- a/src/files-ui/components/file-card/FileCard.tsx
+++ b/src/files-ui/components/file-card/FileCard.tsx
@@ -2,8 +2,7 @@ import * as React from "react";
import { FileCardProps } from "./FileCardProps";
import "./FileCard.scss";
import "./components/FileCardPaper.scss";
-import { getLocalFileItemData } from "../file-item/utils/getLocalFileItemData";
-import { fileSizeFormater, handleClickUtil, shrinkWord } from "../../core";
+import { fileSizeFormater, getLocalFileItemData, handleClickUtil, shrinkWord } from "../../core";
import useProgress from "../file-mosaic/hooks/useProgress";
import useFileMosaicInitializer from "../file-mosaic/hooks/useFileMosaicInitializer";
import { useIsUploading } from "../file-mosaic/hooks/useIsUploading";
@@ -147,9 +146,7 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
videoUrl
);
//The size formatted and rounded in 2 decimals
- const sizeFormatted: string = localSize
- ? fileSizeFormater(localSize)
- : "0 KB";
+ const sizeFormatted: string | undefined = fileSizeFormater(localSize);
//alwaysActive
const [showInfo, setShowInfo] = React.useState<boolean>(false);
diff --git a/src/files-ui/components/file-item/components/FileItem/FileItem.scss b/src/files-ui/components/file-item/components/FileItem/FileItem.scss
deleted file mode 100644
index 3d956551cd8d0cc858e838a2b181969c53c35794..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItem/FileItem.scss
+++ /dev/null
@@ -1,272 +0,0 @@
-@import url(https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,900);
-
-.file-item-full-container-container {
- cursor: text;
- box-sizing: border-box;
- font-family: "Poppins", sans-serif;
- width: 132px;
- word-break: break-word;
- font-size: 15px;
- font-weight: 400;
- //background-color: cadetblue;
-
- &.hovering {
- // background-color: aqua;
- border-radius: 8px;
- }
-
- //outline: 1px solid rgb(20, 130, 220);
- .file-item-icon-container {
- position: relative;
- height: 132px;
- width: 132px;
- border-radius: 8px;
- box-sizing: border-box;
-
- .full-info {
- &::-webkit-scrollbar {
- width: 9px;
- }
-
- &::-webkit-scrollbar-track {
- background: transparent;
- }
-
- &::-webkit-scrollbar-thumb {
- background-color: #646c7fa9;
- border-radius: 20px;
- border: transparent;
- }
-
- text-align: left;
- position: absolute;
- left: 0;
- top: 0;
-
- scrollbar-width: thin;
- line-height: 1.5;
- letter-spacing: 0.02857em;
- //border: 1px solid white;
- font-family: "Poppins", sans-serif;
- width: inherit;
- background-color: rgba(0, 0, 0, 0.85);
- word-break: break-word;
- //margin: 1% 4%;
- // padding: 1% 1%;
- border-radius: 7px;
- //z-index: 100;
- height: 100%;
- width: 100%;
-
- font-size: 0.8rem;
- transition: all 0.5s ease 0s;
- //overflow: hidden;
- overflow: auto;
- color: white;
-
- .name {
- //margin: -7px 0 0 0;
- padding: 0 5px;
- font-weight: 399;
- // text-align: center;
-
- .sub-label {
- font-weight: 600;
- }
-
- &.success {
- border: 1px dashed #2e7d32;
- background-color: #1b5e20;
- //margin: 0 2px;
- font-size: 0.7rem;
-
- border-radius: 4px;
- }
-
- &.error {
- background-color: #c62828;
- border: 1px dashed #d32f2f;
- font-size: 0.7rem;
-
- //margin: 0 2px;
- border-radius: 4px;
- }
- }
-
- .size {
- // margin-top: 5px;
- padding: 0 5px;
- font-weight: 500;
-
- .sub-label {
- font-weight: 600;
- }
- }
-
- .mime {
- //display: none;
- //text-align: left;
-
- padding: 0 5px;
- font-weight: 399;
-
- .sub-label {
- font-weight: 600;
- }
- }
-
- &.hide {
- //height: 0%;
- display: none;
- }
- }
- }
-
- .file-item-name {
- margin-top: 3px;
- height: 31px;
- text-align: center;
- //width: 133px;
- width: 100%;
- color: black;
- //font-size: 0.95rem;
- font-size: 15px;
- //line-height: 0.9rem;
- line-height: 15px;
- font-weight: 400;
- letter-spacing: 0.07rem;
- word-break: break-all;
- padding: 0.5px;
- text-align: center;
- overflow: hidden;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-line-clamp: 2; /* number of lines to show */
- line-clamp: 2;
- -webkit-box-orient: vertical;
- &.dark-mode {
- color: rgba(255, 255, 255, 0.7);
- }
- &.not-allowed {
- background-color: rgba(180, 16, 16, 0.7);
- }
- }
-}
-
-.file-item-container {
- background-repeat: no-repeat;
- background-size: cover;
- background-position: center;
-}
-
-.dui-file-item-icon {
- font-size: 0.7rem;
- //border: 1px solid wheat;
- //color: white;
- min-width: 19px;
- min-height: 19px;
- margin: 0;
- padding: 2px 2px;
- border-radius: 50%;
- background-color: rgba(32, 33, 36, 0.65);
-
- word-break: break-word;
-
- &:hover {
- background-color: rgba(32, 33, 36, 0.85);
- //outline: 0.5px solid wheat;
- }
-}
-
-////////////////// TOOLTIP
-.dz-ui-file-item-container {
- &.dz-ui-tooltip {
- cursor: default;
- position: relative;
- display: inline-block;
-
- // border-bottom: 1px dotted black;
- &:hover {
- z-index: 2;
-
- .dropzone-ui-tooltiptext {
- visibility: visible;
- opacity: 1;
- z-index: 2;
- }
- }
-
- .dropzone-ui-tooltiptext {
- font-family: "Poppins", sans-serif;
- font-size: 0.8rem;
- visibility: hidden;
- width: 133px;
- // background-color: green;
- color: #fff;
- text-align: center;
- border-radius: 6px;
- padding: 2px 2px;
- position: absolute;
- //z-index: 2;
- //top: 190px;
- top: 180px;
- left: 66px;
- margin-left: -60px;
-
- /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
- opacity: 0;
- transition: opacity 1s;
-
- &.not-valid-error {
- background: linear-gradient(to top, #c62828, #d32f2f);
-
- &::after {
- border-color: transparent transparent #d32f2f transparent;
- }
- }
-
- &.success {
- //background-color: green;
- background: linear-gradient(to top, #1b5e20, #2e7d32);
-
- &::after {
- border-color: transparent transparent #2e7d32 transparent;
- }
- }
-
- &::after {
- content: "";
- position: absolute;
- bottom: 100%;
- left: 50%;
- margin-left: -5px;
- border-width: 5px;
- border-style: solid;
- //border-color: transparent transparent green transparent;
- }
- }
- }
-
-
-
-
- &.dz-ui-paper-elevation-1 {
- box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
- 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
- }
-
- .dz-ui-paper-elevation-2 {
- box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
- 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
- }
-
- .dz-ui-paper-elevation-3 {
- box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2),
- 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
- }
-
- .dz-ui-paper-elevation-4 {
- box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
- 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
- }
-}
diff --git a/src/files-ui/components/file-item/components/FileItem/FileItem.tsx b/src/files-ui/components/file-item/components/FileItem/FileItem.tsx
deleted file mode 100644
index a23de8e55543210458fe9a937734a485f5633023..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItem/FileItem.tsx
+++ /dev/null
@@ -1,301 +0,0 @@
-import * as React from "react";
-import { fileSizeFormater } from "../../../../core";
-import DownloadHidden from "../../../download-hidden/DownloadHidden";
-import { mergeProps } from "../../../overridable";
-import { Tooltip } from "../../../tooltip";
-import useFileItemRootClassName from "../../hooks/useFileItemClassName";
-import { getLocalFileItemData } from "../../utils/getLocalFileItemData";
-import { showFileItemComponent } from "../../utils/showFileItemComponent";
-import { FileItemProps, FileItemPropsDefault } from "./FileItemProps";
-import "./FileItem.scss";
-import FileItemImage from "../FileItemImage/FileItemImage";
-import useFileItemInitializer from "../../hooks/useFileItemInitializer";
-import FileItemMainLayer from "../FileItemMainLayer/MainLayer/FileItemMainLayer";
-import useFileItemProgress from "../../hooks/useFileItemProgress";
-import FileItemFullInfoLayer from "../FileItemFullInfoLayer/FileItemFullInfoLayer";
-
-const FileItem: React.FC<FileItemProps> = (props: FileItemProps) => {
- const {
- style,
- className,
-
- file,
- name: propName,
- size: propSize,
- type: propType,
-
- id,
- valid,
- errors,
- uploadStatus,
- uploadMessage,
- progress,
-
- xhr,
-
- localization,
- preview,
- imageUrl,
- info,
- backgroundBlurImage = true,
- darkMode,
-
- alwaysActive,
-
- resultOnTooltip,
-
- onDelete,
- onCancel,
- onAbort,
-
- onDownload,
- onSee,
- onWatch,
-
- onlyImage,
-
- //hd,
-
- downloadUrl,
-
- showProgress,
-
- onDoubleClick,
- onRightClick,
- } = mergeProps(props, FileItemPropsDefault);
-
- //ref for anchor element
- const downloadAnchorRef = React.useRef<HTMLAnchorElement>(null);
-
- /*************** HOVERING ***************/
- const [hovering, setHOvering] = React.useState<boolean>(false);
- const handleOnHoverEnter: React.MouseEventHandler<HTMLDivElement> = () => {
- setHOvering(true);
- };
- const handleOnHoverLeave: React.MouseEventHandler<HTMLDivElement> = () => {
- setHOvering(false);
- };
- //className created
- const rootClassNameCreated: string | undefined = useFileItemRootClassName(
- resultOnTooltip,
- className,
- hovering
- );
-
- const showFileItem: boolean = showFileItemComponent(
- file,
- propName
- // Boolean(rootClassNameCreated)
- );
-
- // local properties from file
- const [localName, localType, localSize]: [
- string,
- string | undefined,
- number | undefined
- ] = getLocalFileItemData(file, propName, propType, propSize);
-
- // handle progress
- const localProgress = useFileItemProgress(progress, showProgress, xhr);
-
- //Initialize File Item
- const [isImage, isVideo, url, imageSource]: [
- boolean,
- boolean,
- string,
- string | undefined
- ] = useFileItemInitializer(
- file,
- propName,
- propType,
- valid,
- preview as boolean,
- imageUrl
- );
-
- //The size formatted and rounded in 2 decimals
- const sizeFormatted: string = localSize
- ? fileSizeFormater(localSize)
- : "0 KB";
- //alwaysActive
- const [showInfo, setShowInfo] = React.useState<boolean>(false);
-
- /*************** Click ***************/
- /**
- * TO-DO: Add functionallity on click event
- * @param e event object
- */
- function handleClick<T extends HTMLDivElement>(
- e: React.MouseEvent<T, MouseEvent>
- ): void {
- //avoid children to trigger onClick ripple from parent
- e.stopPropagation();
- }
-
- /***************** HANDLERS **********/
- //delete file item
- const handleDelete = (): void => {
- onDelete?.(id);
- };
- //open info layer
- const handleOpenInfo = () => {
- setShowInfo(true);
- };
- //close info layer
- const handleCloseInfo = () => {
- setShowInfo(false);
- };
- //handle watch video
- const handleOpenVideo = async () => {
- if (file) onWatch?.(file);
- };
- //open image
- const handleOpenImage = async () => {
- if (imageSource) {
- // if (hd) {
- // const response = await readImagePromise(file);
- // onSee?.(response || "");
- // } else {
- onSee?.(imageSource);
- //}
- }
- };
-
- /********** DOWNLOAD HANDLERS **********/
- /**
- * onDownload, form 1
- * Trigger dowload directly performing a click on anchor element
- */
- const innerDownload = () => {
- const anchorElement = downloadAnchorRef.current;
- if (anchorElement) {
- anchorElement.click();
- }
- };
- /**
- * onDownlad, form 2
- * Handle the download triggering an outside event
- */
- const handleDownload = () => {
- if (onDownload) {
- onDownload?.(id, downloadUrl);
- } else if (typeof downloadUrl == "string") {
- innerDownload();
- }
- };
- /**
- * Perform abort event when xhr is given
- */
- const handleAbort = (): void => {
- //trigger abort event
- xhr?.abort();
- // handle externally the abort event
- onAbort?.(id);
- };
- /**
- * Handle onCancel event
- */
- const handleCancel = (): void => {
- // handle externally the cancel event
- onCancel?.(id);
- };
-
- const handleDoubleClick: React.MouseEventHandler<HTMLDivElement> = (
- evt: React.MouseEvent
- ): void => {
- alert("double click on file");
- evt.preventDefault();
-
- onDoubleClick?.(evt);
- };
- function handleRightClick(evt: React.MouseEvent) {
- // alert("right click!!!!");
- //get coordinates
- //zindex
- //create menu component
- // evt.preventDefault();
- onRightClick?.(evt);
- }
- //console.log("FileItem onCancel", onCancel);
-
- if (showFileItem) {
- return (
- <div
- className={rootClassNameCreated}
- style={style}
- onMouseEnter={handleOnHoverEnter}
- onMouseLeave={handleOnHoverLeave}
- onClick={handleClick}
- onDoubleClick={handleDoubleClick}
- onContextMenu={handleRightClick}
- >
- <div className={`file-item-icon-container ${showInfo ? " hide" : ""}`}>
- <FileItemImage
- imageSource={imageSource}
- url={url}
- fileName={localName}
- backgroundBlurImage={backgroundBlurImage as boolean}
- />
- <FileItemMainLayer
- showInfo={showInfo}
- fileName={localName}
- onDelete={onDelete ? handleDelete : undefined}
- onOpenImage={onSee && preview ? handleOpenImage : undefined}
- onOpenVideo={onWatch && preview ? handleOpenVideo : undefined}
- onDownloadFile={
- onDownload || downloadUrl ? handleDownload : undefined
- }
- isVideo={isVideo}
- onOpenInfo={handleOpenInfo}
- info={info || false}
- valid={valid}
- isImage={isImage}
- sizeFormatted={sizeFormatted}
- uploadStatus={uploadStatus}
- localization={localization}
- hovering={alwaysActive || hovering}
- progress={localProgress}
- onAbort={onAbort ? handleAbort : undefined}
- onCancel={onCancel ? handleCancel : undefined}
- />
- <FileItemFullInfoLayer
- showInfo={showInfo}
- errors={errors}
- fileName={localName}
- fileSize={sizeFormatted}
- fileType={localType}
- valid={valid}
- onClose={handleCloseInfo}
- uploadStatus={uploadStatus}
- uploadMessage={uploadMessage}
- localization={localization}
- resultOnTooltip={resultOnTooltip}
- />
- </div>
- {!onlyImage && (
- <div
- className={darkMode ? "file-item-name dark-mode" : "file-item-name"}
- >
- {/* {shrinkWord(localName)} */}
- {localName}
- </div>
- )}
- <Tooltip
- open={resultOnTooltip}
- //open={true}
- uploadStatus={uploadStatus}
- valid={valid}
- errors={errors}
- uploadMessage={uploadMessage}
- ></Tooltip>
- <DownloadHidden
- downloadUrl={downloadUrl}
- anchorRef={downloadAnchorRef}
- fileName={localName}
- />
- </div>
- );
- }
- return <></>;
-};
-export default FileItem;
diff --git a/src/files-ui/components/file-item/components/FileItem/FileItemNeo.scss b/src/files-ui/components/file-item/components/FileItem/FileItemNeo.scss
deleted file mode 100644
index 6a352b6f8cadf790ae4852b7321bb378d4c5acaa..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItem/FileItemNeo.scss
+++ /dev/null
@@ -1,227 +0,0 @@
-@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
-//@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap");
-@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,700,900");
-/* .file-item-full-list {
- display: inline-flex;
-} */
-.file-item-full-container-container {
- cursor: text;
- box-sizing: border-box;
- font-family: "Poppins", sans-serif;
- //margin: 8px;
- //height: 157px;
- width: 132px;
- word-break: break-word;
- //outline: 1px solid rgb(20, 130, 220);
- .file-item-icon-container {
- position: relative;
- height: 132px;
- width: 132px;
- border-radius: 8px;
- .full-info {
- &::-webkit-scrollbar {
- width: 9px;
- }
- &::-webkit-scrollbar-track {
- background: transparent;
- }
- &::-webkit-scrollbar-thumb {
- background-color: #646c7fa9;
- border-radius: 20px;
- border: transparent;
- }
- text-align: left;
- position: absolute;
- left: 0;
- top: 0;
-
- scrollbar-width: thin;
- line-height: 1.5;
- letter-spacing: 0.02857em;
- //border: 1px solid white;
- font-family: "Poppins", sans-serif;
- width: inherit;
- background-color: rgba(0, 0, 0, 0.85);
- word-break: break-word;
- //margin: 1% 4%;
- // padding: 1% 1%;
- border-radius: 7px;
- //z-index: 100;
- height: 100%;
- width: 100%;
- font-size: 0.8rem;
- transition: all 0.5s ease 0s;
- //overflow: hidden;
- overflow: auto;
- color: white;
- .name {
- //margin: -7px 0 0 0;
- padding: 0 5px;
- font-weight: 399;
- // text-align: center;
-
- .sub-label {
- font-weight: 600;
- }
- &.success {
- border: 1px dashed #2e7d32;
- background-color: #1b5e20;
- //margin: 0 2px;
- font-size: 0.7rem;
-
- border-radius: 4px;
- }
- &.error {
- background-color: #c62828;
- border: 1px dashed #d32f2f;
- font-size: 0.7rem;
-
- //margin: 0 2px;
- border-radius: 4px;
- }
- }
- .size {
- // margin-top: 5px;
- padding: 0 5px;
- font-weight: 500;
- .sub-label {
- font-weight: 600;
- }
- }
- .mime {
- //display: none;
- //text-align: left;
-
- padding: 0 5px;
- font-weight: 399;
- .sub-label {
- font-weight: 600;
- }
- }
-
- &.hide {
- //height: 0%;
- display: none;
- }
- }
- }
- .file-item-name {
- margin-top: 3px;
- height: 37px;
- width: 133px;
- color: black;
- font-size: 0.95rem;
- line-height: 0.85rem;
- font-weight: 400;
- letter-spacing: 0.125em;
- word-break: break-all;
- padding: 0.5px;
- text-align: center;
- &.not-allowed {
- background-color: rgba(180, 16, 16, 0.7);
- }
- }
-}
-
-.file-item-container {
- background-repeat: no-repeat;
- background-size: cover;
- background-position: center;
-}
-
-.dui-file-item-icon {
- font-size: 0.7rem;
- //border: 1px solid wheat;
- //color: white;
- min-width: 19px;
- min-height: 19px;
- margin: 0;
- padding: 2px 2px;
- border-radius: 50%;
- background-color: rgba(32, 33, 36, 0.65);
-
- word-break: break-word;
- &:hover {
- background-color: rgba(32, 33, 36, 0.85);
- //outline: 0.5px solid wheat;
- }
-}
-
-////////////////// TOOLTIP
-.dz-ui-file-item-container {
- &.dz-ui-tooltip {
- cursor: default;
- position: relative;
- display: inline-block;
- // border-bottom: 1px dotted black;
- &:hover {
- z-index: 2;
- .dropzone-ui-tooltiptext {
- visibility: visible;
- opacity: 1;
- z-index: 2;
- }
- }
- .dropzone-ui-tooltiptext {
- font-family: "Poppins", sans-serif;
- font-size: 0.8rem;
- visibility: hidden;
- width: 133px;
- // background-color: green;
- color: #fff;
- text-align: center;
- border-radius: 6px;
- padding: 2px 2px;
- position: absolute;
- //z-index: 2;
- //top: 190px;
- top: 180px;
- left: 66px;
- margin-left: -60px;
-
- /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
- opacity: 0;
- transition: opacity 1s;
-
- &.not-valid-error {
- background: linear-gradient(to top, #c62828, #d32f2f);
- &::after {
- border-color: transparent transparent #d32f2f transparent;
- }
- }
- &.success {
- //background-color: green;
- background: linear-gradient(to top, #1b5e20, #2e7d32);
- &::after {
- border-color: transparent transparent #2e7d32 transparent;
- }
- }
- &::after {
- content: "";
- position: absolute;
- bottom: 100%;
- left: 50%;
- margin-left: -5px;
- border-width: 5px;
- border-style: solid;
- //border-color: transparent transparent green transparent;
- }
- }
- }
- &.dz-ui-paper-elevation-1 {
- box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
- 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
- }
- .dz-ui-paper-elevation-2 {
- box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
- 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
- }
- .dz-ui-paper-elevation-3 {
- box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2),
- 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
- }
- .dz-ui-paper-elevation-4 {
- box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
- 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
- }
-}
diff --git a/src/files-ui/components/file-item/components/FileItem/FileItemNeo.tsx b/src/files-ui/components/file-item/components/FileItem/FileItemNeo.tsx
deleted file mode 100644
index 85b823e32162fe3cf6311756a5a4f9f9cb46d4e2..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItem/FileItemNeo.tsx
+++ /dev/null
@@ -1,247 +0,0 @@
-import * as React from "react";
-import "./FileItemNeo.scss";
-
-import FileItemFullInfoLayer from "../FileItemFullInfoLayer/FileItemFullInfoLayer";
-import FileItemImage from "../FileItemImage/FileItemImage";
-import Tooltip from "../../../tooltip/components/Tooltip";
-import useFileItemNeoClassName from "../../hooks/useFileItemNeoClassName";
-import { FileItemPropsNeo, FileItemNeoPropsDefault } from "./FileItemPropsNeo";
-import useFileItemNeoInitializer from "./useFileItemNeoInitializer";
-
-import FileItemImageNeo from "../FileItemImage/FileItemImageNeo";
-import useFileItemProgress from "../../hooks/useFileItemProgress";
-import FuiSkeleton from "../../../skeleton/FuiSkeleton";
-import { fileSizeFormater, shrinkWord } from "../../../../core";
-import { mergeProps } from "../../../overridable";
-import FileItemMainLayerNeo from "../FileItemMainLayer/MainLayer/FileItemMainLayerNeo";
-
-const FileItem: React.FC<FileItemPropsNeo> = (props: FileItemPropsNeo) => {
- const {
- file,
- onDelete,
- onSee,
- onWatch,
- style,
- preview,
- onlyImage,
- info,
- id,
- valid,
- uploadStatus,
- uploadMessage,
- hd,
- localization,
- errors,
- imageUrl,
- elevation,
- alwaysActive,
- resultOnTooltip,
- downloadUrl,
- onDownload,
- progress,
- onAbort,
- xhr,
- onCancel,
- showProgress,
- } = mergeProps(props, FileItemNeoPropsDefault);
- //ref for anchor element
- const dui_anchor_ref = React.useRef<HTMLAnchorElement>(null);
- //Initialize image properties for FileItem
- const localProgress = useFileItemProgress(progress, showProgress, xhr);
-
- const [isImage, isVideo, url, imageSource]: [
- boolean,
- boolean,
- string,
- string | undefined
- ] = useFileItemNeoInitializer(file, valid, preview as boolean, imageUrl);
- //console.table({isImage, isVideo, url, imageSource, localProgress} );
- //className created
- const classNameCreated = useFileItemNeoClassName(
- resultOnTooltip as boolean,
- elevation
- );
- //state for actionOnHover
- const [hovering, setHOvering] = React.useState<boolean>(false);
- const handleOnHoverEnter: React.MouseEventHandler<HTMLDivElement> = () => {
- setHOvering(true);
- };
- const handleOnHoverLeave: React.MouseEventHandler<HTMLDivElement> = () => {
- setHOvering(false);
- };
-
- //size
- const sizeFormatted: string = file ? fileSizeFormater(file.size) : "0 KB";
- //alwaysActive
- const [showInfo, setShowInfo] = React.useState<boolean>(false);
- //delete file item
- const handleDelete = (): void => {
- onDelete?.(id);
- };
- //open info layer
- const handleOpenInfo = () => {
- setShowInfo(true);
- };
- //close info layer
- const handleCloseInfo = () => {
- setShowInfo(false);
- };
- //handle watch video
- const handleOpenVideo = async () => {
- if (file) onWatch?.(file);
- };
- //open image
- const handleOpenImage = async () => {
- if (imageSource && file) {
- // if (hd) {
- // const response = await readImagePromise(file);
- // onSee?.(response || "");
- // } else {
- onSee?.(imageSource);
- //}
- }
- };
- function handleClick<T extends HTMLDivElement>(
- e: React.MouseEvent<T, MouseEvent>
- ): void {
- //avoid children to trigger onClick ripple from parent
- e.stopPropagation();
- }
- /**
- * onDownload, form 1
- * Trigger dowload directly performing a click on anchor element
- */
- const innerDownload = () => {
- const anchorElement = dui_anchor_ref.current;
- if (anchorElement) {
- anchorElement.click();
- }
- };
- /**
- * onDownlad, form 2
- * Handle the download triggering an outside event
- */
- const handleDownload = () => {
- if (onDownload) {
- onDownload?.(id, downloadUrl);
- } else if (typeof downloadUrl == "string") {
- innerDownload();
- }
- };
- /**
- * Perform abort event when xhr is given
- */
- const handleAbort = (): void => {
- //trigger abort event
- xhr?.abort();
- // handle externally the abort event
- onAbort?.(id);
- };
- /**
- * Handle onCancel event
- */
- const handleCancel = (): void => {
- // handle externally the cancel event
- onCancel?.(id);
- };
-
- const handleDoubleClick = (): void => {
- alert("double click on file");
- };
- if (file && typeof file.name == "string") {
- if (classNameCreated) {
- return (
- <div
- className={classNameCreated}
- style={style}
- onClick={handleClick}
- onMouseEnter={handleOnHoverEnter}
- onMouseLeave={handleOnHoverLeave}
- onDoubleClick={handleDoubleClick}
- >
- <div
- className={`file-item-icon-container ${showInfo ? " hide" : ""}`}
- >
- <FileItemImageNeo
- imageSource={imageSource}
- url={url}
- fileName={file.name}
- />
-
- <FileItemMainLayerNeo
- showInfo={showInfo}
- fileName={file.name}
- onDelete={onDelete ? handleDelete : undefined}
- onOpenImage={onSee && preview ? handleOpenImage : undefined}
- onOpenVideo={onWatch && preview ? handleOpenVideo : undefined}
- onDownloadFile={
- onDownload || downloadUrl ? handleDownload : undefined
- }
- isVideo={isVideo}
- onOpenInfo={handleOpenInfo}
- info={info || false}
- valid={valid}
- isImage={isImage}
- sizeFormatted={sizeFormatted}
- uploadStatus={uploadStatus}
- localization={localization}
- hovering={alwaysActive || hovering}
- progress={localProgress}
- onAbort={onAbort ? handleAbort : undefined}
- onCancel={onCancel ? handleCancel : undefined}
- />
-
- <FileItemFullInfoLayer
- showInfo={showInfo}
- errors={errors}
- fileName={file.name}
- fileSize={fileSizeFormater(file.size)}
- fileType={file.type}
- valid={valid}
- onClose={handleCloseInfo}
- uploadStatus={uploadStatus}
- uploadMessage={uploadMessage}
- localization={localization}
- resultOnTooltip={resultOnTooltip}
- />
- </div>
-
- {!onlyImage && (
- <div className="file-item-name">{shrinkWord(file.name)}</div>
- )}
- {
- //resultOnTooltip && (
- <Tooltip
- open={resultOnTooltip && hovering}
- //open={true}
- uploadStatus={uploadStatus}
- valid={valid}
- errors={errors}
- uploadMessage={uploadMessage}
- ></Tooltip>
- //)
- }
- {downloadUrl && (
- <a
- hidden
- ref={dui_anchor_ref}
- href={downloadUrl}
- download={file.name}
- >
- download_file
- </a>
- )}
- </div>
- );
- } else {
- return (
- <React.Fragment>
- <FuiSkeleton />
- </React.Fragment>
- );
- }
- } else {
- return <React.Fragment></React.Fragment>;
- }
-};
-export default FileItem;
diff --git a/src/files-ui/components/file-item/components/FileItem/FileItemProps.ts b/src/files-ui/components/file-item/components/FileItem/FileItemProps.ts
deleted file mode 100644
index 7f5366bac2e083037293eb353739b605e96e66ed..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItem/FileItemProps.ts
+++ /dev/null
@@ -1,199 +0,0 @@
-import { Localization, UPLOADSTATUS } from "../../../../core";
-import { OverridableComponentProps } from "../../../overridable";
-
-export interface FileItemPropsMap extends OverridableComponentProps {
- /**
- * The file object obtained from client drop or selection
- */
- file?: File;
- /**
- * The name of the file
- */
- name?: string;
- /**
- * The file mime type
- */
- type?: string;
- /**
- * the size of the file in bytes
- */
- size?: number;
- /**
- * A function of what to do when close button is pressed or clicked
- */
- onDelete?: (fileId: number | string | undefined) => void;
- /**
- * A function that return a file object when "see" button is pressed or clicked
- */
- onSee?: (imageUrl: string) => void;
- /**
- * A function that return a file object when "play" button is presssed or clicked
- */
- onWatch?: (videoUrl: File) => void;
- /**
- * Whether to see as grid or inline (horizontal list)
- */
- errors?: string[];
- /**
- * individual validator for each file
- */
- //validator?: FileItemValidator;
- /**
- * identifier for the file
- */
- id?: string | number;
- /**
- * if true, and if the file is an image,
- * makes visible the "view" button that will get the image url
- * Also, it will be visible only when file is valid
- */
- preview?: boolean;
- /**
- * whether to show a valid or rejected message ("ok", "rejected")
- * by def. valid is false (if not present, it's false too)
- * This value wil affect preview behaviour,
- * If not valid, the preview will not be shown, nor the view button
- */
- valid?: boolean | null;
- /**
- * This feature is hidden, it is not present on the documentation
- * because it's experimental. If you found this prop, you can test it
- * and comment us if any issue is found. Thanks in advance.
- *
- * Make file name, info layer, size and "valid message"
- * not visible
- */
- onlyImage?: boolean;
- /**
- * whether to show the info layer or not
- * and whether to make visible the info button or not.
- * Only works when image file is given
- */
- info?: boolean;
- /**
- * A string representation or web url of the image
- * that will be set to the "src" prop of an <img/> tag
- * <img src={`${url}`} />
- */
- imageUrl?: string;
- /**
- * The message from server
- */
- uploadMessage?: string;
- /**
- * where to place the file name
- * [in construction]
- */
- //fileName?: "bottom" | "inside";
- /**
- * The current upload status of the file
- */
- uploadStatus?: UPLOADSTATUS;
- /**
- * If present, preview on full screen will
- * be presented in the real image resolution
- */
- hd?: boolean | undefined;
- /**
- * language to be used
- * for now
- * only English and Spanish is supported
- */
- localization?: Localization;
- /**
- * The elevation or shadow of container
- * range of shadows is from 0 to 4,
- * other number o values are considered as 0
- */
- elevation?: "1" | "2" | "3" | "4" | 1 | 2 | 3 | 4 | false;
- /**
- * Flag that determines whether actions are visible always, or only on hover event
- */
- alwaysActive?: boolean;
- /**
- * Where to display result of validation: on InfoLayer or in Tooltip when user hovers the FileItem
- */
- resultOnTooltip?: boolean;
- /**
- * Url to perform a GET request in order to download the file.
- * This action is triggered when download button is clicked or pressed.
- * In case onDownload prop is given
- */
- downloadUrl?: string;
- /**
- * Event that is triggered when download button is clicked or pressed
- */
- onDownload?: (fileId: number | string | undefined, downloadUrl?: string) => void;
- /**
- * the current percentage upload progress
- *
- */
- progress?: number;
- /**
- * Whether to show progress or not.
- * @default true if xhr is initialized
- * @default false if xhr is not given
- */
- showProgress?: boolean;
- /**
- * abort event
- */
- onAbort?: Function;
- /**
- * cancel when preparing event
- */
- onCancel?: Function;
- /**
- * A reference to the XHR object that allows the upload and abort event.
- * and progress
- */
- xhr?: XMLHttpRequest;
- /**
- * Event that is triggered when user duble clicks the component
- */
- onDoubleClick?: (evt: React.MouseEvent) => void;
- /**
- * Event that is triggered when user duble clicks the component
- */
- onRightClick?: (evt: React.MouseEvent) => void;
-
- /**
- * Flag that indicates whether to show a background blur image or not
- */
- backgroundBlurImage?: boolean;
- /**
- * Flag that indicates whether to activates dark mode for component or not
- */
- darkMode?: boolean;
-}
-
-export type FileItemProps = {
- [F in keyof FileItemPropsMap]: FileItemPropsMap[F]
-}
-
-/**
- * Base default props
- */
-export const FileItemPropsDefault: FileItemProps = {
- onDelete: undefined,
- file: undefined,
- color: "#071e25",
- // validator: undefined,
- id: undefined,
- style: {},
- preview: false,
- valid: undefined,
- info: false,
- hd: undefined,
- localization: "EN-en",
- onlyImage: false,
- imageUrl: undefined,
- errors: undefined,
- elevation: false,
- alwaysActive: undefined,
- progress: undefined,
- resultOnTooltip: true,
- backgroundBlurImage: true,
- darkMode: false,
- //fileName: "bottom"
-}
diff --git a/src/files-ui/components/file-item/components/FileItem/FileItemPropsNeo.ts b/src/files-ui/components/file-item/components/FileItem/FileItemPropsNeo.ts
deleted file mode 100644
index 81fa8390ddecae3d7d79383bc23996f721524469..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItem/FileItemPropsNeo.ts
+++ /dev/null
@@ -1,167 +0,0 @@
-import { Localization, UPLOADSTATUS } from "../../../../core";
-import { OverridableComponentProps } from "../../../overridable";
-
-
-
-export interface FileItemPropsNeoMap extends OverridableComponentProps {
- /**
- * The file object
- */
- file?: File;
- /**
- * A function of what to do when close button is pressed or clicked
- */
- onDelete?: (fileId: number | string | undefined) => void;
- /**
- * A function that return a file object when "see" button is pressed or clicked
- */
- onSee?: (imageUrl: string) => void;
- /**
- * A function that return a file object when "play" button is presssed or clicked
- */
- onWatch?: (videoUrl: File) => void;
- /**
- * Whether to see as grid or inline (horizontal list)
- */
- errors?: string[];
- /**
- * individual validator for each file
- */
- //validator?: FileItemValidator;
- /**
- * identifier for the file
- */
- id?: string | number;
- /**
- * if true, and if the file is an image,
- * makes visible the "view" button that will get the image url
- * Also, it will be visible only when file is valid
- */
- preview?: boolean;
- /**
- * whether to show a valid or rejected message ("ok", "rejected")
- * by def. valid is false (if not present, it's false too)
- * This value wil affect preview behaviour,
- * If not valid, the preview will not be shown, nor the view button
- */
- valid?: boolean | null;
- /**
- * This feature is hidden, it is not present on the documentation
- * because it's experimental. If you found this prop, you can test it
- * and comment us if any issue is found. Thanks in advance.
- *
- * Make file name, info layer, size and "valid message"
- * not visible
- */
- onlyImage?: boolean;
- /**
- * whether to show the info layer or not
- * also whether to make visible the info button or not ,
- * Only works when given a image file
- */
- info?: boolean;
- /**
- * A string representation or web url of the image
- * that will be set to the "src" prop of an <img/> tag
- * <img src={`${url}`} />
- */
- imageUrl?: string;
- /**
- * The message from server
- */
- uploadMessage?: string;
- /**
- * where to place the file name
- * [in construction]
- */
- //fileName?: "bottom" | "inside";
- /**
- * The current upload status of the file
- */
- uploadStatus?: UPLOADSTATUS;
- /**
- * If present, preview on full screen will
- * be presented in the real image resolution
- */
- hd?: boolean | undefined;
- /**
- * language to be used
- * for now
- * only English and Spanish is supported
- */
- localization?: Localization;
- /**
- * The elevation or shadow of container
- * range of shadows is from 0 to 4,
- * other number o values are considered as 0
- */
- elevation?: "1" | "2" | "3" | "4" | 1 | 2 | 3 | 4 | false;
- /**
- * Flag that determines whether actions are visible always, or only on hover event
- */
- alwaysActive?: boolean;
- /**
- * Where to display result of validation: on InfoLayer or in Tooltip when user hovers the FileItem
- */
- resultOnTooltip?: boolean;
- /**
- * Url to perform a GET request in order to download the file.
- * This action is triggered when download button is clicked or pressed.
- * In case onDownload prop is given
- */
- downloadUrl?: string;
- /**
- * Event that is triggered when download button is clicked or pressed
- */
- onDownload?: (fileId: number | string | undefined, downloadUrl?: string) => void;
- /**
- * the current percentage upload progress
- *
- */
- progress?: number;
- /**
- * Whether to show progress or not.
- * @default true if xhr is initialized
- */
- showProgress?: boolean;
- /**
- * abort event
- */
- onAbort?: Function;
- /**
- * cancel when preparing event
- */
- onCancel?: Function;
- /**
- * A reference to the XHR object that allows the upload and abort event.
- * and progress
- */
- xhr?: XMLHttpRequest;
-}
-export type FileItemPropsNeo = {
- [F in keyof FileItemPropsNeoMap]: FileItemPropsNeoMap[F]
-}
-/**
- * Base default props
- */
-export const FileItemNeoPropsDefault: FileItemPropsNeo = {
- onDelete: undefined,
- file: undefined,
- //color: "#071e25",
- // validator: undefined,
- id: undefined,
- style: {},
- preview: false,
- valid: undefined,
- info: false,
- hd: undefined,
- localization: "EN-en",
- onlyImage: false,
- imageUrl: undefined,
- errors: undefined,
- elevation: false,
- alwaysActive: undefined,
- progress: undefined,
- showProgress: true
- //fileName: "bottom"
-}
diff --git a/src/files-ui/components/file-item/components/FileItem/useFileItemNeoInitializer.ts b/src/files-ui/components/file-item/components/FileItem/useFileItemNeoInitializer.ts
deleted file mode 100644
index 94e5c582a215ffafd552d17de1ef5d948369f525..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItem/useFileItemNeoInitializer.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-import * as React from "react";
-import { getURLFileIco, readAsDataURL } from "../../../../core";
-
-/**
- * Initializer hook for FileItemNeo
- * @param file The file Object
- * @param valid Whether the file is valid, not valid or not set
- * @param preview Whether to show a preview on FileItem
- * @param imageUrl The image url
- * @param xhr the xhr object
- * @param progress the current progress given by props
- * @returns an array thta contains the following properties [isImage, isVideo, url, imageSource, localProgress]
- */
-const useFileItemNeoInitializer = (
- file: File | undefined,
- valid: boolean | undefined | null,
- preview: boolean,
- imageUrl: string | undefined,
- xhr?: XMLHttpRequest,
-
-): [boolean, boolean, string, string | undefined] => {
-
- const [isImage, setIsImage] = React.useState<boolean>(false);
- const [isVideo, setIsVideo] = React.useState<boolean>(false);
- const [url, setUrl] = React.useState<string>("");
- const [imageSource, setImageSource] = React.useState<string | undefined>(undefined);
-
-
-
- const init = async (
- file: File | undefined,
- valid: boolean | undefined | null,
- preview: boolean,
- imageUrl: string | undefined,
- xhr?: XMLHttpRequest,
- progress?: number
- ) => {
- //////////////////////////////
- if (!file) return;
- const { url } = getURLFileIco(file as File);
- //console.log("init", url);
- setUrl(url);
- if (imageUrl) {
- setIsImage(true);
- setImageSource(imageUrl);
- return;
- } else {
- const headerMime: string = file.type ? file.type.split("/")[0] : "octet";
- const tailMime: string = file.type ? file.type.split("/")[1] : "octet";
- setIsImage(headerMime === "image");
- setIsVideo(
- headerMime === "video" && ["mp4", "ogg", "webm"].includes(tailMime)
- );
- if (
- preview &&
- (valid || typeof valid === "undefined" || valid === null) &&
- headerMime === "image"
- ) {
- const response = await readAsDataURL(file);
- //console.log("response image", response);
- if (response) {
- setImageSource(response as string);
- //check if resize image is enabled
- } else {
- setImageSource(undefined);
- }
- }
- }
- /////////////// UPLOAD OBJECT ///////////////
-
- //if (!localProgress) {
- //handleProgress(1);
- //}
- };
-
-
-
- ////// EFFECT
- React.useEffect(() => {
- init(file, valid, preview || false, imageUrl);
- return () => {
- setImageSource(undefined);
- setIsImage(false);
- setIsVideo(false);
- };
- // eslint-disable-next-line
- }, [file, valid, preview, imageUrl,]);
- return [isImage, isVideo, url, imageSource];
-}
-export default useFileItemNeoInitializer;
\ No newline at end of file
diff --git a/src/files-ui/components/file-item/components/FileItemContainer/FileItemContainer.scss b/src/files-ui/components/file-item/components/FileItemContainer/FileItemContainer.scss
deleted file mode 100644
index c6360df97f6d598e21696943e631e8503a522517..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemContainer/FileItemContainer.scss
+++ /dev/null
@@ -1,49 +0,0 @@
-.file-item-list-container {
- // padding: 5px;
- //z-index: 1;
- &::-webkit-scrollbar {
- width: 9px;
- }
- &::-webkit-scrollbar-track {
- background: transparent;
- }
- &::-webkit-scrollbar-thumb {
- background-color: #646c7fa9;
- border-radius: 20px;
- border: transparent;
- }
- //margin: 25px 0;
- //background-color: rgba(255, 255, 255, 0.596);
- background-color: transparent;
- color: black;
- height: 100%;
- //width: 100%;
- width: 100%;
- //margin: 100px 0;
- //width: inherit;
-
- // padding: 2%;
- align-items: center;
- scrollbar-width: thin;
- &.file-item-list-grid {
- overflow: auto;
- display: flex;
- flex-wrap: wrap;
- align-items: center;
- justify-content: space-evenly;
- }
- &.file-item-list-no-scroll{
- display: flex;
- flex-wrap: wrap;
- align-items: center;
- justify-content: space-evenly;
- overflow: unset;
- }
- &.file-item-list-list {
- overflow: auto;
- //flex-wrap: wrap;
- align-items: center;
- //justify-content: center;
- display: inline-flex;
- }
-}
diff --git a/src/files-ui/components/file-item/components/FileItemContainer/FileItemContainer.tsx b/src/files-ui/components/file-item/components/FileItemContainer/FileItemContainer.tsx
deleted file mode 100644
index a61211c3b26d787f6d1cbce529d0f9168664d002..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemContainer/FileItemContainer.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import "./FileItemContainer.scss";
-
-import React, { FC } from "react";
-import { FileItemContainerProps } from "./FileItemContainerProps";
-
-const FileItemContainer: FC<FileItemContainerProps> = (
- props: FileItemContainerProps,
-) => {
- const { children, view, style, disableScroll } = props;
- const finalView = disableScroll ? "no-scroll" : view || "list";
- /* function handleClick<T extends HTMLDivElement>(
- e: React.MouseEvent<T, MouseEvent>
- ): void {
- e.preventDefault();
- } */
- return (
- <div
- className={`file-item-list-container file-item-list-${finalView}`}
- style={style}
- //onClick={handleClick}
- >
- {children}
- </div>
- );
-};
-export default FileItemContainer;
diff --git a/src/files-ui/components/file-item/components/FileItemContainer/FileItemContainerProps.ts b/src/files-ui/components/file-item/components/FileItemContainer/FileItemContainerProps.ts
deleted file mode 100644
index aa3cc9463dad11e4b2ad9eea988ab824099fbcca..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemContainer/FileItemContainerProps.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { OverridableComponentProps } from "../../../overridable";
-
-export interface FileItemContainerProps extends OverridableComponentProps {
- /**
- * `grid` will display files in a grid layout. `list` will display
- * files in a horizontal list.
- * Convenient for saving space in page.
- */
- view?: "grid" | "list";
- /**
- * if present or true, removes scrolls
- * and sets the Dropzone in a grid view
- */
- disableScroll?: boolean;
-}
\ No newline at end of file
diff --git a/src/files-ui/components/file-item/components/FileItemFullInfoLayer/FileItemFullInfoLayer.tsx b/src/files-ui/components/file-item/components/FileItemFullInfoLayer/FileItemFullInfoLayer.tsx
deleted file mode 100644
index e0d859f802e988f0f8bedcc7f791593130545305..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemFullInfoLayer/FileItemFullInfoLayer.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import * as React from "react";
-import {
- FileItemLocalizerSelector,
- Localization,
- LocalLabels,
- UPLOADSTATUS,
-} from "../../../../core";
-import { Cancel } from "../../../icons";
-import FileItemStatus from "../FileItemStatus/FileItemStatus";
-
-const FileItemFullInfoLayer: React.FC<FileItemFullInfoLayerProps> = (
- props: FileItemFullInfoLayerProps
-) => {
- const {
- showInfo,
- valid,
- onClose,
- fileName,
- fileSize,
- fileType,
- uploadStatus,
- uploadMessage,
- localization,
- errors,
- resultOnTooltip,
- } = props;
- const FileItemFullInfoLocalizer: LocalLabels = FileItemLocalizerSelector(
- localization as Localization
- ).fullInfoLayer as LocalLabels;
- const handleCloseInfo = () => {
- onClose?.();
- };
- return (
- <div className={showInfo ? "full-info" : "full-info hide"}>
- <span
- style={{
- display: "flex",
- flexWrap: "wrap",
- alignItems: "center",
- justifyContent: "space-between",
- }}
- >
- <Cancel
- style={{ margin: 0, right: 0, top: 0 }}
- color="rgba(255,255,255,0.8)"
- onClick={handleCloseInfo}
- colorFill="black"
- />
- {uploadStatus && uploadStatus !== "uploading" ? (
- <FileItemStatus
- uploadStatus={uploadStatus}
- localization={localization as Localization}
- />
- ) : (
- <FileItemStatus
- valid={valid}
- localization={localization as Localization}
- />
- )}
- </span>
-
- {!resultOnTooltip && !uploadMessage && errors && errors.length > 0 && (
- <div className={`name error`}>
- {errors.map((error, index) => (
- <div key={index + 1}>{`- ${error}.\n`}</div>
- ))}
- </div>
- )}
- {!resultOnTooltip && uploadMessage && (
- <div className={`name ${uploadStatus}`}>{uploadMessage}</div>
- )}
- <div className="name">
- <span className="sub-label">
- {FileItemFullInfoLocalizer.name as string}
- {/* localization === "ES-es" ? "Nombre: " : "Name: " */}
- </span>
- </div>
- <div className="name">{fileName}</div>
- {/** FILE SIZE */}
- <div className="size">
- <span className="sub-label">
- {FileItemFullInfoLocalizer.size as string}
- </span>
- </div>
- <div className="name">{fileSize}</div>
- {/** FILE TYPE */}
- <div className="mime">
- <span className="sub-label">
- {FileItemFullInfoLocalizer.type as string}
- </span>
- </div>
- {fileType && <div className="mime">{fileType}</div>}
- </div>
- );
-};
-export default FileItemFullInfoLayer;
-
-export interface FileItemFullInfoLayerProps {
- showInfo: boolean;
- fileName: string;
- fileSize: string;
- fileType?: string;
- valid?: boolean | null;
- onClose: Function;
- uploadMessage?: string;
- uploadStatus?: UPLOADSTATUS;
- /**
- * language to be used
- * for now
- * only English and Spanish is supported
- */
- localization?: Localization;
- errors?: string[];
- /**
- * Whether to display result of validation on InfoLayer or in tooltip on Hover FileItem
- */
- resultOnTooltip?: boolean;
-}
diff --git a/src/files-ui/components/file-item/components/FileItemImage/FileItemImage.scss b/src/files-ui/components/file-item/components/FileItemImage/FileItemImage.scss
deleted file mode 100644
index 6bba9ac25397b7af26585c8110bfafe5090e0722..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemImage/FileItemImage.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-.fui-img-container {
- &.blur {
- img {
- filter: blur(4px);
- width: 200%;
- height: 200%;
- }
- }
- &.card {
- position: relative;
- width: 80px;
- //height: 80px;
- }
- position: absolute;
- left: 0;
- top: 0;
- width: inherit;
- height: inherit;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- overflow: hidden;
- border-radius: 8px;
- //z-index: -1;
- img {
- //filter: blur(0);
- width: 100%;
- //height: 100%;
- background-repeat: no-repeat;
- background-size: cover;
- background-position: center;
- }
-}
diff --git a/src/files-ui/components/file-item/components/FileItemImage/FileItemImage.tsx b/src/files-ui/components/file-item/components/FileItemImage/FileItemImage.tsx
deleted file mode 100644
index a557543c96df541fd34bca5b5720560dec5b851d..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemImage/FileItemImage.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import * as React from "react";
-import { ImagePreview } from "../../../previews";
-import "./FileItemImage.scss";
-export interface FileItemImageProps {
- /**
- * The image source
- */
- imageSource: string | undefined;
- /**
- * the url file icon
- */
- url: string;
- /**
- * The name to be used as alt
- */
- fileName: string;
- /**
- * Flag that indicates whether to show a background blur image or not
- */
- backgroundBlurImage: boolean;
- /**
- *
- */
- card?: boolean;
-}
-
-const FileItemImage: React.FC<FileItemImageProps> = (
- props: FileItemImageProps
-) => {
- const { imageSource, url, fileName, backgroundBlurImage, card } = props;
- const [source, setSource] = React.useState<string | undefined>(undefined);
- const [error, setError] = React.useState<boolean>(false);
- React.useEffect(() => {
- setSource(imageSource || url);
- }, [imageSource, url]);
- const handleError = () => {
- setError(true);
- setSource(url);
- };
- return (
- <React.Fragment>
- {!card && backgroundBlurImage && imageSource && !error && (
- <div className="fui-img-container blur">
- <ImagePreview src={imageSource} alt={`blur ${fileName}`} />
- </div>
- )}
- <div className={!card ? "fui-img-container" : "fui-img-container card"}>
- <ImagePreview
- onError={handleError}
- src={source}
- style={{ borderRadius: "0px" }}
- alt={`preview ${fileName}`}
- />
- </div>
- </React.Fragment>
- );
-};
-export default FileItemImage;
diff --git a/src/files-ui/components/file-item/components/FileItemImage/FileItemImageNeo.scss b/src/files-ui/components/file-item/components/FileItemImage/FileItemImageNeo.scss
deleted file mode 100644
index 2c8763f883114987478426dde35b042bd0b06e31..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemImage/FileItemImageNeo.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-.dui-img-container {
- &.blur {
- img {
- filter: blur(4px);
- width: 200%;
- height: 200%;
- }
- }
- position: absolute;
- left: 0;
- top: 0;
- width: inherit;
- height: inherit;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- overflow: hidden;
- border-radius: 8px;
- //z-index: -1;
- img {
- //filter: blur(0);
- width: 100%;
- //height: 100%;
- background-repeat: no-repeat;
- background-size: cover;
- background-position: center;
- }
- }
\ No newline at end of file
diff --git a/src/files-ui/components/file-item/components/FileItemImage/FileItemImageNeo.tsx b/src/files-ui/components/file-item/components/FileItemImage/FileItemImageNeo.tsx
deleted file mode 100644
index 88993471f8af008a6c406be22c8bee90735c9557..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemImage/FileItemImageNeo.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import * as React from "react";
-import { ImagePreview } from "../../../previews";
-import "./FileItemImageNeo.scss";
-export interface FileItemImageNeoProps {
- /**
- * The image source
- */
- imageSource: string | undefined;
- /**
- * the url file icon
- */
- url: string;
- /**
- * The name to be used as alt
- */
- fileName: string;
-}
-
-const FileItemImageNeo: React.FC<FileItemImageNeoProps> = (
- props: FileItemImageNeoProps
-) => {
- const { imageSource, url, fileName } = props;
- return (
- <React.Fragment>
- {imageSource && (
- <div className="dui-img-container blur">
- <ImagePreview
- //className="dui-img-container blur"
-
- src={imageSource}
- alt={`blur ${fileName}`}
- />
- </div>
- )}
- <div className="dui-img-container">
- <ImagePreview
- // className="dui-img-container"
- src={imageSource || url}
- style={{ borderRadius: "0px" }}
- alt={`preview ${fileName}`}
- />
- </div>
- </React.Fragment>
- );
-};
-export default FileItemImageNeo;
diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/FileItemLoader/FileItemLoader.scss b/src/files-ui/components/file-item/components/FileItemMainLayer/FileItemLoader/FileItemLoader.scss
deleted file mode 100644
index eb1e1d29f5e7895420292eeceb47994c6fdae58a..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemMainLayer/FileItemLoader/FileItemLoader.scss
+++ /dev/null
@@ -1,76 +0,0 @@
-.dui-loader-container {
- width: 100%;
- height: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
-}
-
-.svg_circle_loader {
- border-radius: 50%;
-}
-
-text.dui-text-dynamic-loader {
- text-anchor: middle;
- font-size: 1em;
- fill: aliceblue;
-}
-.loader-container {
- height: 60px;
- width: 60px;
- position: relative;
- outline: 1px solid skyblue;
-}
-
-////////////////////////////////////
-
-.dui-main-loader-container {
- position: relative;
- min-width: 60px;
- min-height: 60px;
- background-color: rgba(0, 0, 0, 0.41);
- border-radius: 50%;
-
- &.clickable{
- cursor: pointer;
- }
- &:hover {
- background-color: rgba(0, 0, 0, 0.61);
- }
- .dui-abort-icon-container {
- position: absolute;
- width: 100%;
- height: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- }
- .dui-dynamic-preparing-loader-container {
- position: absolute;
- width: 100%;
- height: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- }
-}
-.x-button-abort {
- position: absolute;
- left: 8px;
- top: 8px;
- width: calc(100% - 16px);
- height: calc(100% - 16px);
- border-radius: 50%;
- overflow: hidden;
- fill: rgba(255, 255, 255, 0.808);
-}
-.x-button-abort:hover {
- fill: rgba(255, 255, 255, 0.925);
-}
-.circle_loader {
- fill: none;
- stroke: #14ff00;
- stroke-width: 6px;
- transform-origin: center;
- transform: rotate(-90deg);
-}
diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/FileItemLoader/FileItemLoader.tsx b/src/files-ui/components/file-item/components/FileItemMainLayer/FileItemLoader/FileItemLoader.tsx
deleted file mode 100644
index 590375f840c3a7667d1e8cc36bb5174d2ff45af1..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemMainLayer/FileItemLoader/FileItemLoader.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-import * as React from "react";
-import {
- FileItemLocalizerSelector,
- Localization,
- LocalLabels,
- UPLOADSTATUS,
-} from "../../../../../core";
-import { Clear } from "../../../../icons";
-import { DynamicLoader, BasePreparingLoader } from "../../../../loader";
-import DefaultLoaderNeo from "../../../../loader/DefaultLoader/DefaultLoader";
-import "./FileItemLoader.scss";
-interface FileItemLoaderProps {
- height?: number;
- width?: number;
- uploadStatus?: UPLOADSTATUS;
- /**
- * language to be used for now
- * only English, Russian, Chinesse, French, protuguese and Spanish is supported
- */
- localization?: Localization;
- /**
- * the current percentage upload progress
- */
- progress?: number;
- /**
- * abort event
- */
- onAbort?: Function;
- /**
- * cancel event
- */
- onCancel?: Function;
-}
-const FileItemLoader: React.FC<FileItemLoaderProps> = (
- props: FileItemLoaderProps
-) => {
- const {
- uploadStatus,
- localization,
- progress,
- onAbort,
- width,
- //height,
- onCancel,
- } = props;
- //console.log("uploadStatus cancel",uploadStatus, onCancel);
- const FileItemStatusLocalizer: LocalLabels = FileItemLocalizerSelector(
- localization
- ).status as LocalLabels;
- // console.log("Loader", progress);
- const circleRef: React.RefObject<SVGCircleElement> =
- React.useRef<SVGCircleElement>(null);
-
- function setProgress(
- percent: number,
- myCircle: SVGCircleElement,
- circumference: number
- ) {
- myCircle.style.strokeDashoffset = `${circumference * (1 - percent / 100)}`;
- }
-
- React.useEffect(() => {
- const myCircle: SVGCircleElement | null = circleRef.current;
- if (myCircle && progress) {
- //console.log("CIRCLE", progress, progress === 0 ? 1 : progress);
- let circumference: number = 2 * Math.PI * myCircle.r.baseVal.value;
- myCircle.style.strokeDasharray = `${circumference} 1000`;
- setProgress(progress === 0 ? 1 : progress, myCircle, circumference);
- }
- }, [progress]);
- const handleAbort = () => {
- onAbort?.();
- };
- const handleCancel = () => {
- onCancel?.();
- };
- //console.log("Loader onCancel", onCancel);
- if (!uploadStatus) {
- return <></>;
- }
- return (
- <React.Fragment>
- {uploadStatus === "preparing" && (
- <React.Fragment>
- <div
- className="dui-main-loader-container clickable"
- onClick={handleCancel}
- >
- {onCancel && (
- <div className="dui-abort-icon-container">
- <Clear
- color="rgba(255,255,255,0.70)"
- size={60}
- colorFill="transparent"
- />
- </div>
- )}
-
- <div className="dui-dynamic-preparing-loader-container">
- <BasePreparingLoader
- size={width || 60}
- x={50}
- y={50}
- radius={46}
- />
- </div>
- </div>
- </React.Fragment>
- )}
-
- {uploadStatus === "uploading" && (
- <React.Fragment>
- {typeof progress === "undefined" ? (
- <DefaultLoaderNeo
- label={FileItemStatusLocalizer.uploading as string}
- />
- ) : (
- <div
- className={`dui-main-loader-container${
- onAbort ? " clickable" : ""
- }`}
- onClick={handleAbort}
- >
- <div className="dui-abort-icon-container">
- {onAbort && (
- <Clear
- color="rgba(255,255,255,0.70)"
- size={60}
- colorFill="transparent"
- />
- )}
- </div>
- <div className="dui-dynamic-preparing-loader-container">
- <DynamicLoader
- size={width || 60}
- x={30}
- y={30}
- radius={27}
- percentage={progress}
- width={6}
- hidePerncentage={onAbort !== undefined}
- />
- </div>
- </div>
- )}
- </React.Fragment>
- )}
- </React.Fragment>
- );
-};
-export default FileItemLoader;
diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/FileItemSize.scss b/src/files-ui/components/file-item/components/FileItemMainLayer/FileItemSize.scss
deleted file mode 100644
index 2ffe154f923c891c9a3143862d8600097d853b55..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemMainLayer/FileItemSize.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-.dui-file-item-size {
- font-size: 0.7rem;
- border: 0.5px solid wheat;
- //outline: 0.5px solid wheat;
- text-align: center;
- //border: none;
- color: rgba(255, 255, 255, 0.89);
- //margin: 1.5px 1.5px 0% 0%;
- padding: 2px 1.5px;
- border-radius: 7px;
- background-color: rgba(32, 33, 36, 0.75);
- min-width: 45px;
- word-break: break-word;
- font-family: inherit;
- &:hover {
- background-color: rgba(32, 33, 36, 0.85);
- color: rgba(255, 255, 255, 0.97);
- }
-}
diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/FileItemSize.tsx b/src/files-ui/components/file-item/components/FileItemMainLayer/FileItemSize.tsx
deleted file mode 100644
index 4f431faaa02967d5ae1d872a560b0eb3ce717722..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemMainLayer/FileItemSize.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import * as React from "react";
-import "./FileItemSize.scss";
-export type FileItemSizeProps = {
- sizeFormatted?: string;
-};
-const FileItemSize: React.FC<FileItemSizeProps> = (
- props: FileItemSizeProps
-) => {
- const { sizeFormatted } = props;
- return (
- <React.Fragment>
- {sizeFormatted && (
- <div className="dui-file-item-size">{sizeFormatted}</div>
- )}
- </React.Fragment>
- );
-};
-export default FileItemSize;
diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayer/FileItemMainLayer.scss b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayer/FileItemMainLayer.scss
deleted file mode 100644
index b72e2de0161a506e0aa4345ce276bc3ece9028fd..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayer/FileItemMainLayer.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.dui-main-layer-container {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: space-between;
- position: relative;
- height: inherit;
- width: 100%;
- border-radius: 8px;
- &.loading{
- background-color: rgba(0, 0, 0, 0.185);
- }
-}
\ No newline at end of file
diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayer/FileItemMainLayer.tsx b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayer/FileItemMainLayer.tsx
deleted file mode 100644
index 716a3eda50cad83872c09e421c868bba7e87aa16..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayer/FileItemMainLayer.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import * as React from "react";
-import "./FileItemMainLayer.scss";
-
-import MainLayerHeaderNeo from "../MainLayerHeader/MainLayerHeaderNeo";
-import MainLayerBodyNeo from "../MainLayerBody/MainLayerBodyNeo";
-import MainLayerFooterNeo from "../MainLayerFooter/MainLayerFooterNeo";
-import { Localization, UPLOADSTATUS } from "../../../../../core";
-
-export interface FileItemMainLayerProps {
- onOpenInfo: Function;
- onOpenImage: Function | undefined;
- onOpenVideo: Function | undefined;
- onDelete: Function | undefined;
- onDownloadFile: Function | undefined;
- //fileNamePosition: FileItemProps["fileName"];
- fileName: string;
- info: boolean;
- /**
- * whether show a valid or rejected message
- * by def. valid is false (if not present, is false too)
- */
- valid?: boolean | null;
- isImage: boolean;
- isVideo: boolean;
- uploadStatus?: UPLOADSTATUS;
- sizeFormatted: string;
- /**
- * language to be used
- * for now
- * only English and Spanish is supported
- */
- localization?: Localization;
- hovering?: boolean;
- /**
- * the current percentage upload progress
- *
- */
- progress?: number;
- /**
- * abort event
- */
- onAbort?: Function;
- onCancel?: Function;
- showInfo: boolean;
-}
-
-const FileItemMainLayer: React.FC<FileItemMainLayerProps> = (
- props: FileItemMainLayerProps
-) => {
- const {
- onDelete,
- info,
- valid,
- isImage,
- isVideo,
- showInfo,
- onOpenInfo,
- onOpenImage,
- onOpenVideo,
- onDownloadFile,
- sizeFormatted,
- uploadStatus,
- localization,
- hovering,
- progress,
- onAbort,
- onCancel,
- } = props;
- //console.log("MainLayer onCancel", onCancel);
-
- return (
- <React.Fragment>
- <div className={"dui-main-layer-container"}>
- <MainLayerHeaderNeo
- hide={showInfo}
- onDelete={onDelete}
- uploadStatus={uploadStatus}
- hovering={hovering}
- />
-
- <MainLayerBodyNeo
- hide={showInfo}
- uploadStatus={uploadStatus}
- localization={localization}
- progress={progress}
- onAbort={onAbort}
- valid={valid}
- hovering={hovering}
- onCancel={onCancel}
- />
- <MainLayerFooterNeo
- hide={showInfo}
- uploadStatus={uploadStatus}
- // uploadComplete={uploadComplete}
- localization={localization}
- sizeFormatted={sizeFormatted}
- valid={valid}
- info={info}
- isImage={isImage}
- isVideo={isVideo}
- onDownloadFile={onDownloadFile}
- onOpenImage={onOpenImage}
- onOpenVideo={onOpenVideo}
- onOpenInfo={onOpenInfo}
- hovering={hovering}
- />
- </div>
- </React.Fragment>
- );
-};
-export default FileItemMainLayer;
diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayer/FileItemMainLayerNeo.tsx b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayer/FileItemMainLayerNeo.tsx
deleted file mode 100644
index d7963b893a699eb40538ca78810e17577447a73e..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayer/FileItemMainLayerNeo.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-import * as React from "react";
-//import { FileItemProps } from "../FileItem/FileItemProps";
-//import FileItemStatus from "../FileItemStatus/FileItemStatus";
-
-import "./FileItemMainLayer.scss";
-
-import MainLayerHeaderNeo from "../MainLayerHeader/MainLayerHeaderNeo";
-import MainLayerBodyNeo from "../MainLayerBody/MainLayerBodyNeo";
-import MainLayerFooterNeo from "../MainLayerFooter/MainLayerFooterNeo";
-import { Localization, UPLOADSTATUS } from "../../../../../core";
-//import {shrinkWord} from "./../../utils";
-export interface FileItemMainLayerNeoProps {
- onOpenInfo: Function;
- onOpenImage: Function | undefined;
- onOpenVideo: Function | undefined;
- onDelete: Function | undefined;
- onDownloadFile: Function | undefined;
- //fileNamePosition: FileItemProps["fileName"];
- fileName: string;
- info: boolean;
- /**
- * whether show a valid or rejected message
- * by def. valid is false (if not present, is false too)
- */
- valid?: boolean | null;
- isImage: boolean;
- isVideo: boolean;
- uploadStatus?: UPLOADSTATUS;
- sizeFormatted: string;
- /**
- * language to be used
- * for now
- * only English and Spanish is supported
- */
- localization?: Localization;
- hovering?: boolean;
- /**
- * the current percentage upload progress
- *
- */
- progress?: number;
- /**
- * abort event
- */
- onAbort?: Function;
- onCancel?: Function;
- showInfo: boolean;
-}
-
-const FileItemMainLayerNeo: React.FC<FileItemMainLayerNeoProps> = (
- props: FileItemMainLayerNeoProps
-) => {
- const {
- onDelete,
- info,
- valid,
- isImage,
- isVideo,
- showInfo,
- onOpenInfo,
- onOpenImage,
- onOpenVideo,
- onDownloadFile,
- sizeFormatted,
- uploadStatus,
- localization,
- hovering,
- progress,
- onAbort,
- onCancel,
- } = props;
-
- return (
- <React.Fragment>
- <div className={"dui-main-layer-container"}>
- <MainLayerHeaderNeo
- hide={showInfo}
- onDelete={onDelete}
- uploadStatus={uploadStatus}
- hovering={hovering}
- />
-
- <MainLayerBodyNeo
- hide={showInfo}
- uploadStatus={uploadStatus}
- localization={localization}
- progress={progress}
- onAbort={onAbort}
- valid={valid}
- hovering={hovering}
- onCancel={onCancel}
- />
- <MainLayerFooterNeo
- hide={showInfo}
- uploadStatus={uploadStatus}
- // uploadComplete={uploadComplete}
- localization={localization}
- sizeFormatted={sizeFormatted}
- valid={valid}
- info={info}
- isImage={isImage}
- isVideo={isVideo}
- onDownloadFile={onDownloadFile}
- onOpenImage={onOpenImage}
- onOpenVideo={onOpenVideo}
- onOpenInfo={onOpenInfo}
- hovering={hovering}
- />
- </div>
- </React.Fragment>
- );
-};
-export default FileItemMainLayerNeo;
diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerBody/MainLayerBody.scss b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerBody/MainLayerBody.scss
deleted file mode 100644
index 4f2ad701889d34ac17a9cb1ee2976124674200c3..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerBody/MainLayerBody.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.dui-file-item-main-layer-body {
- width: 100%;
- height: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- position: relative;
- .dui-file-status-absolute-container {
- position: absolute;
- bottom: 0;
- left: 0;
- }
-}
diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerBody/MainLayerBody.tsx b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerBody/MainLayerBody.tsx
deleted file mode 100644
index d4033b24967d4b64cf66a8a1a31e91349f802a75..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerBody/MainLayerBody.tsx
+++ /dev/null
@@ -1,146 +0,0 @@
-import * as React from "react";
-import { Localization, UPLOADSTATUS } from "../../../../../core";
-
-import FileItemStatus from "../../FileItemStatus/FileItemStatus";
-import FileItemLoader from "../FileItemLoader/FileItemLoader";
-import "./MainLayerBody.scss";
-export type MainLayerBodyProps = {
- /**
- * whether show a valid or rejected message
- * by def. valid is false (if not present, is false too)
- */
- valid?: boolean | null;
-
- showInfo: boolean;
- /**
- * This feature is hidden, it is not present on the documentation
- * because it's experimental. If you found this prop, you can test it
- * and comment us if any issue is found. Thanks in advance.
- *
- * Make file name, info layer, size and "valid message"
- * not visible
- */
- onlyImage?: boolean;
- uploadStatus?: UPLOADSTATUS;
-
- /**
- * language to be used
- * for now
- * only English and Spanish is supported
- */
- localization?: Localization;
- hovering?: boolean;
- /**
- * the current percentage upload progress
- *
- */
- progress?: number;
- /**
- * abort event
- */
- onAbort?: Function;
- onCancel?: Function;
- uploadComplete?: boolean;
-};
-const MainLayerBody: React.FC<MainLayerBodyProps> = (
- props: MainLayerBodyProps
-) => {
- const {
- uploadStatus,
- showInfo,
- hovering,
- //uploadComplete,
- localization,
- onAbort,
- progress,
- onlyImage,
- valid,
- onCancel,
- } = props;
-
- const [uploadComplete, setUploadComplete] = React.useState<boolean>(false);
- React.useEffect(() => {
- if (
- uploadStatus &&
- ["success", "error", "success", "aborted"].includes(uploadStatus)
- ) {
- setTimeout(() => {
- setUploadComplete(true);
- }, 2000);
- }
- return () => {
- setUploadComplete(false);
- };
- }, [uploadStatus]);
-
-/* React.useEffect(() => {
- console.log("MainLayerBody", uploadStatus, uploadComplete,progress);
- }, [uploadStatus, uploadComplete]); */
-
- return (
- <div className="dui-file-item-main-layer-body">
- {/** UPLOADING, upload isn't completed, showInfo=false and uploadStatus != undef */}
- {(uploadStatus === "preparing" ||
- uploadStatus === "uploading") &&
- !showInfo &&
- !uploadComplete ? (
- <React.Fragment>
- <FileItemLoader
- uploadStatus={uploadStatus}
- localization={localization as Localization}
- progress={progress}
- onAbort={onAbort}
- height={60}
- width={60}
- onCancel={onCancel}
- />
- <div className="dui-file-status-absolute-container">
- {!showInfo && !onlyImage && hovering && (
- <React.Fragment>
- {/** When always actie or hovering he file status validation must be visible
- * valid, not valid
- *
- */}
- {uploadStatus &&
- uploadStatus !== "preparing" &&
- uploadStatus !== "uploading" ? (
- <FileItemStatus
- uploadStatus={uploadStatus}
- localization={localization as Localization}
- />
- ) : (
- <FileItemStatus
- valid={valid}
- localization={localization as Localization}
- />
- )}
- </React.Fragment>
- )}
- </div>
- </React.Fragment>
- ) : (
- <React.Fragment>
- {/** Upload ststus or valid status depending on the value on the corner */}
- <div className="dui-file-status-aboslute-container">
- {!showInfo && !onlyImage && hovering && (
- <React.Fragment>
- {uploadStatus ? (
- <FileItemStatus
- uploadStatus={uploadStatus}
- localization={localization as Localization}
- />
- ) : (
- <FileItemStatus
- valid={valid}
- localization={localization as Localization}
- />
- )}
- </React.Fragment>
- )}
- </div>
- </React.Fragment>
- )}
- </div>
- );
-};
-export default MainLayerBody;
diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerBody/MainLayerBodyNeo.tsx b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerBody/MainLayerBodyNeo.tsx
deleted file mode 100644
index a0ee09d1d76d928bb849e0a64ba897b03b0a10f9..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerBody/MainLayerBodyNeo.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import * as React from "react";
-import { Localization, UPLOADSTATUS } from "../../../../../core";
-
-import FileItemUploadStatus from "../../FileItemStatus/FileItemUploadStatus";
-import FileItemValidStatus from "../../FileItemStatus/FileItemValidStatus";
-import FileItemLoader from "../FileItemLoader/FileItemLoader";
-import "./MainLayerBody.scss";
-
-export type MainLayerBodyNeoProps = {
- /**
- * whether show a valid or rejected message
- * by def. valid is false (if not present, is false too)
- */
- valid?: boolean | null;
- hide?: boolean;
- uploadStatus?: UPLOADSTATUS;
-
- /**
- * language to be used
- * for now
- * only English and Spanish is supported
- */
- localization?: Localization;
- hovering?: boolean;
- /**
- * the current percentage upload progress
- *
- */
- progress?: number;
- /**
- * abort event
- */
- onAbort?: Function;
- onCancel?: Function;
- uploadComplete?: boolean;
-};
-const MainLayerBodyNeo: React.FC<MainLayerBodyNeoProps> = (
- props: MainLayerBodyNeoProps
-) => {
- const {
- uploadStatus,
- hide,
- hovering,
- //uploadComplete,
- localization,
- onAbort,
- progress,
-
- valid,
- onCancel,
- } = props;
-
- const [uploadComplete, setUploadComplete] = React.useState<boolean>(false);
- React.useEffect(() => {
- if (
- uploadStatus &&
- ["success", "error", "aborted"].includes(uploadStatus)
- ) {
- setTimeout(() => {
- setUploadComplete(true);
- }, 2000);
- }
- return () => {
- setUploadComplete(false);
- };
- }, [uploadStatus]);
- //console.log("MainLayerBody onCancel", onCancel);
- return (
- <div className="dui-file-item-main-layer-body">
- {/** Uploading or preparing stage? */}
- {!hide && !uploadComplete && (
- <React.Fragment>
- <FileItemLoader
- uploadStatus={uploadStatus}
- localization={localization as Localization}
- progress={progress}
- onAbort={onAbort}
- height={60}
- width={60}
- onCancel={onCancel}
- />
- <FileItemUploadStatus
- uploadStatus={uploadStatus}
- localization={localization}
- />
- </React.Fragment>
- )}
- <div className="dui-file-status-absolute-container">
- {!hide && hovering && (
- <React.Fragment>
- {uploadComplete ? (
- <FileItemUploadStatus
- uploadStatus={uploadStatus}
- localization={localization}
- />
- ) : (
- <FileItemValidStatus valid={valid} localization={localization} />
- )}
- </React.Fragment>
- )}
- </div>
- </div>
- );
-};
-export default MainLayerBodyNeo;
diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerBody/PrincipalState.tsx b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerBody/PrincipalState.tsx
deleted file mode 100644
index 7a80e89a0a12fd053814ff034d1f5a250067435f..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerBody/PrincipalState.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import * as React from "react";
-import { UPLOADSTATUS } from "../../../../../core";
-import DefaultLoaderNeo from "../../../../loader/DefaultLoader/DefaultLoader";
-export type PrincipalStateProps = {
- uploadStatus?: UPLOADSTATUS;
- valid?: boolean;
-};
-const PrincipalState: React.FC<PrincipalStateProps> = (
- props: PrincipalStateProps
-) => {
- const { uploadStatus, valid } = props;
- const [isUploading, setIsUploading] = React.useState<boolean | undefined>(
- undefined
- );
- const [isValid, setIsValid] = React.useState<boolean | undefined>(undefined);
- React.useEffect(() => {
- setIsUploading(
- uploadStatus &&
- ["preparing", "uploading"].includes(uploadStatus)
- );
- }, [uploadStatus]);
- return (
- <div>
- <DefaultLoaderNeo color="green" />
- </div>
- );
-};
-export default PrincipalState;
diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerBody/SecondaryState.tsx b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerBody/SecondaryState.tsx
deleted file mode 100644
index 5c1e541be19ca6c69e60822849a19b859aeed398..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerBody/SecondaryState.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as React from "react";
-export type SecondaryStateProps = {
- uploadComplete?: boolean;
-};
-const SecondaryState: React.FC<SecondaryStateProps> = (
- props: SecondaryStateProps
-) => {
- const { uploadComplete } = props;
- //uploa status
- if (uploadComplete) {
- return <div></div>;
- }
- //valid
- return <div></div>;
-};
-export default SecondaryState;
diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerFooter/MainLayerFooter.scss b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerFooter/MainLayerFooter.scss
deleted file mode 100644
index e93b6352c8f3dc173a90c165faf472ae6409bb4b..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerFooter/MainLayerFooter.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-.dui-main-layer-footer-container {
- min-height: 23px;
- width: 100%;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- //position: relative;
- .dui-main-layer-footer-status {
- //height: 0px;
- //position: relative;
- //bottom: 0px;
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- align-items: flex-start;
- width: 100%;
- }
- .dui-main-layer-footer {
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: space-between;
- width: 100%;
- // min-height: 20px;
- }
-
- //width: inherit;
-}
diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerFooter/MainLayerFooter.tsx b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerFooter/MainLayerFooter.tsx
deleted file mode 100644
index 16fae2819145a3c60ffb7eac3fd8f9d3fec15880..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerFooter/MainLayerFooter.tsx
+++ /dev/null
@@ -1,166 +0,0 @@
-import * as React from "react";
-import { Localization, UPLOADSTATUS } from "../../../../../core";
-import {
- PlayIcon,
- DownloadFile,
- InfoDisney,
- Visibility,
-} from "../../../../icons";
-
-import FileItemStatus from "../../FileItemStatus/FileItemStatus";
-import FileItemSize from "../FileItemSize";
-
-import "./MainLayerFooter.scss";
-export type MainLayerFooterProps = {
- hovering?: boolean;
- onlyImage?: boolean;
- uploadStatus?: UPLOADSTATUS;
- // uploadComplete?: boolean;
- localization?: Localization;
- showInfo?: boolean;
- sizeFormatted?: string;
- /**
- * whether show a valid or rejected message
- * by def. valid is false (if not present, is false too)
- */
- valid?: boolean | null;
- isImage?: boolean;
- isVideo?: boolean;
- info?: boolean;
- onOpenInfo?: Function;
- onOpenImage?: Function | undefined;
- onOpenVideo?: Function | undefined;
- onDownloadFile?: Function | undefined;
-};
-const MainLayerFooter: React.FC<MainLayerFooterProps> = (
- props: MainLayerFooterProps
-) => {
- const {
- onlyImage,
- uploadStatus,
- // uploadComplete,
- localization,
- showInfo,
- sizeFormatted,
- valid,
- info,
- isImage,
- isVideo,
- onDownloadFile,
- onOpenImage,
- onOpenVideo,
- onOpenInfo,
- hovering,
- } = props;
- const handleOpenInfo = () => {
- onOpenInfo?.();
- };
- const handleOpenImage = () => {
- onOpenImage?.();
- };
- const handleOpenVideo = () => {
- onOpenVideo?.();
- };
- const handleDownloadFile = () => {
- onDownloadFile?.();
- };
-
- const [uploadComplete, setUploadComplete] = React.useState<boolean>(false);
- React.useEffect(() => {
- if (
- uploadStatus &&
- ["success", "error", "success", "aborted"].includes(uploadStatus)
- ) {
- setTimeout(() => {
- setUploadComplete(true);
- }, 2000);
- }
- return () => {
- setUploadComplete(false);
- };
- }, [uploadStatus]);
-
-/* React.useEffect(() => {
- console.log("MainLayerFooter", uploadStatus, uploadComplete);
- }, [uploadStatus, uploadComplete]);
- */
- return (
- <React.Fragment>
- <div className="dui-main-layer-footer-container">
- {/** Show only when footer is not visible */}
- <div className="dui-main-layer-footer-status">
- {!onlyImage &&
- uploadStatus &&
- uploadStatus !== "uploading" &&
- uploadComplete ? (
- <React.Fragment>
- {!showInfo && !hovering && (
- <FileItemStatus
- uploadStatus={uploadStatus}
- localization={localization as Localization}
- />
- )}
- </React.Fragment>
- ) : (
- <React.Fragment>
- {!showInfo && !hovering && typeof valid !== "undefined" && (
- <FileItemStatus
- valid={valid}
- localization={localization as Localization}
- />
- )}
- </React.Fragment>
- )}
- </div>
- {/** Action buttons and file size */}
- <div className="dui-main-layer-footer">
- {!showInfo && hovering && (
- <React.Fragment>
- {!onlyImage && <FileItemSize sizeFormatted={sizeFormatted} />}
-
- {isImage &&
- onOpenImage &&
- typeof valid === "boolean" &&
- valid && (
- <Visibility
- className="dui-file-item-icon"
- color="rgba(255,255,255,0.851)"
- onClick={handleOpenImage}
- size="small"
- />
- )}
- {isVideo &&
- onOpenVideo &&
- typeof valid === "boolean" &&
- valid && (
- <PlayIcon
- className="dui-file-item-icon"
- color="rgba(255,255,255,0.851)"
- onClick={handleOpenVideo}
- size="small"
- />
- )}
- {onDownloadFile && (
- <DownloadFile
- className="dui-file-item-icon"
- color="rgba(255,255,255,0.851)"
- onClick={handleDownloadFile}
- size="small"
- />
- )}
- {!onlyImage && info && (
- <InfoDisney
- className="dui-file-item-icon"
- onClick={handleOpenInfo}
- color="rgba(255,255,255,0.851)"
- size="micro"
- />
- )}
- </React.Fragment>
- )}
- </div>
- </div>
- </React.Fragment>
- );
-};
-export default MainLayerFooter;
diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerFooter/MainLayerFooterNeo.tsx b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerFooter/MainLayerFooterNeo.tsx
deleted file mode 100644
index 93527bb7e556f8784f8ac5cffc2bec4cb95877c9..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerFooter/MainLayerFooterNeo.tsx
+++ /dev/null
@@ -1,159 +0,0 @@
-import * as React from "react";
-import { Localization, UPLOADSTATUS } from "../../../../../core";
-import {
- PlayIcon,
- DownloadFile,
- InfoDisney,
- Visibility,
-} from "../../../../icons";
-
-import FileItemStatus from "../../FileItemStatus/FileItemStatus";
-import FileItemSize from "../FileItemSize";
-
-import "./MainLayerFooter.scss";
-export type MainLayerFooterNeoProps = {
- hovering?: boolean;
- uploadStatus?: UPLOADSTATUS;
- // uploadComplete?: boolean;
- localization?: Localization;
- sizeFormatted?: string;
- /**
- * whether show a valid or rejected message
- * by def. valid is false (if not present, is false too)
- */
- valid?: boolean | null;
- isImage?: boolean;
- isVideo?: boolean;
- info?: boolean;
- onOpenInfo?: Function;
- onOpenImage?: Function | undefined;
- onOpenVideo?: Function | undefined;
- onDownloadFile?: Function | undefined;
- hide: boolean;
-};
-const MainLayerFooterNeo: React.FC<MainLayerFooterNeoProps> = (
- props: MainLayerFooterNeoProps
-) => {
- const {
- uploadStatus,
- hide,
- localization,
- sizeFormatted,
- valid,
- info,
- isImage,
- isVideo,
- onDownloadFile,
- onOpenImage,
- onOpenVideo,
- onOpenInfo,
- hovering,
- } = props;
- const handleOpenInfo = () => {
- onOpenInfo?.();
- };
- const handleOpenImage = () => {
- onOpenImage?.();
- };
- const handleOpenVideo = () => {
- onOpenVideo?.();
- };
- const handleDownloadFile = () => {
- onDownloadFile?.();
- };
-
- const [uploadComplete, setUploadComplete] = React.useState<boolean>(false);
- React.useEffect(() => {
- if (
- uploadStatus &&
- ["success", "error", "aborted"].includes(uploadStatus)
- ) {
- setTimeout(() => {
- setUploadComplete(true);
- }, 2000);
- }
- return () => {
- setUploadComplete(false);
- };
- }, [uploadStatus]);
-
- return (
- <React.Fragment>
- <div className="dui-main-layer-footer-container">
- {/** Show only when footer is not visible */}
- <div className="dui-main-layer-footer-status">
- {!hide &&
- uploadStatus &&
- uploadStatus !== "uploading" &&
- uploadComplete ? (
- <React.Fragment>
- {!hovering && (
- <FileItemStatus
- uploadStatus={uploadStatus}
- localization={localization as Localization}
- />
- )}
- </React.Fragment>
- ) : (
- <React.Fragment>
- {!hovering && typeof valid !== "undefined" && (
- <FileItemStatus
- valid={valid}
- localization={localization as Localization}
- />
- )}
- </React.Fragment>
- )}
- </div>
- {/** Action buttons and file size */}
- <div className="dui-main-layer-footer">
- {!hide && hovering && (
- <React.Fragment>
- {<FileItemSize sizeFormatted={sizeFormatted} />}
-
- {isImage &&
- onOpenImage &&
- typeof valid === "boolean" &&
- valid && (
- <Visibility
- className="dui-file-item-icon"
- color="rgba(255,255,255,0.851)"
- onClick={handleOpenImage}
- size="small"
- />
- )}
- {isVideo &&
- onOpenVideo &&
- typeof valid === "boolean" &&
- valid && (
- <PlayIcon
- className="dui-file-item-icon"
- color="rgba(255,255,255,0.851)"
- onClick={handleOpenVideo}
- size="small"
- />
- )}
- {onDownloadFile && (
- <DownloadFile
- className="dui-file-item-icon"
- color="rgba(255,255,255,0.851)"
- onClick={handleDownloadFile}
- size="small"
- />
- )}
- {info && (
- <InfoDisney
- className="dui-file-item-icon"
- onClick={handleOpenInfo}
- color="rgba(255,255,255,0.851)"
- size="micro"
- />
- )}
- </React.Fragment>
- )}
- </div>
- </div>
- </React.Fragment>
- );
-};
-export default MainLayerFooterNeo;
diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerHeader/MainLayerHeader.scss b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerHeader/MainLayerHeader.scss
deleted file mode 100644
index aeab8b694c95312fe59f79f5ccb27b3f65c7dea2..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerHeader/MainLayerHeader.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.dui-main-layer-header-container {
- min-height: 22px;
- width: 100%;
- flex-direction: row;
- display: flex;
- align-items: center;
- justify-content: flex-end;
- //width: inherit;
-}
diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerHeader/MainLayerHeader.tsx b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerHeader/MainLayerHeader.tsx
deleted file mode 100644
index 97ff284e499af299d70865f28a9b7622a7000bfb..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerHeader/MainLayerHeader.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import * as React from "react";
-import { UPLOADSTATUS } from "../../../../../core";
-import { Clear } from "../../../../icons";
-import "./MainLayerHeader.scss";
-
-export type MainLayerHeaderProps = {
- onDelete?: Function;
- uploadStatus?: UPLOADSTATUS;
- hovering?: boolean;
- showInfo: boolean;
-};
-
-const MainLayerHeader: React.FC<MainLayerHeaderProps> = (
- props: MainLayerHeaderProps
-) => {
- const { uploadStatus, onDelete, hovering, showInfo } = props;
- const handleDelete = () => {
- onDelete?.();
- };
-
- return (
- <div className="dui-main-layer-header-container">
- {!showInfo && hovering && uploadStatus !== "uploading" && onDelete && (
- <Clear
- className="dui-file-item-icon"
- color="rgba(255,255,255,0.851)"
- onClick={handleDelete}
- size="small"
- colorFill="transparent"
- />
- )}
- </div>
- );
-};
-export default MainLayerHeader;
diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerHeader/MainLayerHeaderNeo.tsx b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerHeader/MainLayerHeaderNeo.tsx
deleted file mode 100644
index f3a20534bb898659ff046a9a934d0b9050964486..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerHeader/MainLayerHeaderNeo.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import * as React from "react";
-import { UPLOADSTATUS } from "../../../../../core";
-import { Clear } from "../../../../icons";
-import "./MainLayerHeader.scss";
-
-export type MainLayerHeaderNeoProps = {
- onDelete?: Function;
- uploadStatus?: UPLOADSTATUS;
- hovering?: boolean;
- hide?: boolean;
-};
-
-const MainLayerHeaderNeo: React.FC<MainLayerHeaderNeoProps> = (
- props: MainLayerHeaderNeoProps
-) => {
- const { uploadStatus, onDelete, hovering, hide } = props;
- const handleDelete = () => {
- onDelete?.();
- };
-
- return (
- <div className="dui-main-layer-header-container">
- {hovering &&
- !hide &&
- // ![
- uploadStatus !== "preparing" &&
- uploadStatus !== "uploading" &&
- // undefined,
- //null,
- //].includes(uploadStatus)
- onDelete && (
- <Clear
- className="dui-file-item-icon"
- color="rgba(255,255,255,0.851)"
- onClick={handleDelete}
- size="small"
- colorFill="transparent"
- />
- )}
- </div>
- );
-};
-export default MainLayerHeaderNeo;
diff --git a/src/files-ui/components/file-item/components/FileItemStatus/FileItemStatus.scss b/src/files-ui/components/file-item/components/FileItemStatus/FileItemStatus.scss
deleted file mode 100644
index d8e8c04b3c554002abe34ea837c9ff6d267c858d..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemStatus/FileItemStatus.scss
+++ /dev/null
@@ -1,49 +0,0 @@
-.dui-file-item-status-container {
- text-align: center;
- font-size: 0.8rem;
- background-color: rgba(255, 255, 255, 0.8);
- display: flex;
- align-items: center;
- flex-direction: row;
- border-radius: 4px;
- padding: 0.5px;
- font-weight: 400;
- &.file-status-error {
- color: #f44336;
- }
- &.file-status-ok {
- color: #5c7a1f;
- }
- &.file-status-loading {
- &.percentage{
- padding: 7px 4px 2px 5px;
- }
- //
- position: relative;
- .abort-button {
- position: absolute;
- right: -2px;
- top: -2px;
- }
- display: flex;
- color: #8b6b10;
- align-items: center;
- justify-content: center;
- flex-direction: column;
- background-color: rgba(255, 255, 255, 0.7);
-
- //background-color: transparent;
- .uploading-text {
- &.up {
- margin-bottom: -22px;
- }
- &.down {
- margin-top: -20px;
- }
-
- p.percentage {
- font-weight: 500;
- }
- }
- }
-}
diff --git a/src/files-ui/components/file-item/components/FileItemStatus/FileItemStatus.tsx b/src/files-ui/components/file-item/components/FileItemStatus/FileItemStatus.tsx
deleted file mode 100644
index 7aa81245195da46f5f84fe153c4a1b7f53337d6c..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemStatus/FileItemStatus.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import React, { FC, Fragment } from "react";
-
-import Loader from "../../../loader/DefaultLoader/loader";
-import {
- CheckCircle,
- CloudDone,
- DoDisturb,
- Remove,
- // UploadDone,
- UploadError,
-} from "../../../icons";
-import { FileItemStatusProps } from "./FileItemStatusProps";
-import "./FileItemStatus.scss";
-import { FileItemLocalizerSelector, LocalLabels } from "../../../../core";
-
-const FileItemStatus: FC<FileItemStatusProps> = (
- props: FileItemStatusProps
-) => {
- const {
- valid,
- uploadStatus,
- //message,
- localization,
- progress,
- onAbort,
- } = props;
- const FileItemStatusLocalizer: LocalLabels = FileItemLocalizerSelector(
- localization
- ).status as LocalLabels;
- const handleAbort = () => {
- onAbort?.();
- };
- return (
- <Fragment>
- {uploadStatus ? (
- uploadStatus === "uploading" ? (
- <div
- className={`dui-file-item-status-container file-status-loading${
- progress ? " percentage" : ""
- }`}
- >
- {onAbort && (
- <div className="abort-button">
- <Remove
- //className="dui-file-item-icon"
- color="red"
- onClick={handleAbort}
- size="semi-medium"
- colorFill="transparent"
- />
- </div>
- )}
-
- {progress && (
- <div className="uploading-text up">
- <p>{FileItemStatusLocalizer.uploading as string}</p>
- </div>
- )}
- <Loader />
- <div className="uploading-text down">
- {progress ? (
- <p className="percentage">
- {progress.toFixed(0) + "%" || "100%"}
- </p>
- ) : (
- <p>{FileItemStatusLocalizer.uploading as string}</p>
- )}
- </div>
- </div>
- ) : uploadStatus === "aborted" ? (
- <div className="dui-file-item-status-container file-status-error">
- <UploadError
- color="#f44336"
- size="semi-medium"
- className="status-icon"
- />
- {FileItemStatusLocalizer.aborted as string}
- </div>
- ) : uploadStatus === "success" ? (
- <div className="dui-file-item-status-container file-status-ok">
- <CloudDone color="#4caf50" size="small" className="status-icon" />
- {FileItemStatusLocalizer.success as string}
- </div>
- ) : (
- <div className="dui-file-item-status-container file-status-error">
- <UploadError
- color="#f44336"
- size="semi-medium"
- className="status-icon"
- />
- {FileItemStatusLocalizer.error as string}
- </div>
- )
- ) : valid !== null && typeof valid !== "undefined" ? (
- <Fragment>
- {valid ? (
- <div className="dui-file-item-status-container file-status-ok">
- <CheckCircle
- color="#4caf50"
- size="small"
- className="status-icon"
- />
- {FileItemStatusLocalizer.valid as string}
- </div>
- ) : (
- <div className="dui-file-item-status-container file-status-error">
- <DoDisturb color="#f44336" size="small" className="status-icon" />
- {FileItemStatusLocalizer.denied as string}
- </div>
- )}
- </Fragment>
- ) : (
- <Fragment></Fragment>
- )}
- </Fragment>
- );
-};
-export default FileItemStatus;
diff --git a/src/files-ui/components/file-item/components/FileItemStatus/FileItemStatusProps.ts b/src/files-ui/components/file-item/components/FileItemStatus/FileItemStatusProps.ts
deleted file mode 100644
index 118623abe19ccf6e62db54a6b6c39e68baad8e9a..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemStatus/FileItemStatusProps.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Localization, UPLOADSTATUS } from "../../../../core";
-
-
-export interface FileItemStatusProps {
- /**
- * whether show a valid or rejected message
- * by def. valid is false (if not present, is false too)
- */
- valid?: boolean | null;
- /**
- *
- */
- uploadStatus?: UPLOADSTATUS;
- /**
- * A message for the status item
- */
- message?: string;
- /**
- * language to be used
- * for now
- * only English and Spanish is supported
- */
- localization: Localization;
- /**
- * the current percentage upload progress
- *
- */
- progress?: number;
- /**
- * abort event
- */
- onAbort?: Function;
-}
\ No newline at end of file
diff --git a/src/files-ui/components/file-item/components/FileItemStatus/FileItemUploadStatus.scss b/src/files-ui/components/file-item/components/FileItemStatus/FileItemUploadStatus.scss
deleted file mode 100644
index a69fc3a52a8a6099269f17eccf678bfcbd9812e6..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemStatus/FileItemUploadStatus.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-.fui-file-item-upload-status-container {
- text-align: center;
- font-size: 0.8rem;
- background-color: rgba(255, 255, 255, 0.8);
- display: flex;
- align-items: center;
- flex-direction: row;
- border-radius: 4px;
- padding: 0.5px;
- font-weight: 400;
- &.file-status-error-aborted {
- color: #f44336;
- }
- &.file-status-success {
- color: #5c7a1f;
- }
-}
diff --git a/src/files-ui/components/file-item/components/FileItemStatus/FileItemUploadStatus.tsx b/src/files-ui/components/file-item/components/FileItemStatus/FileItemUploadStatus.tsx
deleted file mode 100644
index 9a3207c853581a3c704a3ab7aa6c2bac08fd5530..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemStatus/FileItemUploadStatus.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import * as React from "react";
-import {
- FileItemLocalizerSelector,
- Localization,
- LocalLabels,
- UPLOADSTATUS,
-} from "../../../../core";
-import { CloudDone, UploadError } from "../../../icons";
-import "./FileItemUploadStatus.scss";
-export type FileItemUploadStatusProps = {
- /**
- * sucess
- * error
- * aborted
- */
- uploadStatus?: UPLOADSTATUS;
- /**
- * language to be used on labels
- */
- localization?: Localization;
-};
-/**
- * Upload ststaus: "success", "aborted" and "error"
- * @returns
- */
-const FileItemUploadStatus: React.FC<FileItemUploadStatusProps> = (
- props: FileItemUploadStatusProps
-) => {
- const { uploadStatus, localization } = props;
- const FileItemStatusLocalizer: LocalLabels = FileItemLocalizerSelector(
- localization
- ).status as LocalLabels;
- if (
- uploadStatus &&
- ["success", "aborted", "error"].includes(
- uploadStatus
- )
- ) {
- const overloadClassName: string =
- uploadStatus === "success"
- ? " file-status-success"
- : " file-status-error-aborted";
- return (
- <div
- className={`fui-file-item-upload-status-container${overloadClassName}`}
- >
- {uploadStatus === "success" ? (
- <>
- <CloudDone color="#4caf50" size="small" className="status-icon" />
- {FileItemStatusLocalizer.success as string}
- </>
- ) : (
- <>
- <UploadError
- color="#f44336"
- size="semi-medium"
- className="status-icon"
- />
- {uploadStatus === "aborted" ? (
- <>{FileItemStatusLocalizer.aborted as string}</>
- ) : (
- <> {FileItemStatusLocalizer.error as string}</>
- )}
- </>
- )}
- </div>
- );
- }
- return <React.Fragment></React.Fragment>;
-};
-export default FileItemUploadStatus;
diff --git a/src/files-ui/components/file-item/components/FileItemStatus/FileItemUploadingStatus.scss b/src/files-ui/components/file-item/components/FileItemStatus/FileItemUploadingStatus.scss
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/src/files-ui/components/file-item/components/FileItemStatus/FileItemUploadingStatus.tsx b/src/files-ui/components/file-item/components/FileItemStatus/FileItemUploadingStatus.tsx
deleted file mode 100644
index b76e45d8f05e08c776938c0fb2743672e81e7987..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemStatus/FileItemUploadingStatus.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import * as React from "react";
-import { FileItemLocalizerSelector, Localization, LocalLabels, UPLOADSTATUS } from "../../../../core";
-import { DefaultLoader } from "../../../loader";
-
-export type FileItemUploadingStatusProps = {
- /**
- * sucess
- * error
- * aborted
- */
- uploadStatus?: UPLOADSTATUS;
- /**
- * language to be used on labels
- */
- localization?: Localization;
-};
-const FileItemUploadingStatus: React.FC<FileItemUploadingStatusProps> = (
- props: FileItemUploadingStatusProps
-) => {
- const { uploadStatus, localization } = props;
- const FileItemStatusLocalizer: LocalLabels = FileItemLocalizerSelector(
- localization
- ).status as LocalLabels;
- if (uploadStatus && uploadStatus === "uploading") {
- return (
- <DefaultLoader label={FileItemStatusLocalizer.uploading as string} />
- );
- }
- return <React.Fragment></React.Fragment>;
-};
-export default FileItemUploadingStatus;
diff --git a/src/files-ui/components/file-item/components/FileItemStatus/FileItemValidStatus.scss b/src/files-ui/components/file-item/components/FileItemStatus/FileItemValidStatus.scss
deleted file mode 100644
index e4e14ee692786b46551c5246a33cfb338acc94c4..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemStatus/FileItemValidStatus.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-.fui-file-item-valid-status-container {
- text-align: center;
- font-size: 0.8rem;
- background-color: rgba(255, 255, 255, 0.8);
- display: flex;
- align-items: center;
- flex-direction: row;
- border-radius: 4px;
- padding: 0.5px;
- font-weight: 400;
- &.file-status-nonvalid {
- color: #f44336;
- }
- &.file-status-valid {
- color: #5c7a1f;
- }
-}
diff --git a/src/files-ui/components/file-item/components/FileItemStatus/FileItemValidStatus.tsx b/src/files-ui/components/file-item/components/FileItemStatus/FileItemValidStatus.tsx
deleted file mode 100644
index 84d0bfc6417d644cce8b1242a8f95396502d315f..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemStatus/FileItemValidStatus.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import * as React from "react";
-import { FileItemLocalizerSelector, Localization, LocalLabels } from "../../../../core";
-import { CheckCircle, DoDisturb } from "../../../icons";
-
-import "./FileItemValidStatus.scss";
-export type FileItemValidStatusProps = {
- /**
- * whether show a valid or rejected message
- * by def. valid is false (if not present, is false too)
- */
- valid?: boolean | null;
- /**
- * language to be used
- * for now
- * only English and Spanish is supported
- */
- localization?: Localization;
-};
-const FileItemValidStatus: React.FC<FileItemValidStatusProps> = (
- props: FileItemValidStatusProps
-) => {
- const { valid, localization } = props;
- const FileItemStatusLocalizer: LocalLabels = FileItemLocalizerSelector(
- localization
- ).status as LocalLabels;
- if (typeof valid === "boolean") {
- const overloadClassName: string = valid
- ? " file-status-valid"
- : " file-status-nonvalid";
- return (
- <div
- className={`fui-file-item-valid-status-container${overloadClassName}`}
- >
- {valid ? (
- <>
- <CheckCircle color="#4caf50" size="small" className="status-icon" />
- {FileItemStatusLocalizer.valid as string}
- </>
- ) : (
- <>
- <DoDisturb color="#f44336" size="small" className="status-icon" />
- {FileItemStatusLocalizer.denied as string}
- </>
- )}
- </div>
- );
- } else {
- return <React.Fragment></React.Fragment>;
- }
-};
-export default FileItemValidStatus;
diff --git a/src/files-ui/components/file-item/hooks/useDropzoneFileListID.ts b/src/files-ui/components/file-item/hooks/useDropzoneFileListID.ts
deleted file mode 100644
index 4f05d381efd6bfc4b8a91e1c724adf9b626852d6..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/hooks/useDropzoneFileListID.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as React from "react";
-import { print_manager } from "../../../../utils";
-import { ExtFileManager } from "../../../core";
-
-const useDropzoneFileListID = (
-): number => {
- const [dropzoneId, setDuiFileID]
- = React.useState<number | undefined>(
- undefined
- );
- React.useEffect(() => {
- print_manager(undefined, "dropzoneId " + dropzoneId + "");
- if (!dropzoneId) {
- const newId: number = ExtFileManager.createFileListMap();
- setDuiFileID(newId);
- }
- // eslint-disable-next-line
- }, [dropzoneId]);
-
- return dropzoneId || 0;
-}
-export default useDropzoneFileListID;
\ No newline at end of file
diff --git a/src/files-ui/components/file-item/hooks/useFileItemClassName.ts b/src/files-ui/components/file-item/hooks/useFileItemClassName.ts
deleted file mode 100644
index fce4e5e5e1560a16d3379a09d68afffd1d9c0583..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/hooks/useFileItemClassName.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import * as React from "react";
-
-/**
- * Custom hook that generates the final className for the main container of FleItem
- * @param resultOnTooltip whether to show the result on a tooltip or not
- * @returns the fiaal classNmae
- */
-const useFileItemRootClassName = (
- resultOnTooltip: boolean = false,
- className: string | undefined,
- hovering: boolean | undefined = false
-): string => {
- const [classNameCreated, setClassNameCreated] = React.useState<string>("file-item-full-container-container");
-
- React.useEffect(() => {
- let baseClassName: string = "file-item-full-container-container";
- if (resultOnTooltip) {
- baseClassName += " files-ui-tooltip";
- }
- if (hovering) {
- baseClassName += " hovering";
- }
- if (className) {
- baseClassName += ` ${className}`;
- }
-
- setClassNameCreated(baseClassName);
- }, [resultOnTooltip, className, hovering]);
- return classNameCreated;
-}
-export default useFileItemRootClassName;
\ No newline at end of file
diff --git a/src/files-ui/components/file-item/hooks/useFileItemInitializer.ts b/src/files-ui/components/file-item/hooks/useFileItemInitializer.ts
deleted file mode 100644
index ded597828e78c2b6ae557e1880449a46cfc060ef..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/hooks/useFileItemInitializer.ts
+++ /dev/null
@@ -1,134 +0,0 @@
-import * as React from "react";
-import { getURLFileIco, readAsDataURL } from "../../../core";
-import { getURLFileIcoFromNameAndType } from "../../../core/mime/mime";
-
-/**
- * Initializer hook for FileItemNeo
- * @param file The file Object
- * @param valid Whether the file is valid, not valid or not set
- * @param preview Whether to show a preview on FileItem
- * @param imageUrl The image url
- * @param xhr the xhr object
- * @param progress the current progress given by props
- * @returns an array thta contains the following properties [isImage, isVideo, url, imageSource, localProgress]
- */
-const useFileItemInitializer = (
- file: File | undefined,
- name: string | undefined,
- type: string | undefined,
- valid: boolean | undefined | null,
- preview: boolean,
- imageUrl: string | undefined,
- xhr?: XMLHttpRequest,
-
-): [boolean, boolean, string, string | undefined] => {
-
- const [isImage, setIsImage] = React.useState<boolean>(false);
- const [isVideo, setIsVideo] = React.useState<boolean>(false);
- const [url, setUrl] = React.useState<string>("");
- const [imageSource, setImageSource] = React.useState<string | undefined>(undefined);
-
-
-
- const init = async (
- file: File | undefined,
- name: string | undefined,
- type: string | undefined,
- valid: boolean | undefined | null,
- preview: boolean,
- imageUrl: string | undefined,
- xhr?: XMLHttpRequest,
- progress?: number
- ) => {
- //////////////////////////////
- //console.log("init", file, name, type);
-
- if (!file && (!name && !type)) return;
-
- const { url } = file ? getURLFileIco(file) :
- getURLFileIcoFromNameAndType(name, type);
-
- //console.log("init", url);
-
- setUrl(url);
-
- if (imageUrl) {
- setIsImage(true);
- setImageSource(imageUrl);
- return;
- } else {
- const [headerMime, tailMime] = getHeaderAndTail(file, type);
-
- setIsImage(headerMime === "image");
- setIsVideo(
- headerMime === "video" && ["mp4", "ogg", "webm"].includes(tailMime)
- );
- if (
- preview &&
- (valid || typeof valid === "undefined" || valid === null) &&
- headerMime === "image"
- ) {
- //lets check for image preview from File
- let response: string | undefined = undefined;
- if (file) {
- response = await readAsDataURL(file);
- if (response) {
- setImageSource(response as string);
- }
- }
- //console.log("response image", response);
-
- }
- }
- /////////////// UPLOAD OBJECT ///////////////
-
- //if (!localProgress) {
- //handleProgress(1);
- //}
- };
-
-
-
- ////// EFFECT
- React.useEffect(() => {
- init(file, name, type, valid, preview || false, imageUrl);
- return () => {
- setImageSource(undefined);
- setIsImage(false);
- setIsVideo(false);
- };
- // eslint-disable-next-line
- }, [file, name, type, valid, preview, imageUrl,]);
- return [isImage, isVideo, url, imageSource];
-}
-export default useFileItemInitializer;
-
-/* export const identifyFileSource = (file: File | undefined, name: string, fileType: string) => {
- if(!file){
-
- }
-} */
-
-const getHeaderAndTail = (
- file: File | undefined,
- type: string | undefined,
-): [string, string] => {
-
- if (file) {
- if (file.type) {
- const splittedType: string[] = file.type.split("/");
- return [splittedType[0], splittedType[1]];
- } else {
- return ["octet", "octet"];
- }
- } else {
- const splittedType: string[] | undefined = type?.split("/");
- if (splittedType && splittedType.length > 1) {
- return [splittedType[0], splittedType[1]];
- } else {
- return ["octet", "octet"];
- }
- }
-
-
-}
\ No newline at end of file
diff --git a/src/files-ui/components/file-item/hooks/useFileItemNeoClassName.ts b/src/files-ui/components/file-item/hooks/useFileItemNeoClassName.ts
deleted file mode 100644
index 940cfddc34681cb09179f5ca0b812a7048b8d46f..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/hooks/useFileItemNeoClassName.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import * as React from "react";
-import { FileItemPropsNeo } from "../components/FileItem/FileItemPropsNeo";
-/**
- * Custom hook that generates the final className for main container
- * on FleItem
- * @param resultOnTooltip whether to show the result on tooltip or not
- * @param elevation the shadow elevation
- * @returns the fiaal classNmae
- */
-const useFileItemNeoClassName = (
- resultOnTooltip: boolean,
- elevation: FileItemPropsNeo["elevation"]
-): string => {
- const [classNameCreated, setClassNameCreated] =
- React.useState<string>("");
-
- React.useEffect(() => {
- let baseClassName: string =
- "file-item-full-container-container";
-
- if (resultOnTooltip) {
- baseClassName += " dz-ui-tooltip";
- }
- if (elevation && [1, 2, 3, 4, "1", "2", "3", "4"].includes(elevation)) {
- baseClassName += ` dz-ui-paper-elevation-${elevation}`;
- }
- setClassNameCreated(baseClassName);
- }, [resultOnTooltip]);
- return classNameCreated;
-}
-export default useFileItemNeoClassName;
\ No newline at end of file
diff --git a/src/files-ui/components/file-item/hooks/useFileItemProgress.ts b/src/files-ui/components/file-item/hooks/useFileItemProgress.ts
deleted file mode 100644
index bd61da06d5264713c06f0b10ef26b94d029f3f5b..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/hooks/useFileItemProgress.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import * as React from "react";
-
-/**
- *
- * @param progress
- * @param showProgress
- * @param xhr
- * @returns
- */
-const useFileItemProgress = (
- progress: number | undefined,
- showProgress: boolean | undefined,
- xhr?: XMLHttpRequest,
-
-): number | undefined => {
-
- const [localProgress, setLocalProgress] = React.useState<number | undefined>(undefined);
- // handlers
- const handleProgress = (currentProgress: number): void => {
- setLocalProgress(currentProgress);
- };
-
- React.useEffect(() => {
- if (progress && showProgress)
- handleProgress(typeof progress === "undefined" || progress === 0 ? 1 : progress);
- }, [progress, showProgress]);
-
-
- React.useEffect(() => {
- if (xhr && xhr !== null && showProgress && xhr.upload.onprogress === null) {
- xhr.upload.onprogress = (event) => {
- if (!progress)
- handleProgress((event.loaded / event.total) * 100);
- };
- handleProgress(1);
- }
- }, [xhr, showProgress, progress]);
-
- return localProgress;
-}
-export default useFileItemProgress;
\ No newline at end of file
diff --git a/src/files-ui/components/file-item/index.ts b/src/files-ui/components/file-item/index.ts
deleted file mode 100644
index 84098b699e8d04173393b8e4466dcdcd59de1be2..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-
-export {default as FileItem} from "./components/FileItem/FileItem";
-export * from "./components/FileItem/FileItem";
-
-export {default as FileItemContainer} from "./components/FileItemContainer/FileItemContainer";
-export * from "./components/FileItemContainer/FileItemContainer";
diff --git a/src/files-ui/components/file-item/utils/showFileItemComponent.ts b/src/files-ui/components/file-item/utils/showFileItemComponent.ts
deleted file mode 100644
index 8928339477d3c5b57e88090dcbd04946c631754b..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/utils/showFileItemComponent.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * Checks wheter the file objector at least the file name was given in order to show the file Item component
- * @param file the file object
- * @param name the file name
- * @returns true if the file object or the file name were given and are strings
- */
-export const showFileItemComponent = (
- file: File | undefined,
- name: string | undefined,
- //classNameCreatedReady: boolean
-): boolean => {
-
- let result = false;
- if (file && typeof file.name === "string"
- //&& classNameCreatedReady
- ) {
- result = true;
- }
- if (!result && name && typeof name == "string"
- //&& classNameCreatedReady
- ) {
- result = true;
- }
- //console.log("showFileItemComponent", file, name, classNameCreatedReady, result);
- return result;
-}
\ No newline at end of file
diff --git a/src/files-ui/components/file-mosaic/components/FileMosaicInfoLayer/FileMosaicInfoLayerProps.ts b/src/files-ui/components/file-mosaic/components/FileMosaicInfoLayer/FileMosaicInfoLayerProps.ts
index 658746700c32cc75b94029a7a0ec8cf704778f99..c4ad738845ec57e4b6a15027dd9385db8de820eb 100644
--- a/src/files-ui/components/file-mosaic/components/FileMosaicInfoLayer/FileMosaicInfoLayerProps.ts
+++ b/src/files-ui/components/file-mosaic/components/FileMosaicInfoLayer/FileMosaicInfoLayerProps.ts
@@ -8,6 +8,6 @@ export type FileMosaicInfoLayerProps = {
onCloseInfo?:Function;
localName: string;
- sizeFormatted: string;
+ sizeFormatted?: string;
localType?: string;
}
\ No newline at end of file
diff --git a/src/files-ui/components/file-mosaic/components/FileMosaicMainLayer.tsx/FileMosaicMainLayer.tsx b/src/files-ui/components/file-mosaic/components/FileMosaicMainLayer.tsx/FileMosaicMainLayer.tsx
index c2680da5efb6129547c371f737f4d847d106c108..6555401db0a06f589edf8c079d50cdd875408f0f 100644
--- a/src/files-ui/components/file-mosaic/components/FileMosaicMainLayer.tsx/FileMosaicMainLayer.tsx
+++ b/src/files-ui/components/file-mosaic/components/FileMosaicMainLayer.tsx/FileMosaicMainLayer.tsx
@@ -14,7 +14,8 @@ const FileMosaicMainLayer: React.FC<FileMosaicMainLayerProps> = (
props: FileMosaicMainLayerProps
) => {
const {
- darkMode,deleteIcon,
+ darkMode,
+ deleteIcon,
downloadIcon,
imageIcon,
infoIcon,
@@ -52,7 +53,9 @@ const FileMosaicMainLayer: React.FC<FileMosaicMainLayerProps> = (
uploadStatus={uploadStatus}
localization={localization}
/>
- {isActive && <FileMosaicSize sizeFormatted={sizeFormatted} />}
+ {isActive && sizeFormatted && (
+ <FileMosaicSize sizeFormatted={sizeFormatted} />
+ )}
</div>
<div className="file-mosaic-footer-right">
{isActive && (
diff --git a/src/files-ui/components/file-mosaic/components/FileMosaicMainLayer.tsx/FileMosaicMainLayerProps.ts b/src/files-ui/components/file-mosaic/components/FileMosaicMainLayer.tsx/FileMosaicMainLayerProps.ts
index 7f8fcfa000089c98d798d42fa44aae4c8770fd57..d1858a20c978cbc73d35af42a89d2f7492cc3490 100644
--- a/src/files-ui/components/file-mosaic/components/FileMosaicMainLayer.tsx/FileMosaicMainLayerProps.ts
+++ b/src/files-ui/components/file-mosaic/components/FileMosaicMainLayer.tsx/FileMosaicMainLayerProps.ts
@@ -10,7 +10,7 @@ export interface FileMosaicMainLayerProps {
uploadStatus?: UPLOADSTATUS;
localization?: Localization;
- sizeFormatted: string;
+ sizeFormatted?: string;
imageIcon: boolean;
onSee: ((imageSource: string | undefined) => void) | undefined;
diff --git a/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.scss b/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.scss
index aec6fa83682efa0436e6c6e455024c6055a22709..c6d2aaf3d6757ad6d02520895fd21d9b079762a2 100644
--- a/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.scss
+++ b/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.scss
@@ -158,6 +158,9 @@
-webkit-line-clamp: 2; /* number of lines to show */
line-clamp: 2;
-webkit-box-orient: vertical;
+ /* display: flex;
+ align-items: center;
+ justify-content: center; */
&.dark-mode {
color: rgba(255, 255, 255, 0.7);
}
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 1d6851373e282163a8ccf028d19f237532f5b3a3..455a3af3a80d58acae140ea45299d490fe4c51b8 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
@@ -2,13 +2,13 @@ import * as React from "react";
import {
addClassName,
fileSizeFormater,
+ getLocalFileItemData,
handleClickUtil,
} from "../../../../core";
import { FileMosaicProps } from "./FileMosaicProps";
import "./FileMosaic.scss";
import LayerContainer from "../file-mosaic-layer/LayerContainer";
import Layer from "../file-mosaic-layer/Layer";
-import { getLocalFileItemData } from "../../../file-item/utils/getLocalFileItemData";
import FileMosaicName from "../FileMosaicName/FileMosaicName";
import FileMosaicUploadLayer from "../FileMosaicUploadLayer/FileMosaicUploadLayer";
import useFileMosaicInitializer from "../../hooks/useFileMosaicInitializer";
@@ -65,10 +65,9 @@ const FileMosaic: React.FC<FileMosaicProps> = (props: FileMosaicProps) => {
onDoubleClick,
onClick,
onRightClick,
- smartImgFit="orientation",
+ smartImgFit = "orientation",
} = props;
-//localizers
-
+ //localizers
//ref for anchor download element
const downloadRef = React.useRef<HTMLAnchorElement>(null);
@@ -116,10 +115,7 @@ const FileMosaic: React.FC<FileMosaicProps> = (props: FileMosaicProps) => {
);
//The size formatted and rounded in 2 decimals
- const sizeFormatted: string = localSize
- ? fileSizeFormater(localSize)
- : "0 KB";
-
+ const sizeFormatted: string| undefined = fileSizeFormater(localSize);
//alwaysActive
const [showInfo, setShowInfo] = React.useState<boolean>(false);
@@ -210,7 +206,6 @@ const FileMosaic: React.FC<FileMosaicProps> = (props: FileMosaicProps) => {
onAbort?.(id);
};
-
if (isReady)
return (
<div
diff --git a/src/files-ui/components/index.ts b/src/files-ui/components/index.ts
index d7c2c1b7497acd77030797dec177249b834fbea4..3356996ef2650fe53854a2dbb3d513c9e73128d6 100644
--- a/src/files-ui/components/index.ts
+++ b/src/files-ui/components/index.ts
@@ -4,9 +4,6 @@ export * from "./avatar";
export { Dropzone } from "./dropzone";
export * from "./dropzone";
-export { FileItem } from "./file-item";
-export * from "./file-item";
-
export { FileInputButton } from "./file-input-button";
export * from "./file-input-button";
diff --git a/src/files-ui/components/loader/DynamicLoader/DynamicLoader.scss b/src/files-ui/components/loader/DynamicLoader/DynamicLoader.scss
index d15165a20fb49cc36f7dd7e39adf75e1803e1300..7e142ea51331af21974d4e77e9b14877212d652e 100644
--- a/src/files-ui/components/loader/DynamicLoader/DynamicLoader.scss
+++ b/src/files-ui/components/loader/DynamicLoader/DynamicLoader.scss
@@ -1,26 +1,5 @@
-.circle_loader {
- fill: none;
- stroke: #14ff00;
- stroke-width: 8px;
- transform-origin: center;
- transform: rotate(-90deg);
- /* width: 100px; */
-}
-
-.dui_svg_circle_loader {
- /* border: 1px solid #14ff00; */
- fill: rgba(0, 0, 0, 0.21);
- border-radius: 50%;
- &:hover {
- fill: rgba(0, 0, 0, 0.61);
- }
-}
-
-.dui-text-loader {
- /* dominant-baseline: middle;
- */
+text.files-ui-text-dynamic-loader {
text-anchor: middle;
font-size: 1em;
- //font-family: Arial;
- //fill: aliceblue;
-}
+ fill: aliceblue;
+}
\ No newline at end of file
diff --git a/src/files-ui/components/loader/DynamicLoader/DynamicLoader.tsx b/src/files-ui/components/loader/DynamicLoader/DynamicLoader.tsx
index 91c3282d1384c340a4997a062aa54615216e9dfd..f2d23cb090bac1757d8186db4ad1be579998a3cf 100644
--- a/src/files-ui/components/loader/DynamicLoader/DynamicLoader.tsx
+++ b/src/files-ui/components/loader/DynamicLoader/DynamicLoader.tsx
@@ -3,7 +3,7 @@ import { Clear } from "../../icons";
import { parseSize } from "../../icons/utils/utils";
import LoaderContainer from "../LoaderContainer/LoaderContainer";
import { DynamicLoaderProps } from "./DynamicLoaderProps";
-
+import "./DynamicLoader.scss";
const DynamicLoader: React.FC<DynamicLoaderProps> = (
props: DynamicLoaderProps
) => {
@@ -102,7 +102,7 @@ const DynamicLoader: React.FC<DynamicLoaderProps> = (
{!hidePerncentage && percentage !== undefined && (
<text
- className="dui-text-dynamic-loader"
+ className="files-ui-text-dynamic-loader"
x={`${finalX}`}
y={`${(finalX * 7) / 6}`}
>
diff --git a/src/files-ui/core/index.ts b/src/files-ui/core/index.ts
index e01e5a3825ad26b5a33a257a3a3614eeaa2ce6e1..f59b94970f6bef21c7eb757bcf23957a6b96d2e5 100644
--- a/src/files-ui/core/index.ts
+++ b/src/files-ui/core/index.ts
@@ -140,7 +140,7 @@ export {
sleepPreparing,
uploadOne,
uploadOneExtFile,
- cleanInput, addClassName, getRandomInt, isUploadAbleExtFile
+ cleanInput, addClassName, getRandomInt, isUploadAbleExtFile, getLocalFileItemData
} from "./utils";
export {
diff --git a/src/files-ui/core/reader/readers.ts b/src/files-ui/core/reader/readers.ts
index a2a51fe92bc17f20b223a029ddbb86ec076dbafc..91ea19f3d85f98237d3f31320a6623a34a94dff3 100644
--- a/src/files-ui/core/reader/readers.ts
+++ b/src/files-ui/core/reader/readers.ts
@@ -1,15 +1,20 @@
/**
* Reads an image (or other type) file as data URL in a promise way,
* so you can use await.
- * If other kind of file is sent, this function will read it anyway
- * and will return a string that contains the URL representation
+ * It will return a string that contains the URL representation
* @param file File or Blob object
* @returns data URL of the file
*/
-export const readAsDataURL = (file: File | Blob): Promise<string | undefined> => {
+export const readAsDataURL = (file: File | Blob, onProgress?: Function, onError?: Function): Promise<string | undefined> => {
return new Promise<string | undefined>((resolve, reject) => {
try {
const reader = new FileReader();
+ reader.onprogress = () => {
+ onProgress?.();
+ }
+ reader.onerror = function () {
+ onError?.();
+ }
reader.onload = function () {
resolve(reader.result as string);
}
@@ -30,13 +35,19 @@ export const readAsDataURL = (file: File | Blob): Promise<string | undefined> =>
* @param encoding The type of encoding such as "base64"
* @returns data text of the file
*/
-export const readAsText = (file: File | Blob, encoding?: string): Promise<string | undefined> => {
+export const readAsText = (file: File | Blob, encoding?: string, onProgress?: Function, onError?: Function): Promise<string | undefined> => {
return new Promise<string | undefined>((resolve, reject) => {
try {
const reader = new FileReader();
reader.onload = function () {
resolve(reader.result as string);
}
+ reader.onprogress = () => {
+ onProgress?.();
+ }
+ reader.onerror = function () {
+ onError?.();
+ }
reader.readAsText(file, encoding ? encoding : "base64");
} catch (error) {
reject(undefined);
@@ -52,13 +63,19 @@ export const readAsText = (file: File | Blob, encoding?: string): Promise<string
* @param encoding The type of encoding such as "base64"
* @returns raw binary data of the file
*/
-export const readAsBinaryString = (file: File | Blob): Promise<string | undefined> => {
+export const readAsBinaryString = (file: File | Blob, onProgress?: Function, onError?: Function): Promise<string | undefined> => {
return new Promise<string | undefined>((resolve, reject) => {
try {
const reader = new FileReader();
reader.onload = function () {
resolve(reader.result as string);
}
+ reader.onprogress = () => {
+ onProgress?.();
+ }
+ reader.onerror = function () {
+ onError?.();
+ }
reader.readAsBinaryString(file);
} catch (error) {
reject(undefined);
@@ -72,13 +89,19 @@ export const readAsBinaryString = (file: File | Blob): Promise<string | undefine
* @param encoding The type of encoding such as "base64"
* @returns ArrayBuffer representation of the file
*/
-export const readAsArrayBuffer = (file: File | Blob): Promise<string | undefined> => {
+export const readAsArrayBuffer = (file: File | Blob, onProgress?: Function, onError?: Function): Promise<string | undefined> => {
return new Promise<string | undefined>((resolve, reject) => {
try {
const reader = new FileReader();
reader.onload = function () {
resolve(reader.result as string);
}
+ reader.onprogress = () => {
+ onProgress?.();
+ }
+ reader.onerror = function () {
+ onError?.();
+ }
reader.readAsArrayBuffer(file);
} catch (error) {
reject(undefined);
diff --git a/src/files-ui/core/utils/fileSizeFormatter.ts b/src/files-ui/core/utils/fileSizeFormatter.ts
index 6e19ce5fa45efc43270234dab7bc07f241baac60..ac23dff950338194e014311e65837ff54da70629 100644
--- a/src/files-ui/core/utils/fileSizeFormatter.ts
+++ b/src/files-ui/core/utils/fileSizeFormatter.ts
@@ -2,10 +2,10 @@
* Gives a XX.XX format in Bytes KB, MB, GB or TB
* @param fileSize file size to give format in Bytes
*/
- export const fileSizeFormater = (fileSize?: number): string => {
+ export const fileSizeFormater = (fileSize?: number | false): string| undefined => {
let result = "";
if (!fileSize) {
- return 0 + " Bytes";
+ return undefined;
}
if (fileSize < 1024) {
result = fileSize + " Bytes"
diff --git a/src/files-ui/components/file-item/utils/getLocalFileItemData.ts b/src/files-ui/core/utils/getLocalFileItemData.ts
similarity index 100%
rename from src/files-ui/components/file-item/utils/getLocalFileItemData.ts
rename to src/files-ui/core/utils/getLocalFileItemData.ts
diff --git a/src/files-ui/core/utils/index.ts b/src/files-ui/core/utils/index.ts
index 678c2808484b745c11264947b8acbce11c63f7b4..a241cf09e7a4973eae39a8a7d704f4f5e1e209e3 100644
--- a/src/files-ui/core/utils/index.ts
+++ b/src/files-ui/core/utils/index.ts
@@ -38,4 +38,6 @@ export { cleanInput } from "./input.utils";
export { addClassName } from "./addClassName";
-export {isUploadAbleExtFile} from "./isUploadAbleExtFile";
\ No newline at end of file
+export { isUploadAbleExtFile } from "./isUploadAbleExtFile";
+
+export { getLocalFileItemData } from "./getLocalFileItemData"
\ No newline at end of file
diff --git a/src/files-ui/index.ts b/src/files-ui/index.ts
index abe520fd0db876004fd8ebb95c2a1a0ba8b5e25c..86b06e27501db0d5945ee8fc7b43468aa848bf9d 100644
--- a/src/files-ui/index.ts
+++ b/src/files-ui/index.ts
@@ -1,12 +1,12 @@
export { default as Dropzone } from "./components/dropzone/components/dropzone/Dropzone";
export * from "./components/dropzone/components/dropzone/Dropzone";
+export { default as FileInputButton } from "./components/file-input-button/FileInputButton";
+export * from "./components/file-input-button/FileInputButton";
+
export { default as Avatar } from "./components/avatar/Avatar";
export * from "./components/avatar/Avatar";
-export { FileItem } from "./components";
-export * from "./components";
-
export { default as FileCard } from "./components/file-card/FileCard";
export * from "./components/file-card/FileCard";
@@ -22,6 +22,9 @@ export * from "./components/previews/ImagePreview/ImagePreview";
export { default as VideoPreview } from "./components/previews/VideoPreview/VideoPreview";
export * from "./components/previews/VideoPreview/VideoPreview";
+export { default as MaterialButton } from "./components/material-button/MaterialButton";
+export * from "./components/material-button/MaterialButton";
+
export type { FileMosaicProps } from "./components/file-mosaic/components/file-mosaic/FileMosaicProps";
export type { DropzoneProps } from "./components/dropzone/components/dropzone/DropzoneProps";
export type { FileInputButtonProps } from "./components/file-input-button/InputButtonProps";
diff --git a/src/pages/FileItemMock.tsx b/src/pages/FileItemMock.tsx
index d118bb015113bf21ce69e53aa50ac832e060c4ff..b66ba990a2a57f5b19cd30cc3fd22b2fd4fde0fe 100644
--- a/src/pages/FileItemMock.tsx
+++ b/src/pages/FileItemMock.tsx
@@ -1,5 +1,4 @@
import * as React from "react";
-import { FileItem } from "../files-ui";
import {
FileMosaic,
FileMosaicProps,
@@ -154,7 +153,7 @@ const FileItemMock = ({ darkMode = false, mosaic = false }) => {
) : (
<>
{files.map((file, index) => (
- <FileItem
+ <FileMosaic
key={file.id || 1 + 10}
{...file}
preview
@@ -163,9 +162,6 @@ const FileItemMock = ({ darkMode = false, mosaic = false }) => {
info
alwaysActive
progress={25}
- showProgress
- hd
- elevation={2}
darkMode={darkMode}
/>
))}
diff --git a/src/pages/MainPage.jsx b/src/pages/MainPage.jsx
index d726bf64b7cdb495c7db685225670174d91d72dc..d2f99b764bd4fc66319c4eb4a994b6352081e2f6 100644
--- a/src/pages/MainPage.jsx
+++ b/src/pages/MainPage.jsx
@@ -8,7 +8,6 @@ import GettingStarted from "../components/MainPage/GettingStarted";
import MainNavBar from "../components/MainPage/MainNavBar";
import MainFooter from "../components/MainPage/MainFooter";
import FileMosaicImageVideoPreviews from "../components/MainPage/MainRight/FileMosaicImageVideoPreviews";
-//import FileCard from "../files-ui/components/file-item/components/FileCard/FileCard";
import { Divider } from "@mui/material";
import ExtraComponentsMainPage from "../components/MainPage/SecondaryRight/ExtraComponentsMainPage";
import ExtraComponentsMainPageInputButton from "../components/MainPage/SecondaryRight/ExtraComponentsMainPageInputButton";
diff --git a/src/pages/demo/FileCardDemoPage.jsx b/src/pages/demo/FileCardDemoPage.jsx
index e1596cff0a55da16767c0d12413f548a4885fc25..c4c96d3f8c74a5093e7d432fd78e9ec2a2ab64a2 100644
--- a/src/pages/demo/FileCardDemoPage.jsx
+++ b/src/pages/demo/FileCardDemoPage.jsx
@@ -74,7 +74,7 @@ const FileCardDemoPage = (props) => {
<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.
+ <AnchorToTab href="/components/fileinputbutton">FileInputButton</AnchorToTab> page.
</Alert>
<br />
<Alert severity="info">
@@ -87,7 +87,7 @@ const FileCardDemoPage = (props) => {
<strong>Javascript</strong> example for handling the metadata that
makes possible the information exchange between components. For
further information about this data type check out the{" "}
- <a href="/types#extfile">ExtFile-API. </a>
+ <AnchorToTab href="/types#extfile">ExtFile-API. </AnchorToTab>
</Alert>
</section>
<section id="image-preview">
@@ -271,13 +271,13 @@ const FileCardDemoPage = (props) => {
</AlertTitle>
{/* This is an info alert — <strong>check it out!</strong>
*/}
- When only <CodeHighlight>downloadUrl</CodeHighlight> is specifyed,
+ When only <CodeHighlight>downloadUrl</CodeHighlight> is specified,
FileCard will perform the download only for{" "}
<AnchorToTab href="https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy">
same-origin URLs
</AnchorToTab>{" "}
since it uses the{" "}
- <AnchorToTab href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a">
+ <AnchorToTab href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes">
anchor
</AnchorToTab>{" "}
tag under the hood.
@@ -292,7 +292,7 @@ const FileCardDemoPage = (props) => {
You can check an example here:
<ul>
<li>
- <AnchorToTab href="/utilities-methods/file-downloader">
+ <AnchorToTab href="/file-download">
{"Download a File"}
</AnchorToTab>
</li>
diff --git a/src/pages/demo/FileMosaicDemoPage.jsx b/src/pages/demo/FileMosaicDemoPage.jsx
index 5bd2d0eaaf4f1409a2c51842832bca391f8062f2..a2b4910aedd4a60775591822b06731064e1d0ad4 100644
--- a/src/pages/demo/FileMosaicDemoPage.jsx
+++ b/src/pages/demo/FileMosaicDemoPage.jsx
@@ -79,7 +79,7 @@ const FileMosaicDemoPage = (props) => {
<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.
+ <AnchorToTab href="/components/fileinputbutton">FileInputButton</AnchorToTab> page.
</Alert>
<br />
<Alert severity="info">
@@ -92,7 +92,7 @@ const FileMosaicDemoPage = (props) => {
<strong>Javascript</strong> example for handling the metadata that
makes possible the information exchange between components. For
further information about this data type check out the{" "}
- <a href="/types#extfile">ExtFile-API. </a>
+ <AnchorToTab href="/types#extfile">ExtFile-API. </AnchorToTab>
</Alert>
</section>
@@ -285,13 +285,13 @@ const FileMosaicDemoPage = (props) => {
</AlertTitle>
{/* This is an info alert — <strong>check it out!</strong>
*/}
- When only <CodeHighlight>downloadUrl</CodeHighlight> is specifyed,
+ When only <CodeHighlight>downloadUrl</CodeHighlight> is specified,
FileMosaic will perform the download only for{" "}
<AnchorToTab href="https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy">
same-origin URLs
</AnchorToTab>{" "}
since it uses the{" "}
- <AnchorToTab href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a">
+ <AnchorToTab href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes">
anchor
</AnchorToTab>{" "}
tag under the hood.
@@ -306,7 +306,7 @@ const FileMosaicDemoPage = (props) => {
You can check an example here:
<ul>
<li>
- <AnchorToTab href="/utilities-methods/file-downloader">
+ <AnchorToTab href="/file-download">
{"Download a File"}
</AnchorToTab>
</li>
diff --git a/src/pages/download-page/FileDownloadPage.jsx b/src/pages/download-page/FileDownloadPage.jsx
deleted file mode 100644
index 4e4690fbc14b77e0dec4ee24871b43edfa1addcf..0000000000000000000000000000000000000000
--- a/src/pages/download-page/FileDownloadPage.jsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import * as React from "react";
-
-const FileDownloadPage = props =>{
- return(
- <div>
- FileDownloadPage
- </div>
- )
-}
-export default FileDownloadPage;
\ No newline at end of file
diff --git a/src/pages/download-page/FileDownloadPage.tsx b/src/pages/download-page/FileDownloadPage.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..25cf729c525ad8398d6721146dc762c58aa7fc97
--- /dev/null
+++ b/src/pages/download-page/FileDownloadPage.tsx
@@ -0,0 +1,193 @@
+import { Paper } from "@mui/material";
+import * as React from "react";
+import CodeHighlight from "../../components/codeHighlight/CodeHighlight";
+import CodeDemoDownload2 from "../../components/demo-components/demo-download/CodeDemoDownload";
+import CodeDemoDownload1 from "../../components/demo-components/demo-download/CodeDemoDownload1";
+import CodeDemoDownload3 from "../../components/demo-components/demo-download/CodeDemoDownload3";
+import DemoDownload1 from "../../components/demo-components/demo-download/DemoDownload1";
+import DemoDownload2 from "../../components/demo-components/demo-download/DemoDownload2";
+import DemoDownload3 from "../../components/demo-components/demo-download/DemoDownload3";
+import DescParagraph from "../../components/demo-components/desc-paragraph/DescParagraph";
+import SubTitle from "../../components/demo-components/sub-title/SubTitle";
+import MainContentContainer from "../../components/layout-pages/MainContentContainer";
+import MainLayoutPage from "../../components/layout-pages/MainLayoutPage";
+import RightMenuContainer from "../../components/layout-pages/RightMenuContainer";
+import MainTitle from "../../components/main-title/MainTitle";
+import MainParagraph from "../../components/paragraph-main/MainParagraph";
+import RightMenu from "../../components/RightMenu/RightMenu";
+import AnchorToTab from "../../components/util-components/AnchorToTab";
+
+const FileDownloadPage = () => {
+ return (
+ <React.Fragment>
+ <MainLayoutPage selectedIndex={9}>
+ <MainContentContainer>
+ <MainTitle>File Download</MainTitle>
+ <MainParagraph>
+ In this page you will find some demos for downloading files with{" "}
+ <CodeHighlight>{"<FileMosaic/>"}</CodeHighlight>{" "}
+ and {" "}
+ <CodeHighlight>{"<FileCard/>"}</CodeHighlight>{" "}
+ components.
+ </MainParagraph>
+ <section id="samehost">
+ <SubTitle content="Same origin URL" />
+ <DescParagraph>
+ When only <CodeHighlight>downloadUrl</CodeHighlight> is specified,
+ FileMosaic will perform the download only for{" "}
+ <AnchorToTab href="https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy">
+ same-origin URLs
+ </AnchorToTab>{" "}
+ since it uses the{" "}
+ <AnchorToTab href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes">
+ anchor
+ </AnchorToTab>{" "}
+ tag under the hood.
+ </DescParagraph>
+ <Paper
+ variant="outlined"
+ style={{
+ padding: "25px",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "space-evenly",
+ width: "100%",
+ }}
+ >
+ <DemoDownload1 />
+ </Paper>
+ <CodeDemoDownload1 />
+ </section>
+ <section id="differenthost1">
+ <SubTitle content="Different origin URL and 'downloadUrl' prop specified" />
+ <DescParagraph>
+ When only <CodeHighlight>downloadUrl</CodeHighlight> is specified
+ and if the resource is located in any other host (on Stean for
+ instance), the component will open a new tab and display the
+ content.
+ </DescParagraph>
+ <Paper
+ variant="outlined"
+ style={{
+ padding: "25px",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "space-evenly",
+ width: "100%",
+ }}
+ >
+ <DemoDownload2 />
+ </Paper>
+ <CodeDemoDownload2 />
+ </section>
+ <section id="differenthost2">
+ <SubTitle content="Different origin URL and 'onDownload' prop specified" />
+ <DescParagraph>
+ For avoiding the behaviour described above, you can do you own
+ download implementation by overriding the download function by
+ setting the <CodeHighlight>onDownload</CodeHighlight> prop. There
+ is an example of how to do it with pure javascript.
+ <br />
+ The approach we use here can be summerized in 5 steps:
+ <ol>
+ <li>
+ Make a GET request with{" "}
+ <AnchorToTab href="https://developer.mozilla.org/en-US/docs/Web/API/fetch">
+ fetch
+ </AnchorToTab>{" "}
+ (you can use{" "}
+ <AnchorToTab href="https://axios-http.com/">
+ axios
+ </AnchorToTab>{" "}
+ or any other way to fetch
+ </li>
+ <li>
+ Create an{" "}
+ <AnchorToTab href="https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL">
+ Object URL
+ </AnchorToTab>{" "}
+ from the{" "}
+ <AnchorToTab href="https://developer.mozilla.org/en-US/docs/Web/API/Blob">
+ Blob
+ </AnchorToTab>{" "}
+ file.
+ </li>
+ <li>
+ Create an{" "}
+ <AnchorToTab href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes">
+ anchor tag
+ </AnchorToTab>{" "}
+ set the attributes, append it to the document, and click it
+ programatically.
+ </li>
+ <li>
+ Finally, revoke the Object URL and remove the anchor from
+ document.
+ </li>
+ </ol>
+ resources)
+ </DescParagraph>
+ <Paper
+ variant="outlined"
+ style={{
+ padding: "25px",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "space-evenly",
+ width: "100%",
+ }}
+ >
+ <DemoDownload3 />
+ </Paper>
+ <CodeDemoDownload3 />
+ </section>{" "}
+ <section id="api">
+ <SubTitle content="API" />
+ <DescParagraph>
+ See the documentation below for a complete reference to all of the
+ props available to the components mentioned here.
+ </DescParagraph>
+ <ul>
+ <li>
+ <AnchorToTab href="/api/filemosaic">
+ {"<FileMosaic/>"}
+ </AnchorToTab>
+ </li>
+ <li>
+ <AnchorToTab href="/api/filecard">{"<FileCard/>"}</AnchorToTab>
+ </li>
+ </ul>
+ </section>
+ </MainContentContainer>
+ </MainLayoutPage>
+
+ <RightMenuContainer>
+ <RightMenu width="240px" items={rightMenuItems} />
+ </RightMenuContainer>
+ </React.Fragment>
+ );
+};
+export default FileDownloadPage;
+
+const rightMenuItems = [
+ {
+ id: 0,
+ label: "Same host",
+ referTo: "/file-download#samehost",
+ },
+ {
+ id: 1,
+ label: "Different host 1",
+ referTo: "/file-download#differenthost1",
+ },
+ {
+ id: 2,
+ label: "Different host 2",
+ referTo: "/file-download#differenthost2",
+ },
+ {
+ id: 3,
+ label: "Components API",
+ referTo: "/file-download#api",
+ },
+];
diff --git a/src/pages/server-side/ServerSidePage.jsx b/src/pages/server-side/ServerSidePage.jsx
deleted file mode 100644
index 8bf6b93be532de14349ed25e21586567c135768f..0000000000000000000000000000000000000000
--- a/src/pages/server-side/ServerSidePage.jsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as React from "react";
-import MainContentContainer from "../../components/layout-pages/MainContentContainer";
-import MainLayoutPage from "../../components/layout-pages/MainLayoutPage";
-import RightMenuContainer from "../../components/layout-pages/RightMenuContainer";
-import MainTitle from "../../components/main-title/MainTitle";
-import RightMenu from "../../components/RightMenu/RightMenu";
-
-const ServerSidePage = (props) => {
- return (
- <React.Fragment>
- <MainLayoutPage selectedIndex={4}>
- <MainContentContainer>
- <MainTitle>Server Side implementatios</MainTitle>
- </MainContentContainer>{" "}
- <RightMenuContainer>
- <RightMenu width="240px" items={[]} />
- </RightMenuContainer>
- </MainLayoutPage>
- </React.Fragment>
- );
-};
-export default ServerSidePage;
diff --git a/src/pages/server-side/ServerSidePage.tsx b/src/pages/server-side/ServerSidePage.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ffbd314bde1b9bd41bc1c872752b24fbbb09e468
--- /dev/null
+++ b/src/pages/server-side/ServerSidePage.tsx
@@ -0,0 +1,144 @@
+import { Paper } from "@mui/material";
+import * as React from "react";
+import CodeDemoServerSideJava from "../../components/demo-components/demo-server-side/CodeDemoServerSideJava";
+import CodeDemoServerSideExpress from "../../components/demo-components/demo-server-side/CodeDemoServerSideExpress";
+import DescParagraph from "../../components/demo-components/desc-paragraph/DescParagraph";
+import SubTitle from "../../components/demo-components/sub-title/SubTitle";
+import MainContentContainer from "../../components/layout-pages/MainContentContainer";
+import MainLayoutPage from "../../components/layout-pages/MainLayoutPage";
+import RightMenuContainer from "../../components/layout-pages/RightMenuContainer";
+import MainTitle from "../../components/main-title/MainTitle";
+import MainParagraph from "../../components/paragraph-main/MainParagraph";
+import RightMenu from "../../components/RightMenu/RightMenu";
+import AnchorToTab from "../../components/util-components/AnchorToTab";
+import { FileMosaic } from "../../files-ui";
+import { redirect } from "../../utils/redirect";
+const ServerSidePage = () => {
+ return (
+ <React.Fragment>
+ <MainLayoutPage selectedIndex={6}>
+ <MainContentContainer>
+ <MainTitle>Server Side implementations</MainTitle>
+ <MainParagraph>
+ Some implementations to correctly handle uploaded files using Files
+ UI.
+ </MainParagraph>
+ <DescParagraph>
+ <ul>
+ <li>
+ If you think more server-side samples should be added or would
+ like to contribute by fixing or adding a new server-side sampler
+ in programming languages not yet covered, please contact us.
+ </li>
+ </ul>
+ </DescParagraph>
+ <section id="expressjs">
+ <SubTitle content="Express JS" />
+ <Paper
+ variant="outlined"
+ style={{
+ display: "flex",
+ flexDirection: "row",
+ flexWrap: "nowrap",
+ alignItems: "center",
+ padding: "25px",
+ justifyContent: "space-evenly",
+ }}
+ >
+ <FileMosaic
+ {...logoExpress}
+ onClick={() =>
+ redirect(
+ "https://github.com/files-ui/files-ui-web-test/tree/master/expressjs"
+ )
+ }
+ //{...logoExpress.extraData}
+ //smartImgFit={"center"}
+ />{" "}
+ <DescParagraph>
+ The following code is just the main part of a project.
+ <br />
+ Check it up in the following{" "}
+ <AnchorToTab href="https://github.com/files-ui/files-ui-web-test/tree/master/expressjs">
+ link
+ </AnchorToTab>
+ .
+
+
+
+ </DescParagraph>
+ </Paper>
+ <CodeDemoServerSideExpress splittedOnly/>
+ </section>
+ <section id="springboot">
+ <SubTitle content="Java - Spring boot" />{" "}
+ <Paper
+ variant="outlined"
+ style={{
+ display: "flex",
+ flexDirection: "revert",
+ flexWrap: "nowrap",
+ alignItems: "center",
+ justifyContent: "space-evenly",
+ padding: "25px",
+ }}
+ >
+ <FileMosaic
+ {...logoJava}
+ onClick={() =>
+ redirect(
+ "https://github.com/files-ui/files-ui-web-test/tree/master/springboot"
+ )
+ }
+ />{" "}
+ <DescParagraph>
+ The following code is just the main part of a project.
+ <br />
+ Check it up in the following{" "}
+ <AnchorToTab href="https://github.com/files-ui/files-ui-web-test/tree/master/springboot">
+ link
+ </AnchorToTab>
+ .
+ </DescParagraph>
+ </Paper>
+ <CodeDemoServerSideJava splittedOnly/>
+ </section>
+ </MainContentContainer>
+ <RightMenuContainer>
+ <RightMenu width="240px" items={rightMenuItems} />
+ </RightMenuContainer>
+ </MainLayoutPage>
+ </React.Fragment>
+ );
+};
+export default ServerSidePage;
+
+const rightMenuItems = [
+ {
+ id: 0,
+ label: "ExpressJS",
+ referTo: "/server-side#expressjs",
+ },
+ {
+ id: 1,
+ label: "Spring Boot (Java)",
+ referTo: "/server-side#springboot",
+ },
+];
+
+const logoExpress = {
+ id: ":0:",
+ //size: 28 * 1024 * 1024,
+ type: "image/png",
+ imageUrl: "/serverside/nodeexpress.jpg",
+ name: "Click me!",
+
+};
+
+const logoJava = {
+ id: ":1:",
+ //size: 28 * 1024 * 1024,
+ type: "image/png",
+ imageUrl: "/serverside/springbootjavalogo.png",
+ name: "Click me!",
+};
diff --git a/src/pages/types-page/TypesPage.jsx b/src/pages/types-page/TypesPage.jsx
index f2ace171a1085dd7b886be7c3ca817d82e0615a7..9f9f73223059d23d218cd803621b99c8c6da06b3 100644
--- a/src/pages/types-page/TypesPage.jsx
+++ b/src/pages/types-page/TypesPage.jsx
@@ -70,7 +70,7 @@ const rightMenuItems = [
const TypesPage = (props) => {
return (
<React.Fragment>
- <MainLayoutPage selectedIndex={6}>
+ <MainLayoutPage selectedIndex={7}>
<MainContentContainer>
<MainTitle>Types</MainTitle>
<MainParagraph>
diff --git a/src/pages/utilities/FileReaderPage.tsx b/src/pages/utilities/FileReaderPage.tsx
index a97127e1ae098885cadc7dec2c8012ebb3860905..7c6d87faa919f2c7d3f55298e102c1bceda5b1a9 100644
--- a/src/pages/utilities/FileReaderPage.tsx
+++ b/src/pages/utilities/FileReaderPage.tsx
@@ -1,5 +1,6 @@
import * as React from "react";
import MainContentContainer from "../../components/layout-pages/MainContentContainer";
+import MainLayoutPage from "../../components/layout-pages/MainLayoutPage";
import RightMenuContainer from "../../components/layout-pages/RightMenuContainer";
import MainTitle from "../../components/main-title/MainTitle";
import RightMenu from "../../components/RightMenu/RightMenu";
@@ -18,9 +19,12 @@ const FileReaderPage: React.FC<FileReaderPageProps> = (
) => {
return (
<React.Fragment>
- <MainContentContainer>
+ <MainLayoutPage selectedIndex={8}>
+ <MainContentContainer>
<MainTitle>File Reader</MainTitle>
</MainContentContainer>
+ </MainLayoutPage>
+
<RightMenuContainer>
<RightMenu width="240px" items={rightMenuItems} />
diff --git a/src/pages/utilities/FileUploaderPage.tsx b/src/pages/utilities/FileUploaderPage.tsx
index 43b2af58ec62b9b78bcc5e3cffcf29021860360a..be02427c0ce4c09549eb7955d240d2c4187cd637 100644
--- a/src/pages/utilities/FileUploaderPage.tsx
+++ b/src/pages/utilities/FileUploaderPage.tsx
@@ -1,5 +1,6 @@
import * as React from "react";
import MainContentContainer from "../../components/layout-pages/MainContentContainer";
+import MainLayoutPage from "../../components/layout-pages/MainLayoutPage";
import RightMenuContainer from "../../components/layout-pages/RightMenuContainer";
import MainTitle from "../../components/main-title/MainTitle";
import RightMenu from "../../components/RightMenu/RightMenu";
@@ -7,8 +8,13 @@ import RightMenu from "../../components/RightMenu/RightMenu";
const rightMenuItems = [
{
id: 0,
+ label: "Upload to server",
+ referTo: "/file-upload/#uploadtoaws",
+ },
+ {
+ id: 1,
label: "Upload to AWS",
- referTo: "/utilities-methods/file-reader/#read-as-url",
+ referTo: "/file-upload/#uploadtoaws",
},
];
@@ -18,9 +24,11 @@ const FileUploaderPage: React.FC<FileUploaderPageProps> = (
) => {
return (
<React.Fragment>
- <MainContentContainer>
- <MainTitle>File Upoad</MainTitle>
- </MainContentContainer>
+ <MainLayoutPage selectedIndex={8}>
+ <MainContentContainer>
+ <MainTitle>File Upload</MainTitle>
+ </MainContentContainer>
+ </MainLayoutPage>
<RightMenuContainer>
<RightMenu width="240px" items={rightMenuItems} />
diff --git a/src/routes/MainRouter.jsx b/src/routes/MainRouter.jsx
index 0de4a540464155f78ddcc73ce43891eacc10709d..947e27d9145c3ce37df06930fe3a5ee983953780 100644
--- a/src/routes/MainRouter.jsx
+++ b/src/routes/MainRouter.jsx
@@ -6,7 +6,7 @@ import DropzoneDemoPage from "./../pages/demo/DropzoneDemoPage";
import FileMosaicDemoPage from "./../pages/demo/FileMosaicDemoPage";
import FileCardDemoPage from "./../pages/demo/FileCardDemoPage";
import ServerSidePage from "./../pages/server-side/ServerSidePage";
-import CodeGeneratorPage from "./../pages/code-generator/CodeGeneratorPage";
+//import CodeGeneratorPage from "./../pages/code-generator/CodeGeneratorPage";
import DropzoneApi from "./../pages/api/DropzoneApi";
import FileMosaicApi from "./../pages/api/FileMosaicApi";
import FileCardApi from "./../pages/api/FileCardApi";
@@ -15,7 +15,7 @@ import TypesPage from "./../pages/types-page/TypesPage";
import { createBrowserRouter, Outlet, RouterProvider } from "react-router-dom";
import MainLayoutPage from "../components/layout-pages/MainLayoutPage";
import FileReaderPage from "../pages/utilities/FileReaderPage";
-import FileUploaderPage from "../pages/utilities/FileUploaderPage";
+//import FileUploaderPage from "../pages/utilities/FileUploaderPage";
import AvatarDemoPage from "../pages/demo/AvatarDemoPage";
import FileInputButtonApi from "../pages/api/FileInputButtonApi";
import AvatarApi from "../pages/api/AvatarApi";
@@ -134,37 +134,28 @@ const router = createBrowserRouter([
path: "/server-side",
element: <ServerSidePage />,
},
- {
+/* {
path: "/code-generator",
element: <CodeGeneratorPage />,
- },
+ }, */
{
path: "/types",
element: <TypesPage />,
},
-
+/* {
+ path: "/file-reader",
+ element: <FileReaderPage />,
+ }, */
{
- path: "/utilities-methods",
- element: (
- <MainLayoutPage selectedIndex={7}>
- <Outlet />
- </MainLayoutPage>
- ),
- children: [
- {
- path: "/utilities-methods/file-reader",
- element: <FileReaderPage />,
- },
- {
- path: "/utilities-methods/file-uploader",
- element: <FileUploaderPage />,
- },
- {
- path: "/utilities-methods/file-downloader",
- element: <FileDownloadPage />,
- },
- ],
+ path: "/file-download",
+ element: <FileDownloadPage />,
},
+ ///
+/* {
+ path: "/file-upload",
+ element: <FileUploaderPage />,
+ }, */
+
]);
const MainRouter = (props) => {
diff --git a/src/static/index.d.ts b/src/static/index.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a6d28473e39c4b37bc93fd456c80242a18a3511c
--- /dev/null
+++ b/src/static/index.d.ts
@@ -0,0 +1,4 @@
+declare module '*.png';
+declare module '*.jpg';
+declare module '*.webp';
+declare module '*.mp4';
\ No newline at end of file
diff --git a/src/types/PageProps.ts b/src/types/PageProps.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8fac0f2eaed7d43f2efa6ad80c1557266bcf625d
--- /dev/null
+++ b/src/types/PageProps.ts
@@ -0,0 +1,32 @@
+export type PageList =
+ "Getting Started" |
+ "Usage" |
+ "Dropzone Demo" |
+ "FileMosaic Demo" |
+ "FileCard Demo" |
+ "FileInputButton Demo" |
+ "FullScreen Demo" |
+ "Avatar Demo" |
+ "Dropzone Api" |
+ "FileMosaic Api" |
+ "FileCard Api" |
+ "FileInputButton Api" |
+ "FullScreen Api" |
+ "Avatar Api" |
+ "ImagePreview Api" |
+ "VideoPreview Api" |
+ "File Icons" |
+ "Localization" |
+ "Server Side" |
+ "Types" |
+ "File Reders" |
+ "File Upload" |
+ "File Download"
+ ;
+
+export type PageProps = {
+ pageBefore: PageProps;
+ pageAfter: PageProps;
+ url?: string;
+ key: PageList;
+}
\ No newline at end of file
diff --git a/src/utils/redirect.js b/src/utils/redirect.js
new file mode 100644
index 0000000000000000000000000000000000000000..ef57dfaaee9c4ac77e6a3eff3392569a52a4035d
--- /dev/null
+++ b/src/utils/redirect.js
@@ -0,0 +1,12 @@
+export const redirect = (to = "") => {
+ console.log("redirectredirect", to);
+ if (to.length === 0) return;
+ const anchor = document.createElement("a");
+ anchor.href = to;
+ anchor.target = "_blank";
+ anchor.rel = "noopener noreferrer";
+ anchor.style.display = "none";
+ document.body.appendChild(anchor);
+ anchor.click();
+ document.body.removeChild(anchor);
+};