diff --git a/src/components/MainMenu/MainMenuSideBar.tsx b/src/components/MainMenu/MainMenuSideBar.tsx
index a7bf661944c2cb30e795e3bfc943cf8fe76dfd7b..1545db25cd2d757e49501c3c8a1ccf7607fd951d 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/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/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 a4d570d98170ed6cfeb3917a65597e1776ea5f9b..0f44544e576f17277926417f0edbace0840b9091 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 59%
rename from src/components/demo-components/filemosaic-demo/DemoFileMosaicLocalization.tsx
rename to src/components/demo-components/localization/DemoFileMosaicLocalization.tsx
index 6354a3d637a5e50fd7009958a3ae2802f32c7651..97ee72424c23150e83a4f069a42906d0d4e4e130 100644
--- a/src/components/demo-components/filemosaic-demo/DemoFileMosaicLocalization.tsx
+++ b/src/components/demo-components/localization/DemoFileMosaicLocalization.tsx
@@ -1,8 +1,15 @@
import * as React from "react";
-import { ExtFile, FileMosaic, Localization } from "../../../files-ui";
+import {
+ Dropzone,
+ ExtFile,
+ FileMosaic,
+ Localization,
+ FileInputButton,
+ FileCard,
+} from "../../../files-ui";
import { Autocomplete, TextField } from "@mui/material";
-
-const DemoFileMosaicLocalization = () => {
+import "./DemoLocalization.css";
+const DemoFileMosaicLocalization = (props: { card: boolean }) => {
const [localization, setLocalization] = React.useState<
Localization | undefined
>(undefined);
@@ -11,7 +18,6 @@ const DemoFileMosaicLocalization = () => {
console.log(value);
setLocalization(value?.value);
};
-
return (
<>
<Autocomplete
@@ -25,25 +31,54 @@ 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}
- localization={localization}
- onDelete={() => {}}
- info
- />
- ))}
- </div>
+ {props.card ? (
+ <div className="demo-localization-container">
+ <div className="inputbutton-container">
+ <FileInputButton
+ //style={{ width: "400px" }}
+ value={[]}
+ localization={localization}
+ ></FileInputButton>
+ </div>
+
+ <div className="filecard-container">
+ {extFiles.map((extFile, index) => (
+ <FileCard
+ key={index}
+ {...extFile}
+ localization={localization}
+ onDelete={() => {}}
+ info
+ />
+ ))}
+ </div>
+ </div>
+ ) : (
+ <div className="demo-localization-container">
+ <div className="dropzone-filemosaic-container">
+ <Dropzone
+ //value={[]}
+ accept={"image/*"}
+ maxFileSize={28 * 1024 * 1024}
+ maxFiles={10}
+ //style={{ width: "400px" }}
+ localization={localization}
+ ></Dropzone>
+ </div>
+
+ <div className="dropzone-filemosaic-container">
+ {extFiles.map((extFile, index) => (
+ <FileMosaic
+ key={index}
+ {...extFile}
+ localization={localization}
+ onDelete={() => {}}
+ info
+ />
+ ))}
+ </div>
+ </div>
+ )}
</>
);
};
diff --git a/src/components/demo-components/localization/DemoLocalization.css b/src/components/demo-components/localization/DemoLocalization.css
new file mode 100644
index 0000000000000000000000000000000000000000..e0ec24b80d681bd778d5d41f611346508d99e696
--- /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/components/switch/FileCardMosaicSwitch.jsx b/src/components/switch/FileCardMosaicSwitch.jsx
index 84b714f007ee70bd0f2d22295fb77a9059794ee1..8c2180149ac5653ce24527a1bda1ea17f0b13abc 100644
--- a/src/components/switch/FileCardMosaicSwitch.jsx
+++ b/src/components/switch/FileCardMosaicSwitch.jsx
@@ -1,16 +1,21 @@
-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,
+ row = false,
+}) {
//const [value, setValue] = React.useState('female');
const handleChange = (event) => {
//setValue(event.target.value);
- onChange?.(event.target.value)
+ onChange?.(event.target.value);
};
return (
@@ -21,10 +26,18 @@ export default function FileCardMosaicSwitch({value, onChange}) {
name="controlled-radio-buttons-group"
value={value}
onChange={handleChange}
- row="horizontal"
+ row={row ? undefined : "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/files-ui/components/dropzone/components/dropzone/Dropzone.tsx b/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx
index a5d4d61d8020e9988430ea89678c804e6dafddd2..7ff135c6dc25a4dc345b8e7d614c993d2e93b790 100644
--- a/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx
+++ b/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx
@@ -91,6 +91,7 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
...rest
} = mergeProps(props, defaultDrozoneProps);
console.log("Dropzone props", children);
+ console.log("Dropzone value", value);
const {
url,
method,
diff --git a/src/files-ui/components/dropzone/components/dropzone/DropzoneProps.ts b/src/files-ui/components/dropzone/components/dropzone/DropzoneProps.ts
index 030c70a65a68f25d0aecdbc71d53da375e31d4a8..bba187d8ece51787e9865ca9a54691ae258267e3 100644
--- a/src/files-ui/components/dropzone/components/dropzone/DropzoneProps.ts
+++ b/src/files-ui/components/dropzone/components/dropzone/DropzoneProps.ts
@@ -287,10 +287,10 @@ export type DropzoneAdvancedConfig = {
type DefDivProps = React.HTMLProps<HTMLDivElement>;
-type DivPropsOmitInputButtonFullProps = Omit<DefDivProps, keyof DropzoneFullProps>;
+type DivPropsOmitDropzoneFullProps = Omit<DefDivProps, keyof DropzoneFullProps>;
export declare type DropzoneProps =
-DivPropsOmitInputButtonFullProps &
+ DivPropsOmitDropzoneFullProps &
{
[D in keyof DropzoneFullProps]: DropzoneFullProps[D]
}
@@ -305,5 +305,6 @@ export const defaultDrozoneProps: DropzoneProps =
uploadConfig: {},
actionButtons: {},
header: true,
- footer: true
+ footer: true,
+ value: [],
}
\ No newline at end of file
diff --git a/src/files-ui/components/file-card/components/FileCardInfoLayer.tsx b/src/files-ui/components/file-card/components/FileCardInfoLayer.tsx
index 823437c92e429479beb2ec5598ac138bcac3dd7e..4a36ce738f497d2e003ded6c8fdc5456314206df 100644
--- a/src/files-ui/components/file-card/components/FileCardInfoLayer.tsx
+++ b/src/files-ui/components/file-card/components/FileCardInfoLayer.tsx
@@ -1,4 +1,5 @@
import * as React from "react";
+import { FileItemLocalizerSelector, LocalLabels } from "../../../core";
import { FileMosaicInfoLayerProps } from "../../file-mosaic/components/FileMosaicInfoLayer/FileMosaicInfoLayerProps";
import FileMosaicStatus from "../../file-mosaic/components/FileMosaicStatus/FileMosaicStatus";
import { Cancel } from "../../icons";
@@ -15,25 +16,27 @@ const FileCardInfoLayer: React.FC<FileCardInfoLayerProps> = (
sizeFormatted,
localType,
} = props;
+ const FileItemLocalizer: LocalLabels =
+ FileItemLocalizerSelector(localization);
+
+ const {
+ name: nameLabel,
+ size: sizeLabel,
+ type: typeLabel,
+ } = FileItemLocalizer.fullInfoLayer as LocalLabels;
return (
<div className="file-card-file-info">
- {/* <FileMosaicStatus
- style={{ margin: 0, right: 5, bottom: 0, position:"absolute" }}
- valid={valid}
- uploadStatus={uploadStatus}
- localization={localization}
- /> */}
- <Cancel
- style={{ margin: 0, right: 5, top: 0, position:"absolute" }}
- color="rgba(255,255,255,0.8)"
- onClick={onCloseInfo}
- colorFill="black"
- />
- <div className="heading">Name:</div>
+ <Cancel
+ style={{ margin: 0, right: 5, top: 0, position: "absolute" }}
+ color="rgba(255,255,255,0.8)"
+ onClick={onCloseInfo}
+ colorFill="black"
+ />
+ <div className="heading">{nameLabel as string}</div>
<div className="label">{localName}</div>
- <div className="heading">Size:</div>
+ <div className="heading">{sizeLabel as string}</div>
<div className="label">{sizeFormatted}</div>
- <div className="heading">Type:</div>
+ <div className="heading">{typeLabel as string}</div>
<div className="label">{localType}</div>
</div>
);
diff --git a/src/files-ui/components/file-input-button/InputButtonProps.ts b/src/files-ui/components/file-input-button/InputButtonProps.ts
index d56f018a12f9663eddbca1bb382b1326fc73f6d9..fd729e59784273c8159c229f971653e987c53895 100644
--- a/src/files-ui/components/file-input-button/InputButtonProps.ts
+++ b/src/files-ui/components/file-input-button/InputButtonProps.ts
@@ -142,9 +142,10 @@ export declare type FileInputButtonProps =
export const defaultFileInputButtonProps: FileInputButtonProps =
{
textDecoration: "uppercase",
- label:"browse...",
+ label: "browse...",
behaviour: "add",
disabled: false,
uploadConfig: {},
actionButtons: {},
+ value: [],
}
\ No newline at end of file
diff --git a/src/files-ui/components/file-mosaic/components/FileMosaicInfoLayer/FileMosaicInfoLayer.tsx b/src/files-ui/components/file-mosaic/components/FileMosaicInfoLayer/FileMosaicInfoLayer.tsx
index 21a2e6a43af382f3c94f0312e33e16247c379e6e..2c8359f01623848c496c8034d9f7d044d059b012 100644
--- a/src/files-ui/components/file-mosaic/components/FileMosaicInfoLayer/FileMosaicInfoLayer.tsx
+++ b/src/files-ui/components/file-mosaic/components/FileMosaicInfoLayer/FileMosaicInfoLayer.tsx
@@ -1,4 +1,5 @@
import * as React from "react";
+import { FileItemLocalizerSelector, LocalLabels } from "../../../../core";
import { Cancel } from "../../../icons";
import FileMosaicStatus from "../FileMosaicStatus/FileMosaicStatus";
import { FileMosaicInfoLayerProps } from "./FileMosaicInfoLayerProps";
@@ -15,6 +16,16 @@ const FileMosaicInfoLayer: React.FC<FileMosaicInfoLayerProps> = (
sizeFormatted,
localType,
} = props;
+
+ const FileItemLocalizer: LocalLabels =
+ FileItemLocalizerSelector(localization);
+
+ const {
+ name: nameLabel,
+ size: sizeLabel,
+ type: typeLabel,
+ } = FileItemLocalizer.fullInfoLayer as LocalLabels;
+
return (
<React.Fragment>
<div className="files-ui-file-mosaic-info-layer-header">
@@ -30,11 +41,11 @@ const FileMosaicInfoLayer: React.FC<FileMosaicInfoLayerProps> = (
localization={localization}
/>
</div>
- <div className="heading">Name:</div>
+ <div className="heading">{nameLabel as string}</div>
<div className="label">{localName}</div>
- <div className="heading">Size:</div>
+ <div className="heading">{sizeLabel as string}</div>
<div className="label">{sizeFormatted}</div>
- <div className="heading">Type:</div>
+ <div className="heading">{typeLabel as string}</div>
<div className="label">{localType}</div>
</React.Fragment>
);
diff --git a/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.tsx b/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.tsx
index c6b9d6332635ef655a5b6a435a42b41cd3aab31b..6593fc47ec5fc0c448def26687abfab9fb87a0bf 100644
--- a/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.tsx
+++ b/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.tsx
@@ -67,6 +67,8 @@ const FileMosaic: React.FC<FileMosaicProps> = (props: FileMosaicProps) => {
onRightClick,
smartImgFit,
} = props;
+//localizers
+
//ref for anchor download element
const downloadRef = React.useRef<HTMLAnchorElement>(null);
@@ -208,6 +210,7 @@ const FileMosaic: React.FC<FileMosaicProps> = (props: FileMosaicProps) => {
onAbort?.(id);
};
+
if (isReady)
return (
<div
diff --git a/src/files-ui/components/previews/FullScreen/FullScreen.tsx b/src/files-ui/components/previews/FullScreen/FullScreen.tsx
index 4cc9b0fbfa49a59a356e45fe1e8b6e884c957a3a..07e6dedb4966291888825cdc969f19c96d7942e7 100644
--- a/src/files-ui/components/previews/FullScreen/FullScreen.tsx
+++ b/src/files-ui/components/previews/FullScreen/FullScreen.tsx
@@ -12,6 +12,19 @@ const FullScreen: React.FC<FullScreenProps> = (props: FullScreenProps) => {
e.stopPropagation();
onClose?.();
}
+ React.useEffect(() => {
+ const handleCloseEsc = (evt: KeyboardEvent) => {
+ if (evt.key === "Escape") onClose?.();
+ };
+ console.log("adding listener");
+
+ document.addEventListener("keydown", handleCloseEsc);
+
+ return () => {
+ console.log("removing listener");
+ document.removeEventListener("keydown", handleCloseEsc);
+ };
+ }, []);
return (
<div
diff --git a/src/files-ui/core/localization/Chinese-simplified/localization.simplifiedChinese.ts b/src/files-ui/core/localization/Chinese-simplified/localization.simplifiedChinese.ts
index 92cbf82733f8c917bdd809e916acb5c9f082fbd7..2be18b6fc8b5bfb40b4278d8d421a103ff588881 100644
--- a/src/files-ui/core/localization/Chinese-simplified/localization.simplifiedChinese.ts
+++ b/src/files-ui/core/localization/Chinese-simplified/localization.simplifiedChinese.ts
@@ -23,7 +23,7 @@ export const DropzoneSimplifiedChinese: LocalLabels = {
}
/**
- * English translation for FileItem component
+ * Chinnese translation for FileItem component
*/
export const FileItemSimplifiedChinese: LocalLabels = {
fullInfoLayer: {
@@ -32,7 +32,7 @@ export const FileItemSimplifiedChinese: LocalLabels = {
type: "文件类型: "
},
status: {
- preparing:"准备",
+ preparing:"é¢„åŠ è½½",
uploading: "ä¸Šä¼ ",
success: "æˆåŠŸ",
valid: "接å—的文件",
diff --git a/src/files-ui/core/localization/Chinese-traditional/localization.traditionalChinese.ts b/src/files-ui/core/localization/Chinese-traditional/localization.traditionalChinese.ts
index 05b6ebe378a3fafef18dcd20a262e5c50a5b0614..47924bee6dfc20b776e7ff4e0a8594d7d666d263 100644
--- a/src/files-ui/core/localization/Chinese-traditional/localization.traditionalChinese.ts
+++ b/src/files-ui/core/localization/Chinese-traditional/localization.traditionalChinese.ts
@@ -24,7 +24,7 @@ export const DropzoneTraditionalChinese: LocalLabels = {
}
/**
- * English translation for FileItem component
+ * Chinese translation for FileItem component
*/
export const FileItemTraditionalChinese: LocalLabels = {
fullInfoLayer: {
@@ -33,7 +33,7 @@ export const FileItemTraditionalChinese: LocalLabels = {
type: "文件類型: "
},
status: {
- preparing: "ä¸æ¢",
+ preparing: "é åŠ è¼‰",
uploading: "上傳",
success: "æˆåŠŸ",
valid: "有效文件",
diff --git a/src/files-ui/core/localization/avatar.localization.ts b/src/files-ui/core/localization/avatar.localization.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1f8dbafefb8bd3a80936458cb58a02e7f71f91cb
--- /dev/null
+++ b/src/files-ui/core/localization/avatar.localization.ts
@@ -0,0 +1,41 @@
+import { ComponentLocalizer, LocalLabels, Localization } from "../types";
+import { FileItemRussian } from "./Russian/localization.russian";
+import { FileItemEnglish } from "./English/localization.english";
+import { FileItemFrench } from "./French/localization.french";
+import { FileItemPortuguese } from "./Portuguese/localization.portuguese";
+import { FileItemSpanish } from "./Spanish/localization.spanish";
+import { FileItemSimplifiedChinese } from "./Chinese-simplified/localization.simplifiedChinese";
+import { FileItemTraditionalChinese } from "./Chinese-traditional/localization.traditionalChinese";
+import { FileItemItalian } from "./Italian/localization.italian";
+/**
+ * TO-DO: Add Avatar localization in next release, inthe meanwhile it accepts custom labels
+ */
+export const AvatarLocalizer: ComponentLocalizer = {
+ "ES-es": FileItemSpanish,
+ "EN-en": FileItemEnglish,
+ "FR-fr": FileItemFrench,
+ "IT-it": FileItemItalian,
+ "PT-pt": FileItemPortuguese,
+ "RU-ru": FileItemRussian,
+ "ZH-cn": FileItemSimplifiedChinese,
+ "ZH-hk": FileItemTraditionalChinese
+}
+
+/**
+ * Secure translation through a selector
+ * @param local the Localization
+ * @returns a ComponentLocalizer object that contains the translation
+ */
+export const AvatarLocalizerSelector = (local?: Localization): LocalLabels => {
+ switch (local) {
+ case "ES-es": return AvatarLocalizer["ES-es"];
+ case "EN-en": return AvatarLocalizer["EN-en"];
+ case "FR-fr": return AvatarLocalizer["FR-fr"];
+ case "IT-it": return AvatarLocalizer["IT-it"];
+ case "PT-pt": return AvatarLocalizer["PT-pt"];
+ case "RU-ru": return AvatarLocalizer["RU-ru"];
+ case "ZH-cn": return AvatarLocalizer["ZH-cn"];
+ case "ZH-hk": return AvatarLocalizer["ZH-hk"];
+ default: return AvatarLocalizer["EN-en"];
+ }
+}
\ No newline at end of file
diff --git a/src/files-ui/core/types/localization.ts b/src/files-ui/core/types/localization.ts
index 8a206f36c0d7da9cc3183cc7d31d6aa986e13cfb..8a97004cc8e4209aa8bf9dc7d04d7317d34799c4 100644
--- a/src/files-ui/core/types/localization.ts
+++ b/src/files-ui/core/types/localization.ts
@@ -12,7 +12,7 @@ export type Localization =
export type FunctionLabel = ((s1: string | number, s2?: string | number, s3?: string) => string);
-export interface LocalLabels {
+export type LocalLabels = {
[label: string]: string | FunctionLabel | LocalLabels;
}
//export const DropzoneLocalizer
diff --git a/src/files-ui/hooks/useDropzoneFileUpdater.ts b/src/files-ui/hooks/useDropzoneFileUpdater.ts
index b1bb4dd4d71594d61b097edb7529dac67ce29346..a776c6630bc01ea3972e2ed109244afe3ede255c 100644
--- a/src/files-ui/hooks/useDropzoneFileUpdater.ts
+++ b/src/files-ui/hooks/useDropzoneFileUpdater.ts
@@ -25,6 +25,9 @@ const useDropzoneFileListUpdater = (
localization?: Localization,
validateFilesFlag?: boolean
): [ExtFile[], number, React.Dispatch<React.SetStateAction<ExtFile[]>>] => {
+
+ console.log("FileListUpdater",dropzoneId, value, isUploading, maxFileSize, accept, maxFiles, validateFilesFlag);
+
//state for managing the files locally
const [localFiles, setLocalFiles] = React.useState<ExtFile[]>([]);
// the current number of valid files
diff --git a/src/pages/demo/FileMosaicDemoPage.jsx b/src/pages/demo/FileMosaicDemoPage.jsx
index d7f159e8ccb7020b706d6cb66b2b31e02beae258..a98c7b2ec5be48d2797e29976c3b887b11f22d08 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";
@@ -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 0000000000000000000000000000000000000000..730aa0b6ce76dc2409053b9152e117e497683bb0
--- /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 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/localization/DemoFileMosaicLocalization";
+import CodeJSFileMosaicLocalization from "../../components/demo-components/localization/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-texts">
+ <SubTitle content="Locale texts" />
+ <DescParagraph>
+ Files UI components have multilanguage support. You can change the
+ language in wich the 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 key={x}>{x}</TypeHighlight>
+ </li>
+ ))}
+ </ul>
+ </DescParagraph>
+ <FileCardMosaicSwitch
+ value={component}
+ onChange={handleChangeComponent}
+ withInput
+ row
+ />
+ <Paper
+ variant="outlined"
+ style={{
+ padding: "25px 10px",
+ 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: "Locale texts",
+ referTo: "/file-icons#locale-texts",
+ },
+];
diff --git a/src/routes/MainRouter.jsx b/src/routes/MainRouter.jsx
index fc2ad2f9bef3917bd556a0254fb4ac1c6342560e..aa8639240b50e3ab77d8ee47e9b6813ceee003f5 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 />,