fix: the checkbox issues

meypod · Feb 25, 2024 · 0d4b8d6 · 0d4b8d6
1 parent 6e97822
commit 0d4b8d6
Show file tree

Hide file tree

Showing 6 changed files with 244 additions and 102 deletions.
diff --git a/package.json b/package.json
@@ -35,7 +35,7 @@
     "immer": "^10.0.3",
     "lodash": "^4.17.21",
     "make-plural": "^7.1.0",
-    "native-base": "3.4.25",
+    "native-base": "3.4.27",
     "react": "18.2.0",
     "react-native": "0.72.10",
     "react-native-app-intro-slider": "^4.0.4",

diff --git a/patches/native-base+3.4.25.patch → patches/native-base+3.4.27.patch b/patches/native-base+3.4.25.patch → patches/native-base+3.4.27.patch
@@ -1,5 +1,5 @@
 diff --git a/node_modules/native-base/lib/commonjs/components/primitives/Select/Select.js b/node_modules/native-base/lib/commonjs/components/primitives/Select/Select.js
-index 4241fa2..6a719e4 100644
+index 4241fa2..0516137 100644
 --- a/node_modules/native-base/lib/commonjs/components/primitives/Select/Select.js
 +++ b/node_modules/native-base/lib/commonjs/components/primitives/Select/Select.js
 @@ -177,6 +177,10 @@ const Select = ({
@@ -14,7 +14,7 @@ index 4241fa2..6a719e4 100644
      pointerEvents: "none",
      variant: variant
 diff --git a/node_modules/native-base/lib/module/components/primitives/Select/Select.js b/node_modules/native-base/lib/module/components/primitives/Select/Select.js
-index 5ece8a7..965ca71 100644
+index 5ece8a7..84db2dd 100644
 --- a/node_modules/native-base/lib/module/components/primitives/Select/Select.js
 +++ b/node_modules/native-base/lib/module/components/primitives/Select/Select.js
 @@ -138,6 +138,10 @@ const Select = ({

diff --git a/src/screens/settings_display/hide_prayer_setting.tsx b/src/screens/settings_display/hide_prayer_setting.tsx
@@ -1,22 +1,41 @@
 import {t} from '@lingui/macro';
-import {Checkbox, HStack, IStackProps, Stack, Text} from 'native-base';
+import {
+  Checkbox,
+  HStack,
+  IStackProps,
+  Pressable,
+  Stack,
+  Text,
+} from 'native-base';
 import {memo} from 'react';
 import {Prayer, translatePrayer} from '@/adhan';
 
-function HidePrayerSetting({prayer, ...props}: IStackProps & {prayer: Prayer}) {
+function HidePrayerSetting({
+  prayer,
+  onToggle,
+  ...props
+}: IStackProps & {prayer: Prayer; onToggle: (prayer: Prayer) => void}) {
   const prayerName = translatePrayer(prayer);
+  const toggle = () => onToggle(prayer);
+
   return (
-    <HStack {...props} justifyContent="space-between">
-      <Text width="1/2">{prayerName}</Text>
+    <Pressable onPress={toggle}>
+      <HStack {...props} justifyContent="space-between">
+        <Text width="1/2">{prayerName}</Text>
 
-      <Stack width="1/2" justifyContent="center" alignItems="center">
-        <Checkbox
-          value={prayer}
-          size="md"
-          accessibilityLabel={t`should ${prayerName} be hidden?`}
-        />
-      </Stack>
-    </HStack>
+        <Stack
+          width="1/2"
+          justifyContent="center"
+          alignItems="center"
+          pointerEvents="none">
+          <Checkbox
+            value={prayer}
+            size="md"
+            accessibilityLabel={t`should ${prayerName} be hidden?`}
+          />
+        </Stack>
+      </HStack>
+    </Pressable>
   );
 }
 

diff --git a/src/screens/settings_display/hide_prayer_settings.tsx b/src/screens/settings_display/hide_prayer_settings.tsx
@@ -8,24 +8,35 @@ import {
   FormControl,
   IStackProps,
 } from 'native-base';
+import {useCallback} from 'react';
 import {ToastAndroid} from 'react-native';
 import HidePrayerSetting from './hide_prayer_setting';
 import {Prayer, PrayersInOrder} from '@/adhan';
 import {useSettings} from '@/store/settings';
 
 export function HidePrayerSettings(props: IStackProps) {
-  const [hiddenPrayer, setHiddenPrayers] = useSettings('HIDDEN_PRAYERS');
+  const [HIDDEN_PRAYERS, setHiddenPrayers] = useSettings('HIDDEN_PRAYERS');
 
-  const setHiddenPrayersProxy = (hiddenPrayers: Prayer[]) => {
-    if (hiddenPrayers.length >= PrayersInOrder.length) {
-      ToastAndroid.show(
-        t`At least one prayer time must be shown`,
-        ToastAndroid.SHORT,
-      );
-      return;
-    }
-    setHiddenPrayers(hiddenPrayers);
-  };
+  const onPrayerToggle = useCallback(
+    (prayer: Prayer) => {
+      const hiddenPrayers = HIDDEN_PRAYERS.slice();
+      const indexOfPrayer = hiddenPrayers.indexOf(prayer);
+      if (indexOfPrayer === -1) {
+        hiddenPrayers.push(prayer);
+      } else {
+        hiddenPrayers.splice(indexOfPrayer, 1);
+      }
+      if (hiddenPrayers.length >= PrayersInOrder.length) {
+        ToastAndroid.show(
+          t`At least one prayer time must be shown`,
+          ToastAndroid.SHORT,
+        );
+        return;
+      }
+      setHiddenPrayers(hiddenPrayers);
+    },
+    [HIDDEN_PRAYERS, setHiddenPrayers],
+  );
 
   return (
     <VStack
@@ -41,15 +52,15 @@ export function HidePrayerSettings(props: IStackProps) {
         <Text width="1/2" textAlign="center">{t`Hidden?`}</Text>
       </HStack>
       <Checkbox.Group
-        onChange={setHiddenPrayersProxy}
-        value={hiddenPrayer}
+        value={HIDDEN_PRAYERS}
         accessibilityLabel={t`is prayer time hidden?`}>
         {PrayersInOrder.map((p, i) => (
           <HidePrayerSetting
             p="2"
             backgroundColor={i % 2 === 0 ? 'coolGray.400:alpha.20' : undefined}
             key={p.toString()}
             prayer={p}
+            onToggle={onPrayerToggle}
           />
         ))}
       </Checkbox.Group>

diff --git a/src/screens/settings_widget/hide_widget_prayer_settings.tsx b/src/screens/settings_widget/hide_widget_prayer_settings.tsx
@@ -9,45 +9,67 @@ import {
   Checkbox,
   FormControl,
 } from 'native-base';
-import {ToastAndroid} from 'react-native';
+import {memo, useCallback} from 'react';
+import {Pressable, ToastAndroid} from 'react-native';
 import {Prayer, PrayersInOrder, translatePrayer} from '@/adhan';
 import {useSettings} from '@/store/settings';
 
-function HideWidgetPrayerSetting({
+const HideWidgetPrayerSetting = memo(function HideWidgetPrayerSetting({
   prayer,
+  onToggle,
   ...props
-}: {prayer: Prayer} & IStackProps) {
+}: {prayer: Prayer; onToggle: (prayer: Prayer) => void} & IStackProps) {
   const prayerName = translatePrayer(prayer);
+
+  const toggle = () => onToggle(prayer);
+
   return (
-    <HStack {...props} justifyContent="space-between">
-      <Text width="1/2">{prayerName}</Text>
+    <Pressable onPress={toggle}>
+      <HStack {...props} justifyContent="space-between">
+        <Text width="1/2">{prayerName}</Text>
 
-      <Stack width="1/2" justifyContent="center" alignItems="center">
-        <Checkbox
-          size="md"
-          value={prayer}
-          accessibilityLabel={t`should ${prayerName} be hidden?`}
-        />
-      </Stack>
-    </HStack>
+        <Stack
+          width="1/2"
+          justifyContent="center"
+          alignItems="center"
+          pointerEvents="none">
+          <Checkbox
+            size="md"
+            value={prayer}
+            accessibilityLabel={t`should ${prayerName} be hidden?`}
+            isReadOnly={true}
+          />
+        </Stack>
+      </HStack>
+    </Pressable>
   );
-}
+});
 
 export function HideWidgetPrayerSettings(props: IStackProps) {
   const [hiddenWidgetPrayer, setHiddenWidgetPrayers] = useSettings(
     'HIDDEN_WIDGET_PRAYERS',
   );
 
-  const setHiddenPrayersProxy = (hiddenPrayers: Prayer[]) => {
-    if (hiddenPrayers.length < 3) {
-      ToastAndroid.show(
-        t`Only six items can be shown at the same time`,
-        ToastAndroid.SHORT,
-      );
-      return;
-    }
-    setHiddenWidgetPrayers(hiddenPrayers);
-  };
+  const onPrayerToggle = useCallback(
+    (prayer: Prayer) => {
+      const indexOfPrayer = hiddenWidgetPrayer.indexOf(prayer);
+      const hiddenPrayers = hiddenWidgetPrayer.slice();
+      if (indexOfPrayer === -1) {
+        hiddenPrayers.push(prayer);
+      } else {
+        hiddenPrayers.splice(indexOfPrayer, 1);
+      }
+      if (hiddenPrayers.length < 3) {
+        ToastAndroid.show(
+          t`Only six items can be shown at the same time`,
+          ToastAndroid.SHORT,
+        );
+        return;
+      }
+      setHiddenWidgetPrayers(hiddenPrayers);
+    },
+    [setHiddenWidgetPrayers, hiddenWidgetPrayer],
+  );
 
   return (
     <VStack
@@ -63,7 +85,6 @@ export function HideWidgetPrayerSettings(props: IStackProps) {
         <Text width="1/2" textAlign="center">{t`Hidden?`}</Text>
       </HStack>
       <Checkbox.Group
-        onChange={setHiddenPrayersProxy}
         value={hiddenWidgetPrayer}
         accessibilityLabel={t`is prayer time hidden?`}>
         {PrayersInOrder.map((p, i) => (
@@ -72,6 +93,7 @@ export function HideWidgetPrayerSettings(props: IStackProps) {
             backgroundColor={i % 2 === 0 ? 'coolGray.400:alpha.20' : undefined}
             key={p.toString()}
             prayer={p}
+            onToggle={onPrayerToggle}
           />
         ))}
       </Checkbox.Group>