Skip to content

Commit b219530

Browse files
JinSSJ3JinSSJ3
committed
[WIP][FEAT]: Add loading, styling, variants
1 parent ae5a2bd commit b219530

File tree

8 files changed

+250
-6
lines changed

8 files changed

+250
-6
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,15 +63,15 @@ const ExtraComponentsMainPageAvatar: React.FC<ExtraComponentsMainPageProps> = (
6363
<Avatar
6464
src={avatarSrc}
6565
onChange={handleChange}
66-
isUloading={isUloading}
66+
isLoading={isUloading}
6767
smartImgFit={"center"}
6868
style={{ width: "170px", height: "170px" }}
6969
//variant={"circle"}
7070
/>
7171
<Avatar
7272
src={avatarSrc}
7373
onChange={handleChange}
74-
isUloading={isUloading}
74+
isLoading={isUloading}
7575
smartImgFit={"center"}
7676
variant={"circle"}
7777
style={{ width: "170px", height: "170px" }}

‎src/components/demo-components/avatar-demo/CodeDemoAvatarStyling.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+
4+
const CodeDemoAvatarStyling = () => {
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 CodeDemoAvatarStyling;
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+
const BasicDemoAvatar = () => {
27+
return (
28+
<Avatar
29+
readOnly
30+
src={"https://i.pinimg.com/564x/9a/8b/cf/9a8bcfaba81783eff9241538b00343b1.jpg"}
31+
alt="Isabella"
32+
/>
33+
);
34+
};
35+
export default BasicDemoAvatar;
36+
`;
37+
38+
const completeCodeTS = completeCodeJS;

‎src/components/demo-components/avatar-demo/DemoAvatarLabels.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 { Avatar } from "../../../files-ui";
3+
4+
const DemoAvatarLabels = () => {
5+
return (
6+
<>
7+
<Avatar
8+
//readOnly
9+
src={""}
10+
alt="Isabella"
11+
emptyLabel={"You can choose an image..."}
12+
onChange={() => {}}
13+
/>
14+
<Avatar
15+
src={
16+
"https://i.pinimg.com/564x/9a/8b/cf/9a8bcfaba81783eff9241538b00343b1.jpg"
17+
}
18+
alt="Isabella"
19+
changeLabel={"Do you want to change this amazing picture?"}
20+
onChange={() => {}}
21+
/>
22+
<Avatar
23+
src={
24+
"https://i.pinimg.com/564x/9a/8b/cf/9a8bcfaba81783eff9241538b00343b1.jpg"
25+
}
26+
alt="Isabella"
27+
loadingLabel={"You can drink a cup of coffe in the meanwhile"}
28+
isLoading={true}
29+
/>
30+
</>
31+
);
32+
};
33+
export default DemoAvatarLabels;

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import * as React from "react";
2+
import { Avatar } from "../../../files-ui";
3+
4+
const DemoAvatarLoading = () => {
5+
return (
6+
<Avatar
7+
readOnly
8+
src={
9+
"https://i.pinimg.com/564x/9a/8b/cf/9a8bcfaba81783eff9241538b00343b1.jpg"
10+
}
11+
alt="Isabella"
12+
isLoading={true}
13+
/>
14+
);
15+
};
16+
export default DemoAvatarLoading;

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import * as React from "react";
2+
import { Avatar } from "../../../files-ui";
3+
4+
const DemoAvatarStyling = () => {
5+
return (
6+
<>
7+
<Avatar
8+
readOnly
9+
src={
10+
"https://i.pinimg.com/564x/9a/8b/cf/9a8bcfaba81783eff9241538b00343b1.jpg"
11+
}
12+
alt="Isabella"
13+
style={{ width: "100px", height: "100px" }}
14+
/>
15+
<Avatar
16+
readOnly
17+
src={
18+
"https://i.pinimg.com/564x/9a/8b/cf/9a8bcfaba81783eff9241538b00343b1.jpg"
19+
}
20+
alt="Isabella"
21+
borderRadius={"50px"}
22+
/>
23+
</>
24+
);
25+
};
26+
export default DemoAvatarStyling;

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import * as React from "react";
2+
import { Avatar } from "../../../files-ui";
3+
4+
const DemoAvatarVariants = () => {
5+
return (
6+
<>
7+
<Avatar
8+
readOnly
9+
src={
10+
"https://i.pinimg.com/564x/9a/8b/cf/9a8bcfaba81783eff9241538b00343b1.jpg"
11+
}
12+
/>
13+
<Avatar
14+
readOnly
15+
src={
16+
"https://i.pinimg.com/564x/9a/8b/cf/9a8bcfaba81783eff9241538b00343b1.jpg"
17+
}
18+
variant="circle"
19+
/>
20+
</>
21+
);
22+
};
23+
export default DemoAvatarVariants;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from "react";
2-
import { Avatar, AvatarProps } from "../../../files-ui";
2+
import { Avatar } from "../../../files-ui";
33
interface DemoAvatarFallBackProps {}
44

55
const landscapeImage =

‎src/pages/demo/AvatarDemoPage.tsx‎

Lines changed: 111 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,11 @@ import CodeDemoAvatarFallBack from "../../components/demo-components/avatar-demo
1818
import AnchorToTab from "../../components/util-components/AnchorToTab";
1919
import DemoAvatarSmartImgFit from "../../components/demo-components/avatar-demo/DmoAvatarSmartImgFit";
2020
import CodeDemoAvatarSmartFit from "../../components/demo-components/avatar-demo/CodeDemoAvatarSmartFit";
21+
import DemoAvatarStyling from "../../components/demo-components/avatar-demo/DemoAvatarStyling";
22+
import CodeDemoAvatarStyling from "../../components/demo-components/avatar-demo/CodeDemoAvatarStyling";
23+
import DemoAvatarLabels from "../../components/demo-components/avatar-demo/DemoAvatarLabels";
24+
import DemoAvatarVariants from "../../components/demo-components/avatar-demo/DemoAvatarVarians";
25+
import DemoAvatarLoading from "../../components/demo-components/avatar-demo/DemoAvatarLoading";
2126

2227
interface AvatarDemoPageProps {}
2328
const AvatarDemoPage: React.FC<AvatarDemoPageProps> = (
@@ -121,7 +126,6 @@ const AvatarDemoPage: React.FC<AvatarDemoPageProps> = (
121126
variant="outlined"
122127
style={{
123128
padding: "25px",
124-
//padding:"auto",
125129
display: "flex",
126130
width: "100%",
127131
justifyContent: "space-evenly",
@@ -135,6 +139,110 @@ const AvatarDemoPage: React.FC<AvatarDemoPageProps> = (
135139
<CodeDemoAvatarSmartFit />
136140
</section>
137141

142+
<section id="loading">
143+
<SubTitle content="Loading" />
144+
<DescParagraph>
145+
You can use the prop <TypeHighlight>isLoading</TypeHighlight> when
146+
you want to communicate that something is loading.
147+
</DescParagraph>
148+
<Paper
149+
variant="outlined"
150+
style={{
151+
padding: "25px",
152+
display: "flex",
153+
width: "100%",
154+
justifyContent: "center",
155+
}}
156+
>
157+
<DemoAvatarLoading />
158+
</Paper>
159+
<CodeDemoAvatarBasic />
160+
</section>
161+
162+
<section id="variants">
163+
<SubTitle content="Variants" />
164+
<DescParagraph>
165+
Avatar component comes in 2 variants: "circle" and "square".
166+
</DescParagraph>
167+
<Paper
168+
variant="outlined"
169+
style={{
170+
padding: "25px",
171+
display: "flex",
172+
width: "100%",
173+
justifyContent: "space-evenly",
174+
flexWrap: "wrap",
175+
gap: "50px",
176+
}}
177+
>
178+
<DemoAvatarVariants />
179+
</Paper>
180+
<CodeDemoAvatarBasic />
181+
</section>
182+
183+
<section id="styling">
184+
<SubTitle content="Styling" />
185+
<DescParagraph>
186+
You can define the <TypeHighlight>style</TypeHighlight> prop for
187+
changing the styles applied to the main container such us the{" "}
188+
<TypeHighlight>width</TypeHighlight> o the{" "}
189+
<TypeHighlight>height</TypeHighlight>.
190+
<br />
191+
Also you can use directly the prop{" "}
192+
<TypeHighlight>borderRadius</TypeHighlight> to specify how rounde
193+
you preffer the borders.
194+
</DescParagraph>
195+
<Paper
196+
variant="outlined"
197+
style={{
198+
padding: "25px",
199+
display: "flex",
200+
width: "100%",
201+
justifyContent: "space-evenly",
202+
flexWrap: "wrap",
203+
gap: "50px",
204+
}}
205+
>
206+
<DemoAvatarStyling />
207+
</Paper>
208+
<CodeDemoAvatarStyling />
209+
</section>
210+
211+
<section id="labels">
212+
<SubTitle content="Labels" />
213+
<DescParagraph>
214+
You can specify the content of the texts:
215+
<ul>
216+
<li>
217+
<CodeHighlight>emptyLabel</CodeHighlight>: when the source is
218+
not set.
219+
</li>
220+
<li>
221+
<CodeHighlight>changeLabel</CodeHighlight>: when there i a valid
222+
source set.
223+
</li>
224+
<li>
225+
<CodeHighlight>uploadingLabel</CodeHighlight>: when you want to
226+
communicate that something is loading.
227+
</li>
228+
</ul>
229+
</DescParagraph>
230+
<Paper
231+
variant="outlined"
232+
style={{
233+
padding: "25px",
234+
display: "flex",
235+
width: "100%",
236+
justifyContent: "space-evenly",
237+
flexWrap: "wrap",
238+
gap: "50px",
239+
}}
240+
>
241+
<DemoAvatarLabels />
242+
</Paper>
243+
<CodeDemoAvatarStyling />
244+
</section>
245+
138246
<section id="api">
139247
<SubTitle content="API" />
140248
<DescParagraph>
@@ -180,8 +288,8 @@ const rightMenuItems = [
180288
},
181289
{
182290
id: 5,
183-
label: "Uploading & loading",
184-
referTo: "/components/avatar#uploading",
291+
label: "Loading",
292+
referTo: "/components/avatar#loading",
185293
},
186294
{
187295
id: 6,

0 commit comments

Comments
 (0)