44 lines
1.0 KiB
TypeScript
44 lines
1.0 KiB
TypeScript
import React from 'react';
|
|
import { connect } from 'react-redux';
|
|
import { Theme } from 'config';
|
|
import { getTheme, changeTheme } from 'features/config';
|
|
import { AppState } from 'features/reducers';
|
|
import './ThemeToggle.scss';
|
|
|
|
interface ActionProps {
|
|
changeTheme: typeof changeTheme;
|
|
}
|
|
|
|
interface StateProps {
|
|
theme: ReturnType<typeof getTheme>;
|
|
}
|
|
|
|
type Props = ActionProps & StateProps;
|
|
|
|
class ThemeToggle extends React.Component<Props> {
|
|
public render() {
|
|
return (
|
|
<button className="ThemeToggle" onClick={this.toggleTheme} aria-hidden={true}>
|
|
<div className="ThemeToggle-control">
|
|
<span className="ThemeToggle-control-icon is-dark" />
|
|
<span className="ThemeToggle-control-icon is-light" />
|
|
</div>
|
|
</button>
|
|
);
|
|
}
|
|
|
|
private toggleTheme = () => {
|
|
const theme = this.props.theme === Theme.LIGHT ? Theme.DARK : Theme.LIGHT;
|
|
this.props.changeTheme(theme);
|
|
};
|
|
}
|
|
|
|
export default connect(
|
|
(state: AppState) => ({
|
|
theme: getTheme(state)
|
|
}),
|
|
{
|
|
changeTheme
|
|
}
|
|
)(ThemeToggle);
|