Add BadgeView with Avatar to PeoplePicker demo page (#1524)

* avatars show up but broken * can now add/remove * reorder variants * change to convenience init
microsoft · Jan 27, 2023 · 04af869 · 04af869
1 parent d1b93f8
commit 04af869
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 3 deletions.
diff --git a/ios/FluentUI.Demo/FluentUI.Demo/Demos/PeoplePickerDemoController.swift b/ios/FluentUI.Demo/FluentUI.Demo/Demos/PeoplePickerDemoController.swift
@@ -16,20 +16,23 @@ class PeoplePickerSampleData {
         let allowsPickedPersonasToAppearAsSuggested: Bool
         let showsSearchDirectoryButton: Bool
         let hidePersonaListViewWhenNoSuggestedPersonas: Bool
+        let showsAvatar: Bool
 
-        init(description: String, numberOfLines: Int = 0, pickedPersonas: [Persona] = [], allowsPickedPersonasToAppearAsSuggested: Bool = true, showsSearchDirectoryButton: Bool = true, hidePersonaListViewWhenNoSuggestedPersonas: Bool = false) {
+        init(description: String, numberOfLines: Int = 0, pickedPersonas: [Persona] = [], allowsPickedPersonasToAppearAsSuggested: Bool = true, showsSearchDirectoryButton: Bool = true, hidePersonaListViewWhenNoSuggestedPersonas: Bool = false, showsAvatar: Bool = false) {
             self.description = description
             self.numberOfLines = numberOfLines
             self.pickedPersonas = pickedPersonas
             self.allowsPickedPersonasToAppearAsSuggested = allowsPickedPersonasToAppearAsSuggested
             self.showsSearchDirectoryButton = showsSearchDirectoryButton
             self.hidePersonaListViewWhenNoSuggestedPersonas = hidePersonaListViewWhenNoSuggestedPersonas
+            self.showsAvatar = showsAvatar
         }
     }
 
     static let variants: [Variant] = [
         Variant(description: "Standard implementation with one line of picked personas", numberOfLines: 1, pickedPersonas: [samplePersonas[0], samplePersonas[4], samplePersonas[11], samplePersonas[14]]),
         Variant(description: "Doesn't allow picked personas to appear as suggested", pickedPersonas: [samplePersonas[0], samplePersonas[8]], allowsPickedPersonasToAppearAsSuggested: false),
+        Variant(description: "Showcases persona's avatar", pickedPersonas: [samplePersonas[0], samplePersonas[1]], allowsPickedPersonasToAppearAsSuggested: false, showsAvatar: true),
         Variant(description: "Hides search directory button", pickedPersonas: [samplePersonas[13]], showsSearchDirectoryButton: false, hidePersonaListViewWhenNoSuggestedPersonas: true),
         Variant(description: "Includes callback when picking a suggested persona")
     ]
@@ -87,8 +90,8 @@ class PeoplePickerDemoController: DemoController {
         peoplePicker.showsSearchDirectoryButton = variant.showsSearchDirectoryButton
         peoplePicker.numberOfLines = variant.numberOfLines
         peoplePicker.allowsPickedPersonasToAppearAsSuggested = variant.allowsPickedPersonasToAppearAsSuggested
-        peoplePicker.showsSearchDirectoryButton = variant.showsSearchDirectoryButton
         peoplePicker.hidePersonaListViewWhenNoSuggestedPersonas = variant.hidePersonaListViewWhenNoSuggestedPersonas
+        peoplePicker.showsAvatar = variant.showsAvatar
         peoplePicker.delegate = self
         peoplePickers.append(peoplePicker)
         container.addArrangedSubview(peoplePicker)

diff --git a/ios/FluentUI/People Picker/PeoplePicker.swift b/ios/FluentUI/People Picker/PeoplePicker.swift
@@ -91,6 +91,22 @@ open class PeoplePicker: BadgeField {
 	 */
 	@objc open var hidePersonaListViewWhenNoSuggestedPersonas: Bool = false
 
+    /**
+     Set `showsAvatar` to true to show the persona's Avatar.
+     */
+    @objc open var showsAvatar: Bool = false {
+        didSet {
+            if showsAvatar {
+                deleteAllBadges()
+                pickedPersonas.forEach {
+                    let avatar = MSFAvatar(style: .default, size: .size16)
+                    avatar.state.image = $0.image
+                    addBadge(withDataSource: PersonaBadgeViewDataSource(persona: $0, customView: avatar))
+                }
+            }
+        }
+    }
+
     @objc open weak var delegate: PeoplePickerDelegate? {
         didSet {
             badgeFieldDelegate = delegate
@@ -287,7 +303,13 @@ open class PeoplePicker: BadgeField {
     private func updatePickedPersonaBadges() {
         deleteAllBadges()
         pickedPersonas.forEach {
-            addBadge(withDataSource: PersonaBadgeViewDataSource(persona: $0))
+            if showsAvatar {
+                let avatar = MSFAvatar(style: .default, size: .size16)
+                avatar.state.image = $0.image
+                addBadge(withDataSource: PersonaBadgeViewDataSource(persona: $0, customView: avatar))
+            } else {
+                addBadge(withDataSource: PersonaBadgeViewDataSource(persona: $0))
+            }
         }
     }
 

diff --git a/ios/FluentUI/People Picker/PersonaBadgeViewDataSource.swift b/ios/FluentUI/People Picker/PersonaBadgeViewDataSource.swift
@@ -15,4 +15,9 @@ open class PersonaBadgeViewDataSource: BadgeViewDataSource {
         self.persona = persona
         super.init(text: persona.name, style: style, size: size)
     }
+
+    @objc public convenience init(persona: Persona, style: BadgeView.Style = .default, size: BadgeView.Size = .medium, customView: UIView? = nil) {
+        self.init(persona: persona, style: style, size: size)
+        super.customView = customView
+    }
 }