-
Notifications
You must be signed in to change notification settings - Fork 203
/
allergies-action-menu.component.tsx
60 lines (55 loc) · 1.87 KB
/
allergies-action-menu.component.tsx
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
import React, { useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { Layer, OverflowMenu, OverflowMenuItem } from '@carbon/react';
import { launchPatientWorkspace } from '@openmrs/esm-patient-common-lib';
import { showModal, useLayoutType } from '@openmrs/esm-framework';
import { type Allergy } from './allergy-intolerance.resource';
import styles from './allergies-action-menu.scss';
import { patientAllergiesFormWorkspace } from '../constants';
interface allergiesActionMenuProps {
allergy: Allergy;
patientUuid?: string;
}
export const AllergiesActionMenu = ({ allergy, patientUuid }: allergiesActionMenuProps) => {
const { t } = useTranslation();
const isTablet = useLayoutType() === 'tablet';
const launchEditAllergiesForm = useCallback(() => {
launchPatientWorkspace(patientAllergiesFormWorkspace, {
workspaceTitle: t('editAllergy', 'Edit an Allergy'),
allergy,
formContext: 'editing',
});
}, [allergy, t]);
const launchDeleteAllergyDialog = (allergyId: string) => {
const dispose = showModal('allergy-delete-confirmation-dialog', {
closeDeleteModal: () => dispose(),
allergyId,
patientUuid,
});
};
return (
<Layer className={styles.layer}>
<OverflowMenu
aria-label={t('editOrDeleteAllergy', 'Edit or delete allergy')}
size={isTablet ? 'lg' : 'sm'}
flipped
align="left"
>
<OverflowMenuItem
className={styles.menuItem}
id="editAllergy"
onClick={launchEditAllergiesForm}
itemText={t('edit', 'Edit')}
/>
<OverflowMenuItem
className={styles.menuItem}
id="deleteAllergy"
itemText={t('delete', 'Delete')}
onClick={() => launchDeleteAllergyDialog(allergy.id)}
isDelete
hasDivider
/>
</OverflowMenu>
</Layer>
);
};