Refactor searchbar
This commit is contained in:
Rajarshee Chatterjee
+26
-71
@@ -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 (
|
||||
<TouchableRipple
|
||||
borderless
|
||||
onPress={() => searchRef.current.focus()}
|
||||
style={[
|
||||
styles.searchAppbarContainer,
|
||||
styles.searchbarContainer,
|
||||
{ backgroundColor: theme.searchBarColor },
|
||||
]}
|
||||
rippleColor={theme.rippleColor}
|
||||
>
|
||||
<View style={styles.container}>
|
||||
<View style={{ flex: 1, flexDirection: "row" }}>
|
||||
{left && (
|
||||
<Row style={{ flex: 1 }}>
|
||||
{backAction && (
|
||||
<IconButton
|
||||
icon={left}
|
||||
icon={backAction}
|
||||
color={theme.textColorSecondary}
|
||||
style={{ marginLeft: 0 }}
|
||||
size={23}
|
||||
onPress={onPressLeft}
|
||||
onPress={onBackAction}
|
||||
/>
|
||||
)}
|
||||
<TextInput
|
||||
@@ -72,7 +50,7 @@ export const Searchbar = ({
|
||||
onSubmitEditing={onSubmitEditing}
|
||||
defaultValue={searchText}
|
||||
/>
|
||||
</View>
|
||||
</Row>
|
||||
{searchText !== "" && (
|
||||
<IconButton
|
||||
icon="close"
|
||||
@@ -82,49 +60,25 @@ export const Searchbar = ({
|
||||
onPress={clearSearchbar}
|
||||
/>
|
||||
)}
|
||||
{displayMenu && (
|
||||
<IconButton
|
||||
icon={displayMenuIcon()}
|
||||
color={theme.textColorSecondary}
|
||||
style={{ marginRight: 0 }}
|
||||
size={23}
|
||||
onPress={() =>
|
||||
dispatch(
|
||||
setAppSettings("displayMode", getDisplayMode())
|
||||
)
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{right && (
|
||||
<IconButton
|
||||
icon={right}
|
||||
color={
|
||||
!filter
|
||||
? theme.textColorSecondary
|
||||
: theme.filterColor
|
||||
}
|
||||
style={{ marginRight: 0 }}
|
||||
size={23}
|
||||
onPress={onPressRight}
|
||||
/>
|
||||
)}
|
||||
{migrate && (
|
||||
<IconButton
|
||||
icon={migrate}
|
||||
color={theme.textColorSecondary}
|
||||
style={{ marginRight: 0 }}
|
||||
size={23}
|
||||
onPress={onPressMigrate}
|
||||
/>
|
||||
)}
|
||||
{actions &&
|
||||
actions.map((action, index) => (
|
||||
<IconButton
|
||||
key={index}
|
||||
icon={action.icon}
|
||||
color={action.color ?? theme.textColorSecondary}
|
||||
style={{ marginRight: 0 }}
|
||||
size={23}
|
||||
onPress={action.onPress}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
</TouchableRipple>
|
||||
);
|
||||
};
|
||||
|
||||
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,
|
||||
|
||||
@@ -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 (
|
||||
<View
|
||||
style={[
|
||||
@@ -125,15 +142,27 @@ const Extension = ({ navigation, route }) => {
|
||||
<Searchbar
|
||||
theme={theme}
|
||||
placeholder={`Search ${sourceName}`}
|
||||
left="arrow-left"
|
||||
onPressLeft={() => 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 ? (
|
||||
|
||||
@@ -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,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<FlatList
|
||||
contentContainerStyle={{
|
||||
|
||||
@@ -110,10 +110,16 @@ const LibraryScreen = ({ navigation }) => {
|
||||
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 ? (
|
||||
|
||||
@@ -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()),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<FlatList
|
||||
contentContainerStyle={styles.flatList}
|
||||
|
||||
Reference in New Issue
Block a user