Skip to content

Commit e3915ab

Browse files
JinSSJ3JinSSJ3
committed
[FEAT]: Add smart image fit demo in FIle mosaic and card
1 parent 98c9132 commit e3915ab

File tree

5 files changed

+147
-22
lines changed

5 files changed

+147
-22
lines changed

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

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import * as React from "react";
2+
import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
3+
4+
const CodeJSFileMosaicSmartImgFit = (card) => {
5+
return (
6+
<ShowDemoCode
7+
codeCompleteJS={completeCodeJS(card)}
8+
codeCompleteTS={completeCodeTS(card)}
9+
codeSandboxJS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
10+
codeSandboxTS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
11+
codeSplittedJS={splittedCodeJS(card)}
12+
codeSplittedTS={splittedCodeTS(card)}
13+
/>
14+
);
15+
};
16+
export default CodeJSFileMosaicSmartImgFit;
17+
18+
const splittedCodeJS = (card)=>``;
19+
const splittedCodeTS = (card)=>``;
20+
21+
const completeCodeTS = (card)=>`import * as React from "react";
22+
import { ${card?"FileCard":"FileMosaic"}, ExtFile } from "@files-ui/react";
23+
24+
export default function App() {
25+
return (
26+
<>
27+
<${card?"FileCard":"FileMosaic"} {...sampleFileProp} info smartImgFit={false}/>
28+
<${card?"FileCard":"FileMosaic"} {...sampleFileProp} info smartImgFit={"orientation"}/>
29+
<${card?"FileCard":"FileMosaic"} {...sampleFileProp} info smartImgFit={"center"}/>
30+
</>
31+
);
32+
};
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",
39+
};`;
40+
41+
const completeCodeJS = (card)=>`import * as React from "react";
42+
import { ${card?"FileCard":"FileMosaic"} } from "@files-ui/react";
43+
44+
export default function App() {
45+
return (
46+
<>
47+
<${card?"FileCard":"FileMosaic"} {...sampleFileProp} info smartImgFit={false}/>
48+
<${card?"FileCard":"FileMosaic"} {...sampleFileProp} info smartImgFit={"orientation"}/>
49+
<${card?"FileCard":"FileMosaic"} {...sampleFileProp} info smartImgFit={"center"}/>
50+
</>
51+
);
52+
};
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",
59+
};`;

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import * as React from "react";
2+
import { ExtFile, FileCard, FileMosaic } from "../../../files-ui";
3+
4+
const DemoFileMosaicSmartImgFit = (props: { card: boolean }) => {
5+
if (props.card)
6+
return (
7+
<>
8+
<FileCard {...sampleFileProp} info smartImgFit={false} />
9+
<FileCard {...sampleFileProp} info smartImgFit={"orientation"} />
10+
<FileCard {...sampleFileProp} info smartImgFit={"center"} />
11+
</>
12+
);
13+
return (
14+
<>
15+
<FileMosaic {...sampleFileProp} info smartImgFit={false} />
16+
<FileMosaic {...sampleFileProp} info smartImgFit={"orientation"} />
17+
<FileMosaic {...sampleFileProp} info smartImgFit={"center"} />
18+
</>
19+
);
20+
};
21+
export default DemoFileMosaicSmartImgFit;
22+
23+
const sampleFileProp: ExtFile = {
24+
id: "fileId-1",
25+
size: 28 * 1024 * 1024,
26+
type: "image/gif",
27+
name: "Thor arrives wakanda.png",
28+
imageUrl: "https://64.media.tumblr.com/078a5af7a51d438b1c1ee5bd77f1b1e5/tumblr_p81qv7KIPa1rvufhzo3_r1_400.gif",
29+
};

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

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,26 @@
11
import * as React from "react";
22
import { FileCard, FileMosaic } from "../../../files-ui";
33

4+
const DemoFileMosaicValidation = ({ card }) => {
5+
if (card)
6+
return (
7+
<>
8+
{sampleFilesProps.map((extFile) => (
9+
<FileCard key={extFile.id} {...extFile} info />
10+
))}
11+
</>
12+
);
13+
14+
return (
15+
<>
16+
{sampleFilesProps.map((extFile) => (
17+
<FileMosaic key={extFile.id} {...extFile} info />
18+
))}
19+
</>
20+
);
21+
};
22+
export default DemoFileMosaicValidation;
23+
424
const sampleFilesProps = [
525
{
626
id: "fileId-1",
@@ -23,24 +43,4 @@ const sampleFilesProps = [
2343
name: "non valid file created from props.jpg",
2444
valid: true,
2545
},
26-
];
27-
28-
const DemoFileMosaicValidation = ({ card }) => {
29-
if (card)
30-
return (
31-
<>
32-
{sampleFilesProps.map((extFile) => (
33-
<FileCard key={extFile.id} {...extFile} info />
34-
))}
35-
</>
36-
);
37-
38-
return (
39-
<>
40-
{sampleFilesProps.map((extFile) => (
41-
<FileMosaic key={extFile.id} {...extFile} info />
42-
))}
43-
</>
44-
);
45-
};
46-
export default DemoFileMosaicValidation;
46+
];

