Skip to content
Snippets Groups Projects
Commit e21c0aa1 authored by Jose Manuel Serrano Amaut's avatar Jose Manuel Serrano Amaut
Browse files

[REF]: Add landscape and portrait image to smartImgFit demo

parent 5b6795a3
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/components/demo-components/filemosaic-demo/CodeJSFileMosaicSmartImgFit.jsx
+ 40
− 18
View file @ e21c0aa1
......@@ -24,18 +24,29 @@ import { ${card?"FileCard":"FileMosaic"}, ExtFile } from "@files-ui/react";
export default function App() {
return (
<>
<${card?"FileCard":"FileMosaic"} {...sampleFileProp} info smartImgFit={false}/>
<${card?"FileCard":"FileMosaic"} {...sampleFileProp} info smartImgFit={"orientation"}/>
<${card?"FileCard":"FileMosaic"} {...sampleFileProp} info smartImgFit={"center"}/>
<${card?"FileCard":"FileMosaic"} {...landscapeImage} info smartImgFit={false}/>
<${card?"FileCard":"FileMosaic"} {...landscapeImage} info smartImgFit={"orientation"}/>
<${card?"FileCard":"FileMosaic"} {...landscapeImage} info smartImgFit={"center"}/>
<${card?"FileCard":"FileMosaic"} {...portraitImage} info smartImgFit={false}/>
<${card?"FileCard":"FileMosaic"} {...portraitImage} info smartImgFit={"orientation"}/>
<${card?"FileCard":"FileMosaic"} {...portraitImage} info smartImgFit={"center"}/>
</>
);
};
const sampleFileProp: ExtFile = {
id: "fileId-1",
size: 28 * 1024 * 1024,
type: "image/gif",
name: "Thor arrives wakanda.png",
imageUrl: "https://64.media.tumblr.com/078a5af7a51d438b1c1ee5bd77f1b1e5/tumblr_p81qv7KIPa1rvufhzo3_r1_400.gif",
const landscapeImage: ExtFile = {
id: "fileId-1",
size: 28 * 1024 * 1024,
type: "image/gif",
name: "(landscape)Thor arrives wakanda.gif",
imageUrl:
"https://64.media.tumblr.com/078a5af7a51d438b1c1ee5bd77f1b1e5/tumblr_p81qv7KIPa1rvufhzo3_r1_400.gif",
};
const portraitImage: ExtFile = {
id: "fileId-2",
size: 28 * 1024 * 1024,
type: "image/gif",
name: "(portrait)Iron man in stark tower.gif",
imageUrl: "https://i.pinimg.com/originals/b6/1d/6a/b61d6a1079d8e54932dcde9dc260dd2e.gif",
};`;
const completeCodeJS = (card)=>`import * as React from "react";
......@@ -44,16 +55,27 @@ import { ${card?"FileCard":"FileMosaic"} } from "@files-ui/react";
export default function App() {
return (
<>
<${card?"FileCard":"FileMosaic"} {...sampleFileProp} info smartImgFit={false}/>
<${card?"FileCard":"FileMosaic"} {...sampleFileProp} info smartImgFit={"orientation"}/>
<${card?"FileCard":"FileMosaic"} {...sampleFileProp} info smartImgFit={"center"}/>
<${card?"FileCard":"FileMosaic"} {...landscapeImage} info smartImgFit={false}/>
<${card?"FileCard":"FileMosaic"} {...landscapeImage} info smartImgFit={"orientation"}/>
<${card?"FileCard":"FileMosaic"} {...landscapeImage} info smartImgFit={"center"}/>
<${card?"FileCard":"FileMosaic"} {...portraitImage} info smartImgFit={false}/>
<${card?"FileCard":"FileMosaic"} {...portraitImage} info smartImgFit={"orientation"}/>
<${card?"FileCard":"FileMosaic"} {...portraitImage} info smartImgFit={"center"}/>
</>
);
};
const sampleFileProp = {
id: "fileId-1",
size: 28 * 1024 * 1024,
type: "image/gif",
name: "Thor arrives wakanda.png",
imageUrl: "https://64.media.tumblr.com/078a5af7a51d438b1c1ee5bd77f1b1e5/tumblr_p81qv7KIPa1rvufhzo3_r1_400.gif",
const landscapeImage = {
id: "fileId-1",
size: 28 * 1024 * 1024,
type: "image/gif",
name: "(landscape)Thor arrives wakanda.gif",
imageUrl:
"https://64.media.tumblr.com/078a5af7a51d438b1c1ee5bd77f1b1e5/tumblr_p81qv7KIPa1rvufhzo3_r1_400.gif",
};
const portraitImage = {
id: "fileId-2",
size: 28 * 1024 * 1024,
type: "image/gif",
name: "(portrait)Iron man in stark tower.gif",
imageUrl: "https://i.pinimg.com/originals/b6/1d/6a/b61d6a1079d8e54932dcde9dc260dd2e.gif",
};`;
src/components/demo-components/filemosaic-demo/DemoFileMosaicSmartImgFit.tsx
+ 23
− 9
View file @ e21c0aa1
......@@ -5,25 +5,39 @@ const DemoFileMosaicSmartImgFit = (props: { card: boolean }) => {
if (props.card)
return (
<>
<FileCard {...sampleFileProp} info smartImgFit={false} />
<FileCard {...sampleFileProp} info smartImgFit={"orientation"} />
<FileCard {...sampleFileProp} info smartImgFit={"center"} />
<FileCard {...landscapeImage} info smartImgFit={false} />
<FileCard {...landscapeImage} info smartImgFit={"orientation"} />
<FileCard {...landscapeImage} info smartImgFit={"center"} />
<FileCard {...portraitImage} info smartImgFit={false} />
<FileCard {...portraitImage} info smartImgFit={"orientation"} />
<FileCard {...portraitImage} info smartImgFit={"center"} />
</>
);
return (
<>
<FileMosaic {...sampleFileProp} info smartImgFit={false} />
<FileMosaic {...sampleFileProp} info smartImgFit={"orientation"} />
<FileMosaic {...sampleFileProp} info smartImgFit={"center"} />
<FileMosaic {...landscapeImage} info smartImgFit={false} />
<FileMosaic {...landscapeImage} info smartImgFit={"orientation"} />
<FileMosaic {...landscapeImage} info smartImgFit={"center"} />
<FileMosaic {...portraitImage} info smartImgFit={false} />
<FileMosaic {...portraitImage} info smartImgFit={"orientation"} />
<FileMosaic {...portraitImage} info smartImgFit={"center"} />
</>
);
};
export default DemoFileMosaicSmartImgFit;
const sampleFileProp: ExtFile = {
const landscapeImage: ExtFile = {
id: "fileId-1",
size: 28 * 1024 * 1024,
type: "image/gif",
name: "Thor arrives wakanda.png",
imageUrl: "https://64.media.tumblr.com/078a5af7a51d438b1c1ee5bd77f1b1e5/tumblr_p81qv7KIPa1rvufhzo3_r1_400.gif",
name: "(landscape)Thor arrives wakanda.gif",
imageUrl:
"https://64.media.tumblr.com/078a5af7a51d438b1c1ee5bd77f1b1e5/tumblr_p81qv7KIPa1rvufhzo3_r1_400.gif",
};
const portraitImage: ExtFile = {
id: "fileId-2",
size: 28 * 1024 * 1024,
type: "image/gif",
name: "(portrait)Iron man in stark tower.gif",
imageUrl: "https://i.pinimg.com/originals/b6/1d/6a/b61d6a1079d8e54932dcde9dc260dd2e.gif",
};
src/pages/demo/FileCardDemoPage.jsx
+ 15
− 1
View file @ e21c0aa1
......@@ -350,11 +350,25 @@ const FileCardDemoPage = (props) => {
<AnchorToTab href="/api/filecard">{"<FileCard/>"}</AnchorToTab>
</li>
<li>
|
<AnchorToTab href="/api/fileinputbuttom">
{"<FileInputButton/>"}
</AnchorToTab>
</li>
<li>
<AnchorToTab href="/api/preview#fullscreen">
{"<FullScreen/>"}
</AnchorToTab>
</li>
<li>
<AnchorToTab href="/api/preview#imagepreview">
{"<ImagePreview/>"}
</AnchorToTab>
</li>
<li>
<AnchorToTab href="/api/preview#videopreview">
{"<VideoPreview/>"}
</AnchorToTab>
</li>
</ul>
</section>
</MainContentContainer>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment