From 4ed6bc89d8a3c7c0d20fb8555789993d5ece0f85 Mon Sep 17 00:00:00 2001
From: Jose Manuel Serrano Amaut <a20122128@pucp.pe>
Date: Mon, 13 Mar 2023 00:08:58 -0500
Subject: [PATCH] [WIP]: Add localization page completed. Missing to refactor
FileCard and FIleMosaic to display info layer with localization. Also missing
Avatar for localization
---
.../filemosaic-demo/DemoLocalization.scss | 41 -----
.../CodeJSFileMosaicLocalization.jsx | 146 ++++++++++++------
.../DemoFileMosaicLocalization.tsx | 18 +--
.../localization/DemoLocalization.css | 43 ++++++
src/pages/demo/FileMosaicDemoPage.jsx | 4 +-
src/pages/localization/LocalizationPage.jsx | 17 +-
6 files changed, 159 insertions(+), 110 deletions(-)
delete mode 100644 src/components/demo-components/filemosaic-demo/DemoLocalization.scss
rename src/components/demo-components/{filemosaic-demo => localization}/CodeJSFileMosaicLocalization.jsx (64%)
rename src/components/demo-components/{filemosaic-demo => localization}/DemoFileMosaicLocalization.tsx (89%)
create mode 100644 src/components/demo-components/localization/DemoLocalization.css
diff --git a/src/components/demo-components/filemosaic-demo/DemoLocalization.scss b/src/components/demo-components/filemosaic-demo/DemoLocalization.scss
deleted file mode 100644
index 4961c50..0000000
--- a/src/components/demo-components/filemosaic-demo/DemoLocalization.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-.demo-localization-container-dz-fm {
- display: flex;
- align-items: center;
- justify-content: center;
- gap: 10px;
-
- .demo-localization-item {
- width: 50%;
- display: flex;
- align-items: center;
- justify-content: center;
- flex-wrap: wrap;
- gap: 1px;
- }
- @media (max-width: 960px) {
- flex-direction: column;
- .demo-localization-item {
- width: 100%;
- }
- }
-}
-
-.demo-localization-container-fib-fc {
- display: flex;
- align-items: center;
- flex-direction: column;
- justify-content: center;
- .demo-localization-item {
- width: 50%;
- display: flex;
- align-items: center;
- justify-content: center;
- flex-wrap: wrap;
- gap: 1px;
- }
- @media (max-width: 960px) {
- .demo-localization-item {
- width: 100%;
- }
- }
-}
diff --git a/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicLocalization.jsx b/src/components/demo-components/localization/CodeJSFileMosaicLocalization.jsx
similarity index 64%
rename from src/components/demo-components/filemosaic-demo/CodeJSFileMosaicLocalization.jsx
rename to src/components/demo-components/localization/CodeJSFileMosaicLocalization.jsx
index a4d570d..0f44544 100644
--- a/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicLocalization.jsx
+++ b/src/components/demo-components/localization/CodeJSFileMosaicLocalization.jsx
@@ -1,11 +1,11 @@
import * as React from "react";
import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
-const CodeJSFileMosaicLocalization = (props) => {
+const CodeJSFileMosaicLocalization = ({ card }) => {
return (
<ShowDemoCode
- codeCompleteJS={completeCodeJS}
- codeCompleteTS={completeCodeTS}
+ codeCompleteJS={completeCodeJS(card)}
+ codeCompleteTS={completeCodeTS(card)}
codeSandboxJS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
codeSandboxTS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
codeSplittedJS={splittedCodeJS}
@@ -18,18 +18,18 @@ export default CodeJSFileMosaicLocalization;
const splittedCodeJS = ``;
const splittedCodeTS = ``;
-
-const completeCodeJS = `import * as React from "react";
-import { FileMosaic } from "@files-ui/react";
+const completeCodeJS = (card) => `import * as React from "react";
+import { ${card ? "FileCard" : `FileMosaic`} } from "@files-ui/react";
+import "./styles.css";
import { Autocomplete, TextField } from "@mui/material";
-const DemoFileMosaicLocalization = () => {
+const App = () => {
const [localization, setLocalization] = React.useState(undefined);
const hadleSelect = (value) => {
console.log(value);
setLocalization(value?.value);
- };
+ };
return (
<>
<Autocomplete
@@ -43,25 +43,48 @@ const DemoFileMosaicLocalization = () => {
getOptionLabel={(option) => option.language}
renderInput={(params) => <TextField {...params} label="Localization" />}
/>
- <div
- style={{
- display: "flex",
- flexWrap: "wrap",
- justifyContent: "space-evenly",
- width: "100%",
- gap: "50px",
- }}
- >
- {extFiles.map((extFile, index) => (
- <FileMosaic
- key={index}
- {...extFile}
+ ${
+ !card
+ ? `<div className="demo-localization-container">
+ <div className="dropzone-filemosaic-container">
+ <Dropzone
+ accept={"image/*"}
+ maxFileSize={28 * 1024 * 1024}
+ maxFiles={10}
+ localization={localization}
+ ></Dropzone>
+ </div>
+ <div className="dropzone-filemosaic-container">
+ {extFiles.map((extFile, index) => (
+ <FileMosaic
+ key={index}
+ {...extFile}
+ localization={localization}
+ onDelete={() => {}}
+ info
+ />
+ ))}
+ </div>
+ </div>`
+ : `<div className="demo-localization-container">
+ <div className="inputbutton-container">
+ <FileInputButton
localization={localization}
- onDelete={() => {}}
- info
- />
- ))}
- </div>
+ ></FileInputButton>
+ </div>
+ <div className="filecard-container">
+ {extFiles.map((extFile, index) => (
+ <FileCard
+ key={index}
+ {...extFile}
+ localization={localization}
+ onDelete={() => {}}
+ info
+ />
+ ))}
+ </div>
+ </div>`
+ }
</>
);
};
@@ -88,7 +111,6 @@ const extFiles = [
id: 1,
valid: false,
name: "file_localization.docx",
-
size: 28 * 1024,
errors: ["pdf not allowed", "file is too big"],
},
@@ -138,11 +160,14 @@ const extFiles = [
},
];`;
-const completeCodeTS = `import * as React from "react";
-import { ExtFile, FileMosaic, Localization } from "@files-ui/react";
+const completeCodeTS = (card) => `import * as React from "react";
+import { ExtFile, ${
+ card ? "FileCard" : `FileMosaic`
+}, Localization } from "@files-ui/react";
+import "./styles.css";
import { Autocomplete, TextField } from "@mui/material";
-const DemoFileMosaicLocalization = () => {
+const App = () => {
const [localization, setLocalization] = React.useState<
Localization | undefined
>(undefined);
@@ -150,7 +175,7 @@ const DemoFileMosaicLocalization = () => {
const hadleSelect = (value: LanguageItem | null) => {
console.log(value);
setLocalization(value?.value);
- };
+ };
return (
<>
@@ -165,25 +190,48 @@ const DemoFileMosaicLocalization = () => {
getOptionLabel={(option) => option.language}
renderInput={(params) => <TextField {...params} label="Localization" />}
/>
- <div
- style={{
- display: "flex",
- flexWrap: "wrap",
- justifyContent: "space-evenly",
- width: "100%",
- gap: "50px",
- }}
- >
- {extFiles.map((extFile, index) => (
- <FileMosaic
- key={index}
- {...extFile}
+ ${
+ !card
+ ? `<div className="demo-localization-container">
+ <div className="dropzone-filemosaic-container">
+ <Dropzone
+ accept={"image/*"}
+ maxFileSize={28 * 1024 * 1024}
+ maxFiles={10}
+ localization={localization}
+ ></Dropzone>
+ </div>
+ <div className="dropzone-filemosaic-container">
+ {extFiles.map((extFile, index) => (
+ <FileMosaic
+ key={index}
+ {...extFile}
+ localization={localization}
+ onDelete={() => {}}
+ info
+ />
+ ))}
+ </div>
+ </div>`
+ : `<div className="demo-localization-container">
+ <div className="inputbutton-container">
+ <FileInputButton
localization={localization}
- onDelete={() => {}}
- info
- />
- ))}
- </div>
+ ></FileInputButton>
+ </div>
+ <div className="filecard-container">
+ {extFiles.map((extFile, index) => (
+ <FileCard
+ key={index}
+ {...extFile}
+ localization={localization}
+ onDelete={() => {}}
+ info
+ />
+ ))}
+ </div>
+ </div>`
+ }
</>
);
};
diff --git a/src/components/demo-components/filemosaic-demo/DemoFileMosaicLocalization.tsx b/src/components/demo-components/localization/DemoFileMosaicLocalization.tsx
similarity index 89%
rename from src/components/demo-components/filemosaic-demo/DemoFileMosaicLocalization.tsx
rename to src/components/demo-components/localization/DemoFileMosaicLocalization.tsx
index d642dc4..97ee724 100644
--- a/src/components/demo-components/filemosaic-demo/DemoFileMosaicLocalization.tsx
+++ b/src/components/demo-components/localization/DemoFileMosaicLocalization.tsx
@@ -8,7 +8,7 @@ import {
FileCard,
} from "../../../files-ui";
import { Autocomplete, TextField } from "@mui/material";
-import "./DemoLocalization.scss";
+import "./DemoLocalization.css";
const DemoFileMosaicLocalization = (props: { card: boolean }) => {
const [localization, setLocalization] = React.useState<
Localization | undefined
@@ -32,8 +32,8 @@ const DemoFileMosaicLocalization = (props: { card: boolean }) => {
renderInput={(params) => <TextField {...params} label="Localization" />}
/>
{props.card ? (
- <div className="demo-localization-container-dz-fm">
- <div className="demo-localization-item">
+ <div className="demo-localization-container">
+ <div className="inputbutton-container">
<FileInputButton
//style={{ width: "400px" }}
value={[]}
@@ -41,7 +41,7 @@ const DemoFileMosaicLocalization = (props: { card: boolean }) => {
></FileInputButton>
</div>
- <div className="demo-localization-item">
+ <div className="filecard-container">
{extFiles.map((extFile, index) => (
<FileCard
key={index}
@@ -54,19 +54,19 @@ const DemoFileMosaicLocalization = (props: { card: boolean }) => {
</div>
</div>
) : (
- <div className="demo-localization-container-dz-fm">
- <div className="demo-localization-item">
+ <div className="demo-localization-container">
+ <div className="dropzone-filemosaic-container">
<Dropzone
- value={extFiles}
+ //value={[]}
accept={"image/*"}
- maxFileSize={28*1024*1024}
+ maxFileSize={28 * 1024 * 1024}
maxFiles={10}
//style={{ width: "400px" }}
localization={localization}
></Dropzone>
</div>
- <div className="demo-localization-item">
+ <div className="dropzone-filemosaic-container">
{extFiles.map((extFile, index) => (
<FileMosaic
key={index}
diff --git a/src/components/demo-components/localization/DemoLocalization.css b/src/components/demo-components/localization/DemoLocalization.css
new file mode 100644
index 0000000..e0ec24b
--- /dev/null
+++ b/src/components/demo-components/localization/DemoLocalization.css
@@ -0,0 +1,43 @@
+.demo-localization-container {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 10px;
+ min-height: 50vh;
+}
+
+.dropzone-filemosaic-container {
+ width: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-wrap: wrap;
+ gap: 1px;
+}
+
+.inputbutton-container {
+ width: 100px;
+}
+
+.filecard-container {
+ gap: 10px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-wrap: wrap;
+}
+
+@media (max-width: 960px) {
+ .demo-localization-container {
+ flex-direction: column;
+ }
+
+ .dropzone-filemosaic-container {
+ width: 100%;
+ }
+
+ .filecard-container {
+ width: 100%;
+ flex-direction: column;
+ }
+}
\ No newline at end of file
diff --git a/src/pages/demo/FileMosaicDemoPage.jsx b/src/pages/demo/FileMosaicDemoPage.jsx
index 2da04ad..a98c7b2 100644
--- a/src/pages/demo/FileMosaicDemoPage.jsx
+++ b/src/pages/demo/FileMosaicDemoPage.jsx
@@ -20,8 +20,8 @@ import CodeJSFileMosaicValidation from "../../components/demo-components/filemos
import DemoFileMosaicValidation from "../../components/demo-components/filemosaic-demo/DemoFileMosaicValidation";
import CodeJSFileMosaicUploadStatus from "../../components/demo-components/filemosaic-demo/CodeJSFileMosaicUploadStatus";
import DemoFileMosaicUploadStatus from "../../components/demo-components/filemosaic-demo/DemoFileMosaicUploadStatus";
-import DemoFileMosaicLocalization from "../../components/demo-components/filemosaic-demo/DemoFileMosaicLocalization";
-import CodeJSFileMosaicLocalization from "../../components/demo-components/filemosaic-demo/CodeJSFileMosaicLocalization";
+import DemoFileMosaicLocalization from "../../components/demo-components/localization/DemoFileMosaicLocalization";
+import CodeJSFileMosaicLocalization from "../../components/demo-components/localization/CodeJSFileMosaicLocalization";
import DemoFileMosaicDarkMode from "../../components/demo-components/filemosaic-demo/DemoFileMosaicDarkMode";
import CodeJSFileMosaicDarkMode from "../../components/demo-components/filemosaic-demo/CodeJSFileMosaicDarkMode";
import DemoFileMosaicFileIcons from "../../components/demo-components/filemosaic-demo/DemoFileMosaicFileIcons";
diff --git a/src/pages/localization/LocalizationPage.jsx b/src/pages/localization/LocalizationPage.jsx
index 33c7ec2..730aa0b 100644
--- a/src/pages/localization/LocalizationPage.jsx
+++ b/src/pages/localization/LocalizationPage.jsx
@@ -8,13 +8,12 @@ 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 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";
+import DemoFileMosaicLocalization from "../../components/demo-components/localization/DemoFileMosaicLocalization";
+import CodeJSFileMosaicLocalization from "../../components/demo-components/localization/CodeJSFileMosaicLocalization";
const LocalizationPage = (props) => {
const [component, setComponent] = React.useState("FileMosaic");
@@ -34,11 +33,11 @@ const LocalizationPage = (props) => {
locales, follow the instructions below.
</MainParagraph>
- <section id="locale-text">
+ <section id="locale-texts">
<SubTitle content="Locale texts" />
<DescParagraph>
Files UI components have multilanguage support. You can change the
- language in wich labels are displayed by setting the{" "}
+ language in wich the labels are displayed by setting the{" "}
<CodeHighlight>{"localization"}</CodeHighlight> prop. So far only
the following languages are supported:
<ul>
@@ -53,7 +52,7 @@ const LocalizationPage = (props) => {
"Chinnese (traditional)",
].map((x) => (
<li>
- <TypeHighlight>{x}</TypeHighlight>
+ <TypeHighlight key={x}>{x}</TypeHighlight>
</li>
))}
</ul>
@@ -93,7 +92,7 @@ export default LocalizationPage;
const rightMenuItems = [
{
id: 0,
- label: "Complete list",
- referTo: "/file-icons#complete-list",
+ label: "Locale texts",
+ referTo: "/file-icons#locale-texts",
},
];
--
GitLab