-
-
Notifications
You must be signed in to change notification settings - Fork 5.2k
/
TagReferenceInput.tsx
47 lines (42 loc) · 1.3 KB
/
TagReferenceInput.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
import * as React from 'react';
import { useState } from 'react';
import { useForm } from 'react-final-form';
import { AutocompleteArrayInput, ReferenceArrayInput } from 'react-admin';
import { Button } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles({
button: {
margin: '0 24px',
position: 'relative',
},
input: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'flex-start',
width: '50%',
},
});
const TagReferenceInput = ({ ...props }) => {
const classes = useStyles();
const { change } = useForm();
const [filter, setFilter] = useState(true);
const handleAddFilter = () => {
setFilter(!filter);
change('tags', []);
};
return (
<div className={classes.input}>
<ReferenceArrayInput {...props} filter={{ published: filter }}>
<AutocompleteArrayInput optionText="name.en" />
</ReferenceArrayInput>
<Button
name="change-filter"
className={classes.button}
onClick={handleAddFilter}
>
Filter {filter ? 'Unpublished' : 'Published'} Tags
</Button>
</div>
);
};
export default TagReferenceInput;