Updated orgchart to use office-ui-fabric-react and uifabric/styling (#269)

* initial checkin

* basic code ready

* use office-ui-fabric-react and @uifabric/styling

* formatting

* package-lock

* updated readme

* removed wip code

* fix react children rendering

* deleted lock file added incorrectly.

samples/react-organisationchart/README.md

@@ -27,6 +27,7 @@ Version|Date|Comments
 -------|----|--------
 1.0|September 14, 2016|Initial release
 2.0|March 12, 2017|Updated for SPFx 1.0
+2.1|July 19, 2017|Use office-ui-fabric-react and uifabric/styling
 
 ## Disclaimer
 **THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**

samples/react-organisationchart/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-organisationchart",
-  "version": "0.0.1",
+  "version": "2.1.0",
   "private": true,
   "engines": {
     "node": ">=0.10.0"
@@ -15,6 +15,7 @@
     "@types/react-addons-update": "0.14.14",
     "@types/react-dom": "0.14.18",
     "@types/webpack-env": ">=1.12.1 <1.14.0",
+    "office-ui-fabric-react": "^4.21.1",
     "react": "15.4.2",
     "react-dom": "15.4.2"
   },

samples/react-organisationchart/src/webparts/organisationChart/components/OrganisationChart.module.scss

@@ -1,3 +0,0 @@
-@import "~office-ui-fabric/dist/sass/Fabric.scss";
-@import "~office-ui-fabric/dist/components/Persona/Persona.scss";
-@import "~office-ui-fabric/dist/components/OrgChart/OrgChart.scss";

samples/react-organisationchart/src/webparts/organisationChart/components/OrganisationChart.tsx

@@ -1,9 +1,11 @@
 import * as React from 'react';
-import styles from './OrganisationChart.module.scss';
 import { escape } from '@microsoft/sp-lodash-subset';
 
-import { IOrganisationChartProps } from './IOrganisationChartProps';
+import { Persona, PersonaSize, PersonaPresence } from 'office-ui-fabric-react/lib/Persona';
 
+import { FontClassNames } from '@uifabric/styling';
+
+import { IOrganisationChartProps } from './IOrganisationChartProps';
 
 import { ServiceScope, Environment, EnvironmentType } from '@microsoft/sp-core-library';
 import { IPerson, IUserProfileService } from '../interfaces';
@@ -16,6 +18,35 @@ export interface IOrganisationChartWebPartState {
   reports?: IPerson[];
 }
 
+interface IPersonaListProps {
+  title: string;
+  users: IPerson[];
+  getProfilePhoto: (photoUrl: string) => string;
+  onProfileLinkClick: (profileLink: string) => void;
+}
+
+class PersonaList extends React.Component<IPersonaListProps, {}> {
+  public render() {
+    return (
+      <div>
+        <div className={FontClassNames.large}>{this.props.title}</div>
+        {this.props.users.map((user, index) => (
+          <div key={index}>
+            <Persona
+              imageUrl={this.props.getProfilePhoto(user.PictureUrl)}
+              primaryText={user.DisplayName}
+              secondaryText={user.Title}
+              size={PersonaSize.regular}
+              presence={PersonaPresence.none}
+              onClick={() => this.props.onProfileLinkClick(user.UserUrl)}
+            />
+          </div>
+        ))}
+      </div>
+    );
+  }
+}
+
 export default class OrganisationChart extends React.Component<IOrganisationChartProps, IOrganisationChartWebPartState> {
 
   private userProfileServiceInstance: IUserProfileService;
@@ -48,66 +79,33 @@ export default class OrganisationChart extends React.Component<IOrganisationChar
 
   public render(): React.ReactElement<IOrganisationChartProps> {
     return (
-      <div className={styles['ms-OrgChart']}>
+      <div>
-        <div className="ms-font-xl">
+        <div className={FontClassNames.xLarge}>
           {escape(this.props.organisationName)}
         </div>
-        <div className="ms-OrgChart-group">
+        <PersonaList
-          <div className="ms-OrgChart-groupTitle">Managers</div>
+          title="Managers"
-          <ul className={styles['ms-OrgChart-list']}>
+          users={this.state.managers}
-            {this.state.managers.map((manager, index) => (
+          getProfilePhoto={this.getProfilePhoto.bind(this)}
-              <li key={index} className={styles['ms-OrgChart-listItem']}>
+          onProfileLinkClick={this.onProfileLinkClick.bind(this)}
-                <button className={styles['ms-OrgChart-listItemBtn']} onClick={() => this.onProfileLinkClick(manager.UserUrl)}>
+        />
-                  <div className="ms-Persona">
+        <div>
-                    <div className="ms-Persona-imageArea">
+          <div className={FontClassNames.large}>You</div>
-                      <img className="ms-Persona-image" alt="" role="presentation" src={this.getProfilePhoto(manager.PictureUrl)}></img>
+          <Persona
-                    </div>
+            imageUrl={this.getProfilePhoto(this.state.user.PictureUrl)}
-                    <div className="ms-Persona-details">
+            primaryText={this.state.user.DisplayName}
-                      <div className="ms-Persona-primaryText">{manager.DisplayName}</div>
+            secondaryText={this.state.user.Title}
-                      <div className="ms-Persona-secondaryText">{manager.Title}</div>
+            size={PersonaSize.regular}
-                    </div>
+            presence={PersonaPresence.none}
-                  </div>
+            onClick={() => this.onProfileLinkClick(this.state.user.UserUrl)}
-                </button>
+          />
-              </li>))}
-          </ul>
-        </div>
-        <div className="ms-OrgChart-group">
-          <div className="ms-OrgChart-groupTitle">You</div>
-          <ul className={styles['ms-OrgChart-list']}>
-            <li className={styles['ms-OrgChart-listItem']}>
-              <button className={styles['ms-OrgChart-listItemBtn']} onClick={() => this.onProfileLinkClick(this.state.user.UserUrl)}>
-                <div className="ms-Persona">
-                  <div className="ms-Persona-imageArea">
-                    <img className="ms-Persona-image" alt="" role="presentation" src={this.getProfilePhoto(this.state.user.PictureUrl)}></img>
-                  </div>
-                  <div className="ms-Persona-details">
-                    <div className="ms-Persona-primaryText">{this.state.user.DisplayName}</div>
-                    <div className="ms-Persona-secondaryText">{this.state.user.Title}</div>
-                  </div>
-                </div>
-              </button>
-            </li>
-          </ul>
-        </div>
-        <div className="ms-OrgChart-group">
-          <div className="ms-OrgChart-groupTitle">Reports</div>
-          <ul className={styles['ms-OrgChart-list']}>
-            {this.state.reports.map((report, index) => (
-              <li key={index} className={styles['ms-OrgChart-listItem']}>
-                <button className={styles['ms-OrgChart-listItemBtn']} onClick={() => this.onProfileLinkClick(report.UserUrl)}>
-                  <div className="ms-Persona">
-                    <div className="ms-Persona-imageArea">
-                      <img className="ms-Persona-image" alt="" role="presentation" src={this.getProfilePhoto(report.PictureUrl)}></img>
-                    </div>
-                    <div className="ms-Persona-details">
-                      <div className="ms-Persona-primaryText">{report.DisplayName}</div>
-                      <div className="ms-Persona-secondaryText">{report.Title}</div>
-                    </div>
-                  </div>
-                </button>
-              </li>))}
-          </ul>
         </div>
+        <PersonaList
+          title="Reports"
+          users={this.state.reports}
+          getProfilePhoto={this.getProfilePhoto.bind(this)}
+          onProfileLinkClick={this.onProfileLinkClick.bind(this)}
+        />
       </div>
     );
   }