Skip to content

Commit a051c18

Browse files
JinSSJ3JinSSJ3
authored
Merge pull request #11 from files-ui/21-feat-add-localization-page-improve-localization-files
21 feat add localization page improve localization files
2 parents 7f680f6 + 3cdb2e0 commit a051c18

File tree

22 files changed

+452
-205
lines changed

22 files changed

+452
-205
lines changed

‎src/components/MainMenu/MainMenuSideBar.tsx‎

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import ElectricBoltIcon from "@mui/icons-material/ElectricBolt";
1111
import { useNavigateToTop } from "../../hooks/useNavigateToTop";
1212

1313
export default function MainMenuSideBar(props: MainMenuSideBarProps) {
14-
const { /* items, */ selectedIndex, /* setSelectedIndex */ } = props;
14+
const { /* items, */ selectedIndex /* setSelectedIndex */ } = props;
1515
const navigate = useNavigateToTop();
1616

1717
const quickStartItemsIni: MainMenuSideBarItems[] = [
@@ -110,29 +110,34 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
110110
},
111111
],
112112
},
113-
{
113+
{
114114
label: "File icons",
115115
index: 4,
116116
onClick: () => navigate("/file-icons"),
117117
},
118118
{
119-
label: "Server side",
119+
label: "Localization",
120120
index: 5,
121+
onClick: () => navigate("/localization"),
122+
},
123+
{
124+
label: "Server side",
125+
index: 6,
121126
onClick: () => navigate("/server-side"),
122127
},
123128
{
124129
label: "Code Generator",
125-
index: 6,
130+
index: 7,
126131
onClick: () => navigate("/code-generator"),
127132
},
128133
{
129134
label: "Types",
130-
index: 7,
135+
index: 8,
131136
onClick: () => navigate("/types"),
132137
},
133138
{
134139
label: "Utilities Methods",
135-
index: 8,
140+
index: 9,
136141
subMenu: [
137142
{
138143
label: "File readers",
@@ -145,7 +150,7 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
145150
index: 82,
146151
onClick: () => navigate("/utilities-methods/file-uploader"),
147152
},
148-
153+
149154
{
150155
label: "File download",
151156
index: 83,
@@ -155,7 +160,7 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
155160
},
156161
];
157162

158-
const [quickStartItems, /* setQuickStartItems */] =
163+
const [quickStartItems /* setQuickStartItems */] =
159164
React.useState(quickStartItemsIni);
160165

161166
const [regularItems, setRegularItemsIni] = React.useState(
@@ -164,11 +169,11 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
164169
})
165170
);
166171

167-
/* const handleClick = () => {
172+
/* const handleClick = () => {
168173
//setOpen(!open);
169174
}; */
170175

