fix: forward refs

web-ridge · Jul 23, 2022 · 3e0f7a9 · 3e0f7a9
1 parent c5e9ecb
commit 3e0f7a9
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 5 deletions.
diff --git a/src/AutocompleteFlatList.tsx b/src/AutocompleteFlatList.tsx
@@ -6,7 +6,7 @@ import { useScrollableProps } from './shared';
 
 function AutocompleteFlatList<T>(rest: FlatListProps<T>, ref: any) {
   const { scrollableRef, scrollX, scrollY, scrollableProps } =
-    useScrollableProps(rest);
+    useScrollableProps(rest, ref);
   const Flat = Animated.FlatList as any;
   return (
     <AutocompleteContext.Provider value={{ scrollableRef, scrollX, scrollY }}>

diff --git a/src/AutocompleteScrollView.tsx b/src/AutocompleteScrollView.tsx
@@ -6,7 +6,7 @@ import { useScrollableProps } from './shared';
 
 function AutocompleteScrollView(rest: ScrollViewProps, ref: any) {
   const { scrollableRef, scrollX, scrollY, scrollableProps } =
-    useScrollableProps(rest);
+    useScrollableProps(rest, ref);
   return (
     <AutocompleteContext.Provider value={{ scrollableRef, scrollX, scrollY }}>
       <Animated.ScrollView ref={ref} {...rest} {...scrollableProps} />

diff --git a/src/createAutocompleteScrollable.tsx b/src/createAutocompleteScrollable.tsx
@@ -7,7 +7,7 @@ export default function createAutocompleteScrollable<
 >(WrappedComponent: T): React.ComponentType<T> {
   return React.forwardRef(function (rest, ref) {
     const { scrollableRef, scrollX, scrollY, scrollableProps } =
-      useScrollableProps(rest);
+      useScrollableProps(rest, ref);
     const WW = WrappedComponent as any;
     return (
       <AutocompleteContext.Provider value={{ scrollableRef, scrollX, scrollY }}>

diff --git a/src/mergeRefs.tsx b/src/mergeRefs.tsx
@@ -0,0 +1,15 @@
+import type * as React from 'react';
+
+export function mergeRefs<T = any>(
+  refs: Array<React.MutableRefObject<T> | React.LegacyRef<T>>
+): React.RefCallback<T> {
+  return (value) => {
+    refs.forEach((ref) => {
+      if (typeof ref === 'function') {
+        ref(value);
+      } else if (ref != null) {
+        (ref as React.MutableRefObject<T | null>).current = value;
+      }
+    });
+  };
+}
diff --git a/src/shared.tsx b/src/shared.tsx
@@ -8,6 +8,7 @@ import type {
   NativeSyntheticEvent,
   ScrollViewProps,
 } from 'react-native';
+import { mergeRefs } from './mergeRefs';
 
 export type AutocompleteScrollableProps = {
   ref?: any;
@@ -23,7 +24,7 @@ export type AutocompleteScrollableProps = {
     | undefined;
 };
 
-export function useScrollableProps(props: ScrollViewProps) {
+export function useScrollableProps(props: ScrollViewProps, ref: any) {
   const scrollableRef = useAnimatedRef<any>();
   const scrollX = useSharedValue(0);
   const scrollY = useSharedValue(0);
@@ -34,7 +35,7 @@ export function useScrollableProps(props: ScrollViewProps) {
     props?.onScroll?.(e as any);
   });
   const scrollableProps: AutocompleteScrollableProps = {
-    ref: scrollableRef,
+    ref: mergeRefs([scrollableRef, ref]),
     scrollEventThrottle: 16,
     keyboardShouldPersistTaps: 'handled',
     onScroll: scrollHandler,