feat: PersonInChip => PersonOrGroupInChip

src/components/shared/SelectPeople/PersonOrGroupInChip.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react'
+import { Avatar } from '../../../utils/components/Avatar'
+import MuiAvatar from '@material-ui/core/Avatar/Avatar'
+import { Chip } from '@material-ui/core'
+import { Person, Group } from '../../../database'
+
+interface SharedProps {
+    onDelete?(): void
+    disabled?: boolean
+}
+interface PersonChipProps {
+    type: 'person'
+    item: Person
+}
+interface GroupChipProps {
+    type: 'group'
+    item: Group
+}
+export function PersonOrGroupInChip(props: SharedProps & (PersonChipProps | GroupChipProps)) {
+    const { disabled, onDelete } = props
+    let avatar: ReturnType<typeof Avatar> | undefined = undefined
+    let displayName = ''
+    if (props.type === 'group') {
+        const group = props.item
+        displayName = group.groupName
+        avatar = group.avatar ? <MuiAvatar aria-label={displayName} src={avatar} /> : undefined
+    } else {
+        const person = props.item
+        displayName = person.nickname || person.identifier.userId
+        avatar = person.avatar ? <Avatar person={person} /> : undefined
+    }
+
+    return (
+        <Chip
+            style={{ marginRight: 6, marginBottom: 6 }}
+            color="primary"
+            onDelete={disabled ? undefined : onDelete}
+            label={displayName}
+            avatar={avatar}
+        />
+    )
+}

src/components/shared/SelectPeople/SelectPeopleUI.tsx

@@ -4,7 +4,7 @@ import { makeStyles, ListItem, ListItemText, InputBase, Button, List, Box } from
 import { Person } from '../../../database'
 import { useCurrentIdentity } from '../../DataSource/useActivatedUI'
 import { PersonInList } from './PeopleInList'
-import { PersonInChip } from './PersonInChip'
+import { PersonOrGroupInChip } from './PersonOrGroupInChip'
 interface SelectPeopleUIProps {
     ignoreMyself?: boolean
     people: Person[]
@@ -126,14 +126,15 @@ export function SelectPeopleUI(props: SelectPeopleUIProps) {
         )
     }
     function FrozenChip(person: Person) {
-        return <PersonInChip disabled key={person.identifier.userId} person={person} />
+        return <PersonOrGroupInChip disabled key={person.identifier.userId} type="person" item={person} />
     }
     function RemovableChip(person: Person) {
         return (
-            <PersonInChip
+            <PersonOrGroupInChip
                 disabled={disabled}
                 key={person.identifier.userId}
-                person={person}
+                type="person"
+                item={person}
                 onDelete={() => onSetSelected(selected.filter(x => x.identifier.userId !== person.identifier.userId))}
             />
         )

src/components/shared/SelectPeople/index.tsx

@@ -1,3 +1,3 @@
 export * from './SelectPeopleUI'
 export * from './PeopleInList'
-export * from './PersonInChip'
+export * from './PersonOrGroupInChip'