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
|
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import {
FormControl,
Grid,
FormControlLabel,
Dialog,
DialogActions,
DialogContent,
DialogTitle,
Icon,
Slide,
Button,
} from '@material-ui/core';
import styles from './themeStyles-jss';
import ThemeThumb from './ThemeThumb';
const Transition = React.forwardRef(function Transition(props, ref) { // eslint-disable-line
return <Slide direction="left" ref={ref} {...props} />;
});
function TemplateSettings(props) {
const {
classes,
palette,
open,
selectedValue,
changeTheme,
close
} = props;
const getItem = dataArray => dataArray.map((item, index) => (
<FormControlLabel
key={index.toString()}
className={classes.themeField}
control={(
<ThemeThumb
value={item.value}
selectedValue={selectedValue}
handleChange={changeTheme}
name={item.name}
/>
)}
/>
));
return (
<Dialog
open={open}
TransitionComponent={Transition}
keepMounted
onClose={close}
className={classes.themeChooser}
aria-labelledby="alert-dialog-slide-title"
aria-describedby="alert-dialog-slide-description"
maxWidth="md"
>
<DialogTitle id="alert-dialog-slide-title">
<Icon>palette</Icon>
{' '}
Choose Theme
</DialogTitle>
<DialogContent>
<Grid container>
<FormControl component="fieldset" className={classes.group}>
{ palette !== undefined && getItem(palette) }
</FormControl>
</Grid>
</DialogContent>
<DialogActions>
<Button onClick={close} color="primary">
Done
</Button>
</DialogActions>
</Dialog>
);
}
TemplateSettings.propTypes = {
classes: PropTypes.object.isRequired,
palette: PropTypes.object,
selectedValue: PropTypes.string.isRequired,
changeTheme: PropTypes.func.isRequired,
close: PropTypes.func.isRequired,
open: PropTypes.bool.isRequired,
};
TemplateSettings.defaultProps = {
palette: undefined
};
export default withStyles(styles)(TemplateSettings);
|
