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
107
108
109
110
111
|
import React, { useState, useEffect } from 'react';
import { PropTypes } from 'prop-types';
import { connect } from 'react-redux';
import Loading from 'react-loading-bar';
import { bindActionCreators } from 'redux';
import {
withStyles,
createMuiTheme,
MuiThemeProvider
} from '@material-ui/core/styles';
import 'ba-styles/vendors/react-loading-bar/index.css';
import { changeThemeAction } from 'ba-actions/UiActions';
import themePallete from 'ba-api/themePalette';
import TemplateSettings from 'ba-components/TemplateSettings';
//import { Button, Icon } from '@material-ui/core';
import styles from '../Templates/appStyles-jss';
import { esES } from '@material-ui/core/locale';
function ThemeWrapper(props) {
const {
classes,
children,
palette,
color,
changeTheme
} = props;
const [pageLoaded, setPageLoaded] = useState(true);
const [open, setOpen] = useState(false);
const [newPalette, setNewPalette] = useState(undefined);
const [theme, setTheme] = useState(
createMuiTheme(themePallete(color),esES)
);
useEffect(() => {
setNewPalette(palette);
setPageLoaded(true);
setTimeout(() => {
setPageLoaded(false);
}, 500);
return () => {
setPageLoaded(true);
};
}, []);
const handleOpenPallete = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
const handleChangeTheme = event => {
setTheme(createMuiTheme(themePallete(event.target.value),esES));
changeTheme(event.target.value);
};
return (
<MuiThemeProvider theme={theme}>
<div className={classes.root}>
<Loading
show={pageLoaded}
color="rgba(255,255,255,.9)"
showSpinner={false}
/>
{/* <Button onClick={handleOpenPallete} className={classes.btnPicker}>
<span className={classes.btn}>
<Icon className={classes.icon}>palette</Icon>
Theme
</span>
</Button> */}
<TemplateSettings
open={open}
palette={newPalette}
changeTheme={handleChangeTheme}
selectedValue={color}
close={handleClose}
/>
{children}
</div>
</MuiThemeProvider>
);
}
ThemeWrapper.propTypes = {
classes: PropTypes.object.isRequired,
children: PropTypes.node.isRequired,
color: PropTypes.string.isRequired,
changeTheme: PropTypes.func.isRequired,
palette: PropTypes.object.isRequired,
};
const reducer = 'ui';
const mapStateToProps = state => ({
...state,
color: state.getIn([reducer, 'theme']),
palette: state.getIn([reducer, 'palette']),
});
const dispatchToProps = dispatch => ({
changeTheme: bindActionCreators(changeThemeAction, dispatch),
});
const ThemeWrapperMapped = connect(
mapStateToProps,
dispatchToProps
)(ThemeWrapper);
export default withStyles(styles)(ThemeWrapperMapped);
|
