mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-07-27 02:31:06 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor: new settings components

Browse Source
This commit is contained in:
David Ralph
2021-03-21 13:09:06 +00:00
parent f6564fa758
commit d99cc7869a
10 changed files with 182 additions and 253 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
src/components/modals/main/settings/sections/Quote.jsx
View File

@@ -1,69 +1,23 @@
import React from 'react';
import Checkbox from '../Checkbox';
import Text from '../Text';
import { toast } from 'react-toastify';
export default function QuoteSettings(props) {
const { quote } = window.language.modals.main.settings.sections;
export default class QuoteSettings extends React.PureComponent {
constructor(...args) {
super(...args);
this.state = {
customQuote: localStorage.getItem('customQuote') || '',
customQuoteAuthor: localStorage.getItem('customQuoteAuthor') || 'Unknown'
};
this.language = window.language.modals.main.settings;
}
return (
<div>
<h2>{quote.title}</h2>
<Checkbox name='quote' text={window.language.modals.main.settings.enabled}/>
<Checkbox name='authorLink' text={quote.author_link}/>
<Text title={quote.custom} name='customQuote'/>
<Text title={quote.custom_author} name='customQuoteAuthor'/>
resetItem(key) {
switch (key) {
case 'customQuote':
localStorage.setItem('customQuote', '');
this.setState({
customQuote: ''
});
break;
case 'customQuoteAuthor':
localStorage.setItem('customQuoteAuthor', '');
this.setState({
customQuoteAuthor: 'Unknown'
});
break;
default:
toast('resetItem requires a key!');
}
toast(this.language.toasts.reset);
}
componentDidUpdate() {
localStorage.setItem('customQuote', this.state.customQuote);
localStorage.setItem('customQuoteAuthor', this.state.customQuoteAuthor);
}
render() {
const { quote } = this.language.sections;
return (
<div>
<h2>{quote.title}</h2>
<Checkbox name='quote' text={this.language.enabled}/>
<Checkbox name='authorLink' text={quote.author_link}/>
<ul>
<p>{quote.custom} <span className='modalLink' onClick={() => this.resetItem('customQuote')}>{this.language.buttons.reset}</span></p>
<input type='text' value={this.state.customQuote} onChange={(e) => this.setState({ customQuote: e.target.value })}></input>
</ul>
<ul>
<p>{quote.custom_author} <span className='modalLink' onClick={() => this.resetItem('customQuoteAuthor')}>{this.language.buttons.reset}</span></p>
<input type='text' value={this.state.customQuoteAuthor} onChange={(e) => this.setState({ customQuoteAuthor: e.target.value })}></input>
</ul>
<h3>{quote.buttons.title}</h3>
<Checkbox name='copyButton' text={quote.buttons.copy}/>
<Checkbox name='tweetButton' text={quote.buttons.tweet}/>
<Checkbox name='favouriteQuoteEnabled' text={quote.buttons.favourite}/>
</div>
);
}
}
<h3>{quote.buttons.title}</h3>
<Checkbox name='copyButton' text={quote.buttons.copy}/>
<Checkbox name='tweetButton' text={quote.buttons.tweet}/>
<Checkbox name='favouriteQuoteEnabled' text={quote.buttons.favourite}/>
</div>
);
}