Merge pull request #890 from thundersdata-frontend/rn-issue

删除 `react-native-redash`依赖
thundersdata-frontend · Aug 16, 2024 · 3c9ac28 · 3c9ac28
2 parents 5ca0d95 + fa5f995
commit 3c9ac28
Show file tree

Hide file tree

Showing 20 changed files with 105 additions and 62 deletions.
diff --git a/.changeset/silver-queens-deny.md b/.changeset/silver-queens-deny.md
@@ -0,0 +1,9 @@
+---
+'@td-design/react-native-calendar': patch
+'@td-design/react-native-picker': patch
+'@td-design/react-native-rating': patch
+'@td-design/react-native': patch
+---
+
+删除 `react-native-redash`依赖
+优化`react-native-picker` 的`onChange`事件的参数类型问题
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,5 +1,13 @@
 {
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
-  "eslint.validate": ["javascript", "typescript", "json", "md"]
+  "eslint.validate": [
+    "javascript",
+    "typescript",
+    "json",
+    "md"
+  ],
+  "cSpell.words": [
+    "dayjs"
+  ]
 }
diff --git a/packages/react-native-calendar/package.json b/packages/react-native-calendar/package.json
@@ -37,7 +37,6 @@
     "react-native-builder-bob": "^0.21.3",
     "react-native-gesture-handler": "^2.12.0",
     "react-native-reanimated": "^3.3.0",
-    "react-native-redash": "^18.1.0",
     "react-native-svg": "^13.10.0",
     "typescript": "^5.1.6"
   },

diff --git a/packages/react-native-calendar/src/components/Agenda/useAgenda.ts b/packages/react-native-calendar/src/components/Agenda/useAgenda.ts
@@ -1,6 +1,5 @@
 import { useMemo } from 'react';
 import { useAnimatedStyle, useDerivedValue, useSharedValue, withTiming } from 'react-native-reanimated';
-import { mix } from 'react-native-redash';
 
 import { helpers } from '@td-design/react-native';
 import { useMemoizedFn, useSafeState } from '@td-design/rn-hooks';
@@ -37,3 +36,8 @@ export default function useAgenda<ItemT extends Item>({ firstDay }: Pick<AgendaP
 
   return { contentStyle, iconWrapStyle, expanded, handleMonthChange: useMemoizedFn(handleMonthChange) };
 }
+
+const mix = (value: number, x: number, y: number) => {
+  'worklet';
+  return x * (1 - value) + y * value;
+};
diff --git a/packages/react-native-picker/src/picker/type.ts b/packages/react-native-picker/src/picker/type.ts
@@ -8,7 +8,7 @@ export interface PickerProps<T> extends WheelPickerPropsBase {
   /** 展示几列 */
   cols?: number;
   value?: T[] | T;
-  onChange?: ((value?: T) => void) | ((value?: T[]) => void);
+  onChange?: (value?: T extends (infer U)[] ? U[] : T) => void;
 }
 
 /** 弹窗Picker的属性 */
@@ -29,10 +29,6 @@ export interface ModalPickerProps {
   activeOpacity?: number;
 }
 
