diff --git a/ios/FluentUI.Demo/FluentUI.Demo/Demos/PeoplePickerDemoController.swift b/ios/FluentUI.Demo/FluentUI.Demo/Demos/PeoplePickerDemoController.swift index a480a26318..f508ff58f1 100644 --- 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 index 4465465276..4c7a88141b 100644 --- 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 index abd6e2c3ed..cd94983e22 100644 --- 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 + } }