From e3915abb5a10714634dc99681fa1812414c77e43 Mon Sep 17 00:00:00 2001
From: Jose Manuel Serrano Amaut <a20122128@pucp.pe>
Date: Sat, 11 Mar 2023 00:36:02 -0500
Subject: [PATCH] [FEAT]: Add smart image fit demo in FIle mosaic and card
---
.../CodeJSFileMosaicSmartImgFit.jsx | 59 +++++++++++++++++++
.../DemoFileMosaicSmartImgFit.tsx | 29 +++++++++
.../DemoFileMosaicValidation.jsx | 42 ++++++-------
src/pages/demo/FileCardDemoPage.jsx | 20 ++++++-
src/pages/demo/FileMosaicDemoPage.jsx | 19 ++++++
5 files changed, 147 insertions(+), 22 deletions(-)
create mode 100644 src/components/demo-components/filemosaic-demo/CodeJSFileMosaicSmartImgFit.jsx
create mode 100644 src/components/demo-components/filemosaic-demo/DemoFileMosaicSmartImgFit.tsx
diff --git a/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicSmartImgFit.jsx b/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicSmartImgFit.jsx
new file mode 100644
index 0000000..56b7b87
--- /dev/null
+++ b/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicSmartImgFit.jsx
@@ -0,0 +1,59 @@
+import * as React from "react";
+import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
+
+const CodeJSFileMosaicSmartImgFit = (card) => {
+ return (
+ <ShowDemoCode
+ codeCompleteJS={completeCodeJS(card)}
+ codeCompleteTS={completeCodeTS(card)}
+ codeSandboxJS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
+ codeSandboxTS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
+ codeSplittedJS={splittedCodeJS(card)}
+ codeSplittedTS={splittedCodeTS(card)}
+ />
+ );
+};
+export default CodeJSFileMosaicSmartImgFit;
+
+const splittedCodeJS = (card)=>``;
+const splittedCodeTS = (card)=>``;
+
+const completeCodeTS = (card)=>`import * as React from "react";
+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"}/>
+ </>
+ );
+};
+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 completeCodeJS = (card)=>`import * as React from "react";
+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"}/>
+ </>
+ );
+};
+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",
+};`;
diff --git a/src/components/demo-components/filemosaic-demo/DemoFileMosaicSmartImgFit.tsx b/src/components/demo-components/filemosaic-demo/DemoFileMosaicSmartImgFit.tsx
new file mode 100644
index 0000000..778c2fb
--- /dev/null
+++ b/src/components/demo-components/filemosaic-demo/DemoFileMosaicSmartImgFit.tsx
@@ -0,0 +1,29 @@
+import * as React from "react";
+import { ExtFile, FileCard, FileMosaic } from "../../../files-ui";
+
+const DemoFileMosaicSmartImgFit = (props: { card: boolean }) => {
+ if (props.card)
+ return (
+ <>
+ <FileCard {...sampleFileProp} info smartImgFit={false} />
+ <FileCard {...sampleFileProp} info smartImgFit={"orientation"} />
+ <FileCard {...sampleFileProp} info smartImgFit={"center"} />
+ </>
+ );
+ return (
+ <>
+ <FileMosaic {...sampleFileProp} info smartImgFit={false} />
+ <FileMosaic {...sampleFileProp} info smartImgFit={"orientation"} />
+ <FileMosaic {...sampleFileProp} info smartImgFit={"center"} />
+ </>
+ );
+};
+export default DemoFileMosaicSmartImgFit;
+
+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",
+};
diff --git a/src/components/demo-components/filemosaic-demo/DemoFileMosaicValidation.jsx b/src/components/demo-components/filemosaic-demo/DemoFileMosaicValidation.jsx
index f02c995..5d0f5aa 100644
--- a/src/components/demo-components/filemosaic-demo/DemoFileMosaicValidation.jsx
+++ b/src/components/demo-components/filemosaic-demo/DemoFileMosaicValidation.jsx
@@ -1,6 +1,26 @@
import * as React from "react";
import { FileCard, FileMosaic } from "../../../files-ui";
+const DemoFileMosaicValidation = ({ card }) => {
+ if (card)
+ return (
+ <>
+ {sampleFilesProps.map((extFile) => (
+ <FileCard key={extFile.id} {...extFile} info />
+ ))}
+ </>
+ );
+
+ return (
+ <>
+ {sampleFilesProps.map((extFile) => (
+ <FileMosaic key={extFile.id} {...extFile} info />
+ ))}
+ </>
+ );
+};
+export default DemoFileMosaicValidation;
+
const sampleFilesProps = [
{
id: "fileId-1",
@@ -23,24 +43,4 @@ const sampleFilesProps = [
name: "non valid file created from props.jpg",
valid: true,
},
-];
-
-const DemoFileMosaicValidation = ({ card }) => {
- if (card)
- return (
- <>
- {sampleFilesProps.map((extFile) => (
- <FileCard key={extFile.id} {...extFile} info />
- ))}
- </>
- );
-
- return (
- <>
- {sampleFilesProps.map((extFile) => (
- <FileMosaic key={extFile.id} {...extFile} info />
- ))}
- </>
- );
-};
-export default DemoFileMosaicValidation;
+];
\ No newline at end of file
diff --git a/src/pages/demo/FileCardDemoPage.jsx b/src/pages/demo/FileCardDemoPage.jsx
index 6dcd66d..23bce69 100644
--- a/src/pages/demo/FileCardDemoPage.jsx
+++ b/src/pages/demo/FileCardDemoPage.jsx
@@ -23,6 +23,8 @@ import DemoFileMosaicUploadStatus from "../../components/demo-components/filemos
import CodeJSFileMosaicUploadStatus from "../../components/demo-components/filemosaic-demo/CodeJSFileMosaicUploadStatus";
import DemoFileCardActions from "../../components/demo-components/filemosaic-demo/DemoFileCradActions";
import CodeJSFileCardActions from "../../components/demo-components/filemosaic-demo/CodeJSFileCardActions";
+import DemoFileMosaicSmartImgFit from "../../components/demo-components/filemosaic-demo/DemoFileMosaicSmartImgFit";
+import CodeJSFileMosaicSmartImgFit from "../../components/demo-components/filemosaic-demo/CodeJSFileMosaicSmartImgFit";
const FileCardDemoPage = (props) => {
return (
@@ -321,7 +323,22 @@ const FileCardDemoPage = (props) => {
<CodeJSFileMosaicDarkMode card />
</section>
+ <section id="smart-image-fit">
+ <SubTitle content="Smart image fit" />
+ <DescParagraph>
+ <CodeHighlight>FileCard</CodeHighlight> with
+ <TypeHighlight>smartImgFit</TypeHighlight> prop will display image
+ according to its heigh and width. Image width height greater than
+ its width has a "portrait" orientation. Otherwise it has a
+ "landscape" orientation.
+ </DescParagraph>
+ <DemoContainerFileMosaic>
+ <DemoFileMosaicSmartImgFit card />
+ </DemoContainerFileMosaic>
+
+ <CodeJSFileMosaicSmartImgFit card />
+ </section>
<section id="api">
<SubTitle content="API" />
<DescParagraph>
@@ -332,7 +349,8 @@ const FileCardDemoPage = (props) => {
<li>
<AnchorToTab href="/api/filecard">{"<FileCard/>"}</AnchorToTab>
</li>
- <li>|
+ <li>
+ |
<AnchorToTab href="/api/fileinputbuttom">
{"<FileInputButton/>"}
</AnchorToTab>
diff --git a/src/pages/demo/FileMosaicDemoPage.jsx b/src/pages/demo/FileMosaicDemoPage.jsx
index af381aa..d7f159e 100644
--- a/src/pages/demo/FileMosaicDemoPage.jsx
+++ b/src/pages/demo/FileMosaicDemoPage.jsx
@@ -27,6 +27,8 @@ import CodeJSFileMosaicDarkMode from "../../components/demo-components/filemosai
import DemoFileMosaicFileIcons from "../../components/demo-components/filemosaic-demo/DemoFileMosaicFileIcons";
import DemoFileCardActions from "../../components/demo-components/filemosaic-demo/DemoFileCradActions";
import CodeJSFileCardActions from "../../components/demo-components/filemosaic-demo/CodeJSFileCardActions";
+import DemoFileMosaicSmartImgFit from "../../components/demo-components/filemosaic-demo/DemoFileMosaicSmartImgFit";
+import CodeJSFileMosaicSmartImgFit from "../../components/demo-components/filemosaic-demo/CodeJSFileMosaicSmartImgFit";
const FileMosaicDemoPage = (props) => {
return (
@@ -336,6 +338,23 @@ const FileMosaicDemoPage = (props) => {
<CodeJSFileMosaicDarkMode />
</section>
+ <section id="smart-image-fit">
+ <SubTitle content="Smart image fit" />
+ <DescParagraph>
+ <CodeHighlight>FileMosaic</CodeHighlight> with
+ <TypeHighlight>smartImgFit</TypeHighlight> prop will display image
+ according to its heigh and width. Image width height greater than
+ its width has a "portrait" orientation. Otherwise it has a
+ "landscape" orientation.
+ </DescParagraph>
+
+ <DemoContainerFileMosaic>
+ <DemoFileMosaicSmartImgFit />
+ </DemoContainerFileMosaic>
+
+ <CodeJSFileMosaicSmartImgFit />
+ </section>
+
{/* <section id="localization">
<SubTitle content="Localization" />
<DescParagraph>
--
GitLab