From e21c0aa199227f41797036378c80274cd7444df3 Mon Sep 17 00:00:00 2001
From: Jose Manuel Serrano Amaut <a20122128@pucp.pe>
Date: Sat, 11 Mar 2023 19:01:38 -0500
Subject: [PATCH] [REF]: Add landscape and portrait image to smartImgFit demo
---
.../CodeJSFileMosaicSmartImgFit.jsx | 58 +++++++++++++------
.../DemoFileMosaicSmartImgFit.tsx | 32 +++++++---
src/pages/demo/FileCardDemoPage.jsx | 16 ++++-
3 files changed, 78 insertions(+), 28 deletions(-)
diff --git a/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicSmartImgFit.jsx b/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicSmartImgFit.jsx
index 56b7b87..7a3802a 100644
--- a/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicSmartImgFit.jsx
+++ b/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicSmartImgFit.jsx
@@ -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",
};`;
diff --git a/src/components/demo-components/filemosaic-demo/DemoFileMosaicSmartImgFit.tsx b/src/components/demo-components/filemosaic-demo/DemoFileMosaicSmartImgFit.tsx
index 778c2fb..26735bf 100644
--- a/src/components/demo-components/filemosaic-demo/DemoFileMosaicSmartImgFit.tsx
+++ b/src/components/demo-components/filemosaic-demo/DemoFileMosaicSmartImgFit.tsx
@@ -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",
};
diff --git a/src/pages/demo/FileCardDemoPage.jsx b/src/pages/demo/FileCardDemoPage.jsx
index 23bce69..7f82adb 100644
--- a/src/pages/demo/FileCardDemoPage.jsx
+++ b/src/pages/demo/FileCardDemoPage.jsx
@@ -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>
--
GitLab