feat: mobile app package (#1075)

2022-06-09 09:45:15 -05:00
parent 58b63898de
commit 8248a38280
336 changed files with 47696 additions and 22563 deletions
--- a/packages/mobile/src/Components/SearchBar.tsx
+++ b/packages/mobile/src/Components/SearchBar.tsx
@@ -0,0 +1,94 @@
+import { ThemeServiceContext } from '@Style/ThemeService'
+import React, { FC, RefObject, useCallback, useContext } from 'react'
+import { Platform } from 'react-native'
+import IosSearchBar from 'react-native-search-bar'
+import AndroidSearchBar from 'react-native-search-box'
+import { ThemeContext } from 'styled-components/native'
+import { searchBarStyles } from './/SearchBar.styled'
+
+type Props = {
+  onChangeText: (text: string) => void
+  onSearchCancel: () => void
+  iosSearchBarInputRef: RefObject<IosSearchBar>
+  androidSearchBarInputRef: RefObject<typeof AndroidSearchBar>
+  onSearchFocusCallback?: () => void
+  onSearchBlurCallback?: () => void
+  collapseSearchBarOnBlur?: boolean
+}
+
+export const SearchBar: FC<Props> = ({
+  onChangeText,
+  onSearchCancel,
+  iosSearchBarInputRef,
+  androidSearchBarInputRef,
+  onSearchFocusCallback,
+  onSearchBlurCallback,
+  collapseSearchBarOnBlur = true,
+}) => {
+  const theme = useContext(ThemeContext)
+  const themeService = useContext(ThemeServiceContext)
+
+  const onSearchFocus = useCallback(() => {
+    onSearchFocusCallback?.()
+  }, [onSearchFocusCallback])
+
+  const onSearchBlur = useCallback(() => {
+    onSearchBlurCallback?.()
+  }, [onSearchBlurCallback])
+
+  return (
+    <>
+      {Platform.OS === 'ios' && (
+        <IosSearchBar
+          ref={iosSearchBarInputRef}
+          keyboardAppearance={themeService?.keyboardColorForActiveTheme()}
+          placeholder="Search"
+          hideBackground
+          appearance={themeService?.keyboardColorForActiveTheme()}
+          barTintColor={theme.stylekitInfoColor}
+          textFieldBackgroundColor={theme.stylekitContrastBackgroundColor}
+          onChangeText={onChangeText}
+          onSearchButtonPress={() => {
+            iosSearchBarInputRef.current?.blur()
+          }}
+          onCancelButtonPress={() => {
+            iosSearchBarInputRef.current?.blur()
+            onSearchCancel()
+          }}
+          onFocus={onSearchFocus}
+          onBlur={onSearchBlur}
+        />
+      )}
+      {Platform.OS === 'android' && (
+        <AndroidSearchBar
+          ref={androidSearchBarInputRef}
+          onChangeText={onChangeText}
+          onCancel={() => {
+            onSearchBlur()
+            onSearchCancel()
+          }}
+          onDelete={onSearchCancel}
+          onFocus={onSearchFocus}
+          onBlur={onSearchBlur}
+          collapseOnBlur={collapseSearchBarOnBlur}
+          blurOnSubmit={true}
+          backgroundColor={theme.stylekitBackgroundColor}
+          titleCancelColor={theme.stylekitInfoColor}
+          keyboardDismissMode={'interactive'}
+          keyboardAppearance={themeService?.keyboardColorForActiveTheme()}
+          inputBorderRadius={4}
+          tintColorSearch={theme.stylekitForegroundColor}
+          inputStyle={[
+            searchBarStyles.androidSearch,
+            {
+              color: theme.stylekitForegroundColor,
+              backgroundColor: theme.stylekitContrastBackgroundColor,
+            },
+          ]}
+          placeholderExpandedMargin={25}
+          searchIconCollapsedMargin={30}
+        />
+      )}
+    </>
+  )
+}