Merge pull request #51 from windows-toolkit/michael-hawker/update-tok…

…enizing Draft - Update TokenizingTextBox usage for PeoplePicker
CommunityToolkit · Jun 12, 2020 · 6666ff3 · 6666ff3
2 parents a96dd84 + a8670cc
commit 6666ff3
Show file tree

Hide file tree

Showing 27 changed files with 154 additions and 206 deletions.
diff --git a/Directory.Build.props b/Directory.Build.props
@@ -53,8 +53,8 @@
         <AllowedOutputExtensionsInPackageBuildOutputFolder>$(AllowedOutputExtensionsInPackageBuildOutputFolder);.pdb</AllowedOutputExtensionsInPackageBuildOutputFolder>
       </PropertyGroup>
       <ItemGroup>
-        <PackageReference Include="Microsoft.SourceLink.Vsts.Git" Version="1.0.0-beta-62925-02" PrivateAssets="All"/>
-        <PackageReference Include="Microsoft.SourceLink.GitHub" Version="1.0.0-beta-62925-02" PrivateAssets="All"/>
+        <PackageReference Include="Microsoft.SourceLink.AzureRepos.Git" Version="1.0.0" PrivateAssets="All"/>
+        <PackageReference Include="Microsoft.SourceLink.GitHub" Version="1.0.0" PrivateAssets="All"/>
       </ItemGroup>
     </When>
   </Choose>
@@ -63,7 +63,7 @@
     <When Condition="'$(IsTestProject)' != 'true' and '$(IsSampleProject)' != 'true' and '$(IsDesignProject)' != 'true' and '$(IsWpfProject)' != 'true'">
       <ItemGroup>
         <!--<PackageReference Include="Microsoft.VisualStudio.Threading.Analyzers" Version="15.3.83" PrivateAssets="all" />-->
-        <PackageReference Include="StyleCop.Analyzers" Version="1.0.2" PrivateAssets="all" />
+        <PackageReference Include="StyleCop.Analyzers" Version="1.1.118" PrivateAssets="all" />
 
         <EmbeddedResource Include="**\*.rd.xml" />
         <Page Include="**\*.xaml" Exclude="**\bin\**\*.xaml;**\obj\**\*.xaml" SubType="Designer" Generator="MSBuild:Compile" />
@@ -83,7 +83,7 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="Nerdbank.GitVersioning" Version=" 2.1.65" PrivateAssets="all" />
+    <PackageReference Include="Nerdbank.GitVersioning" Version="3.1.91" PrivateAssets="all" />
   </ItemGroup>
 
   <ItemGroup>

diff --git a/Microsoft.Toolkit.Graph.Controls/Controls/PeoplePicker/PeoplePicker.Properties.cs b/Microsoft.Toolkit.Graph.Controls/Controls/PeoplePicker/PeoplePicker.Properties.cs
diff --git a/Microsoft.Toolkit.Graph.Controls/Controls/PeoplePicker/PeoplePicker.cs b/Microsoft.Toolkit.Graph.Controls/Controls/PeoplePicker/PeoplePicker.cs
@@ -3,6 +3,8 @@
 // See the LICENSE file in the project root for more information.
 
 using System;
+using System.Collections;
+using System.Collections.ObjectModel;
 using System.Linq;
 using Microsoft.Graph;
 using Microsoft.Toolkit.Graph.Extensions;
@@ -17,13 +19,8 @@ namespace Microsoft.Toolkit.Graph.Controls
     /// <summary>
     /// Control which allows user to search for a person or contact within Microsoft Graph. Built on top of <see cref="TokenizingTextBox"/>.
     /// </summary>
