Skip to content
Snippets Groups Projects
Commit ab6b75cd authored by Jose Manuel Serrano Amaut's avatar Jose Manuel Serrano Amaut
Browse files

[WIP]: Refactor localization demo page. Missing to update info layer with...

[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
parent c3729ff1
Branches
No related tags found
No related merge requests found
......@@ -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";
......
......@@ -12,20 +12,10 @@ export default function BasicDemoDropzone() {
setFiles(files.filter((x) => x.id !== id));
};
return (
<Dropzone
//style={{ minWidth: "505px" }}
onChange={updateFiles}
value={files}
>
<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>
);
......
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,44 +31,42 @@ 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"
}}
>
{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 className="demo-localization-container-dz-fm">
<div className="demo-localization-item">
<Dropzone
/* style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
flexGrow: 1,
}} */
value={extFiles}
accept={"image/*"}
maxFileSize={28*1024*1024}
maxFiles={10}
//style={{ width: "400px" }}
localization={localization}
></Dropzone>
</div>
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
flexGrow: 1,
flexWrap:"wrap"
}}
>
<div className="demo-localization-item">
{extFiles.map((extFile, index) => (
<FileMosaic
key={index}
......@@ -74,6 +78,7 @@ const DemoFileMosaicLocalization = (props: { card: boolean }) => {
))}
</div>
</div>
)}
</>
);
};
......
.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%;
}
}
}
......@@ -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"
......
......@@ -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",
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment