Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

OHRI-452 Form Patient Banner - Optional hideActionsOverflow, optional param #598

Merged
merged 2 commits into from
Mar 9, 2022
Merged

OHRI-452 Form Patient Banner - Optional hideActionsOverflow, optional param #598

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7b5b021
Include hideActionsOverflow, optional param
larslemos Mar 9, 2022
8f7cc36
Fix styleguide lint
larslemos Mar 9, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 27 additions & 18 deletions packages/esm-patient-banner-app/src/banner/patient-banner.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,16 @@ interface PatientBannerProps {
patientUuid: string;
onClick?: (patientUuid: string) => void;
onTransition?: () => void;
hideActionsOverflow?: boolean;
}

const PatientBanner: React.FC<PatientBannerProps> = ({ patient, patientUuid, onClick, onTransition }) => {
const PatientBanner: React.FC<PatientBannerProps> = ({
patient,
patientUuid,
onClick,
onTransition,
hideActionsOverflow,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would be preferable, I think, to do this via configuration, not through code.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How will you otherwise be passing this prop to the banner? Perhaps the configuration happens upstream?

Copy link
Contributor Author

@larslemos larslemos Mar 9, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Well, this solution took a lot of turns.
1st Initially the plan was to make a stylesheet appracoach
2nd Tried using hooks, but then after an event, the re-render was paiting again the Action.
3rd Is the current commit.

The alternative way would be below.

Have to refactor the module and:

  1. In patient-banner-component.tsx: Add an extension slot to act as a container for the Actions Overflow (actions-overflow-container)

  2. In /src, create a new folder (actions) with a component that returns the code for CustomOverflowMenuComponent

  3. In /src/index.ts, attach the actions component to the actions-overflow-container extension

  4. In OHRI, add config to remove actions-overflow-container extension when rendering OHRIForm

This does mean it will, work cause every time I try something, there is a new side-effect I learn from the esm behaviour.
@samuelmale @brandones your views?

Copy link
Contributor

@brandones brandones Mar 9, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We are going to completely refactor this component, @larslemos . This solution is temporary. As stated below.

}) => {
const { t } = useTranslation();
const overFlowMenuRef = React.useRef(null);

Expand Down Expand Up @@ -66,23 +73,25 @@ const PatientBanner: React.FC<PatientBannerProps> = ({ patient, patientUuid, onC
className={styles.flexRow}
/>
</div>
<div ref={overFlowMenuRef}>
<CustomOverflowMenuComponent
menuTitle={
<>
<span className={styles.actionsButtonText}>{t('actions', 'Actions')}</span>{' '}
<OverflowMenuVertical16 style={{ marginLeft: '0.5rem' }} />
</>
}
>
<ExtensionSlot
extensionSlotName="patient-actions-slot"
key="patient-actions-slot"
className={styles.overflowMenuItemList}
state={patientActionsSlotState}
/>
</CustomOverflowMenuComponent>
</div>
{!hideActionsOverflow && (
<div ref={overFlowMenuRef}>
<CustomOverflowMenuComponent
menuTitle={
<>
<span className={styles.actionsButtonText}>{t('actions', 'Actions')}</span>{' '}
<OverflowMenuVertical16 style={{ marginLeft: '0.5rem' }} />
</>
}
>
<ExtensionSlot
extensionSlotName="patient-actions-slot"
key="patient-actions-slot"
className={styles.overflowMenuItemList}
state={patientActionsSlotState}
/>
</CustomOverflowMenuComponent>
</div>
)}
</div>
<div className={styles.demographics}>
<span>{capitalize(patient.gender)}</span> &middot; <span>{age(patient.birthDate)}</span> &middot;{' '}
Expand Down