Skip to content

Commit 3fa5efc

Browse files
JinSSJ3JinSSJ3
authored
Merge pull request #17 from files-ui/24-add-download-page-and-upload-page
24 add download page and upload page
2 parents 02693cb + 46b206b commit 3fa5efc

File tree

97 files changed

+1198
-3986
lines changed

Some content is hidden

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

97 files changed

+1198
-3986
lines changed

‎public/serverside/nodeexpress.jpg‎

5.86 KB
Loading

‎public/serverside/springbootjavalogo.png‎

82.7 KB
Loading

‎public/videodemo/NarutoEN.mp4‎

4.13 MB
Binary file not shown.

‎src/components/MainMenu/MainMenuSideBar.tsx‎

Lines changed: 43 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,9 @@ import { MainMenuSideBarItems, MainMenuSideBarProps } from "./MenuSideBarProps";
1010
import ElectricBoltIcon from "@mui/icons-material/ElectricBolt";
1111
import { useNavigateToTop } from "../../hooks/useNavigateToTop";
1212

13+
import ExpandLess from "@mui/icons-material/ExpandLess";
14+
import ExpandMore from "@mui/icons-material/ExpandMore";
15+
1316
export default function MainMenuSideBar(props: MainMenuSideBarProps) {
1417
const { /* items, */ selectedIndex /* setSelectedIndex */ } = props;
1518
const navigate = useNavigateToTop();
@@ -64,7 +67,6 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
6467
index: 26,
6568
onClick: () => navigate("/components/fullscreen"),
6669
},
67-
6870
],
6971
},
7072
{
@@ -126,43 +128,31 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
126128
index: 5,
127129
onClick: () => navigate("/localization"),
128130
},
129-
{
130-
label: "Server side",
131-
index: 6,
132-
onClick: () => navigate("/server-side"),
133-
},
134-
{
131+
/* {
135132
label: "Code Generator",
136133
index: 7,
137134
onClick: () => navigate("/code-generator"),
138-
},
135+
}, */
139136
{
140137
label: "Types",
141-
index: 8,
138+
index: 7,
142139
onClick: () => navigate("/types"),
143140
},
144141
{
145-
label: "Utilities Methods",
142+
label: "Server side",
143+
index: 6,
144+
onClick: () => navigate("/server-side"),
145+
},
146+
/* {
147+
label: "File readers",
148+
index: 8,
149+
onClick: () => navigate("/file-reader"),
150+
},
151+
*/
152+
{
153+
label: "File download",
146154
index: 9,
147-
subMenu: [
148-
{
149-
label: "File readers",
150-
index: 81,
151-
onClick: () => navigate("/utilities-methods/file-reader"),
152-
},
153-
154-
{
155-
label: "File uploader",
156-
index: 82,
157-
onClick: () => navigate("/utilities-methods/file-uploader"),
158-
},
159-
160-
{
161-
label: "File download",
162-
index: 83,
163-
onClick: () => navigate("/utilities-methods/file-downloader"),
164-
},
165-
],
155+
onClick: () => navigate("/file-download"),
166156
},
167157
];
168158

@@ -175,6 +165,7 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
175165
})
176166
);
177167

168+
178169
/* const handleClick = () => {
179170
//setOpen(!open);
180171
}; */
@@ -187,19 +178,36 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
187178
}; */
188179

