refactor: replace bubbling event with direct event (#363)

* refactor(android): replace bubbling event with direct event * refactor: replace loaded with completed
duguyihou · Oct 5, 2024 · 8fe1512 · 8fe1512
1 parent 959ed60
commit 8fe1512
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 42 deletions.
diff --git a/android/src/main/java/com/turboimage/TurboImageViewManager.kt b/android/src/main/java/com/turboimage/TurboImageViewManager.kt
@@ -34,32 +34,11 @@ class TurboImageViewManager : SimpleViewManager<TurboImageView>() {
 
   override fun getExportedCustomDirectEventTypeConstants(): MutableMap<String, Any>? {
     return MapBuilder.of(
-      "onProgress", MapBuilder.of("registrationName", "onProgress")
-    )
-  }
-
-  override fun getExportedCustomBubblingEventTypeConstants(): Map<String, Any> {
-    return mapOf(
-      "onStart" to mapOf(
-        "phasedRegistrationNames" to mapOf(
-          "bubbled" to "onStart"
-        )
-      ),
-      "onSuccess" to mapOf(
-        "phasedRegistrationNames" to mapOf(
-          "bubbled" to "onSuccess"
-        )
-      ),
-      "onFailure" to mapOf(
-        "phasedRegistrationNames" to mapOf(
-          "bubbled" to "onFailure"
-        )
-      ),
-      "onCompletion" to mapOf(
-        "phasedRegistrationNames" to mapOf(
-          "bubbled" to "onCompletion"
-        )
-      )
+      "onStart", MapBuilder.of("registrationName", "onStart"),
+      "onProgress", MapBuilder.of("registrationName", "onProgress"),
+      "onSuccess", MapBuilder.of("registrationName", "onSuccess"),
+      "onFailure", MapBuilder.of("registrationName", "onFailure"),
+      "onCompletion", MapBuilder.of("registrationName", "onCompletion"),
     )
   }
 
@@ -81,7 +60,7 @@ class TurboImageViewManager : SimpleViewManager<TurboImageView>() {
           val reactContext = view.context as ReactContext
           UIManagerHelper.getEventDispatcher(reactContext, view.id)?.let {
             val payload = Arguments.createMap().apply {
-              putDouble("loaded", bytesRead.toDouble())
+              putDouble("completed", bytesRead.toDouble())
               putDouble("total", contentLength.toDouble())
             }
             val surfaceId = UIManagerHelper.getSurfaceId(reactContext)

diff --git a/example/src/screens/events/FailureScreen.tsx b/example/src/screens/events/FailureScreen.tsx
@@ -5,7 +5,7 @@ import {
   type NativeSyntheticEvent,
 } from 'react-native';
 import React, { useState } from 'react';
-import type { Failure, TaskState } from 'react-native-turbo-image';
+import type { Failure, Start } from 'react-native-turbo-image';
 import TurboImage from 'react-native-turbo-image';
 
 type Information = {
@@ -19,13 +19,11 @@ const FailureResultScreen = () => {
     setInformation(nativeEvent);
   };
 
-  const handleStart = ({ nativeEvent }: NativeSyntheticEvent<TaskState>) => {
+  const handleStart = ({ nativeEvent }: NativeSyntheticEvent<Start>) => {
     setStart(nativeEvent.state === 'running');
   };
 
-  const handleCompletion = ({
-    nativeEvent,
-  }: NativeSyntheticEvent<TaskState>) => {
+  const handleCompletion = ({ nativeEvent }: NativeSyntheticEvent<Start>) => {
     setCompletion(nativeEvent.state === 'completed');
   };
 

diff --git a/example/src/screens/events/SuccessScreen.tsx b/example/src/screens/events/SuccessScreen.tsx
@@ -5,7 +5,12 @@ import {
   type NativeSyntheticEvent,
 } from 'react-native';
 import React, { useState } from 'react';
-import type { Progress, Success, TaskState } from 'react-native-turbo-image';
+import type {
+  Progress,
+  Success,
+  Start,
+  Completion,
+} from 'react-native-turbo-image';
 import TurboImage from 'react-native-turbo-image';
 
 type Information = {
@@ -23,19 +28,19 @@ const SuccessScreen = () => {
     setInformation(nativeEvent);
   };
 
-  const handleStart = ({ nativeEvent }: NativeSyntheticEvent<TaskState>) => {
+  const handleStart = ({ nativeEvent }: NativeSyntheticEvent<Start>) => {
     setStart(nativeEvent.state === 'running');
   };
 
   const handleCompletion = ({
     nativeEvent,
-  }: NativeSyntheticEvent<TaskState>) => {
+  }: NativeSyntheticEvent<Completion>) => {
     setCompletion(nativeEvent.state === 'completed');
   };
 
   const handleProgress = ({ nativeEvent }: NativeSyntheticEvent<Progress>) => {
     const percentage = `${(
-      (100 * nativeEvent.loaded) /
+      (100 * nativeEvent.completed) /
       nativeEvent.total
     ).toFixed(2)}%`;
     setProgress((prev) => [...prev, percentage]);

diff --git a/src/index.tsx b/src/index.tsx
@@ -3,10 +3,11 @@ export type {
   Source,
   CachePolicy,
   Format,
+  Start,
+  Progress,
   Success,
   Failure,
-  Progress,
-  TaskState,
+  Completion,
   ResizeMode,
   Indicator,
   IndicatorStyle,

diff --git a/src/types.ts b/src/types.ts
@@ -32,12 +32,16 @@ export type Placeholder = {
   memoryCacheKey: string;
 };
 
-export type TaskState = {
+type TaskState = {
   state: State;
 };
 
+export type Start = TaskState;
+
+export type Completion = TaskState;
+
 export type Progress = {
-  loaded: number;
+  completed: number;
   total: number;
 };
 
@@ -68,11 +72,11 @@ export interface TurboImageProps extends AccessibilityProps, ViewProps {
   enableLiveTextInteraction?: boolean;
   allowHardware?: boolean;
   format?: Format;
-  onStart?: (result: NativeSyntheticEvent<TaskState>) => void;
+  onStart?: (result: NativeSyntheticEvent<Start>) => void;
   onSuccess?: (result: NativeSyntheticEvent<Success>) => void;
   onProgress?: (result: NativeSyntheticEvent<Progress>) => void;
   onFailure?: (result: NativeSyntheticEvent<Failure>) => void;
-  onCompletion?: (result: NativeSyntheticEvent<TaskState>) => void;
+  onCompletion?: (result: NativeSyntheticEvent<Completion>) => void;
 }
 
 export type TurboImageApi = {