diff --git a/native/profile/linked-devices-list-item.react.js b/native/profile/linked-devices-list-item.react.js index fea481b80..4814c18b5 100644 --- a/native/profile/linked-devices-list-item.react.js +++ b/native/profile/linked-devices-list-item.react.js @@ -1,143 +1,148 @@ // @flow import { useNavigation } from '@react-navigation/native'; import * as React from 'react'; import { View, TouchableOpacity } from 'react-native'; import { type IdentityPlatformDetails, identityDeviceTypes, } from 'lib/types/identity-service-types.js'; import Pill from '../components/pill.react.js'; import SWMIcon from '../components/swmansion-icon.react.js'; import { LinkedDevicesBottomSheetRouteName } from '../navigation/route-names.js'; import { useStyles, useColors } from '../themes/colors.js'; type Props = { +deviceID: string, +platformDetails: ?IdentityPlatformDetails, +isPrimary: boolean, +isThisDevice: boolean, +shouldAllowDeviceRemoval: boolean, }; function LinkedDevicesListItem(props: Props): React.Node { const { deviceID, platformDetails, isPrimary, isThisDevice, shouldAllowDeviceRemoval, } = props; const styles = useStyles(unboundStyles); const colors = useColors(); const { navigate } = useNavigation(); const onPress = React.useCallback(() => { if (!shouldAllowDeviceRemoval) { return; } navigate<'LinkedDevicesBottomSheet'>({ name: LinkedDevicesBottomSheetRouteName, params: { deviceID, shouldDisplayRemoveButton: shouldAllowDeviceRemoval, }, }); }, [deviceID, navigate, shouldAllowDeviceRemoval]); const deviceType = platformDetails?.deviceType; const deviceIcon = React.useMemo(() => { let name; if ( deviceType === identityDeviceTypes.IOS || deviceType === identityDeviceTypes.ANDROID ) { name = 'phone'; } else if (deviceType === identityDeviceTypes.KEYSERVER) { name = 'cloud'; } else if (deviceType === identityDeviceTypes.WEB) { name = 'globe-1'; } else { name = 'question'; } return ( ); }, [deviceType, colors.panelForegroundLabel]); const label = React.useMemo(() => { const baseLabel = deviceID.substr(0, 7); - let finalLabel = baseLabel; + const labelAttributes = []; if (isPrimary) { - finalLabel += ' (primary)'; + labelAttributes.push('primary'); } - if (isThisDevice) { - finalLabel += ' (this device)'; + labelAttributes.push('this device'); + } + + if (labelAttributes.length === 0) { + return baseLabel; } + const joinedAttributes = labelAttributes.join(', '); + const finalLabel = `${baseLabel} (${joinedAttributes})`; return finalLabel; }, [deviceID, isPrimary, isThisDevice]); const deviceListItem = React.useMemo(() => { let editIcon; if (shouldAllowDeviceRemoval) { editIcon = ( ); } return ( {editIcon} ); }, [ styles.listItemContainer, styles.pillContainer, onPress, label, colors.codeBackground, colors.modalForegroundSecondaryLabel, deviceIcon, shouldAllowDeviceRemoval, ]); return deviceListItem; } const unboundStyles = { listItemContainer: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingHorizontal: 24, paddingVertical: 10, }, pillContainer: { flex: 1, alignItems: 'baseline', }, }; export default LinkedDevicesListItem;