From 3528ba593f5bfa082460d29713c8df76bca50ea1 Mon Sep 17 00:00:00 2001
From: Brandon Presley <brandon@presley.nz>
Date: Wed, 16 Nov 2022 18:17:59 +1300
Subject: [PATCH] Finish removing react-native-picker-select

Replaced with react-native-paper menus.
---
 Select.tsx       | 41 ++++++++++++++++++++++++++++++++++-------
 SettingsPage.tsx |  2 +-
 package.json     |  1 -
 yarn.lock        | 21 ---------------------
 4 files changed, 35 insertions(+), 30 deletions(-)

diff --git a/Select.tsx b/Select.tsx
index 6e4249d..26d9784 100644
--- a/Select.tsx
+++ b/Select.tsx
@@ -1,7 +1,12 @@
-import {useState} from 'react'
+import {useCallback, useMemo, useState} from 'react'
 import {Button, Menu, useTheme} from 'react-native-paper'
-import RNPickerSelect from 'react-native-picker-select'
-import {Item} from 'react-native-picker-select'
+import {MARGIN} from './constants'
+
+export interface Item {
+  value: string
+  label: string
+  color?: string
+}
 
 export default function Select({
   value,
@@ -12,17 +17,39 @@ export default function Select({
   onChange: (value: string) => void
   items: Item[]
 }) {
-  const {colors} = useTheme()
   const [show, setShow] = useState(false)
+  const {colors} = useTheme()
+
+  const selected = useMemo(
+    () => items.find(item => item.value === value),
+    [items, value],
+  )
+
+  const handlePress = useCallback(
+    (newValue: string) => {
+      onChange(newValue)
+      setShow(false)
+    },
+    [onChange],
+  )
 
   return (
     <Menu
-      style={{alignSelf: 'flex-start', justifyContent: 'flex-start'}}
       visible={show}
       onDismiss={() => setShow(false)}
-      anchor={<Button style={{alignSelf: 'flex-start'}}>{value}</Button>}>
+      anchor={
+        <Button
+          onPress={() => setShow(true)}
+          style={{alignSelf: 'flex-start', marginTop: MARGIN}}>
+          {selected.label}
+        </Button>
+      }>
       {items.map(item => (
-        <Menu.Item title={item.label} onPress={() => onChange(item.value)} />
+        <Menu.Item
+          titleStyle={{color: item.color || colors.text}}
+          title={item.label}
+          onPress={() => handlePress(item.value)}
+        />
       ))}
     </Menu>
   )
diff --git a/SettingsPage.tsx b/SettingsPage.tsx
index d781ba0..12c2603 100644
--- a/SettingsPage.tsx
+++ b/SettingsPage.tsx
@@ -238,7 +238,7 @@ export default function SettingsPage() {
               value={date}
               onChange={changeDate}
               items={formatOptions.map(option => ({
-                label: format(today, option),
+                label: `Date format: ${format(today, option)}`,
                 value: option,
               }))}
             />
diff --git a/package.json b/package.json
index a744b74..4de5be2 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,6 @@
     "react-native-linear-gradient": "^2.6.2",
     "react-native-pager-view": "^6.0.1",
     "react-native-paper": "^4.12.5",
-    "react-native-picker-select": "^8.0.4",
     "react-native-reanimated": "^2.12.0",
     "react-native-safe-area-context": "^4.4.1",
     "react-native-screens": "^3.18.2",
diff --git a/yarn.lock b/yarn.lock
index 0997fb6..1e10a0e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2200,16 +2200,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-native-picker/picker@npm:^1.8.3":
-  version: 1.16.8
-  resolution: "@react-native-picker/picker@npm:1.16.8"
-  peerDependencies:
-    react: 16 || 17
-    react-native: ">=0.57"
-  checksum: c0176e41ba7486bf0a27ab5471315848cb166330313bd12e29ee65b7d2e1dfde22383de6a89be15770d132b33bca1764e64feee3acf22c67c3733fd877d3e91f
-  languageName: node
-  linkType: hard
-
 "@react-native-picker/picker@npm:^2.4.4":
   version: 2.4.8
   resolution: "@react-native-picker/picker@npm:2.4.8"
@@ -7324,7 +7314,6 @@ __metadata:
     react-native-linear-gradient: ^2.6.2
     react-native-pager-view: ^6.0.1
     react-native-paper: ^4.12.5
-    react-native-picker-select: ^8.0.4
     react-native-reanimated: ^2.12.0
     react-native-safe-area-context: ^4.4.1
     react-native-screens: ^3.18.2
@@ -8907,16 +8896,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-native-picker-select@npm:^8.0.4":
-  version: 8.0.4
-  resolution: "react-native-picker-select@npm:8.0.4"
-  dependencies:
-    "@react-native-picker/picker": ^1.8.3
-    lodash.isequal: ^4.5.0
-  checksum: 9656a2f7b330a9e5a8b6b90393140fc5370762d2a14de4c5d31ce43de8abc677870c7f2ee8a493f48535157ddcbc3311cf3f41dac262bd84e50e913f0d4a24ff
-  languageName: node
-  linkType: hard
-
 "react-native-reanimated@npm:^2.12.0":
   version: 2.12.0
   resolution: "react-native-reanimated@npm:2.12.0"