[RINNE]

src/Components/CodeGenerator/InteractiveCode.jsx

@@ -11,7 +11,7 @@ import {
 import React, { Fragment, useEffect, useState } from "react";
 import Autocomplete from "@mui/material/Autocomplete";
 import TextField from "@mui/material/TextField";
-import {
+ import {
   Dropzone,
   FileItem,
   FullScreenPreview,

src/Components/CodeGenerator/InteractiveCode.scss

@@ -1,6 +1,6 @@
 .dui-demo-container {
     background-color: rgb(234, 238, 243);
-    width: 90%;
+    //width: 100%;
     margin: auto;
     margin-top: 10px;
     padding: 20px 30px;

src/Components/CodeGenerator/InteractiveDemo.jsx

@@ -1,5 +1,5 @@
 import React, { Fragment, useState } from "react";
-import { Dropzone, FileItem, FullScreenPreview } from "@dropzone-ui/react";
+import { Dropzone, FileItem, FullScreenPreview } from "../../dropzone-ui";
 import "./InteractiveDemo.scss";
 const InteractiveDemo = (props) => {
   const [files, setFiles] = useState([]);

src/Components/Dui_IconsList/IconList.jsx

@@ -0,0 +1,54 @@
+import * as React from "react";
+/* import {
+  Cancel,
+  CheckCircle,
+  Clean,
+  Clear,
+  Close,
+  DoDisturb,
+  Info,
+  Person,
+  PhotoCamera,
+  PlayIcon,
+  Remove,
+  RemoveOutline,
+  UploadDone,
+  UploadError,
+  UploadingProcess,
+  ViewGrid,
+  ViewList,
+  Visibility,
+} from "../../mega-dropzone-ui/icons"; */
+
+const IconList = (props) => {
+  return (
+    <div
+      style={{
+        width: "100%",
+        height:"100%",
+        display: "flex",
+        flexWrap: "wrap",
+      }}
+    >
+     {/*  <Cancel />
+      <CheckCircle />
+      <Clean />
+      <Clear/>
+      <Close />
+      <DoDisturb />
+      <Info />
+      <Person />
+      <PhotoCamera />
+      <PlayIcon />
+      <Remove />
+      <RemoveOutline />
+      <UploadDone />
+      <UploadError />
+      <UploadingProcess />
+      <Visibility />
+      <ViewGrid />
+      <ViewList /> */}
+    </div>
+  );
+};
+export default IconList;

src/Components/Dui_Previews/Previews.jsx

@@ -0,0 +1,63 @@
+import { Button } from "@mui/material";
+import * as React from "react";
+/* import FullScreen from "../../mega-dropzone-ui/previews/FullScreen/FullScreen";
+import ImagePreview from "../../mega-dropzone-ui/previews/ImagePreview/ImagePreview";
+ */
+const Previews = (props) => {
+  const [openFullscreen, setOpenFullScreen] = React.useState(false);
+  const [openFullscreen2, setOpenFullScreen2] = React.useState(false);
+  return (
+    <div
+      style={{
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        flexWrap: "wrap",
+      }}
+    >
+    {/*   <Button variant="contained" onClick={() => setOpenFullScreen(true)}>
+        open1
+      </Button>
+
+      <Button variant="contained" onClick={() => setOpenFullScreen2(true)}>
+        open2
+      </Button>
+
+      <ImagePreview 
+      alt="al anternative text"
+      src="https://smedia.istockphoto.com/photos/hot-air-balloons-flying-over-the-botan-canyon-in-turkey-picture-id1297349747?b=1&k=20&m=1297349747&s=170667a&w=0&h=oH31fJty_4xWl_JQ4OIQWZKP8C6ji9Mz7L4XmEnbqRU=" />
+
+      <FullScreen
+        open={openFullscreen}
+        onClose={() => {
+          setOpenFullScreen(false);
+        }}
+      >
+        <div
+          style={{
+            position: "relative",
+            color: "white",
+            width: "100%",
+            height: "100%",
+            border: "1px dashed white",
+            padding: "4%",
+          }}
+        >
+          {" "}
+          lo que seaaalo que seaaalo que seaaalo que seaaalo que seaaalo que
+          seaaalo que seaaalo que seaaalo que seaaalo que seaaa
+        </div>
+      </FullScreen>
+
+      <FullScreen
+        open={openFullscreen2}
+        onClose={() => {
+          setOpenFullScreen2(false);
+        }}
+      >
+        <ImagePreview src="https://media.istockphoto.com/photos/hot-air-balloons-flying-over-the-botan-canyon-in-turkey-picture-id1297349747?b=1&k=20&m=1297349747&s=170667a&w=0&h=oH31fJty_4xWl_JQ4OIQWZKP8C6ji9Mz7L4XmEnbqRU=" />
+      </FullScreen> */}
+    </div>
+  );
+};
+export default Previews;

src/Components/OptionsRedirect/Options.jsx

@@ -5,8 +5,10 @@ import DoubleArrowIcon from "@mui/icons-material/DoubleArrow";
 import GitHubIcon from "@mui/icons-material/GitHub";
 import StorageIcon from "@mui/icons-material/Storage";
 import DocumentScannerIcon from "@mui/icons-material/DocumentScanner";
+import { useNavigate } from "react-router-dom";
 import "./Options.scss";
 const Options = (props) => {
+  let navigate = useNavigate();
   const openTab = (url) => {
     window.open(url, "_blank").focus();
   };
@@ -24,6 +26,17 @@ const Options = (props) => {
         width:"100%"
       }} */
     >
+      <Button
+        //size="small"
+        variant="contained"
+        style={{ margin: "5px" }}
+        startIcon={<DocumentScannerIcon />}
+        onClick={() => {
+          navigate("/code-generator");
+        }}
+      >
+        Code generator
+      </Button>
       <Button
         //size="small"
         variant="contained"

src/Pages/Lab/DropzoneArea/DropzoneAreaDemo.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+/* import { Dropzone, DropzoneArea } from "../../../mega-dropzone-ui/components/dropzone";
+import { FileValidated } from "../../../mega-dropzone-ui/utils/file-validation/validation.types";
+import { makeFileList } from "../makeFilelList"; */
+
+const DropzoneAreaDemo = (props: any) => {
+  /* const [filesValidated, setFilesValidated] = React.useState<FileValidated[]>([]);
+  const handleChange = async(fileValidatedList: FileValidated[]) => {
+    setFilesValidated(fileValidatedList);
+    const myFileArray: File[] = fileValidatedList.map(
+      (f: FileValidated) => f.file
+    );
+    //let otherFiles: FileList = new FileList();
+    //makeFileList(myFileArray)
+    let myFileList: FileList = await makeFileList(myFileArray);
+    console.log("FileList from Array of Files", myFileList); 
+  }; */
+  // .... more code
+
+  return (
+    <div>
+      {/* <DropzoneArea value={filesValidated} onChange={handleChange}>
+        Drag'drop files
+      </DropzoneArea>
+      <Dropzone>
+        Dropzone
+      </Dropzone>
+      <ul>
+        {filesValidated.map((f: FileValidated) => (
+          <li key={f.id}>{`${f.file.name} - ${f.valid}`}</li>
+        ))}
+      </ul> */}
+    </div>
+  );
+};
+export default DropzoneAreaDemo;

src/Pages/Lab/Lab.jsx

@@ -1,10 +1,35 @@
 import * as React from "react";
+import IconList from "../../Components/Dui_IconsList/IconList";
+import Previews from "../../Components/Dui_Previews/Previews";
+import DropzoneAreaDemo from "./DropzoneArea/DropzoneAreaDemo";
 
-const Lab = props =>{
-    return(
-        <div>
-        This is the lab
-        </div>
-    )
-}
-export default Lab;
+const Lab = (props) => {
+  return (
+    <div
+      style={{
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "stretch",
+        alignContent: "center",
+        //flexWrap: "wrap",
+      }}
+    >
+      <h1>Lab</h1>
+      <h2>Icons:</h2>
+      <IconList />
+      <h2>Previews:</h2>
+
+      <Previews />
+      <h2>FileItem:</h2>
+      <br />
+      <h2>Avatar:</h2>
+      <br />
+      <h2>Dropzone:</h2>
+      <DropzoneAreaDemo/>
+      <br />
+    </div>
+  );
+};
+export default Lab;

src/Pages/Lab/makeFilelList.js

@@ -0,0 +1,56 @@
+export const makeFileList = (myFileArray) => {
+  return new Promise((resolve, reject) => {
+    const input = document.createElement("input");
+    input.style.display="none";
+    const label = document.createElement("label");
+    label.style.display="none";
+    const text = document.createTextNode("click to set files\n");
+    const form = document.createElement("form");
+    const data = myFileArray;
+    // https://github.com/w3c/clipboard-apis/issues/33
+    class _DataTransfer {
+      constructor() {
+        return new ClipboardEvent("").clipboardData || new DataTransfer();
+      }
+    }
+    input.type = "file";
+    input.name = "files[]";
+    input.multiple = true;
+    input.id = "files";
+    text.textContent = text.textContent.concat(
+      data.map(({ name }) => name).join(", "),
+      "\n"
+    );
+
+    label.appendChild(text);
+    form.appendChild(label);
+    form.appendChild(input);
+    document.body.appendChild(form);
+    // https://github.com/whatwg/html/issues/3222
+    // https://bugzilla.mozilla.org/show_bug.cgi?id=1416488
+    label.onclick = (e) => {
+      const dt = new _DataTransfer();
+      for (let file of data) {
+        dt.items.add(file);
+      }
+      if (dt.files.length) {
+        input.files = dt.files;
+      }
+      const fd = new FormData(form);
+      for (const file of input.files) {
+        //console.log(file); // `File` objects set at `data`
+      }
+      for (const [key, prop] of fd) {
+       // console.log(key, prop);
+      }
+      //console.log(input.files);
+      resolve(input.files);
+    };
+    // not dispatched at Firefox 57 when set using `input.files = dt.files`
+    input.onchange = (e) => {
+      console.log("onchange", e, input.files);
+      //resolve("onchange", input.files);
+    };
+    label.click();
+  });
+};

src/Pages/Lab/makeFilelList.txt

@@ -0,0 +1,56 @@
+export const makeFileList = (myFileArray) => {
+  return new Promise((resolve, reject) => {
+    const input = document.createElement("input");
+    input.style.display="none";
+    const label = document.createElement("label");
+    label.style.display="none";
+    const text = document.createTextNode("click to set files\n");
+    const form = document.createElement("form");
+    const data = myFileArray;
+    // https://github.com/w3c/clipboard-apis/issues/33
+    class _DataTransfer {
+      constructor() {
+        return new ClipboardEvent("").clipboardData || new DataTransfer();
+      }
+    }
+    input.type = "file";
+    input.name = "files[]";
+    input.multiple = true;
+    input.id = "files";
+    text.textContent = text.textContent.concat(
+      data.map(({ name }) => name).join(", "),
+      "\n"
+    );
+
+    label.appendChild(text);
+    form.appendChild(label);
+    form.appendChild(input);
+    document.body.appendChild(form);
+    // https://github.com/whatwg/html/issues/3222
+    // https://bugzilla.mozilla.org/show_bug.cgi?id=1416488
+    label.onclick = (e) => {
+      const dt = new _DataTransfer();
+      for (let file of data) {
+        dt.items.add(file);
+      }
+      if (dt.files.length) {
+        input.files = dt.files;
+      }
+      const fd = new FormData(form);
+      for (const file of input.files) {
+        //console.log(file); // `File` objects set at `data`
+      }
+      for (const [key, prop] of fd) {
+       // console.log(key, prop);
+      }
+      //console.log(input.files);
+      resolve(input.files);
+    };
+    // not dispatched at Firefox 57 when set using `input.files = dt.files`
+    input.onchange = (e) => {
+      console.log("onchange", e, input.files);
+      //resolve("onchange", input.files);
+    };
+    label.click();
+  });
+};

src/Pages/MainPage/MainPageRightDropzone/RightPart.jsx

@@ -1,12 +1,12 @@
-//import {  Dropzone,  FileItem,  FullScreenPreview,  VideoPreview,} from "@dropzone-ui/react";
+import {  Dropzone,  FileItem,  FullScreenPreview,  VideoPreview,} from "@dropzone-ui/react";
 import React, { Fragment, useState } from "react";
 import Options from "../../../Components/OptionsRedirect/Options";
-import {
+/* import {
   Dropzone,
   FileItem,
   FullScreenPreview,
   VideoPreview,
-} from "@dropzone-ui/react";
+} from "../../../dropzone-ui"; */
 import "./RightPart.scss";
 const RightPart = (props) => {
   const [files, setFiles] = useState([]);