From 3f9c662c68f39ffae86bbe21bb47ea1e0d7a3a00 Mon Sep 17 00:00:00 2001
From: Rajarshee Chatterjee <rajarshee.adm@gmail.com>
Date: Mon, 4 Oct 2021 13:26:49 +0530
Subject: [PATCH] Refactor Checkbox and RadioButton

---
 src/components/Checkbox/Checkbox.js           | 96 +++++++------------
 src/components/RadioButton/RadioButton.js     | 33 +++++++
 src/components/Searchbar/Searchbar.js         |  1 -
 .../library/components/LibraryBottomSheet.js  | 24 ++++-
 .../more/components/DisplayModeModal.js       |  4 +-
 src/screens/more/components/GridSizeModal.js  |  9 +-
 .../novel/components/NovelBottomSheet.js      | 38 +++-----
 src/screens/setting/SettingsGeneral.js        |  1 -
 8 files changed, 107 insertions(+), 99 deletions(-)
 create mode 100644 src/components/RadioButton/RadioButton.js

diff --git a/src/components/Checkbox/Checkbox.js b/src/components/Checkbox/Checkbox.js
index a77ade49..35ae1930 100644
--- a/src/components/Checkbox/Checkbox.js
+++ b/src/components/Checkbox/Checkbox.js
@@ -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',
   },
 });
diff --git a/src/components/RadioButton/RadioButton.js b/src/components/RadioButton/RadioButton.js
new file mode 100644
index 00000000..34f8f73c
--- /dev/null
+++ b/src/components/RadioButton/RadioButton.js
@@ -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',
+  },
+});
diff --git a/src/components/Searchbar/Searchbar.js b/src/components/Searchbar/Searchbar.js
index 1db8848d..585916cf 100644
--- a/src/components/Searchbar/Searchbar.js
+++ b/src/components/Searchbar/Searchbar.js
@@ -79,7 +79,6 @@ const styles = StyleSheet.create({
     marginHorizontal: 16,
     borderRadius: 50,
     overflow: 'hidden',
-    elevation: 1,
   },
   pressable: {
     flexDirection: 'row',
diff --git a/src/screens/library/components/LibraryBottomSheet.js b/src/screens/library/components/LibraryBottomSheet.js
index e330cc42..a815c412 100644
--- a/src/screens/library/components/LibraryBottomSheet.js
+++ b/src/screens/library/components/LibraryBottomSheet.js
@@ -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}
diff --git a/src/screens/more/components/DisplayModeModal.js b/src/screens/more/components/DisplayModeModal.js
index 98e23bad..20d1b465 100644
--- a/src/screens/more/components/DisplayModeModal.js
+++ b/src/screens/more/components/DisplayModeModal.js
@@ -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={() =>
diff --git a/src/screens/more/components/GridSizeModal.js b/src/screens/more/components/GridSizeModal.js
index cd80c067..88769e04 100644
--- a/src/screens/more/components/GridSizeModal.js
+++ b/src/screens/more/components/GridSizeModal.js
@@ -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]}
diff --git a/src/screens/novel/components/NovelBottomSheet.js b/src/screens/novel/components/NovelBottomSheet.js
index 5f04c2eb..00b5f71d 100644
--- a/src/screens/novel/components/NovelBottomSheet.js
+++ b/src/screens/novel/components/NovelBottomSheet.js
@@ -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>
       )}
diff --git a/src/screens/setting/SettingsGeneral.js b/src/screens/setting/SettingsGeneral.js
index 166a5df0..f703ec35 100644
--- a/src/screens/setting/SettingsGeneral.js
+++ b/src/screens/setting/SettingsGeneral.js
@@ -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"