-export type PickerRefProps<T> = {
-  getValue: () => { value: T[] };
-};
-
 export type CascaderProps<T> = Omit<PickerProps<T>, 'cascade' | 'value' | 'onChange'> & {
   /** 当前值 */
   value?: T[];

diff --git a/packages/react-native-picker/src/utils.ts b/packages/react-native-picker/src/utils.ts
@@ -31,20 +31,20 @@ export function transformValueToLabel<T>(
 function findByValue<T>(data: CascadePickerItemProps<T>[], value: T): CascadePickerItemProps<T> | undefined {
   let selectedItem: CascadePickerItemProps<T> | undefined = undefined;
 
-  function recurision(list: CascadePickerItemProps<T>[], value: T) {
+  function recursion(list: CascadePickerItemProps<T>[], value: T) {
     if (!list) return;
     for (let i = 0; i < list.length; i++) {
       if (list[i].value === value) {
         selectedItem = list[i];
         break;
       }
       if (list[i].children) {
-        recurision(list[i].children!, value);
+        recursion(list[i].children!, value);
       }
     }
   }
 
-  recurision(data, value);
+  recursion(data, value);
 
   return selectedItem;
 }
diff --git a/packages/react-native-rating/package.json b/packages/react-native-rating/package.json
@@ -33,7 +33,6 @@
     "react-native-builder-bob": "^0.21.3",
     "react-native-gesture-handler": "^2.12.0",
     "react-native-reanimated": "^3.3.0",
-    "react-native-redash": "^18.1.0",
     "react-native-svg": "^13.10.0",
     "typescript": "^5.1.6"
   },

diff --git a/packages/react-native-rating/src/components/Star.tsx b/packages/react-native-rating/src/components/Star.tsx
@@ -4,7 +4,6 @@
 import React, { FC } from 'react';
 import { StyleSheet } from 'react-native';
 import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withSequence, withTiming } from 'react-native-reanimated';
-import { mix } from 'react-native-redash';
 
 import { Pressable, Theme, useTheme } from '@td-design/react-native';
 
@@ -65,3 +64,8 @@ const Star: FC<StarProps> = ({
 };
 
 export default Star;
+
+const mix = (value: number, x: number, y: number) => {
+  'worklet';
+  return x * (1 - value) + y * value;
+};
diff --git a/packages/react-native/package.json b/packages/react-native/package.json
@@ -32,7 +32,6 @@
     "react-native-builder-bob": "^0.21.3",
     "react-native-gesture-handler": "^2.12.0",
     "react-native-reanimated": "^3.3.0",
-    "react-native-redash": "^18.1.0",
     "react-native-safe-area-context": "^4.7.1",
     "react-native-svg": "^13.10.0",
     "typescript": "^5.1.6"
@@ -54,4 +53,4 @@
       ]
     ]
   }
-}
+}
diff --git a/packages/react-native/src/carousel/Bullets.tsx b/packages/react-native/src/carousel/Bullets.tsx
@@ -1,12 +1,12 @@
 import React, { memo } from 'react';
 import { StyleSheet } from 'react-native';
 import Animated from 'react-native-reanimated';
-import { mix, mixColor } from 'react-native-redash';
 
 import { useTheme } from '@shopify/restyle';
 
 import Box from '../box';
 import { Theme } from '../theme';
