46 lines
1.6 KiB
TypeScript
46 lines
1.6 KiB
TypeScript
import { PersonChip } from '@/people/components/PersonChip';
|
|
import { EditableField } from '@/ui/editable-field/components/EditableField';
|
|
import { FieldContext } from '@/ui/editable-field/states/FieldContext';
|
|
import { IconUserCircle } from '@/ui/icon';
|
|
import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope';
|
|
import { RelationPickerHotkeyScope } from '@/ui/relation-picker/types/RelationPickerHotkeyScope';
|
|
import { Company, User } from '~/generated/graphql';
|
|
|
|
import { CompanyAccountOwnerPickerFieldEditMode } from './CompanyAccountOwnerPickerFieldEditMode';
|
|
|
|
type OwnProps = {
|
|
company: Pick<Company, 'id' | 'accountOwnerId'> & {
|
|
accountOwner?: Pick<User, 'id' | 'displayName' | 'avatarUrl'> | null;
|
|
};
|
|
};
|
|
|
|
export function CompanyAccountOwnerEditableField({ company }: OwnProps) {
|
|
return (
|
|
<RecoilScope SpecificContext={FieldContext}>
|
|
<RecoilScope>
|
|
<EditableField
|
|
customEditHotkeyScope={{
|
|
scope: RelationPickerHotkeyScope.RelationPicker,
|
|
}}
|
|
iconLabel={<IconUserCircle />}
|
|
editModeContent={
|
|
<CompanyAccountOwnerPickerFieldEditMode company={company} />
|
|
}
|
|
displayModeContent={
|
|
company.accountOwner?.displayName ? (
|
|
<PersonChip
|
|
id={company.accountOwner.id}
|
|
name={company.accountOwner?.displayName ?? ''}
|
|
picture={company.accountOwner?.avatarUrl ?? ''}
|
|
/>
|
|
) : (
|
|
<></>
|
|
)
|
|
}
|
|
isDisplayModeContentEmpty={!company.accountOwner}
|
|
/>
|
|
</RecoilScope>
|
|
</RecoilScope>
|
|
);
|
|
}
|