fix: hot reload bugs

This commit is contained in:
David Ralph 2021-08-17 17:09:54 +01:00
parent 54e7a3a33f
commit 6ec57c75d4
10 changed files with 61 additions and 40 deletions

View File

@ -1,5 +1,7 @@
import { PureComponent } from 'react';
import EventBus from '../../../modules/helpers/eventbus';
import './autocomplete.scss';
export default class Autocomplete extends PureComponent {
@ -7,12 +9,13 @@ export default class Autocomplete extends PureComponent {
super(props);
this.state = {
filtered: [],
input: ''
input: '',
autocompleteDisabled: (localStorage.getItem('autocomplete') !== 'true')
};
}
onChange = (e) => {
if (localStorage.getItem('autocomplete') !== 'true') {
if (this.state.autocompleteDisabled) {
return this.setState({
input: e.target.value
});
@ -35,6 +38,16 @@ export default class Autocomplete extends PureComponent {
this.props.onClick(e);
};
componentDidMount() {
EventBus.on('refresh', (data) => {
if (data === 'search') {
this.setState({
autocompleteDisabled: (localStorage.getItem('autocomplete') !== 'true')
});
}
});
}
render() {
let autocomplete = null;

View File

@ -55,6 +55,7 @@ export default function AppearanceSettings() {
</Dropdown>
<h3>{appearance.accessibility.title}</h3>
{/* not supported on firefox */}
{(navigator.userAgent.includes('Chrome') && typeof InstallTrigger === 'undefined') ?
<Slider title={appearance.accessibility.widget_zoom} name='widgetzoom' default='100' step='10' min='50' max='200' display='%' category='other'/>
: null}

View File

@ -29,14 +29,14 @@ export default class GreetingSettings extends PureComponent {
<>
<h2>{greeting.title}</h2>
<Switch name='greeting' text={this.language.enabled} category='greeting' element='.greeting'/>
<Checkbox name='events' text={greeting.events} category='greeting' element='.greeting'/>
<Checkbox name='defaultGreetingMessage' text={greeting.default} category='greeting' element='.greeting'/>
<Text title={greeting.name} name='greetingName' category='greeting' element='.greeting'/>
<Slider title={window.language.modals.main.settings.sections.appearance.accessibility.widget_zoom} name='zoomGreeting' min='10' max='400' default='100' display='%' category='greeting' element='.greeting' />
<Checkbox name='events' text={greeting.events} category='greeting'/>
<Checkbox name='defaultGreetingMessage' text={greeting.default} category='greeting'/>
<Text title={greeting.name} name='greetingName' category='greeting'/>
<Slider title={window.language.modals.main.settings.sections.appearance.accessibility.widget_zoom} name='zoomGreeting' min='10' max='400' default='100' display='%' category='greeting' />
<h3>{greeting.birthday}</h3>
<Switch name='birthdayenabled' text={this.language.enabled} category='greeting' element='.greeting'/>
<Checkbox name='birthdayage' text={greeting.birthday_age} category='greeting' element='.greeting'/>
<Switch name='birthdayenabled' text={this.language.enabled} category='greeting'/>
<Checkbox name='birthdayage' text={greeting.birthday_age} category='greeting'/>
<p>{greeting.birthday_date}</p>
<input type='date' onChange={this.changeDate} value={this.state.birthday.toISOString().substr(0, 10)}/>
</>

View File

@ -60,7 +60,7 @@ export default class BackgroundSettings extends PureComponent {
return (
<>
<h2>{language.title}</h2>
<Radio name='language' options={languages} element='.language' />
<Radio name='language' options={languages} element='.other' />
<h3>{language.quote}</h3>
<Radio name='quotelanguage' options={this.state.quoteLanguages} category='quote' />
</>

View File

@ -8,11 +8,11 @@ export default function QuickLinks() {
return (
<>
<h2>{language.title}</h2>
<Switch name='quicklinksenabled' text={window.language.modals.main.settings.enabled} category='quicklinks' element='.quicklinks-container' />
<Checkbox name='quicklinksddgProxy' text={window.language.modals.main.settings.sections.background.ddg_image_proxy} element='.other' />
<Checkbox name='quicklinksnewtab' text={language.open_new} category='quicklinks' />
<Checkbox name='quicklinkstooltip' text={language.tooltip} category='quicklinks' />
<Slider title={window.language.modals.main.settings.sections.appearance.accessibility.widget_zoom} name='zoomQuicklinks' min='10' max='400' default='100' display='%' category='quicklinks' element='.quicklinks-container' />
<Switch name='quicklinksenabled' text={window.language.modals.main.settings.enabled} category='quicklinks' element='.quicklinks-container'/>
<Checkbox name='quicklinksddgProxy' text={window.language.modals.main.settings.sections.background.ddg_image_proxy} category='quicklinks'/>
<Checkbox name='quicklinksnewtab' text={language.open_new} category='quicklinks'/>
<Checkbox name='quicklinkstooltip' text={language.tooltip} category='quicklinks'/>
<Slider title={window.language.modals.main.settings.sections.appearance.accessibility.widget_zoom} name='zoomQuicklinks' min='10' max='400' default='100' display='%' category='quicklinks'/>
</>
);
}

View File

@ -27,8 +27,8 @@ export default class QuoteSettings extends PureComponent {
if (this.state.quoteType === 'custom') {
customSettings = (
<>
<Text title={quote.custom} name='customQuote' category='quote' element='.quotediv' />
<Text title={quote.custom_author} name='customQuoteAuthor' category='quote' element='.quotediv'/>
<Text title={quote.custom} name='customQuote' category='quote' />
<Text title={quote.custom_author} name='customQuoteAuthor' category='quote'/>
</>
);
} else {
@ -60,7 +60,7 @@ export default class QuoteSettings extends PureComponent {
<option value='custom'>{quote.custom}</option>
</Dropdown>
{customSettings}
<Slider title={window.language.modals.main.settings.sections.appearance.accessibility.widget_zoom} name='zoomQuote' min='10' max='400' default='100' display='%' category='quote' element='.quotediv' />
<Slider title={window.language.modals.main.settings.sections.appearance.accessibility.widget_zoom} name='zoomQuote' min='10' max='400' default='100' display='%' category='quote' />
<h3>{quote.buttons.title}</h3>
<Checkbox name='copyButton' text={quote.buttons.copy} category='quote'/>

View File

@ -89,7 +89,7 @@ export default class SearchSettings extends PureComponent {
<input type='text' value={this.state.customValue} onInput={(e) => this.setState({ customValue: e.target.value })}></input>
</ul>
<br/>
<Checkbox name='autocomplete' text={search.autocomplete} category='search' element='.other'/>
<Checkbox name='autocomplete' text={search.autocomplete} category='search' />
<Radio title={search.autocomplete_provider} options={autocompleteProviders} name='autocompleteProvider' category='search'/>
</>
);

View File

@ -35,21 +35,21 @@ export default class TimeSettings extends PureComponent {
const digitalSettings = (
<>
<h3>{time.digital.title}</h3>
<Radio title={time.format} name='timeformat' options={digitalOptions} smallTitle={true} category='clock' element='.clock-container' />
<Radio title={time.format} name='timeformat' options={digitalOptions} smallTitle={true} category='clock' />
<br/>
<Checkbox name='seconds' text={time.digital.seconds} category='clock' element='.clock-container' />
<Checkbox name='zero' text={time.digital.zero} category='clock' element='.clock-container' />
<Checkbox name='seconds' text={time.digital.seconds} category='clock' />
<Checkbox name='zero' text={time.digital.zero} category='clock' />
</>
);
const analogSettings = (
<>
<h3>{time.analogue.title}</h3>
<Checkbox name='secondHand' text={time.analogue.second_hand} category='clock' element='.clock-container' />
<Checkbox name='minuteHand' text={time.analogue.minute_hand} category='clock' element='.clock-container' />
<Checkbox name='hourHand' text={time.analogue.hour_hand} category='clock' element='.clock-container' />
<Checkbox name='hourMarks' text={time.analogue.hour_marks} category='clock' element='.clock-container' />
<Checkbox name='minuteMarks' text={time.analogue.minute_marks} category='clock' element='.clock-container' />
<Checkbox name='secondHand' text={time.analogue.second_hand} category='clock' />
<Checkbox name='minuteHand' text={time.analogue.minute_hand} category='clock' />
<Checkbox name='hourHand' text={time.analogue.hour_hand} category='clock' />
<Checkbox name='hourMarks' text={time.analogue.hour_marks} category='clock' />
<Checkbox name='minuteMarks' text={time.analogue.minute_marks} category='clock' />
</>
);
@ -63,21 +63,21 @@ export default class TimeSettings extends PureComponent {
const longSettings = (
<>
<Checkbox name='dayofweek' text={time.date.day_of_week} category='date' element='.date' />
<Checkbox name='datenth' text={time.date.datenth} category='date' element='.date' />
<Checkbox name='dayofweek' text={time.date.day_of_week} category='date' />
<Checkbox name='datenth' text={time.date.datenth} category='date' />
</>
);
const shortSettings = (
<>
<br/>
<Dropdown label={time.date.short_format} name='dateFormat' category='date' element='.date'>
<Dropdown label={time.date.short_format} name='dateFormat' category='date'>
<option value='DMY'>DMY</option>
<option value='MDY'>MDY</option>
<option value='YMD'>YMD</option>
</Dropdown>
<br/><br/>
<Dropdown label={time.date.short_separator.title} name='shortFormat' category='date' element='.date'>
<Dropdown label={time.date.short_separator.title} name='shortFormat' category='date'>
<option value='dots'>{time.date.short_separator.dots}</option>
<option value='dash'>{time.date.short_separator.dash}</option>
<option value='gaps'>{time.date.short_separator.gaps}</option>
@ -96,27 +96,27 @@ export default class TimeSettings extends PureComponent {
<>
<h2>{time.title}</h2>
<Switch name='time' text={this.language.enabled} category='clock' element='.clock-container' />
<Dropdown label={time.type} name='timeType' onChange={(value) => this.setState({ timeType: value })} category='clock' element='.clock-container'>
<Dropdown label={time.type} name='timeType' onChange={(value) => this.setState({ timeType: value })} category='clock'>
<option value='digital'>{time.digital.title}</option>
<option value='analogue'>{time.analogue.title}</option>
<option value='percentageComplete'>{time.percentage_complete}</option>
</Dropdown>
{timeSettings}
{this.state.timeType !== 'analogue' ?
<Slider title={window.language.modals.main.settings.sections.appearance.accessibility.widget_zoom} name='zoomClock' min='10' max='400' default='100' display='%' category='clock' element='.clock-container' />
<Slider title={window.language.modals.main.settings.sections.appearance.accessibility.widget_zoom} name='zoomClock' min='10' max='400' default='100' display='%' category='clock'/>
: null}
<h3>{time.date.title}</h3>
<Switch name='date' text={this.language.enabled} category='date' element='.date'/>
<Dropdown label={time.type} name='dateType' onChange={(value) => this.setState({ dateType: value })} category='date' element='.date'>
<Dropdown label={time.type} name='dateType' onChange={(value) => this.setState({ dateType: value })} category='date'>
<option value='long'>{time.date.type.long}</option>
<option value='short'>{time.date.type.short}</option>
</Dropdown>
<br/>
<Checkbox name='datezero' text={time.digital.zero} category='date' element='.date' />
<Checkbox name='weeknumber' text={time.date.week_number} category='date' element='.date'/>
<Checkbox name='datezero' text={time.digital.zero} category='date'/>
<Checkbox name='weeknumber' text={time.date.week_number} category='date'/>
{dateSettings}
<Slider title={window.language.modals.main.settings.sections.appearance.accessibility.widget_zoom} name='zoomDate' min='10' max='400' default='100' display='%' category='date' element='.date' />
<Slider title={window.language.modals.main.settings.sections.appearance.accessibility.widget_zoom} name='zoomDate' min='10' max='400' default='100' display='%' category='date'/>
</>
);
}

View File

@ -121,7 +121,7 @@ export default class BackgroundSettings extends PureComponent {
))}
</Dropdown>
<br/><br/>
<Dropdown label={background.source.quality.title} name='apiQuality' category='background' element='.other'>
<Dropdown label={background.source.quality.title} name='apiQuality' element='.other'>
<option value='original'>{background.source.quality.original}</option>
<option value='high'>{background.source.quality.high}</option>
<option value='normal'>{background.source.quality.normal}</option>
@ -166,9 +166,9 @@ export default class BackgroundSettings extends PureComponent {
<>
<h2>{background.title}</h2>
<Switch name='background' text={this.language.enabled} category='background' element='#backgroundImage' />
<Checkbox name='ddgProxy' text={background.ddg_image_proxy} />
<Checkbox name='bgtransition' text={background.transition} />
<Checkbox name='photoInformation' text={background.photo_information} category='background' element='.other' />
<Checkbox name='ddgProxy' text={background.ddg_image_proxy} element='.other' />
<Checkbox name='bgtransition' text={background.transition} element='.other' />
<Checkbox name='photoInformation' text={background.photo_information} element='.other' />
<h3>{background.source.title}</h3>
<Dropdown label={background.type.title} name='backgroundType' onChange={(value) => this.setState({ backgroundType: value })} category='background'>

View File

@ -211,6 +211,13 @@ export default class Quote extends PureComponent {
element.style.display = 'block';
this.init();
// buttons hot reload
this.setState({
favourited: this.useFavourite(),
tweet: (localStorage.getItem('tweetButton') === 'false') ? null : this.buttons.tweet,
copy: (localStorage.getItem('copyButton') === 'false') ? null : this.buttons.copy
});
}
// uninstall quote pack reverts the quote to what you had previously