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; children?: JSX.Element | undefined; + style?: StyleProp; 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 ? ( - - - {unit} - - - ) : ( - {unit} - ) - ) : null} + {unit + ? (() => { + const pressable = onUnitPress || onUnitLongPress; + const element = pressable ? ( + + + {unit} + + + ) : ( + {unit} + ); + + if (renderUnit) + return renderUnit({ + children: element, + style: pressable ? styles.pressableUnitContainer : {}, + }); + return element; + })() + : null} {controlElement && (!vertical2 || !label) ? ( {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')} /> + {}} + renderUnit={({ children, style }) => ( + 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} + + )} + /> + Alert.alert('Unit Pressed')} /> + {}} + renderUnit={({ children, style }) => ( + 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} + + )} + /> + void; + onUnitLongPress?: () => void; + renderUnit?: (props: { + children: JSX.Element; + style: React.ComponentProps['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>( + () => [ + { + 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 ( ( - - { + const element = ( + { + /* Handled by MenyView */ + } + } > - {/* - - */} - - {((): 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'; - } - })()} - - - - )} + {/* + + */} + + {((): 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'; + } + })()} + + + + ); + + if (!uiShowDetailedInstructions) { + return ( + {element} + ); + } + + return element; + }} controlElement={ - - Select - + uiShowDetailedInstructions ? ( + + Select + + ) : ( + + {}}> + Select + + + ) } {...kiaTextInputProps} /> @@ -1176,7 +1234,35 @@ function SaveItemScreen({ })); }} unit={data.purchase_price_currency} - onUnitPress={handleOpenSelectPurchasePriceCurrency} + // onUnitPress={handleOpenSelectPurchasePriceCurrency} + onUnitPress={() => {}} + renderUnit={({ children, style }) => ( + ({ + 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} + + )} {...kiaTextInputProps} />