54 lines
1.9 KiB
TypeScript
54 lines
1.9 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 { IconUser } from '@/ui/icon';
|
|
import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope';
|
|
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
|
|
import { Person, PipelineProgress } from '~/generated/graphql';
|
|
|
|
import { PipelineProgressPointOfContactPickerFieldEditMode } from './PipelineProgressPointOfContactPickerFieldEditMode';
|
|
|
|
type OwnProps = {
|
|
pipelineProgress: Pick<PipelineProgress, 'id' | 'pointOfContactId'> & {
|
|
pointOfContact?: Pick<Person, 'id' | 'displayName' | 'avatarUrl'> | null;
|
|
};
|
|
};
|
|
|
|
export function PipelineProgressPointOfContactEditableField({
|
|
pipelineProgress,
|
|
}: OwnProps) {
|
|
return (
|
|
<RecoilScope SpecificContext={FieldContext}>
|
|
<RecoilScope>
|
|
<EditableField
|
|
useEditButton
|
|
customEditHotkeyScope={{
|
|
scope: RelationPickerHotkeyScope.RelationPicker,
|
|
}}
|
|
iconLabel={<IconUser />}
|
|
editModeContent={
|
|
<PipelineProgressPointOfContactPickerFieldEditMode
|
|
pipelineProgress={pipelineProgress}
|
|
/>
|
|
}
|
|
displayModeContent={
|
|
pipelineProgress.pointOfContact ? (
|
|
<PersonChip
|
|
id={pipelineProgress.pointOfContact.id}
|
|
name={pipelineProgress.pointOfContact.displayName}
|
|
pictureUrl={
|
|
pipelineProgress.pointOfContact.avatarUrl ?? undefined
|
|
}
|
|
/>
|
|
) : (
|
|
<></>
|
|
)
|
|
}
|
|
isDisplayModeContentEmpty={!pipelineProgress.pointOfContact}
|
|
isDisplayModeFixHeight
|
|
/>
|
|
</RecoilScope>
|
|
</RecoilScope>
|
|
);
|
|
}
|