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

feat: 优化多个组件

.changeset/eleven-grapes-do.md

@@ -0,0 +1,5 @@
+---
+'@td-design/react-native-picker': minor
+---
+
+fix: 优化代码

.changeset/famous-yaks-wash.md

@@ -0,0 +1,5 @@
+---
+'@td-design/react-native-rating': patch
+---
+
+fix: 优化useEffect的依赖项

.changeset/healthy-spoons-trade.md

@@ -0,0 +1,5 @@
+---
+'@td-design/react-native': minor
+---
+
+refactor: 优化多个组件

.changeset/hungry-tools-shop.md

@@ -0,0 +1,7 @@
+---
+'@td-design/react-native-picker': patch
+'@td-design/react-native-rating': patch
+'@td-design/rn-hooks': patch
+---
+
+refactor: 优化代码性能

.changeset/proud-ads-pay.md

@@ -0,0 +1,5 @@
+---
+'@td-design/react-native': minor
+---
+
+refactor: 优化代码性能

.changeset/silver-eggs-press.md

@@ -0,0 +1,5 @@
+---
+'@td-design/rn-hooks': patch
+---
+
+fix: 修复useCounter的bug

packages/hooks/src/useCounter/index.ts

@@ -1,8 +1,7 @@
-import { useState } from 'react';
+import { useEffect } from 'react';
 
 import useMemoizedFn from '../useMemoizedFn';
-
-// import useMemoizedFn from '../useMemoizedFn';
+import useSafeState from '../useSafeState';
 
 type Options = { min?: number; max?: number };
 export type ValueParam = number | ((c: number) => number);
