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

fix: 修改几个组件里children的类型定义方式
thundersdata-frontend · Oct 17, 2023 · cc6d241 · cc6d241
2 parents 2062632 + 616feb4
commit cc6d241
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 30 deletions.
diff --git a/.changeset/cuddly-dolls-begin.md b/.changeset/cuddly-dolls-begin.md
@@ -0,0 +1,5 @@
+---
+'@td-design/react-native': patch
+---
+
+修改几个组件里children的类型定义方式
diff --git a/packages/react-native/src/card/index.tsx b/packages/react-native/src/card/index.tsx
@@ -1,4 +1,4 @@
-import React, { FC, memo, PropsWithChildren, ReactNode } from 'react';
+import React, { FC, memo, ReactNode } from 'react';
 import { StyleProp, StyleSheet, ViewStyle } from 'react-native';
 
 import { useTheme } from '@shopify/restyle';
@@ -27,14 +27,16 @@ export interface CardProps {
   containerStyle?: StyleProp<ViewStyle>;
   /** 容器内content样式 */
   contentStyle?: StyleProp<ViewStyle>;
+  /** 子组件 */
+  children?: ReactNode;
 }
 
 /**
  * Card 组件由Header（可选）/Content/Footer（可选）三部分组成
  * @param param0
  * @returns
  */
-const Card: FC<PropsWithChildren<CardProps>> = ({
+const Card: FC<CardProps> = ({
   icon,
   title,
   extra,
@@ -119,28 +121,26 @@ const Header = memo(
   }
 );
 
-const Body = memo(
-  ({ footer, contentStyle, children }: Pick<PropsWithChildren<CardProps>, 'footer' | 'contentStyle' | 'children'>) => {
-    const theme = useTheme<Theme>();
+const Body = memo(({ footer, contentStyle, children }: Pick<CardProps, 'footer' | 'contentStyle' | 'children'>) => {
+  const theme = useTheme<Theme>();
 
-    return (
-      <Box
-        padding="x2"
-        style={
-          footer
-            ? StyleSheet.compose(
-                {
-                  borderBottomWidth: ONE_PIXEL,
-                  borderBottomColor: theme.colors.border,
-                  paddingBottom: theme.spacing.x2,
-                },
-                contentStyle
-              )
-            : contentStyle
-        }
-      >
-        {children}
-      </Box>
-    );
-  }
-);
+  return (
+    <Box
+      padding="x2"
+      style={
+        footer
+          ? StyleSheet.compose(
+              {
+                borderBottomWidth: ONE_PIXEL,
+                borderBottomColor: theme.colors.border,
+                paddingBottom: theme.spacing.x2,
+              },
+              contentStyle
+            )
+          : contentStyle
+      }
+    >
+      {children}
+    </Box>
+  );
+});
diff --git a/packages/react-native/src/pressable/index.tsx b/packages/react-native/src/pressable/index.tsx
@@ -29,7 +29,7 @@
  * effect is the invocation of `onPress` and `onLongPress` that occur when a
  * responder is release while in the "press in" states.
  */
-import React, { memo, PropsWithChildren } from 'react';
+import React, { memo } from 'react';
 import { Pressable as RNPressable, PressableProps as RNPressableProps, StyleProp, ViewStyle } from 'react-native';
 
 import helpers from '../helpers';
@@ -44,7 +44,7 @@ type Rect = {
 export interface PressableProps
   extends Pick<
     RNPressableProps,
-    'onPress' | 'onPressIn' | 'onPressOut' | 'onLongPress' | 'disabled' | 'delayLongPress' | 'onLayout'
+    'onPress' | 'onPressIn' | 'onPressOut' | 'onLongPress' | 'disabled' | 'delayLongPress' | 'onLayout' | 'children'
   > {
   /** 点击时的不透明度 */
   activeOpacity?: number;
@@ -58,7 +58,7 @@ export interface PressableProps
 }
 
 const { px } = helpers;
-function Pressable(props: PropsWithChildren<PressableProps>) {
+function Pressable(props: PressableProps) {
   const {
     children,
     activeOpacity = 0.6,

diff --git a/packages/react-native/src/swipe-row/index.tsx b/packages/react-native/src/swipe-row/index.tsx
@@ -37,7 +37,7 @@ export type SwipeRowProps = PropsWithChildren<{
   onRemove?: () => Promise<boolean>;
   /** 是否覆盖默认操作项 */
   overwriteDefaultActions?: boolean;
-  /** Swiperable自身的样式 */
+  /** Swipeable自身的样式 */
   containerStyle?: StyleProp<ViewStyle>;
   /** Swipeable的子组件样式 */
   contentContainerStyle?: StyleProp<ViewStyle>;