[v2] UISplitViewController (#3247)

* Work in progress

* Arbitary changes

* Improvements on API

* Cleanup RNNSplitViewController, allow mergeOptions

* Added documentation and better playground example

* Adding tests for coverage

* Find out why this test is failing.

* Only show split view on iOS

* Add test back in

docs/docs/layout-types.md

     component: {}
   }
 }
+```
+
+## splitView
+
+Master and Detail based layout.
+
+You can change the it's options with `Navigation.mergeOptions('splitView1', { maxWidth: 400 })`.
+
+```js
+const splitView = {
+  id: 'splitView1', // Required to update options
+  master: {
+    // All layout types accepted supported by device, eg. `stack`
+  },
+  detail: {
+    // All layout types accepted supported by device, eg. `stack`
+  },
+  options: {
+    displayMode: 'auto', // Master view display mode: `auto`, `visible`, `hidden` and `overlay`
+    primaryEdge: 'leading', // Master view side: `leading` or `trailing`
+    minWidth: 150, // Minimum width of master view
+    maxWidth: 300, // Maximum width of master view
+  },
+}
 ```

lib/ios/RNNCommandsHandler.m

 #import "RNNOverlayManager.h"
 #import "RNNNavigationOptions.h"
 #import "RNNRootViewController.h"
+#import "RNNSplitViewController.h"
 #import "React/RCTUIManager.h"
 
 static NSString* const setRoot	= @"setRoot";
 		
 		[CATransaction commit];
 	}
+
+	if ([vc isKindOfClass:[RNNSplitViewController class]]) {
+		RNNSplitViewController* splitVc = (RNNSplitViewController*)vc;
+		[splitVc.options mergeWith:options];
+		[CATransaction begin];
+		[CATransaction setCompletionBlock:completion];
+		
+		[splitVc.options applyOn:vc];
+		
+		[CATransaction commit];
+	}
+	
 }
 
 -(void) setDefaultOptions:(NSDictionary*)optionsDict completion:(RNNTransitionCompletionBlock)completion {

lib/ios/RNNControllerFactory.m

 #import "RNNControllerFactory.h"
 #import "RNNLayoutNode.h"
 #import "RNNRootViewController.h"
+#import "RNNSplitViewController.h"
+#import "RNNSplitViewOptions.h"
 #import "RNNSideMenuController.h"
 #import "RNNSideMenuChildVC.h"
 #import "RNNNavigationOptions.h"
 		result = [self createExternalComponent:node];
 	}
 	
+	else if (node.isSplitView) {
+		result = [self createSplitView:node];
+	}
+	
 	if (!result) {
 		@throw [NSException exceptionWithName:@"UnknownControllerType" reason:[@"Unknown controller type " stringByAppendingString:node.type] userInfo:nil];
 	}
 	return vc;
 }
 
+- (UIViewController<RNNRootViewProtocol> *)createSplitView:(RNNLayoutNode*)node {
+
+	NSString* componentId = node.nodeId;
+	
+	RNNSplitViewOptions* options = [[RNNSplitViewOptions alloc] initWithDict:_defaultOptionsDict];
+	[options mergeWith:node.data[@"options"]];
+
+	RNNSplitViewController* svc = [[RNNSplitViewController alloc] initWithOptions:options withComponentId:componentId rootViewCreator:_creator eventEmitter:_eventEmitter];
+
+	// We need two children of the node for successful Master / Detail
+	NSDictionary *master = node.children[0];
+	NSDictionary *detail = node.children[1];
+
+	// Create view controllers
+	RNNRootViewController* masterVc = (RNNRootViewController*)[self fromTree:master];
+	RNNRootViewController* detailVc = (RNNRootViewController*)[self fromTree:detail];
+
+	// Set the controllers and delegate to masterVC
+	svc.viewControllers = [NSArray arrayWithObjects:masterVc, detailVc, nil];
+	svc.delegate = masterVc;
+
+	return svc;
+}
+
 @end

lib/ios/RNNLayoutNode.h

 @property NSString* nodeId;
 @property NSDictionary* data;
 @property NSArray* children;
+@property NSArray* sidebar;
 
 +(instancetype)create:(NSDictionary *)json;
 
 -(BOOL)isSideMenuLeft;
 -(BOOL)isSideMenuRight;
 -(BOOL)isSideMenuCenter;
+-(BOOL)isSplitView;
 
 @end

lib/ios/RNNLayoutNode.m

 	node.nodeId = json[@"id"];
 	node.data = json[@"data"];
 	node.children = json[@"children"];
+	
 	return node;
 }
 
 {
 	return [self.type isEqualToString:@"SideMenuCenter"];
 }
+-(BOOL)isSplitView
+{
+	return [self.type isEqualToString:@"SplitView"];
+}
 
 @end

lib/ios/RNNNavigationOptions.m

 #import "RNNTopBarOptions.h"
 #import "RNNSideMenuController.h"
 #import "RNNRootViewController.h"
+#import "RNNSplitViewController.h"
 #import "RNNNavigationButtons.h"
 
 const NSInteger BLUR_STATUS_TAG = 78264801;

lib/ios/RNNRootViewProtocol.h

 #import "RNNNavigationOptions.h"
 
-@protocol RNNRootViewProtocol <NSObject, UINavigationControllerDelegate, UIViewControllerTransitioningDelegate>
+@protocol RNNRootViewProtocol <NSObject, UINavigationControllerDelegate, UIViewControllerTransitioningDelegate, UISplitViewControllerDelegate>
 
 @optional
 - (void)mergeOptions:(NSDictionary*)options;

lib/ios/RNNSplitViewController.h

+
+#import <Foundation/Foundation.h>
+#import <UIKit/UIKit.h>
+#import "RNNLayoutNode.h"
+#import "RNNRootViewCreator.h"
+#import "RNNEventEmitter.h"
+#import "RNNNavigationOptions.h"
+#import "RNNSplitViewOptions.h"
+#import "RNNAnimator.h"
+#import "RNNTopTabsViewController.h"
+#import "RNNRootViewProtocol.h"
+
+@interface RNNSplitViewController : UISplitViewController	<RNNRootViewProtocol>
+
+@property (nonatomic, strong) RNNSplitViewOptions* options;
+@property (nonatomic, strong) RNNEventEmitter *eventEmitter;
+@property (nonatomic, strong) NSString* componentId;
+@property (nonatomic) id<RNNRootViewCreator> creator;
+
+-(instancetype)initWithOptions:(RNNSplitViewOptions*)options
+			withComponentId:(NSString*)componentId
+			rootViewCreator:(id<RNNRootViewCreator>)creator
+				  eventEmitter:(RNNEventEmitter*)eventEmitter;
+
+-(BOOL)isCustomTransitioned;
+
+@end

lib/ios/RNNSplitViewController.m

+
+#import "RNNRootViewController.h"
+#import "RNNSplitViewController.h"
+
+@interface RNNSplitViewController()
+@property (nonatomic) BOOL _optionsApplied;
+@property (nonatomic, copy) void (^rotationBlock)(void);
+@end
+
+@implementation RNNSplitViewController
+
+-(instancetype)initWithOptions:(RNNSplitViewOptions*)options
+			withComponentId:(NSString*)componentId
+			rootViewCreator:(id<RNNRootViewCreator>)creator
+			   eventEmitter:(RNNEventEmitter*)eventEmitter {
+	self = [super init];
+	self.componentId = componentId;
+	self.options = options;
+	self.eventEmitter = eventEmitter;
+	self.creator = creator;
+
+	self.navigationController.delegate = self;
+
+	return self;
+}
+
+-(void)viewWillAppear:(BOOL)animated{
+	[super viewWillAppear:animated];
+	[self.options applyOn:self];
+	[self optionsUpdated];
+}
+
+- (void)optionsUpdated {
+}
+
+- (void)mergeOptions:(NSDictionary *)options {
+	[self.options mergeIfEmptyWith:options];
+}
+
+-(BOOL)isCustomTransitioned {
+	return false;
+}
+
+@end

lib/ios/RNNSplitViewOptions.h

+#import "RNNOptions.h"
+
+@interface RNNSplitViewOptions : RNNOptions
+
+@property (nonatomic, strong) NSString* displayMode;
+@property (nonatomic, strong) NSString* primaryEdge;
+@property (nonatomic, strong) NSNumber* minWidth;
+@property (nonatomic, strong) NSNumber* maxWidth;
+
+@end

lib/ios/RNNSplitViewOptions.m

+#import "RNNSplitViewOptions.h"
+#import "RNNRootViewProtocol.h"
+
+@implementation RNNSplitViewOptions
+
+-(void)applyOn:(UIViewController<RNNRootViewProtocol> *)viewController {
+	
+	UISplitViewController *svc = (UISplitViewController*) viewController;
+
+	if (@available(iOS 11.0, *)) {
+		if ([self.primaryEdge isEqualToString:@"trailing"]) {
+			[svc setPrimaryEdge:UISplitViewControllerPrimaryEdgeTrailing];
+		} else {
+			[svc setPrimaryEdge:UISplitViewControllerPrimaryEdgeLeading];
+		}
+	}
+	
+	if ([self.displayMode isEqualToString:@"visible"]) {
+		[svc setPreferredDisplayMode:UISplitViewControllerDisplayModeAllVisible];
+	} else if ([self.displayMode isEqualToString:@"hidden"]) {
+		[svc setPreferredDisplayMode:UISplitViewControllerDisplayModePrimaryHidden];
+	} else if ([self.displayMode isEqualToString:@"overlay"]) {
+		[svc setPreferredDisplayMode:UISplitViewControllerDisplayModePrimaryOverlay];
+	} else {
+		[svc setPreferredDisplayMode:UISplitViewControllerDisplayModeAutomatic];
+	}
+
+	if (self.minWidth) {
+		[svc setMinimumPrimaryColumnWidth:[self.minWidth doubleValue]];
+	}
+
+	if (self.maxWidth) {
+		[svc setMaximumPrimaryColumnWidth:[self.maxWidth doubleValue]];
+	}
+}
+
+@end

lib/ios/ReactNativeNavigation.xcodeproj/project.pbxproj

 		7BEF0D1D1E43771B003E96B0 /* RNNLayoutNode.m in Sources */ = {isa = PBXBuildFile; fileRef = 7BEF0D1B1E43771B003E96B0 /* RNNLayoutNode.m */; };
 		A7626BFD1FC2FB2C00492FB8 /* RNNTopBarOptions.m in Sources */ = {isa = PBXBuildFile; fileRef = A7626BFC1FC2FB2C00492FB8 /* RNNTopBarOptions.m */; };
 		A7626C011FC5796200492FB8 /* RNNBottomTabsOptions.m in Sources */ = {isa = PBXBuildFile; fileRef = A7626C001FC5796200492FB8 /* RNNBottomTabsOptions.m */; };
+		E33AC20020B5BA0B0090DB8A /* RNNSplitViewController.m in Sources */ = {isa = PBXBuildFile; fileRef = E33AC1FF20B5BA0B0090DB8A /* RNNSplitViewController.m */; };
+		E33AC20420B5C3890090DB8A /* RNNStatusBarOptions.h in Headers */ = {isa = PBXBuildFile; fileRef = E33AC20220B5C3880090DB8A /* RNNStatusBarOptions.h */; };
+		E33AC20520B5C3890090DB8A /* RNNStatusBarOptions.m in Sources */ = {isa = PBXBuildFile; fileRef = E33AC20320B5C3890090DB8A /* RNNStatusBarOptions.m */; };
+		E33AC20820B5C4F90090DB8A /* RNNSplitViewOptions.m in Sources */ = {isa = PBXBuildFile; fileRef = E33AC20720B5C4F90090DB8A /* RNNSplitViewOptions.m */; };
 		E8367B801F7A8A4700675C05 /* VICMAImageView.h in Headers */ = {isa = PBXBuildFile; fileRef = E8367B7E1F7A8A4700675C05 /* VICMAImageView.h */; };
 		E8367B811F7A8A4700675C05 /* VICMAImageView.m in Sources */ = {isa = PBXBuildFile; fileRef = E8367B7F1F7A8A4700675C05 /* VICMAImageView.m */; };
 		E83BAD681F2734B500A9F3DD /* RNNNavigationOptionsTest.m in Sources */ = {isa = PBXBuildFile; fileRef = E83BAD671F2734B500A9F3DD /* RNNNavigationOptionsTest.m */; };
 		A7626BFF1FC578AB00492FB8 /* RNNBottomTabsOptions.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNBottomTabsOptions.h; sourceTree = "<group>"; };
 		A7626C001FC5796200492FB8 /* RNNBottomTabsOptions.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNNBottomTabsOptions.m; sourceTree = "<group>"; };
 		D8AFADBD1BEE6F3F00A4592D /* libReactNativeNavigation.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = libReactNativeNavigation.a; sourceTree = BUILT_PRODUCTS_DIR; };
+		E33AC1FF20B5BA0B0090DB8A /* RNNSplitViewController.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNNSplitViewController.m; sourceTree = "<group>"; };
+		E33AC20120B5BA550090DB8A /* RNNSplitViewController.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNSplitViewController.h; sourceTree = "<group>"; };
+		E33AC20220B5C3880090DB8A /* RNNStatusBarOptions.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RNNStatusBarOptions.h; sourceTree = "<group>"; };
+		E33AC20320B5C3890090DB8A /* RNNStatusBarOptions.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RNNStatusBarOptions.m; sourceTree = "<group>"; };
+		E33AC20620B5C49E0090DB8A /* RNNSplitViewOptions.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNSplitViewOptions.h; sourceTree = "<group>"; };
+		E33AC20720B5C4F90090DB8A /* RNNSplitViewOptions.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNNSplitViewOptions.m; sourceTree = "<group>"; };
 		E8367B7E1F7A8A4700675C05 /* VICMAImageView.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = VICMAImageView.h; sourceTree = "<group>"; };
 		E8367B7F1F7A8A4700675C05 /* VICMAImageView.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = VICMAImageView.m; sourceTree = "<group>"; };
 		E83BAD671F2734B500A9F3DD /* RNNNavigationOptionsTest.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RNNNavigationOptionsTest.m; sourceTree = "<group>"; };
 		504AFE611FFE52EF0076E904 /* Options */ = {
 			isa = PBXGroup;
 			children = (
+				E33AC20220B5C3880090DB8A /* RNNStatusBarOptions.h */,
+				E33AC20320B5C3890090DB8A /* RNNStatusBarOptions.m */,
 				504AFE621FFE53070076E904 /* RNNOptions.h */,
 				504AFE631FFE53070076E904 /* RNNOptions.m */,
 				E83BAD691F27362500A9F3DD /* RNNNavigationOptions.h */,
 				50451D082042E20600695F00 /* RNNTransitionsOptions.m */,
 				50415CB820553B8E00BB682E /* RNNScreenTransition.h */,
 				50415CB920553B8E00BB682E /* RNNScreenTransition.m */,
+				E33AC20620B5C49E0090DB8A /* RNNSplitViewOptions.h */,
+				E33AC20720B5C4F90090DB8A /* RNNSplitViewOptions.m */,
 			);
 			name = Options;
 			sourceTree = "<group>";
 				507F43F61FF525B500D9425B /* RNNSegmentedControl.h */,
 				507F43F71FF525B500D9425B /* RNNSegmentedControl.m */,
 				507F441F1FFA8A8800D9425B /* RNNRootViewProtocol.h */,
+				E33AC1FF20B5BA0B0090DB8A /* RNNSplitViewController.m */,
+				E33AC20120B5BA550090DB8A /* RNNSplitViewController.h */,
 			);
 			name = Controllers;
 			sourceTree = "<group>";
 				7BA500751E2544B9001B9E1B /* ReactNativeNavigation.m in Sources */,
 				263905B21E4C6F440023D7D3 /* MMDrawerController.m in Sources */,
 				E8AEDB3D1F55A1C2000F5A6A /* RNNElementView.m in Sources */,
+				E33AC20520B5C3890090DB8A /* RNNStatusBarOptions.m in Sources */,
 				E83BAD6B1F27363A00A9F3DD /* RNNNavigationOptions.m in Sources */,
 				506A2B1520973DFD00F43A95 /* RNNErrorHandler.m in Sources */,
 				7BBFE5441E25330E002A6182 /* RNNBridgeModule.m in Sources */,
 				214545251F4DC125006E8DA1 /* RNNUIBarButtonItem.m in Sources */,
 				263905B81E4C6F440023D7D3 /* UIViewController+MMDrawerController.m in Sources */,
 				263905CD1E4C6F440023D7D3 /* SidebarWunderlistAnimation.m in Sources */,
+				E33AC20820B5C4F90090DB8A /* RNNSplitViewOptions.m in Sources */,
+				E33AC20020B5BA0B0090DB8A /* RNNSplitViewController.m in Sources */,
 				263905CF1E4C6F440023D7D3 /* TheSidebarController.m in Sources */,
 				E8A430121F9CB87B00B61A20 /* RNNAnimatedView.m in Sources */,
 				507F43F51FF4FCFE00D9425B /* HMSegmentedControl.m in Sources */,

lib/src/commands/LayoutTreeParser.test.ts

       expect(result.children[1].children[0].children[2].children[0].children[2].children[4].type).toEqual('Stack');
       expect(result.children[1].children[0].children[2].children[0].children[2].data).toEqual({ options: { topBar: { title: { text: 'Hello1'} } } });
     });
+
+    it('split view', () => {
+      const result = uut.parse(LayoutExamples.splitView);
+      const master = uut.parse(LayoutExamples.splitView.splitView.master);
+      const detail = uut.parse(LayoutExamples.splitView.splitView.detail);
+
+      expect(result.type).toEqual('SplitView');
+      expect(result.children[0]).toEqual(master);
+      expect(result.children[1]).toEqual(detail);
+    });
   });
 
   it('options for all containing types', () => {
     expect(uut.parse({ bottomTabs: { options } }).data.options).toBe(options);
     expect(uut.parse({ topTabs: { options } }).data.options).toBe(options);
     expect(uut.parse({ sideMenu: { options, center: { component: {} } } }).data.options).toBe(options);
+    expect(uut.parse(LayoutExamples.splitView).data.options).toBe(optionsSplitView);
   });
 
   it('pass user provided id as is', () => {
   }
 };
 
+const optionsSplitView = {
+  displayMode: 'auto',
+  primaryEdge: 'leading',
+  minWidth: 150,
+  maxWidth: 300,
+};
+
 const singleComponent = {
   component: {
     name: 'MyReactComponent',
   }
 };
 
+const splitView = {
+  splitView: {
+    master: {
+      stack: {
+        children: [
+          singleComponent,
+        ],
+        options
+      },
+    },
+    detail: stackWithTopBar,
+    options: optionsSplitView,
+  },
+};
+
 const LayoutExamples = {
   passProps,
   options,
   sideMenu,
   topTabs,
   complexLayout,
-  externalComponent
+  externalComponent,
+  splitView
 };

lib/src/commands/LayoutTreeParser.ts

       return this._component(api.component);
     } else if (api.externalComponent) {
       return this._externalComponent(api.externalComponent);
+    } else if (api.splitView) {
+      return this._splitView(api.splitView);
     }
     throw new Error(`unknown LayoutType "${_.keys(api)}"`);
   }
       children: []
     };
   }
+
+  _splitView(api): LayoutNode {
+    const master = this.parse(api.master);
+    const detail = this.parse(api.detail);
+
+    return {
+      id: api.id,
+      type: LayoutType.SplitView,
+      data: { name: api.name, options: api.options },
+      children: [
+        master,
+        detail,
+      ],
+    };
+  }
 }

lib/src/commands/LayoutType.ts

   SideMenuLeft = 'SideMenuLeft',
   SideMenuRight = 'SideMenuRight',
   TopTabs = 'TopTabs',
-  ExternalComponent = 'ExternalComponent'
+  ExternalComponent = 'ExternalComponent',
+  SplitView = 'SplitView'
 }

playground/ios/playground.xcodeproj/project.pbxproj

 			remoteGlobalIDString = 2D2A28881D9B049200D4039D;
 			remoteInfo = "RCTWebSocket-tvOS";
 		};
+		E33AC1FB20B5AFC70090DB8A /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = 7B8F2FCA1E840F3600110AEC /* React.xcodeproj */;
+			proxyType = 2;
+			remoteGlobalIDString = 9936F32F1F5F2E5B0010BF04;
+			remoteInfo = "privatedata-tvOS";
+		};
 		E506412420A3138100EC769F /* PBXContainerItemProxy */ = {
 			isa = PBXContainerItemProxy;
 			containerPortal = 7B8F2FCA1E840F3600110AEC /* React.xcodeproj */;
 				PRODUCT_BUNDLE_IDENTIFIER = com.reactnativenavigation.playground;
 				PRODUCT_NAME = playground;
 				PROVISIONING_PROFILE_SPECIFIER = "";
+				TARGETED_DEVICE_FAMILY = "1,2";
 			};
 			name = Debug;
 		};
 				PRODUCT_BUNDLE_IDENTIFIER = com.reactnativenavigation.playground;
 				PRODUCT_NAME = playground;
 				PROVISIONING_PROFILE_SPECIFIER = "";
+				TARGETED_DEVICE_FAMILY = "1,2";
 			};
 			name = Release;
 		};

playground/src/screens/WelcomeScreen.js

           <Text testID={testIDs.WELCOME_SCREEN_HEADER} style={styles.h1}>{`React Native Navigation!`}</Text>
           <Button title='Switch to tab based app' testID={testIDs.TAB_BASED_APP_BUTTON} onPress={this.onClickSwitchToTabs} />
           <Button title='Switch to app with side menus' testID={testIDs.TAB_BASED_APP_SIDE_BUTTON} onPress={this.onClickSwitchToSideMenus} />
+          {Platform.OS === 'ios' && <Button title='Switch to split view based app' testID={testIDs.SPLIT_VIEW_BUTTON} onPress={this.onClickSplitView} />}
           <Button title='Push Lifecycle Screen' testID={testIDs.PUSH_LIFECYCLE_BUTTON} onPress={this.onClickLifecycleScreen} />
           <Button title='Static Lifecycle Events' testID={testIDs.PUSH_STATIC_LIFECYCLE_BUTTON} onPress={this.onClickShowStaticLifecycleOverlay} />
           <Button title='Push' testID={testIDs.PUSH_BUTTON} onPress={this.onClickPush} />
       }
     });
   }
+
+  onClickSplitView = () => {
+    Navigation.setRoot({
+      root: {
+        splitView: {
+          id: 'SPLITVIEW_ID',
+          master: {
+            stack: {
+              id: 'MASTER_ID',
+              children: [
+                {
+                  component: {
+                    name: 'navigation.playground.WelcomeScreen'
+                  },
+                },
+              ]
+            },
+          },
+          detail: {
+            stack: {
+              id: 'DETAILS_ID',
+              children: [
+                {
+                  component: {
+                    name: 'navigation.playground.WelcomeScreen'
+                  },
+                },
+              ]
+            }
+          },
+          options: {
+            displayMode: 'auto',
+            primaryEdge: 'leading',
+            minWidth: 150,
+            maxWidth: 300,
+          },
+        },
+      },
+    });
+  }
 }
 
 module.exports = WelcomeScreen;

playground/src/testIDs.js

   EXTERNAL_COMPONENT_IN_DEEP_STACK: `EXTERNAL_COMPONENT_IN_DEEP_STACK`,
   SET_STACK_ROOT_BUTTON: `SET_STACK_ROOT_BUTTON`,
   MODAL_LIFECYCLE_BUTTON: `MODAL_LIFECYCLE_BUTTON`,
+  SPLIT_VIEW_BUTTON: `SPLIT_VIEW_BUTTON`,
 
   // Elements
   SCROLLVIEW_ELEMENT: `SCROLLVIEW_ELEMENT`,