/
Qualification.jsx
110 lines (94 loc) · 3.11 KB
/
Qualification.jsx
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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
import React, { useRef, useState, createRef, useMemo, useEffect } from 'react'
import PropTypes from 'prop-types'
import {
isExpiringSoon,
formatMetadataQualification,
KNOWN_DATE_METADATA_NAMES,
KNOWN_INFORMATION_METADATA_NAMES,
KNOWN_OTHER_METADATA_NAMES
} from 'cozy-client/dist/models/paper'
import List from '../../List'
import { withViewerLocales } from '../hoc/withViewerLocales'
import ExpirationAlert from '../components/ExpirationAlert'
import QualificationListItemContact from './QualificationListItemContact'
import ActionMenuWrapper from './ActionMenuWrapper'
import QualificationListItemDate from './QualificationListItemDate'
import QualificationListItemInformation from './QualificationListItemInformation'
import QualificationListItemOther from './QualificationListItemOther'
const makeQualificationListItemComp = metadataName => {
if (KNOWN_DATE_METADATA_NAMES.includes(metadataName)) {
return QualificationListItemDate
}
if (KNOWN_INFORMATION_METADATA_NAMES.includes(metadataName)) {
return QualificationListItemInformation
}
if (KNOWN_OTHER_METADATA_NAMES.includes(metadataName)) {
if (metadataName === 'contact') {
return QualificationListItemContact
}
return QualificationListItemOther
}
}
const isExpirationAlertHidden = file => {
return file?.metadata?.hideExpirationAlert ?? false
}
const Qualification = ({ file }) => {
const { metadata = {} } = file
const actionBtnRef = useRef([])
const [optionFile, setOptionFile] = useState({
id: '',
name: '',
value: ''
})
const hideActionsMenu = () => {
setOptionFile({ id: '', name: '', value: '' })
}
const toggleActionsMenu = (id, name, value) => {
setOptionFile(prev => {
if (prev.value) return { id: '', name: '', value: '' }
return { id, name, value }
})
}
const formatedMetadataQualification = useMemo(() => {
return formatMetadataQualification(metadata)
}, [metadata])
useEffect(() => {
actionBtnRef.current = formatedMetadataQualification.map(
(_, idx) => actionBtnRef.current[idx] ?? createRef()
)
}, [formatedMetadataQualification])
return (
<>
{isExpiringSoon(file) && !isExpirationAlertHidden(file) && (
<ExpirationAlert file={file} />
)}
<List className={'u-pv-1'}>
{formatedMetadataQualification.map((meta, idx) => {
const { name } = meta
const QualificationListItemComp = makeQualificationListItemComp(name)
return (
<QualificationListItemComp
key={idx}
file={file}
ref={actionBtnRef.current[idx]}
formatedMetadataQualification={meta}
toggleActionsMenu={val => toggleActionsMenu(idx, name, val)}
/>
)
})}
{optionFile.name && (
<ActionMenuWrapper
onClose={hideActionsMenu}
file={file}
optionFile={optionFile}
ref={actionBtnRef.current[optionFile.id]}
/>
)}
</List>
</>
)
}
Qualification.propTypes = {
file: PropTypes.object.isRequired
}
export default withViewerLocales(Qualification)