167 lines
6.5 KiB
JavaScript
Executable File
167 lines
6.5 KiB
JavaScript
Executable File
import React from 'react';
|
|
import _ from 'lodash';
|
|
import classNames from 'classnames';
|
|
import PropTypes from 'prop-types';
|
|
import {
|
|
Card,
|
|
CardBody,
|
|
Button,
|
|
FormGroup,
|
|
CustomInput
|
|
} from 'reactstrap';
|
|
|
|
import './../../styles/components/theme-selector.scss';
|
|
import { Consumer } from './ThemeContext';
|
|
|
|
class ThemeSelector extends React.Component {
|
|
static propTypes = {
|
|
style: PropTypes.string.isRequired,
|
|
color: PropTypes.string.isRequired,
|
|
styleOptions: PropTypes.array,
|
|
styleDisabled: PropTypes.bool,
|
|
colorOptions: PropTypes.array,
|
|
onChangeTheme: PropTypes.func,
|
|
};
|
|
static defaultProps = {
|
|
styleOptions: [
|
|
{ name: 'Light', value: 'light' },
|
|
{ name: 'Dark', value: 'dark' },
|
|
{ name: 'Color', value: 'color' }
|
|
],
|
|
colorOptions: [
|
|
{ name: 'Primary', value: 'primary' },
|
|
{ name: 'Success', value: 'success' },
|
|
{ name: 'Info', value: 'info' },
|
|
{ name: 'Danger', value: 'danger' },
|
|
{ name: 'Warning', value: 'warning' },
|
|
{ name: 'Indigo', value: 'indigo' },
|
|
{ name: 'Purple', value: 'purple' },
|
|
{ name: 'Pink', value: 'pink' },
|
|
{ name: 'Yellow', value: 'yellow' }
|
|
]
|
|
};
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
isActive: false,
|
|
initialStyle: '',
|
|
initialColor: '',
|
|
};
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.setState({
|
|
initialColor: this.props.color,
|
|
initialStyle: this.props.style
|
|
});
|
|
}
|
|
|
|
render() {
|
|
const rootClass = classNames('theme-config', {
|
|
'theme-config--active': this.state.isActive,
|
|
});
|
|
|
|
return (
|
|
<div className={ rootClass }>
|
|
<Button
|
|
color="primary"
|
|
className="theme-config__trigger"
|
|
onClick={() => { this.setState({isActive: !this.state.isActive}) }}
|
|
>
|
|
<i className="fa fa-paint-brush fa-fw"></i>
|
|
</Button>
|
|
<Card className="theme-config__body">
|
|
<CardBody>
|
|
<h6 className="text-center mb-3">
|
|
Configurator
|
|
</h6>
|
|
|
|
<FormGroup>
|
|
<span className="h6 small mb-2 d-block">
|
|
Nav Color
|
|
</span>
|
|
{
|
|
_.map(this.props.colorOptions, (option, index) => (
|
|
<CustomInput
|
|
key={ index }
|
|
type="radio"
|
|
name="sidebarColor"
|
|
id={ `sidebarStyle--${option.value}` }
|
|
value={ option.value }
|
|
checked={ this.props.color === option.value }
|
|
onChange={(ev) => {
|
|
if (ev.target.checked) {
|
|
this.props.onChangeTheme({
|
|
color: option.value
|
|
});
|
|
}
|
|
}}
|
|
label={(
|
|
<span className="d-flex align-items-center">
|
|
{ option.name }
|
|
<i className={`fa fa-circle ml-auto text-${option.value}`} />
|
|
</span>
|
|
)}
|
|
/>
|
|
))
|
|
}
|
|
</FormGroup>
|
|
<FormGroup>
|
|
<span className="h6 small mb-2 d-block">
|
|
Nav Style
|
|
</span>
|
|
{
|
|
_.map(this.props.styleOptions, (option, index) => (
|
|
<CustomInput
|
|
key={ index }
|
|
type="radio"
|
|
name="sidebarStyle"
|
|
id={ `sidebarStyle--${option.value}` }
|
|
value={ option.value }
|
|
disabled={ this.props.styleDisabled }
|
|
checked={ this.props.style === option.value }
|
|
onChange={(ev) => {
|
|
if (ev.target.checked) {
|
|
this.props.onChangeTheme({
|
|
style: option.value
|
|
});
|
|
}
|
|
}}
|
|
label={ option.name }
|
|
/>
|
|
))
|
|
}
|
|
</FormGroup>
|
|
<FormGroup className="mb-0">
|
|
<Button
|
|
color="secondary"
|
|
outline
|
|
className="d-block w-100"
|
|
onClick={() => {
|
|
this.props.onChangeTheme({
|
|
color: this.state.initialColor,
|
|
style: this.state.initialStyle
|
|
});
|
|
}}
|
|
>
|
|
Reset Options
|
|
</Button>
|
|
</FormGroup>
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
const ContextThemeSelector = (props) =>
|
|
<Consumer>
|
|
{
|
|
(themeState) => <ThemeSelector { ...themeState } { ...props } />
|
|
}
|
|
</Consumer>
|
|
|
|
export { ContextThemeSelector as ThemeSelector };
|