forked from ohcnetwork/care_fe
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'develop' into fix#6483
- Loading branch information
Showing
39 changed files
with
1,417 additions
and
1,051 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,158 @@ | ||
| import { createContext, useContext } from "react"; | ||
| import { PerformedByModel } from "../../Components/HCX/misc"; | ||
| import { classNames, formatName } from "../../Utils/utils"; | ||
| import CareIcon, { IconName } from "../icons/CareIcon"; | ||
| import RecordMeta from "./RecordMeta"; | ||
|
|
||
| export interface TimelineEvent<TType = string> { | ||
| type: TType; | ||
| timestamp: string; | ||
| by: PerformedByModel | undefined; | ||
| icon: IconName; | ||
| notes?: string; | ||
| cancelled?: boolean; | ||
| } | ||
|
|
||
| interface TimelineProps { | ||
| className: string; | ||
| children: React.ReactNode | React.ReactNode[]; | ||
| name: string; | ||
| } | ||
|
|
||
| const TimelineContext = createContext(""); | ||
|
|
||
| export default function Timeline({ className, children, name }: TimelineProps) { | ||
| return ( | ||
| <div className={className}> | ||
| <ol role="list" className="space-y-6"> | ||
| <TimelineContext.Provider value={name}> | ||
| {children} | ||
| </TimelineContext.Provider> | ||
| </ol> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| interface TimelineNodeProps { | ||
| event: TimelineEvent; | ||
| title?: React.ReactNode; | ||
| /** | ||
| * Used to add a suffix to the auto-generated title. Will be ignored if `title` is provided. | ||
| */ | ||
| titleSuffix?: React.ReactNode; | ||
| actions?: React.ReactNode; | ||
| className?: string; | ||
| children?: React.ReactNode; | ||
| name?: string; | ||
| isLast: boolean; | ||
| } | ||
|
|
||
| export const TimelineNode = (props: TimelineNodeProps) => { | ||
| const name = useContext(TimelineContext); | ||
|
|
||
| return ( | ||
| <li className="relative flex gap-x-4"> | ||
| <div | ||
| className={classNames( | ||
| props.isLast ? "h-6" : "-bottom-6", | ||
| "absolute left-0 top-0 flex w-6 justify-center" | ||
| )} | ||
| > | ||
| <div className="w-px bg-gray-300" /> | ||
| </div> | ||
|
|
||
| <div | ||
| className={classNames( | ||
| props.className, | ||
| "group flex w-full flex-col items-start gap-y-1" | ||
| )} | ||
| > | ||
| <div className="relative flex w-full justify-between gap-x-4"> | ||
| <div | ||
| className={classNames( | ||
| "flex w-full gap-x-4", | ||
| props.event.cancelled && "line-through" | ||
| )} | ||
| > | ||
| {props.title || ( | ||
| <TimelineNodeTitle event={props.event}> | ||
| <p className="flex-auto py-0.5 text-xs leading-5 text-gray-600"> | ||
| {props.event.by && ( | ||
| <span className="font-medium text-gray-900"> | ||
| {formatName(props.event.by)}{" "} | ||
| </span> | ||
| )} | ||
| {props.titleSuffix | ||
| ? props.titleSuffix | ||
| : `${props.event.type} the ${props.name || name}.`} | ||
| </p> | ||
| {props.actions && ( | ||
| <TimelineNodeActions>{props.actions}</TimelineNodeActions> | ||
| )} | ||
| <RecordMeta | ||
| className="flex-none py-0.5 text-xs leading-5 text-gray-500" | ||
| time={props.event.timestamp} | ||
| /> | ||
| </TimelineNodeTitle> | ||
| )} | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className="flex w-full flex-col items-start gap-y-2 pl-10"> | ||
| <TimelineNodeNotes>{props.event.notes}</TimelineNodeNotes> | ||
| {props.children} | ||
| </div> | ||
| </div> | ||
| </li> | ||
| ); | ||
| }; | ||
|
|
||
| interface TimelineNodeTitleProps { | ||
| children: React.ReactNode | React.ReactNode[]; | ||
| event: TimelineEvent; | ||
| } | ||
|
|
||
| export const TimelineNodeTitle = (props: TimelineNodeTitleProps) => { | ||
| return ( | ||
| <> | ||
| <div className="relative flex h-6 w-6 flex-none items-center justify-center rounded-full bg-gray-200 transition-all duration-200 ease-in-out group-hover:bg-primary-500"> | ||
| <CareIcon | ||
| className="text-base text-gray-700 transition-all duration-200 ease-in-out group-hover:text-white" | ||
| aria-hidden="true" | ||
| icon={props.event.icon} | ||
| /> | ||
| </div> | ||
|
|
||
| <div className="flex w-full flex-wrap justify-between gap-2"> | ||
| {props.children} | ||
| </div> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export const TimelineNodeActions = (props: { | ||
| children: React.ReactNode | React.ReactNode[]; | ||
| }) => { | ||
| return <div className="flex justify-end gap-2">{props.children}</div>; | ||
| }; | ||
|
|
||
| interface TimelineNodeNotesProps { | ||
| children?: React.ReactNode | React.ReactNode[]; | ||
| icon?: IconName; | ||
| } | ||
|
|
||
| export const TimelineNodeNotes = ({ | ||
| children, | ||
| icon = "l-notes", | ||
| }: TimelineNodeNotesProps) => { | ||
| if (!children) { | ||
| return; | ||
| } | ||
|
|
||
| return ( | ||
| <div className="flex w-full items-start gap-2 rounded-md p-3 ring-1 ring-inset ring-gray-200"> | ||
| <CareIcon icon={icon} className="text-lg text-gray-700" /> | ||
| <div className="mt-1 flex-auto text-xs text-gray-700">{children}</div> | ||
| </div> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| import useVisibility from "../../Utils/useVisibility"; | ||
| import { classNames } from "../../Utils/utils"; | ||
|
|
||
| interface Props { | ||
| className?: string; | ||
| children: React.ReactNode; | ||
| overlay: React.ReactNode; | ||
| disableOverlay?: boolean; | ||
| } | ||
|
|
||
| export default function ScrollOverlay(props: Props) { | ||
| const [bottomIsVisible, ref] = useVisibility(); | ||
| const hasScrollContent = !props.disableOverlay && !bottomIsVisible; | ||
|
|
||
| return ( | ||
| <div className={classNames("relative", props.className)}> | ||
| {props.children} | ||
|
|
||
| <div ref={ref as any} /> | ||
| <div | ||
| className={classNames( | ||
| "sticky inset-x-0 -bottom-3.5 z-10 flex items-end justify-center bg-gradient-to-t from-gray-900/90 to-transparent text-white transition-all duration-500 ease-in-out md:bottom-0", | ||
| hasScrollContent ? "h-16 opacity-75" : "h-0 opacity-0" | ||
| )} | ||
| > | ||
| {hasScrollContent && props.overlay} | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
12 changes: 5 additions & 7 deletions
12
src/Components/Facility/ConsultationDetails/ConsultationMedicinesTab.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.