/
ListLi.jsx
78 lines (73 loc) · 1.94 KB
/
ListLi.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
import { h } from 'preact'
// if folder:
// + checkbox (selects all files from folder)
// + folder name (opens folder)
// if file:
// + checkbox (selects file)
// + file name (selects file)
function ListItem (props) {
const {
className,
isDisabled,
restrictionError,
isCheckboxDisabled,
isChecked,
toggleCheckbox,
recordShiftKeyPress,
type,
id,
itemIconEl,
title,
handleFolderClick,
showTitles,
i18n,
} = props
return (
<li
className={className}
title={isDisabled ? restrictionError?.message : null}
>
{!isCheckboxDisabled ? (
<input
type="checkbox"
className={`uppy-u-reset uppy-ProviderBrowserItem-checkbox ${isChecked ? 'uppy-ProviderBrowserItem-checkbox--is-checked' : ''}`}
onChange={toggleCheckbox}
onKeyDown={recordShiftKeyPress}
// for the <label/>
name="listitem"
id={id}
checked={isChecked}
aria-label={type === 'file' ? null : i18n('allFilesFromFolderNamed', { name: title })}
disabled={isDisabled}
data-uppy-super-focusable
/>
) : null}
{type === 'file' ? (
// label for a checkbox
<label
htmlFor={id}
className="uppy-u-reset uppy-ProviderBrowserItem-inner"
>
<div className="uppy-ProviderBrowserItem-iconWrap">
{itemIconEl}
</div>
{showTitles && title}
</label>
) : (
// button to open a folder
<button
type="button"
className="uppy-u-reset uppy-ProviderBrowserItem-inner"
onClick={handleFolderClick}
aria-label={i18n('openFolderNamed', { name: title })}
>
<div className="uppy-ProviderBrowserItem-iconWrap">
{itemIconEl}
</div>
{showTitles && <span>{title}</span>}
</button>
)}
</li>
)
}
export default ListItem