From a6b1b8340125610b057b4fbfb2cf1309461c0741 Mon Sep 17 00:00:00 2001
From: Siddharth <siddh.vaghasia@gmail.com>
Date: Sat, 30 May 2020 23:48:11 +0530
Subject: [PATCH] Updated teams webpart to display webpart title like OOTB

Updated teams webpart to display webpart title like OOTB
---
 .../src/webparts/myTeams/MyTeamsWebPart.ts               | 6 +++++-
 .../src/webparts/myTeams/components/IMyTeamsProps.ts     | 4 +++-
 .../src/webparts/myTeams/components/MyTeams.tsx          | 9 +++++++--
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/samples/react-teams-message/src/webparts/myTeams/MyTeamsWebPart.ts b/samples/react-teams-message/src/webparts/myTeams/MyTeamsWebPart.ts
index 1315931f9..0ad9edfae 100644
--- a/samples/react-teams-message/src/webparts/myTeams/MyTeamsWebPart.ts
+++ b/samples/react-teams-message/src/webparts/myTeams/MyTeamsWebPart.ts
@@ -27,7 +27,11 @@ export default class MyTeamsWebPart extends BaseClientSideWebPart <IMyTeamsWebPa
         context: this.context,
         webparttitle:this.properties.WebpartTitle,
         showdescription:this.properties.ShowDescription,
-        openpopuponselectingchannel:this.properties.OpenPopupOnSelectingChannel
+        openpopuponselectingchannel:this.properties.OpenPopupOnSelectingChannel,
+        displayMode: this.displayMode,
+        updateProperty: (value: string) => {
+          this.properties.WebpartTitle = value;
+        }
       }
     );
 
diff --git a/samples/react-teams-message/src/webparts/myTeams/components/IMyTeamsProps.ts b/samples/react-teams-message/src/webparts/myTeams/components/IMyTeamsProps.ts
index 506cb70f4..33f94afeb 100644
--- a/samples/react-teams-message/src/webparts/myTeams/components/IMyTeamsProps.ts
+++ b/samples/react-teams-message/src/webparts/myTeams/components/IMyTeamsProps.ts
@@ -1,8 +1,10 @@
 import { WebPartContext } from "@microsoft/sp-webpart-base";
-
+import { DisplayMode } from "@microsoft/sp-core-library";
 export interface IMyTeamsProps {
   context: WebPartContext;
   webparttitle: string;
   showdescription:boolean;
   openpopuponselectingchannel:boolean;
+  displayMode:DisplayMode;
+  updateProperty:(value: string) => void;
 }
diff --git a/samples/react-teams-message/src/webparts/myTeams/components/MyTeams.tsx b/samples/react-teams-message/src/webparts/myTeams/components/MyTeams.tsx
index b5c58c355..4726cf4cc 100644
--- a/samples/react-teams-message/src/webparts/myTeams/components/MyTeams.tsx
+++ b/samples/react-teams-message/src/webparts/myTeams/components/MyTeams.tsx
@@ -6,6 +6,7 @@ import { ServiceProvider } from '../../../shared/services/ServiceProvider';
 import { TreeView, ITreeItem, TreeItemActionsDisplayMode, TreeViewSelectionMode } from "@pnp/spfx-controls-react/lib/TreeView";
 import { PrimaryButton, DefaultButton, Dialog, DialogFooter, DialogType, TextField, MessageBar,MessageBarType } from 'office-ui-fabric-react';
 import { initializeIcons } from '@uifabric/icons';
+import { WebPartTitle } from "@pnp/spfx-controls-react/lib/WebPartTitle";
 
 export interface IMyTeamsState {
   myteams: any[];
@@ -127,9 +128,13 @@ export default class MyTeams extends React.Component<IMyTeamsProps, IMyTeamsStat
       <React.Fragment>
         <div className={styles.myTeams}>
           <i className="ms-Icon ms-Icon--TeamsLogo" aria-hidden="true"></i>
-          <h1 className={styles.webpartitle}>
+          {/* <h1 className={styles.webpartitle}>
 
-            {this.props.webparttitle}</h1>
+            {this.props.webparttitle}</h1> */}
+
+            <WebPartTitle displayMode={this.props.displayMode}
+              title={this.props.webparttitle}
+              updateProperty={this.props.updateProperty} />
            
           {this.state.showMessage &&
           <React.Fragment>