fix: 修复picker组件在安卓设备使用物理返回键时的bug

Author: chj-damon

.changeset/quick-bottles-fly.md

@@ -0,0 +1,5 @@
+---
+'@td-design/react-native-picker': minor
+---
+
+fix: 修复picker组件在安卓设备使用物理返回键时的bug

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

@@ -171,5 +171,5 @@ const snapPoint = (value: number, velocity: number, points: ReadonlyArray<number
   const point = value + 0.2 * velocity;
   const deltas = points.map(p => Math.abs(point - p));
   const minDelta = Math.min.apply(null, deltas);
-  return points.filter(p => Math.abs(point - p) === minDelta)[0];
+  return points.find(p => Math.abs(point - p) === minDelta) || points[0];
 };

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

@@ -39,7 +39,6 @@ const DatePicker = forwardRef<DatePickerRef, DatePickerProps>((props, ref) => {
     onChange,
     value,
     displayType,
-    visible,
     format,
   });
 

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

@@ -1,5 +1,4 @@
 import { useEffect } from 'react';
-import { BackHandler } from 'react-native';
 
 import { useMemoizedFn, useSafeState } from '@td-design/rn-hooks';
 import dayjs from 'dayjs';
@@ -11,7 +10,6 @@ export default function useDatePicker({
   onChange,
   value,
   displayType,
-  visible,
   format,
 }: DatePickerPropsBase & ModalPickerProps) {
   const [date, setDate] = useSafeState<Date | undefined>(value ?? new Date());
@@ -20,12 +18,6 @@ export default function useDatePicker({
     setDate(value ?? new Date());
   }, [value]);
 
-  /** 绑定物理返回键监听事件，如果当前picker是打开的，返回键作用是关闭picker，否则返回上一个界面 */
-  useEffect(() => {
-    const sub = BackHandler.addEventListener('hardwareBackPress', () => visible);
-    return () => sub.remove();
-  }, [visible]);
-
   const handleChange = (date?: Date) => {
     setDate(date);
     if (displayType === 'view') {

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

@@ -28,7 +28,6 @@ function Cascader<T>({
     data,
     cols,
     value,
-    visible,
     onChange,
     onClose,
   });

packages/react-native-picker/src/picker/components/Cascade/useCascader.ts

@@ -1,5 +1,4 @@
 import { useEffect, useMemo } from 'react';
-import { BackHandler } from 'react-native';
 
 import { useMemoizedFn, useSafeState } from '@td-design/rn-hooks';
 import arrayTreeFilter from 'array-tree-filter';
@@ -13,18 +12,9 @@ export default function useCascader<T>({
   value,
   onChange,
   onClose,
-  visible,
 }: Pick<CascaderProps<T>, 'data' | 'cols' | 'value' | 'onChange' | 'onClose' | 'visible'>) {
   const [stateValue, setStateValue] = useSafeState<T[]>([]);
 
-  useEffect(() => {
-    const listener = BackHandler.addEventListener('hardwareBackPress', () => visible);
-
-    return () => {
-      listener.remove();
-    };
-  }, []);
-
   useEffect(() => {
     const nextValue = generateNextValue(data, value, cols);
     setStateValue(nextValue);

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

@@ -30,7 +30,6 @@ function NormalPicker<T>(props: NormalPickerProps<T>) {
     initialValue,
     onChange,
     onClose,
-    visible,
     displayType,
   });
 

packages/react-native-picker/src/picker/components/Normal/useNormalPicker.ts

@@ -1,5 +1,4 @@
 import { useEffect } from 'react';
-import { BackHandler } from 'react-native';
 
 import { useMemoizedFn, useSafeState } from '@td-design/rn-hooks';
 
@@ -11,7 +10,6 @@ export default function useNormalPicker<T>({
   initialValue,
   onChange,
   onClose,
-  visible,
   displayType,
 }: Omit<NormalPickerProps<T>, 'data'> & { initialValue?: T }) {
   const [selectedValue, selectValue] = useSafeState<T | undefined>();
@@ -20,12 +18,6 @@ export default function useNormalPicker<T>({
     selectValue(value || initialValue);
   }, [value, initialValue]);
 
-  /** 绑定物理返回键监听事件，如果当前picker是打开的，返回键作用是关闭picker，否则返回上一个界面 */
-  useEffect(() => {
-    const sub = BackHandler.addEventListener('hardwareBackPress', () => visible);
-    return () => sub.remove();
-  }, [visible]);
-
   const handleChange = (val: PickerData<T>) => {
     if (displayType === 'view') {
       onChange?.(val.value);