Skip to content

Commit e21c0aa

Browse files
JinSSJ3JinSSJ3
committed
[REF]: Add landscape and portrait image to smartImgFit demo
1 parent 5b6795a commit e21c0aa

File tree

3 files changed

+78
-28
lines changed

3 files changed

+78
-28
lines changed

‎src/components/demo-components/filemosaic-demo/CodeJSFileMosaicSmartImgFit.jsx‎

Lines changed: 40 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -24,18 +24,29 @@ import { ${card?"FileCard":"FileMosaic"}, ExtFile } from "@files-ui/react";
2424
export default function App() {
2525
return (
2626
<>
27-
<${card?"FileCard":"FileMosaic"} {...sampleFileProp} info smartImgFit={false}/>
28-
<${card?"FileCard":"FileMosaic"} {...sampleFileProp} info smartImgFit={"orientation"}/>
29-
<${card?"FileCard":"FileMosaic"} {...sampleFileProp} info smartImgFit={"center"}/>
27+
<${card?"FileCard":"FileMosaic"} {...landscapeImage} info smartImgFit={false}/>
28+
<${card?"FileCard":"FileMosaic"} {...landscapeImage} info smartImgFit={"orientation"}/>
29+
<${card?"FileCard":"FileMosaic"} {...landscapeImage} info smartImgFit={"center"}/>
30+
<${card?"FileCard":"FileMosaic"} {...portraitImage} info smartImgFit={false}/>
31+
<${card?"FileCard":"FileMosaic"} {...portraitImage} info smartImgFit={"orientation"}/>
32+
<${card?"FileCard":"FileMosaic"} {...portraitImage} info smartImgFit={"center"}/>
3033
</>
3134
);
3235
};
33-
const sampleFileProp: ExtFile = {
34-
id: "fileId-1",
35-
size: 28 * 1024 * 1024,
36-
type: "image/gif",
37-
name: "Thor arrives wakanda.png",
38-
imageUrl: "https://64.media.tumblr.com/078a5af7a51d438b1c1ee5bd77f1b1e5/tumblr_p81qv7KIPa1rvufhzo3_r1_400.gif",
36+
const landscapeImage: ExtFile = {
37+
id: "fileId-1",
38+
size: 28 * 1024 * 1024,
39+
type: "image/gif",
40+
name: "(landscape)Thor arrives wakanda.gif",
41+
imageUrl:
42+
"https://64.media.tumblr.com/078a5af7a51d438b1c1ee5bd77f1b1e5/tumblr_p81qv7KIPa1rvufhzo3_r1_400.gif",
43+
};
44+
const portraitImage: ExtFile = {
45+
id: "fileId-2",
46+
size: 28 * 1024 * 1024,
47+
type: "image/gif",
48+
name: "(portrait)Iron man in stark tower.gif",
49+
imageUrl: "https://i.pinimg.com/originals/b6/1d/6a/b61d6a1079d8e54932dcde9dc260dd2e.gif",
3950
};`;
4051

4152
const completeCodeJS = (card)=>`import * as React from "react";
@@ -44,16 +55,27 @@ import { ${card?"FileCard":"FileMosaic"} } from "@files-ui/react";
4455
export default function App() {
4556
return (
4657
<>
47-
<${card?"FileCard":"FileMosaic"} {...sampleFileProp} info smartImgFit={false}/>
48-
<${card?"FileCard":"FileMosaic"} {...sampleFileProp} info smartImgFit={"orientation"}/>
49-
<${card?"FileCard":"FileMosaic"} {...sampleFileProp} info smartImgFit={"center"}/>
58+
<${card?"FileCard":"FileMosaic"} {...landscapeImage} info smartImgFit={false}/>
59+
<${card?"FileCard":"FileMosaic"} {...landscapeImage} info smartImgFit={"orientation"}/>
60+
<${card?"FileCard":"FileMosaic"} {...landscapeImage} info smartImgFit={"center"}/>
61+
<${card?"FileCard":"FileMosaic"} {...portraitImage} info smartImgFit={false}/>
62+
<${card?"FileCard":"FileMosaic"} {...portraitImage} info smartImgFit={"orientation"}/>
63+
<${card?"FileCard":"FileMosaic"} {...portraitImage} info smartImgFit={"center"}/>
5064
</>
5165
);
5266
};
53-
const sampleFileProp = {
54-
id: "fileId-1",
55-
size: 28 * 1024 * 1024,
56-
type: "image/gif",
57-
name: "Thor arrives wakanda.png",
58-
imageUrl: "https://64.media.tumblr.com/078a5af7a51d438b1c1ee5bd77f1b1e5/tumblr_p81qv7KIPa1rvufhzo3_r1_400.gif",
67+
const landscapeImage = {
68+
id: "fileId-1",
69+
size: 28 * 1024 * 1024,
70+
type: "image/gif",
71+
name: "(landscape)Thor arrives wakanda.gif",
72+
imageUrl:
73+
"https://64.media.tumblr.com/078a5af7a51d438b1c1ee5bd77f1b1e5/tumblr_p81qv7KIPa1rvufhzo3_r1_400.gif",
74+
};
75+
const portraitImage = {
76+
id: "fileId-2",
77+
size: 28 * 1024 * 1024,
78+
type: "image/gif",
79+
name: "(portrait)Iron man in stark tower.gif",
80+
imageUrl: "https://i.pinimg.com/originals/b6/1d/6a/b61d6a1079d8e54932dcde9dc260dd2e.gif",
5981
};`;

‎src/components/demo-components/filemosaic-demo/DemoFileMosaicSmartImgFit.tsx‎

Lines changed: 23 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,25 +5,39 @@ const DemoFileMosaicSmartImgFit = (props: { card: boolean }) => {
55
if (props.card)
66
return (
77
<>
8-
<FileCard {...sampleFileProp} info smartImgFit={false} />
9-
<FileCard {...sampleFileProp} info smartImgFit={"orientation"} />
10-
<FileCard {...sampleFileProp} info smartImgFit={"center"} />
8+
<FileCard {...landscapeImage} info smartImgFit={false} />
9+
<FileCard {...landscapeImage} info smartImgFit={"orientation"} />
10+
<FileCard {...landscapeImage} info smartImgFit={"center"} />
11+
<FileCard {...portraitImage} info smartImgFit={false} />
12+
<FileCard {...portraitImage} info smartImgFit={"orientation"} />
13+
<FileCard {...portraitImage} info smartImgFit={"center"} />
1114
</>
1215
);
1316
return (
1417
<>
15-
<FileMosaic {...sampleFileProp} info smartImgFit={false} />
16-
<FileMosaic {...sampleFileProp} info smartImgFit={"orientation"} />
17-
<FileMosaic {...sampleFileProp} info smartImgFit={"center"} />
18+
<FileMosaic {...landscapeImage} info smartImgFit={false} />
19+
<FileMosaic {...landscapeImage} info smartImgFit={"orientation"} />
20+
<FileMosaic {...landscapeImage} info smartImgFit={"center"} />
21+
<FileMosaic {...portraitImage} info smartImgFit={false} />
22+
<FileMosaic {...portraitImage} info smartImgFit={"orientation"} />
23+
<FileMosaic {...portraitImage} info smartImgFit={"center"} />
1824
</>
1925
);
2026
};
2127
export default DemoFileMosaicSmartImgFit;
2228

23-
const sampleFileProp: ExtFile = {
29+
const landscapeImage: ExtFile = {
2430
id: "fileId-1",
2531
size: 28 * 1024 * 1024,
2632
type: "image/gif",
27-
name: "Thor arrives wakanda.png",
28-
imageUrl: "https://64.media.tumblr.com/078a5af7a51d438b1c1ee5bd77f1b1e5/tumblr_p81qv7KIPa1rvufhzo3_r1_400.gif",
33+
name: "(landscape)Thor arrives wakanda.gif",
34+
imageUrl:
35+
"https://64.media.tumblr.com/078a5af7a51d438b1c1ee5bd77f1b1e5/tumblr_p81qv7KIPa1rvufhzo3_r1_400.gif",
36+
};
37+
const portraitImage: ExtFile = {
38+
id: "fileId-2",
39+
size: 28 * 1024 * 1024,
40+
type: "image/gif",
41+
name: "(portrait)Iron man in stark tower.gif",
42+
imageUrl: "https://i.pinimg.com/originals/b6/1d/6a/b61d6a1079d8e54932dcde9dc260dd2e.gif",
2943
};

‎src/pages/demo/FileCardDemoPage.jsx‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -350,11 +350,25 @@ const FileCardDemoPage = (props) => {
350350
<AnchorToTab href="/api/filecard">{"<FileCard/>"}</AnchorToTab>
351351
</li>
352352
<li>
353-
|
354353
<AnchorToTab href="/api/fileinputbuttom">
355354
{"<FileInputButton/>"}
356355
</AnchorToTab>
357356
</li>
357+
<li>
358+
<AnchorToTab href="/api/preview#fullscreen">
359+
{"<FullScreen/>"}
360+
</AnchorToTab>
361+
</li>
362+
<li>
363+
<AnchorToTab href="/api/preview#imagepreview">
364+
{"<ImagePreview/>"}
365+
</AnchorToTab>
366+
</li>
367+
<li>
368+
<AnchorToTab href="/api/preview#videopreview">
369+
{"<VideoPreview/>"}
370+
</AnchorToTab>
371+
</li>
358372
</ul>
359373
</section>
360374
</MainContentContainer>

0 commit comments

Comments
 (0)