[UI > Components] Move Search to our styled wrapper

src/def.d.ts

@@ -27,6 +27,12 @@ interface CodeblockProps {
     children?: string;
 }
 
+interface SearchProps {
+    onChangeText?: (v: string) => void;
+    placeholder?: string;
+    style?: _RN.TextStyle;
+}
+
 // Helper types for API functions
 type PropIntellisense<P extends string | symbol> = Record<P, any> & Record<PropertyKey, any>;
 type PropsFinder = <T extends string | symbol>(...props: T[]) => PropIntellisense<T>;
@@ -412,7 +418,6 @@ interface VendettaObject {
             // Discord
             Forms: PropIntellisense<"Form" | "FormSection">;
             General: PropIntellisense<"Button" | "Text" | "View">;
-            Search: _React.ComponentType;
             Alert: _React.ComponentType;
             Button: _React.ComponentType<any> & { Looks: any, Colors: ButtonColors, Sizes: any };
             HelpMessage: _React.ComponentType;
@@ -421,6 +426,7 @@ interface VendettaObject {
             Summary: _React.ComponentType<SummaryProps>;
             ErrorBoundary: _React.ComponentType<ErrorBoundaryProps>;
             Codeblock: _React.ComponentType<CodeblockProps>;
+            Search: _React.ComponentType<SearchProps>;
         }
         toasts: {
             showToast: (content: string, asset: number) => void;

src/ui/components/Search.tsx

@@ -0,0 +1,17 @@
+import { SearchProps } from "@types";
+import { stylesheet } from "@metro/common";
+import { findByName } from "@metro/filters";
+
+const Search = findByName("StaticSearchBarContainer");
+
+const styles = stylesheet.createThemedStyleSheet({
+    search: {
+        margin: 0,
+        padding: 0,
+        borderBottomWidth: 0,
+        background: "none",
+        backgroundColor: "none",
+    }
+});
+
+export default ({ onChangeText, placeholder, style }: SearchProps) => <Search style={[styles.search, style]} placeholder={placeholder} onChangeText={onChangeText} />

src/ui/components/index.ts

@@ -4,7 +4,6 @@ import { findByName, findByProps } from "@metro/filters";
 // Discord
 export const Forms = findByProps("Form", "FormSection");
 export const General = findByProps("Button", "Text", "View");
-export const Search = findByName("StaticSearchBarContainer");
 export const Alert = findByProps("alertDarkStyles", "alertLightStyles").default;
 export const Button = findByProps("Looks", "Colors", "Sizes") as React.ComponentType<any> & { Looks: any, Colors: any, Sizes: any };
 export const HelpMessage = findByName("HelpMessage");
@@ -15,3 +14,4 @@ export const SafeAreaView = findByProps("useSafeAreaInsets").SafeAreaView as typ
 export { default as Summary } from "@ui/components/Summary";
 export { default as ErrorBoundary } from "@ui/components/ErrorBoundary";
 export { default as Codeblock } from "@ui/components/Codeblock";
+export { default as Search } from "@ui/components/Search";

src/ui/settings/pages/AssetBrowser.tsx

@@ -1,4 +1,4 @@
-import { ReactNative as RN, stylesheet } from "@metro/common";
+import { ReactNative as RN } from "@metro/common";
 import { all } from "@ui/assets";
 import { Forms, Search } from "@ui/components";
 import ErrorBoundary from "@ui/components/ErrorBoundary";
@@ -6,15 +6,6 @@ import AssetDisplay from "@ui/settings/components/AssetDisplay";
 
 const { FormDivider } = Forms;
 
-const styles = stylesheet.createThemedStyleSheet({
-    search: {
-        margin: 0,
-        padding: 15,
-        borderBottomWidth: 0,
-        background: "none",
-        backgroundColor: "none",
-    }
-});
 
 export default function AssetBrowser() {
     const [search, setSearch] = React.useState("");
@@ -23,7 +14,6 @@ export default function AssetBrowser() {
         <ErrorBoundary>
             <RN.View style={{ flex: 1 }}>
                 <Search
-                    style={styles.search}
                     onChangeText={(v: string) => setSearch(v)}
                     placeholder="Search"
                 />