diff --git a/src/Components/Searchbar.js b/src/Components/Searchbar.js
index 432e0380..05061daa 100644
--- a/src/Components/Searchbar.js
+++ b/src/Components/Searchbar.js
@@ -1,63 +1,41 @@
import React, { useRef } from "react";
-import { View, TextInput, StyleSheet } from "react-native";
+import { StyleSheet, View, TextInput, Text, StatusBar } from "react-native";
+
import { TouchableRipple, IconButton } from "react-native-paper";
-import Constants from "expo-constants";
-import { useSettings } from "../Hooks/reduxHooks";
-import { useDispatch } from "react-redux";
-import { setAppSettings } from "../redux/settings/settings.actions";
+import { Row } from "./Common";
export const Searchbar = ({
theme,
placeholder,
searchText,
- left,
- onPressLeft,
- right,
- displayMenu,
- onPressRight,
+ backAction,
+ onBackAction,
clearSearchbar,
onChangeText,
onSubmitEditing,
- migrate,
- onPressMigrate,
- filter,
+ actions,
}) => {
const searchRef = useRef(null);
- const dispatch = useDispatch();
- const { displayMode } = useSettings();
-
- const displayMenuIcon = () => {
- const icons = {
- 0: "view-module",
- 1: "view-list",
- 2: "view-module",
- };
-
- return icons[displayMode];
- };
-
- const getDisplayMode = () =>
- displayMode === 0 ? 1 : displayMode === 1 ? 2 : displayMode === 2 && 0;
return (
searchRef.current.focus()}
style={[
- styles.searchAppbarContainer,
+ styles.searchbarContainer,
{ backgroundColor: theme.searchBarColor },
]}
rippleColor={theme.rippleColor}
>
-
- {left && (
+
+ {backAction && (
)}
-
+
{searchText !== "" && (
)}
- {displayMenu && (
-
- dispatch(
- setAppSettings("displayMode", getDisplayMode())
- )
- }
- />
- )}
- {right && (
-
- )}
- {migrate && (
-
- )}
+ {actions &&
+ actions.map((action, index) => (
+
+ ))}
);
};
const styles = StyleSheet.create({
- searchAppbarContainer: {
- marginTop: Constants.statusBarHeight + 4,
+ searchbarContainer: {
+ marginTop: StatusBar.currentHeight + 4,
height: 48,
flexDirection: "row",
alignItems: "center",
@@ -133,6 +87,7 @@ const styles = StyleSheet.create({
borderRadius: 8,
marginHorizontal: 12,
elevation: 2,
+ backgroundColor: "white",
},
container: {
flex: 1,
diff --git a/src/Screens/Extension/Extension.js b/src/Screens/Extension/Extension.js
index 56b42cfb..53992484 100644
--- a/src/Screens/Extension/Extension.js
+++ b/src/Screens/Extension/Extension.js
@@ -6,16 +6,20 @@ import NovelCover from "../../Components/NovelCover";
import EmptyView from "../../Components/EmptyView";
import { Searchbar } from "../../Components/Searchbar";
-import { useTheme, useLibrary } from "../../Hooks/reduxHooks";
+import { useTheme, useLibrary, useSettings } from "../../Hooks/reduxHooks";
import NovelList from "../../Components/NovelList";
import { showToast } from "../../Hooks/showToast";
import ErrorView from "../../Components/ErrorView";
+import { useDispatch } from "react-redux";
+import { setAppSettings } from "../../redux/settings/settings.actions";
const Extension = ({ navigation, route }) => {
const { sourceId, sourceName, sourceUrl } = route.params;
const theme = useTheme();
const library = useLibrary();
+ const dispatch = useDispatch();
+ const { displayMode } = useSettings();
const [loading, setLoading] = useState(true);
const [novels, setNovels] = useState();
@@ -115,6 +119,19 @@ const Extension = ({ navigation, route }) => {
/>
);
+ const displayMenuIcon = () => {
+ const icons = {
+ 0: "view-module",
+ 1: "view-list",
+ 2: "view-module",
+ };
+
+ return icons[displayMode];
+ };
+
+ const getDisplayMode = () =>
+ displayMode === 0 ? 1 : displayMode === 1 ? 2 : displayMode === 2 && 0;
+
return (
{
navigation.goBack()}
+ backAction="arrow-left"
+ onBackAction={() => navigation.goBack()}
searchText={searchText}
onChangeText={(text) => setSearchText(text)}
onSubmitEditing={getSearchResults}
clearSearchbar={clearSearchbar}
- right="earth"
- displayMenu={true}
- onPressRight={() => WebBrowser.openBrowserAsync(sourceUrl)}
+ actions={[
+ {
+ icon: displayMenuIcon(),
+ color: theme.textColorSecondary,
+ onPress: () =>
+ dispatch(
+ setAppSettings("displayMode", getDisplayMode())
+ ),
+ },
+ {
+ icon: "earth",
+ color: theme.textColorSecondary,
+ onPress: () => WebBrowser.openBrowserAsync(sourceUrl),
+ },
+ ]}
/>
{loading ? (
diff --git a/src/Screens/History/History.js b/src/Screens/History/History.js
index 28bc530e..5d03d219 100644
--- a/src/Screens/History/History.js
+++ b/src/Screens/History/History.js
@@ -80,10 +80,15 @@ const History = ({ navigation }) => {
searchText={searchText}
clearSearchbar={clearSearchbar}
onChangeText={onChangeText}
- left="magnify"
+ backAction="magnify"
theme={theme}
- right="trash-can-outline"
- onPressRight={showDialog}
+ actions={[
+ {
+ icon: "trash-can-outline",
+ color: theme.textColorSecondary,
+ onPress: showDialog,
+ },
+ ]}
/>
{
searchText={searchText}
clearSearchbar={clearSearchbar}
onChangeText={onChangeText}
- left="magnify"
- right="filter-variant"
- filter={filter}
- onPressRight={() => libraryFilterSheetRef.current.show()}
+ backAction="magnify"
+ actions={[
+ {
+ icon: "filter-variant",
+ onPress: () => libraryFilterSheetRef.current.show(),
+ color: filter
+ ? theme.filterColor
+ : theme.textColorSecondary,
+ },
+ ]}
theme={theme}
/>
{loading ? (
diff --git a/src/Screens/Updates/Updates.js b/src/Screens/Updates/Updates.js
index f9031e4c..288c2e8b 100644
--- a/src/Screens/Updates/Updates.js
+++ b/src/Screens/Updates/Updates.js
@@ -114,10 +114,14 @@ const Updates = ({ navigation }) => {
searchText={searchText}
clearSearchbar={clearSearchbar}
onChangeText={onChangeText}
- left="magnify"
+ backAction="magnify"
theme={theme}
- right="reload"
- onPressRight={() => dispatch(updateLibraryAction())}
+ actions={[
+ {
+ icon: "reload",
+ onPress: () => dispatch(updateLibraryAction()),
+ },
+ ]}
/>