From ae5a2bdae093209281550e1a24caa2c5fb037cf6 Mon Sep 17 00:00:00 2001
From: Jose Manuel Serrano Amaut <a20122128@pucp.pe>
Date: Fri, 17 Mar 2023 19:09:52 -0500
Subject: [PATCH] [WIP][FEAT]: Add smart image fit and API section to Avatar
demo page
---
.../avatar-demo/CodeDemoAvatarSmartFit.tsx | 44 +++++++++++++++
.../avatar-demo/DmoAvatarSmartImgFit.tsx | 26 +++++++++
src/pages/demo/AvatarDemoPage.tsx | 53 ++++++++++++++++++-
3 files changed, 121 insertions(+), 2 deletions(-)
create mode 100644 src/components/demo-components/avatar-demo/CodeDemoAvatarSmartFit.tsx
create mode 100644 src/components/demo-components/avatar-demo/DmoAvatarSmartImgFit.tsx
diff --git a/src/components/demo-components/avatar-demo/CodeDemoAvatarSmartFit.tsx b/src/components/demo-components/avatar-demo/CodeDemoAvatarSmartFit.tsx
new file mode 100644
index 0000000..2948ab6
--- /dev/null
+++ b/src/components/demo-components/avatar-demo/CodeDemoAvatarSmartFit.tsx
@@ -0,0 +1,44 @@
+import * as React from "react";
+import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
+interface CodeDemoAvatarPickFileProps {}
+const CodeDemoAvatarSmartFit: React.FC<CodeDemoAvatarPickFileProps> = (
+ props: CodeDemoAvatarPickFileProps
+) => {
+ return (
+ <ShowDemoCode
+ codeCompleteJS={completeCodeJS}
+ codeCompleteTS={completeCodeTS}
+ codeSandboxJS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
+ codeSandboxTS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
+ codeSplittedJS={splittedCodeJS}
+ codeSplittedTS={splittedCodeTS}
+ />
+ );
+};
+export default CodeDemoAvatarSmartFit;
+
+const splittedCodeJS = ``;
+const splittedCodeTS = splittedCodeJS;
+const completeCodeJS = `import * as React from "react";
+import { Avatar } from "@files-ui/react";
+const landscapeImage =
+ "https://64.media.tumblr.com/078a5af7a51d438b1c1ee5bd77f1b1e5/tumblr_p81qv7KIPa1rvufhzo3_r1_400.gif";
+
+const portraitImage =
+ "https://i.pinimg.com/originals/b6/1d/6a/b61d6a1079d8e54932dcde9dc260dd2e.gif";
+
+export default function App = () => {
+ return (
+ <>
+ <Avatar src={landscapeImage} readOnly smartImgFit={false} />
+ <Avatar src={landscapeImage} readOnly smartImgFit={"orientation"} />
+ <Avatar src={landscapeImage} readOnly smartImgFit={"center"} />
+
+ <Avatar src={portraitImage} readOnly smartImgFit={false} />
+ <Avatar src={portraitImage} readOnly smartImgFit={"orientation"} />
+ <Avatar src={portraitImage} readOnly smartImgFit={"center"} />
+ </>
+ );
+};`;
+
+const completeCodeTS = completeCodeJS;
diff --git a/src/components/demo-components/avatar-demo/DmoAvatarSmartImgFit.tsx b/src/components/demo-components/avatar-demo/DmoAvatarSmartImgFit.tsx
new file mode 100644
index 0000000..c76aae7
--- /dev/null
+++ b/src/components/demo-components/avatar-demo/DmoAvatarSmartImgFit.tsx
@@ -0,0 +1,26 @@
+import * as React from "react";
+import { Avatar, AvatarProps } from "../../../files-ui";
+interface DemoAvatarFallBackProps {}
+
+const landscapeImage =
+ "https://64.media.tumblr.com/078a5af7a51d438b1c1ee5bd77f1b1e5/tumblr_p81qv7KIPa1rvufhzo3_r1_400.gif";
+
+const portraitImage =
+ "https://i.pinimg.com/originals/b6/1d/6a/b61d6a1079d8e54932dcde9dc260dd2e.gif";
+
+const DemoAvatarSmartImgFit: React.FC<DemoAvatarFallBackProps> = (
+ props: DemoAvatarFallBackProps
+) => {
+ return (
+ <>
+ <Avatar src={landscapeImage} readOnly smartImgFit={false} />
+ <Avatar src={landscapeImage} readOnly smartImgFit={"orientation"} />
+ <Avatar src={landscapeImage} readOnly smartImgFit={"center"} />
+
+ <Avatar src={portraitImage} readOnly smartImgFit={false} />
+ <Avatar src={portraitImage} readOnly smartImgFit={"orientation"} />
+ <Avatar src={portraitImage} readOnly smartImgFit={"center"} />
+ </>
+ );
+};
+export default DemoAvatarSmartImgFit;
diff --git a/src/pages/demo/AvatarDemoPage.tsx b/src/pages/demo/AvatarDemoPage.tsx
index f7baba5..61aa39e 100644
--- a/src/pages/demo/AvatarDemoPage.tsx
+++ b/src/pages/demo/AvatarDemoPage.tsx
@@ -15,6 +15,9 @@ import DemoAvatarPickFile from "../../components/demo-components/avatar-demo/Dem
import CodeDemoAvatarPickFile from "../../components/demo-components/avatar-demo/CodeDemoAvatarPickFile";
import DemoAvatarFallBack from "../../components/demo-components/avatar-demo/DemoAvatarFallBack";
import CodeDemoAvatarFallBack from "../../components/demo-components/avatar-demo/CodeDemoAvatarFallBack";
+import AnchorToTab from "../../components/util-components/AnchorToTab";
+import DemoAvatarSmartImgFit from "../../components/demo-components/avatar-demo/DmoAvatarSmartImgFit";
+import CodeDemoAvatarSmartFit from "../../components/demo-components/avatar-demo/CodeDemoAvatarSmartFit";
interface AvatarDemoPageProps {}
const AvatarDemoPage: React.FC<AvatarDemoPageProps> = (
@@ -92,12 +95,58 @@ const AvatarDemoPage: React.FC<AvatarDemoPageProps> = (
display: "flex",
width: "100%",
justifyContent: "space-evenly",
+ flexWrap: "wrap",
+ gap: "5px",
}}
>
<DemoAvatarFallBack />
</Paper>
<CodeDemoAvatarFallBack />
</section>
+
+ <section id="smart-image-fit">
+ <SubTitle content="Smart image fit" />
+ <DescParagraph>
+ <CodeHighlight>Avatar</CodeHighlight> with
+ <TypeHighlight>smartImgFit</TypeHighlight> prop will display image
+ according to its heigh and width.
+ <br />
+ Image with height greater than its width has a "portrait"
+ orientation. Otherwise it has a "landscape" orientation.
+ <br />
+ In Avatar component the default value is "center".
+ </DescParagraph>
+
+ <Paper
+ variant="outlined"
+ style={{
+ padding: "25px",
+ //padding:"auto",
+ display: "flex",
+ width: "100%",
+ justifyContent: "space-evenly",
+ flexWrap: "wrap",
+ gap: "50px",
+ }}
+ >
+ <DemoAvatarSmartImgFit />
+ </Paper>
+
+ <CodeDemoAvatarSmartFit />
+ </section>
+
+ <section id="api">
+ <SubTitle content="API" />
+ <DescParagraph>
+ See the documentation below for a complete reference to all of the
+ props available to the components mentioned here.
+ </DescParagraph>
+ <ul>
+ <li>
+ <AnchorToTab href="/api/avatar">{"<Avatar/>"}</AnchorToTab>
+ </li>
+ </ul>
+ </section>
</MainContentContainer>
<RightMenuContainer>
@@ -127,7 +176,7 @@ const rightMenuItems = [
{
id: 4,
label: "Smart image fit",
- referTo: "/components/filemosaic#smart-image-fit",
+ referTo: "/components/avatar#smart-image-fit",
},
{
id: 5,
@@ -152,6 +201,6 @@ const rightMenuItems = [
{
id: 9,
label: "API",
- referTo: "/components/filecard#api",
+ referTo: "/components/avatar#api",
},
];
--
GitLab