Skip to content

Commit 4ed6bc8

Browse files
JinSSJ3JinSSJ3
committed
[WIP]: Add localization page completed. Missing to refactor FileCard and FIleMosaic to display info layer with localization. Also missing Avatar for localization
1 parent 7d5c0a7 commit 4ed6bc8

File tree

6 files changed

+159
-110
lines changed

6 files changed

+159
-110
lines changed

‎src/components/demo-components/filemosaic-demo/DemoLocalization.scss‎

Lines changed: 0 additions & 41 deletions
This file was deleted.

‎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
};

‎src/components/demo-components/filemosaic-demo/DemoFileMosaicLocalization.tsx‎ renamed to ‎src/components/demo-components/localization/DemoFileMosaicLocalization.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
FileCard,
99
} from "../../../files-ui";
1010
import { Autocomplete, TextField } from "@mui/material";
11-
import "./DemoLocalization.scss";
11+
import "./DemoLocalization.css";
1212
const DemoFileMosaicLocalization = (props: { card: boolean }) => {
1313
const [localization, setLocalization] = React.useState<
1414
Localization | undefined
@@ -32,16 +32,16 @@ const DemoFileMosaicLocalization = (props: { card: boolean }) => {
3232
renderInput={(params) => <TextField {...params} label="Localization" />}
3333
/>
3434
{props.card ? (
35-
<div className="demo-localization-container-dz-fm">
36-
<div className="demo-localization-item">
35+
<div className="demo-localization-container">
36+
<div className="inputbutton-container">
3737
<FileInputButton
3838
//style={{ width: "400px" }}
3939
value={[]}
4040
localization={localization}
4141
></FileInputButton>
4242
</div>
4343

44-
<div className="demo-localization-item">
44+
<div className="filecard-container">
4545
{extFiles.map((extFile, index) => (
4646
<FileCard
4747
key={index}
@@ -54,19 +54,19 @@ const DemoFileMosaicLocalization = (props: { card: boolean }) => {
5454
</div>
5555
</div>
5656
) : (
57-
<div className="demo-localization-container-dz-fm">
58-
<div className="demo-localization-item">
57+
<div className="demo-localization-container">
58+
<div className="dropzone-filemosaic-container">
5959
<Dropzone
60-
value={extFiles}
60+
//value={[]}
6161
accept={"image/*"}
62-
maxFileSize={28*1024*1024}
62+
maxFileSize={28 * 1024 * 1024}
6363
maxFiles={10}
6464
//style={{ width: "400px" }}
6565
localization={localization}
6666
></Dropzone>
6767
</div>
6868

69-
<div className="demo-localization-item">
69+
<div className="dropzone-filemosaic-container">
7070
{extFiles.map((extFile, index) => (
7171
<FileMosaic
7272
key={index}

‎src/components/demo-components/localization/DemoLocalization.css‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
.demo-localization-container {
2+
display: flex;
3+
align-items: center;
4+
justify-content: center;
5+
gap: 10px;
6+
min-height: 50vh;
7+
}
8+
9+
.dropzone-filemosaic-container {
10+
width: 50%;
11+
display: flex;
12+
align-items: center;
13+
justify-content: center;
14+
flex-wrap: wrap;
15+
gap: 1px;
16+
}
17+
18+
.inputbutton-container {
19+
width: 100px;
20+
}
21+
22+
.filecard-container {
23+
gap: 10px;
24+
display: flex;
25+
align-items: center;
26+
justify-content: center;
27+
flex-wrap: wrap;
28+
}
29+
30+
@media (max-width: 960px) {
31+
.demo-localization-container {
32+
flex-direction: column;
33+
}
34+
35+
.dropzone-filemosaic-container {
36+
width: 100%;
37+
}
38+
39+
.filecard-container {
40+
width: 100%;
41+
flex-direction: column;
42+
}
43+
}

‎src/pages/demo/FileMosaicDemoPage.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@ import CodeJSFileMosaicValidation from "../../components/demo-components/filemos
2020
import DemoFileMosaicValidation from "../../components/demo-components/filemosaic-demo/DemoFileMosaicValidation";
2121
import CodeJSFileMosaicUploadStatus from "../../components/demo-components/filemosaic-demo/CodeJSFileMosaicUploadStatus";
2222
import DemoFileMosaicUploadStatus from "../../components/demo-components/filemosaic-demo/DemoFileMosaicUploadStatus";
23-
import DemoFileMosaicLocalization from "../../components/demo-components/filemosaic-demo/DemoFileMosaicLocalization";
24-
import CodeJSFileMosaicLocalization from "../../components/demo-components/filemosaic-demo/CodeJSFileMosaicLocalization";
23+
import DemoFileMosaicLocalization from "../../components/demo-components/localization/DemoFileMosaicLocalization";
24+
import CodeJSFileMosaicLocalization from "../../components/demo-components/localization/CodeJSFileMosaicLocalization";
2525
import DemoFileMosaicDarkMode from "../../components/demo-components/filemosaic-demo/DemoFileMosaicDarkMode";
2626
import CodeJSFileMosaicDarkMode from "../../components/demo-components/filemosaic-demo/CodeJSFileMosaicDarkMode";
2727
import DemoFileMosaicFileIcons from "../../components/demo-components/filemosaic-demo/DemoFileMosaicFileIcons";

0 commit comments

Comments
 (0)