feat: expose updated event

makes updated event of MgtBaseTaskComponent accessible on Person control

Author: ThomasPe

packages/mgt-components/src/components/mgt-person/mgt-person.ts

@@ -75,6 +75,7 @@ export const registerMgtPersonComponent = () => {
  * @class MgtPerson
  * @extends {MgtTemplatedComponent}
  *
+ * @fires {CustomEvent<null>} updated - Fired when the component is updated
  * @fires {CustomEvent<IDynamicPerson>} line1clicked - Fired when line1 is clicked
  * @fires {CustomEvent<IDynamicPerson>} line2clicked - Fired when line2 is clicked
  * @fires {CustomEvent<IDynamicPerson>} line3clicked - Fired when line3 is clicked
@@ -952,7 +953,7 @@ export class MgtPerson extends MgtTemplatedTaskComponent {
     }
 
     // if we have more than one line we add the second line
-    if (this.view !== 'oneline') {
+    if (!this.isOneLine()) {
       const text = this.getTextFromProperty(person, this.line2Property);
       if (this.hasTemplate('line2')) {
         // Render the line2 template
@@ -973,7 +974,7 @@ export class MgtPerson extends MgtTemplatedTaskComponent {
     }
 
     // if we have a third or fourth line we add the third line
-    if (this.view === 'threelines' || this.view === 'fourlines') {
+    if (this.isThreeLines() || this.isFourLines()) {
       const text = this.getTextFromProperty(person, this.line3Property);
       if (this.hasTemplate('line3')) {
         // Render the line3 template
@@ -994,7 +995,7 @@ export class MgtPerson extends MgtTemplatedTaskComponent {
     }
 
     // add the fourth line if necessary
-    if (this.view === 'fourlines') {
+    if (this.isFourLines()) {
       const text = this.getTextFromProperty(person, this.line4Property);
       if (this.hasTemplate('line4')) {
         // Render the line4 template

packages/mgt-react/src/generated/person.ts

@@ -37,6 +37,7 @@ export type PersonProps = {
 	line4Property?: string;
 	view?: ViewType;
 	templateContext?: TemplateContext;
+	updated?: (e: CustomEvent<null>) => void;
 	line1clicked?: (e: CustomEvent<IDynamicPerson>) => void;
 	line2clicked?: (e: CustomEvent<IDynamicPerson>) => void;
 	line3clicked?: (e: CustomEvent<IDynamicPerson>) => void;

stories/components/person/person.html.stories.js

@@ -36,6 +36,10 @@ export const events = () => html`
 
   <script>
   const person = document.querySelector('mgt-person');
+  person.addEventListener('updated', e => {
+      console.log('updated', e);
+  });
+
   person.addEventListener('line1clicked', e => {
       const output = document.querySelector('.output');
 

stories/components/person/person.react.stories.js

@@ -82,6 +82,10 @@ export const events = () => html`
     import { Person, IDynamicPerson } from '@microsoft/mgt-react';
 
     export default () => {
+      const onUpdated = useCallback((e: CustomEvent<null>) => {
+        console.log('component updated', e);
+      }, []);
+
       const onLineClicked = useCallback((e: CustomEvent<IDynamicPerson>) => {
         console.log(e.detail);
       }, []);
@@ -90,6 +94,7 @@ export const events = () => html`
         <Person
           personQuery="me"
           view="fourlines"
+          updated={onUpdated}
           line1clicked={onLineClicked}
           line2clicked={onLineClicked}
           line3clicked={onLineClicked}