Merge pull request #8866 from streetwriters/feat-add-clear-button-search

Feat add clear button search

apps/mobile/app/screens/search/search-bar.tsx

@@ -19,7 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
-import React, { useRef } from "react";
+import React, { useRef, useState } from "react";
 import { View } from "react-native";
 import { TextInput } from "react-native-gesture-handler";
 import { IconButton } from "../../components/ui/icon-button";
@@ -36,6 +36,7 @@ export const SearchBar = ({
   onChangeText: (value: string) => void;
   loading?: boolean;
 }) => {
+  const [clearButton, setClearButton] = useState(false);
   const selectionMode = useSelectionStore((state) => state.selectionMode);
   const isFocused = useNavigationStore(
     (state) => state.focusedRouteId === "Search"
@@ -45,6 +46,7 @@ export const SearchBar = ({
   const inputRef = useRef<TextInput>(null);
   const _onChangeText = (value: string) => {
     onChangeText(value);
+    setClearButton(!!value);
   };
 
   return selectionMode && isFocused ? null : (
@@ -100,6 +102,23 @@ export const SearchBar = ({
           autoCorrect={false}
           placeholderTextColor={colors.primary.placeholder}
         />
+
+        {clearButton ? (
+          <IconButton
+            name="close"
+            size={AppFontSize.xxl}
+            top={10}
+            testID="clear-search"
+            bottom={10}
+            onPress={() => {
+              inputRef.current?.clear();
+              onChangeText("");
+              setClearButton(false);
+            }}
+            color={colors.primary.paragraph}
+            type="plain"
+          />
+        ) : null}
       </View>
     </View>
   );

apps/mobile/e2e/globalSetup.ts

@@ -1,5 +1,5 @@
 import { execSync } from "child_process";
-
+//@ts-ignore
 import { pathExists, ensureDir } from "fs-extra";
 
 import { resolveConfig } from "detox/internals";

apps/mobile/e2e/tests/search.e2e.ts

@@ -28,6 +28,9 @@ describe("Search", () => {
       .typeTextById("search-input", "Test")
       .wait(1000)
       .isVisibleByText("1")
+      .waitAndTapById("clear-search")
+      .wait(2000)
+      .isNotVisibleByText("1")
       .run();
   });
 });

apps/mobile/e2e/tests/utils.ts

@@ -20,6 +20,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { expect as jestExpect } from "@jest/globals";
 import { device as _device, expect } from "detox";
 import { readFileSync } from "fs";
+//@ts-ignore
 import { toMatchImageSnapshot } from "jest-image-snapshot";
 import type { RouteName } from "../../app/stores/use-navigation-store";
 import { notesnook } from "../test.ids";

package.json

@@ -104,6 +104,10 @@
           "run-ios",
           "build-ios",
           "build-android",
+          "build-android-debug",
+          "e2e-android-debug",
+          "e2e-android",
+          "e2e-ios",
           "release-android",
           "release-android-bundle",
           "release-ios",