open-lab/lnreader
2
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Refactor Checkbox and RadioButton

Browse Source
This commit is contained in:
Rajarshee Chatterjee
2021-10-04 13:26:49 +05:30
parent ecce374abe
commit 3f9c662c68
8 changed files with 107 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Checkbox/Checkbox.js
+35 -61
View File
@@ -1,85 +1,59 @@
import React from 'react';
import {Pressable, StyleSheet, Text, View} from 'react-native';
import {Checkbox as PaperCheckbox} from 'react-native-paper';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
export const Checkbox = ({label, status, onPress, theme}) => (
<View
style={[
styles.checkboxContainer,
status && {backgroundColor: theme.rippleColor},
]}
<Pressable
android_ripple={{color: theme.rippleColor}}
style={styles.pressable}
onPress={onPress}
>
<Pressable
android_ripple={{color: theme.rippleColor}}
style={styles.pressable}
<PaperCheckbox
status={
status === 'indeterminate'
? 'indeterminate'
: status
? 'checked'
: 'unchecked'
}
onPress={onPress}
>
<Text
style={{
color: status ? theme.colorAccent : theme.textColorPrimary,
}}
>
{label}
</Text>
{status && (
<MaterialCommunityIcons
name="check"
color={theme.colorAccent}
size={21}
style={styles.icon}
/>
)}
</Pressable>
</View>
color={theme.colorAccent}
uncheckedColor={theme.textColorSecondary}
/>
<Text style={{color: theme.textColorPrimary, marginLeft: 12}}>{label}</Text>
</Pressable>
);
export const SortItem = ({label, status, onPress, theme}) => (
<View
style={[
styles.checkboxContainer,
status && {backgroundColor: theme.rippleColor},
]}
<Pressable
android_ripple={{color: theme.rippleColor}}
style={[styles.pressable, {paddingVertical: 16, paddingLeft: 64}]}
onPress={onPress}
>
<Pressable
android_ripple={{color: theme.rippleColor}}
style={styles.pressable}
onPress={onPress}
>
<Text
style={{
color: status ? theme.colorAccent : theme.textColorPrimary,
}}
>
{label}
</Text>
{status && (
<MaterialCommunityIcons
name={status === 'asc' ? 'arrow-up' : 'arrow-down'}
color={theme.colorAccent}
size={21}
style={styles.icon}
/>
)}
</Pressable>
</View>
{status && (
<MaterialCommunityIcons
name={status === 'asc' ? 'arrow-up' : 'arrow-down'}
color={theme.colorAccent}
size={21}
style={styles.icon}
/>
)}
<Text style={{color: theme.textColorPrimary}}>{label}</Text>
</Pressable>
);
const styles = StyleSheet.create({
checkboxContainer: {
borderRadius: 8,
overflow: 'hidden',
marginVertical: 4,
},
pressable: {
paddingHorizontal: 16,
paddingVertical: 12,
paddingVertical: 8,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
icon: {
position: 'absolute',
right: 16,
left: 24,
alignSelf: 'center',
},
});
src/components/RadioButton/RadioButton.js
+33
View File
@@ -0,0 +1,33 @@
import React from 'react';
import {Pressable, StyleSheet, Text, View} from 'react-native';
import {RadioButton as PaperRadioButton} from 'react-native-paper';
export const RadioButton = ({label, status, onPress, theme}) => (
<Pressable
android_ripple={{color: theme.rippleColor}}
style={styles.pressable}
onPress={onPress}
>
<PaperRadioButton
status={status ? 'checked' : 'unchecked'}
onPress={onPress}
color={theme.colorAccent}
uncheckedColor={theme.textColorSecondary}
/>
<Text style={{color: theme.textColorPrimary, marginLeft: 12}}>{label}</Text>
</Pressable>
);
const styles = StyleSheet.create({
pressable: {
paddingHorizontal: 16,
paddingVertical: 8,
flexDirection: 'row',
alignItems: 'center',
},
icon: {
position: 'absolute',
left: 24,
alignSelf: 'center',
},
});
src/components/Searchbar/Searchbar.js
-1
View File
@@ -79,7 +79,6 @@ const styles = StyleSheet.create({
marginHorizontal: 16,
borderRadius: 50,
overflow: 'hidden',
elevation: 1,
},
pressable: {
flexDirection: 'row',
src/screens/library/components/LibraryBottomSheet.js
+19 -5
View File
@@ -14,6 +14,7 @@ import {filterLibrary} from '../../../redux/library/library.actions';
import {useSettings} from '../../../hooks/reduxHooks';
import {setAppSettings} from '../../../redux/settings/settings.actions';
import {Checkbox, SortItem} from '../../../components/Checkbox/Checkbox';
import {RadioButton} from '../../../components/RadioButton/RadioButton';
const LibraryFilterSheet = ({
bottomSheetRef,
@@ -26,7 +27,7 @@ const LibraryFilterSheet = ({
const [animatedValue] = useState(new Animated.Value(0));
const FirstRoute = () => (
<View style={{flex: 1, margin: 8}}>
<View style={{flex: 1}}>
<Checkbox
label="Downloaded"
theme={theme}
@@ -93,7 +94,7 @@ const LibraryFilterSheet = ({
];
const SecondRoute = () => (
<View style={{flex: 1, margin: 8}}>
<View style={{flex: 1}}>
{sortOrders.map((item, index) => (
<SortItem
key={index}
@@ -128,7 +129,7 @@ const LibraryFilterSheet = ({
const renderCheckboxes = () => {
return displayModes.map(mode => (
<Checkbox
<RadioButton
key={mode.displayMode}
label={mode.label}
status={displayMode === mode.displayMode}
@@ -141,7 +142,7 @@ const LibraryFilterSheet = ({
};
const ThirdRoute = () => (
<View style={{flex: 1, margin: 8}}>
<View style={{flex: 1}}>
<Text
style={{
color: theme.textColorSecondary,
@@ -210,9 +211,22 @@ const LibraryFilterSheet = ({
<TabBar
{...props}
indicatorStyle={{backgroundColor: theme.colorAccent}}
style={{backgroundColor: theme.colorPrimary}}
style={{backgroundColor: theme.colorPrimary, elevation: 0}}
renderLabel={({route, focused, color}) => (
// <View
// style={[
// {
// flex: 1,
// paddingHorizontal: 16,
// justifyContent: 'center',
// alignItems: 'center',
// borderRadius: 8,
// },
// focused && {backgroundColor: theme.rippleColor},
// ]}
// >
<Text style={{color}}>{route.title}</Text>
// </View>
)}
inactiveColor={theme.textColorSecondary}
activeColor={theme.colorAccent}
src/screens/more/components/DisplayModeModal.js
+2 -2
View File
@@ -3,7 +3,7 @@ import {StyleSheet} from 'react-native';
import {Portal, Modal} from 'react-native-paper';
import {Checkbox} from '../../../components/Checkbox/Checkbox';
import {RadioButton} from '../../../components/RadioButton/RadioButton';
import {setAppSettings} from '../../../redux/settings/settings.actions';
@@ -23,7 +23,7 @@ const DisplayModeModal = ({
const renderCheckboxes = () => {
return displayModes.map(mode => (
<Checkbox
<RadioButton
key={mode.displayMode}
status={displayMode === mode.displayMode}
onPress={() =>
src/screens/more/components/GridSizeModal.js
+5 -4
View File
@@ -1,10 +1,11 @@
import React from 'react';
import {Text, StyleSheet} from 'react-native';
import {Portal, Modal} from 'react-native-paper';
import Slider from '@react-native-community/slider';
import {RadioButton, RadioButtonGroup} from '../../../components/RadioButton';
import {RadioButton} from '../../../components/RadioButton/RadioButton';
import {setNovelsPerRow} from '../../../redux/settings/settings.actions';
import {Checkbox} from '../../../components/Checkbox/Checkbox';
const GridSizeModal = ({
dispatch,
@@ -40,7 +41,7 @@ const GridSizeModal = ({
{`${novelsPerRow} per row`}
</Text>
{Object.keys(gridSizes).map(item => (
<Checkbox
<RadioButton
key={item}
status={item === novelsPerRow}
label={gridSizes[item]}
src/screens/novel/components/NovelBottomSheet.js
+13 -25
View File
@@ -35,35 +35,27 @@ const ChaptersSettingsSheet = ({
const FirstRoute = () => (
<View style={{flex: 1}}>
<PaperCheckbox.Item
<Checkbox
theme={theme}
label="Downloaded"
labelStyle={{
fontSize: 14,
color: theme.textColorPrimary,
}}
color={theme.colorAccent}
uncheckedColor={theme.textColorHint}
status={filter.match('AND downloaded=1') ? 'checked' : 'unchecked'}
status={filter.match('AND downloaded=1')}
onPress={() =>
filter.match('AND downloaded=1')
? filterChapters(filter.replace(' AND downloaded=1', ''))
: filterChapters(filter + ' AND downloaded=1')
}
/>
<PaperCheckbox.Item
<Checkbox
theme={theme}
label="Unread"
labelStyle={{
fontSize: 14,
color: theme.textColorPrimary,
}}
color={theme.colorAccent}
uncheckedColor={theme.textColorHint}
status={
filter.match('AND `read`=0')
? 'checked'
? true
: filter.match('AND `read`=1')
? 'indeterminate'
: 'unchecked'
: false
}
onPress={() => {
if (filter.match('AND `read`=0')) {
@@ -75,15 +67,11 @@ const ChaptersSettingsSheet = ({
}
}}
/>
<PaperCheckbox.Item
<Checkbox
theme={theme}
label="Bookmarked"
labelStyle={{
fontSize: 14,
color: theme.textColorPrimary,
}}
color={theme.colorAccent}
uncheckedColor={theme.textColorHint}
status={filter.match('AND bookmark=1') ? 'checked' : 'unchecked'}
status={filter.match('AND bookmark=1')}
onPress={() => {
filter.match('AND bookmark=1')
? filterChapters(filter.replace(' AND bookmark=1', ''))
@@ -94,7 +82,7 @@ const ChaptersSettingsSheet = ({
);
const SecondRoute = () => (
<View style={{flex: 1, margin: 8}}>
<View style={{flex: 1}}>
<SortItem
label="By source"
status={sort === 'ORDER BY chapterId ASC' ? 'asc' : 'desc'}
@@ -109,7 +97,7 @@ const ChaptersSettingsSheet = ({
);
const ThirdRoute = () => (
<View style={{flex: 1, padding: 8}}>
<View style={{flex: 1}}>
<Checkbox
status={!showChapterTitles}
label="Source title"
@@ -144,7 +132,7 @@ const ChaptersSettingsSheet = ({
<TabBar
{...props}
indicatorStyle={{backgroundColor: theme.colorAccent}}
style={{backgroundColor: theme.colorPrimary}}
style={{backgroundColor: theme.colorPrimary, elevation: 0}}
renderLabel={({route, focused, color}) => (
<Text style={{color}}>{route.title}</Text>
)}
src/screens/setting/SettingsGeneral.js
-1
View File
@@ -59,7 +59,6 @@ const GenralSettings = ({navigation}) => {
<Appbar title="General" onBackAction={navigation.goBack} />
<ScrollView contentContainerStyle={{paddingBottom: 32}}>
<List.Section>
<List.Divider theme={theme} />
<List.SubHeader theme={theme}>Display</List.SubHeader>
<List.Item
title="Display Mode"