Skip to content

Commit 649cce8

Browse files
JinSSJ3JinSSJ3
committed
[RINNE]: Test deplot deelo.cloud
1 parent 81a7fed commit 649cce8

File tree

112 files changed

+7172
-100
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

112 files changed

+7172
-100
lines changed

‎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: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import * as React from "react";
22
import IconList from "../../Components/Dui_IconsList/IconList";
33
import Previews from "../../Components/Dui_Previews/Previews";
4+
import { DropzoneArea } from "../../mega-dropzone-ui/components/dropzone";
5+
import DropzoneAreaDemo from "./DropzoneArea/DropzoneAreaDemo";
46

57
const Lab = (props) => {
68
return (
@@ -26,6 +28,7 @@ const Lab = (props) => {
2628
<h2>Avatar:</h2>
2729
<br />
2830
<h2>Dropzone:</h2>
31+
<DropzoneAreaDemo/>
2932
<br />
3033
</div>
3134
);

‎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/Router/MainRouter.js

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -8,20 +8,13 @@ import FileItemApi from "../Pages/Api/FileItemApi";
88
import Lab from "../Pages/Lab/Lab";
99
import MainPage from "../Pages/MainPage/MainPage";
1010
const Main = (props) => {
11-
12-
13-
14-
15-
16-
17-
1811
return (
1912
<BrowserRouter>
2013
<Routes>
21-
{/* <Route path="/" element={<MainPage />} />
22-
<Route path="/code-generator" element={<InteractiveCode />} /> */}
23-
<Route path="/" element={<Lab/>} />
24-
<Route path="/icons" element={<IconList/>} />
14+
<Route path="/" element={<MainPage />} />
15+
<Route path="/code-generator" element={<InteractiveCode />} />
16+
{/* <Route path="/" element={<Lab />} /> */}
17+
<Route path="/icons" element={<IconList />} />
2518
<Route path="/api" element={<Api />}>
2619
<Route path="dropzone" element={<DropzoneApi />} />
2720
<Route path="fileitem" element={<FileItemApi />} />

‎src/dropzone-ui/components/dropzone/components/Dropzone/Dropzone.scss

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
2+
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap");
3+
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap");
4+
5+
.dropzone-ui {
6+
.dropzone-ui-ripple {
7+
position: absolute;
8+
width: 0%;
9+
height: 0%;
10+
//background-color: aqua;
11+
top: 0;
12+
left: 0;
13+
overflow: hidden;
14+
//padding-left: 15px;
15+
//z-index: -1;
16+
span.ripple {
17+
// width: 100%;
18+
//height: 100%;
19+
// overflow: hidden;
20+
position: absolute;
21+
border-radius: 50%;
22+
transform: scale(0);
23+
animation: ripple 500ms linear;
24+
background-color: rgba(255, 255, 255, 0.7);
25+
}
26+
27+
@keyframes ripple {
28+
to {
29+
transform: scale(4);
30+
opacity: 0;
31+
}
32+
}
33+
}
34+
color: #646c7f;
35+
position: relative;
36+
min-height: 280px;
37+
border-radius: 4px;
38+
//margin: 4%;
39+
//width: calc(100% - 4px);
40+
width: calc(100% - 2px);
41+
//width: 100%;
42+
//min-width: 500px;
43+
background-color: white;
44+
display: flex;
45+
flex-direction: column;
46+
align-items: center;
47+
justify-content: center;
48+
//overflow: hidden;
49+
// padding: 24px 0;
50+
&.drag {
51+
border: none;
52+
}
53+
&.clickable {
54+
cursor: pointer;
55+
}
56+
/* span.ripple {
57+
// width: 100%;
58+
//height: 100%;
59+
// overflow: hidden;
60+
position: absolute;
61+
border-radius: 50%;
62+
transform: scale(0);
63+
animation: ripple 500ms linear;
64+
background-color: rgba(255, 255, 255, 0.7);
65+
}
66+
67+
@keyframes ripple {
68+
to {
69+
transform: scale(4);
70+
opacity: 0;
71+
}
72+
} */
73+
74+
//verflow: hidden;
75+
.dz-ui-header {
76+
height: 22px;
77+
78+
position: absolute;
79+
cursor: text;
80+
top: 0;
81+
display: flex;
82+
width: calc(100% - 10px);
83+
flex-direction: row;
84+
align-items: center;
85+
justify-content: flex-end;
86+
//height: 30px;
87+
//font-weight: 300;
88+
font-family: "Poppins", sans-serif;
89+
padding-right: 10px;
90+
//border-bottom: 1px dotted #646c7f;
91+
font-size: 0.9em;
92+
}
93+
.dz-ui-footer {
94+
//margin-left: 5px;
95+
height: 23px;
96+
position: absolute;
97+
cursor: text;
98+
bottom: 0;
99+
width: calc(100% - 10px);
100+
display: flex;
101+
flex-direction: column;
102+
align-items: flex-start;
103+
justify-content: center;
104+
border-top: 1px dotted grey;
105+
background-color: #80808021;
106+
//height: 30px;
107+
font-family: "Poppins", sans-serif;
108+
padding-left: 10px;
109+
font-size: 1em;
110+
}
111+
}
112+
113+
.dropzone-ui-layer {
114+
width: 0%;
115+
height: 0%;
116+
z-index: 20;
117+
&.drag {
118+
position: absolute;
119+
left: 0;
120+
top: 0;
121+
//width: calc(100% - 4px);
122+
//height: calc(100% - 4px);
123+
width: 100%;
124+
height: 100%;
125+
}
126+
}
127+
.dz-ui-label {
128+
text-rendering: optimizeLegibility;
129+
font-size: 1.5em;
130+
font-family: "Poppins", sans-serif;
131+
text-align: center;
132+
font-weight: 500;
133+
letter-spacing: 0.02857em;
134+
@media (max-width: 600px) {
135+
font-size: 1.3em;
136+
}
137+
word-break: normal;
138+
//font-family: "Poppins", sans-serif;
139+
//font-weight: 600;
140+
}

0 commit comments

Comments
 (0)