Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 | 1x 32x 1x 3x 3x 13x 13x 1x 1x 3x 3x 10x 10x 1x 1x 3x 3x 7x 7x 1x 2x 1x 5x 5x 5x 2x 3x 3x 3x 3x 3x 2x 1x 2x | import React from 'react';
import { Text, View } from 'react-native';
import { Avatar } from '@repo/ui/components/Avatar';
import { useStyles } from './styles';
type TableUserRowProps = {
row: unknown;
};
const toText = (value: unknown) =>
typeof value === 'string' || typeof value === 'number' ? String(value).trim() : '';
const getAvatarUrl = (row: Record<string, unknown>) => {
const keys = ['avatar', 'avatarUrl', 'image', 'imageUrl', 'photo', 'photoUrl'];
for (const key of keys) {
const value = toText(row[key]);
if (value) return value;
}
return '';
};
const getUserName = (row: Record<string, unknown>) => {
const keys = ['username', 'name', 'user', 'fullName', 'id'];
for (const key of keys) {
const value = toText(row[key]);
if (value) return value;
}
return '';
};
const getUserRole = (row: Record<string, unknown>) => {
const keys = ['role', 'position', 'title'];
for (const key of keys) {
const value = toText(row[key]);
if (value) return value;
}
return '';
};
const formatRoleLabel = (role: string) => role.charAt(0).toUpperCase() + role.slice(1);
export const TableUserRow: React.FC<TableUserRowProps> = ({ row }) => {
const styles = useStyles();
const normalizedRow =
row && typeof row === 'object' && !Array.isArray(row) ? (row as Record<string, unknown>) : null;
if (!normalizedRow) {
return <Text style={styles.tableCell}>{toText(row) || '-'}</Text>;
}
const avatarUrl = getAvatarUrl(normalizedRow);
const userName = getUserName(normalizedRow);
const userRole = getUserRole(normalizedRow);
const hasUserRole = Boolean(userRole);
if (userName || userRole || avatarUrl) {
return (
<View style={styles.tableUserRow}>
<Avatar uri={avatarUrl || undefined} name={userName || 'U'} size={40} />
{hasUserRole ? (
<View style={styles.tableUserMeta}>
<Text numberOfLines={1} style={styles.tableUserName}>
{userName || '-'}
</Text>
<Text numberOfLines={1} style={styles.tableUserRole}>
{formatRoleLabel(userRole)}
</Text>
</View>
) : (
<View style={[styles.tableUserMeta, styles.tableUserMetaCentered]}>
<View style={styles.tableUserNameOnlyWrapper}>
<Text numberOfLines={1} style={styles.tableUserName}>
{userName || '-'}
</Text>
</View>
</View>
)}
</View>
);
}
return (
<>
{Object.values(normalizedRow).map((value, index) => (
<Text key={`table-fallback-${index}`} style={styles.tableCell}>
{String(value)}
</Text>
))}
</>
);
};
|