Skip to content
This repository was archived by the owner on Mar 1, 2024. It is now read-only.

Commit fa0f2aa

Browse files
jonthompjonthomp
authored
Merge pull request #285 from tabler/revert-212-profile-page
Revert "[WIP] ProfilePage component"
2 parents a740381 + 57fe8bd commit fa0f2aa

File tree

9 files changed

+125
-491
lines changed

9 files changed

+125
-491
lines changed

‎example/src/pages/ProfilePage.react.js

Lines changed: 24 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -28,24 +28,29 @@ function ProfilePage() {
2828
name="Peter Richards"
2929
backgroundURL="demo/photos/eberhard-grossgasteiger-311213-500.jpg"
3030
avatarURL="demo/faces/male/16.jpg"
31-
socialNetworksObjects={[
32-
{ name: "twitter", to: "test", label: "Follow" },
33-
]}
31+
twitterURL="test"
3432
>
3533
Big belly rude boy, million dollar hustler. Unemployed.
3634
</Profile>
37-
<Profile
38-
layout={2}
39-
name="Juan Hernandez"
40-
jobTitle="Webdeveloper"
41-
avatarURL="demo/faces/male/21.jpg"
42-
socialNetworksObjects={[
43-
{ name: "facebook", to: "/profile", tooltip: "Facebook" },
44-
{ name: "twitter", to: "/profile", tooltip: "Twitter" },
45-
{ name: "phone", to: "/profile", tooltip: "+1 234-567-8901" },
46-
{ name: "skype", to: "/profile", tooltip: "@skypename" },
47-
]}
48-
/>
35+
<Card>
36+
<Card.Body>
37+
<Media>
38+
<Avatar
39+
size="xxl"
40+
className="mr-5"
41+
imageURL="demo/faces/male/21.jpg"
42+
/>
43+
<Media.BodySocial
44+
name="Juan Hernandez"
45+
workTitle="Webdeveloper"
46+
facebook="Facebook"
47+
twitter="Twitter"
48+
phone="1234567890"
49+
skype="@skypename"
50+
/>
51+
</Media>
52+
</Card.Body>
53+
</Card>
4954
<Card>
5055
<Card.Header>
5156
<Card.Title>My Profile</Card.Title>
@@ -89,10 +94,11 @@ function ProfilePage() {
8994
<Grid.Col lg={8}>
9095
<Card>
9196
<Card.Header>
92-
<Form.InputGroup
93-
append={<Button icon="camera" color="secondary" />}
94-
>
97+
<Form.InputGroup>
9598
<Form.Input type="text" placeholder="Message" />
99+
<Form.InputGroup append>
100+
<Button icon="camera" color="secondary" />
101+
</Form.InputGroup>
96102
</Form.InputGroup>
97103
</Card.Header>
98104
<List.Group className="card-list-group">

‎src/components/Media/MediaBodySocial.react.js

Lines changed: 67 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,91 @@
11
// @flow
22

33
import * as React from "react";
4-
import { Media, SocialNetworksList } from "../";
5-
import type { itemObject } from "../SocialNetworksList/SocialNetworksList.react";
4+
import { List, Icon, Media, SocialNetworksList, Tooltip } from "../";
65

76
export type Props = {|
87
+children?: React.Node,
98
+className?: string,
109
+name: string,
1110
+workTitle: string,
12-
+itemsObjects?: Array<itemObject>,
13-
+items?: Array<React.Node>,
11+
+facebook?: string,
12+
+twitter?: string,
13+
+phone?: string,
14+
+skype?: string,
1415
|};
1516

1617
function MediaBodySocial({
1718
className,
1819
children,
1920
name,
2021
workTitle,
21-
itemsObjects,
22-
items,
22+
facebook = "",
23+
twitter = "",
24+
phone = "",
25+
skype = "",
2326
}: Props): React.Node {
27+
let fbIcon;
28+
let twitterIcon;
29+
let phoneIcon;
30+
let skypeIcon;
31+
32+
if (facebook) {
33+
fbIcon = (
34+
<List.Item inline>
35+
<Tooltip content="Facebook" placement="top">
36+
<a href="/Profile">
37+
<Icon prefix="fa" name="facebook" />
38+
</a>
39+
</Tooltip>
40+
</List.Item>
41+
);
42+
}
43+
44+
if (twitter) {
45+
twitterIcon = (
46+
<List.Item inline>
47+
<Tooltip content="Twitter" placement="top">
48+
<a href="/Profile">
49+
<Icon prefix="fa" name="twitter" />
50+
</a>
51+
</Tooltip>
52+
</List.Item>
53+
);
54+
}
55+
56+
if (phone) {
57+
phoneIcon = (
58+
<List.Item inline>
59+
<Tooltip content="+1 234-567-8901" placement="top">
60+
<a href="/Profile">
61+
<Icon prefix="fa" name="phone" />
62+
</a>
63+
</Tooltip>
64+
</List.Item>
65+
);
66+
}
67+
68+
if (skype) {
69+
skypeIcon = (
70+
<List.Item inline>
71+
<Tooltip content="@skypename" placement="top">
72+
<a href="/Profile">
73+
<Icon prefix="fa" name="skype" />
74+
</a>
75+
</Tooltip>
76+
</List.Item>
77+
);
78+
}
2479
return (
2580
<Media.Body>
2681
<h4 className="m-0">{name}</h4>
2782
<p className="text-muted mb-0">{workTitle}</p>
28-
<SocialNetworksList
29-
className="mb-0 mt-2"
30-
items={items}
31-
itemsObjects={itemsObjects}
32-
/>
83+
<SocialNetworksList className="mb-0 mt-2">
84+
{fbIcon}
85+
{twitterIcon}
86+
{phoneIcon}
87+
{skypeIcon}
88+
</SocialNetworksList>
3389
{children}
3490
</Media.Body>
3591
);

‎src/components/Profile/Profile.react.js

Lines changed: 26 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -3,90 +3,45 @@
33
import * as React from "react";
44
import cn from "classnames";
55

6-
import {
7-
Card,
8-
Header,
9-
SocialNetworksList,
10-
Media,
11-
Avatar,
12-
} from "../../components";
6+
import { Card, Header, SocialNetworksList } from "../../components";
137

148
import ProfileImage from "./ProfileImage.react";
159

16-
import type { itemObject } from "../SocialNetworksList/SocialNetworksList.react";
17-
18-
export type PropsForAll = {|
10+
export type Props = {|
1911
+children?: React.Node,
2012
+className?: string,
2113
+name: string,
2214
+avatarURL?: string,
2315
+twitterURL?: string,
24-
+facebookURL?: string,
25-
+socialNetworksObjects?: Array<itemObject>,
26-
|};
27-
28-
type layout1 = {|
29-
...PropsForAll,
30-
+layout?: 1,
3116
+backgroundURL?: string,
3217
+bio?: string,
3318
|};
3419

35-
type layout2 = {|
36-
...PropsForAll,
37-
+layout: 2,
38-
+jobTitle?: string,
39-
|};
40-
41-
type Props = layout1 | layout2;
42-
43-
function Profile(props: Props): React.Node {
44-
const {
45-
className,
46-
children,
47-
name,
48-
avatarURL = "",
49-
socialNetworksObjects,
50-
} = props;
51-
const classes = cn(
52-
{ "card-profile": !props.layout || props.layout === 1 },
53-
className
20+
function Profile({
21+
className,
22+
children,
23+
name,
24+
avatarURL = "",
25+
twitterURL = "",
26+
backgroundURL = "",
27+
bio,
28+
}: Props): React.Node {
29+
const classes = cn("card-profile", className);
30+
return (
31+
<Card className={classes}>
32+
<Card.Header backgroundURL={backgroundURL} />
33+
<Card.Body className="text-center">
34+
<ProfileImage avatarURL={avatarURL} />
35+
<Header.H3 className="mb-3">{name}</Header.H3>
36+
<p className="mb-4">{bio || children}</p>
37+
<SocialNetworksList
38+
itemsObjects={[{ name: "twitter", label: "Follow" }]}
39+
prefix="fa"
40+
asButtons
41+
/>
42+
</Card.Body>
43+
</Card>
5444
);
55-
if (!props.layout || props.layout === 1) {
56-
const { bio, backgroundURL = "" } = props;
57-
return (
58-
<Card className={classes}>
59-
<Card.Header backgroundURL={backgroundURL} />
60-
<Card.Body className="text-center">
61-
<ProfileImage avatarURL={avatarURL} />
62-
<Header.H3 className="mb-3">{name}</Header.H3>
63-
<p className="mb-4">{bio || children}</p>
64-
<SocialNetworksList
65-
itemsObjects={socialNetworksObjects}
66-
prefix="fa"
67-
asButtons
68-
/>
69-
</Card.Body>
70-
</Card>
71-
);
72-
}
73-
if (props.layout === 2) {
74-
const { jobTitle = "" } = props;
75-
return (
76-
<Card className={classes}>
77-
<Card.Body>
78-
<Media>
79-
<Avatar size="xxl" className="mr-5" imageURL={avatarURL} />
80-
<Media.BodySocial
81-
name={name}
82-
workTitle={jobTitle}
83-
itemsObjects={socialNetworksObjects}
84-
/>
85-
</Media>
86-
</Card.Body>
87-
</Card>
88-
);
89-
}
9045
}
9146

9247
Profile.Image = ProfileImage;

‎src/components/SocialNetworksList/SocialNetworksList.react.js

Lines changed: 8 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,13 @@
22

33
import * as React from "react";
44
import cn from "classnames";
5-
import { List, Icon, Button, Tooltip } from "../";
6-
import { Placement } from "react-popper";
5+
import { List, Icon, Button } from "../";
76

8-
export type itemObject = {|
7+
type itemObject = {|
98
name: string,
109
label?: string,
1110
to?: string,
1211
tooltip?: string,
13-
/**
14-
* Tooltip placement
15-
*/
16-
placement?: Placement,
1712
color?: string,
1813
|};
1914

@@ -30,31 +25,17 @@ function listItemFromObjectFactory(
3025
asButtons: boolean = false,
3126
iconPrefix: string
3227
) {
33-
return ({
34-
tooltip,
35-
placement = "top",
36-
to,
37-
name,
38-
label,
39-
...item
40-
}: itemObject) => {
28+
return (item: itemObject) => {
4129
const itemContent = asButtons ? (
42-
<Button to={to} social={name} color={item.color} size="sm">
43-
label}
30+
<Button to={item.to} social={item.name} color={item.color} size="sm">
31+
{item.label}
4432
</Button>
4533
) : (
46-
<a href={to} data-original-title={tooltip}>
47-
<Icon prefix={iconPrefix} name={name} />
34+
<a href={item.to} data-original-title={item.tooltip}>
35+
<Icon prefix={iconPrefix} name={item.name} />
4836
</a>
4937
);
50-
const itemComponent = <List.Item inline>{itemContent}</List.Item>;
51-
return tooltip ? (
52-
<Tooltip content={tooltip} placement={placement}>
53-
{itemComponent}
54-
</Tooltip>
55-
) : (
56-
itemComponent
57-
);
38+
return <List.Item inline>{itemContent}</List.Item>;
5839
};
5940
}
6041

‎src/index.js

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -45,14 +45,9 @@ export {
4545
export { default as FormCard } from "./forms/FormCard.react";
4646
export { default as FormTextInput } from "./forms/FormTextInput.react";
4747
export { default as FormCheckboxInput } from "./forms/FormCheckboxInput.react";
48-
export {
49-
default as FormWithSingleInputAndButton,
50-
} from "./forms/FormWithSingleInputAndButton.react";
5148
export { default as colors } from "./colors";
5249
export { default as LoginPage } from "./page_templates/account/LoginPage";
5350
export { default as RegisterPage } from "./page_templates/account/RegisterPage";
5451
export {
5552
default as ForgotPasswordPage,
5653
} from "./page_templates/account/ForgotPasswordPage";
57-
export { default as ProfilePage } from "./page_templates/account/ProfilePage";
58-
export { default as ProfileFormCard } from "./forms/ProfileFormCard";

‎src/page_templates/account/ProfilePage/ProfilePage.examples.md

Whitespace-only changes.

0 commit comments

Comments
 (0)