Skip to content

Commit 088099c

Browse files
JinSSJ3JinSSJ3
committed
[WIP][FEAT]: Add Avatra fallback demo and come section
1 parent 38ba983 commit 088099c

File tree

6 files changed

+299
-61
lines changed

6 files changed

+299
-61
lines changed

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

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,26 @@
11
import * as React from "react";
22
import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
33

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-
}
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+
};
1616
export default CodeDemoAvatarBasic;
1717

18-
19-
2018
const splittedCodeJS = `<Avatar
2119
readOnly
2220
src={"https://i.pinimg.com/564x/9a/8b/cf/9a8bcfaba81783eff9241538b00343b1.jpg"}
2321
alt="Isabella"
2422
/>`;
25-
const completeCodeTS = splittedCodeJS;
23+
const splittedCodeTS = splittedCodeJS;
2624
const completeCodeJS = `import * as React from "react";
2725
import { Avatar } from "@files-ui/react";
2826
const BasicDemoAvatar = () => {
@@ -37,4 +35,4 @@ const BasicDemoAvatar = () => {
3735
export default BasicDemoAvatar;
3836
`;
3937

40-
const splittedCodeTS =completeCodeJS;
38+
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="Avatar"
32+
/>`;
33+
const splittedCodeTS = splittedCodeJS;
34+
const completeCodeJS = `import * as React from "react";
35+
import { Avatar } from "@files-ui/react";
36+
const fallBackImage =
37+
"https://static.vecteezy.com/system/resources/thumbnails/009/292/244/small/default-avatar-icon-of-social-media-user-vector.jpg";
38+
39+
export default function App = () => {
40+
const [imageSource, setImageSource] = React.useState("broken/url");
41+
const [imageSource2, setImageSource2] = React.useState(undefined);
42+
return (
43+
<>
44+
<Avatar
45+
src={imageSource}
46+
readOnly
47+
onError={() => setImageSource(fallBackImage)}
48+
alt="Avatar"
49+
/>
50+
<Avatar
51+
src={imageSource2}
52+
onError={() => setImageSource2(fallBackImage)}
53+
onChange={(imgSource) => setImageSource2(imgSource)}
54+
accept=".pdf, .png"
55+
alt="Avatar"
56+
/>
57+
</>
58+
);
59+
};`;
60+
61+
const completeCodeTS = `import * as React from "react";
62+
import { Avatar, AvatarProps } from "@files-ui/react";
63+
const fallBackImage =
64+
"https://static.vecteezy.com/system/resources/thumbnails/009/292/244/small/default-avatar-icon-of-social-media-user-vector.jpg";
65+
66+
export default function App = () => {
67+
const [imageSource, setImageSource] = React.useState<
68+
AvatarProps["src"] | undefined
69+
>("broken/url");
70+
const [imageSource2, setImageSource2] = React.useState<
71+
AvatarProps["src"] | undefined
72+
>(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="Avatar"
87+
/>
88+
</>
89+
);
90+
};`;

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

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import * as React from "react";
2+
import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
3+
interface CodeDemoAvatarPickFileProps{}
4+
const CodeDemoAvatarPickFile:React.FC<CodeDemoAvatarPickFileProps> = (props:CodeDemoAvatarPickFileProps) =>{
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 CodeDemoAvatarPickFile;
17+
18+
19+
const splittedCodeJS = `<Avatar src={imageSource} alt="Avatar" onChange={handleChangeSource} />`;
20+
const splittedCodeTS = splittedCodeJS;
21+
const completeCodeJS = `import * as React from "react";
22+
import { Avatar } from "@files-ui/react";
23+
export default function App = () => {
24+
const [imageSource, setImageSource] = React.useState("https://i.pinimg.com/564x/9a/8b/cf/9a8bcfaba81783eff9241538b00343b1.jpg");
25+
const handleChangeSource = (selectedFile) => {
26+
setImageSource(selectedFile);
27+
};
28+
return (
29+
<Avatar src={imageSource} alt="Avatar" onChange={handleChangeSource} />
30+
);
31+
};`;
32+
33+
const completeCodeTS =`import * as React from "react";
34+
import { Avatar, AvatarProps } from "@files-ui/react";
35+
export default function App = () => {
36+
const [imageSource, setImageSource] = React.useState<
37+
AvatarProps["src"] | undefined
38+
>("https://i.pinimg.com/564x/9a/8b/cf/9a8bcfaba81783eff9241538b00343b1.jpg");
39+
40+
const handleChangeSource = (selectedFile: File) => {
41+
setImageSource(selectedFile);
42+
};
43+
return (
44+
<Avatar src={imageSource} alt="Avatar" onChange={handleChangeSource} />
45+
);
46+
};`;

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import * as React from "react";
2+
import { Avatar, AvatarProps } from "../../../files-ui";
3+
interface DemoAvatarFallBackProps {}
4+
const fallBackImage =
5+
"https://static.vecteezy.com/system/resources/thumbnails/009/292/244/small/default-avatar-icon-of-social-media-user-vector.jpg";
6+
const DemoAvatarFallBack: React.FC<DemoAvatarFallBackProps> = (
7+
props: DemoAvatarFallBackProps
8+
) => {
9+
const [imageSource, setImageSource] = React.useState<
10+
AvatarProps["src"] | undefined
11+
>("broken/url");
12+
const [imageSource2, setImageSource2] = React.useState<
13+
AvatarProps["src"] | undefined
14+
>(undefined);
15+
16+
return (
17+
<>
18+
<Avatar
19+
src={imageSource}
20+
readOnly
21+
onError={() => setImageSource(fallBackImage)}
22+
alt="Avatar"
23+
/>
24+
<Avatar
25+
src={imageSource2}
26+
onError={() => setImageSource2(fallBackImage)}
27+
onChange={(imgSource) => setImageSource2(imgSource)}
28+
accept=".pdf, .png"
29+
alt="Avatar"
30+
/>
31+
</>
32+
);
33+
};
34+
export default DemoAvatarFallBack;

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import * as React from "react";
2+
import { Avatar, AvatarProps } from "../../../files-ui";
3+
interface DemoAvatarPickFileProps {}
4+
const DemoAvatarPickFile: React.FC<DemoAvatarPickFileProps> = (
5+
props: DemoAvatarPickFileProps
6+
) => {
7+
const [imageSource, setImageSource] = React.useState<
8+
AvatarProps["src"] | undefined
9+
>("https://i.pinimg.com/564x/9a/8b/cf/9a8bcfaba81783eff9241538b00343b1.jpg");
10+
11+
const handleChangeSource = (selectedFile: File) => {
12+
setImageSource(selectedFile);
13+
};
14+
return (
15+
<Avatar src={imageSource} alt="Avatar" onChange={handleChangeSource} />
16+
);
17+
};
18+
export default DemoAvatarPickFile;

‎src/pages/demo/AvatarDemoPage.tsx‎

Lines changed: 97 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,103 @@ import RightMenuContainer from "../../components/layout-pages/RightMenuContainer
1010
import MainTitle from "../../components/main-title/MainTitle";
1111
import MainParagraph from "../../components/paragraph-main/MainParagraph";
1212
import RightMenu from "../../components/RightMenu/RightMenu";
13+
import TypeHighlight from "../../components/typeHighlight/TypeHighlight";
14+
import DemoAvatarPickFile from "../../components/demo-components/avatar-demo/DemoAvatarPickFile";
15+
import CodeDemoAvatarPickFile from "../../components/demo-components/avatar-demo/CodeDemoAvatarPickFile";
16+
import DemoAvatarFallBack from "../../components/demo-components/avatar-demo/DemoAvatarFallBack";
17+
import CodeDemoAvatarFallBack from "../../components/demo-components/avatar-demo/CodeDemoAvatarFallBack";
18+
19+
interface AvatarDemoPageProps {}
20+
const AvatarDemoPage: React.FC<AvatarDemoPageProps> = (
21+
props: AvatarDemoPageProps
22+
) => {
23+
return (
24+
<React.Fragment>
25+
<MainContentContainer>
26+
<MainTitle>Avatar</MainTitle>
27+
28+
<MainParagraph>
29+
This "avatar" component can be used to just display an image or even
30+
can be a special file <CodeHighlight>input</CodeHighlight> designed
31+
for setting an image
32+
{/* by either dragging and dropping files there or */}
33+
by picking file from a file dialog.
34+
</MainParagraph>
35+
36+
<section id="basic-avatar">
37+
<SubTitle content="Basic Avatar (read only)" />
38+
<DescParagraph>
39+
The most basic use is to set a fixed image from Url.
40+
</DescParagraph>
41+
<Paper
42+
variant="outlined"
43+
style={{
44+
padding: "25px",
45+
display: "flex",
46+
width: "100%",
47+
justifyContent: "center",
48+
}}
49+
>
50+
<BasicDemoAvatar />
51+
</Paper>
52+
<CodeDemoAvatarBasic />
53+
</section>
54+
55+
<section id="picking-image-file">
56+
<SubTitle content="Picking an image File" />
57+
<DescParagraph>
58+
The <CodeHighlight>{"<Avatar/>"}</CodeHighlight> component supports
59+
both a <TypeHighlight>string</TypeHighlight> url and a{" "}
60+
<TypeHighlight>File</TypeHighlight> object as the source.
61+
</DescParagraph>
62+
<Paper
63+
variant="outlined"
64+
style={{
65+
padding: "25px",
66+
display: "flex",
67+
width: "100%",
68+
justifyContent: "center",
69+
}}
70+
>
71+
<DemoAvatarPickFile />
72+
</Paper>
73+
<CodeDemoAvatarPickFile />
74+
</section>
75+
76+
<section id="fallback">
77+
<SubTitle content="Fallback (error on load the image)" />
78+
<DescParagraph>
79+
If there is an error loading the avatar image, the{" "}
80+
<CodeHighlight>{"<Avatar/>"}</CodeHighlight> component provides a
81+
way to fall back by defining the{" "}
82+
<TypeHighlight>onError</TypeHighlight> prop. This could happen if:
83+
<ul>
84+
<li>The image url is broken, or</li>
85+
<li>The image file selected is not an image</li>
86+
</ul>
87+
</DescParagraph>
88+
<Paper
89+
variant="outlined"
90+
style={{
91+
padding: "25px",
92+
display: "flex",
93+
width: "100%",
94+
justifyContent: "space-evenly",
95+
}}
96+
>
97+
<DemoAvatarFallBack />
98+
</Paper>
99+
<CodeDemoAvatarFallBack />
100+
</section>
101+
</MainContentContainer>
102+
103+
<RightMenuContainer>
104+
<RightMenu width="240px" items={rightMenuItems} />
105+
</RightMenuContainer>
106+
</React.Fragment>
107+
);
108+
};
109+
export default AvatarDemoPage;
13110

14111
const rightMenuItems = [
15112
{
@@ -58,48 +155,3 @@ const rightMenuItems = [
58155
referTo: "/components/filecard#api",
59156
},
60157
];
61-
62-
interface AvatarDemoPageProps {}
63-
const AvatarDemoPage: React.FC<AvatarDemoPageProps> = (
64-
props: AvatarDemoPageProps
65-
) => {
66-
return (
67-
<React.Fragment>
68-
<MainContentContainer>
69-
<MainTitle>Avatar</MainTitle>
70-
71-
<MainParagraph>
72-
This "avatar" component can be used tu just display an image or even
73-
can be a special file <CodeHighlight>input</CodeHighlight> designed
74-
for setting an image
75-
{/* by either dragging and dropping files there or */}
76-
by picking a fils from a file dialog.
77-
</MainParagraph>
78-
79-
<section id="basic-avatar">
80-
<SubTitle content="Basic Avatar (read only)" />
81-
<DescParagraph>
82-
The most basic use is to set a fixed image from Url.
83-
</DescParagraph>
84-
<Paper
85-
variant="outlined"
86-
style={{
87-
padding: "25px",
88-
display: "flex",
89-
width: "100%",
90-
justifyContent: "center",
91-
}}
92-
>
93-
<BasicDemoAvatar />
94-
</Paper>
95-
<CodeDemoAvatarBasic />
96-
</section>
97-
</MainContentContainer>
98-
99-
<RightMenuContainer>
100-
<RightMenu width="240px" items={rightMenuItems} />
101-
</RightMenuContainer>
102-
</React.Fragment>
103-
);
104-
};
105-
export default AvatarDemoPage;

0 commit comments

Comments
 (0)