Added new section header (microsoft#270)

* moving some files around so saving some progress * Added new header styles * Added chevron assets * Updated new section header PR * Added changes * Added changes * Added changes * Added changes * Added changes * Removed extra line * Added changes
HeyImChris · Oct 24, 2020 · ab4610e · ab4610e
1 parent 378f63b
commit ab4610e
Show file tree

Hide file tree

Showing 8 changed files with 154 additions and 40 deletions.
diff --git a/ios/FluentUI.Demo/FluentUI.Demo/Demos/TableViewHeaderFooterViewDemoController.swift b/ios/FluentUI.Demo/FluentUI.Demo/Demos/TableViewHeaderFooterViewDemoController.swift
@@ -19,6 +19,7 @@ class TableViewHeaderFooterViewDemoController: DemoController {
     }()
     private lazy var groupedTableView: UITableView = createTableView(style: .grouped)
     private lazy var plainTableView: UITableView = createTableView(style: .plain)
+    private var collapsedSections: [Bool] = [Bool](repeating: false, count: TableViewHeaderFooterSampleData.groupedSections.count)
 
     override func viewDidLoad() {
         super.viewDidLoad()
@@ -59,7 +60,7 @@ extension TableViewHeaderFooterViewDemoController: UITableViewDataSource {
     }
 
     func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
-        return TableViewHeaderFooterSampleData.numberOfItemsInSection
+        return collapsedSections[section] ? 0 : TableViewHeaderFooterSampleData.numberOfItemsInSection
     }
 
     func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
@@ -88,11 +89,16 @@ extension TableViewHeaderFooterViewDemoController: UITableViewDelegate {
 
     func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
         let header = tableView.dequeueReusableHeaderFooterView(withIdentifier: TableViewHeaderFooterView.identifier) as! TableViewHeaderFooterView
+        let index = section
         let section = tableView.style == .grouped ? groupedSections[section] : plainSections[section]
+        if section.hasHandler {
+            header.onHeaderViewTapped = { [weak self] in self?.forHeaderTapped(header: header, section: index) }
+        }
+
         if section.hasCustomAccessoryView {
-            header.setup(style: section.headerStyle, title: section.title, accessoryView: createCustomAccessoryView())
+            header.setup(style: section.headerStyle, title: section.title, accessoryView: createCustomAccessoryView(), leadingView: section.hasCustomLeadingView ? createCustomLeadingView(section: index) : nil)
         } else {
-            header.setup(style: section.headerStyle, title: section.title, accessoryButtonTitle: section.hasAccessory ? "See More" : "")
+            header.setup(style: section.headerStyle, title: section.title, accessoryButtonTitle: section.hasAccessory ? "See More" : "", leadingView: section.hasCustomLeadingView ? createCustomLeadingView(section: index) : nil)
         }
 
         header.titleNumberOfLines = section.numberOfLines
@@ -109,6 +115,11 @@ extension TableViewHeaderFooterViewDemoController: UITableViewDelegate {
         return button
     }
 
+    private func createCustomLeadingView(section: Int) -> UIView {
+        let imageName = collapsedSections[section] ? "chevron-right-20x20" : "chevron-down-20x20"
+        return UIImageView(image: UIImage(named: imageName))
+    }
+
     func tableView(_ tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {
         if tableView.style == .grouped && groupedSections[section].hasFooter {
             let footer = tableView.dequeueReusableHeaderFooterView(withIdentifier: TableViewHeaderFooterView.identifier) as! TableViewHeaderFooterView
@@ -143,6 +154,11 @@ extension TableViewHeaderFooterViewDemoController: UITableViewDelegate {
         alert.addAction(action)
         present(alert, animated: true)
     }
+
+    private func forHeaderTapped(header: TableViewHeaderFooterView, section: Int) {
+        collapsedSections[section] = !collapsedSections[section]
+        groupedTableView.reloadSections(IndexSet(integer: section), with: UITableView.RowAnimation.fade)
+    }
 }
 
 // MARK: - TableViewHeaderFooterViewDemoController: TableViewHeaderFooterViewDelegate

diff --git a/...urces/Assets.xcassets/TableViewHeaderFooterView/chevron-down-20x20.imageset/Contents.json b/...urces/Assets.xcassets/TableViewHeaderFooterView/chevron-down-20x20.imageset/Contents.json
@@ -0,0 +1,15 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "ic_chevron_down_20_outlined.pdf"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  },
+  "properties" : {
+    "template-rendering-intent" : "template"
+  }
+}
diff --git a/...ets/TableViewHeaderFooterView/chevron-down-20x20.imageset/ic_chevron_down_20_outlined.pdf b/...ets/TableViewHeaderFooterView/chevron-down-20x20.imageset/ic_chevron_down_20_outlined.pdf
diff --git a/...rces/Assets.xcassets/TableViewHeaderFooterView/chevron-right-20x20.imageset/Contents.json b/...rces/Assets.xcassets/TableViewHeaderFooterView/chevron-right-20x20.imageset/Contents.json
@@ -0,0 +1,16 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "ic_chevron_right_20_outlined.pdf",
+      "language-direction" : "left-to-right"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  },
+  "properties" : {
+    "template-rendering-intent" : "template"
+  }
+}
diff --git a/...s/TableViewHeaderFooterView/chevron-right-20x20.imageset/ic_chevron_right_20_outlined.pdf b/...s/TableViewHeaderFooterView/chevron-right-20x20.imageset/ic_chevron_right_20_outlined.pdf
diff --git a/ios/FluentUI.Demo/FluentUI.Demo/TableViewHeaderFooterSampleData.swift b/ios/FluentUI.Demo/FluentUI.Demo/TableViewHeaderFooterSampleData.swift
@@ -11,6 +11,8 @@ class TableViewHeaderFooterSampleData: TableViewSampleData {
     static let itemTitle: String = "Contoso Survey"
 
     static let groupedSections: [Section] = [
+        Section(title: "Primary Title", headerStyle: .headerPrimary),
+        Section(title: "Primary Expandable", headerStyle: .headerPrimary, hasCustomLeadingView: true, hasHandler: true),
         Section(title: "Default"),
         Section(title: "Default with accessory button", hasAccessory: true),
         Section(title: "Default with primary accessory button", hasAccessory: true, accessoryButtonStyle: .primary),

diff --git a/ios/FluentUI.Demo/FluentUI.Demo/TableViewSampleData.swift b/ios/FluentUI.Demo/FluentUI.Demo/TableViewSampleData.swift
@@ -22,8 +22,10 @@ class TableViewSampleData {
         let footerLinkText: String
         let hasCustomLinkHandler: Bool
         let hasCustomAccessoryView: Bool
+        let hasCustomLeadingView: Bool
+        let hasHandler: Bool
 
-        init(title: String, items: [Item] = [], numberOfLines: Int = 1, hasFullLengthLabelAccessoryView: Bool = false, hasAccessory: Bool = false, accessoryButtonStyle: TableViewHeaderFooterView.AccessoryButtonStyle = .regular, allowsMultipleSelection: Bool = true, headerStyle: TableViewHeaderFooterView.Style = .header, hasFooter: Bool = false, footerText: String = "", footerLinkText: String = "", hasCustomLinkHandler: Bool = false, hasCustomAccessoryView: Bool = false) {
+        init(title: String, items: [Item] = [], numberOfLines: Int = 1, hasFullLengthLabelAccessoryView: Bool = false, hasAccessory: Bool = false, accessoryButtonStyle: TableViewHeaderFooterView.AccessoryButtonStyle = .regular, allowsMultipleSelection: Bool = true, headerStyle: TableViewHeaderFooterView.Style = .header, hasFooter: Bool = false, footerText: String = "", footerLinkText: String = "", hasCustomLinkHandler: Bool = false, hasCustomAccessoryView: Bool = false, hasCustomLeadingView: Bool = false, hasHandler: Bool = false) {
             self.title = title
             self.items = items
             self.numberOfLines = numberOfLines
@@ -37,6 +39,8 @@ class TableViewSampleData {
             self.footerLinkText = footerLinkText
             self.hasCustomLinkHandler = hasCustomLinkHandler
             self.hasCustomAccessoryView = hasCustomAccessoryView
+            self.hasCustomLeadingView = hasCustomLeadingView
+            self.hasHandler = hasHandler
         }
     }