-    [TemplatePart(Name = PeoplePickerTokenizingTextBoxName, Type = typeof(TokenizingTextBox))]
-    public partial class PeoplePicker : Control
+    public partial class PeoplePicker : TokenizingTextBox
     {
-        private const string PeoplePickerTokenizingTextBoxName = "PART_TokenizingTextBox";
-
-        private TokenizingTextBox _tokenBox;
-
         private DispatcherTimer _typeTimer = new DispatcherTimer();
 
         /// <summary>
@@ -32,33 +29,14 @@ public partial class PeoplePicker : Control
         public PeoplePicker()
         {
             this.DefaultStyleKey = typeof(PeoplePicker);
-        }
-
-        /// <inheritdoc/>
-        protected override void OnApplyTemplate()
-        {
-            base.OnApplyTemplate();
-
-            if (_tokenBox != null)
-            {
-                _tokenBox.TextChanged -= TokenBox_TextChanged;
-                _tokenBox.TokenItemAdded -= TokenBox_TokenItemAdded;
-                _tokenBox.TokenItemCreating -= TokenBox_TokenItemCreating;
-                _tokenBox.TokenItemRemoved -= TokenBox_TokenItemRemoved;
-            }
 
-            _tokenBox = GetTemplateChild(PeoplePickerTokenizingTextBoxName) as TokenizingTextBox;
+            SuggestedItemsSource = new ObservableCollection<Person>();
 
-            if (_tokenBox != null)
-            {
-                _tokenBox.TextChanged += TokenBox_TextChanged;
-                _tokenBox.TokenItemAdded += TokenBox_TokenItemAdded;
-                _tokenBox.TokenItemCreating += TokenBox_TokenItemCreating;
-                _tokenBox.TokenItemRemoved += TokenBox_TokenItemRemoved;
-            }
+            TextChanged += TokenBox_TextChanged;
+            TokenItemAdding += TokenBox_TokenItemTokenItemAdding;
         }
 
-        private async void TokenBox_TokenItemCreating(TokenizingTextBox sender, TokenItemCreatingEventArgs args)
+        private async void TokenBox_TokenItemTokenItemAdding(TokenizingTextBox sender, TokenItemAddingEventArgs args)
         {
             using (args.GetDeferral())
             {
@@ -79,19 +57,6 @@ private async void TokenBox_TokenItemCreating(TokenizingTextBox sender, TokenIte
             }
         }
 
-        private void TokenBox_TokenItemAdded(TokenizingTextBox sender, TokenizingTextBoxItem args)
-        {
-            if (args?.Content is Person person)
-            {
-                PickedPeople.Add(person);
-            }
-        }
-
-        private void TokenBox_TokenItemRemoved(TokenizingTextBox sender, TokenItemRemovedEventArgs args)
-        {
-            PickedPeople.Remove(args.Item as Person);
-        }
-
         private void TokenBox_TextChanged(AutoSuggestBox sender, AutoSuggestBoxTextChangedEventArgs args)
         {
             if (!args.CheckCurrent())
@@ -102,33 +67,49 @@ private void TokenBox_TextChanged(AutoSuggestBox sender, AutoSuggestBoxTextChang
             if (args.Reason == AutoSuggestionBoxTextChangeReason.UserInput)
             {
                 var text = sender.Text;
-                _typeTimer.Debounce(
-                    async () =>
+                var list = SuggestedItemsSource as IList;
+
+                if (list != null)
                 {
-                    var graph = ProviderManager.Instance.GlobalProvider.Graph;
-                    if (graph != null)
+                    _typeTimer.Debounce(
+                    async () =>
                     {
-                        // If empty, clear out
-                        if (string.IsNullOrWhiteSpace(text))
+                        var graph = ProviderManager.Instance.GlobalProvider.Graph;
+                        if (graph != null)
                         {
-                            SuggestedPeople.Clear();
-                        }
-                        else
-                        {
-                            SuggestedPeople.Clear();
+                            // If empty, will clear out
+                            list.Clear();
 
-                            foreach (var contact in (await graph.FindPersonAsync(text)).CurrentPage)
+                            if (!string.IsNullOrWhiteSpace(text))
                             {
-                                if (!PickedPeople.Any(person => person.Id == contact.Id))
+                                foreach (var user in (await graph.FindUserAsync(text)).CurrentPage)
                                 {
-                                    SuggestedPeople.Add(contact);
+                                    // Exclude people in suggested list that we already have picked
+                                    if (!Items.Any(person => (person as Person)?.Id == user.Id))
+                                    {
+                                        list.Add(user.ToPerson());
+                                    }
+                                }
+
+                                // Grab ids of current suggestions
+                                var ids = list.Cast<object>().Select(person => (person as Person).Id);
+
+                                foreach (var contact in (await graph.FindPersonAsync(text)).CurrentPage)
+                                {
+                                    // Exclude people in suggested list that we already have picked
+                                    // Or already suggested
+                                    if (!Items.Any(person => (person as Person)?.Id == contact.Id) &&
+                                        !ids.Any(id => id == contact.Id))
+                                    {
+                                        list.Add(contact);
+                                    }
                                 }
                             }
                         }
-                    }
 
-                    // TODO: If we don't have Graph connection and just list of Person should we auto-filter here?
-                }, TimeSpan.FromSeconds(0.3));
+                        // TODO: If we don't have Graph connection and just list of Person should we auto-filter here?
+                    }, TimeSpan.FromSeconds(0.3));
+                }
             }
         }
     }

