66 lines
1.6 KiB
TypeScript
66 lines
1.6 KiB
TypeScript
|
import { BottomTabHeaderProps } from '@react-navigation/bottom-tabs'
|
||
|
|
import { getHeaderTitle } from '@react-navigation/elements'
|
||
|
|
import React from 'react'
|
||
|
|
import {
|
||
|
|
Appbar,
|
||
|
|
AppbarProps,
|
||
|
|
IconButton,
|
||
|
|
Searchbar,
|
||
|
|
SearchbarProps,
|
||
|
|
Tooltip,
|
||
|
|
} from 'react-native-paper'
|
||
|
|
|
||
|
|
interface TabsHeaderProps extends AppbarProps {
|
||
|
|
navProps: BottomTabHeaderProps
|
||
|
|
withSearchBar?: boolean
|
||
|
|
searchBarProps?: SearchbarProps
|
||
|
|
}
|
||
|
|
|
||
|
|
const TabsHeader = (props: TabsHeaderProps) => {
|
||
|
|
const [query, setQuery] = React.useState('')
|
||
|
|
|
||
|
|
return props.withSearchBar ? (
|
||
|
|
<Appbar.Header {...props}>
|
||
|
|
<Searchbar
|
||
|
|
{...props.searchBarProps}
|
||
|
|
value={query}
|
||
|
|
onChangeText={setQuery}
|
||
|
|
style={{ margin: 8, marginBottom: 16 }}
|
||
|
|
right={(p) => (
|
||
|
|
<Tooltip title="Rechercher">
|
||
|
|
<IconButton
|
||
|
|
{...p}
|
||
|
|
icon="check"
|
||
|
|
onPress={() =>
|
||
|
|
props.searchBarProps?.onChangeText
|
||
|
|
? props.searchBarProps.onChangeText(query)
|
||
|
|
: undefined
|
||
|
|
}
|
||
|
|
/>
|
||
|
|
</Tooltip>
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
</Appbar.Header>
|
||
|
|
) : (
|
||
|
|
<Appbar.Header {...props}>
|
||
|
|
{props.navProps.options.headerLeft
|
||
|
|
? props.navProps.options.headerLeft({})
|
||
|
|
: undefined}
|
||
|
|
|
||
|
|
<Appbar.Content
|
||
|
|
title={getHeaderTitle(
|
||
|
|
props.navProps.options,
|
||
|
|
props.navProps.route.name,
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
|
||
|
|
{props.navProps.options.headerRight
|
||
|
|
? props.navProps.options.headerRight({
|
||
|
|
canGoBack: props.navProps.navigation.canGoBack(),
|
||
|
|
})
|
||
|
|
: undefined}
|
||
|
|
</Appbar.Header>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default TabsHeader
|