‎src/pages/demo/FileCardDemoPage.jsx‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,8 @@ import DemoFileMosaicUploadStatus from "../../components/demo-components/filemos
2323
import CodeJSFileMosaicUploadStatus from "../../components/demo-components/filemosaic-demo/CodeJSFileMosaicUploadStatus";
2424
import DemoFileCardActions from "../../components/demo-components/filemosaic-demo/DemoFileCradActions";
2525
import CodeJSFileCardActions from "../../components/demo-components/filemosaic-demo/CodeJSFileCardActions";
26+
import DemoFileMosaicSmartImgFit from "../../components/demo-components/filemosaic-demo/DemoFileMosaicSmartImgFit";
27+
import CodeJSFileMosaicSmartImgFit from "../../components/demo-components/filemosaic-demo/CodeJSFileMosaicSmartImgFit";
2628

2729
const FileCardDemoPage = (props) => {
2830
return (
@@ -321,7 +323,22 @@ const FileCardDemoPage = (props) => {
321323

322324
<CodeJSFileMosaicDarkMode card />
323325
</section>
326+
<section id="smart-image-fit">
327+
<SubTitle content="Smart image fit" />
328+
<DescParagraph>
329+
<CodeHighlight>FileCard</CodeHighlight> with
330+
<TypeHighlight>smartImgFit</TypeHighlight> prop will display image
331+
according to its heigh and width. Image width height greater than
332+
its width has a "portrait" orientation. Otherwise it has a
333+
"landscape" orientation.
334+
</DescParagraph>
324335

336+
<DemoContainerFileMosaic>
337+
<DemoFileMosaicSmartImgFit card />
338+
</DemoContainerFileMosaic>
339+
340+
<CodeJSFileMosaicSmartImgFit card />
341+
</section>
325342
<section id="api">
326343
<SubTitle content="API" />
327344
<DescParagraph>
@@ -332,7 +349,8 @@ const FileCardDemoPage = (props) => {
332349
<li>
333350
<AnchorToTab href="/api/filecard">{"<FileCard/>"}</AnchorToTab>
334351
</li>
335-
<li>|
352+
<li>
353+
|
336354
<AnchorToTab href="/api/fileinputbuttom">
337355
{"<FileInputButton/>"}
338356
</AnchorToTab>

‎src/pages/demo/FileMosaicDemoPage.jsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,8 @@ import CodeJSFileMosaicDarkMode from "../../components/demo-components/filemosai
2727
import DemoFileMosaicFileIcons from "../../components/demo-components/filemosaic-demo/DemoFileMosaicFileIcons";
2828
import DemoFileCardActions from "../../components/demo-components/filemosaic-demo/DemoFileCradActions";
2929
import CodeJSFileCardActions from "../../components/demo-components/filemosaic-demo/CodeJSFileCardActions";
30+
import DemoFileMosaicSmartImgFit from "../../components/demo-components/filemosaic-demo/DemoFileMosaicSmartImgFit";
31+
import CodeJSFileMosaicSmartImgFit from "../../components/demo-components/filemosaic-demo/CodeJSFileMosaicSmartImgFit";
3032

3133
const FileMosaicDemoPage = (props) => {
3234
return (
@@ -336,6 +338,23 @@ const FileMosaicDemoPage = (props) => {
336338
<CodeJSFileMosaicDarkMode />
337339
</section>
338340

341+
<section id="smart-image-fit">
342+
<SubTitle content="Smart image fit" />
343+
<DescParagraph>
344+
<CodeHighlight>FileMosaic</CodeHighlight> with
345+
<TypeHighlight>smartImgFit</TypeHighlight> prop will display image
346+
according to its heigh and width. Image width height greater than
347+
its width has a "portrait" orientation. Otherwise it has a
348+
"landscape" orientation.
349+
</DescParagraph>
350+
351+
<DemoContainerFileMosaic>
352+
<DemoFileMosaicSmartImgFit />
353+
</DemoContainerFileMosaic>
354+
355+
<CodeJSFileMosaicSmartImgFit />
356+
</section>
357+
339358
{/* <section id="localization">
340359
<SubTitle content="Localization" />
341360
<DescParagraph>

0 commit comments

Comments
 (0)