diff --git a/Microsoft.Toolkit.Graph.Controls/Controls/PeoplePicker/PeoplePicker.xaml b/Microsoft.Toolkit.Graph.Controls/Controls/PeoplePicker/PeoplePicker.xaml
@@ -2,36 +2,34 @@
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:local="using:Microsoft.Toolkit.Graph.Controls"
-    xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls">
+    xmlns:ex="using:Microsoft.Toolkit.Uwp.UI.Extensions">
+    <ResourceDictionary.MergedDictionaries>
+        <ResourceDictionary Source="ms-appx:///Microsoft.Toolkit.Uwp.UI.Controls/TokenizingTextBox/TokenizingTextBox.xaml" />
+    </ResourceDictionary.MergedDictionaries>
 
-    <Style TargetType="local:PeoplePicker">
-        <Setter Property="Template">
+    <Style TargetType="local:PeoplePicker" BasedOn="{StaticResource DefaultPeoplePickerStyle}"/>
+
+    <Style x:Key="DefaultPeoplePickerStyle" TargetType="local:PeoplePicker" BasedOn="{StaticResource DefaultTokenizingTextBoxStyle}">
+        <Setter Property="QueryIcon">
+            <Setter.Value>
+                <SymbolIconSource Symbol="Find"/>
+            </Setter.Value>
+        </Setter>
+        <Setter Property="PlaceholderText" Value="Start typing a name"/>
+        <Setter Property="TextMemberPath" Value="DisplayName"/>
+        <Setter Property="TokenDelimiter" Value=","/>
+        <Setter Property="SuggestedItemTemplate">
+            <Setter.Value>
+                <DataTemplate>
+                    <local:PersonView PersonDetails="{Binding}" ShowName="True" ShowEmail="True"/>
+                </DataTemplate>
+            </Setter.Value>
+        </Setter>
+        <Setter Property="TokenItemTemplate">
             <Setter.Value>
-                <ControlTemplate TargetType="local:PeoplePicker">
-                    <Border
-                        Background="{TemplateBinding Background}"
-                        BorderBrush="{TemplateBinding BorderBrush}"
-                        BorderThickness="{TemplateBinding BorderThickness}">
-                        <controls:TokenizingTextBox
-                            x:Name="PART_TokenizingTextBox"
-                            QueryIcon="Find"
-                            PlaceholderText="Start typing a name"
-                            TextMemberPath="DisplayName"
-                            TokenDelimiter=","
-                            SuggestedItemsSource="{TemplateBinding SuggestedPeople}">
-                            <controls:TokenizingTextBox.SuggestedItemTemplate>
-                                <DataTemplate>
-                                    <local:PersonView PersonDetails="{Binding}" ShowName="True" ShowEmail="True"/>
-                                </DataTemplate>
-                            </controls:TokenizingTextBox.SuggestedItemTemplate>
-                            <controls:TokenizingTextBox.TokenItemTemplate>
-                                <DataTemplate>
-                                    <local:PersonView PersonDetails="{Binding}" ShowName="True"/>
-                                </DataTemplate>
-                            </controls:TokenizingTextBox.TokenItemTemplate>
-                        </controls:TokenizingTextBox>
-                    </Border>
-                </ControlTemplate>
+                <DataTemplate>
+                    <local:PersonView PersonDetails="{Binding}" ShowName="True"/>
+                </DataTemplate>
             </Setter.Value>
         </Setter>
     </Style>

diff --git a/Microsoft.Toolkit.Graph.Controls/Microsoft.Toolkit.Graph.Controls.csproj b/Microsoft.Toolkit.Graph.Controls/Microsoft.Toolkit.Graph.Controls.csproj
@@ -24,8 +24,8 @@
   </ItemGroup> 
 
 	<ItemGroup>
