fix(ios): calculate proper row width for UITableViewStyleInsetGrouped (…

…#12419)

Closes TIMOB-28325

Co-authored-by: ssekhri <ssekhri@axway.com>

apidoc/Titanium/UI/iOS/ListViewStyle.yml

@@ -24,3 +24,12 @@ properties:
         float when the list view is scrolled.
     type: Number
     permission: read-only
+
+  - name: INSET_GROUPED
+    summary: |
+        A list view whose sections present distinct groups of rows  and grouped sections are inset with rounded corners. 
+        The section headers and footers do not float.
+    type: Number
+    permission: read-only
+    since: {iphone: "8.2.0", ipad: "8.2.0", macos: "9.2.0"}
+    osver: {ios: {min: "13.0"}}

iphone/Classes/TiUIListView.m

@@ -1851,6 +1851,9 @@ - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPa
               maxWidth -= accessoryAdjustment;
             }
           }
+          if (_tableView.style == UITableViewStyleInsetGrouped) {
+            maxWidth -= _tableView.layoutMargins.left + _tableView.layoutMargins.right;
+          }
           if (maxWidth > 0) {
             TiUIListItemProxy *theProxy = [theCell proxy];
 #ifndef TI_USE_AUTOLAYOUT

iphone/Classes/TiUITableView.m

@@ -2582,6 +2582,9 @@ - (CGFloat)computeRowWidth
     }
   }
 
+  if (tableview.style == UITableViewStyleInsetGrouped) {
+    rowWidth -= tableview.layoutMargins.left + tableview.layoutMargins.right;
+  }
   return rowWidth;
 }
 

tests/Resources/ti.ui.listview.test.js

@@ -1413,4 +1413,62 @@ describe('Titanium.UI.ListView', function () {
 			maxPixelMismatch: OS_IOS ? 478 : 0 // iPad differs by ~4 pixels, iphone by 478
 		});
 	});
+
+	it.ios('All text should show if ListView.style is .INSET_GROUPED ', () => {
+		// FIXME: Does not honour scale correctly on macOS.
+		if (isCI && utilities.isMacOS()) {
+			return;
+		}
+
+		const view = Ti.UI.createView({
+			width: '540px',
+			height: '960px'
+		});
+		const template = {
+			childTemplates: [
+				{
+					type: 'Ti.UI.View',
+					properties: { layout: 'horizontal', height: Ti.UI.SIZE, backgroundColor: 'blue' },
+					childTemplates: [
+						{
+							type: 'Ti.UI.View',
+							properties: { layout: 'horizontal', height: Ti.UI.SIZE, backgroundColor: 'green', width: Ti.UI.FILL },
+							childTemplates: [
+								{
+									type: 'Ti.UI.Label',
+									bindId: 'title',
+								},
+								{
+									type: 'Ti.UI.Label',
+									bindId: 'detail',
+									properties: { font: { fontWeight: 'bold' } }
+								}
+							]
+						},
+					]
+				}
+			]
+		};
+		const section = Ti.UI.createListSection({
+			headerTitle: 'Example',
+			items: [ {
+				title: { text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean interdum laoreet augue.' },
+				detail: { text: 'This text should show at the bottom' }
+			} ]
+		});
+
+		const listView = Ti.UI.createListView({
+			templates: { mytemplate: template },
+			defaultItemTemplate: 'mytemplate',
+			sections: [ section ],
+			style: Titanium.UI.iOS.ListViewStyle.INSET_GROUPED
+		});
+
+		view.add(listView);
+
+		should(view).matchImage('snapshots/listview_style_inset_grouped.png', {
+			threshold: 0.1,
+			maxPixelMismatch: 18380
+		});
+	});
 });

tests/Resources/ti.ui.tableview.test.js

@@ -1775,4 +1775,35 @@ describe('Titanium.UI.TableView', function () {
 		};
 		should(view).matchImage('snapshots/tableView_tableViewSection_header_footer.png', options);
 	});
+
+	it.ios('All text should show if TableView.style is .INSET_GROUPED ', () => {
+		// FIXME: Does not honour scale correctly on macOS.
+		if (isCI && utilities.isMacOS()) {
+			return;
+		}
+
+		const view = Ti.UI.createView({
+			width: '540px',
+			height: '960px'
+		});
+		const tableView = Ti.UI.createTableView({
+			backgroundColor: 'white',
+			style: Titanium.UI.iOS.TableViewStyle.INSET_GROUPED
+		});
+		const row = Ti.UI.createTableViewRow({
+			backgroundColor: 'blue'
+		});
+
+		const label = Ti.UI.createLabel({ text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean interdum laoreet augue scelerisque convallis.' });
+		row.add(label);
+
+		tableView.setData([ row ]);
+
+		view.add(tableView);
+
+		should(view).matchImage('snapshots/tableview_style_inset_grouped.png', {
+			threshold: 0.1,
+			maxPixelMismatch: 14840
+		});
+	});
 });