189180
//const [selectedIndex, setSelectedIndex] = React.useState(1);
190-
181+
function handler(ev:React.MouseEvent<HTMLDivElement, MouseEvent>) {
182+
console.log('CTRL pressed during click:', ev.ctrlKey);
183+
}
191184
const handleListItemClick = (
192185
event: React.MouseEvent<HTMLDivElement, MouseEvent>,
193186
index: number,
194187
onClick: Function | undefined,
195188
withSubMenu?: boolean
196189
) => {
190+
handler(event);
191+
197192
//setSelectedIndex(index);
193+
console.log("newIndex",index, withSubMenu);
198194
if (!withSubMenu) {
199195
onClick?.();
200196
} else {
201197
setRegularItemsIni((arr) =>
202198
arr.map((item) => {
199+
/* if (item.subMenu) {
200+
const newSubMenu = item.subMenu.map((x) => {
201+
if (x.index === index) {
202+
return { ...x , };
203+
} else {
204+
return { ...x };
205+
}
206+
});
207+
return { ...item, subMenu: newSubMenu };
208+
} else */
209+
210+
203211
if (item.index === index) {
204212
return { ...item, isOpen: !item.isOpen };
205213
}
@@ -300,7 +308,9 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
300308
style={{ padding: "2px 20px" }}
301309
key={indexBase}
302310
// selected={subMenu === undefined && selectedIndex === index}
303-
selected={isOpen && selectedIndex === index}
311+
selected={
312+
(subMenu === undefined || isOpen) && selectedIndex === index
313+
}
304314
onClick={(event) =>
305315
handleListItemClick(
306316
event,
@@ -321,6 +331,7 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
321331
primary={label || ""}
322332
primaryTypographyProps={{ fontWeight: "600" }}
323333
/>
334+
{subMenu && <>{isOpen ? <ExpandLess /> : <ExpandMore />}</>}
324335
</ListItemButton>
325336

326337
{subMenu && (
@@ -336,6 +347,7 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
336347
<ListItemButton
337348
style={{ paddingTop: 0 }}
338349
sx={{ pl: 4 }}
350+
//selected={selectedIndex === index}
339351
selected={selectedIndex === index}
340352
key={index2 + indexBase}
341353
onClick={(event) =>

‎src/components/MainPage/MainRight/FileMosaicImageVideoPreviews.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ const FileMosaicImageVideoPreviews: React.FC<
4040
fileId: FileMosaicProps["id"],
4141
downloadUrl?: string
4242
) => {
43+
4344
console.log("Download fileId", fileId);
4445
console.log("Download fileName", files.filter((x) => x.id === fileId)[0]);
4546
console.log("Download downloadUrl", downloadUrl);

‎src/components/demo-components/demo-download/CodeDemoDownload.tsx‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import * as React from "react";
2+
import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
3+
4+
const CodeDemoDownload1 = () => {
5+
return (
6+
<ShowDemoCode
7+
codeCompleteJS={completeCodeJS}
8+
codeCompleteTS={completeCodeTS}
9+
codeSandboxJS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
10+
codeSandboxTS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
11+
codeSplittedJS={splittedCodeJS}
12+
codeSplittedTS={splittedCodeTS}
13+
/>
14+
);
15+
};
16+
export default CodeDemoDownload1;
17+
18+
const splittedCodeJS = ``;
19+
const splittedCodeTS = ``;
20+
21+
const completeCodeJS = `import * as React from "react";
22+
import { FileCard, FileMosaic } from "@files-ui/react";
23+
24+
const outsideDownloadUrl = "https://steamuserimages-a.akamaihd.net/ugc/964219647714510750/C4D97B0E1ECCE3E8A505AFBC8EAD8945E2223C41/?imw=5000&imh=5000&ima=fit&impolicy=Letterbox&imcolor=%23000000&letterbox=false";
25+
26+
const sampleFile = {
27+
size: 28 * 1024 * 1024,
28+
type: "image/jpeg",
29+
name: "Thor.jpeg",
30+
imageUrl: outsideDownloadUrl,
31+
downloadUrl: outsideDownloadUrl,
32+
};
33+
34+
const DemoDownloadDifferentOriginDownloadUrl = () => {
35+
return (
36+
<>
37+
<FileMosaic id={4} {...sampleFile} />
38+
<FileCard id={4} {...sampleFile} />
39+
</>
40+
);
41+
};
42+
export default DemoDownloadDifferentOriginDownloadUrl;`;
43+
44+
45+
const completeCodeTS = `import * as React from "react";
46+
import { FileCard, FileMosaic, ExtFile } from "../../../files-ui";
47+
48+
const outsideDownloadUrl = "https://steamuserimages-a.akamaihd.net/ugc/964219647714510750/C4D97B0E1ECCE3E8A505AFBC8EAD8945E2223C41/?imw=5000&imh=5000&ima=fit&impolicy=Letterbox&imcolor=%23000000&letterbox=false";
49+
50+
const sampleFile: ExtFile = {
51+
size: 28 * 1024 * 1024,
52+
type: "image/jpeg",
53+
name: "Thor.jpeg",
54+
imageUrl: outsideDownloadUrl,
55+
downloadUrl: outsideDownloadUrl,
56+
};
57+
58+
const DemoDownloadDifferentOriginDownloadUrl = () => {
59+
return (
60+
<>
61+
<FileMosaic id={4} {...sampleFile} />
62+
<FileCard id={4} {...sampleFile} />
63+
</>
64+
);
65+
};
66+
export default DemoDownloadDifferentOriginDownloadUrl;`;

‎src/components/demo-components/demo-download/CodeDemoDownload1.tsx‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import * as React from "react";
2+
import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
3+
4+
const CodeDemoDownload1 = () => {
5+
return (
6+
<ShowDemoCode
7+
codeCompleteJS={completeCodeJS}
8+
codeCompleteTS={completeCodeTS}
9+
codeSandboxJS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
10+
codeSandboxTS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
11+
codeSplittedJS={splittedCodeJS}
12+
codeSplittedTS={splittedCodeTS}
13+
/>
14+
);
15+
};
16+
export default CodeDemoDownload1;
17+
18+
const splittedCodeJS = ``;
19+
const splittedCodeTS = ``;
20+
21+
const completeCodeJS = `import * as React from "react";
22+
import { FileCard, FileMosaic } from "@files-ui/react";
23+
24+
const sampleFile = {
25+
size: 28 * 1024 * 1024,
26+
type: "video/mp4",
27+
name: "NarutoAndSasukevsMomoshiiki.mp4",
28+
};
29+
30+
const VIDEO_URL = "/videodemo/NarutoEN.mp4";
31+
32+
const DemoDownloadSameOrigin = () => {
33+
return (
34+
<>
35+
<FileMosaic id={4} {...sampleFile} downloadUrl={VIDEO_URL} />
36+
<FileCard id={4} {...sampleFile} downloadUrl={VIDEO_URL} />
37+
</>
38+
);
39+
};
40+
export default DemoDownloadSameOrigin;`;
41+
42+
43+
const completeCodeTS = `import * as React from "react";
44+
import { FileCard, FileMosaic, ExtFile } from "../../../files-ui";
45+
46+
const sampleFile: ExtFile = {
47+
size: 28 * 1024 * 1024,
48+
type: "video/mp4",
49+
name: "NarutoAndSasukevsMomoshiiki.mp4",
50+
};
51+
52+
const VIDEO_URL = "/videodemo/NarutoEN.mp4";
53+
54+
const DemoDownloadSameOrigin = () => {
55+
return (
56+
<>
57+
<FileMosaic id={4} {...sampleFile} downloadUrl={VIDEO_URL} />
58+
<FileCard id={4} {...sampleFile} downloadUrl={VIDEO_URL} />
59+
</>
60+
);
61+
};
62+
export default DemoDownloadSameOrigin;`;

0 commit comments

Comments
 (0)