From c3729ff1bfecc4b8722d71a3352a9c16d4f5e374 Mon Sep 17 00:00:00 2001
From: Jose Manuel Serrano Amaut <a20122128@pucp.pe>
Date: Sat, 11 Mar 2023 20:23:36 -0500
Subject: [PATCH] [WIP]: Add Localization page and demo in progress. Missing to
add the other combination of components. Maybe Avatar will be needed to be
added. Maybe like the main page
---
src/components/MainMenu/MainMenuSideBar.tsx | 27 ++---
.../DemoFileMosaicLocalization.tsx | 56 ++++++++---
.../switch/FileCardMosaicSwitch.jsx | 32 ++++--
src/pages/demo/FileMosaicDemoPage.jsx | 65 ------------
src/pages/localization/LocalizationPage.jsx | 98 +++++++++++++++++++
src/routes/MainRouter.jsx | 5 +
6 files changed, 184 insertions(+), 99 deletions(-)
create mode 100644 src/pages/localization/LocalizationPage.jsx
diff --git a/src/components/MainMenu/MainMenuSideBar.tsx b/src/components/MainMenu/MainMenuSideBar.tsx
index a7bf661..1545db2 100644
--- a/src/components/MainMenu/MainMenuSideBar.tsx
+++ b/src/components/MainMenu/MainMenuSideBar.tsx
@@ -11,7 +11,7 @@ import ElectricBoltIcon from "@mui/icons-material/ElectricBolt";
import { useNavigateToTop } from "../../hooks/useNavigateToTop";
export default function MainMenuSideBar(props: MainMenuSideBarProps) {
- const { /* items, */ selectedIndex, /* setSelectedIndex */ } = props;
+ const { /* items, */ selectedIndex /* setSelectedIndex */ } = props;
const navigate = useNavigateToTop();
const quickStartItemsIni: MainMenuSideBarItems[] = [
@@ -110,29 +110,34 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
},
],
},
- {
+ {
label: "File icons",
index: 4,
onClick: () => navigate("/file-icons"),
},
{
- label: "Server side",
+ label: "Localization",
index: 5,
+ onClick: () => navigate("/localization"),
+ },
+ {
+ label: "Server side",
+ index: 6,
onClick: () => navigate("/server-side"),
},
{
label: "Code Generator",
- index: 6,
+ index: 7,
onClick: () => navigate("/code-generator"),
},
{
label: "Types",
- index: 7,
+ index: 8,
onClick: () => navigate("/types"),
},
{
label: "Utilities Methods",
- index: 8,
+ index: 9,
subMenu: [
{
label: "File readers",
@@ -145,7 +150,7 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
index: 82,
onClick: () => navigate("/utilities-methods/file-uploader"),
},
-
+
{
label: "File download",
index: 83,
@@ -155,7 +160,7 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
},
];
- const [quickStartItems, /* setQuickStartItems */] =
+ const [quickStartItems /* setQuickStartItems */] =
React.useState(quickStartItemsIni);
const [regularItems, setRegularItemsIni] = React.useState(
@@ -164,11 +169,11 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
})
);
-/* const handleClick = () => {
+ /* const handleClick = () => {
//setOpen(!open);
}; */
-/* const handleCLickItem = (
+ /* const handleCLickItem = (
e: React.MouseEvent<HTMLDivElement, MouseEvent>,
onClick: Function | undefined
): void => {
@@ -288,7 +293,7 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
<ListItemButton
style={{ padding: "2px 20px" }}
key={indexBase}
- // selected={subMenu === undefined && selectedIndex === index}
+ // selected={subMenu === undefined && selectedIndex === index}
selected={isOpen && selectedIndex === index}
onClick={(event) =>
handleListItemClick(
diff --git a/src/components/demo-components/filemosaic-demo/DemoFileMosaicLocalization.tsx b/src/components/demo-components/filemosaic-demo/DemoFileMosaicLocalization.tsx
index 6354a3d..74582e7 100644
--- a/src/components/demo-components/filemosaic-demo/DemoFileMosaicLocalization.tsx
+++ b/src/components/demo-components/filemosaic-demo/DemoFileMosaicLocalization.tsx
@@ -1,8 +1,8 @@
import * as React from "react";
-import { ExtFile, FileMosaic, Localization } from "../../../files-ui";
+import { Dropzone, ExtFile, FileMosaic, Localization } from "../../../files-ui";
import { Autocomplete, TextField } from "@mui/material";
-const DemoFileMosaicLocalization = () => {
+const DemoFileMosaicLocalization = (props: { card: boolean }) => {
const [localization, setLocalization] = React.useState<
Localization | undefined
>(undefined);
@@ -11,7 +11,7 @@ const DemoFileMosaicLocalization = () => {
console.log(value);
setLocalization(value?.value);
};
-
+ if (props.card) return <></>;
return (
<>
<Autocomplete
@@ -29,20 +29,50 @@ const DemoFileMosaicLocalization = () => {
style={{
display: "flex",
flexWrap: "wrap",
- justifyContent: "space-evenly",
+ justifyContent: "center",
width: "100%",
gap: "50px",
}}
>
- {extFiles.map((extFile, index) => (
- <FileMosaic
- key={index}
- {...extFile}
- localization={localization}
- onDelete={() => {}}
- info
- />
- ))}
+ <div
+ style={{
+ display: "flex",
+ justifyContent: "center",
+ alignItems: "center",
+ flexGrow: 1,
+ flexWrap:"wrap"
+ }}
+ >
+ <Dropzone
+ /* style={{
+ display: "flex",
+ justifyContent: "center",
+ alignItems: "center",
+ flexGrow: 1,
+ }} */
+ localization={localization}
+ ></Dropzone>
+ </div>
+
+ <div
+ style={{
+ display: "flex",
+ justifyContent: "center",
+ alignItems: "center",
+ flexGrow: 1,
+ flexWrap:"wrap"
+ }}
+ >
+ {extFiles.map((extFile, index) => (
+ <FileMosaic
+ key={index}
+ {...extFile}
+ localization={localization}
+ onDelete={() => {}}
+ info
+ />
+ ))}
+ </div>
</div>
</>
);
diff --git a/src/components/switch/FileCardMosaicSwitch.jsx b/src/components/switch/FileCardMosaicSwitch.jsx
index 84b714f..9da2c23 100644
--- a/src/components/switch/FileCardMosaicSwitch.jsx
+++ b/src/components/switch/FileCardMosaicSwitch.jsx
@@ -1,16 +1,20 @@
-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';
+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}) {
+export default function FileCardMosaicSwitch({
+ value,
+ onChange,
+ withInput = false,
+}) {
//const [value, setValue] = React.useState('female');
const handleChange = (event) => {
//setValue(event.target.value);
- onChange?.(event.target.value)
+ onChange?.(event.target.value);
};
return (
@@ -23,8 +27,16 @@ export default function FileCardMosaicSwitch({value, onChange}) {
onChange={handleChange}
row="horizontal"
>
- <FormControlLabel value="FileMosaic" control={<Radio />} label={"<FileMosaic/>"} />
- <FormControlLabel value="FileCard" control={<Radio />} label="<FileCard/>" />
+ <FormControlLabel
+ value="FileMosaic"
+ control={<Radio />}
+ label={withInput ? "<FileMosaic/> & <Dropzone/>" : "<FileMosaic/>"}
+ />
+ <FormControlLabel
+ value="FileCard"
+ control={<Radio />}
+ label={withInput ? "<FileCard/> & <FileCard/>" : "<FileCard/>"}
+ />
</RadioGroup>
</FormControl>
);
diff --git a/src/pages/demo/FileMosaicDemoPage.jsx b/src/pages/demo/FileMosaicDemoPage.jsx
index d7f159e..2da04ad 100644
--- a/src/pages/demo/FileMosaicDemoPage.jsx
+++ b/src/pages/demo/FileMosaicDemoPage.jsx
@@ -355,71 +355,6 @@ const FileMosaicDemoPage = (props) => {
<CodeJSFileMosaicSmartImgFit />
</section>
- {/* <section id="localization">
- <SubTitle content="Localization" />
- <DescParagraph>
- The <CodeHighlight>FileMosaic</CodeHighlight> component has
- multilanguage support. You can change the language in wich labels
- are displayed by setting the{" "}
- <CodeHighlight>{"localization"}</CodeHighlight> prop. So far only
- the following languages are supported:
- <ul>
- {[
- "English",
- "Spanish",
- "French",
- "Italian",
- "Portuguese",
- "Russian",
- "Chinnese (simplified)",
- "Chinnese (traditional)",
- ].map((x) => (
- <li>
- <TypeHighlight>{x}</TypeHighlight>
- </li>
- ))}
- </ul>
- </DescParagraph>
-
- <Paper
- variant="outlined"
- style={{
- padding: "25px",
- display: "flex",
- alignItems: "center",
- justifyContent: "center",
- flexDirection: "column",
- gap: "20px",
- }}
- >
- <DemoFileMosaicLocalization />
- </Paper>
- <CodeJSFileMosaicLocalization />
- </section> */}
-
- {/* <section id="file-icon">
- <SubTitle content="File Icons (extensive list)" />
- <DescParagraph>
- The <CodeHighlight>FileMosaic</CodeHighlight> component supports
- several file types to properly set a file icon. The complete list of
- file icons is the following:
- </DescParagraph>
- <Paper
- variant="outlined"
- style={{
- padding: "25px 0",
- display: "flex",
- alignItems: "center",
- justifyContent: "center",
- //flexDirection: "column",
- gap: "10px",
- flexWrap: "wrap",
- }}
- >
- <DemoFileMosaicFileIcons />
- </Paper>
- </section> */}
-
<section id="api">
<SubTitle content="API" />
<DescParagraph>
diff --git a/src/pages/localization/LocalizationPage.jsx b/src/pages/localization/LocalizationPage.jsx
new file mode 100644
index 0000000..35c82b1
--- /dev/null
+++ b/src/pages/localization/LocalizationPage.jsx
@@ -0,0 +1,98 @@
+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";
+import TypeHighlight from "../../components/typeHighlight/TypeHighlight";
+import DemoFileMosaicLocalization from "../../components/demo-components/filemosaic-demo/DemoFileMosaicLocalization";
+import CodeJSFileMosaicLocalization from "../../components/demo-components/filemosaic-demo/CodeJSFileMosaicLocalization";
+
+const LocalizationPage = (props) => {
+ const [component, setComponent] = React.useState("FileMosaic");
+ const handleChangeComponent = (newVal) => {
+ setComponent(newVal);
+ };
+ return (
+ <React.Fragment>
+ <MainLayoutPage selectedIndex={5}>
+ <MainContentContainer>
+ <MainTitle>Localization</MainTitle>
+ <MainParagraph>
+ Localization (also referred to as "l10n") is the process of adapting
+ a product or content to a specific locale or market.
+ <br />
+ The default locale of Files UI is English. If you want to use other
+ locales, follow the instructions below.
+ </MainParagraph>
+
+ <section id="locale-text">
+ <SubTitle content="Locale texts" />
+ <DescParagraph>
+ Files UI components have multilanguage support. You can change the
+ language in wich labels are displayed by setting the{" "}
+ <CodeHighlight>{"localization"}</CodeHighlight> prop. So far only
+ the following languages are supported:
+ <ul>
+ {[
+ "English",
+ "Spanish",
+ "French",
+ "Italian",
+ "Portuguese",
+ "Russian",
+ "Chinnese (simplified)",
+ "Chinnese (traditional)",
+ ].map((x) => (
+ <li>
+ <TypeHighlight>{x}</TypeHighlight>
+ </li>
+ ))}
+ </ul>
+ </DescParagraph>
+ <FileCardMosaicSwitch
+ value={component}
+ onChange={handleChangeComponent}
+ withInput
+ />
+ <Paper
+ variant="outlined"
+ style={{
+ padding: "25px",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ flexDirection: "column",
+ gap: "20px",
+ }}
+ >
+ <DemoFileMosaicLocalization card={component === "FileCard"} />
+ </Paper>
+ <CodeJSFileMosaicLocalization card={component === "FileCard"} />
+ </section>
+
+ <RightMenuContainer>
+ <RightMenu width="240px" items={rightMenuItems} />
+ </RightMenuContainer>
+ </MainContentContainer>
+ </MainLayoutPage>
+ </React.Fragment>
+ );
+};
+export default LocalizationPage;
+
+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 fc2ad2f..aa86392 100644
--- a/src/routes/MainRouter.jsx
+++ b/src/routes/MainRouter.jsx
@@ -22,6 +22,7 @@ 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";
+import LocalizationPage from "../pages/localization/LocalizationPage";
const router = createBrowserRouter([
{
@@ -105,6 +106,10 @@ const router = createBrowserRouter([
path: "/file-icons",
element: <FileIconsPage />,
},
+ {
+ path: "/localization",
+ element: <LocalizationPage />,
+ },
{
path: "/server-side",
element: <ServerSidePage />,
--
GitLab