From c6cf6bb6fabe5efe2b19ea2c6881c486192964f0 Mon Sep 17 00:00:00 2001
From: Jose Manuel Serrano Amaut <a20122128@pucp.pe>
Date: Sat, 11 Mar 2023 19:44:05 -0500
Subject: [PATCH] [FEAT]: Add File icons demo page with switch for changing
between FileCard and FileMosaic
---
src/components/MainMenu/MainMenuSideBar.tsx | 19 +++--
.../DemoFileMosaicFileIcons.jsx | 35 +++++---
.../switch/FileCardMosaicSwitch.jsx | 31 +++++++
src/pages/file-icons/FileIconsPage.jsx | 83 +++++++++++++++++++
src/routes/MainRouter.jsx | 5 ++
5 files changed, 155 insertions(+), 18 deletions(-)
create mode 100644 src/components/switch/FileCardMosaicSwitch.jsx
create mode 100644 src/pages/file-icons/FileIconsPage.jsx
diff --git a/src/components/MainMenu/MainMenuSideBar.tsx b/src/components/MainMenu/MainMenuSideBar.tsx
index 2891c84..a7bf661 100644
--- a/src/components/MainMenu/MainMenuSideBar.tsx
+++ b/src/components/MainMenu/MainMenuSideBar.tsx
@@ -109,41 +109,46 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
onClick: () => navigate("/api/avatar"),
},
],
+ },
+ {
+ label: "File icons",
+ index: 4,
+ onClick: () => navigate("/file-icons"),
},
{
label: "Server side",
- index: 4,
+ index: 5,
onClick: () => navigate("/server-side"),
},
{
label: "Code Generator",
- index: 5,
+ index: 6,
onClick: () => navigate("/code-generator"),
},
{
label: "Types",
- index: 6,
+ index: 7,
onClick: () => navigate("/types"),
},
{
label: "Utilities Methods",
- index: 7,
+ index: 8,
subMenu: [
{
label: "File readers",
- index: 71,
+ index: 81,
onClick: () => navigate("/utilities-methods/file-reader"),
},
{
label: "File uploader",
- index: 72,
+ index: 82,
onClick: () => navigate("/utilities-methods/file-uploader"),
},
{
label: "File download",
- index: 73,
+ index: 83,
onClick: () => navigate("/utilities-methods/file-downloader"),
},
],
diff --git a/src/components/demo-components/filemosaic-demo/DemoFileMosaicFileIcons.jsx b/src/components/demo-components/filemosaic-demo/DemoFileMosaicFileIcons.jsx
index 3432c4c..2fd69c6 100644
--- a/src/components/demo-components/filemosaic-demo/DemoFileMosaicFileIcons.jsx
+++ b/src/components/demo-components/filemosaic-demo/DemoFileMosaicFileIcons.jsx
@@ -1,5 +1,9 @@
import * as React from "react";
-import { FileMosaic,createListOfMultiTypeFile } from "../../../files-ui";
+import {
+ FileMosaic,
+ createListOfMultiTypeFile,
+ FileCard,
+} from "../../../files-ui";
/* const sampleFileProps = {
id: "fileId",
@@ -7,7 +11,7 @@ import { FileMosaic,createListOfMultiTypeFile } from "../../../files-ui";
type: "text/plain",
name: "file created from props.jsx",
}; */
-const DemoFileMosaicFileIcons = () => {
+const DemoFileMosaicFileIcons = ({ card }) => {
const [files, setFiles] = React.useState([]);
const removeFile = (id) => {
@@ -15,21 +19,30 @@ const DemoFileMosaicFileIcons = () => {
};
React.useEffect(() => {
- const validateFiles = createListOfMultiTypeFile(28*1024*1024).map((x, index) => {
- return {
- id:index,
- size: 28 * 1024 * 1024,
- type: x.type,
- name: x.name,
- };
- });
+ const validateFiles = createListOfMultiTypeFile(28 * 1024 * 1024).map(
+ (x, index) => {
+ return {
+ id: index,
+ size: 28 * 1024 * 1024,
+ type: x.type,
+ name: x.name,
+ };
+ }
+ );
//console.log(validateFiles);
setFiles(validateFiles);
}, []);
return (
<>
{files.map((f, index) => (
- <FileMosaic {...f} key={f.id} onDelete={removeFile} info />
+ <>
+ {" "}
+ {card ? (
+ <FileCard {...f} key={f.id} onDelete={removeFile} info />
+ ) : (
+ <FileMosaic {...f} key={f.id} onDelete={removeFile} info />
+ )}
+ </>
))}
</>
);
diff --git a/src/components/switch/FileCardMosaicSwitch.jsx b/src/components/switch/FileCardMosaicSwitch.jsx
new file mode 100644
index 0000000..84b714f
--- /dev/null
+++ b/src/components/switch/FileCardMosaicSwitch.jsx
@@ -0,0 +1,31 @@
+import * as React from 'react';
+import Radio from '@mui/material/Radio';
+import RadioGroup from '@mui/material/RadioGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import FormControl from '@mui/material/FormControl';
+import FormLabel from '@mui/material/FormLabel';
+
+export default function FileCardMosaicSwitch({value, onChange}) {
+ //const [value, setValue] = React.useState('female');
+
+ const handleChange = (event) => {
+ //setValue(event.target.value);
+ onChange?.(event.target.value)
+ };
+
+ return (
+ <FormControl>
+ <FormLabel id="demo-controlled-radio-buttons-group">Component</FormLabel>
+ <RadioGroup
+ aria-labelledby="demo-controlled-radio-buttons-group"
+ name="controlled-radio-buttons-group"
+ value={value}
+ onChange={handleChange}
+ row="horizontal"
+ >
+ <FormControlLabel value="FileMosaic" control={<Radio />} label={"<FileMosaic/>"} />
+ <FormControlLabel value="FileCard" control={<Radio />} label="<FileCard/>" />
+ </RadioGroup>
+ </FormControl>
+ );
+}
diff --git a/src/pages/file-icons/FileIconsPage.jsx b/src/pages/file-icons/FileIconsPage.jsx
new file mode 100644
index 0000000..c7032b5
--- /dev/null
+++ b/src/pages/file-icons/FileIconsPage.jsx
@@ -0,0 +1,83 @@
+import * as React from "react";
+import CodeHighlight from "../../components/codeHighlight/CodeHighlight";
+import DescParagraph from "../../components/demo-components/desc-paragraph/DescParagraph";
+import SubTitle from "../../components/demo-components/sub-title/SubTitle";
+import MainContentContainer from "../../components/layout-pages/MainContentContainer";
+import RightMenuContainer from "../../components/layout-pages/RightMenuContainer";
+import MainTitle from "../../components/main-title/MainTitle";
+import MainParagraph from "../../components/paragraph-main/MainParagraph";
+import RightMenu from "../../components/RightMenu/RightMenu";
+import Paper from "@mui/material/Paper";
+import DemoFileMosaicFileIcons from "../../components/demo-components/filemosaic-demo/DemoFileMosaicFileIcons";
+import MainLayoutPage from "../../components/layout-pages/MainLayoutPage";
+import AnchorToTab from "../../components/util-components/AnchorToTab";
+import FileCardMosaicSwitch from "../../components/switch/FileCardMosaicSwitch";
+const FileIconsPage = (props) => {
+ const [component, setComponent] = React.useState("FileMosaic");
+ const handleChangeComponent = (newVal) => {
+ setComponent(newVal);
+ };
+ return (
+ <React.Fragment>
+ <MainLayoutPage selectedIndex={4}>
+ <MainContentContainer>
+ <MainTitle>File Icons (extensive list)</MainTitle>
+ <MainParagraph>
+ Both <CodeHighlight>{"<FileMosaic/>"}</CodeHighlight> and{" "}
+ <CodeHighlight>{"<FileCard/>"}</CodeHighlight> components diplay a file icon
+ according to the file mime type. A media type (also known as a
+ Multipurpose Internet Mail Extensions or MIME type) indicates the
+ nature and format of a document, file, or assortment of bytes. You
+ can find more information{" "}
+ <AnchorToTab href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">
+ here
+ </AnchorToTab>
+ . Files UI supports at list the least this{" "}
+ <AnchorToTab href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types">
+ Common MIME types
+ </AnchorToTab>{" "}
+ and some other extra file types.
+ </MainParagraph>
+
+ <section id="complete-list">
+ <SubTitle content="Complete list" />
+ <DescParagraph>
+ Bellow you can see a preview of every file type supported:
+ </DescParagraph>
+ <FileCardMosaicSwitch
+ value={component}
+ onChange={handleChangeComponent}
+ />
+ <Paper
+ variant="outlined"
+ style={{
+ padding: "25px 0",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ //flexDirection: "column",
+ gap: "10px",
+ flexWrap: "wrap",
+ }}
+ >
+ <DemoFileMosaicFileIcons card={component === "FileCard"} />
+ </Paper>
+ </section>
+
+ <RightMenuContainer>
+ <RightMenu width="240px" items={rightMenuItems} />
+ </RightMenuContainer>
+ </MainContentContainer>
+ </MainLayoutPage>
+ </React.Fragment>
+ );
+};
+export default FileIconsPage;
+
+const rightMenuItems = [
+ {
+ id: 0,
+ label: "Complete list",
+ referTo: "/file-icons#complete-list",
+ },
+];
diff --git a/src/routes/MainRouter.jsx b/src/routes/MainRouter.jsx
index 9fbb658..fc2ad2f 100644
--- a/src/routes/MainRouter.jsx
+++ b/src/routes/MainRouter.jsx
@@ -21,6 +21,7 @@ import FileInputButtonApi from "../pages/api/FileInputButtonApi";
import AvatarApi from "../pages/api/AvatarApi";
import FileInputButtonDemoPage from "../pages/demo/FileInputButtonDemoPage";
import FileDownloadPage from "../pages/download-page/FileDownloadPage";
+import FileIconsPage from "../pages/file-icons/FileIconsPage";
const router = createBrowserRouter([
{
@@ -100,6 +101,10 @@ const router = createBrowserRouter([
},
],
},
+ {
+ path: "/file-icons",
+ element: <FileIconsPage />,
+ },
{
path: "/server-side",
element: <ServerSidePage />,
--
GitLab