From dbb59110aee5fbe61016e14be0e5ed88b5adc7dc Mon Sep 17 00:00:00 2001
From: zetavg <mail@zeta.vg>
Date: Thu, 18 Jan 2024 01:22:12 +0800
Subject: [PATCH] use menu in SaveItemScreen

---
 App/app/components/Menu/MenuView.tsx          |   3 +-
 .../UIGroup/UIGroupListTextInputItem.tsx      |  45 +++--
 App/app/components/UIGroup/examples.tsx       |  89 ++++++++-
 App/app/components/UIGroup/types.ts           |   5 +
 .../inventory/screens/SaveItemScreen.tsx      | 188 +++++++++++++-----
 5 files changed, 260 insertions(+), 70 deletions(-)

diff --git a/App/app/components/Menu/MenuView.tsx b/App/app/components/Menu/MenuView.tsx
index 46c50656..a271fbf2 100644
--- a/App/app/components/Menu/MenuView.tsx
+++ b/App/app/components/Menu/MenuView.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo } from 'react';
-import { Alert, Platform } from 'react-native';
+import { Alert, Platform, StyleProp, ViewStyle } from 'react-native';
 import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
 
 import {
@@ -19,6 +19,7 @@ export type Props = {
   /** Actions in the menu. */
   actions: ReadonlyArray<MenuAction>;
   children?: JSX.Element | undefined;
+  style?: StyleProp<ViewStyle>;
   disabled?: boolean;
 };
 
diff --git a/App/app/components/UIGroup/UIGroupListTextInputItem.tsx b/App/app/components/UIGroup/UIGroupListTextInputItem.tsx
index 9f372e4f..ad2f5db7 100644
--- a/App/app/components/UIGroup/UIGroupListTextInputItem.tsx
+++ b/App/app/components/UIGroup/UIGroupListTextInputItem.tsx
@@ -35,6 +35,8 @@ export default function UIGroupListTextInputItem(
     label,
     unit,
     onUnitPress,
+    onUnitLongPress,
+    renderUnit,
     disabled,
     readonly,
     horizontalLabel,
@@ -83,22 +85,33 @@ export default function UIGroupListTextInputItem(
           ]}
         />
       )}