@@ -14,7 +13,11 @@ export type ValueParam = number | ((c: number) => number);
  * @returns
  */
 export default function useCounter(initialValue = 0, options: Options = {}) {
-  const [current, setCurrent] = useState(() => getTargetValue(initialValue, options));
+  const [current, setCurrent] = useSafeState(0);
+
+  useEffect(() => {
+    setCurrent(getTargetValue(initialValue, options));
+  }, [initialValue, options]);
 
   const setValue = (value: ValueParam) => {
     setCurrent(c => {

packages/react-native-picker/src/date-picker/index.tsx

@@ -68,7 +68,7 @@ const DatePicker = forwardRef<DatePickerRef, DatePickerProps>((props, ref) => {
 
   if (displayType === 'modal') {
     return (
-      <Modal visible={visible} onClose={handleClose} animationDuration={0}>
+      <Modal position="bottom" animationType="slide" visible={visible} onClose={handleClose}>
         <Flex
           borderBottomWidth={ONE_PIXEL}
           borderBottomColor="border"

packages/react-native-picker/src/picker/components/Cascade/index.tsx

@@ -53,7 +53,7 @@ function Cascader<T>({
 
   if (displayType === 'modal') {
     return (
-      <Modal visible={visible} onClose={onClose} animationDuration={0}>
+      <Modal position="bottom" animationType="slide" visible={visible} onClose={onClose}>
         <Flex
           borderBottomWidth={ONE_PIXEL}
           borderBottomColor="border"

packages/react-native-picker/src/picker/components/Normal/index.tsx

@@ -47,7 +47,7 @@ function NormalPicker<T>(props: NormalPickerProps<T>) {
 
   if (displayType === 'modal') {
     return (
-      <Modal visible={visible} onClose={handleClose} animationDuration={0}>
+      <Modal position="bottom" animationType="slide" visible={visible} onClose={handleClose}>
         {
           <Flex
             height={px(50)}

packages/react-native-picker/src/useDatePicker.ts

@@ -25,9 +25,10 @@ export default function useDatePicker({
   ref: ForwardedRef<PickerRef>;
 }) {
   const [date, setDate] = useSafeState(value);
-  const [currentText, setCurrentText] = useSafeState(getText(value, format, placeholder));
   const [visible, { setTrue, setFalse }] = useBoolean(false);
 
+  const currentText = getText(date, format, placeholder);
+
   useImperativeHandle(ref, () => {
     return {
       focus: () => {
@@ -38,8 +39,6 @@ export default function useDatePicker({
 
   useEffect(() => {
     setDate(value ?? new Date());
-    const text = getText(value, format, placeholder);
-    setCurrentText(text);
   }, [value]);
 
   const handlePress = () => {
@@ -48,13 +47,11 @@ export default function useDatePicker({
   };
 
   const handleChange = (date?: Date, formatDate?: string) => {
-    setCurrentText(formatDate ?? '');
     setDate(date);
     onChange?.(date, formatDate);
   };
 
   const handleInputClear = () => {
-    setCurrentText(placeholder);
     setDate(undefined);
     onChange?.(undefined);
   };

packages/react-native-picker/src/usePicker.ts

@@ -35,9 +35,10 @@ export default function usePicker<T>({
   ref: ForwardedRef<PickerRef>;
 }) {
   const [state, setState] = useSafeState<T[] | T | undefined>(value);
-  const [currentText, setCurrentText] = useSafeState(getText(data, value, cascade, placeholder, hyphen));
   const [visible, { setTrue, setFalse }] = useBoolean(false);
 
+  const currentText = getText(data, state, cascade, placeholder, hyphen);
+
   useImperativeHandle(ref, () => {
     return {
       focus: () => {
@@ -47,8 +48,6 @@ export default function usePicker<T>({
   });
 
   useEffect(() => {
-    const text = getText(data, value, cascade, placeholder, hyphen);
-    setCurrentText(text);
     setState(value);
   }, [value]);
 
@@ -58,8 +57,6 @@ export default function usePicker<T>({
   };
 
   const handleChange = (value?: T[] | T) => {
-    const text = getText(data, value, cascade, placeholder, hyphen);
-    setCurrentText(text);
     setState(value);
 
     if (cascade) {
@@ -70,7 +67,6 @@ export default function usePicker<T>({
   };
 
   const handleInputClear = () => {
-    setCurrentText(placeholder);
     setState(undefined);
     onChange?.(undefined);
   };
@@ -81,7 +77,7 @@ export default function usePicker<T>({
     visible,
     setFalse,
     handlePress: useMemoizedFn(handlePress),
-    handleChange: useMemoizedFn(handleChange),
+    handleChange: useMemoizedFn(handleChange as (value?: T extends (infer U)[] ? U[] : T) => void),
     handleInputClear: useMemoizedFn(handleInputClear),
   };
 }

packages/react-native-rating/src/useSwipeRating.ts

@@ -20,7 +20,7 @@ export default function useSwipeRating({
 
   useEffect(() => {
     translateX.value = rating * size;
-  }, [rating, size, translateX]);
+  }, [rating, size]);
 
   const handler = useAnimatedGestureHandler({
     onStart(_, ctx: Record<string, number>) {

packages/react-native/src/action-sheet/index.tsx

@@ -9,6 +9,7 @@ import Modal from '../modal';
 import Pressable from '../pressable';
 import Text from '../text';
 import { Theme } from '../theme';
+import WhiteSpace from '../white-space';
 import ActionSheetItem, { ActionSheetItemProps } from './ActionSheetItem';
 
 const { ONE_PIXEL } = helpers;
@@ -47,6 +48,7 @@ const ActionSheet: FC<ActionSheetProps> = ({
       borderTopColor: theme.colors.border,
     },
     cancel: {
+      borderTopWidth: 0,
       borderBottomLeftRadius: theme.borderRadii.x2,
       borderBottomRightRadius: theme.borderRadii.x2,
     },
@@ -70,7 +72,7 @@ const ActionSheet: FC<ActionSheetProps> = ({
   return (
     <Modal
       position="bottom"
-      animationType="slide-up"
+      animationType="slide"
       visible={visible}
       onClose={onCancel}
       maskClosable={false}
@@ -86,6 +88,7 @@ const ActionSheet: FC<ActionSheetProps> = ({
           activeOpacity={activeOpacity}
         />
       ))}
+      <WhiteSpace size="x2" backgroundColor={theme.colors.gray50} />
       <Pressable activeOpacity={activeOpacity} onPress={onCancel} style={[styles.action, styles.cancel]}>
         <Text variant="p0" color="text">
           {cancelText}

packages/react-native/src/box-shadow/index.tsx

@@ -1,7 +1,17 @@
 import React, { FC } from 'react';
-import { Shadow, ShadowProps } from 'react-native-shadow-2';
 
-const BoxShadow: FC<ShadowProps> = props => {
+let Shadow: any;
+let ShadowProps: any;
+
+try {
+  ({ Shadow, ShadowProps } = require('react-native-shadow-2'));
+} catch (error) {
+  throw new Error(
+    'The dependency "react-native-shadow-2" is not installed. Please install it to use the BoxShadow component.'
+  );
+}
+
+const BoxShadow: FC<typeof ShadowProps> = props => {
   return <Shadow {...props} />;
 };
 BoxShadow.displayName = 'BoxShadow';

packages/react-native/src/checkbox/useCheckbox.ts

@@ -43,8 +43,11 @@ export default function useCheckbox(
           status: 'unchecked',
         };
       });
-      setTransformedOptions(newOptions);
-      onChange?.([]);
+      if (onChange) {
+        onChange([]);
+      } else {
+        setTransformedOptions(newOptions);
+      }
     } else {
       const newOptions: TransformedOption[] = transformedOptions.map(option => {
         const disabled = !!disabledValue?.includes(option.value);
@@ -54,9 +57,12 @@ export default function useCheckbox(
           status: !disabled ? 'checked' : 'unchecked',
         };
       });
-      setTransformedOptions(newOptions);
-      const values = newOptions.filter(item => !disabledValue?.includes(item.value)).map(option => option.value);
-      onChange?.(values);
+      if (onChange) {
+        const values = newOptions.filter(item => !disabledValue?.includes(item.value)).map(option => option.value);
+        onChange(values);
+      } else {
+        setTransformedOptions(newOptions);
+      }
     }
   };
 
@@ -71,8 +77,12 @@ export default function useCheckbox(
       }
       return item;
     });
-    setTransformedOptions(newOptions);
-    onChange?.(newOptions.filter(item => item.status === 'checked').map(item => item.value));
+    if (onChange) {
+      const values = newOptions.filter(item => item.status === 'checked').map(item => item.value);
+      onChange(values);
+    } else {
+      setTransformedOptions(newOptions);
+    }
   };
 
   return {

packages/react-native/src/count-down/CountDownItem.tsx

@@ -65,7 +65,7 @@ const CountDownItem = forwardRef<TextInput, CountDownItemProps>(
         {...restProps}
         placeholder={placeholder}
         keyboardType="number-pad"
-        extra={
+        right={
           <Pressable
             style={[styles.input, codeType === 'border' && styles.border]}
             disabled={disabled}

packages/react-native/src/count-down/index.tsx

@@ -65,7 +65,7 @@ const CountDown = forwardRef<TextInput, CountDownProps>(
         placeholder={placeholder}
         {...restProps}
         keyboardType="number-pad"
-        rightIcon={
+        right={
           <Pressable
             style={[styles.input, codeType === 'border' && styles.border]}
             disabled={disabled}

packages/react-native/src/form/FormItem.tsx

@@ -55,15 +55,16 @@ const FormItem: FC<FormItemProps> = ({ children, noStyle = false, name, ...field
   if (noStyle) return Content;
 
   return (
-    <Box
-      minHeight={formItemHeight}
-      justifyContent={'center'}
-      borderBottomColor={errors.length > 0 ? 'func600' : 'border'}
-      borderBottomWidth={bordered ? ONE_PIXEL : 0}
-      paddingHorizontal={'x2'}
-    >
-      {Content}
-    </Box>
+    <>
+      <Box paddingHorizontal={'x2'} minHeight={formItemHeight} justifyContent={'center'}>
+        {Content}
+      </Box>
+      <Box
+        width={'100%'}
+        height={bordered ? ONE_PIXEL : 0}
+        backgroundColor={errors.length > 0 ? 'func600' : 'border'}
+      />
+    </>
   );
 };
 FormItem.displayName = 'FormItem';

packages/react-native/src/form/FormListItem.tsx

@@ -1,19 +1,14 @@
 import React, { FC, useContext, useRef } from 'react';
 
-import { useTheme } from '@shopify/restyle';
 import { useMemoizedFn, useSafeState } from '@td-design/rn-hooks';
 import { Field, FieldContext } from 'rc-field-form';
 import { Meta } from 'rc-field-form/es/interface';
 
-import helpers from '../helpers';
 import ListItem from '../list-item';
 import Text from '../text';
-import { Theme } from '../theme';
 import { FormContext } from './context';
 import { FormListItemProps } from './type';
 
-const { ONE_PIXEL } = helpers;
-
 const FormListItem: FC<FormListItemProps> = ({
   children,
   label,
@@ -27,7 +22,6 @@ const FormListItem: FC<FormListItemProps> = ({
   noStyle = false,
   ...fieldProps
 }) => {
-  const theme = useTheme<Theme>();
   const ref = useRef<{ focus: () => void }>(null);
   const fieldContext = useContext(FieldContext);
   const [errors, setErrors] = useSafeState<string[]>([]);
@@ -76,19 +70,9 @@ const FormListItem: FC<FormListItemProps> = ({
           })}
         </Field>
       }
-      style={[
-        {
-          minHeight: formItemHeight,
-          borderBottomWidth: bordered ? ONE_PIXEL : 0,
-        },
-        errors.length > 0
-          ? {
-              borderBottomColor: theme.colors.func600,
-              borderBottomWidth: 1,
-            }
-          : {},
-        style,
-      ]}
+      style={{ minHeight: formItemHeight, paddingHorizontal: 0 }}
+      bordered={bordered}
+      borderColor={errors.length > 0 ? 'func600' : 'border'}
     />
   );
 };