feat: add contentInset prop

software-mansion-labs · Apr 22, 2024 · dfb4f57 · dfb4f57
1 parent e269d86
commit dfb4f57
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 0 deletions.
diff --git a/packages/turbo/README.md b/packages/turbo/README.md
@@ -91,6 +91,12 @@ Enables pull to refresh functionality. Default value is `true`.
 
 Enables scrolling in the webview. Default value is `true`.
 
+### `contentInset`
+
+The amount by which the web view content is inset from the edges of the scroll view.
+
+Note: available only on iOS.
+
 ### `stradaComponents`
 
 `VisitableView` supports defining [Strada components](https://strada.hotwired.dev/) that receive and reply to messages from web components that are present on the page within one session. This prop accepts an array of Strada components that will be registered in the webview.

diff --git a/packages/turbo/ios/RNSessionConfiguration.swift b/packages/turbo/ios/RNSessionConfiguration.swift
@@ -20,8 +20,17 @@ class RNSessionConfiguration {
       updateConfiguration()
     }
   }
+  var contentInset: [String: CGFloat] = [:] {
+    didSet {
+      updateConfiguration()
+    }
+  }
 
   func updateConfiguration() {
     sessionDelegate?.webView.scrollView.isScrollEnabled = isScrollEnabled
+    sessionDelegate?.webView.scrollView.contentInset = UIEdgeInsets(top: contentInset["top"] ?? 0,
+                                                                    left: contentInset["left"] ?? 0,
+                                                                    bottom: contentInset["bottom"] ?? 0,
+                                                                    right: contentInset["right"] ?? 0)
   }
 }
diff --git a/packages/turbo/ios/RNVisitableView.swift b/packages/turbo/ios/RNVisitableView.swift
@@ -31,6 +31,11 @@ class RNVisitableView: UIView, RNSessionSubscriber {
       sessionConfiguration.isScrollEnabled = scrollEnabled
     }
   }
+  @objc var contentInset: NSDictionary = [:] {
+    didSet {
+      sessionConfiguration.contentInset = contentInset as! [String: CGFloat]
+    }
+  }
   @objc var pullToRefreshEnabled: Bool = true {
     didSet {
       controller!.visitableView.allowsPullToRefresh = pullToRefreshEnabled

diff --git a/packages/turbo/ios/RNVisitableViewManager.m b/packages/turbo/ios/RNVisitableViewManager.m
@@ -18,6 +18,7 @@ @interface RCT_EXTERN_MODULE(RNVisitableViewManager, NSObject)
   RCT_EXPORT_VIEW_PROPERTY(applicationNameForUserAgent, NSString)
   RCT_EXPORT_VIEW_PROPERTY(pullToRefreshEnabled, BOOL)
   RCT_EXPORT_VIEW_PROPERTY(scrollEnabled, BOOL)
+  RCT_EXPORT_VIEW_PROPERTY(contentInset, NSDictionary)
   RCT_EXPORT_VIEW_PROPERTY(onVisitProposal, RCTDirectEventBlock)
   RCT_EXPORT_VIEW_PROPERTY(onOpenExternalUrl, RCTDirectEventBlock)
   RCT_EXPORT_VIEW_PROPERTY(onMessage, RCTDirectEventBlock)

diff --git a/packages/turbo/src/RNVisitableView.ts b/packages/turbo/src/RNVisitableView.ts
@@ -19,6 +19,7 @@ import type {
   OpenExternalUrlEvent,
   FormSubmissionEvent,
   ContentProcessDidTerminateEvent,
+  ContentInsetObject,
 } from './types';
 
 // Interface should match RNVisitableView exported properties in native code
@@ -28,6 +29,7 @@ export interface RNVisitableViewProps {
   applicationNameForUserAgent?: string;
   pullToRefreshEnabled: boolean;
   scrollEnabled: boolean;
+  contentInset: ContentInsetObject;
   onLoad?: (e: NativeSyntheticEvent<LoadEvent>) => void;
   onMessage?: (e: NativeSyntheticEvent<MessageEvent>) => void;
   onError?: (e: NativeSyntheticEvent<ErrorEvent>) => void;

diff --git a/packages/turbo/src/VisitableView.tsx b/packages/turbo/src/VisitableView.tsx
@@ -40,6 +40,7 @@ import type {
   StradaComponent,
   FormSubmissionEvent,
   ContentProcessDidTerminateEvent,
+  ContentInsetObject,
 } from './types';
 import { nextEventLoopTick } from './utils/nextEventLoopTick';
 
@@ -50,6 +51,7 @@ export interface Props {
   stradaComponents?: StradaComponent[];
   pullToRefreshEnabled?: boolean;
   scrollEnabled?: boolean;
+  contentInset?: ContentInsetObject;
   renderLoading?: RenderLoading;
   renderError?: RenderError;
   onVisitProposal: (proposal: VisitProposal) => void;
@@ -80,6 +82,7 @@ const VisitableView = React.forwardRef<RefObject, React.PropsWithRef<Props>>(
       stradaComponents,
       pullToRefreshEnabled = true,
       scrollEnabled = true,
+      contentInset = { top: 0, left: 0, right: 0, bottom: 0 },
       renderLoading,
       renderError,
       onLoad,
@@ -217,6 +220,7 @@ const VisitableView = React.forwardRef<RefObject, React.PropsWithRef<Props>>(
           applicationNameForUserAgent={resolvedApplicationNameForUserAgent}
           pullToRefreshEnabled={pullToRefreshEnabled}
           scrollEnabled={scrollEnabled}
+          contentInset={contentInset}
           onError={onErrorCombinedHandlers}
           onVisitProposal={handleVisitProposal}
           onMessage={handleOnMessage}

diff --git a/packages/turbo/src/types.ts b/packages/turbo/src/types.ts
@@ -44,6 +44,13 @@ export enum SystemStatusCode {
   UNKNOWN = -4,
 }
 
+export type ContentInsetObject = {
+  bottom?: number;
+  left?: number;
+  right?: number;
+  top?: number;
+};
+
 export type StradaMessage = {
   component: string;
   event: string;