From ab6b75cd93764cd51c2387c907942938150dc092 Mon Sep 17 00:00:00 2001
From: Jose Manuel Serrano Amaut <a20122128@pucp.pe>
Date: Sat, 11 Mar 2023 23:48:49 -0500
Subject: [PATCH] [WIP]: Refactor localization demo page. Missing to update
info layer with localization. Also there is an issue when value is not given
to Dropzone component
---
.../dropzone-demo/BasicDropzoneCodeJS.jsx | 6 +-
.../dropzone-demo/BasicDropzoneDemo.jsx | 16 +--
.../DemoFileMosaicLocalization.tsx | 103 +++++++++---------
.../filemosaic-demo/DemoLocalization.scss | 41 +++++++
.../switch/FileCardMosaicSwitch.jsx | 3 +-
src/pages/localization/LocalizationPage.jsx | 3 +-
6 files changed, 104 insertions(+), 68 deletions(-)
create mode 100644 src/components/demo-components/filemosaic-demo/DemoLocalization.scss
diff --git a/src/components/demo-components/dropzone-demo/BasicDropzoneCodeJS.jsx b/src/components/demo-components/dropzone-demo/BasicDropzoneCodeJS.jsx
index 0456312..b2da92a 100644
--- a/src/components/demo-components/dropzone-demo/BasicDropzoneCodeJS.jsx
+++ b/src/components/demo-components/dropzone-demo/BasicDropzoneCodeJS.jsx
@@ -15,23 +15,21 @@ const BasicDropzoneCode = ({ splittedOnly = false }) => {
export default BasicDropzoneCode;
const splittedCodeJS = `<Dropzone
- style={{ minWidth: "505px" }}
onChange={updateFiles}
value={files}
>
{files.length > 0 &&
files.map((file) => (
- <FileMosaic key={file.id} {...file} onDelete={removeFile} info alwaysActive/>
+ <FileMosaic key={file.id} {...file} onDelete={removeFile} info/>
))}
</Dropzone>`;
const splittedCodeTS = `<Dropzone
- style={{ minWidth: "505px" }}
onChange={updateFiles}
value={files}
>
{files.length > 0 &&
files.map((file: ExtFile) => (
- <FileMosaic key={file.id} {...file} onDelete={removeFile} info={true} alwaysActive={true}/>
+ <FileMosaic key={file.id} {...file} onDelete={removeFile} info={true}/>
))}
</Dropzone>`;
const completeCodeJS = `import { Dropzone,FileMosaic } from "@files-ui/react";
diff --git a/src/components/demo-components/dropzone-demo/BasicDropzoneDemo.jsx b/src/components/demo-components/dropzone-demo/BasicDropzoneDemo.jsx
index dc7b44c..b5398a4 100644
--- a/src/components/demo-components/dropzone-demo/BasicDropzoneDemo.jsx
+++ b/src/components/demo-components/dropzone-demo/BasicDropzoneDemo.jsx
@@ -11,21 +11,11 @@ export default function BasicDemoDropzone() {
const removeFile = (id) => {
setFiles(files.filter((x) => x.id !== id));
};
- return (
- <Dropzone
- //style={{ minWidth: "505px" }}
- onChange={updateFiles}
- value={files}
- >
+ return (
+ <Dropzone onChange={updateFiles} value={files}>
{files.length > 0 &&
files.map((file) => (
- <FileMosaic
- key={file.id}
- {...file}
- onDelete={removeFile}
- info
- alwaysActive
- />
+ <FileMosaic key={file.id} {...file} onDelete={removeFile} info />
))}
</Dropzone>
);
diff --git a/src/components/demo-components/filemosaic-demo/DemoFileMosaicLocalization.tsx b/src/components/demo-components/filemosaic-demo/DemoFileMosaicLocalization.tsx
index 74582e7..d642dc4 100644
--- a/src/components/demo-components/filemosaic-demo/DemoFileMosaicLocalization.tsx
+++ b/src/components/demo-components/filemosaic-demo/DemoFileMosaicLocalization.tsx
@@ -1,7 +1,14 @@
import * as React from "react";
-import { Dropzone, ExtFile, FileMosaic, Localization } from "../../../files-ui";
+import {
+ Dropzone,
+ ExtFile,
+ FileMosaic,
+ Localization,
+ FileInputButton,
+ FileCard,
+} from "../../../files-ui";
import { Autocomplete, TextField } from "@mui/material";
-
+import "./DemoLocalization.scss";
const DemoFileMosaicLocalization = (props: { card: boolean }) => {
const [localization, setLocalization] = React.useState<
Localization | undefined
@@ -11,7 +18,6 @@ const DemoFileMosaicLocalization = (props: { card: boolean }) => {
console.log(value);
setLocalization(value?.value);
};
- if (props.card) return <></>;
return (
<>
<Autocomplete
@@ -25,55 +31,54 @@ const DemoFileMosaicLocalization = (props: { card: boolean }) => {
getOptionLabel={(option) => option.language}
renderInput={(params) => <TextField {...params} label="Localization" />}
/>
- <div
- style={{
- display: "flex",
- flexWrap: "wrap",
- justifyContent: "center",
- width: "100%",
- gap: "50px",
- }}
- >
- <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>
+ {props.card ? (
+ <div className="demo-localization-container-dz-fm">
+ <div className="demo-localization-item">
+ <FileInputButton
+ //style={{ width: "400px" }}
+ value={[]}
+ localization={localization}
+ ></FileInputButton>
+ </div>
+
+ <div className="demo-localization-item">
+ {extFiles.map((extFile, index) => (
+ <FileCard
+ key={index}
+ {...extFile}
+ localization={localization}
+ onDelete={() => {}}
+ info
+ />
+ ))}
+ </div>
</div>
-
- <div
- style={{
- display: "flex",
- justifyContent: "center",
- alignItems: "center",
- flexGrow: 1,
- flexWrap:"wrap"
- }}
- >
- {extFiles.map((extFile, index) => (
- <FileMosaic
- key={index}
- {...extFile}
+ ) : (
+ <div className="demo-localization-container-dz-fm">
+ <div className="demo-localization-item">
+ <Dropzone
+ value={extFiles}
+ accept={"image/*"}
+ maxFileSize={28*1024*1024}
+ maxFiles={10}
+ //style={{ width: "400px" }}
localization={localization}
- onDelete={() => {}}
- info
- />
- ))}
+ ></Dropzone>
+ </div>
+
+ <div className="demo-localization-item">
+ {extFiles.map((extFile, index) => (
+ <FileMosaic
+ key={index}
+ {...extFile}
+ localization={localization}
+ onDelete={() => {}}
+ info
+ />
+ ))}
+ </div>
</div>
- </div>
+ )}
</>
);
};
diff --git a/src/components/demo-components/filemosaic-demo/DemoLocalization.scss b/src/components/demo-components/filemosaic-demo/DemoLocalization.scss
new file mode 100644
index 0000000..4961c50
--- /dev/null
+++ b/src/components/demo-components/filemosaic-demo/DemoLocalization.scss
@@ -0,0 +1,41 @@
+.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/switch/FileCardMosaicSwitch.jsx b/src/components/switch/FileCardMosaicSwitch.jsx
index 9da2c23..8c21801 100644
--- a/src/components/switch/FileCardMosaicSwitch.jsx
+++ b/src/components/switch/FileCardMosaicSwitch.jsx
@@ -9,6 +9,7 @@ export default function FileCardMosaicSwitch({
value,
onChange,
withInput = false,
+ row = false,
}) {
//const [value, setValue] = React.useState('female');
@@ -25,7 +26,7 @@ export default function FileCardMosaicSwitch({
name="controlled-radio-buttons-group"
value={value}
onChange={handleChange}
- row="horizontal"
+ row={row ? undefined : "horizontal"}
>
<FormControlLabel
value="FileMosaic"
diff --git a/src/pages/localization/LocalizationPage.jsx b/src/pages/localization/LocalizationPage.jsx
index 35c82b1..33c7ec2 100644
--- a/src/pages/localization/LocalizationPage.jsx
+++ b/src/pages/localization/LocalizationPage.jsx
@@ -62,11 +62,12 @@ const LocalizationPage = (props) => {
value={component}
onChange={handleChangeComponent}
withInput
+ row
/>
<Paper
variant="outlined"
style={{
- padding: "25px",
+ padding: "25px 10px",
display: "flex",
alignItems: "center",
justifyContent: "center",
--
GitLab