Skip to content

Commit 7a7a8c8

Browse files
JinSSJ3JinSSJ3
authored
Merge pull request #14 from files-ui/26-add-avatar-demo-page-and-finish-avatar-component
26 add avatar demo page and finish avatar component
2 parents dd69388 + 8ee9a9f commit 7a7a8c8

32 files changed

+1022
-262
lines changed

‎src/components/MainPage/SecondaryRight/ExtraComponentsMainPageAvatar.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
} from "../../../files-ui";
1313
import AnchorToTab from "../../util-components/AnchorToTab";
1414
import TypeHighlight from "../../typeHighlight/TypeHighlight";
15+
import { BIA_URL } from "../../../data/imagesURL";
1516

1617
interface ExtraComponentsMainPageProps {
1718
darkMode?: boolean;
@@ -23,7 +24,7 @@ const ExtraComponentsMainPageAvatar: React.FC<ExtraComponentsMainPageProps> = (
2324
const [isUloading, setIsUploading] = React.useState<boolean>(false);
2425

2526
const [avatarSrc, setAvatarSrc] = React.useState<string | undefined | File>(
26-
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSaKgRXvIBtfmfJ49rSmVbPLTgRqPPYjMA_94o0KD4WtHK55Oh_MYbVF8JmPqyddweUx8Y&usqp=CAU"
27+
BIA_URL
2728
);
2829

2930
const handleChange = async (file: File) => {
@@ -62,15 +63,15 @@ const ExtraComponentsMainPageAvatar: React.FC<ExtraComponentsMainPageProps> = (
6263
<Avatar
6364
src={avatarSrc}
6465
onChange={handleChange}
65-
isUloading={isUloading}
66+
isLoading={isUloading}
6667
smartImgFit={"center"}
6768
style={{ width: "170px", height: "170px" }}
6869
//variant={"circle"}
6970
/>
7071
<Avatar
7172
src={avatarSrc}
7273
onChange={handleChange}
73-
isUloading={isUloading}
74+
isLoading={isUloading}
7475
smartImgFit={"center"}
7576
variant={"circle"}
7677
style={{ width: "170px", height: "170px" }}

‎src/components/demo-components/avatar-demo/BasicDemoAvatar.tsx‎

Lines changed: 4 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,9 @@
11
import * as React from "react";
2-
import { Avatar,ServerResponse, uploadFile } from "../../../files-ui";
3-
4-
const REMOTE =
5-
"https://files-ui-express-static-file-storage.vercel.app/39d33dff2d41b522c1ea276c4b82507f96b9699493d2e7b3f5c864ba743d9503";
2+
import { Avatar } from "../../../files-ui";
3+
const imageSrc =
4+
"https://i.pinimg.com/564x/9a/8b/cf/9a8bcfaba81783eff9241538b00343b1.jpg";
65

76
const BasicDemoAvatar = () => {
8-
const [avatarSrc, setAvatarSrc] = React.useState<string | undefined>(
9-
"https://files-ui-temp-storage.s3.amazonaws.com/3b3b28b79c49f52ef1d89a35337797532b9cf4b5f3a00678e6f775c974dfbd56.png"
10-
);
11-
const [isUloading, setIsUploading] = React.useState<boolean>(false);
12-
13-
const handleChange2 = async (file: File) => {
14-
const endpoint: string = REMOTE + "/file/28048465460";
15-
setIsUploading(true);
16-
try {
17-
const res: ServerResponse = await uploadFile(file, endpoint);
18-
if (!res.success) alert(res.message);
19-
else {
20-
const { URL } = res.payload;
21-
setAvatarSrc(URL);
22-
}
23-
setIsUploading(false);
24-
} catch (error) {
25-
console.log("ERROR:", error);
26-
alert("ERROR ON UPLOAD");
27-
setIsUploading(false);
28-
}
29-
};
30-
31-
return (
32-
<React.Fragment>
33-
<Avatar
34-
src={avatarSrc}
35-
//variant="circle"
36-
style={{ width: "280px", height: "280px" }}
37-
onChange={handleChange2}
38-
isUloading={isUloading}
39-
/>
40-
</React.Fragment>
41-
);
7+
return <Avatar readOnly src={imageSrc} alt="Isabella" />;
428
};
439
export default BasicDemoAvatar;

‎src/components/demo-components/avatar-demo/CodeAvatarVariant.tsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import * as React from "react";
2+
import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
3+
interface CodeDemoAvatarPickFileProps {}
4+
const CodeDemoAvatarVariant: React.FC<CodeDemoAvatarPickFileProps> = (
5+
props: CodeDemoAvatarPickFileProps
6+
) => {
7+
return (
8+
<ShowDemoCode
9+
codeCompleteJS={completeCodeJS}
10+
codeCompleteTS={completeCodeTS}
11+
codeSandboxJS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
12+
codeSandboxTS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
13+
codeSplittedJS={splittedCodeJS}
14+
codeSplittedTS={splittedCodeTS}
15+
/>
16+
);
17+
};
18+
export default CodeDemoAvatarVariant;
19+
20+
const splittedCodeJS = `<Avatar src={imageSrc} readOnly />
21+
<Avatar src={imageSrc} variant="circle" readOnly />`;
22+
23+
const splittedCodeTS = splittedCodeJS;
24+
const completeCodeJS = `import * as React from "react";
25+
import { Avatar } from "@files-ui/react";
26+
const imageSrc =
27+
"https://i.pinimg.com/564x/9a/8b/cf/9a8bcfaba81783eff9241538b00343b1.jpg";
28+
29+
export default function DemoAvatarVariants = () => {
30+
return (
31+
<>
32+
<Avatar src={imageSrc} readOnly />
33+
<Avatar src={imageSrc} variant="circle" readOnly />
34+
</>
35+
);
36+
};`;
37+
38+
const completeCodeTS = completeCodeJS;

‎src/components/demo-components/avatar-demo/CodeDemoAvatarBasic.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import * as React from "react";
2+
import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
3+
4+
const CodeDemoAvatarBasic = () => {
5+
return (
6+
<ShowDemoCode
7+
codeCompleteJS={completeCodeJS}
8+
codeCompleteTS={completeCodeTS}
9+
codeSandboxJS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
10+
codeSandboxTS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
11+
codeSplittedJS={splittedCodeJS}
12+
codeSplittedTS={splittedCodeTS}
13+
/>
14+
);
15+
};
16+
export default CodeDemoAvatarBasic;
17+
18+
const splittedCodeJS = `<Avatar
19+
readOnly
20+
src={"https://i.pinimg.com/564x/9a/8b/cf/9a8bcfaba81783eff9241538b00343b1.jpg"}
21+
alt="Isabella"
22+
/>`;
23+
const splittedCodeTS = splittedCodeJS;
24+
const completeCodeJS = `import * as React from "react";
25+
import { Avatar } from "@files-ui/react";
26+
27+
const imageSrc =
28+
"https://i.pinimg.com/564x/9a/8b/cf/9a8bcfaba81783eff9241538b00343b1.jpg";
29+
30+
const BasicDemoAvatar = () => {
31+
return <Avatar readOnly src={imageSrc} alt="Isabella" />;
32+
};
33+
export default BasicDemoAvatar;`;
34+
35+
const completeCodeTS = completeCodeJS;

‎src/components/demo-components/avatar-demo/CodeDemoAvatarFallBack.tsx‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import * as React from "react";
2+
import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
3+
interface CodeDemoAvatarPickFileProps {}
4+
const CodeDemoAvatarFallBack: React.FC<CodeDemoAvatarPickFileProps> = (
5+
props: CodeDemoAvatarPickFileProps
6+
) => {
7+
return (
8+
<ShowDemoCode
9+
codeCompleteJS={completeCodeJS}
10+
codeCompleteTS={completeCodeTS}
11+
codeSandboxJS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
12+
codeSandboxTS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
13+
codeSplittedJS={splittedCodeJS}
14+
codeSplittedTS={splittedCodeTS}
15+
/>
16+
);
17+
};
18+
export default CodeDemoAvatarFallBack;
19+
20+
const splittedCodeJS = `<Avatar
21+
src={imageSource}
22+
readOnly
23+
onError={() => setImageSource(fallBackImage)}
24+
alt="Avatar"
25+
/>
26+
<Avatar
27+
src={imageSource2}
28+
onError={() => setImageSource2(fallBackImage)}
29+
onChange={(imgSource) => setImageSource2(imgSource)}
30+
accept=".pdf, .png"
31+
alt="Avatar2"
32+
/>`;
33+
const splittedCodeTS = splittedCodeJS;
34+
const completeCodeJS = `import * as React from "react";
35+
import { Avatar } from "@files-ui/react";
36+
37+
const fallBackImage =
38+
"https://static.vecteezy.com/system/resources/thumbnails/009/292/244/small/default-avatar-icon-of-social-media-user-vector.jpg";
39+
40+
export default function DemoAvatarFallBack = () => {
41+
const [imageSource, setImageSource] = React.useState("broken/url");
42+
const [imageSource2, setImageSource2] = React.useState(undefined);
43+
return (
44+
<>
45+
<Avatar
46+
src={imageSource}
47+
readOnly
48+
onError={() => setImageSource(fallBackImage)}
49+
alt="Avatar"
50+
/>
51+
<Avatar
52+
src={imageSource2}
53+
onError={() => setImageSource2(fallBackImage)}
54+
onChange={(imgSource) => setImageSource2(imgSource)}
55+
accept=".pdf, .png"
56+
alt="Avatar2"
57+
/>
58+
</>
59+
);
60+
};`;
61+
62+
const completeCodeTS = `import * as React from "react";
63+
import { Avatar, AvatarProps } from "@files-ui/react";
64+
65+
const fallBackImage =
66+
"https://static.vecteezy.com/system/resources/thumbnails/009/292/244/small/default-avatar-icon-of-social-media-user-vector.jpg";
67+
68+
export default function DemoAvatarFallBack = () => {
69+
const [imageSource, setImageSource]
70+
= React.useState<AvatarProps["src"] | undefined>("/broken/url");
71+
const [imageSource2, setImageSource2]
72+
= React.useState<AvatarProps["src"] | undefined>(undefined);
73+
return (
74+
<>
75+
<Avatar
76+
src={imageSource}
77+
readOnly
78+
onError={() => setImageSource(fallBackImage)}
79+
alt="Avatar"
80+
/>
81+
<Avatar
82+
src={imageSource2}
83+
onError={() => setImageSource2(fallBackImage)}
84+
onChange={(imgSource) => setImageSource2(imgSource)}
85+
accept=".pdf, .png"
86+
alt="Avatar2"
87+
/>
88+
</>
89+
);
90+
};`;

‎src/components/demo-components/avatar-demo/CodeDemoAvatarLabels.tsx‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import * as React from "react";
2+
import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
3+
4+
const CodeDemoAvatarLabels = () => {
5+
return (
6+
<ShowDemoCode
7+
codeCompleteJS={completeCodeJS}
8+
codeCompleteTS={completeCodeTS}
9+
codeSandboxJS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
10+
codeSandboxTS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
11+
codeSplittedJS={splittedCodeJS}
12+
codeSplittedTS={splittedCodeTS}
13+
/>
14+
);
15+
};
16+
export default CodeDemoAvatarLabels;
17+
const splittedCodeJS = `<Avatar
18+
alt="Isabella"
19+
emptyLabel={"You can choose an image..."}
20+
onChange={() => {}}
21+
/>
22+
<Avatar
23+
src={imageSrc}
24+
alt="Isabella"
25+
changeLabel={"Do you want to change this amazing picture?"}
26+
onChange={() => {}}
27+
/>
28+
<Avatar
29+
src={imageSrc}
30+
alt="Isabella"
31+
loadingLabel={"You can drink a cup of coffee in the meanwhile"}
32+
isLoading={true}
33+
/>`;
34+
35+
const splittedCodeTS = splittedCodeJS;
36+
const completeCodeJS = `import * as React from "react";
37+
import { Avatar } from "@files-ui/react";
38+
const imageSrc =
39+
"https://i.pinimg.com/564x/9a/8b/cf/9a8bcfaba81783eff9241538b00343b1.jpg";
40+
41+
const DemoAvatarLabels = () => {
42+
return (
43+
<>
44+
<Avatar
45+
alt="Isabella"
46+
emptyLabel={"You can choose an image..."}
47+
onChange={() => {}}
48+
/>
49+
<Avatar
50+
src={imageSrc}
51+
alt="Isabella"
52+
changeLabel={"Do you want to change this amazing picture?"}
53+
onChange={() => {}}
54+
/>
55+
<Avatar
56+
src={imageSrc}
57+
alt="Isabella"
58+
loadingLabel={"You can drink a cup of coffee in the meanwhile"}
59+
isLoading={true}
60+
/>
61+
</>
62+
);
63+
};
64+
export default DemoAvatarLabels;`;
65+
66+
const completeCodeTS = completeCodeJS;

‎src/components/demo-components/avatar-demo/CodeDemoAvatarLoading.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import * as React from "react";
2+
import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
3+
interface CodeDemoAvatarPickFileProps {}
4+
const CodeDemoAvatarLoading: React.FC<CodeDemoAvatarPickFileProps> = (
5+
props: CodeDemoAvatarPickFileProps
6+
) => {
7+
return (
8+
<ShowDemoCode
9+
codeCompleteJS={completeCodeJS}
10+
codeCompleteTS={completeCodeTS}
11+
codeSandboxJS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
12+
codeSandboxTS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
13+
codeSplittedJS={splittedCodeJS}
14+
codeSplittedTS={splittedCodeTS}
15+
/>
16+
);
17+
};
18+
export default CodeDemoAvatarLoading;
19+
20+
const splittedCodeJS = `<Avatar readOnly src={imageSrc} alt="Isabella" isLoading={true} />`;
21+
const splittedCodeTS = splittedCodeJS;
22+
const completeCodeJS = `import * as React from "react";
23+
import { Avatar } from "@files-ui/react";
24+
25+
const imageSrc =
26+
"https://i.pinimg.com/564x/9a/8b/cf/9a8bcfaba81783eff9241538b00343b1.jpg";
27+
28+
const DemoAvatarLoading = () => {
29+
return <Avatar readOnly src={imageSrc} alt="Isabella" isLoading={true} />;
30+
};
31+
export default DemoAvatarLoading;`;
32+
33+
const completeCodeTS = completeCodeJS;

0 commit comments

Comments
 (0)