diff --git a/src/components/demo-components/dropzone-demo/BasicDropzoneCodeJS.jsx b/src/components/demo-components/dropzone-demo/BasicDropzoneCodeJS.jsx
index 045631246e12bc1f8fde1d505820be829ed98c7e..b2da92a5ff0372fd480735eb73b7d588b9c3f3c8 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 dc7b44ca2674e6e26f2c5d64376303f4c84b0639..b5398a405ee776a870bfee9a3c5f65cb0af84c03 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 74582e7267be6d9caef15e0218053cfaf8c894b1..d642dc486db8f953cced56afc2bc6cef10d0929d 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 0000000000000000000000000000000000000000..4961c500c97d7ee7c9b7acb5dd70aaf59f36aafe
--- /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 9da2c233d571302c875604e93cff18aa05f6aa88..8c2180149ac5653ce24527a1bda1ea17f0b13abc 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 35c82b1f33c719458865a50e7dc19461f0070da6..33c7ec28297f4cd110b807d53f725c163af2314b 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",