/
SelectPeopleDialog.tsx
106 lines (103 loc) · 3.55 KB
/
SelectPeopleDialog.tsx
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
import React, { useState, useCallback } from 'react'
import { SelectPeopleUI } from './SelectPeople'
import { geti18nString } from '../../utils/i18n'
import { makeStyles } from '@material-ui/styles'
import {
Dialog,
DialogTitle,
DialogContent,
DialogActions,
Button,
CircularProgress,
withMobileDialog,
} from '@material-ui/core'
import { Person } from '../../database'
import { PortalShadowRoot } from '../../utils/jss/ShadowRootPortal'
interface Props {
open: boolean
people: Person[]
alreadySelectedPreviously: Person[]
onClose(): void
onSelect(people: Person[]): Promise<void>
}
const useStyles = makeStyles({
title: { paddingBottom: 0 },
content: { padding: '0 12px' },
progress: { marginRight: 6 },
})
const ResponsiveDialog = withMobileDialog({ breakpoint: 'xs' })(Dialog)
export function SelectPeopleDialog(props: Props) {
const classes = useStyles()
const [people, select] = useState<Person[]>([] as Person[])
const [committed, setCommitted] = useState(false)
const onClose = useCallback(() => {
props.onClose()
setCommitted(false)
select([])
}, [props.onClose])
const [rejection, onReject] = useState<Error>()
const share = useCallback(() => {
setCommitted(true)
props.onSelect(people).then(onClose, onReject)
}, [people])
const canClose = !rejection && committed
const canCommit = committed || people.length === 0
return (
<ResponsiveDialog
container={PortalShadowRoot}
onClose={canClose ? onClose : void 0}
open={props.open}
scroll="paper"
fullWidth
maxWidth="sm">
<DialogTitle className={classes.title}>{geti18nString('share_to')}</DialogTitle>
<DialogContent className={classes.content}>
<SelectPeopleUI
frozenSelected={props.alreadySelectedPreviously}
disabled={committed}
people={props.people}
selected={people}
onSetSelected={select}
/>
</DialogContent>
{rejection && (
<DialogContent className={classes.content}>
Error: {rejection.message} {console.error(rejection)}
</DialogContent>
)}
<DialogActions>
<Button size="large" disabled={canClose} onClick={onClose}>
{geti18nString('cancel')}
</Button>
<Button size="large" disabled={canCommit} color="primary" onClick={share}>
{committed && (
<CircularProgress aria-busy className={classes.progress} size={16} variant="indeterminate" />
)}
{geti18nString(committed ? 'sharing' : 'share')}
</Button>
</DialogActions>
</ResponsiveDialog>
)
}
export function useShareMenu(
people: Person[],
onSelect: (people: Person[]) => Promise<void>,
alreadySelectedPreviously: Person[],
) {
const [show, setShow] = useState(false)
const showShare = useCallback(() => setShow(true), [])
const hideShare = useCallback(() => setShow(false), [])
return {
showShare,
// hideShare,
ShareMenu: (
<SelectPeopleDialog
alreadySelectedPreviously={alreadySelectedPreviously}
people={people}
open={show}
onClose={hideShare}
onSelect={onSelect}
/>
),
}
}