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

fix: 修复一些bug
thundersdata-frontend · Oct 16, 2023 · 5219c38 · 5219c38
2 parents e384049 + d91317d
commit 5219c38
Show file tree

Hide file tree

Showing 21 changed files with 198 additions and 276 deletions.
diff --git a/.changeset/large-bulldogs-pull.md b/.changeset/large-bulldogs-pull.md
@@ -0,0 +1,6 @@
+---
+'@td-design/react-native-picker': patch
+'@td-design/react-native': patch
+---
+
+修复一些bug
diff --git a/packages/react-native-picker/src/components/DatePicker/index.tsx b/packages/react-native-picker/src/components/DatePicker/index.tsx
@@ -23,22 +23,21 @@ const DatePicker: FC<
 
   const { values, cols } = getValueCols();
 
-  /** 生成日期picker */
-  const renderDateTimePicker = () => {
-    return cols.map((col, index) => {
-      return (
-        <WheelPicker
-          key={index}
-          {...restProps}
-          data={col}
-          value={values[index]}
-          onChange={itemValue => onValueChange(itemValue, index)}
-        />
-      );
-    });
-  };
-
-  return <Flex>{renderDateTimePicker()}</Flex>;
+  return (
+    <Flex>
+      {cols.map((col, index) => {
+        return (
+          <WheelPicker
+            key={index}
+            {...restProps}
+            data={col}
+            value={values[index]}
+            onChange={itemValue => onValueChange(itemValue, index)}
+          />
+        );
+      })}
+    </Flex>
+  );
 };
 
 export default React.memo(DatePicker, (p, n) => {

diff --git a/packages/react-native-picker/src/components/WheelPicker/WheelPickerItem.tsx b/packages/react-native-picker/src/components/WheelPicker/WheelPickerItem.tsx
@@ -1,13 +1,13 @@
 import React, { memo } from 'react';
 import { Animated, StyleSheet } from 'react-native';
 
-import { WhellPickerItemProps } from './type';
+import { WheelPickerItemProps } from './type';
 
 const opacityFunction = (val: number) => 1 / (1 + Math.abs(val));
 const scaleFunction = (val: number) => 1 - 0.1 * Math.abs(val);
 const rotationFunction = (val: number) => 20 * val;
 
-function WheelPickerItem({ textStyle, style, visibleRest, height, option, index, currentIndex }: WhellPickerItemProps) {
+function WheelPickerItem({ textStyle, style, visibleRest, height, option, index, currentIndex }: WheelPickerItemProps) {
   const relativeScrollIndex = Animated.subtract(index, currentIndex);
 
   const inputRange = [0];

diff --git a/packages/react-native-picker/src/components/WheelPicker/index.tsx b/packages/react-native-picker/src/components/WheelPicker/index.tsx
@@ -94,6 +94,21 @@ export default function WheelPicker({
     },
   });
 
+  const renderItem = useCallback(
+    ({ item: option, index }) => (
+      <WheelPickerItem
+        index={index}
+        option={option}
+        style={itemStyle}
+        textStyle={itemTextStyle}
+        height={itemHeight}
+        currentIndex={currentScrollIndex}
+        visibleRest={2}
+      />
+    ),
+    [itemStyle, itemTextStyle, itemHeight, currentScrollIndex]
+  );
+
   return (
     <View style={[styles.container, containerStyle]}>
       <View style={styles.selectedIndicator} />
@@ -116,17 +131,7 @@ export default function WheelPicker({
         })}
         data={paddedOptions}
         keyExtractor={(_, index) => index.toString()}
-        renderItem={({ item: option, index }) => (
-          <WheelPickerItem
-            index={index}
-            option={option}
-            style={itemStyle}
-            textStyle={itemTextStyle}
-            height={itemHeight}
-            currentIndex={currentScrollIndex}
-            visibleRest={2}
-          />
-        )}
+        renderItem={renderItem}
       />
     </View>
   );

diff --git a/packages/react-native-picker/src/components/WheelPicker/type.ts b/packages/react-native-picker/src/components/WheelPicker/type.ts
@@ -34,7 +34,7 @@ export interface WheelPickerProps extends WheelPickerPropsBase {
 }
 
 /** 滚轮选择器子项的属性 */
-export interface WhellPickerItemProps {
+export interface WheelPickerItemProps {
   textStyle: StyleProp<TextStyle>;
   style: StyleProp<ViewStyle>;
   option: OptionItem | null;

diff --git a/packages/react-native-picker/src/date-period-input/index.tsx b/packages/react-native-picker/src/date-period-input/index.tsx
@@ -1,6 +1,5 @@
 import React, { FC, ReactNode } from 'react';
 import { StyleSheet } from 'react-native';
-import Animated, { FadeInRight, FadeOutRight } from 'react-native-reanimated';
 
 import { Box, Flex, helpers, Pressable, SvgIcon, Text, useTheme } from '@td-design/react-native';
 import { useSafeState } from '@td-design/rn-hooks';
@@ -25,7 +24,6 @@ export interface DatePeriodInputProps
   disabled?: boolean;
 }
 
-const AnimatedTouchableIcon = Animated.createAnimatedComponent(Pressable);
 const { ONE_PIXEL } = helpers;
 
 /** 适用于筛选条件下的日期区间选择 */
@@ -70,23 +68,7 @@ const DatePeriodInput: FC<DatePeriodInputProps> = ({
     icon: { alignItems: 'flex-end' },
   });
 
-  const renderLabel = () => {
-    if (!!label)
-      return (
-        <Flex marginRight="x2" marginBottom="x1" alignItems="center">
-          {typeof label === 'string' ? (
-            <Text variant="p1" color="text">
-              {label}
-            </Text>
-          ) : (
-            label
-          )}
-        </Flex>
-      );
-    return null;
-  };
-
-  const renderContent1 = () => (
+  const BaseContent1 = (
     <>
       <Flex>
         <SvgIcon name="date" color={theme.colors.icon} />
@@ -95,20 +77,14 @@ const DatePeriodInput: FC<DatePeriodInputProps> = ({
         </Text>
       </Flex>
       {!disabled && allowClear && dates[0] && (
-        <AnimatedTouchableIcon
-          entering={FadeInRight}
-          exiting={FadeOutRight}
-          activeOpacity={1}
-          onPress={handleInputClear1}
-          style={styles.icon}
-        >
+        <Pressable activeOpacity={1} onPress={handleInputClear1} style={styles.icon}>
           <SvgIcon name="closecircleo" color={theme.colors.icon} />
-        </AnimatedTouchableIcon>
+        </Pressable>
       )}
     </>
   );
 
-  const renderContent2 = () => (
+  const BaseContent2 = (
     <>
       <Flex>
         <SvgIcon name="date" color={theme.colors.icon} />
@@ -117,38 +93,32 @@ const DatePeriodInput: FC<DatePeriodInputProps> = ({
         </Text>
       </Flex>
       {!disabled && allowClear && dates[1] && (
-        <AnimatedTouchableIcon
-          entering={FadeInRight}
-          exiting={FadeOutRight}
-          activeOpacity={1}
-          onPress={handleInputClear2}
-          style={styles.icon}
-        >
+        <Pressable activeOpacity={1} onPress={handleInputClear2} style={styles.icon}>
           <SvgIcon name="closecircleo" color={theme.colors.icon} />
-        </AnimatedTouchableIcon>
+        </Pressable>
       )}
     </>
   );
 
   const Content1 = disabled ? (
-    <Box style={styles.content}>{renderContent1()}</Box>
+    <Box style={styles.content}>{BaseContent1}</Box>
   ) : (
     <Pressable onPress={handleStartPress} activeOpacity={activeOpacity} style={styles.content}>
-      {renderContent1()}
+      {BaseContent1}
     </Pressable>
   );
 
   const Content2 = disabled ? (
-    <Box style={styles.content}>{renderContent2()}</Box>
+    <Box style={styles.content}>{BaseContent2}</Box>
   ) : (
     <Pressable onPress={handleEndPress} activeOpacity={activeOpacity} style={styles.content}>
-      {renderContent2()}
+      {BaseContent2}
     </Pressable>
   );
 
   return (
     <Box>
-      {renderLabel()}
+      <Label label={label} />
       <Flex
         justifyContent="space-between"
         alignItems="center"
@@ -182,3 +152,19 @@ const DatePeriodInput: FC<DatePeriodInputProps> = ({
 };
 
 export default DatePeriodInput;
+
+const Label = ({ label }: Pick<DatePeriodInputProps, 'label'>) => {
+  if (!!label)
+    return (
+      <Flex marginRight="x2" marginBottom="x1" alignItems="center">
+        {typeof label === 'string' ? (
+          <Text variant="p1" color="text">
+            {label}
+          </Text>
+        ) : (
+          label
+        )}
+      </Flex>
+    );
+  return null;
+};
diff --git a/packages/react-native-picker/src/date-picker-input/index.tsx b/packages/react-native-picker/src/date-picker-input/index.tsx
@@ -1,6 +1,5 @@
 import React, { forwardRef, ReactNode } from 'react';
 import { StyleProp, StyleSheet, ViewStyle } from 'react-native';
-import Animated, { FadeInRight, FadeOutRight } from 'react-native-reanimated';
 
 import { Box, Flex, helpers, Pressable, SvgIcon, Text, useTheme } from '@td-design/react-native';
 
@@ -30,7 +29,6 @@ export interface DatePickerInputProps extends DatePickerPropsBase, Omit<ModalPic
   style?: StyleProp<ViewStyle>;
 }
 
-const AnimatedTouchableIcon = Animated.createAnimatedComponent(Pressable);
 const { ONE_PIXEL } = helpers;
 
 /** 适用于筛选条件下的日期选择 */
@@ -78,61 +76,51 @@ const DatePickerInput = forwardRef<PickerRef, DatePickerInputProps>(
       icon: { alignItems: 'flex-end' },
     });
 
-    const renderContent = () => {
-      if (!disabled)
-        return (
-          <Pressable
-            onPress={handlePress}
-            activeOpacity={activeOpacity}
-            style={[styles.content, style, labelPosition === 'top' ? styles.top : styles.left]}
-          >
-            <Flex flex={1}>
-              <SvgIcon name="date" color={theme.colors.icon} />
-              <Text variant="p1" color={'text'} marginLeft="x2">
-                {currentText}
-              </Text>
-            </Flex>
-            <Flex>
-              {allowClear && !!currentText && currentText !== placeholder && (
-                <AnimatedTouchableIcon
-                  entering={FadeInRight}
-                  exiting={FadeOutRight}
-                  activeOpacity={1}
-                  onPress={handleInputClear}
-                  style={styles.icon}
-                >
-                  <SvgIcon name="closecircleo" color={theme.colors.icon} />
-                </AnimatedTouchableIcon>
-              )}
-              <SvgIcon name="right" color={theme.colors.icon} />
-            </Flex>
-          </Pressable>
-        );
-      return (
-        <Box style={[styles.content, style, labelPosition === 'top' ? styles.top : styles.left]}>
-          <Flex flex={1}>
-            <SvgIcon name="date" color={theme.colors.icon} />
-            <Text variant="p1" color={'disabled'} marginLeft="x2">
-              {currentText}
-            </Text>
-          </Flex>
-        </Box>
-      );
-    };
+    const Content = !disabled ? (
+      <Pressable
+        onPress={handlePress}
+        activeOpacity={activeOpacity}
+        style={[styles.content, style, labelPosition === 'top' ? styles.top : styles.left]}
+      >
+        <Flex flex={1}>
+          <SvgIcon name="date" color={theme.colors.icon} />
+          <Text variant="p1" color={'text'} marginLeft="x2">
+            {currentText}
+          </Text>
+        </Flex>
+        <Flex>
+          {allowClear && !!currentText && currentText !== placeholder && (
+            <Pressable activeOpacity={1} onPress={handleInputClear} style={styles.icon}>
+              <SvgIcon name="closecircleo" color={theme.colors.icon} />
+            </Pressable>
+          )}
+          <SvgIcon name="right" color={theme.colors.icon} />
+        </Flex>
+      </Pressable>
+    ) : (
+      <Box style={[styles.content, style, labelPosition === 'top' ? styles.top : styles.left]}>
+        <Flex flex={1}>
+          <SvgIcon name="date" color={theme.colors.icon} />
+          <Text variant="p1" color={'disabled'} marginLeft="x2">
+            {currentText}
+          </Text>
+        </Flex>
+      </Box>
+    );
 
     return (
       <>
         {labelPosition === 'top' ? (
           <Box>
             <Label {...{ label, required }} />
-            {renderContent()}
+            {Content}
             <Brief brief={brief} />
           </Box>
         ) : (
           <Box>
             <Flex>
               <Label {...{ label, required }} />
-              {renderContent()}
+              {Content}
             </Flex>
             <Brief brief={brief} />
           </Box>