{
	"id": "176236",
	"key": "TIMOB-28489",
	"fields": {
		"issuetype": {
			"id": "2",
			"description": "A new feature of the product, which has yet to be developed.",
			"name": "New Feature",
			"subtask": false
		},
		"project": {
			"id": "10153",
			"key": "TIMOB",
			"name": "Titanium SDK/CLI",
			"projectCategory": {
				"id": "10100",
				"description": "Titanium and related SDKs used in application development",
				"name": "Client"
			}
		},
		"fixVersions": [],
		"resolution": null,
		"resolutiondate": null,
		"created": "2021-06-12T13:02:26.000+0000",
		"priority": {
			"name": "None",
			"id": "6"
		},
		"labels": [],
		"versions": [],
		"issuelinks": [],
		"assignee": null,
		"updated": "2021-11-11T15:57:01.000+0000",
		"status": {
			"description": "The issue is open and ready for the assignee to start work on it.",
			"name": "Open",
			"id": "1",
			"statusCategory": {
				"id": 2,
				"key": "new",
				"colorName": "blue-gray",
				"name": "To Do"
			}
		},
		"components": [],
		"description": "iOS 15 finally adds support for medium-sized modal page sheet (like the BottomSheet component on Android), it is also swipeable and therefore could be a great cross-platform API.",
		"attachment": [],
		"flagged": false,
		"summary": "iOS 15/Android: Add cross-platform page sheet component",
		"creator": {
			"name": "hknoechel",
			"key": "hansknoechel",
			"displayName": "Hans Knöchel",
			"active": true,
			"timeZone": "Europe/Berlin"
		},
		"subtasks": [],
		"reporter": {
			"name": "hknoechel",
			"key": "hansknoechel",
			"displayName": "Hans Knöchel",
			"active": true,
			"timeZone": "Europe/Berlin"
		},
		"environment": null,
		"comment": {
			"comments": [
				{
					"id": "458861",
					"author": {
						"name": "michael",
						"key": "michael",
						"displayName": "Michael Gangolf",
						"active": true,
						"timeZone": "Europe/Berlin"
					},
					"body": "A first test for Android: [demo video|https://migaweb.de/ti_bottomsheet.mp4]\r\n\r\nIdea for properties, events, methods:\r\n* method: toggle (to show hide it)\r\n* method: addView (adding content)\r\n* event: stateChanged (e.g. after toggle)\r\n* property: peekHeight (\"height\" when collpased)\r\n",
					"updateAuthor": {
						"name": "michael",
						"key": "michael",
						"displayName": "Michael Gangolf",
						"active": true,
						"timeZone": "Europe/Berlin"
					},
					"created": "2021-07-18T14:56:33.000+0000",
					"updated": "2021-07-18T14:56:33.000+0000"
				},
				{
					"id": "458866",
					"author": {
						"name": "michael",
						"key": "michael",
						"displayName": "Michael Gangolf",
						"active": true,
						"timeZone": "Europe/Berlin"
					},
					"body": "Start for Android: https://github.com/appcelerator/titanium_mobile/pull/12966\r\n\r\nNot sure what iOS can do and how we should call methods and so on. But it's a start and don't want to lose that code ;)",
					"updateAuthor": {
						"name": "michael",
						"key": "michael",
						"displayName": "Michael Gangolf",
						"active": true,
						"timeZone": "Europe/Berlin"
					},
					"created": "2021-07-19T12:58:30.000+0000",
					"updated": "2021-07-19T12:58:30.000+0000"
				},
				{
					"id": "458889",
					"author": {
						"name": "jquick",
						"key": "jquick",
						"displayName": "Joshua Quick",
						"active": true,
						"timeZone": "America/Los_Angeles"
					},
					"body": "[~michael], on iOS, Titanium devs can already do this today via a \"modal\" {{Ti.UI.Window}} using a bottom sheet style. The Android equivalent to this would be the Java {{BottomSheetDialog}}, but I wouldn't want to attempt parity on Android with a modal {{Activity}} which doesn't quite work the same.\r\n\r\nMaybe we need introduce 2 different Titanium types?\r\n* {{Ti.UI.BottomSheetView}} which you add to a {{Ti.UI.Window}}. The idea is you can tap outside the bottom sheet without collapsing it.\r\n* {{Ti.UI.BottomSheetDialog}} where tapping outside of it would automatically close it. (Or maybe this should be a \"style\" applied to {{AlertDialog}}?)\r\n",
					"updateAuthor": {
						"name": "jquick",
						"key": "jquick",
						"displayName": "Joshua Quick",
						"active": true,
						"timeZone": "America/Los_Angeles"
					},
					"created": "2021-07-22T16:09:42.000+0000",
					"updated": "2021-07-22T16:09:42.000+0000"
				},
				{
					"id": "458890",
					"author": {
						"name": "michael",
						"key": "michael",
						"displayName": "Michael Gangolf",
						"active": true,
						"timeZone": "Europe/Berlin"
					},
					"body": "That sounds like a good idea. I had the BottomSheetDialog running already, too. But since there is https://github.com/hansemannn/titanium-android-bottom-sheet I switched to the normal view. But I like the style idea but perhaps for the OptionDialog",
					"updateAuthor": {
						"name": "michael",
						"key": "michael",
						"displayName": "Michael Gangolf",
						"active": true,
						"timeZone": "Europe/Berlin"
					},
					"created": "2021-07-22T16:47:21.000+0000",
					"updated": "2021-07-22T16:47:21.000+0000"
				},
				{
					"id": "458891",
					"author": {
						"name": "hknoechel",
						"key": "hansknoechel",
						"displayName": "Hans Knöchel",
						"active": true,
						"timeZone": "Europe/Berlin"
					},
					"body": "My 2 cents: The new iOS 15 API is definitely also window-based, not view based. Actually, it's just a simple property in the {{open(\\{ ... \\})}} settings, like {{modalStyle}}. Therefore, for a \"real\" bottom sheet, the base should always be a window (or a view that is internally added / opened as a window). In any case, I'd vote for the {{Ti.UI.BottomSheetDialog}} and do the parity under the hood: Use similar code like in my module for Android and add the view to a natively-create TiUIWindowProxy for iOS. Doable!",
					"updateAuthor": {
						"name": "hknoechel",
						"key": "hansknoechel",
						"displayName": "Hans Knöchel",
						"active": true,
						"timeZone": "Europe/Berlin"
					},
					"created": "2021-07-22T16:51:31.000+0000",
					"updated": "2021-07-22T16:51:53.000+0000"
				},
				{
					"id": "458892",
					"author": {
						"name": "jquick",
						"key": "jquick",
						"displayName": "Joshua Quick",
						"active": true,
						"timeZone": "America/Los_Angeles"
					},
					"body": "[~hknoechel], I agree with you. Implementing a {{Ti.UI.BottomSheetDialog}} is probably the way to go.\r\n\r\nOr should we call it a {{PageSheetDialog}}? I haven't checked how it works on iPad. Maybe the name shouldn't imply it comes from the bottom only... even though that's how it currently works on iPhone and Android. (I'm open to different names.)",
					"updateAuthor": {
						"name": "jquick",
						"key": "jquick",
						"displayName": "Joshua Quick",
						"active": true,
						"timeZone": "America/Los_Angeles"
					},
					"created": "2021-07-22T18:05:10.000+0000",
					"updated": "2021-07-22T18:05:10.000+0000"
				},
				{
					"id": "458893",
					"author": {
						"name": "hknoechel",
						"key": "hansknoechel",
						"displayName": "Hans Knöchel",
						"active": true,
						"timeZone": "Europe/Berlin"
					},
					"body": "+1 for page sheet. On the iPad, it's shown modally for best UX.",
					"updateAuthor": {
						"name": "hknoechel",
						"key": "hansknoechel",
						"displayName": "Hans Knöchel",
						"active": true,
						"timeZone": "Europe/Berlin"
					},
					"created": "2021-07-22T18:16:10.000+0000",
					"updated": "2021-07-22T18:16:10.000+0000"
				},
				{
					"id": "458896",
					"author": {
						"name": "michael",
						"key": "michael",
						"displayName": "Michael Gangolf",
						"active": true,
						"timeZone": "Europe/Berlin"
					},
					"body": "I think both are great. BottomSheet for a normal (none darkening) overlay and the BottomSheetDialog/PageSheetDialog for the modal one:\r\nhttps://www.migaweb.de/ti_bottomsheet_dialog.mp4\r\n\r\n{code}\r\nvar table2 = Ti.UI.createTableView({\r\n\tdata: tableData,\r\n\theight: 200,\r\n\twidth: Ti.UI.FILL,\r\n\tbackgroundColor: \"#000\",\r\n});\r\nvar bsd = Ti.UI.createBottomSheetDialog({\r\n\toptions: [\"option 1\", \"option 3\", \"option 4\"],\r\n\t//androidView: table2\r\n});\r\nbsd.show();\r\n{code}\r\n\r\nproviding an androidView will render the table, just the options will create a normal optionDialog like titanium-android-bottom-sheet. Still need to add the other parameters. ",
					"updateAuthor": {
						"name": "michael",
						"key": "michael",
						"displayName": "Michael Gangolf",
						"active": true,
						"timeZone": "Europe/Berlin"
					},
					"created": "2021-07-23T10:31:52.000+0000",
					"updated": "2021-07-23T10:31:52.000+0000"
				},
				{
					"id": "458903",
					"author": {
						"name": "michael",
						"key": "michael",
						"displayName": "Michael Gangolf",
						"active": true,
						"timeZone": "Europe/Berlin"
					},
					"body": "The BottomSheet brings some problems with the z-order and clicking through it since it has to be in a CoordinatorLayout. Have to do some more tests there. The Dialog version is looking better. I've extended the options to accept an object with title, image (for the left icon) and a custom text color. Makes it more powerful ot use",
					"updateAuthor": {
						"name": "michael",
						"key": "michael",
						"displayName": "Michael Gangolf",
						"active": true,
						"timeZone": "Europe/Berlin"
					},
					"created": "2021-07-25T16:09:34.000+0000",
					"updated": "2021-07-25T16:09:34.000+0000"
				},
				{
					"id": "458907",
					"author": {
						"name": "jquick",
						"key": "jquick",
						"displayName": "Joshua Quick",
						"active": true,
						"timeZone": "America/Los_Angeles"
					},
					"body": "The BottomSheet brings some problems with the z-order and clicking through it since it has to be in a CoordinatorLayout.\r\n\r\n[~michael], the reason buttons appear on-top of the bottom sheet view is because their \"elevation\" is set to a higher value. Elevation literally raises the view higher on the z-axis and ignores the order in the view group. Buttons have elevation set on them by default to show a drop shadow.\r\n\r\nA simple solution might be to apply elevation to BottomSheetView by default. This would give it a drop-shadow effect which people would probably want anyways. We should probably double check how navigation drawer layout does this since it's a view (not a dialog) and doesn't have this elevation problem.",
					"updateAuthor": {
						"name": "jquick",
						"key": "jquick",
						"displayName": "Joshua Quick",
						"active": true,
						"timeZone": "America/Los_Angeles"
					},
					"created": "2021-07-26T15:58:08.000+0000",
					"updated": "2021-07-26T15:58:08.000+0000"
				},
				{
					"id": "458967",
					"author": {
						"name": "hknoechel",
						"key": "hansknoechel",
						"displayName": "Hans Knöchel",
						"active": true,
						"timeZone": "Europe/Berlin"
					},
					"body": "Okay, so why not do this via a slim module? We could use ti.draggable for the iOS < 15 backwards compatibility and the discussed BottomSheet API for Android. So it'd be available for all versions and all platforms. Brilliant. To get things started, I just open sourced the module we made internally and use in production for our app: https://github.com/hansemannn/titanium-bottom-sheet \r\n\r\nI will add the iOS 15 APIs there as well and make ti.draggable a dependency for iOS. Then we could polyfill iOS < 15 support via a JS bridge. Is that still possible for native modules?",
					"updateAuthor": {
						"name": "hknoechel",
						"key": "hansknoechel",
						"displayName": "Hans Knöchel",
						"active": true,
						"timeZone": "Europe/Berlin"
					},
					"created": "2021-08-06T12:46:40.000+0000",
					"updated": "2021-08-06T12:46:40.000+0000"
				},
				{
					"id": "459159",
					"author": {
						"name": "michael",
						"key": "michael",
						"displayName": "Michael Gangolf",
						"active": true,
						"timeZone": "Europe/Berlin"
					},
					"body": "Can be closed in favor of the modules.\r\niOS: https://github.com/mbender74/ti.bottomsheetcontroller-ios ",
					"updateAuthor": {
						"name": "michael",
						"key": "michael",
						"displayName": "Michael Gangolf",
						"active": true,
						"timeZone": "Europe/Berlin"
					},
					"created": "2021-11-11T15:57:01.000+0000",
					"updated": "2021-11-11T15:57:01.000+0000"
				}
			],
			"maxResults": 12,
			"total": 12,
			"startAt": 0
		}
	}
}