Merge pull request #520 from panbibi/dev

 refactor(Tooltip): 使用函数组件替换Class组件

Author: ChenlingasMx

packages/core/src/Empty/index.tsx

@@ -2,19 +2,18 @@ import React, { Component } from 'react';
 import { StyleSheet, Text, TextProps } from 'react-native';
 import Icon from '../Icon';
 import Flex, { FlexProps } from '../Flex';
-import { iconStr } from './svg';
 
-// export const iconStr = `
-// <svg width="64" height="41" viewBox="0 0 64 41">
-//   <g transform="translate(0 1)" fill="none" fill-rule="evenodd">
-//     <ellipse fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
-//     <g fill-rule="nonzero" stroke="#D9D9D9">
-//       <path fill="#FFF" d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path>
-//       <path fill="#FAFAFA" d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"></path>
-//     </g>
-//   </g>
-// </svg>
-// `;
+export const iconStr = `
+<svg width="64" height="41" viewBox="0 0 64 41">
+  <g transform="translate(0 1)" fill="none" fill-rule="evenodd">
+    <ellipse fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
+    <g fill-rule="nonzero" stroke="#D9D9D9">
+      <path fill="#FFF" d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path>
+      <path fill="#FAFAFA" d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"></path>
+    </g>
+  </g>
+</svg>
+`;
 
 export interface EmptyProps extends FlexProps {
   /**

packages/core/src/Empty/svg.tsx

@@ -49,7 +49,7 @@ export type TileProps = TouchableOpacityProps &
     /** 继承image的api */
     imageProps?: Partial<ImageProps>;
     /** Custom ImageComponent for Tile. */
-    ImageComponent?: typeof React.Component;
+    ImageComponent?: Function;
   };
 
 const Tile = ({

packages/core/src/Tile/index.tsx

@@ -17,41 +17,39 @@ interface CloudProps extends ViewProps {
   borderRadius?: number;
 }
 
-export default class Cloud extends React.Component<CloudProps> {
-  render() {
-    const { title, isDown, isStart, triangle, backgroundColor, borderRadius } = this.props;
-    const style: ViewStyle = {
-      flexDirection: isDown ? 'column-reverse' : 'column',
-      alignItems: isStart,
-    };
-    const TextContainerStyle: ViewStyle = {
-      position: triangle ? 'absolute' : 'relative',
-      marginVertical: triangle ? 10 : 0,
-      backgroundColor,
-      borderRadius,
-      paddingHorizontal: 10,
-      paddingVertical: 10,
-    };
-    return (
-      <View style={[style]}>
-        <View
-          style={[
-            styles.cloudFoot,
-            {
-              transform: [{ rotateX: isDown ? '180deg' : '0deg' }],
-              position: triangle ? 'absolute' : 'relative',
-              left: triangle,
-              zIndex: 9999,
-              borderBottomColor: backgroundColor,
-            },
-          ]}
-        />
-        <View testID="RNE__Tooltip__cloud__view" style={[{ ...TextContainerStyle }]}>
-          <Text style={[styles.cloudText]}>{title}</Text>
-        </View>
+export default function Cloud(props: CloudProps) {
+  const { title, isDown, isStart, triangle, backgroundColor, borderRadius } = props;
+  const style: ViewStyle = {
+    flexDirection: isDown ? 'column-reverse' : 'column',
+    alignItems: isStart,
+  };
+  const TextContainerStyle: ViewStyle = {
+    position: triangle ? 'absolute' : 'relative',
+    marginVertical: triangle ? 10 : 0,
+    backgroundColor,
+    borderRadius,
+    paddingHorizontal: 10,
+    paddingVertical: 10,
+  };
+  return (
+    <View style={[style]}>
+      <View
+        style={[
+          styles.cloudFoot,
+          {
+            transform: [{ rotateX: isDown ? '180deg' : '0deg' }],
+            position: triangle ? 'absolute' : 'relative',
+            left: triangle,
+            zIndex: 9999,
+            borderBottomColor: backgroundColor,
+          },
+        ]}
+      />
+      <View testID="RNE__Tooltip__cloud__view" style={[{ ...TextContainerStyle }]}>
+        <Text style={[styles.cloudText]}>{title}</Text>
       </View>
-    );
-  }
+    </View>
+  );
 }
 
 const styles = StyleSheet.create({