-    <PackageReference Include="Microsoft.Toolkit.Uwp.UI" Version="6.0.0-rc1.2" />
-    <PackageReference Include="Microsoft.Toolkit.Uwp.UI.Controls" Version="6.0.0-rc1.2" />
+    <PackageReference Include="Microsoft.Toolkit.Uwp.UI" Version="6.1.0-build.183" />
+    <PackageReference Include="Microsoft.Toolkit.Uwp.UI.Controls" Version="6.1.0-build.183" />
     <ProjectReference Include="..\Microsoft.Toolkit.Graph\Microsoft.Toolkit.Graph.csproj" />
   </ItemGroup>
 
@@ -34,8 +34,8 @@
   </ItemGroup>
 
   <ItemGroup>
-    <PackageReference Include="Microsoft.Graph.Beta" Version="0.8.0-preview" />
-    <PackageReference Include="Microsoft.Graph.Auth" Version="1.0.0-preview.2" />
+    <PackageReference Include="Microsoft.Graph.Beta" Version="0.18.0-preview" />
+    <PackageReference Include="Microsoft.Graph.Auth" Version="1.0.0-preview.4" />
   </ItemGroup>
 
   <ItemGroup>

diff --git a/Microsoft.Toolkit.Graph.Controls/Providers/InteractiveProviderBehavior.cs b/Microsoft.Toolkit.Graph.Controls/Providers/InteractiveProviderBehavior.cs
@@ -20,7 +20,7 @@ namespace Microsoft.Toolkit.Graph.Providers
 {
     /// <summary>
     /// Put in a xaml page with ClientId
-    /// https://github.com/AzureAD/microsoft-authentication-library-for-dotnet/wiki/Acquiring-tokens-interactively
+    /// https://github.com/AzureAD/microsoft-authentication-library-for-dotnet/wiki/Acquiring-tokens-interactively.
     /// </summary>
     /// <example>
     /// <code>

diff --git a/Microsoft.Toolkit.Graph.Controls/Providers/MockProviderBehavior.cs b/Microsoft.Toolkit.Graph.Controls/Providers/MockProviderBehavior.cs
@@ -20,7 +20,7 @@ namespace Microsoft.Toolkit.Graph.Providers
 {
     /// <summary>
     /// Put in a xaml page with ClientId
-    /// https://github.com/AzureAD/microsoft-authentication-library-for-dotnet/wiki/Acquiring-tokens-interactively
+    /// https://github.com/AzureAD/microsoft-authentication-library-for-dotnet/wiki/Acquiring-tokens-interactively.
     /// </summary>
     /// <example>
     /// <code>

diff --git a/Microsoft.Toolkit.Graph.Controls/Providers/QuickCreate.cs b/Microsoft.Toolkit.Graph.Controls/Providers/QuickCreate.cs
@@ -30,7 +30,7 @@ public static class QuickCreate
         /// ProviderManager.Instance.GlobalProvider = await QuickCreate.CreateMsalProviderAsync("MyClientId");
         /// </code>
         /// </example>
-        /// <param name="clientid">Registered ClientId</param>
+        /// <param name="clientid">Registered ClientId.</param>
         /// <param name="redirectUri">RedirectUri for auth response.</param>
         /// <param name="scopes">List of Scopes to initially request.</param>
         /// <returns>New <see cref="MsalProvider"/> reference.</returns>

diff --git a/Microsoft.Toolkit.Graph.Controls/Providers/ScopeSet.cs b/Microsoft.Toolkit.Graph.Controls/Providers/ScopeSet.cs
@@ -3,15 +3,15 @@
 // See the LICENSE file in the project root for more information.
 
 #if DOTNET
-    using Microsoft.Xaml.Behaviors;
-    using System.Collections.Generic;
-    using System.Collections.ObjectModel;
-    using System.ComponentModel;
-    using System.Linq;
+using Microsoft.Xaml.Behaviors;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.ComponentModel;
+using System.Linq;
 #else
-    using System.Collections.Generic;
-    using System.Collections.ObjectModel;
-    using System.Linq;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.Linq;
 #endif
 
 #if DOTNET
@@ -39,7 +39,7 @@ public class ScopeSet : Collection<string>
         /// Helper to convert a string of scopes to a list of strings.
         /// </summary>
         /// <param name="rawString">Comma separated scope list.</param>
-        /// <returns>New List of strings, i.e. ScopeSet</returns>
+        /// <returns>New List of strings, i.e. ScopeSet.</returns>
         public static ScopeSet ConvertToScopeArray(string rawString)
         {
             if (rawString != null)