MOBILE-342: Публичное API встроенных блоков

MindboxSdk.podspec

@@ -15,8 +15,20 @@ Pod::Spec.new do |s|
 
   s.source_files = "ios/**/*.{h,m,mm,swift}"
 
-  s.dependency "React-Core"
-
   s.dependency "Mindbox", "2.15.3"
   s.dependency "MindboxNotifications", "2.15.3"
+
+  # The embedded block is a native component, and on the new renderer that means a Fabric component:
+  # this brings in the renderer's own pods and, the part that decides everything, defines
+  # `RCT_NEW_ARCH_ENABLED` for our sources — what `MindboxEmbeddedBlockView.mm` splits on. React
+  # Native defines it for a library's own pod only through this call and nowhere else, so without it
+  # the file compiles its old-renderer half even on a React Native that no longer has one.
+  #
+  # On the old renderer the same call settles for React-Core and leaves the flag undefined, which is
+  # how the other half of that file gets compiled instead.
+  if respond_to?(:install_modules_dependencies, true)
+    install_modules_dependencies(s)
+  else
+    s.dependency "React-Core"
+  end
 end

README.md

@@ -17,6 +17,9 @@ Follow the installation process detailed [here](https://developers.mindbox.ru/do
    ```markdown
     npm i --save mindbox-sdk
     ```
+   The package requires React Native 0.71 or newer: the embedded block is a native component whose
+   glue is generated by React Native Codegen, and the Android module applies the
+   `com.facebook.react` Gradle plugin to run it. Both work on the old and the new architecture.
 
 2. For iOS, make sure to install the pods:
    ```markdown
@@ -31,6 +34,55 @@ Initialize the Mindbox SDK in your React Native app. You can find the necessary
 
 Learn how to send events to Mindbox. Different operations and their usage are detailed [here](https://developers.mindbox.ru/docs/integration-actions-react-native).
 
+### Embedded Blocks
+
+Mark a place in your layout with `MindboxEmbeddedBlock` and the SDK decides what goes into it from
+the admin panel — the app never learns what the content is, and it can change without a release.
+The host owns the size: pass the `height` the block should occupy. A place that ends up without
+content collapses to zero height and hands the space back.
+
+```tsx
+import { MindboxEmbeddedBlock } from 'mindbox-sdk';
+
+<MindboxEmbeddedBlock placeSystemName="main-screen-top" height={104} />
+```
+
+Both outcomes can be customized, the same way as in SwiftUI, Compose and Flutter: `placeholder`
+replaces the stock loading shimmer, and `error` opts into showing a failure instead of collapsing.
+An empty place always collapses — a host cannot fill the space of a block that was never meant to
+be there. `onLoad` and `onFail` report how the load ended.
+
+```tsx
+<MindboxEmbeddedBlock
+  placeSystemName="stories"
+  height={104}
+  placeholder={<StoriesSkeleton />}
+  error={<StoriesUnavailable />}
+  onFail={() => setShowStoriesSection(false)}
+/>
+```
+
+How long a block may wait for its content before it gives the place back is `timeoutMs`. Left out,
+it is the SDK's own budget of 30 seconds. The wait is the user's: it is counted only while the
+screen the block stands on is the one being looked at — and since every React Native screen lives
+in the same native window, the block cannot see that for itself. Pass `active` from the navigation
+(`useIsFocused()` in React Navigation), or a block behind a pushed screen will spend its budget on
+a screen nobody is looking at.
+
+```tsx
+<MindboxEmbeddedBlock
+  placeSystemName="stories"
+  height={104}
+  timeoutMs={5000}
+  active={useIsFocused()}
+/>
+```
+
+`height` is live: a new value resizes a block already on screen in place — the same content, no
+reload. It has to be positive, though: a block given no space to occupy is never loaded and reports
+no outcome. `timeoutMs` is fixed when the block is created — a new value is ignored with a warning;
+give the component a new `key` to load a block on a new budget.
+
 ### Push Notifications
 
 Mindbox SDK aids in handling push notifications. It offers configurations and usage instructions, found in the SDK documentation [Android(FCM)](https://developers.mindbox.ru/docs/firebase-send-push-notifications-react-native), [Android(HCM)](https://developers.mindbox.ru/docs/huawei-send-push-notifications-react-native), [IOS](https://developers.mindbox.ru/docs/ios-send-push-notifications-react-native) and [IOS(Rich)](https://developers.mindbox.ru/docs/ios-send-rich-push-react-native).

android/build.gradle

@@ -16,6 +16,7 @@ buildscript {
 
 apply plugin: 'com.android.library'
 apply plugin: 'kotlin-android'
+apply plugin: "com.facebook.react"
 
 def getExtOrDefault(name) {
   return rootProject.ext.has(name) ? rootProject.ext.get(name) : project.properties['MindboxSdk_' + name]
@@ -127,4 +128,6 @@ dependencies {
   api 'com.facebook.react:react-native:+'
   implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
   api 'cloud.mindbox:mobile-sdk:2.15.4'
+  implementation "androidx.lifecycle:lifecycle-runtime-ktx:2.8.7"
+  compileOnly 'cloud.mindbox:mindbox-common:2.15.4'
 }

android/src/main/java/com/mindboxsdk/MindboxSdkPackage.kt

@@ -4,6 +4,7 @@ import com.facebook.react.ReactPackage
 import com.facebook.react.bridge.NativeModule
 import com.facebook.react.bridge.ReactApplicationContext
 import com.facebook.react.uimanager.ViewManager
+import com.mindboxsdk.embedded.MindboxEmbeddedBlockViewManager
 
 
 class MindboxSdkPackage : ReactPackage {
@@ -12,6 +13,6 @@ class MindboxSdkPackage : ReactPackage {
     }
 
     override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
-        return emptyList()
+        return listOf(MindboxEmbeddedBlockViewManager())
     }
 }

android/src/main/java/com/mindboxsdk/embedded/MindboxEmbeddedBlockEvents.kt

@@ -0,0 +1,41 @@
+package com.mindboxsdk.embedded
+
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.events.Event
+
+internal class AppearanceChangeEvent(
+    surfaceId: Int,
+    viewTag: Int,
+    private val appearance: String,
+) : Event<AppearanceChangeEvent>(surfaceId, viewTag) {
+    override fun getEventName(): String = EVENT_NAME
+
+    override fun getEventData(): WritableMap = Arguments.createMap().apply {
+        putString("appearance", appearance)
+    }
+
+    companion object {
+        const val EVENT_NAME = "topAppearanceChange"
+    }
+}
+
+internal class BlockLoadEvent(surfaceId: Int, viewTag: Int) : Event<BlockLoadEvent>(surfaceId, viewTag) {
+    override fun getEventName(): String = EVENT_NAME
+
+    override fun getEventData(): WritableMap = Arguments.createMap()
+
+    companion object {
+        const val EVENT_NAME = "topBlockLoad"
+    }
+}
+
+internal class BlockFailEvent(surfaceId: Int, viewTag: Int) : Event<BlockFailEvent>(surfaceId, viewTag) {
+    override fun getEventName(): String = EVENT_NAME
+
+    override fun getEventData(): WritableMap = Arguments.createMap()
+
+    companion object {
+        const val EVENT_NAME = "topBlockFail"
+    }
+}

android/src/main/java/com/mindboxsdk/embedded/MindboxEmbeddedBlockHostView.kt

@@ -0,0 +1,217 @@
+package com.mindboxsdk.embedded
+
+import android.content.Context
+import android.graphics.Color
+import android.view.View
+import android.widget.FrameLayout
+import androidx.lifecycle.Lifecycle
+import androidx.lifecycle.LifecycleOwner
+import androidx.lifecycle.LifecycleRegistry
+import androidx.lifecycle.setViewTreeLifecycleOwner
+import cloud.mindbox.mobile_sdk.Mindbox
+import cloud.mindbox.mobile_sdk.annotations.InternalMindboxApi
+import cloud.mindbox.mobile_sdk.embedded.MindboxEmbeddedBlockAppearance
+import cloud.mindbox.mobile_sdk.embedded.MindboxEmbeddedBlockListener
+import cloud.mindbox.mobile_sdk.embedded.MindboxEmbeddedBlockView
+import cloud.mindbox.mobile_sdk.logger.Level
+
+@OptIn(InternalMindboxApi::class)
+internal class MindboxEmbeddedBlockHostView(context: Context) : FrameLayout(context) {
+    var onAppearance: ((String) -> Unit)? = null
+
+    var onOutcome: ((String) -> Unit)? = null
+
+    private var blockView: MindboxEmbeddedBlockView? = null
+    private var placeSystemName: String? = null
+    private var timeoutMs: Long? = null
+    private var hostVisible: Boolean = true
+    private var hasPlaceholder: Boolean = false
+    private var hasErrorView: Boolean = false
+
+    private var placeholderStandIn: View? = null
+    private var errorStandIn: View? = null
+
+    private val hostLifecycleOwner = object : LifecycleOwner {
+        val registry: LifecycleRegistry = LifecycleRegistry(this)
+
+        override val lifecycle: Lifecycle
+            get() = registry
+    }
+
+    init {
+        hostLifecycleOwner.registry.currentState = Lifecycle.State.RESUMED
+        setViewTreeLifecycleOwner(hostLifecycleOwner)
+    }
+
+    private val measureAndLayout = Runnable {
+        isLayoutScheduled = false
+        forceLayout()
+        measure(
+            MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
+            MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY),
+        )
+        layout(left, top, right, bottom)
+    }
+
+    private var isLayoutScheduled = false
+
+    private var isBlockWanted = false
+
+    override fun requestLayout() {
+        super.requestLayout()
+
+        if (isLayoutScheduled || width == 0 || height == 0) {
+            return
+        }
+
+        isLayoutScheduled = true
+        post(measureAndLayout)
+    }
+
+    fun setPlaceSystemName(name: String?) {
+        if (name == placeSystemName) {
+            return
+        }
+
+        placeSystemName = name
+        dropBlock()
+    }
+
+    fun setTimeoutMs(timeoutMs: Double) {
+        if (blockView == null) {
+            this.timeoutMs = timeoutMs.takeIf { it != 0.0 }?.toLong()
+        }
+    }
+
+    fun setHostVisible(isHostVisible: Boolean) {
+        if (hostVisible == isHostVisible) {
+            return
+        }
+
+        hostVisible = isHostVisible
+        blockView?.setHostVisible(isHostVisible)
+    }
+
+    fun setHasPlaceholder(hasPlaceholder: Boolean) {
+        if (this.hasPlaceholder == hasPlaceholder) {
+            return
+        }
+
+        this.hasPlaceholder = hasPlaceholder
+        syncStandIns()
+    }
+
+    fun setHasErrorView(hasErrorView: Boolean) {
+        if (this.hasErrorView == hasErrorView) {
+            return
+        }
+
+        this.hasErrorView = hasErrorView
+        syncStandIns()
+    }
+
+    fun commitProps() {
+        isBlockWanted = true
+        buildBlockIfPossible()
+    }
+
+    override fun onSizeChanged(width: Int, height: Int, oldWidth: Int, oldHeight: Int) {
+        super.onSizeChanged(width, height, oldWidth, oldHeight)
+        buildBlockIfPossible()
+    }
+
+    private fun buildBlockIfPossible() {
+        val place = placeSystemName ?: return
+        if (blockView != null || !isBlockWanted || width == 0 || height == 0) {
+            return
+        }
+
+        if (place.isEmpty()) {
+            Mindbox.writeLog(
+                message = "[EmbeddedBlock] A React Native block was created without a place system name and has nothing to resolve",
+                logLevel = Level.ERROR,
+            )
+        }
+
+        val block = MindboxEmbeddedBlockView(context, place, timeoutMs)
+        blockView = block
+
+        syncStandIns()
+        block.setHostVisible(hostVisible)
+        block.setListener(
+            object : MindboxEmbeddedBlockListener {
+                override fun onLoad(view: MindboxEmbeddedBlockView) {
+                    onOutcome?.invoke(OUTCOME_LOAD)
+                }
+
+                override fun onFail(view: MindboxEmbeddedBlockView) {
+                    onOutcome?.invoke(OUTCOME_FAIL)
+                }
+            },
+        )
+        block.setAppearanceObserver { appearance -> onAppearance?.invoke(nameOf(appearance)) }
+
+        addView(block, LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT))
+    }
+
+    fun release() {
+        dropBlock()
+        onAppearance = null
+        onOutcome = null
+        hostLifecycleOwner.registry.currentState = Lifecycle.State.DESTROYED
+    }
+
+    private fun dropBlock() {
+        val block = blockView ?: return
+
+        blockView = null
+        placeholderStandIn = null
+        errorStandIn = null
+        block.setAppearanceObserver(null)
+        block.setListener(null)
+        block.release()
+        removeView(block)
+    }
+
+    private fun syncStandIns() {
+        val block = blockView ?: return
+
+        if (hasPlaceholder) {
+            if (placeholderStandIn == null) {
+                placeholderStandIn = makeStandIn()
+                block.setPlaceholderView(placeholderStandIn)
+            }
+        } else if (placeholderStandIn != null) {
+            placeholderStandIn = null
+            block.setPlaceholderView(null)
+        }
+
+        if (hasErrorView) {
+            if (errorStandIn == null) {
+                errorStandIn = makeStandIn()
+                block.setErrorView(errorStandIn)
+            }
+        } else if (errorStandIn != null) {
+            errorStandIn = null
+            block.setErrorView(null)
+        }
+    }
+
+    private fun makeStandIn(): View = View(context).apply {
+        setBackgroundColor(Color.TRANSPARENT)
+        isClickable = false
+        isFocusable = false
+    }
+
+    private companion object {
+        const val OUTCOME_LOAD = "load"
+        const val OUTCOME_FAIL = "fail"
+
+        fun nameOf(appearance: MindboxEmbeddedBlockAppearance): String = when (appearance) {
+            MindboxEmbeddedBlockAppearance.PLACEHOLDER -> "placeholder"
+            MindboxEmbeddedBlockAppearance.CONTENT -> "content"
+            MindboxEmbeddedBlockAppearance.ERROR -> "error"
+            MindboxEmbeddedBlockAppearance.COLLAPSED -> "collapsed"
+        }
+    }
+}