@ltht-react/timeline 2.0.190 → 2.0.192
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +19 -19
- package/package.json +10 -10
- package/src/atoms/time-element.tsx +52 -52
- package/src/atoms/timeline-author.tsx +88 -88
- package/src/atoms/timeline-button.tsx +44 -44
- package/src/atoms/timeline-description.tsx +52 -52
- package/src/atoms/timeline-time.tsx +69 -69
- package/src/atoms/timeline-title-redacted.tsx +13 -13
- package/src/atoms/timeline-title.tsx +41 -41
- package/src/constants.ts +3 -3
- package/src/index.tsx +6 -6
- package/src/molecules/timeline-item-redacted.tsx +47 -47
- package/src/molecules/timeline-item.tsx +130 -130
- package/src/organisms/timeline.tsx +419 -419
|
@@ -1,69 +1,69 @@
|
|
|
1
|
-
import { FC, HTMLAttributes } from 'react'
|
|
2
|
-
import {
|
|
3
|
-
AuditEvent,
|
|
4
|
-
DocumentReference,
|
|
5
|
-
Maybe,
|
|
6
|
-
QuestionnaireResponse,
|
|
7
|
-
TimelineDomainResourceType,
|
|
8
|
-
} from '@ltht-react/types'
|
|
9
|
-
import TimeElement, { Orientation } from './time-element'
|
|
10
|
-
|
|
11
|
-
const TimelineTime: FC<Props> = ({
|
|
12
|
-
domainResource,
|
|
13
|
-
domainResourceType,
|
|
14
|
-
orientation,
|
|
15
|
-
pointInTimeClickHandler,
|
|
16
|
-
...rest
|
|
17
|
-
}) => {
|
|
18
|
-
if (!domainResource) return <></>
|
|
19
|
-
|
|
20
|
-
switch (domainResourceType) {
|
|
21
|
-
case TimelineDomainResourceType.QuestionnaireResponse: {
|
|
22
|
-
const qr = domainResource as QuestionnaireResponse
|
|
23
|
-
if (!qr?.authored?.value) {
|
|
24
|
-
return null
|
|
25
|
-
}
|
|
26
|
-
const date = new Date(qr?.authored.value)
|
|
27
|
-
return (
|
|
28
|
-
<div {...rest}>
|
|
29
|
-
<TimeElement orientation={orientation} date={date} pointInTimeClicked={pointInTimeClickHandler} />
|
|
30
|
-
</div>
|
|
31
|
-
)
|
|
32
|
-
}
|
|
33
|
-
case TimelineDomainResourceType.DocumentReference: {
|
|
34
|
-
const docRef = domainResource as DocumentReference
|
|
35
|
-
if (docRef && docRef?.created?.value) {
|
|
36
|
-
const date = new Date(docRef.created.value)
|
|
37
|
-
return (
|
|
38
|
-
<div {...rest}>
|
|
39
|
-
<TimeElement orientation={orientation} date={date} pointInTimeClicked={pointInTimeClickHandler} />
|
|
40
|
-
</div>
|
|
41
|
-
)
|
|
42
|
-
}
|
|
43
|
-
return null
|
|
44
|
-
}
|
|
45
|
-
case TimelineDomainResourceType.AuditEvent: {
|
|
46
|
-
const audit = domainResource as AuditEvent
|
|
47
|
-
if (audit && audit?.recorded?.value) {
|
|
48
|
-
const date = new Date(audit.recorded.value)
|
|
49
|
-
return (
|
|
50
|
-
<div {...rest}>
|
|
51
|
-
<TimeElement orientation={orientation} date={date} pointInTimeClicked={pointInTimeClickHandler} />
|
|
52
|
-
</div>
|
|
53
|
-
)
|
|
54
|
-
}
|
|
55
|
-
return null
|
|
56
|
-
}
|
|
57
|
-
default:
|
|
58
|
-
return null
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
interface Props extends HTMLAttributes<HTMLDivElement> {
|
|
63
|
-
domainResource?: Maybe<AuditEvent | QuestionnaireResponse | DocumentReference>
|
|
64
|
-
domainResourceType: TimelineDomainResourceType
|
|
65
|
-
orientation?: Orientation
|
|
66
|
-
pointInTimeClickHandler?: (date: Date) => void
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
export default TimelineTime
|
|
1
|
+
import { FC, HTMLAttributes } from 'react'
|
|
2
|
+
import {
|
|
3
|
+
AuditEvent,
|
|
4
|
+
DocumentReference,
|
|
5
|
+
Maybe,
|
|
6
|
+
QuestionnaireResponse,
|
|
7
|
+
TimelineDomainResourceType,
|
|
8
|
+
} from '@ltht-react/types'
|
|
9
|
+
import TimeElement, { Orientation } from './time-element'
|
|
10
|
+
|
|
11
|
+
const TimelineTime: FC<Props> = ({
|
|
12
|
+
domainResource,
|
|
13
|
+
domainResourceType,
|
|
14
|
+
orientation,
|
|
15
|
+
pointInTimeClickHandler,
|
|
16
|
+
...rest
|
|
17
|
+
}) => {
|
|
18
|
+
if (!domainResource) return <></>
|
|
19
|
+
|
|
20
|
+
switch (domainResourceType) {
|
|
21
|
+
case TimelineDomainResourceType.QuestionnaireResponse: {
|
|
22
|
+
const qr = domainResource as QuestionnaireResponse
|
|
23
|
+
if (!qr?.authored?.value) {
|
|
24
|
+
return null
|
|
25
|
+
}
|
|
26
|
+
const date = new Date(qr?.authored.value)
|
|
27
|
+
return (
|
|
28
|
+
<div {...rest}>
|
|
29
|
+
<TimeElement orientation={orientation} date={date} pointInTimeClicked={pointInTimeClickHandler} />
|
|
30
|
+
</div>
|
|
31
|
+
)
|
|
32
|
+
}
|
|
33
|
+
case TimelineDomainResourceType.DocumentReference: {
|
|
34
|
+
const docRef = domainResource as DocumentReference
|
|
35
|
+
if (docRef && docRef?.created?.value) {
|
|
36
|
+
const date = new Date(docRef.created.value)
|
|
37
|
+
return (
|
|
38
|
+
<div {...rest}>
|
|
39
|
+
<TimeElement orientation={orientation} date={date} pointInTimeClicked={pointInTimeClickHandler} />
|
|
40
|
+
</div>
|
|
41
|
+
)
|
|
42
|
+
}
|
|
43
|
+
return null
|
|
44
|
+
}
|
|
45
|
+
case TimelineDomainResourceType.AuditEvent: {
|
|
46
|
+
const audit = domainResource as AuditEvent
|
|
47
|
+
if (audit && audit?.recorded?.value) {
|
|
48
|
+
const date = new Date(audit.recorded.value)
|
|
49
|
+
return (
|
|
50
|
+
<div {...rest}>
|
|
51
|
+
<TimeElement orientation={orientation} date={date} pointInTimeClicked={pointInTimeClickHandler} />
|
|
52
|
+
</div>
|
|
53
|
+
)
|
|
54
|
+
}
|
|
55
|
+
return null
|
|
56
|
+
}
|
|
57
|
+
default:
|
|
58
|
+
return null
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
interface Props extends HTMLAttributes<HTMLDivElement> {
|
|
63
|
+
domainResource?: Maybe<AuditEvent | QuestionnaireResponse | DocumentReference>
|
|
64
|
+
domainResourceType: TimelineDomainResourceType
|
|
65
|
+
orientation?: Orientation
|
|
66
|
+
pointInTimeClickHandler?: (date: Date) => void
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
export default TimelineTime
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { FC, HTMLAttributes } from 'react'
|
|
2
|
-
import { TEXT_COLOURS } from '@ltht-react/styles'
|
|
3
|
-
import styled from '@emotion/styled'
|
|
4
|
-
|
|
5
|
-
const StyledRedactedMessage = styled.div`
|
|
6
|
-
color: ${TEXT_COLOURS.SECONDARY.VALUE};
|
|
7
|
-
`
|
|
8
|
-
|
|
9
|
-
const TimelineTitleRedacted: FC<HTMLAttributes<HTMLDivElement>> = (props) => (
|
|
10
|
-
<StyledRedactedMessage {...props}>Insufficient Privileges</StyledRedactedMessage>
|
|
11
|
-
)
|
|
12
|
-
|
|
13
|
-
export default TimelineTitleRedacted
|
|
1
|
+
import { FC, HTMLAttributes } from 'react'
|
|
2
|
+
import { TEXT_COLOURS } from '@ltht-react/styles'
|
|
3
|
+
import styled from '@emotion/styled'
|
|
4
|
+
|
|
5
|
+
const StyledRedactedMessage = styled.div`
|
|
6
|
+
color: ${TEXT_COLOURS.SECONDARY.VALUE};
|
|
7
|
+
`
|
|
8
|
+
|
|
9
|
+
const TimelineTitleRedacted: FC<HTMLAttributes<HTMLDivElement>> = (props) => (
|
|
10
|
+
<StyledRedactedMessage {...props}>Insufficient Privileges</StyledRedactedMessage>
|
|
11
|
+
)
|
|
12
|
+
|
|
13
|
+
export default TimelineTitleRedacted
|
|
@@ -1,41 +1,41 @@
|
|
|
1
|
-
import { FC, HTMLAttributes } from 'react'
|
|
2
|
-
import {
|
|
3
|
-
AuditEvent,
|
|
4
|
-
DocumentReference,
|
|
5
|
-
Maybe,
|
|
6
|
-
QuestionnaireResponse,
|
|
7
|
-
TimelineDomainResourceType,
|
|
8
|
-
} from '@ltht-react/types'
|
|
9
|
-
|
|
10
|
-
const TimelineTitle: FC<Props> = ({ domainResource, domainResourceType, ...rest }) => {
|
|
11
|
-
if (!domainResource) return <></>
|
|
12
|
-
|
|
13
|
-
switch (domainResourceType) {
|
|
14
|
-
case TimelineDomainResourceType.QuestionnaireResponse: {
|
|
15
|
-
const qr = domainResource as QuestionnaireResponse
|
|
16
|
-
const questionnaireTitle = qr.metadata.isRedacted
|
|
17
|
-
? 'Insufficient privileges'
|
|
18
|
-
: qr.text?.text ?? qr.questionnaire?.title
|
|
19
|
-
return <div {...rest}>{questionnaireTitle}</div>
|
|
20
|
-
}
|
|
21
|
-
case TimelineDomainResourceType.DocumentReference: {
|
|
22
|
-
const docRef = domainResource as DocumentReference
|
|
23
|
-
const docTitle = docRef.metadata.isRedacted ? 'Insufficient privileges' : docRef.text?.text
|
|
24
|
-
return <div {...rest}>{docTitle}</div>
|
|
25
|
-
}
|
|
26
|
-
case TimelineDomainResourceType.AuditEvent: {
|
|
27
|
-
const audit = domainResource as AuditEvent
|
|
28
|
-
const auditTitle = audit.metadata.isRedacted ? 'Insufficient privileges' : audit.text?.text
|
|
29
|
-
return <div {...rest}>{auditTitle}</div>
|
|
30
|
-
}
|
|
31
|
-
default:
|
|
32
|
-
return <></>
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
interface Props extends HTMLAttributes<HTMLDivElement> {
|
|
37
|
-
domainResource?: Maybe<AuditEvent | QuestionnaireResponse | DocumentReference>
|
|
38
|
-
domainResourceType: TimelineDomainResourceType
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
export default TimelineTitle
|
|
1
|
+
import { FC, HTMLAttributes } from 'react'
|
|
2
|
+
import {
|
|
3
|
+
AuditEvent,
|
|
4
|
+
DocumentReference,
|
|
5
|
+
Maybe,
|
|
6
|
+
QuestionnaireResponse,
|
|
7
|
+
TimelineDomainResourceType,
|
|
8
|
+
} from '@ltht-react/types'
|
|
9
|
+
|
|
10
|
+
const TimelineTitle: FC<Props> = ({ domainResource, domainResourceType, ...rest }) => {
|
|
11
|
+
if (!domainResource) return <></>
|
|
12
|
+
|
|
13
|
+
switch (domainResourceType) {
|
|
14
|
+
case TimelineDomainResourceType.QuestionnaireResponse: {
|
|
15
|
+
const qr = domainResource as QuestionnaireResponse
|
|
16
|
+
const questionnaireTitle = qr.metadata.isRedacted
|
|
17
|
+
? 'Insufficient privileges'
|
|
18
|
+
: qr.text?.text ?? qr.questionnaire?.title
|
|
19
|
+
return <div {...rest}>{questionnaireTitle}</div>
|
|
20
|
+
}
|
|
21
|
+
case TimelineDomainResourceType.DocumentReference: {
|
|
22
|
+
const docRef = domainResource as DocumentReference
|
|
23
|
+
const docTitle = docRef.metadata.isRedacted ? 'Insufficient privileges' : docRef.text?.text
|
|
24
|
+
return <div {...rest}>{docTitle}</div>
|
|
25
|
+
}
|
|
26
|
+
case TimelineDomainResourceType.AuditEvent: {
|
|
27
|
+
const audit = domainResource as AuditEvent
|
|
28
|
+
const auditTitle = audit.metadata.isRedacted ? 'Insufficient privileges' : audit.text?.text
|
|
29
|
+
return <div {...rest}>{auditTitle}</div>
|
|
30
|
+
}
|
|
31
|
+
default:
|
|
32
|
+
return <></>
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
interface Props extends HTMLAttributes<HTMLDivElement> {
|
|
37
|
+
domainResource?: Maybe<AuditEvent | QuestionnaireResponse | DocumentReference>
|
|
38
|
+
domainResourceType: TimelineDomainResourceType
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
export default TimelineTitle
|
package/src/constants.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
const PRIMARY_AUTHOR = 'PRIMAUTH'
|
|
2
|
-
|
|
3
|
-
export default PRIMARY_AUTHOR
|
|
1
|
+
const PRIMARY_AUTHOR = 'PRIMAUTH'
|
|
2
|
+
|
|
3
|
+
export default PRIMARY_AUTHOR
|
package/src/index.tsx
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import Timeline, { ITimelineFilter, ITimelineFilterOption } from './organisms/timeline'
|
|
2
|
-
import { ITimelineItem } from './molecules/timeline-item'
|
|
3
|
-
import PRIMARY_AUTHOR from './constants'
|
|
4
|
-
|
|
5
|
-
export default Timeline
|
|
6
|
-
export { ITimelineItem, ITimelineFilter, ITimelineFilterOption, PRIMARY_AUTHOR }
|
|
1
|
+
import Timeline, { ITimelineFilter, ITimelineFilterOption } from './organisms/timeline'
|
|
2
|
+
import { ITimelineItem } from './molecules/timeline-item'
|
|
3
|
+
import PRIMARY_AUTHOR from './constants'
|
|
4
|
+
|
|
5
|
+
export default Timeline
|
|
6
|
+
export { ITimelineItem, ITimelineFilter, ITimelineFilterOption, PRIMARY_AUTHOR }
|
|
@@ -1,47 +1,47 @@
|
|
|
1
|
-
import { FC } from 'react'
|
|
2
|
-
import styled from '@emotion/styled'
|
|
3
|
-
import { HIGHLIGHT_GREEN, TRANSLUCENT_DARK_BLUE } from '@ltht-react/styles'
|
|
4
|
-
import { useWindowSize } from '@ltht-react/hooks'
|
|
5
|
-
import { isMobileView } from '@ltht-react/utils'
|
|
6
|
-
import TimelineTitleRedacted from '../atoms/timeline-title-redacted'
|
|
7
|
-
|
|
8
|
-
const StyledTimelineItem = styled.div<IStyledTimelineItem>`
|
|
9
|
-
background-color: ${({ isSelected }) => (isSelected ? HIGHLIGHT_GREEN.VALUE : TRANSLUCENT_DARK_BLUE)};
|
|
10
|
-
padding: 0.5rem;
|
|
11
|
-
`
|
|
12
|
-
const StyledTimelineItemTop = styled.div`
|
|
13
|
-
display: flex;
|
|
14
|
-
color: black;
|
|
15
|
-
padding-bottom: 0.25rem;
|
|
16
|
-
`
|
|
17
|
-
const StyledTitle = styled.div<IStyledMobile>`
|
|
18
|
-
flex-grow: 1;
|
|
19
|
-
color: black;
|
|
20
|
-
font-size: ${({ isMobile }) => (isMobile ? 'medium' : 'large')};
|
|
21
|
-
font-weight: bold;
|
|
22
|
-
`
|
|
23
|
-
|
|
24
|
-
const TimelineItemRedacted: FC = () => {
|
|
25
|
-
const { width } = useWindowSize()
|
|
26
|
-
const isMobile = isMobileView(width)
|
|
27
|
-
|
|
28
|
-
return (
|
|
29
|
-
<StyledTimelineItem isSelected={false}>
|
|
30
|
-
<StyledTimelineItemTop>
|
|
31
|
-
<StyledTitle isMobile={isMobile}>
|
|
32
|
-
<TimelineTitleRedacted />
|
|
33
|
-
</StyledTitle>
|
|
34
|
-
</StyledTimelineItemTop>
|
|
35
|
-
</StyledTimelineItem>
|
|
36
|
-
)
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
interface IStyledTimelineItem {
|
|
40
|
-
isSelected: boolean
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
interface IStyledMobile {
|
|
44
|
-
isMobile: boolean
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
export default TimelineItemRedacted
|
|
1
|
+
import { FC } from 'react'
|
|
2
|
+
import styled from '@emotion/styled'
|
|
3
|
+
import { HIGHLIGHT_GREEN, TRANSLUCENT_DARK_BLUE } from '@ltht-react/styles'
|
|
4
|
+
import { useWindowSize } from '@ltht-react/hooks'
|
|
5
|
+
import { isMobileView } from '@ltht-react/utils'
|
|
6
|
+
import TimelineTitleRedacted from '../atoms/timeline-title-redacted'
|
|
7
|
+
|
|
8
|
+
const StyledTimelineItem = styled.div<IStyledTimelineItem>`
|
|
9
|
+
background-color: ${({ isSelected }) => (isSelected ? HIGHLIGHT_GREEN.VALUE : TRANSLUCENT_DARK_BLUE)};
|
|
10
|
+
padding: 0.5rem;
|
|
11
|
+
`
|
|
12
|
+
const StyledTimelineItemTop = styled.div`
|
|
13
|
+
display: flex;
|
|
14
|
+
color: black;
|
|
15
|
+
padding-bottom: 0.25rem;
|
|
16
|
+
`
|
|
17
|
+
const StyledTitle = styled.div<IStyledMobile>`
|
|
18
|
+
flex-grow: 1;
|
|
19
|
+
color: black;
|
|
20
|
+
font-size: ${({ isMobile }) => (isMobile ? 'medium' : 'large')};
|
|
21
|
+
font-weight: bold;
|
|
22
|
+
`
|
|
23
|
+
|
|
24
|
+
const TimelineItemRedacted: FC = () => {
|
|
25
|
+
const { width } = useWindowSize()
|
|
26
|
+
const isMobile = isMobileView(width)
|
|
27
|
+
|
|
28
|
+
return (
|
|
29
|
+
<StyledTimelineItem isSelected={false}>
|
|
30
|
+
<StyledTimelineItemTop>
|
|
31
|
+
<StyledTitle isMobile={isMobile}>
|
|
32
|
+
<TimelineTitleRedacted />
|
|
33
|
+
</StyledTitle>
|
|
34
|
+
</StyledTimelineItemTop>
|
|
35
|
+
</StyledTimelineItem>
|
|
36
|
+
)
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
interface IStyledTimelineItem {
|
|
40
|
+
isSelected: boolean
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
interface IStyledMobile {
|
|
44
|
+
isMobile: boolean
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
export default TimelineItemRedacted
|
|
@@ -1,130 +1,130 @@
|
|
|
1
|
-
import { FC } from 'react'
|
|
2
|
-
import styled from '@emotion/styled'
|
|
3
|
-
import { HIGHLIGHT_GREEN, TRANSLUCENT_DARK_BLUE } from '@ltht-react/styles'
|
|
4
|
-
import {
|
|
5
|
-
AuditEvent,
|
|
6
|
-
DocumentReference,
|
|
7
|
-
Maybe,
|
|
8
|
-
QuestionnaireResponse,
|
|
9
|
-
TimelineDomainResourceType,
|
|
10
|
-
} from '@ltht-react/types'
|
|
11
|
-
import { useWindowSize } from '@ltht-react/hooks'
|
|
12
|
-
import { isMobileView } from '@ltht-react/utils'
|
|
13
|
-
import TimelineDescription from '../atoms/timeline-description'
|
|
14
|
-
import TimelineAuthor from '../atoms/timeline-author'
|
|
15
|
-
import TimelineTitle from '../atoms/timeline-title'
|
|
16
|
-
import TimelineTime from '../atoms/timeline-time'
|
|
17
|
-
import TimelineButton from '../atoms/timeline-button'
|
|
18
|
-
|
|
19
|
-
const StyledTimelineItem = styled.div<IStyledTimelineItem>`
|
|
20
|
-
background-color: ${({ isSelected }) => (isSelected ? HIGHLIGHT_GREEN.VALUE : TRANSLUCENT_DARK_BLUE)};
|
|
21
|
-
padding-top: 0.5rem;
|
|
22
|
-
`
|
|
23
|
-
|
|
24
|
-
const StyledTimelineAuthor = styled(TimelineAuthor)`
|
|
25
|
-
flex-grow: 1;
|
|
26
|
-
margin-bottom: 0.5rem;
|
|
27
|
-
`
|
|
28
|
-
|
|
29
|
-
const StyledTimelineTime = styled(TimelineTime)`
|
|
30
|
-
color: black;
|
|
31
|
-
`
|
|
32
|
-
|
|
33
|
-
const StyledTimelineItemTop = styled.div`
|
|
34
|
-
display: flex;
|
|
35
|
-
color: black;
|
|
36
|
-
padding-bottom: 0.25rem;
|
|
37
|
-
margin: 0.5rem;
|
|
38
|
-
`
|
|
39
|
-
|
|
40
|
-
const StyledTimelineItemMiddle = styled.div`
|
|
41
|
-
color: black;
|
|
42
|
-
padding-bottom: 1rem;
|
|
43
|
-
margin: 0.5rem;
|
|
44
|
-
`
|
|
45
|
-
|
|
46
|
-
const StyledTimelineItemBottom = styled.div`
|
|
47
|
-
color: grey;
|
|
48
|
-
display: flex;
|
|
49
|
-
margin: 0.5rem;
|
|
50
|
-
`
|
|
51
|
-
|
|
52
|
-
const StyledTimelineTitle = styled(TimelineTitle, {
|
|
53
|
-
shouldForwardProp: (prop) => prop !== 'isMobile',
|
|
54
|
-
})<IStyledMobile>`
|
|
55
|
-
flex-grow: 1;
|
|
56
|
-
color: black;
|
|
57
|
-
font-size: ${({ isMobile }) => (isMobile ? 'medium' : 'large')};
|
|
58
|
-
font-weight: bold;
|
|
59
|
-
`
|
|
60
|
-
|
|
61
|
-
const StyledTimelineDescription = styled(TimelineDescription)`
|
|
62
|
-
color: black;
|
|
63
|
-
font-size: small;
|
|
64
|
-
`
|
|
65
|
-
|
|
66
|
-
const TimelineItem: FC<IProps> = ({ timelineItem, domainResourceType }) => {
|
|
67
|
-
const { width } = useWindowSize()
|
|
68
|
-
const isMobile = isMobileView(width)
|
|
69
|
-
|
|
70
|
-
if (!timelineItem?.domainResource) {
|
|
71
|
-
return <></>
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
const { domainResource, buttonState } = timelineItem
|
|
75
|
-
|
|
76
|
-
const itemKey = `timelineItem_${domainResource.id}`
|
|
77
|
-
|
|
78
|
-
return (
|
|
79
|
-
<StyledTimelineItem isSelected={buttonState === 'selected-button'} key={itemKey}>
|
|
80
|
-
<StyledTimelineItemTop>
|
|
81
|
-
<StyledTimelineTitle
|
|
82
|
-
isMobile={isMobile}
|
|
83
|
-
domainResource={domainResource}
|
|
84
|
-
domainResourceType={domainResourceType}
|
|
85
|
-
/>
|
|
86
|
-
{isMobile && (
|
|
87
|
-
<StyledTimelineTime domainResource={timelineItem.domainResource} domainResourceType={domainResourceType} />
|
|
88
|
-
)}
|
|
89
|
-
</StyledTimelineItemTop>
|
|
90
|
-
|
|
91
|
-
<StyledTimelineItemMiddle>
|
|
92
|
-
<StyledTimelineDescription
|
|
93
|
-
domainResource={timelineItem.domainResource}
|
|
94
|
-
domainResourceType={domainResourceType}
|
|
95
|
-
/>
|
|
96
|
-
</StyledTimelineItemMiddle>
|
|
97
|
-
|
|
98
|
-
<StyledTimelineItemBottom>
|
|
99
|
-
<StyledTimelineAuthor domainResource={timelineItem.domainResource} domainResourceType={domainResourceType} />
|
|
100
|
-
</StyledTimelineItemBottom>
|
|
101
|
-
|
|
102
|
-
<TimelineButton timelineItem={timelineItem} />
|
|
103
|
-
</StyledTimelineItem>
|
|
104
|
-
)
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
interface IProps {
|
|
108
|
-
timelineItem: Maybe<ITimelineItem>
|
|
109
|
-
domainResourceType: TimelineDomainResourceType
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
export interface ITimelineItem {
|
|
113
|
-
domainResource?: Maybe<AuditEvent | QuestionnaireResponse | DocumentReference>
|
|
114
|
-
buttonState: TimeLineItemButtonState
|
|
115
|
-
itemClickHandler?(): void
|
|
116
|
-
pointInTimeClickHandler?: (date: Date) => void
|
|
117
|
-
buttonText?: string
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
type TimeLineItemButtonState = 'no-button' | 'selectable-button' | 'selected-button' | 'permission-denied-button'
|
|
121
|
-
|
|
122
|
-
interface IStyledTimelineItem {
|
|
123
|
-
isSelected: boolean
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
interface IStyledMobile {
|
|
127
|
-
isMobile: boolean
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
export default TimelineItem
|
|
1
|
+
import { FC } from 'react'
|
|
2
|
+
import styled from '@emotion/styled'
|
|
3
|
+
import { HIGHLIGHT_GREEN, TRANSLUCENT_DARK_BLUE } from '@ltht-react/styles'
|
|
4
|
+
import {
|
|
5
|
+
AuditEvent,
|
|
6
|
+
DocumentReference,
|
|
7
|
+
Maybe,
|
|
8
|
+
QuestionnaireResponse,
|
|
9
|
+
TimelineDomainResourceType,
|
|
10
|
+
} from '@ltht-react/types'
|
|
11
|
+
import { useWindowSize } from '@ltht-react/hooks'
|
|
12
|
+
import { isMobileView } from '@ltht-react/utils'
|
|
13
|
+
import TimelineDescription from '../atoms/timeline-description'
|
|
14
|
+
import TimelineAuthor from '../atoms/timeline-author'
|
|
15
|
+
import TimelineTitle from '../atoms/timeline-title'
|
|
16
|
+
import TimelineTime from '../atoms/timeline-time'
|
|
17
|
+
import TimelineButton from '../atoms/timeline-button'
|
|
18
|
+
|
|
19
|
+
const StyledTimelineItem = styled.div<IStyledTimelineItem>`
|
|
20
|
+
background-color: ${({ isSelected }) => (isSelected ? HIGHLIGHT_GREEN.VALUE : TRANSLUCENT_DARK_BLUE)};
|
|
21
|
+
padding-top: 0.5rem;
|
|
22
|
+
`
|
|
23
|
+
|
|
24
|
+
const StyledTimelineAuthor = styled(TimelineAuthor)`
|
|
25
|
+
flex-grow: 1;
|
|
26
|
+
margin-bottom: 0.5rem;
|
|
27
|
+
`
|
|
28
|
+
|
|
29
|
+
const StyledTimelineTime = styled(TimelineTime)`
|
|
30
|
+
color: black;
|
|
31
|
+
`
|
|
32
|
+
|
|
33
|
+
const StyledTimelineItemTop = styled.div`
|
|
34
|
+
display: flex;
|
|
35
|
+
color: black;
|
|
36
|
+
padding-bottom: 0.25rem;
|
|
37
|
+
margin: 0.5rem;
|
|
38
|
+
`
|
|
39
|
+
|
|
40
|
+
const StyledTimelineItemMiddle = styled.div`
|
|
41
|
+
color: black;
|
|
42
|
+
padding-bottom: 1rem;
|
|
43
|
+
margin: 0.5rem;
|
|
44
|
+
`
|
|
45
|
+
|
|
46
|
+
const StyledTimelineItemBottom = styled.div`
|
|
47
|
+
color: grey;
|
|
48
|
+
display: flex;
|
|
49
|
+
margin: 0.5rem;
|
|
50
|
+
`
|
|
51
|
+
|
|
52
|
+
const StyledTimelineTitle = styled(TimelineTitle, {
|
|
53
|
+
shouldForwardProp: (prop) => prop !== 'isMobile',
|
|
54
|
+
})<IStyledMobile>`
|
|
55
|
+
flex-grow: 1;
|
|
56
|
+
color: black;
|
|
57
|
+
font-size: ${({ isMobile }) => (isMobile ? 'medium' : 'large')};
|
|
58
|
+
font-weight: bold;
|
|
59
|
+
`
|
|
60
|
+
|
|
61
|
+
const StyledTimelineDescription = styled(TimelineDescription)`
|
|
62
|
+
color: black;
|
|
63
|
+
font-size: small;
|
|
64
|
+
`
|
|
65
|
+
|
|
66
|
+
const TimelineItem: FC<IProps> = ({ timelineItem, domainResourceType }) => {
|
|
67
|
+
const { width } = useWindowSize()
|
|
68
|
+
const isMobile = isMobileView(width)
|
|
69
|
+
|
|
70
|
+
if (!timelineItem?.domainResource) {
|
|
71
|
+
return <></>
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
const { domainResource, buttonState } = timelineItem
|
|
75
|
+
|
|
76
|
+
const itemKey = `timelineItem_${domainResource.id}`
|
|
77
|
+
|
|
78
|
+
return (
|
|
79
|
+
<StyledTimelineItem isSelected={buttonState === 'selected-button'} key={itemKey}>
|
|
80
|
+
<StyledTimelineItemTop>
|
|
81
|
+
<StyledTimelineTitle
|
|
82
|
+
isMobile={isMobile}
|
|
83
|
+
domainResource={domainResource}
|
|
84
|
+
domainResourceType={domainResourceType}
|
|
85
|
+
/>
|
|
86
|
+
{isMobile && (
|
|
87
|
+
<StyledTimelineTime domainResource={timelineItem.domainResource} domainResourceType={domainResourceType} />
|
|
88
|
+
)}
|
|
89
|
+
</StyledTimelineItemTop>
|
|
90
|
+
|
|
91
|
+
<StyledTimelineItemMiddle>
|
|
92
|
+
<StyledTimelineDescription
|
|
93
|
+
domainResource={timelineItem.domainResource}
|
|
94
|
+
domainResourceType={domainResourceType}
|
|
95
|
+
/>
|
|
96
|
+
</StyledTimelineItemMiddle>
|
|
97
|
+
|
|
98
|
+
<StyledTimelineItemBottom>
|
|
99
|
+
<StyledTimelineAuthor domainResource={timelineItem.domainResource} domainResourceType={domainResourceType} />
|
|
100
|
+
</StyledTimelineItemBottom>
|
|
101
|
+
|
|
102
|
+
<TimelineButton timelineItem={timelineItem} />
|
|
103
|
+
</StyledTimelineItem>
|
|
104
|
+
)
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
interface IProps {
|
|
108
|
+
timelineItem: Maybe<ITimelineItem>
|
|
109
|
+
domainResourceType: TimelineDomainResourceType
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
export interface ITimelineItem {
|
|
113
|
+
domainResource?: Maybe<AuditEvent | QuestionnaireResponse | DocumentReference>
|
|
114
|
+
buttonState: TimeLineItemButtonState
|
|
115
|
+
itemClickHandler?(): void
|
|
116
|
+
pointInTimeClickHandler?: (date: Date) => void
|
|
117
|
+
buttonText?: string
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
type TimeLineItemButtonState = 'no-button' | 'selectable-button' | 'selected-button' | 'permission-denied-button'
|
|
121
|
+
|
|
122
|
+
interface IStyledTimelineItem {
|
|
123
|
+
isSelected: boolean
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
interface IStyledMobile {
|
|
127
|
+
isMobile: boolean
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
export default TimelineItem
|