Skip to content

Commit 7f680f6

Browse files
JinSSJ3JinSSJ3
authored
Merge pull request #10 from files-ui/22-feat-add-file-icons-complete-list-demo-page
[FEAT]: Add File icons demo page with switch for changing between Fil…
2 parents e21c0aa + c6cf6bb commit 7f680f6

File tree

5 files changed

+155
-18
lines changed

5 files changed

+155
-18
lines changed

‎src/components/MainMenu/MainMenuSideBar.tsx‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -109,41 +109,46 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
109109
onClick: () => navigate("/api/avatar"),
110110
},
111111
],
112+
},
113+
{
114+
label: "File icons",
115+
index: 4,
116+
onClick: () => navigate("/file-icons"),
112117
},
113118
{
114119
label: "Server side",
115-
index: 4,
120+
index: 5,
116121
onClick: () => navigate("/server-side"),
117122
},
118123
{
119124
label: "Code Generator",
120-
index: 5,
125+
index: 6,
121126
onClick: () => navigate("/code-generator"),
122127
},
123128
{
124129
label: "Types",
125-
index: 6,
130+
index: 7,
126131
onClick: () => navigate("/types"),
127132
},
128133
{
129134
label: "Utilities Methods",
130-
index: 7,
135+
index: 8,
131136
subMenu: [
132137
{
133138
label: "File readers",
134-
index: 71,
139+
index: 81,
135140
onClick: () => navigate("/utilities-methods/file-reader"),
136141
},
137142

138143
{
139144
label: "File uploader",
140-
index: 72,
145+
index: 82,
141146
onClick: () => navigate("/utilities-methods/file-uploader"),
142147
},
143148

144149
{
145150
label: "File download",
146-
index: 73,
151+
index: 83,
147152
onClick: () => navigate("/utilities-methods/file-downloader"),
148153
},
149154
],

‎src/components/demo-components/filemosaic-demo/DemoFileMosaicFileIcons.jsx‎

Lines changed: 24 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,48 @@
11
import * as React from "react";
2-
import { FileMosaic,createListOfMultiTypeFile } from "../../../files-ui";
2+
import {
3+
FileMosaic,
4+
createListOfMultiTypeFile,
5+
FileCard,
6+
} from "../../../files-ui";
37

48
/* const sampleFileProps = {
59
id: "fileId",
610
size: 28 * 1024 * 1024,
711
type: "text/plain",
812
name: "file created from props.jsx",
913
}; */
10-
const DemoFileMosaicFileIcons = () => {
14+
const DemoFileMosaicFileIcons = ({ card }) => {
1115
const [files, setFiles] = React.useState([]);
1216

1317
const removeFile = (id) => {
1418
console.log("delete button clicked on file: " + id);
1519
};
1620

1721
React.useEffect(() => {
18-
const validateFiles = createListOfMultiTypeFile(28*1024*1024).map((x, index) => {
19-
return {
20-
id:index,
21-
size: 28 * 1024 * 1024,
22-
type: x.type,
23-
name: x.name,
24-
};
25-
});
22+
const validateFiles = createListOfMultiTypeFile(28 * 1024 * 1024).map(
23+
(x, index) => {
24+
return {
25+
id: index,
26+
size: 28 * 1024 * 1024,
27+
type: x.type,
28+
name: x.name,
29+
};
30+
}
31+
);
2632
//console.log(validateFiles);
2733
setFiles(validateFiles);
2834
}, []);
2935
return (
3036
<>
3137
{files.map((f, index) => (
32-
<FileMosaic {...f} key={f.id} onDelete={removeFile} info />
38+
<>
39+
{" "}
40+
{card ? (
41+
<FileCard {...f} key={f.id} onDelete={removeFile} info />
42+
) : (
43+
<FileMosaic {...f} key={f.id} onDelete={removeFile} info />
44+
)}
45+
</>
3346
))}
3447
</>
3548
);

‎src/components/switch/FileCardMosaicSwitch.jsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import * as React from 'react';
2+
import Radio from '@mui/material/Radio';
3+
import RadioGroup from '@mui/material/RadioGroup';
4+
import FormControlLabel from '@mui/material/FormControlLabel';
5+
import FormControl from '@mui/material/FormControl';
6+
import FormLabel from '@mui/material/FormLabel';
7+
8+
export default function FileCardMosaicSwitch({value, onChange}) {
9+
//const [value, setValue] = React.useState('female');
10+
11+
const handleChange = (event) => {
12+
//setValue(event.target.value);
13+
onChange?.(event.target.value)
14+
};
15+
16+
return (
17+
<FormControl>
18+
<FormLabel id="demo-controlled-radio-buttons-group">Component</FormLabel>
19+
<RadioGroup
20+
aria-labelledby="demo-controlled-radio-buttons-group"
21+
name="controlled-radio-buttons-group"
22+
value={value}
23+
onChange={handleChange}
24+
row="horizontal"
25+
>
26+
<FormControlLabel value="FileMosaic" control={<Radio />} label={"<FileMosaic/>"} />
27+
<FormControlLabel value="FileCard" control={<Radio />} label="<FileCard/>" />
28+
</RadioGroup>
29+
</FormControl>
30+
);
31+
}

‎src/pages/file-icons/FileIconsPage.jsx‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import * as React from "react";
2+
import CodeHighlight from "../../components/codeHighlight/CodeHighlight";
3+
import DescParagraph from "../../components/demo-components/desc-paragraph/DescParagraph";
4+
import SubTitle from "../../components/demo-components/sub-title/SubTitle";
5+
import MainContentContainer from "../../components/layout-pages/MainContentContainer";
6+
import RightMenuContainer from "../../components/layout-pages/RightMenuContainer";
7+
import MainTitle from "../../components/main-title/MainTitle";
8+
import MainParagraph from "../../components/paragraph-main/MainParagraph";
9+
import RightMenu from "../../components/RightMenu/RightMenu";
10+
import Paper from "@mui/material/Paper";
11+
import DemoFileMosaicFileIcons from "../../components/demo-components/filemosaic-demo/DemoFileMosaicFileIcons";
12+
import MainLayoutPage from "../../components/layout-pages/MainLayoutPage";
13+
import AnchorToTab from "../../components/util-components/AnchorToTab";
14+
import FileCardMosaicSwitch from "../../components/switch/FileCardMosaicSwitch";
15+
const FileIconsPage = (props) => {
16+
const [component, setComponent] = React.useState("FileMosaic");
17+
const handleChangeComponent = (newVal) => {
18+
setComponent(newVal);
19+
};
20+
return (
21+
<React.Fragment>
22+
<MainLayoutPage selectedIndex={4}>
23+
<MainContentContainer>
24+
<MainTitle>File Icons (extensive list)</MainTitle>
25+
<MainParagraph>
26+
Both <CodeHighlight>{"<FileMosaic/>"}</CodeHighlight> and{" "}
27+
<CodeHighlight>{"<FileCard/>"}</CodeHighlight> components diplay a file icon
28+
according to the file mime type. A media type (also known as a
29+
Multipurpose Internet Mail Extensions or MIME type) indicates the
30+
nature and format of a document, file, or assortment of bytes. You
31+
can find more information{" "}
32+
<AnchorToTab href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">
33+
here
34+
</AnchorToTab>
35+
. Files UI supports at list the least this{" "}
36+
<AnchorToTab href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types">
37+
Common MIME types
38+
</AnchorToTab>{" "}
39+
and some other extra file types.
40+
</MainParagraph>
41+
42+
<section id="complete-list">
43+
<SubTitle content="Complete list" />
44+
<DescParagraph>
45+
Bellow you can see a preview of every file type supported:
46+
</DescParagraph>
47+
<FileCardMosaicSwitch
48+
value={component}
49+
onChange={handleChangeComponent}
50+
/>
51+
<Paper
52+
variant="outlined"
53+
style={{
54+
padding: "25px 0",
55+
display: "flex",
56+
alignItems: "center",
57+
justifyContent: "center",
58+
//flexDirection: "column",
59+
gap: "10px",
60+
flexWrap: "wrap",
61+
}}
62+
>
63+
<DemoFileMosaicFileIcons card={component === "FileCard"} />
64+
</Paper>
65+
</section>
66+
67+
<RightMenuContainer>
68+
<RightMenu width="240px" items={rightMenuItems} />
69+
</RightMenuContainer>
70+
</MainContentContainer>
71+
</MainLayoutPage>
72+
</React.Fragment>
73+
);
74+
};
75+
export default FileIconsPage;
76+
77+
const rightMenuItems = [
78+
{
79+
id: 0,
80+
label: "Complete list",
81+
referTo: "/file-icons#complete-list",
82+
},
83+
];

‎src/routes/MainRouter.jsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import FileInputButtonApi from "../pages/api/FileInputButtonApi";
2121
import AvatarApi from "../pages/api/AvatarApi";
2222
import FileInputButtonDemoPage from "../pages/demo/FileInputButtonDemoPage";
2323
import FileDownloadPage from "../pages/download-page/FileDownloadPage";
24+
import FileIconsPage from "../pages/file-icons/FileIconsPage";
2425

2526
const router = createBrowserRouter([
2627
{
@@ -100,6 +101,10 @@ const router = createBrowserRouter([
100101
},
101102
],
102103
},
104+
{
105+
path: "/file-icons",
106+
element: <FileIconsPage />,
107+
},
103108
{
104109
path: "/server-side",
105110
element: <ServerSidePage />,

0 commit comments

Comments
 (0)