-
-
Notifications
You must be signed in to change notification settings - Fork 5.2k
/
UserEdit.tsx
100 lines (93 loc) · 2.55 KB
/
UserEdit.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
/* eslint react/jsx-key: off */
import * as React from 'react';
import PropTypes from 'prop-types';
import {
CloneButton,
DeleteWithConfirmButton,
Edit,
FormTab,
required,
SaveButton,
SelectInput,
ShowButton,
TabbedForm,
TextInput,
Toolbar,
TopToolbar,
} from 'react-admin';
import { makeStyles } from '@material-ui/core/styles';
import UserTitle from './UserTitle';
import Aside from './Aside';
const useToolbarStyles = makeStyles({
toolbar: {
display: 'flex',
justifyContent: 'space-between',
},
});
/**
* Custom Toolbar for the Edit form
*
* Save with undo, but delete with confirm
*/
const UserEditToolbar = props => {
const classes = useToolbarStyles();
return (
<Toolbar {...props} classes={classes}>
<SaveButton />
<DeleteWithConfirmButton />
</Toolbar>
);
};
const EditActions = ({ basePath, data, hasShow }) => (
<TopToolbar>
<CloneButton
className="button-clone"
basePath={basePath}
record={data}
/>
<ShowButton basePath={basePath} record={data} />
</TopToolbar>
);
const UserEdit = ({ permissions, ...props }) => (
<Edit
title={<UserTitle />}
aside={<Aside />}
actions={<EditActions />}
{...props}
>
<TabbedForm
defaultValue={{ role: 'user' }}
toolbar={<UserEditToolbar />}
>
<FormTab label="user.form.summary" path="">
{permissions === 'admin' && <TextInput disabled source="id" />}
<TextInput
source="name"
defaultValue="slim shady"
validate={required()}
/>
</FormTab>
{permissions === 'admin' && (
<FormTab label="user.form.security" path="security">
<SelectInput
source="role"
validate={required()}
choices={[
{ id: '', name: 'None' },
{ id: 'admin', name: 'Admin' },
{ id: 'user', name: 'User' },
]}
defaultValue={'user'}
/>
</FormTab>
)}
</TabbedForm>
</Edit>
);
UserEdit.propTypes = {
id: PropTypes.any.isRequired,
location: PropTypes.object.isRequired,
match: PropTypes.object.isRequired,
permissions: PropTypes.string,
};
export default UserEdit;