mirror of
https://github.com/mue/mue.git
synced 2026-07-16 05:23:49 +02:00
refactor: cleanup
This commit is contained in:
@@ -6,14 +6,14 @@ import CheckboxUI from '@material-ui/core/Checkbox';
|
||||
import FormControlLabel from '@material-ui/core/FormControlLabel';
|
||||
|
||||
export default class Checkbox extends React.PureComponent {
|
||||
constructor(...args) {
|
||||
super(...args);
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
checked: (localStorage.getItem(this.props.name) === 'true')
|
||||
};
|
||||
}
|
||||
|
||||
handleChange() {
|
||||
handleChange = () => {
|
||||
SettingsFunctions.setItem(this.props.name);
|
||||
|
||||
this.setState({
|
||||
@@ -33,7 +33,7 @@ export default class Checkbox extends React.PureComponent {
|
||||
return (
|
||||
<>
|
||||
<FormControlLabel
|
||||
control={<CheckboxUI name={this.props.name} color='primary' checked={this.state.checked} onChange={() => this.handleChange()} />}
|
||||
control={<CheckboxUI name={this.props.name} color='primary' checked={this.state.checked} onChange={this.handleChange} />}
|
||||
label={text}
|
||||
/>
|
||||
<br/>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import React from 'react';
|
||||
|
||||
export default class Dropdown extends React.PureComponent {
|
||||
constructor(...args) {
|
||||
super(...args);
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
value: localStorage.getItem(this.props.name) || ''
|
||||
};
|
||||
@@ -12,7 +12,9 @@ export default class Dropdown extends React.PureComponent {
|
||||
return this.props.label ? <label>{this.props.label}</label> : null;
|
||||
}
|
||||
|
||||
onChange(value) {
|
||||
onChange = (e) => {
|
||||
const { value } = e.target;
|
||||
|
||||
this.setState({
|
||||
value: value
|
||||
});
|
||||
@@ -28,7 +30,7 @@ export default class Dropdown extends React.PureComponent {
|
||||
return (
|
||||
<>
|
||||
{this.getLabel()}
|
||||
<select value={this.state.value} onChange={(e) => this.onChange(e.target.value)}>
|
||||
<select value={this.state.value} onChange={this.onChange}>
|
||||
{this.props.children}
|
||||
</select>
|
||||
</>
|
||||
|
||||
@@ -7,14 +7,16 @@ import FormControl from '@material-ui/core/FormControl';
|
||||
import FormLabel from '@material-ui/core/FormLabel';
|
||||
|
||||
export default class Radio extends React.PureComponent {
|
||||
constructor(...args) {
|
||||
super(...args);
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
value: localStorage.getItem(this.props.name)
|
||||
};
|
||||
}
|
||||
|
||||
handleChange(value) {
|
||||
handleChange = (e) => {
|
||||
const { value } = e.target;
|
||||
|
||||
localStorage.setItem(this.props.name, value);
|
||||
|
||||
this.setState({
|
||||
@@ -26,7 +28,7 @@ export default class Radio extends React.PureComponent {
|
||||
return (
|
||||
<FormControl component='fieldset'>
|
||||
<FormLabel className='radio-title' component='legend'>{this.props.title}</FormLabel>
|
||||
<RadioGroup aria-label={this.props.name} name={this.props.name} onChange={(e) => this.handleChange(e.target.value)} value={this.state.value}>
|
||||
<RadioGroup aria-label={this.props.name} name={this.props.name} onChange={this.handleChange} value={this.state.value}>
|
||||
{this.props.options.map(option =>
|
||||
<FormControlLabel value={option.value} control={<RadioUI/>} label={option.name} key={option.name} />
|
||||
)}
|
||||
|
||||
@@ -3,22 +3,24 @@ import React from 'react';
|
||||
import { toast } from 'react-toastify';
|
||||
|
||||
export default class Slider extends React.PureComponent {
|
||||
constructor(...args) {
|
||||
super(...args);
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
value: localStorage.getItem(this.props.name) || ''
|
||||
};
|
||||
this.language = window.language.modals.main.settings;
|
||||
}
|
||||
|
||||
handleChange(value) {
|
||||
handleChange = () => {
|
||||
const { value } = e.target;
|
||||
|
||||
localStorage.setItem(this.props.name, value);
|
||||
this.setState({
|
||||
value: value
|
||||
});
|
||||
}
|
||||
|
||||
resetItem() {
|
||||
resetItem = () => {
|
||||
localStorage.setItem(this.props.name, this.props.default);
|
||||
this.setState({
|
||||
value: this.props.default
|
||||
@@ -30,8 +32,8 @@ export default class Slider extends React.PureComponent {
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
<p>{this.props.title} ({this.state.value}{this.props.display}) <span className='modalLink' onClick={() => this.resetItem()}>{this.language.buttons.reset}</span></p>
|
||||
<input className='range' type='range' min={this.props.min} max={this.props.max} value={this.state.value} onChange={(e) => this.handleChange(e.target.value)} />
|
||||
<p>{this.props.title} ({this.state.value}{this.props.display}) <span className='modalLink' onClick={this.resetItem}>{this.language.buttons.reset}</span></p>
|
||||
<input className='range' type='range' min={this.props.min} max={this.props.max} value={this.state.value} onChange={this.handleChange} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -6,14 +6,14 @@ import SwitchUI from '@material-ui/core/Switch';
|
||||
import FormControlLabel from '@material-ui/core/FormControlLabel';
|
||||
|
||||
export default class Switch extends React.PureComponent {
|
||||
constructor(...args) {
|
||||
super(...args);
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
checked: (localStorage.getItem(this.props.name) === 'true')
|
||||
};
|
||||
}
|
||||
|
||||
handleChange() {
|
||||
handleChange = () => {
|
||||
SettingsFunctions.setItem(this.props.name);
|
||||
|
||||
this.setState({
|
||||
@@ -33,7 +33,7 @@ export default class Switch extends React.PureComponent {
|
||||
return (
|
||||
<>
|
||||
<FormControlLabel
|
||||
control={<SwitchUI name={this.props.name} color='primary' checked={this.state.checked} onChange={() => this.handleChange()} />}
|
||||
control={<SwitchUI name={this.props.name} color='primary' checked={this.state.checked} onChange={this.handleChange} />}
|
||||
label={text}
|
||||
labelPlacement='start'
|
||||
/>
|
||||
|
||||
@@ -3,15 +3,17 @@ import React from 'react';
|
||||
import { toast } from 'react-toastify';
|
||||
|
||||
export default class Text extends React.PureComponent {
|
||||
constructor(...args) {
|
||||
super(...args);
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
value: localStorage.getItem(this.props.name) || ''
|
||||
};
|
||||
this.language = window.language.modals.main.settings;
|
||||
}
|
||||
|
||||
handleChange(value) {
|
||||
handleChange(e) {
|
||||
const { value } = e.target;
|
||||
|
||||
// Alex wanted font to work with montserrat and Montserrat, so I made it work
|
||||
if (this.props.upperCaseFirst === true) {
|
||||
value = value.charAt(0).toUpperCase() + value.slice(1);
|
||||
@@ -23,7 +25,7 @@ export default class Text extends React.PureComponent {
|
||||
});
|
||||
}
|
||||
|
||||
resetItem() {
|
||||
resetItem = () => {
|
||||
localStorage.setItem(this.props.name, this.props.default || '');
|
||||
this.setState({
|
||||
value: this.props.default || ''
|
||||
@@ -35,10 +37,10 @@ export default class Text extends React.PureComponent {
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
<p>{this.props.title} <span className='modalLink' onClick={() => this.resetItem()}>{this.language.buttons.reset}</span></p>
|
||||
<p>{this.props.title} <span className='modalLink' onClick={this.resetItem}>{this.language.buttons.reset}</span></p>
|
||||
{(this.props.textarea === true) ?
|
||||
<textarea className='settingsTextarea' value={this.state.value} onChange={(e) => this.handleChange(e.target.value)}/>
|
||||
:<input type='text' value={this.state.value} onChange={(e) => this.handleChange(e.target.value)}/>
|
||||
<textarea className='settingsTextarea' value={this.state.value} onChange={this.handleChange}/>
|
||||
:<input type='text' value={this.state.value} onChange={this.handleChange}/>
|
||||
}
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -5,8 +5,8 @@ import Tooltip from '@material-ui/core/Tooltip';
|
||||
const other_contributors = require('../../../../../modules/other_contributors.json');
|
||||
|
||||
export default class About extends React.PureComponent {
|
||||
constructor(...args) {
|
||||
super(...args);
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
contributors: [],
|
||||
sponsors: [],
|
||||
|
||||
@@ -11,8 +11,8 @@ import { toast } from 'react-toastify';
|
||||
import Modal from 'react-modal';
|
||||
|
||||
export default class AdvancedSettings extends React.PureComponent {
|
||||
constructor(...args) {
|
||||
super(...args);
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
resetModal: false
|
||||
};
|
||||
|
||||
@@ -18,8 +18,8 @@ export default class BackgroundSettings extends React.PureComponent {
|
||||
DefaultGradientSettings = { 'angle': '180', 'gradient': [{ 'colour': window.language.modals.main.settings.sections.background.source.disabled, 'stop': 0 }], 'type': 'linear' };
|
||||
GradientPickerInitalState = undefined;
|
||||
|
||||
constructor(...args) {
|
||||
super(...args);
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
customBackground: localStorage.getItem('customBackground') || '',
|
||||
gradientSettings: this.DefaultGradientSettings
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import React from 'react';
|
||||
|
||||
export default class Changelog extends React.PureComponent {
|
||||
constructor(...args) {
|
||||
super(...args);
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
title: this.props.language.title,
|
||||
date: null,
|
||||
|
||||
@@ -8,15 +8,15 @@ import DayPickerInput from 'react-day-picker/DayPickerInput';
|
||||
import 'react-day-picker/lib/style.css';
|
||||
|
||||
export default class GreetingSettings extends React.PureComponent {
|
||||
constructor(...args) {
|
||||
super(...args);
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
birthday: new Date(localStorage.getItem('birthday')) || new Date()
|
||||
};
|
||||
this.language = window.language.modals.main.settings;
|
||||
}
|
||||
|
||||
changeDate(data) {
|
||||
changeDate = (data) => {
|
||||
localStorage.setItem('birthday', data);
|
||||
|
||||
this.setState({
|
||||
@@ -30,18 +30,16 @@ export default class GreetingSettings extends React.PureComponent {
|
||||
return (
|
||||
<>
|
||||
<h2>{greeting.title}</h2>
|
||||
<Switch name='greeting' text={this.language.enabled} />
|
||||
<Checkbox name='events' text={greeting.events} />
|
||||
<Checkbox name='defaultGreetingMessage' text={greeting.default} />
|
||||
<Switch name='greeting' text={this.language.enabled}/>
|
||||
<Checkbox name='events' text={greeting.events}/>
|
||||
<Checkbox name='defaultGreetingMessage' text={greeting.default}/>
|
||||
<Text title={greeting.name} name='greetingName'/>
|
||||
|
||||
<h3>{greeting.birthday}</h3>
|
||||
<Switch name='birthdayenabled' text={this.language.enabled} />
|
||||
<Switch name='birthdayenabled' text={this.language.enabled}/>
|
||||
<Checkbox name='birthdayage' text='Birthday Age'/>
|
||||
<ul>
|
||||
<p>{greeting.birthday_date}</p>
|
||||
<DayPickerInput onDayChange={(data) => this.changeDate(data)} value={this.state.birthday} />
|
||||
</ul>
|
||||
<p>{greeting.birthday_date}</p>
|
||||
<DayPickerInput onDayChange={this.changeDate} value={this.state.birthday}/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -15,8 +15,8 @@ const SortableContainer = sortableContainer(({children}) => {
|
||||
});
|
||||
|
||||
export default class OrderSettings extends React.PureComponent {
|
||||
constructor(...args) {
|
||||
super(...args);
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
items: JSON.parse(localStorage.getItem('order'))
|
||||
};
|
||||
|
||||
@@ -6,8 +6,8 @@ import Switch from '../Switch';
|
||||
import Radio from '../Radio';
|
||||
|
||||
export default class TimeSettings extends React.PureComponent {
|
||||
constructor(...args) {
|
||||
super(...args);
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
timeType: localStorage.getItem('timeType') || 'digital',
|
||||
dateType: localStorage.getItem('dateType') || 'long'
|
||||
|
||||
Reference in New Issue
Block a user