Merge pull request #739 from thundersdata-frontend/refactor-rn

perf: 对组件库组件进行优化
thundersdata-frontend · Oct 10, 2023 · 99524e2 · 99524e2
2 parents 0da2240 + dc908cf
commit 99524e2
Show file tree

Hide file tree

Showing 98 changed files with 1,265 additions and 1,276 deletions.
diff --git a/.changeset/swift-kids-matter.md b/.changeset/swift-kids-matter.md
@@ -0,0 +1,5 @@
+---
+'@td-design/react-native': minor
+---
+
+对组件库组件进行优化
diff --git a/package.json b/package.json
@@ -59,5 +59,8 @@
   "engines": {
     "node": ">=16",
     "pnpm": ">=7.0.0"
+  },
+  "resolutions": {
+    "@types/react": "17.0.43"
   }
-}
+}
diff --git a/packages/react-native/src/accordion/index.tsx b/packages/react-native/src/accordion/index.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react';
+import React, { FC, useMemo, useState } from 'react';
 import { FlatList } from 'react-native';
 import Animated from 'react-native-reanimated';
 
@@ -82,7 +82,7 @@ const AccordionItem: FC<
     onPress,
   });
 
-  const renderTitle = () => {
+  const Title = useMemo(() => {
     if (typeof title === 'string') {
       return (
         <Text variant="p0" color="text">
@@ -91,17 +91,18 @@ const AccordionItem: FC<
       );
     }
     return title;
-  };
+  }, [title]);
 
-  const renderContent = () => {
-    if (typeof content === 'string')
+  const Content = useMemo(() => {
+    if (typeof content === 'string') {
       return (
         <Text variant="p1" selectable color="text">
           {content}
         </Text>
       );
+    }
     return content;
-  };
+  }, [content]);
 
   return (
     <Box backgroundColor={'white'} flex={1}>
@@ -122,7 +123,7 @@ const AccordionItem: FC<
           headerStyle,
         ]}
       >
-        {renderTitle()}
+        {Title}
         {customIcon ? (
           customIcon({ progress })
         ) : (
@@ -133,7 +134,7 @@ const AccordionItem: FC<
       </Pressable>
       <Animated.View style={[{ position: 'relative', overflow: 'hidden' }, bodyStyle]}>
         <Box position={'absolute'} collapsable={false} onLayout={handleLayout} style={contentStyle}>
-          {renderContent()}
+          {Content}
         </Box>
       </Animated.View>
     </Box>

diff --git a/packages/react-native/src/accordion/useAccordion.ts b/packages/react-native/src/accordion/useAccordion.ts
@@ -52,21 +52,16 @@ export default function useAccordion({
   }, [multiple, currentIndex, index, onPress]);
 
   const handlePress = () => {
+    progress.value = withTiming(progress.value === 0 ? 1 : 0);
     onPress(index);
-
-    if (progress.value === 0) {
-      progress.value = withTiming(1);
-    } else {
-      progress.value = withTiming(0);
-    }
   };
 
   return {
     bodyStyle,
     iconStyle,
     progress,
 
-    handleLayout: useMemoizedFn(handleLayout),
+    handleLayout,
     handlePress: useMemoizedFn(handlePress),
   };
 }
diff --git a/packages/react-native/src/action-sheet/index.tsx b/packages/react-native/src/action-sheet/index.tsx
@@ -1,4 +1,4 @@
-import React, { FC, ReactNode } from 'react';
+import React, { FC, ReactNode, useMemo } from 'react';
 import { StyleSheet } from 'react-native';
 
 import { useTheme } from '@shopify/restyle';
@@ -52,8 +52,9 @@ const ActionSheet: FC<ActionSheetProps> = ({
     },
   });
 
