From 3ef961291c02c2a1b0d9293b39f0e5787e1a6740 Mon Sep 17 00:00:00 2001
From: panbibi <1265629139@qq.com>
Date: Fri, 17 Feb 2023 15:56:16 +0800
Subject: [PATCH] =?UTF-8?q?refactor(TransitionImage):=20=E4=BD=BF=E7=94=A8?=
 =?UTF-8?q?=E5=87=BD=E6=95=B0=E7=BB=84=E4=BB=B6=E6=9B=BF=E6=8D=A2Class?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/core/src/TransitionImage/index.tsx | 152 ++++++++++----------
 1 file changed, 75 insertions(+), 77 deletions(-)

diff --git a/packages/core/src/TransitionImage/index.tsx b/packages/core/src/TransitionImage/index.tsx
index 279d4fa53..d59ca55c8 100644
--- a/packages/core/src/TransitionImage/index.tsx
+++ b/packages/core/src/TransitionImage/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   Animated,
   Image as ImageNative,
@@ -29,27 +29,19 @@ type ImageState = {
   placeholderOpacity: Animated.Value;
 };
 
-export default class TransitionImage extends React.Component<ImageProps & Partial<ImageProps>, ImageState> {
-  static displayName = 'Image';
-  static getSize = ImageNative.getSize;
-  static getSizeWithHeaders = ImageNative.getSizeWithHeaders;
-  static prefetch = ImageNative.prefetch;
-  static abortPrefetch = ImageNative.abortPrefetch;
-  static queryCache = ImageNative.queryCache;
-  static resolveAssetSource = ImageNative.resolveAssetSource;
-
-  state = {
+export default function TransitionImage(props: ImageProps & Partial<ImageProps>) {
+  const [state, _] = useState<ImageState>({
     placeholderOpacity: new Animated.Value(1),
-  };
+  });
 
-  onLoad = (e: any) => {
-    const { transition, onLoad, transitionDuration } = this.props;
+  const onLoad = (e: any) => {
+    const { transition, onLoad, transitionDuration } = props;
     if (!transition) {
-      this.state.placeholderOpacity.setValue(0);
+      state.placeholderOpacity.setValue(0);
       return;
     }
 
-    Animated.timing(this.state.placeholderOpacity, {
+    Animated.timing(state.placeholderOpacity, {
       toValue: 0,
       duration: transitionDuration,
       useNativeDriver: true,
@@ -57,74 +49,80 @@ export default class TransitionImage extends React.Component<ImageProps & Partia
     onLoad && onLoad(e);
   };
 
-  render() {
-    const {
-      onPress,
-      onLongPress,
-      Component = onPress || onLongPress ? TouchableOpacity : View,
-      placeholderStyle,
-      PlaceholderContent,
-      containerStyle,
-      childrenContainerStyle = null,
-      style = {},
-      ImageComponent = ImageNative,
-      children,
-      ...attributes
-    } = this.props;
+  const {
+    onPress,
+    onLongPress,
+    Component = onPress || onLongPress ? TouchableOpacity : View,
+    placeholderStyle,
+    PlaceholderContent,
+    containerStyle,
+    childrenContainerStyle = null,
+    style = {},
+    ImageComponent = ImageNative,
+    children,
+    ...attributes
+  } = props;
 
-    const hasImage = Boolean(attributes.source);
-    const { width, height, ...styleProps } = StyleSheet.flatten(style);
+  const hasImage = Boolean(attributes.source);
+  const { width, height, ...styleProps } = StyleSheet.flatten(style);
 
-    return (
-      <Component
-        onPress={onPress}
-        onLongPress={onLongPress}
-        accessibilityIgnoresInvertColors={true}
-        style={StyleSheet.flatten([styles.container, containerStyle])}
-      >
-        <ImageComponent
-          testID="RNE__Image"
-          transition={true}
-          transitionDuration={360}
-          {...attributes}
-          onLoad={this.onLoad}
-          style={StyleSheet.flatten([
-            StyleSheet.absoluteFill,
-            {
-              width: width,
-              height: height,
-            } as StyleProp<ImageStyle>,
-            styleProps,
-          ])}
-        />
+  return (
+    <Component
+      onPress={onPress}
+      onLongPress={onLongPress}
+      accessibilityIgnoresInvertColors={true}
+      style={StyleSheet.flatten([styles.container, containerStyle])}
+    >
+      <ImageComponent
+        testID="RNE__Image"
+        transition={true}
+        transitionDuration={360}
+        {...attributes}
+        onLoad={onLoad}
+        style={StyleSheet.flatten([
+          StyleSheet.absoluteFill,
+          {
+            width: width,
+            height: height,
+          } as StyleProp<ImageStyle>,
+          styleProps,
+        ])}
+      />
 
-        <Animated.View
-          pointerEvents={hasImage ? 'none' : 'auto'}
-          accessibilityElementsHidden={hasImage}
-          importantForAccessibility={hasImage ? 'no-hide-descendants' : 'yes'}
-          style={[
-            styles.placeholderContainer,
-            {
-              opacity: hasImage ? this.state.placeholderOpacity : 1,
-            },
-          ]}
+      <Animated.View
+        pointerEvents={hasImage ? 'none' : 'auto'}
+        accessibilityElementsHidden={hasImage}
+        importantForAccessibility={hasImage ? 'no-hide-descendants' : 'yes'}
+        style={[
+          styles.placeholderContainer,
+          {
+            opacity: hasImage ? state.placeholderOpacity : 1,
+          },
+        ]}
+      >
+        <View
+          testID="RNE__Image__placeholder"
+          style={StyleSheet.flatten([style, styles.placeholder, placeholderStyle])}
         >
-          <View
-            testID="RNE__Image__placeholder"
-            style={StyleSheet.flatten([style, styles.placeholder, placeholderStyle])}
-          >
-            {PlaceholderContent}
-          </View>
-        </Animated.View>
-
-        <View testID="RNE__Image__children__container" style={childrenContainerStyle ?? style}>
-          {children}
+          {PlaceholderContent}
         </View>
-      </Component>
-    );
-  }
+      </Animated.View>
+
+      <View testID="RNE__Image__children__container" style={childrenContainerStyle ?? style}>
+        {children}
+      </View>
+    </Component>
+  );
 }
 
+TransitionImage.displayName = 'Image';
+TransitionImage.getSize = ImageNative.getSize;
+TransitionImage.getSizeWithHeaders = ImageNative.getSizeWithHeaders;
+TransitionImage.prefetch = ImageNative.prefetch;
+TransitionImage.abortPrefetch = ImageNative.abortPrefetch;
+TransitionImage.queryCache = ImageNative.queryCache;
+TransitionImage.resolveAssetSource = ImageNative.resolveAssetSource;
+
 const styles = StyleSheet.create({
   container: {
     backgroundColor: 'transparent',