-      {unit ? (
-        onUnitPress ? (
-          <TouchableOpacity
-            onPress={onUnitPress}
-            style={styles.pressableUnitContainer}
-          >
-            <InsetGroup.ItemAffix
-              style={[styles.pressableUnitText, { color: iosTintColor }]}
-            >
-              {unit}
-            </InsetGroup.ItemAffix>
-          </TouchableOpacity>
-        ) : (
-          <InsetGroup.ItemAffix>{unit}</InsetGroup.ItemAffix>
-        )
-      ) : null}
+      {unit
+        ? (() => {
+            const pressable = onUnitPress || onUnitLongPress;
+            const element = pressable ? (
+              <TouchableOpacity
+                onPress={onUnitPress}
+                onLongPress={onUnitLongPress}
+                style={renderUnit ? {} : styles.pressableUnitContainer}
+              >
+                <InsetGroup.ItemAffix
+                  style={[styles.pressableUnitText, { color: iosTintColor }]}
+                >
+                  {unit}
+                </InsetGroup.ItemAffix>
+              </TouchableOpacity>
+            ) : (
+              <InsetGroup.ItemAffix>{unit}</InsetGroup.ItemAffix>
+            );
+
+            if (renderUnit)
+              return renderUnit({
+                children: element,
+                style: pressable ? styles.pressableUnitContainer : {},
+              });
+            return element;
+          })()
+        : null}
       {controlElement && (!vertical2 || !label) ? (
         <View style={styles.insetGroupTextInputRightElementContainer}>
           {controlElement}
diff --git a/App/app/components/UIGroup/examples.tsx b/App/app/components/UIGroup/examples.tsx
index 9b3fa1aa..d5811838 100644
--- a/App/app/components/UIGroup/examples.tsx
+++ b/App/app/components/UIGroup/examples.tsx
@@ -9,10 +9,10 @@ import {
   View,
 } from 'react-native';
 
+import Icon, { IconName } from '@app/components/Icon';
+import { MenuView } from '@app/components/Menu';
 import UIText from '@app/components/Text';
 
-import Icon, { IconName } from '../Icon';
-
 import UIGroup from './UIGroup';
 
 export function Basic() {
@@ -421,6 +421,48 @@ export function WithListItems() {
           onUnitPress={() => Alert.alert('Unit Pressed')}
         />
         <UIGroup.ListItemSeparator />
+        <UIGroup.ListTextInputItem
+          label="With Pressable Menu Unit"
+          placeholder="0"
+          keyboardType="number-pad"
+          unit="USD"
+          onUnitPress={() => {}}
+          renderUnit={({ children, style }) => (
+            <MenuView
+              style={style}
+              actions={[
+                {
+                  type: 'section',
+                  children: [
+                    {
+                      title: 'USD',
+                      state: 'on',
+                      onPress: () => Alert.alert('USD Pressed'),
+                    },
+                    {
+                      title: 'TWD',
+                      state: 'off',
+                      onPress: () => Alert.alert('TWD Pressed'),
+                    },
+                  ],
+                },
+                {
+                  type: 'section',
+                  children: [
+                    {
+                      title: 'More...',
+                      // sfSymbolName: 'ellipsis.circle',
+                      onPress: () => Alert.alert('More Pressed'),
+                    },
+                  ],
+                },
+              ]}
+            >
+              {children}
+            </MenuView>
+          )}
+        />
+        <UIGroup.ListItemSeparator />
         <UIGroup.ListTextInputItem
           label="With Button"
           placeholder="Placeholder"
@@ -526,6 +568,49 @@ export function WithListItems() {
           onUnitPress={() => Alert.alert('Unit Pressed')}
         />
         <UIGroup.ListItemSeparator />
+        <UIGroup.ListTextInputItem
+          horizontalLabel
+          label="With Pressable Menu Unit"
+          placeholder="0"
+          keyboardType="number-pad"
+          unit="USD"
+          onUnitPress={() => {}}
+          renderUnit={({ children, style }) => (
+            <MenuView
+              style={style}
+              actions={[
+                {
+                  type: 'section',
+                  children: [
+                    {
+                      title: 'USD',
+                      state: 'on',
+                      onPress: () => Alert.alert('USD Pressed'),
+                    },
+                    {
+                      title: 'TWD',
+                      state: 'off',
+                      onPress: () => Alert.alert('TWD Pressed'),
+                    },
+                  ],
+                },
+                {
+                  type: 'section',
+                  children: [
+                    {
+                      title: 'More...',
+                      // sfSymbolName: 'ellipsis.circle',
+                      onPress: () => Alert.alert('More Pressed'),
+                    },
+                  ],
+                },
+              ]}
+            >
+              {children}
+            </MenuView>
+          )}
+        />
+        <UIGroup.ListItemSeparator />
         <UIGroup.ListTextInputItem
           horizontalLabel
           label="With Button"
diff --git a/App/app/components/UIGroup/types.ts b/App/app/components/UIGroup/types.ts
index 51bdd818..91264d1f 100644
--- a/App/app/components/UIGroup/types.ts
+++ b/App/app/components/UIGroup/types.ts
@@ -94,6 +94,11 @@ export type ListTextInputItemProps = {
   label?: string;
   unit?: string;
   onUnitPress?: () => void;
+  onUnitLongPress?: () => void;
+  renderUnit?: (props: {
+    children: JSX.Element;
+    style: React.ComponentProps<typeof View>['style'];
+  }) => React.ReactNode;
   disabled?: boolean;
   readonly?: boolean;
   horizontalLabel?: boolean;
diff --git a/App/app/features/inventory/screens/SaveItemScreen.tsx b/App/app/features/inventory/screens/SaveItemScreen.tsx
index cc3143ee..90daab14 100644
--- a/App/app/features/inventory/screens/SaveItemScreen.tsx
+++ b/App/app/features/inventory/screens/SaveItemScreen.tsx
@@ -42,6 +42,7 @@ import Icon, {
   verifyIconName,
   verifyIconNameWithDefault,
 } from '@app/components/Icon';
+import { MenuAction, MenuView } from '@app/components/Menu';
 import ModalContent from '@app/components/ModalContent';
 import { Link } from '@app/components/Text';
 import UIGroup from '@app/components/UIGroup';
@@ -192,6 +193,8 @@ function SaveItemScreen({
     });
   }, [data.purchase_price_currency, navigation]);
 
+  const currencies = useMemo(() => ['USD', 'TWD'], []);
+
   const { data: selectedContainer } = useData('item', data.container_id || '', {
     disable: !data.container_id,
   });
@@ -524,6 +527,37 @@ function SaveItemScreen({
       false,
   );
 
+  const itemTypeSelections = useMemo<ReadonlyArray<MenuAction>>(
+    () => [
+      {
+        title: 'Item',
+        state: data.item_type === undefined ? 'on' : 'off',
+        onPress: () => setData(d => ({ ...d, item_type: undefined })),
+      },
+      {
+        title: 'Container',
+        state: data.item_type === 'container' ? 'on' : 'off',
+        onPress: () => setData(d => ({ ...d, item_type: 'container' })),
+      },
+      {
+        title: 'Generic Container',
+        state: data.item_type === 'generic_container' ? 'on' : 'off',
+        onPress: () => setData(d => ({ ...d, item_type: 'generic_container' })),
+      },
+      {
+        title: 'Item with Parts',
+        state: data.item_type === 'item_with_parts' ? 'on' : 'off',
+        onPress: () => setData(d => ({ ...d, item_type: 'item_with_parts' })),
+      },
+      {
+        title: 'Consumable',
+        state: data.item_type === 'consumable' ? 'on' : 'off',
+        onPress: () => setData(d => ({ ...d, item_type: 'consumable' })),
+      },
+    ],
+    [data.item_type],
+  );
+
   return (
     <ModalContent
       navigation={navigation}
@@ -653,62 +687,86 @@ function SaveItemScreen({
             label="Item Type"
             horizontalLabel
             // eslint-disable-next-line react/no-unstable-nested-components
-            inputElement={({ textProps, iconProps }) => (
-              <TouchableOpacity
-                style={commonStyles.flex1}
-                onPress={handleOpenSelectItemType}
-              >
-                <View
-                  style={[
-                    commonStyles.flex1,
-                    commonStyles.row,
-                    commonStyles.alignItemsCenter,
-                    commonStyles.justifyContentFlexEnd,
-                  ]}
+            inputElement={({ textProps, iconProps }) => {
+              const element = (
+                <TouchableOpacity
+                  style={commonStyles.flex1}
+                  onPress={
+                    uiShowDetailedInstructions
+                      ? handleOpenSelectItemType
+                      : () => {
+                          /* Handled by MenyView */
+                        }
+                  }
                 >
-                  {/*
-                  <Icon
-                    {...iconProps}
-                    size={16}
-                    showBackground={false}
-                    color={contentSecondaryTextColor}
-                    style={commonStyles.mr4}
-                    name="box"
-                  />
-                  */}
-                  <Text
-                    {...textProps}
+                  <View
                     style={[
-                      textProps.style,
-                      commonStyles.tar,
+                      commonStyles.flex1,
+                      commonStyles.row,
                       commonStyles.alignItemsCenter,
-                      commonStyles.flex0,
+                      commonStyles.justifyContentFlexEnd,
                     ]}
                   >
-                    {((): string => {
-                      switch (data.item_type) {
-                        case 'container':
-                          return 'Container';
-                        case 'generic_container':
-                          return 'Generic Container';
-                        case 'item_with_parts':
-                          return 'Item with Parts';
-                        case 'consumable':
-                          return 'Consumable';
-                        case undefined:
-                          return 'Item';
-                      }
-                    })()}
-                  </Text>
-                </View>
-              </TouchableOpacity>
-            )}
+                    {/*
+                    <Icon
+                      {...iconProps}
+                      size={16}
+                      showBackground={false}
+                      color={contentSecondaryTextColor}
+                      style={commonStyles.mr4}
+                      name="box"
+                    />
+                    */}
+                    <Text
+                      {...textProps}
+                      style={[
+                        textProps.style,
+                        commonStyles.tar,
+                        commonStyles.alignItemsCenter,
+                        commonStyles.flex0,
+                      ]}
+                    >
+                      {((): string => {
+                        switch (data.item_type) {
+                          case 'container':
+                            return 'Container';
+                          case 'generic_container':
+                            return 'Generic Container';
+                          case 'item_with_parts':
+                            return 'Item with Parts';
+                          case 'consumable':
+                            return 'Consumable';
+                          case undefined:
+                            return 'Item';
+                        }
+                      })()}
+                    </Text>
+                  </View>
+                </TouchableOpacity>
+              );
+
+              if (!uiShowDetailedInstructions) {
+                return (
+                  <MenuView actions={itemTypeSelections}>{element}</MenuView>
+                );
+              }
+
+              return element;
+            }}
             controlElement={
-              <UIGroup.ListTextInputItem.Button
-                onPress={handleOpenSelectItemType}
-              >
-                Select
-              </UIGroup.ListTextInputItem.Button>
+              uiShowDetailedInstructions ? (
+                <UIGroup.ListTextInputItem.Button
+                  onPress={handleOpenSelectItemType}
+                >
+                  Select
+                </UIGroup.ListTextInputItem.Button>
+              ) : (
+                <MenuView actions={itemTypeSelections}>
+                  <UIGroup.ListTextInputItem.Button onPress={() => {}}>
+                    Select
+                  </UIGroup.ListTextInputItem.Button>
+                </MenuView>
+              )
             }
             {...kiaTextInputProps}
           />
@@ -1176,7 +1234,35 @@ function SaveItemScreen({
               }));
             }}
             unit={data.purchase_price_currency}
-            onUnitPress={handleOpenSelectPurchasePriceCurrency}
+            // onUnitPress={handleOpenSelectPurchasePriceCurrency}
+            onUnitPress={() => {}}
+            renderUnit={({ children, style }) => (
+              <MenuView
+                style={style}
+                actions={[
+                  {
+                    type: 'section',
+                    children: currencies.map(c => ({
+                      title: c,
+                      state: c === data.purchase_price_currency ? 'on' : 'off',
+                      onPress: () =>
+                        setData(d => ({ ...d, purchase_price_currency: c })),
+                    })),
+                  },
+                  {
+                    type: 'section',
+                    children: [
+                      {
+                        title: 'More...',
+                        onPress: handleOpenSelectPurchasePriceCurrency,
+                      },
+                    ],
+                  },
+                ]}
+              >
+                {children}
+              </MenuView>
+            )}
             {...kiaTextInputProps}
           />
           <UIGroup.ListItemSeparator />