Add mgt-todo to mgt-react package (#843)

* mgt-react - changed dependency from mgt to mgt-components

* Exported mgt-components and mgt-element types

* Add mgt-todo to react package

* Change mgt-todo prop name

* pr feedback

Co-authored-by: Nikola Metulev <[email protected]>
Co-authored-by: Nikola Metulev <[email protected]>

Author: beth-panx

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

@@ -29,6 +29,12 @@ import {
 import { styles } from './mgt-todo-css';
 import { strings } from './strings';
 
+/*
+ * Filter function
+ */
+// tslint:disable-next-line: completed-docs
+export type TodoFilter = (task: TodoTask) => boolean;
+
 /**
  * component enables the user to view, add, remove, complete, or edit todo tasks. It works with tasks in Microsoft Planner or Microsoft To-Do.
  *
@@ -89,9 +95,10 @@ export class MgtTodo extends MgtTasksBase {
   /**
    * Optional filter function when rendering tasks
    *
+   * @type {TodoFilter}
    * @memberof MgtTodo
    */
-  public taskFilter: (task: TodoTask) => boolean;
+  public taskFilter: TodoFilter;
 
   private _lists: TodoTaskList[];
   private _tasks: TodoTask[];

packages/mgt-react/scripts/generate.js

@@ -15,7 +15,8 @@ const tags = new Set([
   'mgt-people-picker',
   'mgt-people',
   'mgt-tasks',
-  'mgt-teams-channel-picker'
+  'mgt-teams-channel-picker',
+  'mgt-todo'
 ]);
 
 let output = '';
@@ -54,10 +55,7 @@ for (const tag of wc.tags) {
         continue;
       }
 
-      if (
-        type.startsWith('MicrosoftGraph.') ||
-        type.startsWith('MicrosoftGraphBeta.')
-      ) {
+      if (type.startsWith('MicrosoftGraph.') || type.startsWith('MicrosoftGraphBeta.')) {
         continue;
       }
 

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

@@ -1,4 +1,4 @@
-import { ResponseType,IDynamicPerson,PersonType,GroupType,PersonCardInteraction,MgtPersonConfig,PersonViewType,AvatarSize,TasksStringResource,TasksSource,TaskFilter,SelectedChannel } from '@microsoft/mgt-components';
+import { ResponseType,IDynamicPerson,PersonType,GroupType,PersonCardInteraction,MgtPersonConfig,PersonViewType,AvatarSize,TasksStringResource,TasksSource,TaskFilter,SelectedChannel,TodoFilter } from '@microsoft/mgt-components';
 import { TemplateContext,ComponentMediaQuery } from '@microsoft/mgt-element';
 import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';
 import * as MicrosoftGraphBeta from '@microsoft/microsoft-graph-types-beta';
@@ -132,6 +132,17 @@ export type TeamsChannelPickerProps = {
 	selectionChanged?: (e: Event) => void;
 }
 
+export type TodoProps = {
+	todoFilter?: TodoFilter;
+	readOnly?: boolean;
+	hideHeader?: boolean;
+	hideOptions?: boolean;
+	targetId?: string;
+	initialId?: string;
+	templateContext?: TemplateContext;
+	mediaQuery?: ComponentMediaQuery;
+}
+
 export const Agenda = wrapMgt<AgendaProps>('mgt-agenda');
 
 export const Get = wrapMgt<GetProps>('mgt-get');
@@ -150,5 +161,7 @@ export const Tasks = wrapMgt<TasksProps>('mgt-tasks');
 
 export const TeamsChannelPicker = wrapMgt<TeamsChannelPickerProps>('mgt-teams-channel-picker');
 
-export { ResponseType,IDynamicPerson,PersonType,GroupType,PersonCardInteraction,MgtPersonConfig,PersonViewType,AvatarSize,TasksStringResource,TasksSource,TaskFilter,SelectedChannel } from '@microsoft/mgt-components';
+export const Todo = wrapMgt<TodoProps>('mgt-todo');
+
+export { ResponseType,IDynamicPerson,PersonType,GroupType,PersonCardInteraction,MgtPersonConfig,PersonViewType,AvatarSize,TasksStringResource,TasksSource,TaskFilter,SelectedChannel,TodoFilter } from '@microsoft/mgt-components';
 export { TemplateContext,ComponentMediaQuery } from '@microsoft/mgt-element';