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

fix: various bug fixes and refactor search settings

Browse Source
This commit is contained in:
David Ralph
2021-04-10 19:36:58 +01:00
parent dad43e969f
commit f4de44bbbb
11 changed files with 85 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/components/modals/main/settings/sections/Search.jsx
View File

@@ -1,55 +1,62 @@
import React from 'react';
import { isChrome } from 'react-device-detect';
import { toast } from 'react-toastify';
import Dropdown from '../Dropdown';
import Checkbox from '../Checkbox';
import Switch from '../Switch';
import { isChrome } from 'react-device-detect';
import { toast } from 'react-toastify';
const searchEngines = require('../../../../widgets/search/search_engines.json');
export default class SearchSettings extends React.PureComponent {
constructor() {
super();
this.state = {
customEnabled: false,
customDisplay: 'none',
customValue: localStorage.getItem('customSearchEngine') || ''
};
this.language = window.language.modals.main.settings;
}
resetSearch() {
localStorage.removeItem('customSearchEngine');
document.getElementById('customSearchEngine').value = '';
this.setState({
customValue: ''
});
toast(this.props.language.toasts.reset);
toast(window.language.modals.main.settings.toasts.reset);
}
componentDidMount() {
const searchEngine = localStorage.getItem('searchEngine');
if (searchEngine === 'custom') {
const input = document.getElementById('searchEngineInput');
input.style.display = 'block';
input.enabled = 'true';
document.getElementById('customSearchEngine').value = localStorage.getItem('customSearchEngine');
if (localStorage.getItem('searchEngine') === 'custom') {
this.setState({
customDisplay: 'block',
customEnabled: true
});
} else {
localStorage.removeItem('customSearchEngine');
}
}
componentDidUpdate() {
if (document.getElementById('searchEngineInput').enabled === 'true') {
const input = document.getElementById('customSearchEngine').value;
if (input) {
localStorage.setItem('searchEngine', 'custom');
localStorage.setItem('customSearchEngine', input);
}
if (this.state.customEnabled === true && this.state.customValue !== '') {
localStorage.setItem('customSearchEngine', this.state.customValue);
}
}
setSearchEngine(input) {
const searchEngineInput = document.getElementById('searchEngineInput');
if (input === 'custom') {
searchEngineInput.enabled = 'true';
searchEngineInput.style.display = 'block';
this.setState({
customDisplay: 'block',
customEnabled: true
});
} else {
searchEngineInput.style.display = 'none';
searchEngineInput.enabled = 'false';
this.setState({
customDisplay: 'none',
customEnabled: false
});
localStorage.setItem('searchEngine', input);
}
}
@@ -63,15 +70,18 @@ export default class SearchSettings extends React.PureComponent {
<h2>{search.title}</h2>
<Switch name='searchBar' text={language.enabled} />
{isChrome ? <Checkbox name='voiceSearch' text={search.voice_search} /> : null}
<Dropdown label={search.search_engine} name='searchEngine' onChange={(value) => this.setSearchEngine(value)}>
{searchEngines.map((engine) => (
<option key={engine.name} value={engine.settingsName}>{engine.name}</option>
))}
<option value='custom'>{search.custom.split(' ')[0]}</option>
</Dropdown>
<ul id='searchEngineInput' style={{ display: 'none' }}>
<p style={{ 'marginTop': '0px' }}>{search.custom} <span className='modalLink' onClick={() => this.resetSearch()}>{language.reset}</span></p>
<input type='text' id='customSearchEngine'></input>
<br/><br/>
<ul id='searchEngineInput' style={{ display: this.state.customDisplay }}>
<p style={{ 'marginTop': '0px' }}>{search.custom} <span className='modalLink' onClick={() => this.resetSearch()}>{language.buttons.reset}</span></p>
<input type='text' id='customSearchEngine' value={this.state.customValue} onInput={(e) => this.setState({ customValue: e.target.value })}></input>
</ul>
</>
);