Merge pull request #285 from tabler/revert-212-profile-page

Revert "[WIP] ProfilePage component"

example/src/pages/ProfilePage.react.js

@@ -28,24 +28,29 @@ function ProfilePage() {
                 name="Peter Richards"
                 backgroundURL="demo/photos/eberhard-grossgasteiger-311213-500.jpg"
                 avatarURL="demo/faces/male/16.jpg"
-                socialNetworksObjects={[
-                  { name: "twitter", to: "test", label: "Follow" },
-                ]}
+                twitterURL="test"
               >
                 Big belly rude boy, million dollar hustler. Unemployed.
               </Profile>
-              <Profile
-                layout={2}
-                name="Juan Hernandez"
-                jobTitle="Webdeveloper"
-                avatarURL="demo/faces/male/21.jpg"
-                socialNetworksObjects={[
-                  { name: "facebook", to: "/profile", tooltip: "Facebook" },
-                  { name: "twitter", to: "/profile", tooltip: "Twitter" },
-                  { name: "phone", to: "/profile", tooltip: "+1 234-567-8901" },
-                  { name: "skype", to: "/profile", tooltip: "@skypename" },
-                ]}
-              />
+              <Card>
+                <Card.Body>
+                  <Media>
+                    <Avatar
+                      size="xxl"
+                      className="mr-5"
+                      imageURL="demo/faces/male/21.jpg"
+                    />
+                    <Media.BodySocial
+                      name="Juan Hernandez"
+                      workTitle="Webdeveloper"
+                      facebook="Facebook"
+                      twitter="Twitter"
+                      phone="1234567890"
+                      skype="@skypename"
+                    />
+                  </Media>
+                </Card.Body>
+              </Card>
               <Card>
                 <Card.Header>
                   <Card.Title>My Profile</Card.Title>
@@ -89,10 +94,11 @@ function ProfilePage() {
             <Grid.Col lg={8}>
               <Card>
                 <Card.Header>
-                  <Form.InputGroup
-                    append={<Button icon="camera" color="secondary" />}
-                  >
+                  <Form.InputGroup>
                     <Form.Input type="text" placeholder="Message" />
+                    <Form.InputGroup append>
+                      <Button icon="camera" color="secondary" />
+                    </Form.InputGroup>
                   </Form.InputGroup>
                 </Card.Header>
                 <List.Group className="card-list-group">

src/components/Media/MediaBodySocial.react.js

@@ -1,35 +1,91 @@
 // @flow
 
 import * as React from "react";
-import { Media, SocialNetworksList } from "../";
-import type { itemObject } from "../SocialNetworksList/SocialNetworksList.react";
+import { List, Icon, Media, SocialNetworksList, Tooltip } from "../";
 
 export type Props = {|
   +children?: React.Node,
   +className?: string,
   +name: string,
   +workTitle: string,
-  +itemsObjects?: Array<itemObject>,
-  +items?: Array<React.Node>,
+  +facebook?: string,
+  +twitter?: string,
+  +phone?: string,
+  +skype?: string,
 |};
 
 function MediaBodySocial({
   className,
   children,
   name,
   workTitle,
-  itemsObjects,
-  items,
+  facebook = "",
+  twitter = "",
+  phone = "",
+  skype = "",
 }: Props): React.Node {
+  let fbIcon;
+  let twitterIcon;
+  let phoneIcon;
+  let skypeIcon;
+
+  if (facebook) {
+    fbIcon = (
+      <List.Item inline>
+        <Tooltip content="Facebook" placement="top">
+          <a href="/Profile">
+            <Icon prefix="fa" name="facebook" />
+          </a>
+        </Tooltip>
+      </List.Item>
+    );
+  }
+
+  if (twitter) {
+    twitterIcon = (
+      <List.Item inline>
+        <Tooltip content="Twitter" placement="top">
+          <a href="/Profile">
+            <Icon prefix="fa" name="twitter" />
+          </a>
+        </Tooltip>
+      </List.Item>
+    );
+  }
+
+  if (phone) {
+    phoneIcon = (
+      <List.Item inline>
+        <Tooltip content="+1 234-567-8901" placement="top">
+          <a href="/Profile">
+            <Icon prefix="fa" name="phone" />
+          </a>
+        </Tooltip>
+      </List.Item>
+    );
+  }
+
+  if (skype) {
+    skypeIcon = (
+      <List.Item inline>
+        <Tooltip content="@skypename" placement="top">
+          <a href="/Profile">
+            <Icon prefix="fa" name="skype" />
+          </a>
+        </Tooltip>
+      </List.Item>
+    );
+  }
   return (
     <Media.Body>
       <h4 className="m-0">{name}</h4>
       <p className="text-muted mb-0">{workTitle}</p>
-      <SocialNetworksList
-        className="mb-0 mt-2"
-        items={items}
-        itemsObjects={itemsObjects}
-      />
+      <SocialNetworksList className="mb-0 mt-2">
+        {fbIcon}
+        {twitterIcon}
+        {phoneIcon}
+        {skypeIcon}
+      </SocialNetworksList>
       {children}
     </Media.Body>
   );

src/components/Profile/Profile.react.js

@@ -3,90 +3,45 @@
 import * as React from "react";
 import cn from "classnames";
 
-import {
-  Card,
-  Header,
-  SocialNetworksList,
-  Media,
-  Avatar,
-} from "../../components";
+import { Card, Header, SocialNetworksList } from "../../components";
 
 import ProfileImage from "./ProfileImage.react";
 
-import type { itemObject } from "../SocialNetworksList/SocialNetworksList.react";
-
-export type PropsForAll = {|
+export type Props = {|
   +children?: React.Node,
   +className?: string,
   +name: string,
   +avatarURL?: string,
   +twitterURL?: string,
-  +facebookURL?: string,
-  +socialNetworksObjects?: Array<itemObject>,
-|};
-
-type layout1 = {|
-  ...PropsForAll,
-  +layout?: 1,
   +backgroundURL?: string,
   +bio?: string,
 |};
 
-type layout2 = {|
-  ...PropsForAll,
-  +layout: 2,
-  +jobTitle?: string,
-|};
-
-type Props = layout1 | layout2;
-
-function Profile(props: Props): React.Node {
-  const {
-    className,
-    children,
-    name,
-    avatarURL = "",
-    socialNetworksObjects,
-  } = props;
-  const classes = cn(
-    { "card-profile": !props.layout || props.layout === 1 },
-    className
+function Profile({
+  className,
+  children,
+  name,
+  avatarURL = "",
+  twitterURL = "",
+  backgroundURL = "",
+  bio,
+}: Props): React.Node {
+  const classes = cn("card-profile", className);
+  return (
+    <Card className={classes}>
+      <Card.Header backgroundURL={backgroundURL} />
+      <Card.Body className="text-center">
+        <ProfileImage avatarURL={avatarURL} />
+        <Header.H3 className="mb-3">{name}</Header.H3>
+        <p className="mb-4">{bio || children}</p>
+        <SocialNetworksList
+          itemsObjects={[{ name: "twitter", label: "Follow" }]}
+          prefix="fa"
+          asButtons
+        />
+      </Card.Body>
+    </Card>
   );
-  if (!props.layout || props.layout === 1) {
-    const { bio, backgroundURL = "" } = props;
-    return (
-      <Card className={classes}>
-        <Card.Header backgroundURL={backgroundURL} />
-        <Card.Body className="text-center">
-          <ProfileImage avatarURL={avatarURL} />
-          <Header.H3 className="mb-3">{name}</Header.H3>
-          <p className="mb-4">{bio || children}</p>
-          <SocialNetworksList
-            itemsObjects={socialNetworksObjects}
-            prefix="fa"
-            asButtons
-          />
-        </Card.Body>
-      </Card>
-    );
-  }
-  if (props.layout === 2) {
-    const { jobTitle = "" } = props;
-    return (
-      <Card className={classes}>
-        <Card.Body>
-          <Media>
-            <Avatar size="xxl" className="mr-5" imageURL={avatarURL} />
-            <Media.BodySocial
-              name={name}
-              workTitle={jobTitle}
-              itemsObjects={socialNetworksObjects}
-            />
-          </Media>
-        </Card.Body>
-      </Card>
-    );
-  }
 }
 
 Profile.Image = ProfileImage;

src/components/SocialNetworksList/SocialNetworksList.react.js

@@ -2,18 +2,13 @@
 
 import * as React from "react";
 import cn from "classnames";
-import { List, Icon, Button, Tooltip } from "../";
-import { Placement } from "react-popper";
+import { List, Icon, Button } from "../";
 
-export type itemObject = {|
+type itemObject = {|
   name: string,
   label?: string,
   to?: string,
   tooltip?: string,
-  /**
-   * Tooltip placement
-   */
-  placement?: Placement,
   color?: string,
 |};
 
@@ -30,31 +25,17 @@ function listItemFromObjectFactory(
   asButtons: boolean = false,
   iconPrefix: string
 ) {
-  return ({
-    tooltip,
-    placement = "top",
-    to,
-    name,
-    label,
-    ...item
-  }: itemObject) => {
+  return (item: itemObject) => {
     const itemContent = asButtons ? (
-      <Button to={to} social={name} color={item.color} size="sm">
-        label}
+      <Button to={item.to} social={item.name} color={item.color} size="sm">
+        {item.label}
       </Button>
     ) : (
-      <a href={to} data-original-title={tooltip}>
-        <Icon prefix={iconPrefix} name={name} />
+      <a href={item.to} data-original-title={item.tooltip}>
+        <Icon prefix={iconPrefix} name={item.name} />
       </a>
     );
-    const itemComponent = <List.Item inline>{itemContent}</List.Item>;
-    return tooltip ? (
-      <Tooltip content={tooltip} placement={placement}>
-        {itemComponent}
-      </Tooltip>
-    ) : (
-      itemComponent
-    );
+    return <List.Item inline>{itemContent}</List.Item>;
   };
 }
 

src/index.js

@@ -45,14 +45,9 @@ export {
 export { default as FormCard } from "./forms/FormCard.react";
 export { default as FormTextInput } from "./forms/FormTextInput.react";
 export { default as FormCheckboxInput } from "./forms/FormCheckboxInput.react";
-export {
-  default as FormWithSingleInputAndButton,
-} from "./forms/FormWithSingleInputAndButton.react";
 export { default as colors } from "./colors";
 export { default as LoginPage } from "./page_templates/account/LoginPage";
 export { default as RegisterPage } from "./page_templates/account/RegisterPage";
 export {
   default as ForgotPasswordPage,
 } from "./page_templates/account/ForgotPasswordPage";
-export { default as ProfilePage } from "./page_templates/account/ProfilePage";
-export { default as ProfileFormCard } from "./forms/ProfileFormCard";