From 7552f06c0659dfcfa94a84cf4ba968838dff0143 Mon Sep 17 00:00:00 2001
From: Laurence Bortfeld <472753+mrlaessig@users.noreply.github.com>
Date: Sat, 16 Nov 2024 22:20:28 +0100
Subject: [PATCH] feat: refactor logic into component wrappers

---
 __tests__/AutocompleteInput.spec.tsx |  7 ++++
 index.tsx                            | 55 ++++++++++++++++------------
 2 files changed, 38 insertions(+), 24 deletions(-)

diff --git a/__tests__/AutocompleteInput.spec.tsx b/__tests__/AutocompleteInput.spec.tsx
index 546b8c4..f88fc34 100644
--- a/__tests__/AutocompleteInput.spec.tsx
+++ b/__tests__/AutocompleteInput.spec.tsx
@@ -96,6 +96,13 @@ describe('<AutocompleteInput />', () => {
     expect(ref!.current?.constructor.name).toBe('TextInput');
   });
 
+  it('should hide suggestion list when hideResults is true', () => {
+    render(<Autocomplete data={ITEMS} hideResults renderResultList={TestSuggestionList} />);
+
+    const suggestionList = screen.queryByTestId(suggestionListTestId);
+    expect(suggestionList).not.toBeOnTheScreen();
+  });
+
   it('should only pass text input props to the TextInput', () => {
     const MockTextInput = jest.fn(() => <></>) as jest.Mock<ReactElement>;
 
diff --git a/index.tsx b/index.tsx
index 58001be..1333381 100644
--- a/index.tsx
+++ b/index.tsx
@@ -49,7 +49,21 @@ export const AutocompleteInput = React.forwardRef(function AutocompleteInputComp
     ...textInputProps
   } = props;
 
-  function ResultListWrapper(): React.ReactElement {
+  function TextInputWrapper(): React.ReactElement {
+    const autocompleteTextInputProps = {
+      ...textInputProps,
+      style: [styles.input, style],
+      ref,
+    };
+
+    return (
+      <View style={[styles.inputContainer, inputContainerStyle]}>
+        <AutocompleteTextInput {...autocompleteTextInputProps} />;
+      </View>
+    );
+  }
+
+  function ResultListWrapper(): React.ReactElement | null {
     const resultListProps: FlatListProps<Item> = {
       data,
       renderItem: defaultRenderItem,
@@ -58,35 +72,28 @@ export const AutocompleteInput = React.forwardRef(function AutocompleteInputComp
       style: [styles.list, flatListProps?.style],
     };
 
-    return <ResultList {...resultListProps} />;
-  }
+    const showResults = data.length > 0;
+    onShowResults?.(showResults);
 
-  function TextInputWrapper(): React.ReactElement {
-    const autocompleteTextInputProps = {
-      ...textInputProps,
-      style: [styles.input, style],
-      ref,
-    };
+    const doNotShowResults = hideResults || !showResults;
+    if (doNotShowResults) {
+      return null;
+    }
 
-    return <AutocompleteTextInput {...autocompleteTextInputProps} />;
+    return (
+      <View
+        style={listContainerStyle}
+        onStartShouldSetResponderCapture={onStartShouldSetResponderCapture}
+      >
+        <ResultList {...resultListProps} />;
+      </View>
+    );
   }
 
-  const showResults = data.length > 0;
-  onShowResults?.(showResults);
-
   return (
     <View style={[styles.container, containerStyle]}>
-      <View style={[styles.inputContainer, inputContainerStyle]}>
-        <TextInputWrapper />
-      </View>
-      {!hideResults && (
-        <View
-          style={listContainerStyle}
-          onStartShouldSetResponderCapture={onStartShouldSetResponderCapture}
-        >
-          {showResults && <ResultListWrapper />}
-        </View>
-      )}
+      <TextInputWrapper />
+      <ResultListWrapper />
     </View>
   );
 });