171-
/* const handleCLickItem = (
176+
/* const handleCLickItem = (
172177
e: React.MouseEvent<HTMLDivElement, MouseEvent>,
173178
onClick: Function | undefined
174179
): void => {
@@ -288,7 +293,7 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
288293
<ListItemButton
289294
style={{ padding: "2px 20px" }}
290295
key={indexBase}
291-
// selected={subMenu === undefined && selectedIndex === index}
296+
// selected={subMenu === undefined && selectedIndex === index}
292297
selected={isOpen && selectedIndex === index}
293298
onClick={(event) =>
294299
handleListItemClick(

‎src/components/demo-components/dropzone-demo/BasicDropzoneCodeJS.jsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,23 +15,21 @@ const BasicDropzoneCode = ({ splittedOnly = false }) => {
1515
export default BasicDropzoneCode;
1616

1717
const splittedCodeJS = `<Dropzone
18-
style={{ minWidth: "505px" }}
1918
onChange={updateFiles}
2019
value={files}
2120
>
2221
{files.length > 0 &&
2322
files.map((file) => (
24-
<FileMosaic key={file.id} {...file} onDelete={removeFile} info alwaysActive/>
23+
<FileMosaic key={file.id} {...file} onDelete={removeFile} info/>
2524
))}
2625
</Dropzone>`;
2726
const splittedCodeTS = `<Dropzone
28-
style={{ minWidth: "505px" }}
2927
onChange={updateFiles}
3028
value={files}
3129
>
3230
{files.length > 0 &&
3331
files.map((file: ExtFile) => (
34-
<FileMosaic key={file.id} {...file} onDelete={removeFile} info={true} alwaysActive={true}/>
32+
<FileMosaic key={file.id} {...file} onDelete={removeFile} info={true}/>
3533
))}
3634
</Dropzone>`;
3735
const completeCodeJS = `import { Dropzone,FileMosaic } from "@files-ui/react";

‎src/components/demo-components/dropzone-demo/BasicDropzoneDemo.jsx‎

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -11,21 +11,11 @@ export default function BasicDemoDropzone() {
1111
const removeFile = (id) => {
1212
setFiles(files.filter((x) => x.id !== id));
1313
};
14-
return (
15-
<Dropzone
16-
//style={{ minWidth: "505px" }}
17-
onChange={updateFiles}
18-
value={files}
19-
>
14+
return (
15+
<Dropzone onChange={updateFiles} value={files}>
2016
{files.length > 0 &&
2117
files.map((file) => (
22-
<FileMosaic
23-
key={file.id}
24-
{...file}
25-
onDelete={removeFile}
26-
info
27-
alwaysActive
28-
/>
18+
<FileMosaic key={file.id} {...file} onDelete={removeFile} info />
2919
))}
3020
</Dropzone>
3121
);

‎src/components/demo-components/filemosaic-demo/CodeJSFileMosaicLocalization.jsx‎ renamed to ‎src/components/demo-components/localization/CodeJSFileMosaicLocalization.jsx‎

Lines changed: 97 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import * as React from "react";
22
import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
33

4-
const CodeJSFileMosaicLocalization = (props) => {
4+
const CodeJSFileMosaicLocalization = ({ card }) => {
55
return (
66
<ShowDemoCode
7-
codeCompleteJS={completeCodeJS}
8-
codeCompleteTS={completeCodeTS}
7+
codeCompleteJS={completeCodeJS(card)}
8+
codeCompleteTS={completeCodeTS(card)}
99
codeSandboxJS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
1010
codeSandboxTS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
1111
codeSplittedJS={splittedCodeJS}
@@ -18,18 +18,18 @@ export default CodeJSFileMosaicLocalization;
1818
const splittedCodeJS = ``;
1919
const splittedCodeTS = ``;
2020

21-
22-
const completeCodeJS = `import * as React from "react";
23-
import { FileMosaic } from "@files-ui/react";
21+
const completeCodeJS = (card) => `import * as React from "react";
22+
import { ${card ? "FileCard" : `FileMosaic`} } from "@files-ui/react";
23+
import "./styles.css";
2424
import { Autocomplete, TextField } from "@mui/material";
2525
26-
const DemoFileMosaicLocalization = () => {
26+
const App = () => {
2727
const [localization, setLocalization] = React.useState(undefined);
2828
2929
const hadleSelect = (value) => {
3030
console.log(value);
3131
setLocalization(value?.value);
32-
};
32+
};
3333
return (
3434
<>
3535
<Autocomplete
@@ -43,25 +43,48 @@ const DemoFileMosaicLocalization = () => {
4343
getOptionLabel={(option) => option.language}
4444
renderInput={(params) => <TextField {...params} label="Localization" />}
4545
/>
46-
<div
47-
style={{
48-
display: "flex",
49-
flexWrap: "wrap",
50-
justifyContent: "space-evenly",
51-
width: "100%",
52-
gap: "50px",
53-
}}
54-
>
55-
{extFiles.map((extFile, index) => (
56-
<FileMosaic
57-
key={index}
58-
{...extFile}
46+
${
47+
!card
48+
? `<div className="demo-localization-container">
49+
<div className="dropzone-filemosaic-container">
50+
<Dropzone
51+
accept={"image/*"}
52+
maxFileSize={28 * 1024 * 1024}
53+
maxFiles={10}
54+
localization={localization}
55+
></Dropzone>
56+
</div>
57+
<div className="dropzone-filemosaic-container">
58+
{extFiles.map((extFile, index) => (
59+
<FileMosaic
60+
key={index}
61+
{...extFile}
62+
localization={localization}
63+
onDelete={() => {}}
64+
info
65+
/>
66+
))}
67+
</div>
68+
</div>`
69+
: `<div className="demo-localization-container">
70+
<div className="inputbutton-container">
71+
<FileInputButton
5972
localization={localization}
60-
onDelete={() => {}}
61-
info
62-
/>
63-
))}
64-
</div>
73+
></FileInputButton>
74+
</div>
75+
<div className="filecard-container">
76+
{extFiles.map((extFile, index) => (
77+
<FileCard
78+
key={index}
79+
{...extFile}
80+
localization={localization}
81+
onDelete={() => {}}
82+
info
83+
/>
84+
))}
85+
</div>
86+
</div>`
87+
}
6588
</>
6689
);
6790
};
@@ -88,7 +111,6 @@ const extFiles = [
88111
id: 1,
89112
valid: false,
90113
name: "file_localization.docx",
91-
92114
size: 28 * 1024,
93115
errors: ["pdf not allowed", "file is too big"],
94116
},
@@ -138,19 +160,22 @@ const extFiles = [
138160
},
139161
];`;
140162

141-
const completeCodeTS = `import * as React from "react";
142-
import { ExtFile, FileMosaic, Localization } from "@files-ui/react";
163+
const completeCodeTS = (card) => `import * as React from "react";
164+
import { ExtFile, ${
165+
card ? "FileCard" : `FileMosaic`
166+
}, Localization } from "@files-ui/react";
167+
import "./styles.css";
143168
import { Autocomplete, TextField } from "@mui/material";
144169
145-
const DemoFileMosaicLocalization = () => {
170+
const App = () => {
146171
const [localization, setLocalization] = React.useState<
147172
Localization | undefined
148173
>(undefined);
149174
150175
const hadleSelect = (value: LanguageItem | null) => {
151176
console.log(value);
152177
setLocalization(value?.value);
153-
};
178+
};
154179
155180
return (
156181
<>
@@ -165,25 +190,48 @@ const DemoFileMosaicLocalization = () => {
165190
getOptionLabel={(option) => option.language}
166191
renderInput={(params) => <TextField {...params} label="Localization" />}
167192
/>
168-
<div
169-
style={{
170-
display: "flex",
171-
flexWrap: "wrap",
172-
justifyContent: "space-evenly",
173-
width: "100%",
174-
gap: "50px",
175-
}}
176-
>
177-
{extFiles.map((extFile, index) => (
178-
<FileMosaic
179-
key={index}
180-
{...extFile}
193+
${
194+
!card
195+
? `<div className="demo-localization-container">
196+
<div className="dropzone-filemosaic-container">
197+
<Dropzone
198+
accept={"image/*"}
199+
maxFileSize={28 * 1024 * 1024}
200+
maxFiles={10}
201+
localization={localization}
202+
></Dropzone>
203+
</div>
204+
<div className="dropzone-filemosaic-container">
205+
{extFiles.map((extFile, index) => (
206+
<FileMosaic
207+
key={index}
208+
{...extFile}
209+
localization={localization}
210+
onDelete={() => {}}
211+
info
212+
/>
213+
))}
214+
</div>
215+
</div>`
216+
: `<div className="demo-localization-container">
217+
<div className="inputbutton-container">
218+
<FileInputButton
181219
localization={localization}
182-
onDelete={() => {}}
183-
info
184-
/>
185-
))}
186-
</div>
220+
></FileInputButton>
221+
</div>
222+
<div className="filecard-container">
223+
{extFiles.map((extFile, index) => (
224+
<FileCard
225+
key={index}
226+
{...extFile}
227+
localization={localization}
228+
onDelete={() => {}}
229+
info
230+
/>
231+
))}
232+
</div>
233+
</div>`
234+
}
187235
</>
188236
);
189237
};

0 commit comments

Comments
 (0)