From 903286e493c8dd1de4e04f8c17c86b5b569af9db Mon Sep 17 00:00:00 2001
From: Jose Manuel Serrano Amaut <a20122128@pucp.pe>
Date: Fri, 17 Mar 2023 13:17:07 -0500
Subject: [PATCH] [WIP][FEAT]: Add Basic avater demo (read only)
---
.../ExtraComponentsMainPageAvatar.tsx | 3 +-
.../avatar-demo/BasicDemoAvatar.tsx | 44 ++-----
.../avatar-demo/CodeDemoAvatarBasic.tsx | 40 ++++++
src/data/imagesURL.js | 2 +
src/files-ui/components/avatar/Avatar.tsx | 10 +-
src/files-ui/components/avatar/AvatarProps.ts | 2 +-
.../FileMosaicImageLayer.tsx | 2 +-
.../components/file-mosaic/FileMosaicProps.ts | 2 +-
.../ImagePreview/ImagePreviewProps.ts | 2 +-
src/pages/demo/AvatarDemoPage.tsx | 114 ++++++------------
src/pages/demo/FileCardDemoPage.jsx | 12 +-
src/pages/demo/FileMosaicDemoPage.jsx | 12 +-
12 files changed, 118 insertions(+), 127 deletions(-)
create mode 100644 src/components/demo-components/avatar-demo/CodeDemoAvatarBasic.tsx
create mode 100644 src/data/imagesURL.js
diff --git a/src/components/MainPage/SecondaryRight/ExtraComponentsMainPageAvatar.tsx b/src/components/MainPage/SecondaryRight/ExtraComponentsMainPageAvatar.tsx
index 2bd6bff..f26e945 100644
--- a/src/components/MainPage/SecondaryRight/ExtraComponentsMainPageAvatar.tsx
+++ b/src/components/MainPage/SecondaryRight/ExtraComponentsMainPageAvatar.tsx
@@ -12,6 +12,7 @@ import {
} from "../../../files-ui";
import AnchorToTab from "../../util-components/AnchorToTab";
import TypeHighlight from "../../typeHighlight/TypeHighlight";
+import { BIA_URL } from "../../../data/imagesURL";
interface ExtraComponentsMainPageProps {
darkMode?: boolean;
@@ -23,7 +24,7 @@ const ExtraComponentsMainPageAvatar: React.FC<ExtraComponentsMainPageProps> = (
const [isUloading, setIsUploading] = React.useState<boolean>(false);
const [avatarSrc, setAvatarSrc] = React.useState<string | undefined | File>(
- "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSaKgRXvIBtfmfJ49rSmVbPLTgRqPPYjMA_94o0KD4WtHK55Oh_MYbVF8JmPqyddweUx8Y&usqp=CAU"
+ BIA_URL
);
const handleChange = async (file: File) => {
diff --git a/src/components/demo-components/avatar-demo/BasicDemoAvatar.tsx b/src/components/demo-components/avatar-demo/BasicDemoAvatar.tsx
index 2a25a63..038feff 100644
--- a/src/components/demo-components/avatar-demo/BasicDemoAvatar.tsx
+++ b/src/components/demo-components/avatar-demo/BasicDemoAvatar.tsx
@@ -1,43 +1,15 @@
import * as React from "react";
-import { Avatar,ServerResponse, uploadFile } from "../../../files-ui";
-
-const REMOTE =
- "https://files-ui-express-static-file-storage.vercel.app/39d33dff2d41b522c1ea276c4b82507f96b9699493d2e7b3f5c864ba743d9503";
+import { Avatar } from "../../../files-ui";
const BasicDemoAvatar = () => {
- const [avatarSrc, setAvatarSrc] = React.useState<string | undefined>(
- "https://files-ui-temp-storage.s3.amazonaws.com/3b3b28b79c49f52ef1d89a35337797532b9cf4b5f3a00678e6f775c974dfbd56.png"
- );
- const [isUloading, setIsUploading] = React.useState<boolean>(false);
-
- const handleChange2 = async (file: File) => {
- const endpoint: string = REMOTE + "/file/28048465460";
- setIsUploading(true);
- try {
- const res: ServerResponse = await uploadFile(file, endpoint);
- if (!res.success) alert(res.message);
- else {
- const { URL } = res.payload;
- setAvatarSrc(URL);
- }
- setIsUploading(false);
- } catch (error) {
- console.log("ERROR:", error);
- alert("ERROR ON UPLOAD");
- setIsUploading(false);
- }
- };
-
return (
- <React.Fragment>
- <Avatar
- src={avatarSrc}
- //variant="circle"
- style={{ width: "280px", height: "280px" }}
- onChange={handleChange2}
- isUloading={isUloading}
- />
- </React.Fragment>
+ <Avatar
+ readOnly
+ src={
+ "https://i.pinimg.com/564x/9a/8b/cf/9a8bcfaba81783eff9241538b00343b1.jpg"
+ }
+ alt="Isabella"
+ />
);
};
export default BasicDemoAvatar;
diff --git a/src/components/demo-components/avatar-demo/CodeDemoAvatarBasic.tsx b/src/components/demo-components/avatar-demo/CodeDemoAvatarBasic.tsx
new file mode 100644
index 0000000..ae71c56
--- /dev/null
+++ b/src/components/demo-components/avatar-demo/CodeDemoAvatarBasic.tsx
@@ -0,0 +1,40 @@
+import * as React from "react";
+import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
+
+const CodeDemoAvatarBasic = () =>{
+ 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 CodeDemoAvatarBasic;
+
+
+
+const splittedCodeJS = `<Avatar
+ readOnly
+ src={"https://i.pinimg.com/564x/9a/8b/cf/9a8bcfaba81783eff9241538b00343b1.jpg"}
+ alt="Isabella"
+/>`;
+const completeCodeTS = splittedCodeJS;
+const completeCodeJS = `import * as React from "react";
+import { Avatar } from "@files-ui/react";
+const BasicDemoAvatar = () => {
+ return (
+ <Avatar
+ readOnly
+ src={"https://i.pinimg.com/564x/9a/8b/cf/9a8bcfaba81783eff9241538b00343b1.jpg"}
+ alt="Isabella"
+ />
+ );
+};
+export default BasicDemoAvatar;
+`;
+
+const splittedCodeTS =completeCodeJS;
diff --git a/src/data/imagesURL.js b/src/data/imagesURL.js
new file mode 100644
index 0000000..8720c9a
--- /dev/null
+++ b/src/data/imagesURL.js
@@ -0,0 +1,2 @@
+export const BIA_URL =
+ "https://i.pinimg.com/564x/9a/8b/cf/9a8bcfaba81783eff9241538b00343b1.jpg";
diff --git a/src/files-ui/components/avatar/Avatar.tsx b/src/files-ui/components/avatar/Avatar.tsx
index 796af6a..b6b001b 100644
--- a/src/files-ui/components/avatar/Avatar.tsx
+++ b/src/files-ui/components/avatar/Avatar.tsx
@@ -9,19 +9,23 @@ import InfiniteLoader from "../loader/InfiniteLoader/InfiniteLoader";
import Layer from "../file-mosaic/components/file-mosaic-layer/Layer";
const Avatar: React.FC<AvatarProps> = (props: AvatarProps) => {
const {
- style,
+
+ readOnly,
src,
- onChange,
alt,
+ onChange,
emptyLabel,
changeLabel,
- readOnly,
+
variant,
borderRadius,
uploadingLabel,
isUloading,
onError,
+
smartImgFit,
+
+ style,
} = mergeProps(props, defaultAvatarProps);
const inputRef: React.RefObject<HTMLInputElement> =
diff --git a/src/files-ui/components/avatar/AvatarProps.ts b/src/files-ui/components/avatar/AvatarProps.ts
index 513826b..8bcd8b8 100644
--- a/src/files-ui/components/avatar/AvatarProps.ts
+++ b/src/files-ui/components/avatar/AvatarProps.ts
@@ -33,7 +33,7 @@ export interface AvatarFullProps extends OverridableComponentProps {
* If not present, image width will be set to 100%.
*
* If present, image will be analized and displayed according to its heigh and width.
- * Image width height greater than its width has a "portrait" orientation.
+ * Image with height greater than its width has a "portrait" orientation.
* Otherwise it has a "landscape" orientation.
* - If value is "orientation", image will be displayed complete by giving 100%
* to width prop if the orientation is "landscape".
diff --git a/src/files-ui/components/file-mosaic/components/FIleMosaicImageLayer/FileMosaicImageLayer.tsx b/src/files-ui/components/file-mosaic/components/FIleMosaicImageLayer/FileMosaicImageLayer.tsx
index 4ce3ba9..55f4935 100644
--- a/src/files-ui/components/file-mosaic/components/FIleMosaicImageLayer/FileMosaicImageLayer.tsx
+++ b/src/files-ui/components/file-mosaic/components/FIleMosaicImageLayer/FileMosaicImageLayer.tsx
@@ -26,7 +26,7 @@ interface FileMosaicImageLayerProps {
* If not present, image width will be set to 100%.
*
* If present, image will be analized and displayed according to its heigh and width.
- * Image width height greater than its width has a "portrait" orientation.
+ * Image with height greater than its width has a "portrait" orientation.
* Otherwise it has a "landscape" orientation.
* - If value is "orientation", image will be displayed complete by giving 100%
* to width prop if the orientation is "landscape".
diff --git a/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaicProps.ts b/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaicProps.ts
index b4e2932..1f091d4 100644
--- a/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaicProps.ts
+++ b/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaicProps.ts
@@ -149,7 +149,7 @@ export interface FileMosaicPropsMap extends OverridableComponentProps {
* If not present, image width will be set to 100%.
*
* If present, image will be analized and displayed according to its heigh and width.
- * Image width height greater than its width has a "portrait" orientation.
+ * Image with height greater than its width has a "portrait" orientation.
* Otherwise it has a "landscape" orientation.
* - If value is "orientation", image will be displayed complete by giving 100%
* to width prop if the orientation is "landscape".
diff --git a/src/files-ui/components/previews/ImagePreview/ImagePreviewProps.ts b/src/files-ui/components/previews/ImagePreview/ImagePreviewProps.ts
index a6b6b86..ee5383d 100644
--- a/src/files-ui/components/previews/ImagePreview/ImagePreviewProps.ts
+++ b/src/files-ui/components/previews/ImagePreview/ImagePreviewProps.ts
@@ -35,7 +35,7 @@ export interface ImagePreviewFullProps extends OverridableComponentProps {
* If not present, image width will be set to 100%.
*
* If present, image will be analized and displayed according to its heigh and width.
- * Image width height greater than its width has a "portrait" orientation.
+ * Image with height greater than its width has a "portrait" orientation.
* Otherwise it has a "landscape" orientation.
* - If value is "orientation", image will be displayed complete by giving 100%
* to width prop if the orientation is "landscape".
diff --git a/src/pages/demo/AvatarDemoPage.tsx b/src/pages/demo/AvatarDemoPage.tsx
index fd482d7..a7772ee 100644
--- a/src/pages/demo/AvatarDemoPage.tsx
+++ b/src/pages/demo/AvatarDemoPage.tsx
@@ -1,7 +1,8 @@
-import { Alert, AlertTitle, Paper } from "@mui/material";
import * as React from "react";
+import { Paper } from "@mui/material";
import CodeHighlight from "../../components/codeHighlight/CodeHighlight";
import BasicDemoAvatar from "../../components/demo-components/avatar-demo/BasicDemoAvatar";
+import CodeDemoAvatarBasic from "../../components/demo-components/avatar-demo/CodeDemoAvatarBasic";
import DescParagraph from "../../components/demo-components/desc-paragraph/DescParagraph";
import SubTitle from "../../components/demo-components/sub-title/SubTitle";
import MainContentContainer from "../../components/layout-pages/MainContentContainer";
@@ -13,43 +14,48 @@ import RightMenu from "../../components/RightMenu/RightMenu";
const rightMenuItems = [
{
id: 0,
- label: "Basic dropzone",
- referTo: "/components/dropzone#basic-dropzone",
+ label: "Basic avatar",
+ referTo: "/components/avatar#basic-avatar",
},
{
id: 1,
- label: "Validation",
- referTo: "/components/dropzone#validation",
+ label: "Picking image file",
+ referTo: "/components/avatar#picking-image-file",
},
{
- id: 1,
- label: "Custom validation",
- referTo: "/components/dropzone#custom-validation",
+ id: 3,
+ label: "FallBack",
+ referTo: "/components/avatar#fallback",
},
{
- id: 2,
- label: "Dropzone events",
- referTo: "/components/dropzone#dropzone-events",
+ id: 4,
+ label: "Smart image fit",
+ referTo: "/components/filemosaic#smart-image-fit",
},
{
- id: 3,
- label: "Uploading",
- referTo: "/components/dropzone#uploading",
+ id: 5,
+ label: "Uploading & loading",
+ referTo: "/components/avatar#uploading",
},
{
- id: 4,
+ id: 6,
+ label: "Variants",
+ referTo: "/components/avatar#variants",
+ },
+ {
+ id: 7,
label: "Styling",
- referTo: "/components/dropzone#styling",
+ referTo: "/components/avatar#styling",
},
{
- id: 5,
- label: "Localization",
- referTo: "/components/dropzone#localization",
+ id: 8,
+ label: "Labels",
+ referTo: "/components/avatar#labels",
},
{
- id: 6,
- label: "Dark mode",
- referTo: "/components/dropzone#dark-mode",
+ id: 9,
+ label: "API",
+ referTo: "/components/filecard#api",
},
];
@@ -63,41 +69,17 @@ const AvatarDemoPage: React.FC<AvatarDemoPageProps> = (
<MainTitle>Avatar</MainTitle>
<MainParagraph>
- The "avatar" component is a special file{" "}
- <CodeHighlight>input</CodeHighlight> designed for setting an image by
- either dragging and dropping files there or by picking files from a
- file dialog.
+ This "avatar" component can be used tu just display an image or even
+ can be a special file <CodeHighlight>input</CodeHighlight> designed
+ for setting an image
+ {/* by either dragging and dropping files there or */}
+ by picking a fils from a file dialog.
</MainParagraph>
- <DescParagraph>
- You can consider that this widget is a kind of combination between
- dropzone and file mosaic components.
- <ol>
- <li>The image</li>
- <li>
- The file(s) must be validated or not. If validation is required,
- it can be done by taking into account a predefined set of allowed{" "}
- <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept">
- Common MIME Types
- </a>
- ; specifiying the max file size (in bytes) and/or the max amount
- of files.
- </li>
- <li>The file(s) must be uploaded somewhere in the internet.</li>
- </ol>
- </DescParagraph>
- <DescParagraph>
- It's meant to be an improved version of the "react-dropzone" and
- "dropzone" packages.
- </DescParagraph>
-
<section id="basic-avatar">
- <SubTitle content="Basic Avatar" />
+ <SubTitle content="Basic Avatar (read only)" />
<DescParagraph>
- In this demo we set avatar with the minimun props that allows you to
- get done fast. These props are{" "}
- <CodeHighlight>onChange</CodeHighlight> and{" "}
- <CodeHighlight>value</CodeHighlight>.
+ The most basic use is to set a fixed image from Url.
</DescParagraph>
<Paper
variant="outlined"
@@ -105,34 +87,12 @@ const AvatarDemoPage: React.FC<AvatarDemoPageProps> = (
padding: "25px",
display: "flex",
width: "100%",
- alignItems: "center",
+ justifyContent: "center",
}}
>
<BasicDemoAvatar />
</Paper>
- {"<BasicDemoAvatarCode/>>"}
- {/* <BasicDropzoneCodeJS /> */}
- <Alert severity="info">
- <AlertTitle> FileMosaic </AlertTitle>
- For completeness, these examples include{" "}
- <CodeHighlight>{`<FileMosaic/>`} </CodeHighlight>
- component for showing the files selected by the user with minimun
- props too. For further information of this component check out the{" "}
- <a href="/components/filemosaic">FileMosaic</a> page.
- </Alert>
- <br />
- <Alert severity="info">
- <AlertTitle> ExtFile </AlertTitle>
- {/* This is an info alert — <strong>check it out!</strong>
- */}
- <strong>ExtFile type </strong>
- is explicity used in the
- <strong> Typescript</strong> example and is implicity used in the{" "}
- <strong>Javascript</strong> example for handling the metadata that
- makes possible the information exchange between components. For
- further information about this data type check out the{" "}
- <a href="/types#ext-file">ExtFile-API. </a>
- </Alert>
+ <CodeDemoAvatarBasic />
</section>
</MainContentContainer>
diff --git a/src/pages/demo/FileCardDemoPage.jsx b/src/pages/demo/FileCardDemoPage.jsx
index 7f82adb..a287a51 100644
--- a/src/pages/demo/FileCardDemoPage.jsx
+++ b/src/pages/demo/FileCardDemoPage.jsx
@@ -328,9 +328,10 @@ const FileCardDemoPage = (props) => {
<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.
+ according to its heigh and width.
+ <br />
+ Image with height greater than its width has a "portrait"
+ orientation. Otherwise it has a "landscape" orientation.
</DescParagraph>
<DemoContainerFileMosaic>
@@ -410,6 +411,11 @@ const rightMenuItems = [
label: "Dark mode",
referTo: "/components/filecard#dark-mode",
},
+ {
+ id: 7,
+ label: "Smart image fit",
+ referTo: "/components/filemosaic#smart-image-fit",
+ },
{
id: 6,
label: "API",
diff --git a/src/pages/demo/FileMosaicDemoPage.jsx b/src/pages/demo/FileMosaicDemoPage.jsx
index a98c7b2..a407976 100644
--- a/src/pages/demo/FileMosaicDemoPage.jsx
+++ b/src/pages/demo/FileMosaicDemoPage.jsx
@@ -343,9 +343,10 @@ const FileMosaicDemoPage = (props) => {
<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.
+ according to its heigh and width.
+ <br />
+ Image with height greater than its width has a "portrait"
+ orientation. Otherwise it has a "landscape" orientation.
</DescParagraph>
<DemoContainerFileMosaic>
@@ -413,6 +414,11 @@ const rightMenuItems = [
label: "Dark mode",
referTo: "/components/filemosaic#dark-mode",
},
+ {
+ id: 7,
+ label: "Smart image fit",
+ referTo: "/components/filemosaic#smart-image-fit",
+ },
{
id: 6,
label: "API",
--
GitLab