95 lines
3.0 KiB
TypeScript
95 lines
3.0 KiB
TypeScript
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}
|
|
/>
|
|
)}
|
|
</>
|
|
)
|
|
}
|