Add labels to selects

Select.tsx

@@ -1,6 +1,6 @@
 import {useCallback, useMemo, useState} from 'react'
-import {Button, Menu, useTheme} from 'react-native-paper'
+import {View} from 'react-native'
-import {MARGIN} from './constants'
+import {Button, Menu, Subheading, useTheme} from 'react-native-paper'
 
 export interface Item {
   value: string
@@ -12,10 +12,12 @@ export default function Select({
   value,
   onChange,
   items,
+  label,
 }: {
   value: string
   onChange: (value: string) => void
   items: Item[]
+  label?: string
 }) {
   const [show, setShow] = useState(false)
   const {colors} = useTheme()
@@ -34,27 +36,33 @@ export default function Select({
   )
 
   return (
-    <Menu
+    <View
-      visible={show}
+      style={{
-      onDismiss={() => setShow(false)}
+        flexDirection: 'row',
-      anchor={
+        alignItems: 'center',
-        <Button
+      }}>
-          onPress={() => setShow(true)}
+      {label && <Subheading>{label}</Subheading>}
-          style={{
+      <Menu
-            alignSelf: 'flex-start',
+        visible={show}
-            marginTop: MARGIN,
+        onDismiss={() => setShow(false)}
-          }}>
+        anchor={
-          {selected?.label}
+          <Button
-        </Button>
+            onPress={() => setShow(true)}
-      }>
+            style={{
-      {items.map(item => (
+              alignSelf: 'flex-start',
-        <Menu.Item
+            }}>
-          key={item.value}
+            {selected?.label}
-          titleStyle={{color: item.color || colors.text}}
+          </Button>
-          title={item.label}
+        }>
-          onPress={() => handlePress(item.value)}
+        {items.map(item => (
-        />
+          <Menu.Item
-      ))}
+            key={item.value}
-    </Menu>
+            titleStyle={{color: item.color || colors.text}}
+            title={item.label}
+            onPress={() => handlePress(item.value)}
+          />
+        ))}
+      </Menu>
+    </View>
   )
 }

SettingsPage.tsx

@@ -6,9 +6,10 @@ import {
   FlatList,
   NativeModules,
   Platform,
+  View,
 } from 'react-native'
 import DocumentPicker from 'react-native-document-picker'
-import {Button} from 'react-native-paper'
+import {Button, Subheading} from 'react-native-paper'
 import {darkColors, lightColors} from './colors'
 import {MARGIN} from './constants'
 import {settingsRepo} from './db'
@@ -232,6 +233,7 @@ export default function SettingsPage() {
         />
         {'theme'.includes(term.toLowerCase()) && (
           <Select
+            label="Theme"
             value={theme}
             onChange={changeTheme}
             items={[
@@ -243,10 +245,11 @@ export default function SettingsPage() {
         )}
         {'color'.includes(term.toLowerCase()) && (
           <Select
+            label="Dark color"
             value={darkColor}
             onChange={changeDarkColor}
             items={lightColors.map(color => ({
-              label: `Dark color: ${color.name}`,
+              label: color.name,
               value: color.hex,
               color: color.hex,
             }))}
@@ -256,8 +259,9 @@ export default function SettingsPage() {
           <Select
             value={lightColor}
             onChange={changeLightColor}
+            label="Light color"
             items={darkColors.map(color => ({
-              label: `Light color: ${color.name}`,
+              label: color.name,
               value: color.hex,
               color: color.hex,
             }))}
@@ -267,18 +271,22 @@ export default function SettingsPage() {
           <Select
             value={date}
             onChange={changeDate}
+            label="Date format"
             items={formatOptions.map(option => ({
-              label: `Date format: ${format(today, option)}`,
+              label: format(today, option),
               value: option,
             }))}
           />
         )}
         {'alarm sound'.includes(term.toLowerCase()) && (
-          <Button
+          <View
-            style={{alignSelf: 'flex-start', marginTop: MARGIN}}
+            style={{
-            onPress={changeSound}>
+              flexDirection: 'row',
-            Alarm sound{soundString}
+              alignItems: 'center',
-          </Button>
+            }}>
+            <Subheading>Alarm sound</Subheading>
+            <Button onPress={changeSound}>{soundString || 'Default'}</Button>
+          </View>
         )}
       </Page>
     </>

ViewBest.tsx

@@ -102,6 +102,7 @@ export default function ViewBest() {
       <StackHeader title={params.best.name} />
       <View style={{padding: PADDING}}>
         <Select
+          label="Metric"
           items={[
             {value: Metrics.Volume, label: Metrics.Volume},
             {value: Metrics.OneRepMax, label: Metrics.OneRepMax},
@@ -114,6 +115,7 @@ export default function ViewBest() {
           value={metric}
         />
         <Select
+          label="Period"
           items={[
             {value: Periods.Weekly, label: Periods.Weekly},
             {value: Periods.Monthly, label: Periods.Monthly},