Skip to content

Commit dd5c907

Browse files
JinSSJ3JinSSJ3
committed
[RINNE]
1 parent 556841e commit dd5c907

File tree

12 files changed

+325
-18
lines changed

12 files changed

+325
-18
lines changed

‎src/Components/CodeGenerator/InteractiveCode.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {
1111
import React, { Fragment, useEffect, useState } from "react";
1212
import Autocomplete from "@mui/material/Autocomplete";
1313
import TextField from "@mui/material/TextField";
14-
import {
14+
import {
1515
Dropzone,
1616
FileItem,
1717
FullScreenPreview,

‎src/Components/CodeGenerator/InteractiveCode.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
.dui-demo-container {
22
background-color: rgb(234, 238, 243);
3-
width: 90%;
3+
//width: 100%;
44
margin: auto;
55
margin-top: 10px;
66
padding: 20px 30px;

‎src/Components/CodeGenerator/InteractiveDemo.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { Fragment, useState } from "react";
2-
import { Dropzone, FileItem, FullScreenPreview } from "@dropzone-ui/react";
2+
import { Dropzone, FileItem, FullScreenPreview } from "../../dropzone-ui";
33
import "./InteractiveDemo.scss";
44
const InteractiveDemo = (props) => {
55
const [files, setFiles] = useState([]);

‎src/Components/Dui_IconsList/IconList.jsx

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import * as React from "react";
2+
/* import {
3+
Cancel,
4+
CheckCircle,
5+
Clean,
6+
Clear,
7+
Close,
8+
DoDisturb,
9+
Info,
10+
Person,
11+
PhotoCamera,
12+
PlayIcon,
13+
Remove,
14+
RemoveOutline,
15+
UploadDone,
16+
UploadError,
17+
UploadingProcess,
18+
ViewGrid,
19+
ViewList,
20+
Visibility,
21+
} from "../../mega-dropzone-ui/icons"; */
22+
23+
const IconList = (props) => {
24+
return (
25+
<div
26+
style={{
27+
width: "100%",
28+
height:"100%",
29+
display: "flex",
30+
flexWrap: "wrap",
31+
}}
32+
>
33+
{/* <Cancel />
34+
<CheckCircle />
35+
<Clean />
36+
<Clear/>
37+
<Close />
38+
<DoDisturb />
39+
<Info />
40+
<Person />
41+
<PhotoCamera />
42+
<PlayIcon />
43+
<Remove />
44+
<RemoveOutline />
45+
<UploadDone />
46+
<UploadError />
47+
<UploadingProcess />
48+
<Visibility />
49+
<ViewGrid />
50+
<ViewList /> */}
51+
</div>
52+
);
53+
};
54+
export default IconList;

‎src/Components/Dui_Previews/Previews.jsx

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import { Button } from "@mui/material";
2+
import * as React from "react";
3+
/* import FullScreen from "../../mega-dropzone-ui/previews/FullScreen/FullScreen";
4+
import ImagePreview from "../../mega-dropzone-ui/previews/ImagePreview/ImagePreview";
5+
*/
6+
const Previews = (props) => {
7+
const [openFullscreen, setOpenFullScreen] = React.useState(false);
8+
const [openFullscreen2, setOpenFullScreen2] = React.useState(false);
9+
return (
10+
<div
11+
style={{
12+
width: "100%",
13+
height: "100%",
14+
display: "flex",
15+
flexWrap: "wrap",
16+
}}
17+
>
18+
{/* <Button variant="contained" onClick={() => setOpenFullScreen(true)}>
19+
open1
20+
</Button>
21+
22+
<Button variant="contained" onClick={() => setOpenFullScreen2(true)}>
23+
open2
24+
</Button>
25+
26+
<ImagePreview
27+
alt="al anternative text"
28+
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=" />
29+
30+
<FullScreen
31+
open={openFullscreen}
32+
onClose={() => {
33+
setOpenFullScreen(false);
34+
}}
35+
>
36+
<div
37+
style={{
38+
position: "relative",
39+
color: "white",
40+
width: "100%",
41+
height: "100%",
42+
border: "1px dashed white",
43+
padding: "4%",
44+
}}
45+
>
46+
{" "}
47+
lo que seaaalo que seaaalo que seaaalo que seaaalo que seaaalo que
48+
seaaalo que seaaalo que seaaalo que seaaalo que seaaa
49+
</div>
50+
</FullScreen>
51+
52+
<FullScreen
53+
open={openFullscreen2}
54+
onClose={() => {
55+
setOpenFullScreen2(false);
56+
}}
57+
>
58+
<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=" />
59+
</FullScreen> */}
60+
</div>
61+
);
62+
};
63+
export default Previews;

‎src/Components/OptionsRedirect/Options.jsx

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,10 @@ import DoubleArrowIcon from "@mui/icons-material/DoubleArrow";
55
import GitHubIcon from "@mui/icons-material/GitHub";
66
import StorageIcon from "@mui/icons-material/Storage";
77
import DocumentScannerIcon from "@mui/icons-material/DocumentScanner";
8+
import { useNavigate } from "react-router-dom";
89
import "./Options.scss";
910
const Options = (props) => {
11+
let navigate = useNavigate();
1012
const openTab = (url) => {
1113
window.open(url, "_blank").focus();
1214
};
@@ -24,6 +26,17 @@ const Options = (props) => {
2426
width:"100%"
2527
}} */
2628
>
29+
<Button
30+
//size="small"
31+
variant="contained"
32+
style={{ margin: "5px" }}
33+
startIcon={<DocumentScannerIcon />}
34+
onClick={() => {
35+
navigate("/code-generator");
36+
}}
37+
>
38+
Code generator
39+
</Button>
2740
<Button
2841
//size="small"
2942
variant="contained"

‎src/Pages/Lab/DropzoneArea/DropzoneAreaDemo.tsx

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import * as React from "react";
2+
/* import { Dropzone, DropzoneArea } from "../../../mega-dropzone-ui/components/dropzone";
3+
import { FileValidated } from "../../../mega-dropzone-ui/utils/file-validation/validation.types";
4+
import { makeFileList } from "../makeFilelList"; */
5+
6+
const DropzoneAreaDemo = (props: any) => {
7+
/* const [filesValidated, setFilesValidated] = React.useState<FileValidated[]>([]);
8+
const handleChange = async(fileValidatedList: FileValidated[]) => {
9+
setFilesValidated(fileValidatedList);
10+
const myFileArray: File[] = fileValidatedList.map(
11+
(f: FileValidated) => f.file
12+
);
13+
//let otherFiles: FileList = new FileList();
14+
//makeFileList(myFileArray)
15+
let myFileList: FileList = await makeFileList(myFileArray);
16+
console.log("FileList from Array of Files", myFileList);
17+
}; */
18+
// .... more code
19+
20+
return (
21+
<div>
22+
{/* <DropzoneArea value={filesValidated} onChange={handleChange}>
23+
Drag'drop files
24+
</DropzoneArea>
25+
<Dropzone>
26+
Dropzone
27+
</Dropzone>
28+
<ul>
29+
{filesValidated.map((f: FileValidated) => (
30+
<li key={f.id}>{`${f.file.name} - ${f.valid}`}</li>
31+
))}
32+
</ul> */}
33+
</div>
34+
);
35+
};
36+
export default DropzoneAreaDemo;

‎src/Pages/Lab/Lab.jsx

Lines changed: 33 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,35 @@
11
import * as React from "react";
2+
import IconList from "../../Components/Dui_IconsList/IconList";
3+
import Previews from "../../Components/Dui_Previews/Previews";
4+
import DropzoneAreaDemo from "./DropzoneArea/DropzoneAreaDemo";
25

3-
const Lab = props =>{
4-
return(
5-
<div>
6-
This is the lab
7-
</div>
8-
)
9-
}
10-
export default Lab;
6+
const Lab = (props) => {
7+
return (
8+
<div
9+
style={{
10+
width: "100%",
11+
height: "100%",
12+
display: "flex",
13+
flexDirection: "column",
14+
justifyContent: "stretch",
15+
alignContent: "center",
16+
//flexWrap: "wrap",
17+
}}
18+
>
19+
<h1>Lab</h1>
20+
<h2>Icons:</h2>
21+
<IconList />
22+
<h2>Previews:</h2>
23+
24+
<Previews />
25+
<h2>FileItem:</h2>
26+
<br />
27+
<h2>Avatar:</h2>
28+
<br />
29+
<h2>Dropzone:</h2>
30+
<DropzoneAreaDemo/>
31+
<br />
32+
</div>
33+
);
34+
};
35+
export default Lab;

‎src/Pages/Lab/makeFilelList.js

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
export const makeFileList = (myFileArray) => {
2+
return new Promise((resolve, reject) => {
3+
const input = document.createElement("input");
4+
input.style.display="none";
5+
const label = document.createElement("label");
6+
label.style.display="none";
7+
const text = document.createTextNode("click to set files\n");
8+
const form = document.createElement("form");
9+
const data = myFileArray;
10+
// https://github.com/w3c/clipboard-apis/issues/33
11+
class _DataTransfer {
12+
constructor() {
13+
return new ClipboardEvent("").clipboardData || new DataTransfer();
14+
}
15+
}
16+
input.type = "file";
17+
input.name = "files[]";
18+
input.multiple = true;
19+
input.id = "files";
20+
text.textContent = text.textContent.concat(
21+
data.map(({ name }) => name).join(", "),
22+
"\n"
23+
);
24+
25+
label.appendChild(text);
26+
form.appendChild(label);
27+
form.appendChild(input);
28+
document.body.appendChild(form);
29+
// https://github.com/whatwg/html/issues/3222
30+
// https://bugzilla.mozilla.org/show_bug.cgi?id=1416488
31+
label.onclick = (e) => {
32+
const dt = new _DataTransfer();
33+
for (let file of data) {
34+
dt.items.add(file);
35+
}
36+
if (dt.files.length) {
37+
input.files = dt.files;
38+
}
39+
const fd = new FormData(form);
40+
for (const file of input.files) {
41+
//console.log(file); // `File` objects set at `data`
42+
}
43+
for (const [key, prop] of fd) {
44+
// console.log(key, prop);
45+
}
46+
//console.log(input.files);
47+
resolve(input.files);
48+
};
49+
// not dispatched at Firefox 57 when set using `input.files = dt.files`
50+
input.onchange = (e) => {
51+
console.log("onchange", e, input.files);
52+
//resolve("onchange", input.files);
53+
};
54+
label.click();
55+
});
56+
};

‎src/Pages/Lab/makeFilelList.txt

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
export const makeFileList = (myFileArray) => {
2+
return new Promise((resolve, reject) => {
3+
const input = document.createElement("input");
4+
input.style.display="none";
5+
const label = document.createElement("label");
6+
label.style.display="none";
7+
const text = document.createTextNode("click to set files\n");
8+
const form = document.createElement("form");
9+
const data = myFileArray;
10+
// https://github.com/w3c/clipboard-apis/issues/33
11+
class _DataTransfer {
12+
constructor() {
13+
return new ClipboardEvent("").clipboardData || new DataTransfer();
14+
}
15+
}
16+
input.type = "file";
17+
input.name = "files[]";
18+
input.multiple = true;
19+
input.id = "files";
20+
text.textContent = text.textContent.concat(
21+
data.map(({ name }) => name).join(", "),
22+
"\n"
23+
);
24+
25+
label.appendChild(text);
26+
form.appendChild(label);
27+
form.appendChild(input);
28+
document.body.appendChild(form);
29+
// https://github.com/whatwg/html/issues/3222
30+
// https://bugzilla.mozilla.org/show_bug.cgi?id=1416488
31+
label.onclick = (e) => {
32+
const dt = new _DataTransfer();
33+
for (let file of data) {
34+
dt.items.add(file);
35+
}
36+
if (dt.files.length) {
37+
input.files = dt.files;
38+
}
39+
const fd = new FormData(form);
40+
for (const file of input.files) {
41+
//console.log(file); // `File` objects set at `data`
42+
}
43+
for (const [key, prop] of fd) {
44+
// console.log(key, prop);
45+
}
46+
//console.log(input.files);
47+
resolve(input.files);
48+
};
49+
// not dispatched at Firefox 57 when set using `input.files = dt.files`
50+
input.onchange = (e) => {
51+
console.log("onchange", e, input.files);
52+
//resolve("onchange", input.files);
53+
};
54+
label.click();
55+
});
56+
};

‎src/Pages/MainPage/MainPageRightDropzone/RightPart.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
//import { Dropzone, FileItem, FullScreenPreview, VideoPreview,} from "@dropzone-ui/react";
1+
import { Dropzone, FileItem, FullScreenPreview, VideoPreview,} from "@dropzone-ui/react";
22
import React, { Fragment, useState } from "react";
33
import Options from "../../../Components/OptionsRedirect/Options";
4-
import {
4+
/* import {
55
Dropzone,
66
FileItem,
77
FullScreenPreview,
88
VideoPreview,
9-
} from "@dropzone-ui/react";
9+
} from "../../../dropzone-ui"; */
1010
import "./RightPart.scss";
1111
const RightPart = (props) => {
1212
const [files, setFiles] = useState([]);

0 commit comments

Comments
 (0)