use menu in SaveItemScreen

zetavg · Jan 21, 2024 · dbb5911 · dbb5911
1 parent a72a768
commit dbb5911
Show file tree

Hide file tree

Showing 5 changed files with 260 additions and 70 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;