-  const renderTitle = () => {
+  const Title = useMemo(() => {
     if (!title) return null;
+
     if (typeof title === 'string')
       return (
         <Box padding="x3">
@@ -62,8 +63,9 @@ const ActionSheet: FC<ActionSheetProps> = ({
           </Text>
         </Box>
       );
+
     return <Box padding="x3">{title}</Box>;
-  };
+  }, [title]);
 
   return (
     <Modal
@@ -74,7 +76,7 @@ const ActionSheet: FC<ActionSheetProps> = ({
       maskClosable={false}
       maskVisible={true}
     >
-      {renderTitle()}
+      {Title}
       {items.map((item, index) => (
         <ActionSheetItem
           key={index}

diff --git a/packages/react-native/src/avatar/Accessory/index.tsx b/packages/react-native/src/avatar/Accessory/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { memo } from 'react';
 import { Image, StyleSheet } from 'react-native';
 
 import Box from '../../box';
@@ -7,59 +7,60 @@ import { AccessoryProps } from '../type';
 
 const { px } = helpers;
 const Accessory = ({ size = px(14), url, component, top = false, left = false }: AccessoryProps) => {
-  /** 挂件的reader */
-  const iconReader = () => {
-    if (url) {
-      const source = typeof url === 'string' ? { uri: url } : url;
-      return (
-        <Image
-          style={{
-            width: size,
-            height: size,
-            borderRadius: size / 2,
-          }}
-          source={source}
-          resizeMode="cover"
-        />
-      );
-    }
-    if (component) {
-      return component;
-    }
-    return null;
-  };
-  /** 挂件的位置 */
-  const styles = StyleSheet.create({
-    position: {
-      borderRadius: size / 2,
-    },
-    top: {
-      top: 0,
-    },
-    bottom: {
-      bottom: 0,
-    },
-    left: {
-      left: 0,
-    },
-    right: {
-      right: 0,
-    },
-  });
-
   return (
     <Box
       position={'absolute'}
       alignItems={'center'}
       justifyContent={'center'}
       width={size}
       height={size}
-      style={StyleSheet.flatten([styles.position, top ? styles.top : styles.bottom, left ? styles.left : styles.right])}
+      style={StyleSheet.flatten([
+        { borderRadius: size / 2 },
+        top ? styles.top : styles.bottom,
+        left ? styles.left : styles.right,
+      ])}
     >
-      {iconReader()}
+      <Icon {...{ url, size, component }} />
     </Box>
   );
 };
 Accessory.displayName = 'Accessory';
 
+/** 挂件的位置 */
+const styles = StyleSheet.create({
+  top: {
+    top: 0,
+  },
+  bottom: {
+    bottom: 0,
+  },
+  left: {
+    left: 0,
+  },
+  right: {
+    right: 0,
+  },
+});
+
 export default Accessory;
+
+const Icon = memo(({ url, size, component }: Pick<AccessoryProps, 'size' | 'url' | 'component'>) => {
+  if (url) {
+    const source = typeof url === 'string' ? { uri: url } : url;
+    return (
+      <Image
+        style={{
+          width: size,
+          height: size,
+          borderRadius: size! / 2,
+        }}
+        source={source}
+        resizeMode="cover"
+      />
+    );
+  }
+  if (component) {
+    return component;
+  }
+  return null;
+});
diff --git a/packages/react-native/src/avatar/Avatar/index.tsx b/packages/react-native/src/avatar/Avatar/index.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, memo } from 'react';
 import { Image, StyleSheet } from 'react-native';
 
 import { useTheme } from '@shopify/restyle';
@@ -27,7 +27,29 @@ const Avatar: FC<AvatarProps> = ({ title, url, textStyle, ...props }) => {
     },
   });
 
-  const renderImage = () => {
+  return (
+    <Pressable activeOpacity={activeOpacity} disabled={!onPress} onPress={onPress} style={styles.avatar}>
+      <Content {...{ url, title, width, height, avatarRadius, textStyle }} />
+    </Pressable>
+  );
+};
+Avatar.displayName = 'Avatar';
+
+export default Avatar;
+
+const Content = memo(
+  ({
+    url,
+    title,
+    width,
+    height,
+    avatarRadius,
+    textStyle,
+  }: Pick<AvatarProps, 'url' | 'title' | 'textStyle'> & {
+    width: number;
+    height: number;
+    avatarRadius: number;
+  }) => {
     if (!!url)
       return (
         <Image
@@ -43,14 +65,5 @@ const Avatar: FC<AvatarProps> = ({ title, url, textStyle, ...props }) => {
         </Text>
       );
     return null;
-  };
-
-  return (
-    <Pressable activeOpacity={activeOpacity} disabled={!onPress} onPress={onPress} style={styles.avatar}>
-      {renderImage()}
-    </Pressable>
-  );
-};
-Avatar.displayName = 'Avatar';
-
-export default Avatar;
+  }
+);
diff --git a/packages/react-native/src/avatar/type.ts b/packages/react-native/src/avatar/type.ts
@@ -1,4 +1,4 @@
-import { PropsWithChildren, ReactNode } from 'react';
+import { PropsWithChildren, ReactElement } from 'react';
 import { TextStyle, ViewStyle } from 'react-native';
 
 export interface AccessoryProps {
@@ -7,7 +7,7 @@ export interface AccessoryProps {
   /** 使用图片时的值 */
   url?: string | number;
   /** 使用自定义组件 */
-  component?: ReactNode;
+  component?: ReactElement;
   /** 挂件垂直方向位置 */
   top?: boolean;
   /** 挂件水平方向位置 */