+import { mix, mixColor } from '../utils/redash';
 import { CarouselProps } from './type';
 
 const justifyContentMap = {

diff --git a/packages/react-native/src/menu/Chevron.tsx b/packages/react-native/src/menu/Chevron.tsx
@@ -1,11 +1,11 @@
 import React, { FC, memo } from 'react';
 import Animated, { useAnimatedStyle } from 'react-native-reanimated';
-import { mix } from 'react-native-redash';
 
 import { useTheme } from '@shopify/restyle';
 
 import SvgIcon from '../svg-icon';
 import { Theme } from '../theme';
+import { mix } from '../utils/redash';
 
 const Chevron: FC<{ progress: Animated.SharedValue<number> }> = ({ progress }) => {
   const theme = useTheme<Theme>();

diff --git a/packages/react-native/src/progress/CircleProgress.tsx b/packages/react-native/src/progress/CircleProgress.tsx
@@ -1,14 +1,14 @@
 import React, { FC } from 'react';
 import { StyleSheet } from 'react-native';
 import Animated from 'react-native-reanimated';
-import { ReText } from 'react-native-redash';
 import Svg, { Circle, Defs, G, LinearGradient, Stop } from 'react-native-svg';
 
 import { useTheme } from '@shopify/restyle';
 
 import Box from '../box';
 import helpers from '../helpers';
 import Text from '../text';
+import ReText from '../text/ReText';
 import { Theme } from '../theme';
 import { ProgressProps } from './type';
 import useCircleProgress from './useCircleProgress';

diff --git a/packages/react-native/src/progress/LineProgress.tsx b/packages/react-native/src/progress/LineProgress.tsx
@@ -1,6 +1,5 @@
 import React, { FC } from 'react';
 import Animated from 'react-native-reanimated';
-import { ReText } from 'react-native-redash';
 import Svg, { Defs, Line, LinearGradient, Stop } from 'react-native-svg';
 
 import { useTheme } from '@shopify/restyle';
@@ -9,6 +8,7 @@ import Box from '../box';
 import Flex from '../flex';
 import helpers from '../helpers';
 import Text from '../text';
+import ReText from '../text/ReText';
 import { Theme } from '../theme';
 import { ProgressProps } from './type';
 import useLineProgress from './useLineProgress';

diff --git a/packages/react-native/src/slider/index.tsx b/packages/react-native/src/slider/index.tsx
@@ -2,13 +2,13 @@ import React, { FC } from 'react';
 import { StyleSheet, TextStyle } from 'react-native';
 import { PanGestureHandler } from 'react-native-gesture-handler';
 import Animated from 'react-native-reanimated';
-import { ReText } from 'react-native-redash';
 
 import { useTheme } from '@shopify/restyle';
 
 import Box from '../box';
 import Flex from '../flex';
 import helpers from '../helpers';
+import ReText from '../text/ReText';
 import { Theme } from '../theme';
 import useSlider from './useSlider';
 

diff --git a/packages/react-native/src/slider/useSlider.ts b/packages/react-native/src/slider/useSlider.ts
@@ -6,9 +6,9 @@ import {
   useDerivedValue,
   useSharedValue,
 } from 'react-native-reanimated';
-import { clamp } from 'react-native-redash';
 
 import type { SliderProps } from '.';
+import { clamp } from '../utils/redash';
 
 export default function useSlider({
   min = 0,

diff --git a/packages/react-native/src/switch/index.tsx b/packages/react-native/src/switch/index.tsx
@@ -1,14 +1,14 @@
 import React, { forwardRef, useMemo } from 'react';
 import { StyleSheet, TouchableWithoutFeedback } from 'react-native';
 import Animated, { useAnimatedStyle } from 'react-native-reanimated';
-import { mix, mixColor } from 'react-native-redash';
 
 import { useTheme } from '@shopify/restyle';
 
 import Box from '../box';
 import helpers from '../helpers';
 import Text from '../text';
 import { Theme } from '../theme';
+import { mix, mixColor } from '../utils/redash';
 import useSwitch from './useSwitch';
 
 const { px } = helpers;

diff --git a/packages/react-native/src/text/ReText.tsx b/packages/react-native/src/text/ReText.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import type { TextProps as RNTextProps, TextInputProps } from 'react-native';
+import { StyleSheet, TextInput } from 'react-native';
+import Animated, { useAnimatedProps } from 'react-native-reanimated';
+
+const styles = StyleSheet.create({
+  baseStyle: {
+    color: 'black',
+  },
+});
+Animated.addWhitelistedNativeProps({ text: true });
+
+interface TextProps extends Omit<TextInputProps, 'value' | 'style'> {
+  text: Animated.SharedValue<string>;
+  style?: Animated.AnimateProps<RNTextProps>['style'];
+}
+
+const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
+
+const ReText = (props: TextProps) => {
+  const { style, text, ...rest } = props;
+  const animatedProps = useAnimatedProps(() => {
+    return {
+      text: text.value,
+      // Here we use any because the text prop is not available in the type
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } as any;
+  });
+  return (
+    <AnimatedTextInput
+      underlineColorAndroid="transparent"
+      editable={false}
+      value={text.value}
+      style={[styles.baseStyle, style || undefined]}
+      {...rest}
+      {...{ animatedProps }}
+    />
+  );
+};
+
+export default ReText;
diff --git a/packages/react-native/src/tree/Chevron.tsx b/packages/react-native/src/tree/Chevron.tsx
@@ -1,11 +1,11 @@
 import React, { FC, memo } from 'react';
 import Animated, { useAnimatedStyle } from 'react-native-reanimated';
-import { mix } from 'react-native-redash';
 
 import { useTheme } from '@shopify/restyle';
 
 import SvgIcon from '../svg-icon';
 import { Theme } from '../theme';
+import { mix } from '../utils/redash';
 
 const Chevron: FC<{ progress: Animated.SharedValue<number> }> = ({ progress }) => {
   const theme = useTheme<Theme>();

diff --git a/packages/react-native/src/utils/redash.ts b/packages/react-native/src/utils/redash.ts
@@ -0,0 +1,23 @@
+import { interpolateColor } from 'react-native-reanimated';
+
+export const mix = (value: number, x: number, y: number) => {
+  'worklet';
+  return x * (1 - value) + y * value;
+};
+
+type AnimatedColor = string | number;
+
+export const mixColor = (
+  value: number,
+  color1: AnimatedColor,
+  color2: AnimatedColor,
+  colorSpace: 'RGB' | 'HSV' = 'RGB'
+) => {
+  'worklet';
+  return interpolateColor(value, [0, 1], [color1, color2], colorSpace);
+};
+
+export const clamp = (value: number, lowerBound: number, upperBound: number) => {
+  'worklet';
+  return Math.min(Math.max(lowerBound, value), upperBound);
+};