Déconnexion permise

client/components/ui/TabsHeader.tsx

@@ -0,0 +1,66 @@
+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