From 5b7fe1cd67f9d536537f73badfe315003558ac3d Mon Sep 17 00:00:00 2001 From: Patryk Klatka Date: Fri, 26 Apr 2024 11:53:55 +0200 Subject: [PATCH] RNVisitableView: introduce `progressViewOffset` property (#195) --- packages/turbo/README.md | 6 ++++++ .../com/reactnativeturbowebview/RNVisitableView.kt | 12 ++++++++++++ .../RNVisitableViewManager.kt | 6 ++++++ packages/turbo/src/RNVisitableView.ts | 2 ++ packages/turbo/src/VisitableView.tsx | 4 ++++ packages/turbo/src/types.ts | 6 ++++++ 6 files changed, 36 insertions(+) diff --git a/packages/turbo/README.md b/packages/turbo/README.md index 972a9589..cb3a8b1c 100644 --- a/packages/turbo/README.md +++ b/packages/turbo/README.md @@ -97,6 +97,12 @@ The amount by which the web view content is inset from the edges of the scroll v Note: available only on iOS. +### `progressViewOffset` + +The refresh indicator starting and resting position is always positioned near the top of the refreshing content. This position is a consistent location, but can be adjusted in either direction based on whether or not there is a header or other content that should be visible when the refresh indicator is shown. + +Note: available only on Android. + ### `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/android/src/main/java/com/reactnativeturbowebview/RNVisitableView.kt b/packages/turbo/android/src/main/java/com/reactnativeturbowebview/RNVisitableView.kt index c98dd298..567c9e79 100644 --- a/packages/turbo/android/src/main/java/com/reactnativeturbowebview/RNVisitableView.kt +++ b/packages/turbo/android/src/main/java/com/reactnativeturbowebview/RNVisitableView.kt @@ -12,6 +12,7 @@ import androidx.core.view.isVisible import androidx.lifecycle.findViewTreeLifecycleOwner import com.facebook.react.bridge.Arguments import com.facebook.react.bridge.ReactApplicationContext +import com.facebook.react.bridge.ReadableMap import com.facebook.react.bridge.WritableMap import com.facebook.react.uimanager.events.RCTEventEmitter import dev.hotwire.turbo.views.TurboView @@ -53,6 +54,17 @@ class RNVisitableView(context: Context) : LinearLayout(context), SessionSubscrib field = value setPullToRefresh(value) } + var progressViewOffset: ReadableMap? = null + set(value) { + field = value + progressViewOffset?.let { + turboView.webViewRefresh?.setProgressViewOffset( + it.getBoolean("scale"), + it.getInt("start"), + it.getInt("end") + ) + } + } // Session private var _session: RNSession? = null diff --git a/packages/turbo/android/src/main/java/com/reactnativeturbowebview/RNVisitableViewManager.kt b/packages/turbo/android/src/main/java/com/reactnativeturbowebview/RNVisitableViewManager.kt index d2910f6d..04c3c6ee 100644 --- a/packages/turbo/android/src/main/java/com/reactnativeturbowebview/RNVisitableViewManager.kt +++ b/packages/turbo/android/src/main/java/com/reactnativeturbowebview/RNVisitableViewManager.kt @@ -2,6 +2,7 @@ package com.reactnativeturbowebview import com.facebook.react.bridge.ReactApplicationContext import com.facebook.react.bridge.ReadableArray +import com.facebook.react.bridge.ReadableMap import com.facebook.react.uimanager.SimpleViewManager import com.facebook.react.uimanager.ThemedReactContext import com.facebook.react.uimanager.annotations.ReactProp @@ -62,6 +63,11 @@ class RNVisitableViewManager( view.scrollEnabled = scrollEnabled } + @ReactProp(name = "progressViewOffset") + fun setProgressViewOffset(view: RNVisitableView, progressViewOffset: ReadableMap?) { + view.progressViewOffset = progressViewOffset + } + override fun getCommandsMap(): MutableMap = RNVisitableViewCommand.values() .associate { it.jsCallbackName to it.ordinal diff --git a/packages/turbo/src/RNVisitableView.ts b/packages/turbo/src/RNVisitableView.ts index c0da5be7..f7953236 100644 --- a/packages/turbo/src/RNVisitableView.ts +++ b/packages/turbo/src/RNVisitableView.ts @@ -20,6 +20,7 @@ import type { FormSubmissionEvent, ContentProcessDidTerminateEvent, ContentInsetObject, + ProgressViewOffsetObject, } from './types'; // Interface should match RNVisitableView exported properties in native code @@ -30,6 +31,7 @@ export interface RNVisitableViewProps { pullToRefreshEnabled: boolean; scrollEnabled: boolean; contentInset: ContentInsetObject; + progressViewOffset?: ProgressViewOffsetObject; onLoad?: (e: NativeSyntheticEvent) => void; onMessage?: (e: NativeSyntheticEvent) => void; onError?: (e: NativeSyntheticEvent) => void; diff --git a/packages/turbo/src/VisitableView.tsx b/packages/turbo/src/VisitableView.tsx index bcb8084e..21a9ff8b 100644 --- a/packages/turbo/src/VisitableView.tsx +++ b/packages/turbo/src/VisitableView.tsx @@ -41,6 +41,7 @@ import type { FormSubmissionEvent, ContentProcessDidTerminateEvent, ContentInsetObject, + ProgressViewOffsetObject, } from './types'; import { nextEventLoopTick } from './utils/nextEventLoopTick'; @@ -52,6 +53,7 @@ export interface Props { pullToRefreshEnabled?: boolean; scrollEnabled?: boolean; contentInset?: ContentInsetObject; + progressViewOffset?: ProgressViewOffsetObject; renderLoading?: RenderLoading; renderError?: RenderError; onVisitProposal: (proposal: VisitProposal) => void; @@ -83,6 +85,7 @@ const VisitableView = React.forwardRef>( pullToRefreshEnabled = true, scrollEnabled = true, contentInset = { top: 0, left: 0, right: 0, bottom: 0 }, + progressViewOffset, renderLoading, renderError, onLoad, @@ -221,6 +224,7 @@ const VisitableView = React.forwardRef>( pullToRefreshEnabled={pullToRefreshEnabled} scrollEnabled={scrollEnabled} contentInset={contentInset} + progressViewOffset={progressViewOffset} onError={onErrorCombinedHandlers} onVisitProposal={handleVisitProposal} onMessage={handleOnMessage} diff --git a/packages/turbo/src/types.ts b/packages/turbo/src/types.ts index 3cfe0dbb..cb79f5c1 100644 --- a/packages/turbo/src/types.ts +++ b/packages/turbo/src/types.ts @@ -51,6 +51,12 @@ export type ContentInsetObject = { top?: number; }; +export type ProgressViewOffsetObject = { + scale: boolean; + start: number; + end: number; +}; + export type StradaMessage = { component: string; event: string;