me/parandum
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor component to be functional

Browse Source
This commit is contained in:
Matthew Grove
2021-10-26 16:30:21 +01:00
parent 02876906e1
commit 3207d0ee37
1 changed files with 45 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
src/SettingsContent.js
View File

@@ -1,55 +1,53 @@
import React, { Component } from 'react';
import React from 'react';
import Checkbox from '@material-ui/core/Checkbox';
import { CheckRounded as CheckRoundedIcon } from "@material-ui/icons";
import Button from "./Button";
import "./css/SettingsContent.css";
export default class SettingsContent extends Component {
render() {
return (
<>
<h1 className="settings-header">Settings</h1>
<div className="settings-options-container">
<label>
<Checkbox
checked={this.props.soundInput}
onChange={this.props.handleSoundInputChange}
inputProps={{ 'aria-label': 'checkbox' }}
/>
<span>Sound</span>
</label>
<label>
<Checkbox
checked={this.props.coloredEdgesInput}
onChange={this.props.handleColoredEdgesInputChange}
inputProps={{ 'aria-label': 'checkbox' }}
/>
<span>Coloured edges</span>
</label>
</div>
export default function SettingsContent (props) {
return (
<>
<h1 className="settings-header">Settings</h1>
<div className="settings-options-container">
<label>
<Checkbox
checked={props.soundInput}
onChange={props.handleSoundInputChange}
inputProps={{ 'aria-label': 'checkbox' }}
/>
<span>Sound</span>
</label>
<label>
<Checkbox
checked={props.coloredEdgesInput}
onChange={props.handleColoredEdgesInputChange}
inputProps={{ 'aria-label': 'checkbox' }}
/>
<span>Coloured edges</span>
</label>
</div>
<h2 className="settings-theme-header">Theme</h2>
<div className="settings-options-container">
{
this.props.themes.map((theme) =>
<Button
onClick={() => this.props.handleThemeInputChange(theme)}
icon={this.props.themeInput === theme && <CheckRoundedIcon />}
className={`background--${theme}`}
key={theme}
>
{
theme.split("-")
.map((word) =>
word[0].toUpperCase() + word.substring(1)
).join(" ")
}
</Button>
)
}
</div>
</>
)
}
<h2 className="settings-theme-header">Theme</h2>
<div className="settings-options-container">
{
props.themes.map((theme) =>
<Button
onClick={() => props.handleThemeInputChange(theme)}
icon={props.themeInput === theme && <CheckRoundedIcon />}
className={`background--${theme}`}
key={theme}
>
{
theme.split("-")
.map((word) =>
word[0].toUpperCase() + word.substring(1)
).join(" ")
}
</Button>
)
}
</div>
</>
)
}